/* =========================================================================
   Find My Routes — redesign
   Figma: Redesign / Find_My_routes_Map_Elements (node 10318-11139)
   Palette: teal #3c7b86 / #2d5c65, accent bg #e0eeef, muted #808080
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --fmr-teal: #3c7b86;
    --fmr-teal-dark: #2d5c65;
    --fmr-accent: #e0eeef;
    --fmr-accent-line: #d0e3e6;
    --fmr-ink: #1a1a1a;
    --fmr-muted: #606060;
    --fmr-muted-2: #808080;
    --fmr-pin: #0f172a;
    --fmr-pin-address: #1e6fcc;
    --fmr-pin-school: #3c7b86;
    --fmr-pin-stop: #f59e0b;
    --fmr-panel-w: 360px;
}

/* ---- Public page header --------------------------------------------------- */
/* Only rendered by crosswalk/public_find_my_routes.php, which has no menu.php.
   Height matches the 54px the panel and map below already offset for, so the
   bar fills that space exactly rather than shifting the layout. Inert on the
   in-app page, where the element does not exist. */
.fmr-public-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    background: #fff;
    box-shadow: 0 0 3px rgb(0 0 0 / 10%);
    /* Above the panel (3) and the map, both of which are fixed. */
    z-index: 5;
}

.fmr-public-logo {
    width: 35px;
    height: auto;
}

.fmr-public-district {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.3rem;
    color: var(--fmr-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Layout -------------------------------------------------------------- */
/* Scope Inter to the panel via inheritance. Do NOT use `.fmr-panel *` — it
   would override the icon-font `font-family` on `.material-symbols-outlined`
   (equal specificity, but this sheet loads later) and break the glyphs. */
.fmr-panel {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Form controls reset font-family, so opt them back into Inter explicitly. */
.fmr-panel button,
.fmr-panel input,
.fmr-panel select,
.fmr-panel textarea {
    font-family: inherit;
}

.fmr-panel {
    position: fixed;
    top: 54px;
    left: 0;
    width: var(--fmr-panel-w);
    height: calc(100% - 54px);
    background: #fff;
    border-right: 1px solid #ececec;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    z-index: 3;
    transition: left 0.25s ease;
}

.fmr-panel.collapsed {
    left: calc(var(--fmr-panel-w) * -1);
}

/* The address/school/routes cards stay fixed at the top of the panel; only
   the route accordion list (`#routes`) scrolls. The reset button below the
   list stays pinned at the bottom of this region. */
.fmr-panel-scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fmr-panel-scroll > .fmr-card,
.fmr-panel-scroll > .fmr-reset {
    flex-shrink: 0;
}

.fmr-panel-scroll > .fmr-routes {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.fmr-map {
    top: 54px !important;
    height: calc(100% - 54px) !important;
    width: calc(100vw - var(--fmr-panel-w));
    left: var(--fmr-panel-w);
    position: fixed !important;
    min-height: 0 !important;
    transition: left 0.25s ease, width 0.25s ease;
}

.fmr-map.full {
    width: 100vw;
    left: 0;
}

/* collapse handle */
.fmr-collapse {
    position: fixed;
    top: 50%;
    left: var(--fmr-panel-w);
    transform: translateY(-50%);
    z-index: 4;
    width: 22px;
    height: 48px;
    border: 1px solid #e2e2e2;
    border-left: none;
    background: #fff;
    color: var(--fmr-teal);
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.06);
    transition: left 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fmr-collapse.collapsed {
    left: 0;
}

/* ---- Step cards ---------------------------------------------------------- */
.fmr-card {
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.fmr-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.fmr-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--fmr-ink);
}

.fmr-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--fmr-teal);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.fmr-check.pending {
    background: #cfd6d8;
}

.fmr-edit {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--fmr-teal);
    cursor: pointer;
}

.fmr-edit:hover {
    text-decoration: underline;
}

/* "Change School" only makes sense once a school has been picked — hide it
   while the school card is in its picker (editing) state. */
#schoolCard.editing #schoolEdit {
    display: none;
}

/* display (collapsed) value rows */
.fmr-value {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--fmr-muted);
}

.fmr-value .material-symbols-outlined {
    font-size: 18px;
    color: var(--fmr-muted-2);
    line-height: 1.3;
}

.fmr-school-box {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    background: #f7f8f8;
    padding: 10px 12px;
}

.fmr-school-box .fmr-school-text {
    flex: 1;
    min-width: 0;
}

.fmr-school-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--fmr-ink);
    margin: 0;
}

.fmr-school-sub {
    font-size: 11px;
    color: var(--fmr-muted-2);
    margin: 2px 0 0;
}

.fmr-school-district {
    font-size: 11px;
    color: var(--fmr-muted-2);
    margin: 1px 0 0;
}

/* zone pills under each eligible school, colored by the zone (Figma 1790-1996) */
.fmr-school-zones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.fmr-school-zone {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    line-height: 16.5px;
    color: #fff;
}

.fmr-school-zone .material-symbols-outlined {
    font-size: 13px;
    line-height: 1;
}

/* edit regions toggle */
.fmr-editing {
    display: none;
}

.fmr-card.editing .fmr-editing {
    display: block;
}

.fmr-card.editing .fmr-display {
    display: none;
}

