/* src/styles-gvchrome.css: GenevAI's own chrome around a wall page (28 Oct 2026), shared by the timeline
   (timeline.html) and the Loisirs wall (activities.html), so the two can never drift apart.

   Rossi, 28 Oct: "On the genevai.ch/loisirs page, can you apply the same top navigation bar (exact same color) as the
   timeline page (do this on all devices)" and "On mobile, add the same mobile bottom floating menu on the /loisirs page
   as on the timeline. (same color and everything)". Everything here was the timeline's own page CSS until that day;
   it moved here unchanged, so the timeline looks exactly as before.

   Three parts:
     1. the top bar: the home page's navy and blue light, mark and wordmark, then on the right the map icon (Places,
        28 Oct: "Move 'Places' ... into the top nav bar, but ony dipslay the map icon. Do this for all devices"), the
        weather, the other language and Log in (src/timeline/timeline-bar.js draws the right side)
     2. the phone's bottom menu (src/nav.js draws it): its navy fade, under 1024px only
     3. the menu's sheets (Places, Dates): a panel rising from the foot on a phone, a panel dropping from the map icon
        on a computer
   Loaded BEFORE src/styles-nav.css, which is why the menu's rules start with "body": they must outrank it. */

/* ── 1. the top bar ── */
/* GenevAI (26 Oct, Rossi: "in the top nav bar, apply the same genevai logo and background color as the index"): the
   home page's header navy (index.html --navy #0A1830), its line and muted words, its cyan accent, and its own mark and
   wordmark (assets/genevai-mark.png + genevai-wordmark.png are index.html's two images, byte for byte) */
