/*==================== MAP CHROME — the controls that float over the maps, below 960px ====================
  One set of controls for the three globe pages on phones and tablets: Personal Space
  (space.html) and the two trips, Interrail and Rhodes (trip.js). Each page says where they
  go; this sheet says what they look like, and src/js/map-sheet.js moves the sheet. From
  960px the pages keep their own framed boxes: nothing below applies there.

    .mc-chip    a readout: a small rounded label (the stop, the coordinates)
    .mc-tag     the ink pill in a chip or a sheet (a time, a chapter)
    .mc-seg     a segmented control (split | map | text): an ink thumb slides behind the
                pressed button (aria-pressed); its buttons are the 44px targets
    .mc-btn     a pill button with an icon (focus map, back to text)
    .mc-zoom    + and − in one vertical pill
    .mc-round   a round 44px icon button (the sheet's previous and next)
    .mc-sheet   the card at the foot of a full-screen map: a grabber, the item in view, the way
                to the others. Swipe it sideways to step; drag it down to a one-line peek and
                up again (map-sheet.js). It carries the zoom pill above its right end.
    .mc-map     on a globe's host: its pin labels become small rounded tags, ink for the pin
                that matters most (.mc-key: the stop in view, home), paper for the rest
    .mc-pintag  the same tag outside the engine's pins (the names fanned beside close marks)

  Surfaces are paper at 85% over a blur of the map (solid paper where the browser cannot
  blur), ringed by a hairline and lifted by a soft shadow: they float over the map rather than
  frame it. Type is the site's: Space Mono for data and controls, Poppins for names. Ink,
  paper and greys only.

  Motion is one family. A control answers a press at once (scale .97) and slides on a strong
  ease-out in about 220ms; the sheet moves on the iOS drawer curve. All of it is transitions,
  so a touch can catch it mid-way, and none of it runs with reduced motion. */