/* address autocomplete dropdown */
#addresses {
    margin-top: 4px;
    max-height: 220px;
    overflow: auto;
    border-radius: 8px;
}

#addresses li {
    cursor: pointer;
    font-size: 13px;
    border: none;
    padding: 8px 10px;
}

#addresses li:hover {
    background: var(--fmr-teal);
    color: #fff;
}

/* ---- AM / PM pill toggle ------------------------------------------------- */
.fmr-sub {
    font-size: 13px;
    color: var(--fmr-muted-2);
    margin: 0 0 10px;
}

.fmr-toggle {
    display: flex;
    gap: 4px;
    background: #f0f0f0;
    border-radius: 10px;
    padding: 4px;
}

.fmr-toggle-btn {
    flex: 1;
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 8px 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--fmr-muted-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.fmr-toggle-btn .material-symbols-outlined {
    font-size: 16px;
}

.fmr-toggle-btn.active {
    background: #fff;
    color: var(--fmr-teal-dark);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.fmr-caption {
    font-size: 11px;
    color: var(--fmr-ink);
    margin: 10px 0 0;
    text-align: center;
}

/* ---- Route accordion ----------------------------------------------------- */
.fmr-routes {
    padding: 8px 16px 16px;
}

.fmr-empty {
    text-align: center;
    color: var(--fmr-muted-2);
    font-size: 13px;
    padding: 16px 0;
}

/* No card border/radius (per Figma) — routes are separated by a light divider
   and the selected stop fills the row edge-to-edge. */
.fmr-route {
    border-bottom: 1px solid #ededed;
    background: #fff;
}

.fmr-route-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: none;
    background: #fff;
    padding: 10px 12px;
    cursor: pointer;
    text-align: left;
}

.fmr-route-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--fmr-teal-dark);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fmr-route-icon .material-symbols-outlined {
    font-size: 18px;
}

.fmr-route-meta {
    flex: 1;
    min-width: 0;
}

.fmr-route-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--fmr-ink);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fmr-route-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--fmr-muted-2);
    margin: 1px 0 0;
}

.fmr-route-chevron {
    color: var(--fmr-muted-2);
    transition: transform 0.2s ease;
}

.fmr-route.open .fmr-route-chevron {
    transform: rotate(180deg);
}

/* Segmented AM/PM control — two equal options, the active one highlighted.
   Sits in the Routes-and-Stops card head where the Edit button used to be. */
.fmr-seg {
    display: inline-flex;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    padding: 0;
    overflow: hidden;
}

.fmr-seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 20px;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 10px;
    font-weight: 500;
    color: #404040;
    border-radius: 0;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}

.fmr-seg-btn.active {
    background: var(--fmr-teal);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.fmr-route-body {
    display: none;
    padding: 0;
}

.fmr-route.open .fmr-route-body {
    display: block;
}

/* stop rows — full width, no rounding (per Figma); content padding aligns with
   the route head (12px) so pins sit under the route's icon. */
.fmr-stop {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    border: none;
    background: #fff;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
}

.fmr-stop:hover {
    background: #f7f8f8;
}

/* selected stop: full-width light-blue band, no rounded corners, no left accent */
.fmr-stop.selected {
    background: var(--fmr-accent);
}

.fmr-stop.selected .fmr-stop-name {
    color: var(--fmr-teal-dark);
    font-weight: 600;
}

/* Numbered pin on each stop row — mirrors the live map's .fmr-stop-marker
   (teal dot, white stroke, white number) so a stop in the list is visually
   tied to its dot on the map. */
.fmr-stop-pin {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--fmr-teal);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* a stop that coincides with the school shows the navy school pin in the list,
   matching the school marker that replaces its numbered dot on the map. */
.fmr-stop-pin.school {
    background: var(--fmr-pin);
}

.fmr-stop-pin .material-symbols-outlined {
    font-size: 15px;
}

.fmr-stop-meta-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.fmr-stop-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--fmr-ink);
    margin: 0;
}

.fmr-stop-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 2px;
}

.fmr-stop-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--fmr-teal);
}

.fmr-stop-time .material-symbols-outlined {
    font-size: 13px;
}

.fmr-stop-dist {
    font-size: 11px;
    font-weight: 500;
    color: var(--fmr-muted-2);
}

/* ---- Print footer -------------------------------------------------------- */
.fmr-footer {
    flex: 0 0 auto;
    padding: 12px 16px;
    border-top: 1px solid #f0f0f0;
    background: #fff;
}

.fmr-print {
    width: 100%;
    border: 1px solid var(--fmr-teal);
    background: #fff;
    color: var(--fmr-teal);
    border-radius: 8px;
    padding: 9px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

.fmr-print:hover {
    background: var(--fmr-accent);
}

.fmr-print .material-symbols-outlined {
    font-size: 18px;
}

/* ---- Map markers --------------------------------------------------------- */
/* Design (Figma file pqgjSXVNbiUbqUnk0FrrEy, node 10318-11139):
   - Address: dark-navy teardrop pin, white home glyph
   - School:  dark-navy teardrop pin, white graduation-cap glyph
   - Stop:    white circle with teal border + teal numeric label inside */

/* Stops -------------------------------------------------------------------- */
.fmr-stop-marker {
    width: 28px;
    height: 28px;
    cursor: pointer;
}

.fmr-stop-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--fmr-teal);
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fmr-stop-marker span {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    line-height: 1;
}