:root { --gv-ground: #0A1830; --gv-ink: #ffffff; --gv-muted: #93A6C2; --gv-accent: #3AD0EC; --gv-line: rgba(255, 255, 255, 0.11); --gv-page: #f4f4f2; }
/* .page > .bar, never .bar alone: the Loisirs call draws a section with the class "bar" too (src/loisirs/call.js view
   kind), and the top bar's navy and height leaked onto it (caught by tests/loisirs.spec.js, 28 Oct) */
.page > .bar { position: sticky; top: 0; z-index: 20; height: 48px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 max(20px, env(safe-area-inset-right, 0px)) 0 max(20px, env(safe-area-inset-left, 0px)); background: var(--gv-ground); border-bottom: 1px solid var(--gv-line); }
.bar .brand { gap: 9px; }
.bar .brand .mk { height: 27px; width: auto; display: block; }
.bar .brand .wm { height: 17px; width: auto; display: block; opacity: .96; }
/* each link fills the bar's height, so it is a 47px target on a phone (measured 17px before) */
.bar a { display: flex; align-items: center; align-self: stretch; color: var(--gv-muted); font-size: 13px; font-weight: 500; text-decoration: none; }
.bar a:hover { color: var(--gv-ink); }
.bar a:focus-visible { outline: 2px solid var(--gv-accent); outline-offset: 2px; }
.bar .tag { font-size: 12px; font-weight: 500; color: var(--gv-muted); border: 1px solid var(--gv-line); border-radius: 999px; padding: 3px 10px; }
/* 27 Oct, Rossi: "change the top and bottom navigation bar background color to be more the gradiant color dark blue
   you see in [the index page]": start.html's own light on its navy, a cyan glow from the top middle and a blue one
   from the bottom right, over --gv-ground (the background colour stays #0A1830, so nothing reading it changes) */
.page > .bar { background-color: var(--gv-ground);
  background-image: radial-gradient(55% 200% at 50% -60%, rgba(58, 208, 236, .32), transparent 72%),
    radial-gradient(45% 220% at 100% 150%, rgba(44, 111, 224, .42), transparent 72%),
    radial-gradient(35% 220% at 0% 150%, rgba(44, 111, 224, .22), transparent 72%); }
.bar-l, .bar-r { display: flex; align-items: center; align-self: stretch; min-width: 0; }
.bar-l { gap: 12px; }
.bar-r { gap: 8px; flex: none; }
/* Places, the map icon alone (28 Oct): the weather chip's frame, so the two read as one family; lit while the wall is
   narrowed to one place, with a dot, so the filter never hides itself */
.tlb-places { position: relative; display: grid; place-items: center; width: 36px; height: 34px; padding: 0; border: 1px solid var(--gv-line); border-radius: 12px;
  background: rgba(8, 18, 38, .45); color: var(--gv-ink); cursor: pointer; transition: border-color .18s, background .18s; }
.tlb-places:hover, .tlb-places[aria-expanded="true"] { border-color: var(--gv-accent); background: rgba(58, 208, 236, .1); }
.tlb-places.is-active { border-color: var(--gv-accent); background: rgba(58, 208, 236, .16); }
.tlb-places svg { width: 20px; height: 20px; fill: none; stroke: var(--gv-accent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; display: block; }
.tlb-places .tlb-dot { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--gv-accent); box-shadow: 0 0 0 2px var(--gv-ground); }
.tlb-places .tlb-dot[hidden] { display: none; }
/* THE NAV BESIDE THE LOGO, on a computer and a tablet (28 Oct, Rossi: "move the map icon there and add a 'Area' label
   before it (Quartier in french), then insert 'Resto' and 'Activities' nav links with their respective logo"). Three
   quiet links in the bar's muted words with the accent icons, 28px from the logo; the page you are on is lit. On a phone
   (640px and less) it goes: the bottom menu carries Resto and Activités, and Places is the pin alone on the right. */
.tlb-nav { display: flex; align-items: center; gap: 4px; margin-left: 16px; }
.tlb-nav .tlb-places, .bar .tlb-link { display: inline-flex; align-items: center; align-self: center; gap: 7px; width: auto; height: 34px; padding: 0 12px 0 10px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--gv-muted); font: 600 13.5px/1 'Inter', 'DM Sans', sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.tlb-nav .tlb-places:hover, .bar .tlb-link:hover { color: var(--gv-ink); background: rgba(255, 255, 255, .06); }
.tlb-nav .tlb-places[aria-expanded="true"] { color: var(--gv-ink); border-color: var(--gv-line); background: rgba(58, 208, 236, .08); }
.tlb-nav .tlb-places.is-active, .bar .tlb-link.is-current { color: var(--gv-ink); border-color: rgba(58, 208, 236, .45); background: rgba(58, 208, 236, .12); }
.tlb-nav .tlb-places svg, .bar .tlb-link svg { width: 18px; height: 18px; fill: none; stroke: var(--gv-accent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; display: block; flex: none; }
.tlb-nav .tlb-places .tlb-dot { top: 4px; right: 4px; }
.bar .tlb-link:focus-visible { outline: 2px solid var(--gv-accent); outline-offset: 2px; }
.tlb-places .tlb-lbl { display: none; }
.tlb-nav .tlb-places .tlb-lbl { display: inline; }
/* the page's day weather beside the weather chip (the Loisirs wall's "Brouillard, 15°"): words, not another box */
.tlb-wxnote { align-self: center; margin-left: -2px; font: 500 13px/1 'Inter', 'DM Sans', sans-serif; color: var(--gv-muted); white-space: nowrap; }
.tlb-wxnote[hidden] { display: none; }
@media (max-width: 640px) { .tlb-nav, .tlb-wxnote { display: none; } }
/* a tablet (measured 28 Oct: at 768px signed out the links ran 18px into the weather): tighter links, and below 800px the
   logo's mark alone (the weather note shows the words alone on every screen since 29 Oct) */
@media (min-width: 641px) and (max-width: 900px) {
  .tlb-nav { gap: 2px; margin-left: 12px; }
  .tlb-nav .tlb-places, .bar .tlb-link { padding: 0 8px; gap: 6px; }
  .bar .tlb-login { padding: 0 12px; }
}
@media (min-width: 641px) and (max-width: 800px) { .bar .brand .wm { display: none; } }
/* under 700px there is no room for the note (9px short at 641): the wall keeps its own weather chip there */
@media (max-width: 700px) { .tlb-wxnote { display: none; } }

/* the weather chip: start.html's .wx, sized to the 48px bar */
.tlb-wx { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px 0 8px; border: 1px solid var(--gv-line); border-radius: 12px;
  background: rgba(8, 18, 38, .45); color: var(--gv-ink); font: 600 14px/1 'Inter', 'DM Sans', sans-serif; letter-spacing: -.01em; cursor: pointer;
  transition: border-color .18s, background .18s; }
.tlb-wx[hidden] { display: none; }
.tlb-wx:hover { border-color: var(--gv-accent); background: rgba(58, 208, 236, .1); }
.tlb-wx svg { width: 20px; height: 20px; fill: none; stroke: var(--gv-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
/* one language: the other one */
.tlb-lang { height: 34px; min-width: 38px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; color: var(--gv-muted);
  font: 600 13.5px/1 'Inter', 'DM Sans', sans-serif; cursor: pointer; transition: color .15s, background .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
/* (31 Oct) the flag of the language it switches to, left of its letters (Rossi: "at the left side of [EN] in the top nav
   bar, on all devices, add the respective language flag"). Drawn, never an emoji: Windows shows a flag emoji as two
   letters. The same two pictures in src/timeline/timeline-bar.js and src/welcome.js */
/* the welcome page's is a link, and ".bar a" stretches links to the bar's height: a 34px box stretched sits at the top,
   8px above "Se déconnecter" (31 Oct design review), so it is centred like the timeline's button */
.bar .tlb-lang { align-self: center; }
.tlb-flag { width: 18px; height: 12px; flex: none; display: block; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
.tlb-flag svg { width: 100%; height: 100%; display: block; }
.tlb-lang:hover { color: var(--gv-ink); background: rgba(255, 255, 255, .06); }
/* Log in, in the home page's Get Started gradient (index.html .btn-primary) */
.bar .tlb-login { align-self: center; height: 34px; padding: 0 15px; border-radius: 10px; background: linear-gradient(120deg, #3AD0EC, #2C6FE0);
  color: #04121f; font: 600 13.5px/1 'Inter', 'DM Sans', sans-serif; box-shadow: 0 8px 22px -8px rgba(45, 140, 220, .7); white-space: nowrap; }
.bar .tlb-login:hover { color: #04121f; filter: brightness(1.06); }
.tlb-places:focus-visible, .tlb-wx:focus-visible, .tlb-lang:focus-visible, .bar .tlb-login:focus-visible { outline: 2px solid var(--gv-accent); outline-offset: 2px; }
@media (max-width: 640px) { .page > .bar { padding: 0 14px; } .bar .tag { display: none; } }
/* a 360px phone left 8px between the logo and the weather: tighten the right side there (after the rules it overrides).
   28 Oct: the pin joined the right side and touched the logo at 390px (0px apart, 5px at 360), so the tighter right side
   and a touch smaller logo start at 420px: measured 23px apart at 360, more above */
@media (max-width: 420px) { .bar-r { gap: 4px; } .tlb-wx { padding: 0 8px 0 6px; } .bar .tlb-login { padding: 0 11px; } .tlb-lang { min-width: 30px; padding: 0 5px; gap: 4px; } .tlb-flag { width: 16px; height: 11px; } .tlb-places { width: 34px; }
  .bar .brand { gap: 6px; } .bar .brand .mk { height: 23px; } .bar .brand .wm { height: 14px; } }
/* (31 Oct) the language flag took 20px, and at 360 a signed-out bar (pin, weather, flag + EN, Connexion) touched the logo
   (-1px): a few pixels back from each piece, nothing hidden */
@media (max-width: 380px) { .bar-r { gap: 3px; } .tlb-lang { padding: 0 3px; gap: 3px; } .bar .tlb-login { padding: 0 9px; } .tlb-wx { padding: 0 6px 0 5px; }
  .bar .brand .wm { height: 13px; } }
/* the forecast panel: start.html's .wxm */
.tlb-wxm { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: 'Inter', 'DM Sans', sans-serif; }
.tlb-wxm[hidden] { display: none; }
.tlb-wxm .bg { position: absolute; inset: 0; background: rgba(3, 7, 15, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.tlb-wxm .card { position: relative; width: 340px; max-width: 100%; box-sizing: border-box; background: rgba(10, 24, 48, .98); border: 1px solid var(--gv-line); border-radius: 20px;
  padding: 18px 20px 15px; color: #E9EFF8; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7); }
.tlb-wxm .x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; background: transparent; border: 1px solid var(--gv-line); border-radius: 10px; color: var(--gv-muted); cursor: pointer; padding: 0; }
.tlb-wxm .x:hover { color: #fff; border-color: var(--gv-accent); }
.tlb-wxm .x svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.tlb-wxm .loc { font-size: 11.5px; color: var(--gv-muted); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 2px 0 12px; }
.tlb-wxm .now { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.tlb-wxm .now svg { width: 54px; height: 54px; fill: none; stroke: var(--gv-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }
.tlb-wxm .tp { font-size: 38px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.tlb-wxm .lb { font-size: 14px; margin-top: 5px; }
.tlb-wxm .fl { font-size: 12.5px; color: var(--gv-muted); margin-top: 2px; }
.tlb-wxm .days { display: flex; flex-direction: column; border-top: 1px solid var(--gv-line); padding-top: 6px; }
.tlb-wxm .day { display: flex; align-items: center; gap: 11px; padding: 6px 2px; font-size: 13px; }
.tlb-wxm .day .d { width: 76px; color: var(--gv-muted); font-weight: 600; flex: none; }
.tlb-wxm .day svg { width: 21px; height: 21px; fill: none; stroke: var(--gv-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tlb-wxm .day .pr { margin-left: auto; color: #1E9FE6; font-size: 11.5px; font-weight: 600; }
.tlb-wxm .day .mm { font-weight: 600; min-width: 64px; text-align: right; }
.tlb-wxm .day .lo { color: var(--gv-muted); font-weight: 500; }
.tlb-wxm .foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--gv-line); font-size: 11px; color: var(--gv-muted); }
.tlb-wxm .foot a { color: var(--gv-muted); text-decoration: underline; text-underline-offset: 2px; display: inline; align-self: auto; font-size: 11px; }

/* ── 2. the phone's bottom menu ── */
/* only where the call panel on the right is gone (under 1024px); on a computer the menu's bar goes but its sheets stay,
   because the map icon in the top bar opens one there too */
@media (min-width: 1024px) { body #gnav .nav { display: none; } }
@media (max-width: 1023.98px) {
  /* 10px more under the words (26 Oct, Rossi: "missing a bit of padding. Add 10 px below the 'Accueil, Lieux, Dates,
     Menu'"): the menu is 10px taller and every offset on the page follows --nav-h */
  :root { --nav-h: 82px; }
  #gnav { --phone-w: 100%; }
  #gnav .nav { padding-bottom: 20px; }
  /* the same navy and blue light as the top bar (27 Oct), "body" so it outranks src/styles-nav.css, which loads after.
     28 Oct, Rossi: "there seems to be a dry cut off line ... improve the gradiency so that it is smoother". The colour
     faded but the blur behind it did not: the menu blurred the cards inside its box and stopped dead at its top edge,
     and a 1px divider sat inside the fade. Colour and blur now live on one layer (::after) that fades out on an eased
     curve, the blur through a matching mask, so both melt into the cards together. Stops are in px from the screen
     foot so they hold whatever the menu's height: solid to 64px, gone by 90px (8px above the menu's own edge). */
  body #gnav .nav { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  body #gnav .nav::before { display: none; }
  body #gnav .nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: -1; pointer-events: none;
    background: radial-gradient(70% 90% at 50% 125%, rgba(44, 111, 224, .45), transparent 72%),
      radial-gradient(40% 80% at 0% 125%, rgba(58, 208, 236, .22), transparent 72%),
      linear-gradient(to top, rgba(10, 24, 48, .98) 64px, rgba(10, 24, 48, .9) 70px, rgba(10, 24, 48, .7) 76px,
        rgba(10, 24, 48, .42) 81px, rgba(10, 24, 48, .17) 86px, rgba(10, 24, 48, 0) 90px);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    -webkit-mask-image: linear-gradient(to top, #000 64px, rgba(0, 0, 0, .65) 75px, rgba(0, 0, 0, .25) 84px, transparent 90px);
    mask-image: linear-gradient(to top, #000 64px, rgba(0, 0, 0, .65) 75px, rgba(0, 0, 0, .25) 84px, transparent 90px); }
  /* the page's foot clears the menu */
  body { padding-bottom: calc(var(--nav-h, 72px) + env(safe-area-inset-bottom, 0px)); }
}
#gnav .nav__item.is-active { color: var(--gn-cyan); }
#gnav .nav { z-index: 35; }
/* the menu during a call (28 Oct, Rossi): the five buttons give way to the call row a card's sheet shows, the analyst's
   face, "En appel" with the live clock, and a red Hang up (src/nav.js onCall) */
#gnav .nav__oncall { display: none; }
#gnav .nav.on-call > .nav__item, #gnav .nav.on-call > .nav__call { display: none; }
#gnav .nav.on-call > .nav__oncall { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; align-self: center; width: 100%; min-height: 48px; padding: 12px 10px 0; box-sizing: border-box; }
#gnav .nav__oc-face { position: relative; width: 36px; height: 36px; flex: none; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); }
#gnav .nav__oc-face img { display: block; box-sizing: border-box; width: 100%; height: 100%; padding: 7px 6px 7px 7px; border-radius: 50%; object-fit: contain; }
#gnav .nav__oc-id { flex: 1; min-width: 0; margin: 0; display: flex; flex-direction: column; line-height: 1.3; font-size: 13px; color: rgba(255, 255, 255, .78); }
#gnav .nav__oc-id b { font-size: 14.5px; font-weight: 700; color: #FFB83B; }
#gnav .nav__oc-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--gn-cyan); vertical-align: 1px; }
#gnav .nav__oc-hang { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #B02A25; color: #fff; font: 600 14px/1 inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#gnav .nav__oc-hang svg { width: 20px; height: 20px; fill: currentColor; display: block; }
#gnav .nav__oc-hang[aria-disabled="true"] { opacity: .6; cursor: default; }

/* ── 3. the menu's sheets: the menu's own panel, with their own open state ── */
body.tln-open #gnav .gscrim { opacity: 1; pointer-events: auto; }
#gnav .tln-sheet.tl-open { transform: translate(-50%, 0); }
/* on a phone the Places sheet stands at 95% of the screen and stays there while the keyboard is up (Rossi, 29 Oct: "the
   panel shrinks when you start typing ... the mobile keyboard hides this panel"): svh is the height before any keyboard,
   and the viewport's interactive-widget=resizes-visual keeps the keyboard from shrinking the page under it */
#gnav .tln-sheet { height: 95vh; height: 95svh; max-height: 95svh; font-family: 'Inter', 'DM Sans', sans-serif; }
#gnav .tln-lead { margin: 2px 8px 10px; font-size: 13.5px; line-height: 1.45; color: var(--gn-muted); }
#gnav .tln-search { display: block; margin: 0 4px 8px; }
#gnav .tln-search input { width: 100%; box-sizing: border-box; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--gn-line); background: rgba(255, 255, 255, .06); color: var(--gn-text); font: 500 15px 'Inter', sans-serif; }
#gnav .tln-search input::placeholder { color: var(--gn-muted); }
#gnav .tln-search input:focus { outline: 2px solid var(--gn-cyan); outline-offset: 1px; }
#gnav .tln-list { display: flex; flex-direction: column; gap: 2px; }
#gnav .tln-list .grow { width: 100%; text-align: left; min-height: 48px; }
#gnav .tln-list .grow[hidden] { display: none; }
#gnav .tln-sub { display: block; font-size: 12px; font-weight: 400; color: var(--gn-muted); margin-top: 1px; }
#gnav .tln-check { width: 20px; height: 20px; flex: none; color: var(--gn-cyan); }
#gnav .tln-none { margin: 10px 8px; font-size: 13.5px; color: var(--gn-muted); }
#gnav .tln-none[hidden] { display: none; }
/* (30 Oct) the deals' shelves panel (src/timeline/timeline-nav.js shelvesHTML): the same sheet as Places, as tall as its
   content on a phone, its sections as tickable chips in three groups, the two actions pinned at its foot */
/* (gsheet's own 20px foot padding showed as a strip under the pinned footer: the footer carries the safe area instead) */
#gnav .gsheet.tln-shelves { height: auto; max-height: 92vh; max-height: 92svh; padding-bottom: 0; }
#gnav .tln-shgrp { margin-top: 12px; }
#gnav .tln-shgrp .gsec__label { margin-bottom: 8px; }
#gnav .tln-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 8px; }
#gnav .tln-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 7px 0 14px; border: 1px solid var(--gn-line); border-radius: 999px;
  background: rgba(255, 255, 255, .05); color: var(--gn-text); font: 600 14px/1 'Inter', sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s; }
#gnav .tln-chip:hover { border-color: rgba(255, 255, 255, .26); }
#gnav .tln-chip i { font-style: normal; font-size: 12px; font-weight: 600; min-width: 26px; text-align: center; padding: 4px 7px; border-radius: 999px; box-sizing: border-box;
  color: var(--gn-muted); background: rgba(255, 255, 255, .07); font-variant-numeric: tabular-nums; }
#gnav .tln-chip .tln-check { display: none; width: 16px; height: 16px; margin: 0 -2px 0 -4px; }
#gnav .tln-chip[aria-pressed="true"] { background: rgba(58, 208, 236, .16); border-color: var(--gn-cyan); }
#gnav .tln-chip[aria-pressed="true"] .tln-check { display: block; }
#gnav .tln-chip[aria-pressed="true"] i { color: var(--gn-text); background: rgba(58, 208, 236, .24); }
#gnav .tln-chip:focus-visible, #gnav .tln-apply:focus-visible, #gnav .tln-clear:focus-visible { outline: 2px solid var(--gn-cyan); outline-offset: 2px; }
#gnav .tln-foot { position: sticky; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 16px; margin: 16px -18px 0;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--gn-navy); border-top: 1px solid var(--gn-line); }
#gnav .tln-clear { flex: none; background: none; border: 0; padding: 12px 4px 12px 8px; color: var(--gn-muted); font: 600 14px/1 'Inter', sans-serif; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }
#gnav .tln-clear:hover:not(:disabled) { color: var(--gn-text); }
#gnav .tln-clear:disabled { opacity: .4; cursor: default; text-decoration: none; }
#gnav .tln-apply { flex: 1; max-width: 320px; margin-left: auto; min-height: 48px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--gn-grad); color: #04101F; font: 700 15px/1 'Inter', sans-serif; cursor: pointer; }
#gnav .tln-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* on a computer the Places sheet drops from the map icon in the top bar (its right edge is set from the icon's, as
   --tln-r, when it opens) rather than rising from the foot of a 1440px screen */
@media (min-width: 1024px) {
  body #gnav .tln-sheet { top: 56px; bottom: auto; left: auto; right: var(--tln-r, 16px); width: 380px; max-width: calc(100vw - 32px);
    height: auto; max-height: min(72vh, 600px); border: 1px solid var(--gn-line); border-radius: 16px; padding-bottom: 14px;
    transform: translateY(-8px); opacity: 0; transition: transform .2s var(--gn-ease), opacity .2s var(--gn-ease); }
  body #gnav .tln-sheet.tl-open { transform: none; opacity: 1; }
  #gnav .tln-sheet .gsheet__grab { display: none; }
  /* the shelves panel hangs under its button in the band (--tln-top, --tln-l, set when it opens), wide enough for the chips */
  body #gnav .tln-sheet.tln-shelves { top: var(--tln-top, 120px); left: var(--tln-l, 16px); right: auto; width: 480px; max-height: min(calc(100vh - var(--tln-top, 120px) - 24px), 760px); padding-bottom: 0; }
  #gnav .tln-shelves .tln-apply { flex: 0 1 auto; margin-left: auto; min-width: 200px; }
  body.tln-open #gnav .gscrim { background: rgba(3, 7, 14, .28); backdrop-filter: none; }
}