/* read by screen readers only (the sheet's spoken line) */
.mc-sr { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media screen and (max-width: 959px) {
    :root {
        --mc-ink: #111;
        --mc-paper: #fcfcfc;                          /* the page's --body-color */
        --mc-dim: #6b6b6b;
        --mc-glass: rgba(252, 252, 252, .96);         /* no blur to be had: near-solid paper */
        --mc-line: rgba(17, 17, 17, .1);              /* the hairline round a surface */
        --mc-press: rgba(17, 17, 17, .06);            /* a pressed or quiet fill on a surface */
        --mc-lift: 0 1px 2px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .12);
        --mc-edge: 12px;                              /* from the screen's edges */
        --mc-ease: cubic-bezier(.23, 1, .32, 1);      /* strong ease-out: presses and slides */
        --mc-sheet-ease: cubic-bezier(.32, .72, 0, 1);   /* the iOS drawer (map-sheet.js) */
    }

    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        :root { --mc-glass: rgba(252, 252, 252, .85); }
    }

    /*-------------------- the surface --------------------*/
    .mc-chip,
    .mc-seg,
    .mc-btn,
    .mc-zoom,
    .mc-sheet__panel {
        background: var(--mc-glass);
        -webkit-backdrop-filter: blur(14px) saturate(1.1);
        backdrop-filter: blur(14px) saturate(1.1);
        box-shadow: 0 0 0 1px var(--mc-line), var(--mc-lift);
    }

    /* everything pressable: no grey flash, no text selection on a long press */
    .mc-seg > button,
    .mc-btn,
    .mc-zoom > button,
    .mc-round,
    .mc-sheet__grab {
        margin: 0;
        border: 0;
        color: var(--mc-ink);
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        user-select: none;
    }

    .mc-seg > button:focus-visible,
    .mc-btn:focus-visible,
    .mc-zoom > button:focus-visible,
    .mc-round:focus-visible,
    .mc-sheet__grab:focus-visible { outline: 2px solid var(--mc-ink); outline-offset: -4px; }

    /*-------------------- chips: the readouts --------------------*/
    .mc-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        max-width: 100%;
        height: 32px;
        margin: 0;
        padding: 0 12px;
        border-radius: 999px;
        font: 700 .6875rem/1 var(--mono-font);
        letter-spacing: 0;
        font-variant-numeric: tabular-nums;
        color: var(--mc-ink);
        white-space: nowrap;
    }

    .mc-chip--quiet { font-weight: 400; color: var(--mc-dim); }

    /* (spans are scoped by their component: the pages reset every span inside them) */
    .mc-chip .mc-tag,
    .mc-sheet .mc-tag {
        display: inline-flex;
        flex: none;
        align-items: center;
        height: 20px;
        padding: 0 7px;
        border-radius: 999px;
        background: var(--mc-ink);
        color: var(--mc-paper);
        font: 700 .625rem/1 var(--mono-font);
        letter-spacing: 0;
        text-transform: none;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    /*-------------------- the segmented control --------------------*/
    .mc-seg {
        position: relative;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        flex: none;
        height: 44px;
        padding: 0 3px;
        border-radius: 999px;
    }

    .mc-seg__thumb {
        position: absolute;
        top: 3px;
        bottom: 3px;
        left: 3px;
        width: calc((100% - 6px) / 3);
        border-radius: 999px;
        background: var(--mc-ink);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
        pointer-events: none;
        transition: transform .22s var(--mc-ease);
    }

    .mc-seg:has(> button:nth-of-type(2)[aria-pressed="true"]) .mc-seg__thumb { transform: translateX(100%); }
    .mc-seg:has(> button:nth-of-type(3)[aria-pressed="true"]) .mc-seg__thumb { transform: translateX(200%); }

    .mc-seg > button {
        position: relative;
        min-width: 52px;
        height: 44px;
        padding: 0 10px;
        border-radius: 999px;
        background: none;
        font: 700 .8125rem/1 var(--mono-font);
        transition: color .22s var(--mc-ease), transform .12s var(--mc-ease);
    }

    .mc-seg > button[aria-pressed="true"] { color: var(--mc-paper); }
    .mc-seg > button[aria-pressed="true"]:focus-visible { outline-color: var(--mc-paper); }
    .mc-seg > button:active { transform: scale(.97); }

    /* no :has(): the pressed button is filled instead */
    @supports not selector(:has(*)) {
        .mc-seg__thumb { display: none; }
        .mc-seg > button[aria-pressed="true"] { background: var(--mc-ink); }
    }

    /*-------------------- buttons --------------------*/
    .mc-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 44px;
        padding: 0 16px 0 13px;                     /* a little less on the icon's side */
        border-radius: 999px;
        font: 700 .75rem/1 var(--mono-font);
        letter-spacing: 0;
        transition: transform .12s var(--mc-ease);
    }

    .mc-btn i { font-size: 1.05rem; line-height: 1; }
    .mc-btn:active { transform: scale(.97); }

    .mc-zoom {
        display: flex;
        flex-direction: column;
        width: 44px;
        border-radius: 999px;
        overflow: hidden;
    }

    .mc-zoom > button {
        position: relative;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        background: none;
        font-size: 1.25rem;
        line-height: 1;
        transition: background-color .15s ease;
    }

    .mc-zoom > button + button::before { content: ""; position: absolute; left: 11px; right: 11px; top: 0; height: 1px; background: var(--mc-line); }
    .mc-zoom > button i { transition: transform .12s var(--mc-ease); }
    .mc-zoom > button:active { background: var(--mc-press); }
    .mc-zoom > button:active i { transform: scale(.94); }

    .mc-round {
        display: grid;
        flex: none;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 50%;
        background: var(--mc-press);
        font-size: 1.2rem;
        line-height: 1;
        transition: transform .12s var(--mc-ease), opacity .15s ease;
    }

    /* the way on is the one most taken: ink */
    .mc-round--ink { background: var(--mc-ink); color: var(--mc-paper); }
    .mc-round--ink:focus-visible { outline-color: var(--mc-paper); }
    .mc-round:active { transform: scale(.97); }
    .mc-round:disabled { opacity: .28; cursor: default; transform: none; }

    /*-------------------- the sheet --------------------*/
    .mc-sheet {
        --mc-sheet-pad: max(16px, calc((100% - 560px) / 2));   /* a column of 560px on a tablet */
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        touch-action: none;                             /* map-sheet.js owns both axes here */
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mc-sheet > .mc-zoom { position: absolute; right: var(--mc-edge); bottom: calc(100% + 12px); }

    .mc-sheet__panel {
        position: relative;
        padding: 0 var(--mc-sheet-pad) max(16px, env(safe-area-inset-bottom));
        border-radius: 20px 20px 0 0;
        box-shadow: 0 0 0 1px var(--mc-line), 0 -4px 24px rgba(0, 0, 0, .1);
    }

    /* the grabber: the strip along the top, with a 44px target round the bar */
    .mc-sheet__grab {
        position: relative;
        display: block;
        width: 100%;
        height: 20px;
        padding: 0;
        background: none;
        cursor: grab;
    }

    .mc-sheet__grab::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 8px;
        width: 36px;
        height: 5px;
        margin-left: -18px;
        border-radius: 999px;
        background: rgba(17, 17, 17, .2);
        transition: background-color .15s ease;
    }

    .mc-sheet__grab::after { content: ""; position: absolute; left: 50%; top: -12px; width: 96px; height: 44px; margin-left: -48px; }
    .mc-sheet__grab:active::before,
    .mc-sheet.is-dragging .mc-sheet__grab::before { background: rgba(17, 17, 17, .38); }
    .mc-sheet.is-dragging,
    .mc-sheet.is-dragging .mc-sheet__grab { cursor: grabbing; }

    .mc-sheet__nav { position: absolute; top: 20px; right: var(--mc-sheet-pad); display: flex; gap: 8px; }

    .mc-sheet__head {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 44px;
        margin: 0;
        padding-right: 104px;                           /* the two round buttons */
        font: 700 .75rem/1 var(--mono-font);
        color: var(--mc-ink);
    }

    .mc-sheet .mc-count { flex: none; font-weight: 400; color: var(--mc-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .mc-sheet .mc-count b { font-size: 1.05rem; font-weight: 700; letter-spacing: -.03em; color: var(--mc-ink); }

    /* the peek's one line: the name, faded in as the sheet goes down (map-sheet.js) */
    .mc-sheet .mc-sheet__peek {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font: 700 .9375rem/1.25 var(--body-font);
        letter-spacing: -.01em;
        color: var(--title-color);
        opacity: 0;
    }

    .mc-sheet__more { margin-top: 2px; }
    .mc-sheet__title { margin: 0; font: 800 1.25rem/1.2 var(--body-font); letter-spacing: -.02em; color: var(--title-color); text-wrap: balance; }
    .mc-sheet__sub {
        display: -webkit-box;
        margin: 4px 0 0;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;                          /* two lines at most: the sheet keeps its height */
        line-clamp: 2;
        font: 400 .75rem/1.45 var(--mono-font);
        color: var(--mc-dim);
    }
    .mc-sheet__sub:empty { display: none; }

    /*-------------------- pin labels as tags --------------------*/
    .mc-map .globe-pin .globe-pin__label,
    .mc-map .mc-pintag {
        padding: 5px 7px;
        border: 0;
        border-radius: 6px;
        font: 700 .75rem/1.2 var(--mono-font);
        letter-spacing: .01em;
        color: var(--mc-ink);
        background: var(--mc-paper);
        box-shadow: 0 0 0 1px rgba(17, 17, 17, .16), 0 1px 3px rgba(0, 0, 0, .12);
    }

    .mc-map .mc-key .globe-pin__label,
    .mc-map .mc-pintag.mc-key { color: var(--mc-paper); background: var(--mc-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }

    .mc-map.globe--compact .globe-sea span {
        font-size: .625rem;
        font-style: normal;
        font-weight: 600;
        letter-spacing: .04em;
        text-shadow: 0 1px 1px rgba(17, 40, 70, .85);
    }
    .mc-map.globe--compact .globe-sea--ocean span {
        font-size: .625rem;
        letter-spacing: .1em;
    }

    /* closer to the mark, on a finer leader */
    .mc-map .globe-pin[data-side=right] .globe-pin__label { left: 19px; }
    .mc-map .globe-pin[data-side=left] .globe-pin__label { right: 19px; }
    .mc-map .globe-pin[data-side=top] .globe-pin__label { bottom: 19px; }
    .mc-map .globe-pin[data-side=bottom] .globe-pin__label { top: 19px; }
    .mc-map .globe-pin[data-side=right] .globe-pin__label::before { width: 8px; height: 1.5px; margin: -.75px 2px 0 0; }
    .mc-map .globe-pin[data-side=left] .globe-pin__label::before { width: 8px; height: 1.5px; margin: -.75px 0 0 2px; }
    .mc-map .globe-pin[data-side=top] .globe-pin__label::before { width: 1.5px; height: 8px; margin: 2px 0 0 -.75px; }
    .mc-map .globe-pin[data-side=bottom] .globe-pin__label::before { width: 1.5px; height: 8px; margin: 0 0 2px -.75px; }
}

@media screen and (max-width: 959px) and (prefers-reduced-motion: reduce) {
    .mc-seg__thumb,
    .mc-seg > button,
    .mc-btn,
    .mc-zoom > button,
    .mc-zoom > button i,
    .mc-round,
    .mc-sheet__grab::before { transition: none; }
}