/* Selected stop: a translucent light-blue halo sits around the marker (matching
   the design) and gently pulses so the map echoes the stop highlighted in the
   list on the left. The halo is a ::before that sits behind the numbered dot —
   both layers stay above the map (no negative z-index, which would hide them
   behind the Mapbox canvas). pointer-events:none keeps the marker's hit area
   to the dot itself. */
.fmr-stop-marker.selected,
.fmr-stop-marker.hover {
    position: relative;
    z-index: 6;          /* lift the highlighted stop above its neighbours */
}

.fmr-stop-marker.selected .fmr-stop-inner,
.fmr-stop-marker.hover .fmr-stop-inner {
    position: relative;
    z-index: 1;          /* dot + number stay on top of the halo */
}

.fmr-stop-marker.selected::before,
.fmr-stop-marker.hover::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;   /* center the halo on the dot */
    border-radius: 50%;
    background: rgba(60, 123, 134, 0.65);   /* --fmr-teal, darker so the pulse reads clearly */
    pointer-events: none;
    z-index: 0;
    animation: fmr-stop-pulse 1.8s ease-in-out infinite;
}

@keyframes fmr-stop-pulse {
    0%, 100% { transform: scale(0.85); opacity: 0.85; }
    50%      { transform: scale(1.15); opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .fmr-stop-marker.selected::before,
    .fmr-stop-marker.hover::before { animation: none; }
}

/* Address + School — teardrop pins ----------------------------------------- */
/* The marker root is sized so the teardrop's downward tip lands at its
   bottom-center, which is the point mapbox pins to the coordinate
   (Marker is created with anchor: 'bottom'). */
.fmr-pin-marker {
    width: 30px;
    height: 34px;
    cursor: pointer;
}

/* School + address pins always render above stop markers so a stop that
   happens to share their coordinates can't peek out from behind. */
.fmr-pin-marker.fmr-pin-school,
.fmr-pin-marker.address {
    z-index: 5;
}

.fmr-pin-marker.fmr-pin-school .fmr-pin-inner {
    background: var(--fmr-pin);
}

/* Address (home) pin: blue and ~1.35x larger than the school pin, per design
   (Figma 2278-731 — address pin 33.8x40.6 vs school pin 25x30). The root grows
   with it so the teardrop tip still lands on the pinned coordinate. */
.fmr-pin-marker.address {
    width: 40px;
    height: 46px;
}

.fmr-pin-marker.address .fmr-pin-inner {
    width: 38px;
    height: 38px;
    left: 1px;
    background: var(--fmr-pin-address);
}

.fmr-pin-marker.address .material-symbols-outlined {
    font-size: 22px;
}

/* Teardrop: a square with three rounded corners and one sharp corner, rotated
   -45deg so the sharp corner points straight down at the coordinate. */
.fmr-pin-inner {
    position: absolute;
    top: 0;
    left: 1px;
    width: 28px;
    height: 28px;
    border-radius: 50% 50% 50% 0;
    background: var(--fmr-pin);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fmr-pin-marker .material-symbols-outlined {
    color: #fff;
    font-size: 16px;
    /* counter-rotate so the glyph stays upright inside the rotated pin */
    transform: rotate(45deg);
}

/* ---- Map legend ---------------------------------------------------------- */
.fmr-legend {
    position: fixed;
    right: 16px;
    bottom: 24px;
    z-index: 3;
    width: 220px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    padding: 12px 14px;
    font-family: 'Inter', sans-serif;
}

.fmr-legend-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fmr-muted-2);
    margin: 0 0 8px;
}

/* Collapsible Legend + Zones sections. The chevron lives in the section's
   top-right corner; the label/head button is the rest of the click target. */
.fmr-legend-section {
    position: relative;
}

.fmr-legend-head {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 8px;
    cursor: pointer;
    color: var(--fmr-muted-2);
}

.fmr-legend-head .fmr-legend-label {
    margin: 0;
}

.fmr-legend-head-inline {
    margin: 0;
}

.fmr-legend-chevron {
    position: absolute;
    top: -4px;
    right: -2px;
    font-size: 26px;
    color: var(--fmr-muted-2);
    cursor: pointer;
    user-select: none;
    line-height: 1;
    transition: transform 0.2s ease;
}

.fmr-legend-section.collapsed .fmr-legend-chevron {
    transform: rotate(180deg);
}

.fmr-legend-section.collapsed .fmr-legend-body {
    display: none;
}

.fmr-legend-section.collapsed .fmr-legend-head {
    margin-bottom: 0;
}

/* Hide the zones On/Off switch while the Zones section is collapsed. */
.fmr-legend-section.collapsed .fmr-switch {
    display: none;
}

.fmr-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--fmr-ink);
    /* extra room because the rotated teardrop swatches overflow their box */
    margin-bottom: 11px;
}

/* Legend mini-markers — smaller previews of the real map markers. */
.fmr-legend-mini {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Teardrop previews to match the map markers. */
.fmr-legend-mini.address,
.fmr-legend-mini.fmr-pin-school {
    background: var(--fmr-pin);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
}

/* address swatch tracks the blue address pin */
.fmr-legend-mini.address {
    background: var(--fmr-pin-address);
}

.fmr-legend-mini .material-symbols-outlined {
    color: #fff;
    font-size: 13px;
}

/* keep the glyph upright inside the rotated teardrop preview */
.fmr-legend-mini.address .material-symbols-outlined,
.fmr-legend-mini.fmr-pin-school .material-symbols-outlined {
    transform: rotate(45deg);
}

.fmr-legend-mini.stop {
    background: var(--fmr-teal);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}

.fmr-legend hr {
    margin: 10px 0;
    border-top: 1px solid #e5e5e5;
    opacity: 1;
}

.fmr-legend-zones-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-right: 30px; /* leave room for the absolute chevron */
}

.fmr-legend-section.collapsed .fmr-legend-zones-head {
    margin-bottom: 0;
}

/* zones on/off switch */
.fmr-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--fmr-ink);
}

.fmr-switch input {
    appearance: none;
    -webkit-appearance: none;
    width: 30px;
    height: 16px;
    border-radius: 16px;
    background: #cfcfcf;
    position: relative;
    cursor: pointer;
    transition: background 0.15s ease;
    margin: 0;
}

.fmr-switch input::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    transition: left 0.15s ease;
}

.fmr-switch input:checked {
    background: var(--fmr-teal);
}

.fmr-switch input:checked::after {
    left: 16px;
}

#zones {
    max-height: 140px;
    overflow-y: auto;
}

.fmr-legend-zone {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--fmr-ink);
    margin-bottom: 6px;
    cursor: pointer;
}

/* walk/bus icon at the right of each legend zone row — always neutral grey,
   matching the design (the zone color is already conveyed by the checkbox). */
.fmr-zone-type-icon {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 16px;
    color: #808080;
}

/* Zone-row checkbox: a square outlined in the zone's color, with a colored
   check mark on toggle (matches Figma legend per-zone style). */
.fmr-zone-check {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 2px solid var(--fmr-zone-color, var(--fmr-teal));
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    margin: 0;
}

.fmr-zone-check:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    width: 4px;
    height: 8px;
    border: solid var(--fmr-zone-color, var(--fmr-teal));
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.fmr-zone-title {
    flex: 1;
    min-width: 0;
}

.fmr-legend-empty {
    font-size: 11px;
    color: var(--fmr-muted-2);
}

/* ---- Intro (subtitle + how-it-works) — persists at the top of the panel -- */
.fmr-intro {
    /* match the cards' 16px content inset so the subtitle/help box line up */
    padding: 16px 16px 0;
}

.fmr-intro-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.fmr-intro-sub {
    font-size: 13px;
    color: var(--fmr-muted-2);
    margin: 0;
}

/* "?" button that opens the help box — later screens only */
.fmr-howto-toggle {
    display: none;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--fmr-muted-2);
    padding: 2px;
    line-height: 0;
}

.fmr-howto-toggle .material-symbols-outlined {
    font-size: 20px;
}

#fmrPanel:not(.fmr-landing) .fmr-howto-toggle {
    display: inline-flex;
}

/* ---- Landing / hero (no address yet) ------------------------------------- */
/* In the landing state the address card expands into a hero heading; the
   school/route cards stay hidden. */
.fmr-hero {
    display: none;
}

.fmr-landing #addressCard .fmr-card-head,
.fmr-landing #addressCard .fmr-display {
    display: none;
}

.fmr-landing .fmr-hero {
    display: block;
    margin-bottom: 14px;
}

.fmr-landing #schoolCard,
.fmr-landing #routesCard,
.fmr-landing #routes,
.fmr-landing #resetBtn {
    display: none;
}

/* Routes and Stops stays hidden until a school has been selected */
#fmrPanel:not(.fmr-school-selected) #routesCard,
#fmrPanel:not(.fmr-school-selected) #routes {
    display: none;
}

.fmr-hero-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--fmr-ink);
    margin: 0;
}

.fmr-howto {
    display: none;
    margin: 0;
    background: #F5F9FA;
    border: 1px solid #e0eeef;
    border-radius: 10px;
    padding: 12px 14px;
}

/* first screen: the help box sits below the address input */
.fmr-landing .fmr-howto-inline {
    display: block;
    margin-top: 14px;
}

/* later screens: help box is collapsed by default; the "?" toggle opens it */
#fmrPanel:not(.fmr-landing) .fmr-howto-top.open {
    display: block;
    margin-top: 10px;
}

.fmr-howto-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fmr-teal-dark);
    margin: 0 0 6px;
}

.fmr-howto-head .material-symbols-outlined {
    font-size: 18px;
}

.fmr-howto-close {
    margin-left: auto;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--fmr-muted-2);
    padding: 0;
    display: inline-flex;
    line-height: 0;
}

.fmr-howto-steps {
    margin: 0;
    padding-left: 0;
    list-style: none;
    font-size: 12px;
    color: var(--fmr-muted);
}

.fmr-howto-steps li {
    margin-bottom: 3px;
}

/* ---- "Address outside all zones" fallback warning (Figma 1879-4149) ------ */
.fmr-zone-warning {
    display: none;
    gap: 10px;
    align-items: flex-start;
    background: #fef6ee;
    border: 0.5px solid #b47330;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

/* shown only while choosing a school after an out-of-zone address */
#schoolCard.no-zone.editing .fmr-zone-warning {
    display: flex;
}

.fmr-zone-warning-icon {
    color: #b47330;
    font-size: 20px;
    flex-shrink: 0;
}

.fmr-zone-warning-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    color: #93370d;
}

.fmr-zone-warning-body {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: #b47330;
}

/* ---- Eligible-school chooser (Select a School) --------------------------- */
.fmr-school-head {
    margin: 0 0 2px;
}

.fmr-school-search {
    position: relative;
    margin-top: 8px;
}

.fmr-school-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--fmr-muted-2);
    pointer-events: none;
}

.fmr-school-search input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dadce2;
    border-radius: 10px;
    background: #fff;
    padding: 12px 16px 12px 40px;
    font-size: 14px;
    line-height: 17px;
    color: var(--fmr-ink);
}

.fmr-school-search input::placeholder {
    color: var(--fmr-muted-2);
}

.fmr-school-search input:focus {
    outline: none;
    border-color: var(--fmr-teal);
}

.fmr-school-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

/* While choosing a school, let the chooser fill the remaining panel height
   and scroll the list internally — otherwise a long list overflows the
   `overflow:hidden` panel-scroll area and the bottom schools are unreachable.
   The (empty) route list below must not claim flex space during this step. */
#schoolCard.editing {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#schoolCard.editing .fmr-editing {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#schoolCard.editing .fmr-school-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}

#schoolCard.editing ~ #routes {
    flex: 0 0 auto;
}

.fmr-school-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    border: 1px solid #ededed;
    border-radius: 10px;
    background: #fff;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.fmr-school-option:hover {
    border-color: var(--fmr-teal);
    background: #f7fbfb;
}

.fmr-school-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--fmr-accent);
    color: var(--fmr-teal-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fmr-school-icon .material-symbols-outlined {
    font-size: 18px;
}

.fmr-school-option .fmr-school-text {
    flex: 1;
    min-width: 0;
}

/* ---- Routes card: browse sub-header + note ------------------------------- */
.fmr-note {
    font-size: 11px;
    color: #9a6a00;
    background: #fff6e5;
    border: 1px solid #ffe2ab;
    border-radius: 8px;
    padding: 7px 10px;
    margin-bottom: 10px;
}

/* ---- "No Routes Available" alert ----------------------------------------- */
.fmr-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff6e5;
    border: 1px solid #ffe2ab;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}

.fmr-alert .material-symbols-outlined {
    font-size: 20px;
    color: #d98e00;
    flex-shrink: 0;
}

.fmr-alert-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--fmr-ink);
    margin: 0 0 2px;
}

.fmr-alert-text {
    font-size: 12px;
    color: var(--fmr-muted);
    margin: 0;
}

.fmr-see-all {
    width: 100%;
    border: none;
    background: var(--fmr-teal-dark);
    color: #fff;
    border-radius: 8px;
    padding: 11px;
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

.fmr-see-all:hover {
    background: var(--fmr-teal);
}

.fmr-see-all .material-symbols-outlined {
    font-size: 18px;
}

.fmr-contact {
    font-size: 11px;
    color: var(--fmr-muted-2);
    text-align: center;
    margin: 10px 0 0;
}

/* ---- Selected-route summary (sticky card for selected stop) ------------- */
.fmr-route-summary {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: #f0f0f0;
    border-radius: 10px;
    padding: 9px 11px 9px 16px;
}

/* "Show All" is unused — no drill-down state to escape from. */
#routesEdit { display: none; }

#routesCard.has-selection .fmr-route-summary {
    display: flex;
}

/* No stop selected yet — only show the route row in the sticky card. */
#routesCard:not(.has-stop) .fmr-summary-stop-name,
#routesCard:not(.has-stop) .fmr-summary-meta {
    display: none;
}

.fmr-summary-route {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.fmr-summary-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--fmr-teal-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fmr-summary-icon .material-symbols-outlined {
    color: #fff;
    font-size: 18px;
}

.fmr-summary-route-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--fmr-ink);
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fmr-summary-stop-name {
    font-size: 12px;
    font-weight: 400;
    color: var(--fmr-ink);
    margin: 0;
}

.fmr-summary-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fmr-summary-time {
    font-size: 12px;
    font-weight: 500;
    color: var(--fmr-teal-dark);
}

.fmr-summary-sep {
    font-size: 10px;
    color: var(--fmr-muted-2);
}

.fmr-summary-dist {
    font-size: 11px;
    font-weight: 400;
    color: var(--fmr-muted-2);
}

/* route list stays visible after a stop is chosen so the user can browse
   "Other routes and stops" while the selection sticks at the top. */

/* ---- "Find Routes for New Address" reset --------------------------------- */
.fmr-reset {
    display: none;
    width: calc(100% - 32px);
    margin: 0 16px 16px;
    border: 1px solid var(--fmr-teal);
    background: #fff;
    color: var(--fmr-teal);
    border-radius: 8px;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

.fmr-reset.show {
    display: inline-flex;
}

.fmr-reset:hover {
    background: var(--fmr-accent);
}

.fmr-reset .material-symbols-outlined {
    font-size: 18px;
}

/* ---- Mobile -------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --fmr-panel-w: 100vw;
    }

    .fmr-map {
        width: 100vw;
        left: 0;
    }

    .fmr-legend {
        width: 180px;
    }
}

/* ---- Printable document -------------------------------------------------- */
/* ============================================================================
   Address tooltip — shown when clicking the map to set the address
   (Figma node 1880-4985). Dark card with address + coordinates.
   ========================================================================== */
.fmr-addr-popup .mapboxgl-popup-content {
    background: rgba(30, 41, 59, 0.92);
    color: #fff;
    border-radius: 10px;
    padding: 12px 16px 14px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.fmr-addr-popup .mapboxgl-popup-close-button {
    color: #fff;
    font-size: 18px;
    line-height: 1;
    padding: 4px 8px;
    top: 2px;
    right: 2px;
}

.fmr-addr-pop-name {
    margin: 0 0 10px;
    padding-right: 18px;   /* clear the close (X) button in the top-right */
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
}

/* "Use Address" confirm button — white pill with navy border + label, matching
   the Figma handoff. Confirms the previewed map pick as the student address. */
.fmr-addr-pop-use {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px 12px;
    background: #fff;
    color: #001c2f;
    border: 1px solid #001c2f;
    border-radius: 9px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.fmr-addr-pop-use:hover {
    background: #f1f5f9;
}

.fmr-addr-pop-use .material-symbols-outlined {
    font-size: 18px;
}

/* dark popup tip, for whichever anchor Mapbox picks */
.fmr-addr-popup.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.fmr-addr-popup.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.fmr-addr-popup.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
    border-bottom-color: rgba(30, 41, 59, 0.92);
}

.fmr-addr-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.fmr-addr-popup.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.fmr-addr-popup.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
    border-top-color: rgba(30, 41, 59, 0.92);
}

.fmr-addr-popup.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
    border-right-color: rgba(30, 41, 59, 0.92);
}

.fmr-addr-popup.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
    border-left-color: rgba(30, 41, 59, 0.92);
}

/* school pin tooltip — opened from a listed school's map pin; shows the school
   name, grades + distance, and a "Select School" button. Dark card to match the
   address/stop popups. */
.fmr-school-popup .mapboxgl-popup-content {
    background: rgba(30, 41, 59, 0.92);
    color: #fff;
    border-radius: 10px;
    padding: 12px 16px 14px;
    width: 300px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.fmr-school-popup .mapboxgl-popup-close-button {
    color: #fff;
    font-size: 18px;
    line-height: 1;
    padding: 4px 8px;
    top: 2px;
    right: 2px;
}

.fmr-school-pop-name {
    margin: 0 0 2px;
    padding-right: 18px;   /* clear the close (X) button */
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
}

.fmr-school-pop-sub {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 16px;
    color: #cbd5e1;
}

.fmr-school-popup.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.fmr-school-popup.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.fmr-school-popup.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
    border-bottom-color: rgba(30, 41, 59, 0.92);
}

.fmr-school-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.fmr-school-popup.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.fmr-school-popup.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
    border-top-color: rgba(30, 41, 59, 0.92);
}

.fmr-school-popup.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
    border-right-color: rgba(30, 41, 59, 0.92);
}

.fmr-school-popup.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
    border-left-color: rgba(30, 41, 59, 0.92);
}

/* stop tooltip — opened on stop-row click; shows name, ETA, distance-from-home */
.fmr-stop-popup .mapboxgl-popup-content {
    background: #1e293b;
    color: #fff;
    border-radius: 10px;
    padding: 15px 48px 18px 16px;
    width: 320px;
    text-align: left;
    box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
}

.fmr-stop-popup .mapboxgl-popup-close-button {
    color: #fff;
    font-size: 18px;
    line-height: 1;
    padding: 4px 8px;
    top: 8px;
    right: 8px;
}

/* Address info tooltip: tall, airy box matching Figma 2284-1379 — generous
   vertical padding so the address sits high with room below, the close button
   pinned in the top-right corner clear of the text. */
.fmr-addr-info-popup .mapboxgl-popup-content {
    padding: 22px 20px 28px;
    min-height: 82px;
}

.fmr-addr-info-popup .fmr-popup-name {
    padding-right: 24px;   /* keep the address text from sliding under the corner X */
    line-height: 24px;
}

.fmr-addr-info-popup .mapboxgl-popup-close-button {
    top: 6px;
    right: 6px;
}

.fmr-popup-name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    color: #fff;
}

.fmr-popup-route {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    line-height: 15px;
    color: #99a1af;
}

.fmr-popup-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.fmr-popup-tag {
    background: #364153;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 15px;
    color: #e5e7eb;
    white-space: nowrap;
}

.fmr-popup-dist {
    font-size: 11px;
    font-weight: 500;
    line-height: 15px;
    color: #e5e7eb;
    white-space: nowrap;
}

.fmr-stop-popup.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.fmr-stop-popup.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.fmr-stop-popup.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
    border-bottom-color: #1e293b;
}

.fmr-stop-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.fmr-stop-popup.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.fmr-stop-popup.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
    border-top-color: #1e293b;
}

.fmr-stop-popup.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
    border-right-color: #1e293b;
}

.fmr-stop-popup.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
    border-left-color: #1e293b;
}

/* ============================================================================
   Print / preview document — SHARED styles
   These .fmrp-* rules style BOTH the real print document (#fmrPrint, shown only
   via @media print) and the live A4 pages inside the Export Options modal
   (.fmr-export-page). Print-only behaviour (hiding app chrome, @page, the fixed
   footer, page-break rules) lives in the @media print block further down.
   Layout follows the FMR print designs (Figma 1749-6728 = all routes,
   1749-6632 = selected route, 1749-6477 = export modal).
   ========================================================================== */
#fmrPrint {
    display: none;   /* shown only in @media print */
}

.fmrp-doc {
    font-family: 'Inter', Arial, sans-serif;
    color: #1a1a1a;
}

/* header: logo left, title right */
.fmrp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.fmrp-logo {
    height: 44px;
    width: auto;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

.fmrp-title {
    font-size: 26px;
    font-weight: 400;
    color: #191c1d;
    margin: 0;
}

/* identity cards */
.fmrp-identity {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.fmrp-card {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    padding: 17px;
}

.fmrp-card-wide {
    flex-basis: 100%;
}

.fmrp-card-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #808080;
}

.fmrp-card-label .material-symbols-outlined {
    font-size: 18px;
}

.fmrp-card-primary {
    margin: 8px 0 0;
    font-size: 18px;
    line-height: 28px;
}

.fmrp-card-secondary {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
}

/* placeholder shown in the Route and Stop Info card when nothing is selected */
.fmrp-card-empty {
    text-align: center;
}

/* section heading above each table */
.fmrp-section-head {
    margin: 6px 0 12px;
    padding-left: 8px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #1a1a1a;
}

/* tables */
.fmrp-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 14px;
    font-size: 16px;
}

/* The global stylesheet has `thead { background-color: #6c757d !important }`,
   a dark grey that would otherwise win. Override it on both the thead and the
   th (higher specificity + !important) so the header shows the light grey from
   the design with dark text, on screen and in print alike. */
.fmrp-table thead,
.fmrp-table thead tr {
    background: #e5e5e5 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

.fmrp-table thead th {
    background: #e5e5e5 !important;
    color: #1a1a1a !important;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    padding: 12px !important;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.14px;
    text-align: left;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

.fmrp-table tbody td {
    border: 1px solid #d9d9d9;
    padding: 10px 16px;
    line-height: 28px;
}

.fmrp-cell-num {
    width: 64px;
    text-align: center;
}

/* Schools a route serves, listed under the route name so the route itself is
   printed only once even when it is assigned to several schools. */
.fmrp-route-schools {
    display: block;
    font-size: 11px;
    line-height: 15px;
    color: #555;
}

.fmrp-cell-right {
    text-align: right;
}

/* keep the right-hand header column right-aligned (overrides the
   default left-aligned header cells) */
.fmrp-table thead .fmrp-cell-right {
    text-align: right;
}

/* all-routes table: AM/PM header centered, AM/PM data left-aligned */
.fmrp-table--routes thead .fmrp-cell-num {
    text-align: center;
}

.fmrp-table--routes tbody .fmrp-cell-num {
    text-align: left;
}

/* selected-route table: # header left-aligned (body badges stay centered) */
.fmrp-table--stops thead .fmrp-cell-num {
    text-align: left;
}

.fmrp-row-active td {
    font-weight: 700;
}

/* stop-number badge */
.fmrp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    background: #737685 !important;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

.fmrp-badge.active {
    background: #1a1a1a !important;
}

/* route map snapshot */
.fmrp-map {
    position: relative;                 /* anchor for the overlaid stop markers */
    max-width: 7.5in;                   /* caps height ~4.8in at print width, no letterbox */
    margin-top: 8px;
    margin-bottom: 14px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
}

.fmrp-map-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Circular numbered stop markers overlaid on the static map image at their
   projected positions — mirrors the live map's .fmr-stop-marker (teal dot,
   white stroke). Anchored so the dot's bottom sits on the stop coordinate. */
.fmrp-stop {
    position: absolute;
    transform: translate(-50%, -100%);
}

.fmrp-stop-dot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--fmr-teal) !important;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    color: #fff !important;
    font: 700 12px 'Inter', sans-serif;
    line-height: 1;
    /* force the teal fill + white number to print (browsers drop backgrounds) */
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

/* Selected stop on the print map: a static translucent teal halo behind the
   dot — the print-friendly echo of the live map's pulsing .fmr-stop-marker
   .selected halo. Print can't animate, so this is the pulse's resting state,
   keeping the chosen stop distinguishable among many on the screenshot. */
.fmrp-stop.selected::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;   /* center the halo on the 24px dot */
    border-radius: 50%;
    background: rgba(60, 123, 134, 0.65);   /* --fmr-teal, matching the live halo */
    z-index: 0;                /* sit behind the dot (z-index: 1) */
    /* force the translucent fill to print (browsers drop backgrounds) */
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

/* footer */
.fmrp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 6px;
    background: #fff;
    opacity: 0.7;
    font-size: 14px;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

.fmrp-footer-gen {
    font-size: 16px;
}

@media print {
    /* hide the live app chrome, show only the print document */
    body > *:not(#fmrPrint) {
        display: none !important;
    }

    /* belt-and-suspenders: the live Mapbox map is position:fixed, so if it ever
       sits outside the direct-child hide above it would paint over every page.
       Hide it and its controls explicitly regardless of nesting. */
    #map,
    .fmr-map,
    .mapboxgl-canvas,
    .mapboxgl-control-container,
    #fmrCollapse,
    .mapIcon_menu,
    #mapOptions {
        display: none !important;
    }

    @page {
        size: letter;
        margin: 0.5in;
    }

    html, body {
        background: #fff !important;
    }

    #fmrPrint {
        display: block;
        padding-bottom: 40px;
    }

    /* footer repeats at the bottom of every printed page */
    .fmrp-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }

    /* The map sits below the stops table. break-inside:avoid relocates it whole
       to the next page when it won't fit on page one; the footer-sized bottom
       margin is counted in that fit check so it never lands under the footer. */
    .fmrp-map {
        margin-bottom: 0.35in;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* avoid breaking a table row across pages */
    .fmrp-table tr {
        page-break-inside: avoid;
    }
}

/* ============================================================================
   Print Options modal (pre-print) — Bootstrap modal, Figma node 1749-6477
   The Bootstrap .modal handles the backdrop, fade, Escape and static-backdrop
   (no close on outside click). These rules only lay out the two custom panes.
   ========================================================================== */
.fmr-print-dialog {
    max-width: 1100px;
    width: 96vw;
}

.fmr-print-content {
    flex-direction: row;       /* override Bootstrap's column .modal-content */
    height: min(880px, 90vh);
    border: 0;
    border-radius: 10px;
    overflow: hidden;
}

/* ---- left options panel ---- */
.fmr-export-side {
    display: flex;
    flex-direction: column;
    width: 296px;
    flex: 0 0 296px;
    border-right: 1px solid #e5e5e5;
}

.fmr-export-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #e5e5e5;
}

.fmr-export-head h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: #1a1a1a;
    letter-spacing: -0.4px;
}

.fmr-export-close {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #808080;
    display: flex;
    padding: 2px;
    border-radius: 4px;
}

.fmr-export-close:hover {
    background: #f0f1f2;
    color: #1a1a1a;
}

.fmr-export-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px;
}

.fmr-export-label {
    margin: 0 0 16px;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #808080;
}

.fmr-export-opts {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fmr-export-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 44px;
    padding-left: 8px;
    background: #fafafa;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
}

.fmr-export-opt.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.fmr-export-check {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.fmr-export-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fff;
    flex: 0 0 20px;
}

.fmr-export-box .material-symbols-outlined {
    font-size: 16px;
    color: #fff;
    opacity: 0;
}

.fmr-export-check:checked + .fmr-export-box {
    background: #3c7b86;
    border-color: #3c7b86;
}

.fmr-export-check:checked + .fmr-export-box .material-symbols-outlined {
    opacity: 1;
}

.fmr-export-check:focus-visible + .fmr-export-box {
    outline: 2px solid #3c7b86;
    outline-offset: 2px;
}

.fmr-export-opt-text {
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    letter-spacing: -0.25px;
}

.fmr-export-foot {
    padding: 20px;
    border-top: 1px solid #e5e5e5;
}

.fmr-export-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 4px;
    background: #3c7b86;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.fmr-export-btn:hover {
    background: #336a73;
}

.fmr-export-btn:disabled {
    background: #b9c6c9;
    cursor: not-allowed;
}

.fmr-export-btn .material-symbols-outlined {
    font-size: 20px;
}

/* ---- right preview pane ---- */
.fmr-export-preview {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background: #f0f1f2;
    min-width: 0;
}

.fmr-export-preview-label {
    margin: 0;
    padding: 16px;
    text-align: center;
    font-size: 14px;
    color: #808080;
}

.fmr-export-pages-wrap {
    flex: 1 1 auto;
    overflow: auto;
    padding: 24px 24px 16px;
    display: flex;
    justify-content: center;
}

/* JS shows one page at a time; each page is a true-size sheet scaled to fit. */
.fmr-export-page {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.fmr-export-page.hidden {
    display: none;
}

/* the print margin, rendered inside each preview sheet */
.fmr-export-page .fmrp-doc {
    position: absolute;
    inset: 48px;        /* 0.5in @ 96dpi */
}

.fmr-export-page .fmrp-footer {
    position: absolute;
    left: 48px;
    right: 48px;
    bottom: 32px;
}

.fmr-export-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #fff;
    border-radius: 8px;
    margin: 0 16px 12px;
    padding: 12px 20px;
    min-height: 56px;
}

.fmr-export-pager-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fmr-pager-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #1a1a1a;
    cursor: pointer;
}

.fmr-pager-arrow:hover:not(:disabled) {
    background: #f0f1f2;
}

.fmr-pager-arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

.fmr-pager-nums {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fmr-pager-num {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #1a1a1a;
    font-size: 14px;
    cursor: pointer;
}

.fmr-pager-num.active {
    background: #3c7b86;
    color: #fff;
    font-weight: 600;
}

.fmr-pager-count {
    position: absolute;
    right: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #808080;
}