/* ============================================================================
   Varelyno: on a phone the map fills the screen, and "Your work at a glance"
   rises over it as a sheet (27 Oct). Phone widths only (max 700px), Hub map
   view only. The classes are set by v13-phone-canvas.js:
     html.vx-fullmap       the map fills the space between the top bar and the
                           tab bar; the page itself no longer scrolls
     html.vx-glance-open   the glance sheet is up and the map is locked
   ========================================================================== */

.vx-glance-handle, .vx-glance-scrim, .vx-glance-head, .vx-glance-hint { display: none; }

@media (max-width: 700px) {
  /* Nothing here touches html or body (no overflow: hidden on the page): the
     iPhone home-screen app keeps the band under the clock sharp only while the
     page itself is the plain scrolling page with the solid bar on top (see
     TOPBAR-BLUR-INVESTIGATION.md). Hiding the page's overflow brought the blur
     back (27 Oct). The fixed frame below is what stops the page scrolling. */

  /* The top bar is FIXED here, not sticky. With the map filling the screen the
     page no longer scrolls, and a sticky bar on a page that cannot scroll is
     not treated as pinned to the screen: the iPhone home-screen app then no
     longer takes the band under the clock from the bar and draws its soft blur
     over the top again (TOPBAR-BLUR-INVESTIGATION.md; user screenshot 27 Oct
     09:33). A fixed, solid, full-width bar at the top edge is always read. */
  html.vx-fullmap body #topbar.topbar {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
  }

  /* The Hub becomes one fixed frame between the bars. */
  html.vx-fullmap #mainContent {
    position: fixed; left: 0; right: 0;
    top: var(--vx-top, 57px); bottom: var(--vx-bottom, 52px);
    margin: 0; padding: 0; overflow: hidden;
  }
  html.vx-fullmap #mainContent > .page-head .page-title,
  html.vx-fullmap #mainContent > .universe-moodbar,
  html.vx-fullmap #mainContent > .mobile-map-tip,
  html.vx-fullmap #hubLayout .hub-divider,
  html.vx-fullmap #hubLayout .v9-map-name,
  html.vx-fullmap #v10Query .v10-q-label { display: none; }

  html.vx-fullmap #hubLayout,
  html.vx-fullmap #hubLayout .hub-map-panel {
    position: static; display: block; height: auto; min-height: 0; margin: 0; padding: 0;
  }

  /* The map itself, edge to edge. The card is already a flex column whose
     map viewport grows to fill it (app.css), so only the card's size changes;
     the "Show me" row below is lifted out of the column, leaving it all map. */
  html.vx-fullmap #networkCard {
    position: absolute; inset: 0; height: auto; min-height: 0; max-height: none;
    margin: 0; border: 0; border-radius: 0; box-shadow: none;
  }
  /* The card keeps a 50px strip under the map for the zoom buttons; here the
     zoom buttons float over the map instead, so the map runs to the tab bar. */
  html.vx-fullmap #networkCard::after { display: none; }

  /* Controls float over the top of the map: filter + Add, the map's own
     actions, then the "Show me" choices as one sliding row of pills. */
  /* These two rows sit above everything that floats on the map (mini map 25,
     glance button 8), because their menus (+ Add, Tools) open as sheets that
     reach down to the bottom of the screen. The glance sheet is higher still. */
  html.vx-fullmap #mainContent > .page-head {
    position: absolute; z-index: 31; top: 8px; left: 10px; right: 10px; margin: 0; padding: 0;
  }
  html.vx-fullmap #hubLayout .v9-map-head {
    position: absolute; z-index: 30; top: 60px; left: 10px; right: 10px;
    margin: 0; padding: 0; min-height: 0;
    /* the colour modes paint this head as a band; over the map it floats */
    background: none !important; border: 0 !important; box-shadow: none !important;
  }
  html.vx-fullmap #v10Query {
    position: absolute; z-index: 6; top: 110px; left: 0; right: 0;
    flex-wrap: nowrap; overflow-x: auto; padding: 0 10px 6px; margin: 0;
    background: none; border: 0; scrollbar-width: none;
  }
  html.vx-fullmap #v10Query::-webkit-scrollbar { display: none; }
  html.vx-fullmap #v10Query > * { flex: none; }
  html.vx-fullmap #v10Query .v10-q-sel,
  html.vx-fullmap #v10Query .v10-q-text {
    width: auto !important; max-width: 62vw; height: 36px; border-radius: 18px;
    /* Solid, no frosted glass: a blur over the moving map has to be redrawn on
       every frame of a pan, which a phone feels (27 Oct). */
    background-color: color-mix(in srgb, var(--surface, #fff) 95%, transparent);
    box-shadow: 0 4px 14px #10213c17;
  }
  html.vx-fullmap #v10Query .v10-q-text { width: 112px !important; }

  /* "Your work at a glance" (.hub-insights) becomes a sheet. Only that
     section: the work panel around it also holds the project sheet a tapped
     circle opens (#networkDetail, fixed), and a hidden or moved ancestor would
     hide that sheet too. So the panel itself stays plain. */
  html.vx-fullmap #hubLayout .hub-work-panel {
    position: static; margin: 0; padding: 0; height: 0; min-height: 0;
  }
  html.vx-fullmap #hubLayout .hub-work-panel > .hub-insights {
    position: fixed; z-index: 60; left: 0; right: 0;
    top: calc(var(--vx-top, 57px) + 56px); bottom: var(--vx-bottom, 52px);
    margin: 0; padding: 0 12px 28px;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    background: var(--surface, #fff); border-radius: 24px 24px 0 0;
    box-shadow: 0 -18px 44px #10213c33;
    transform: translateY(calc(100% + 40px)); visibility: hidden;
    transition: transform .6s cubic-bezier(.16,.84,.3,1), visibility 0s linear .6s;
  }
  html.vx-fullmap.vx-glance-open #hubLayout .hub-work-panel > .hub-insights {
    transform: none; visibility: visible;
    transition: transform .6s cubic-bezier(.16,.84,.3,1), visibility 0s;
  }

  html.vx-fullmap .vx-glance-head {
    display: flex; align-items: center; justify-content: flex-end;
    position: sticky; top: 0; z-index: 2; height: 46px; margin: 0 -12px; padding: 0 12px;
    background: var(--surface, #fff); border-radius: 24px 24px 0 0;
    touch-action: none; cursor: grab;
  }
  .vx-glance-grab {
    position: absolute; left: 50%; top: 8px; width: 38px; height: 5px; margin-left: -19px;
    border-radius: 3px; background: color-mix(in srgb, var(--text, #243b4e) 24%, transparent);
  }
  .vx-glance-done {
    min-height: 44px; padding: 0 8px; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 15.5px; font-weight: 650;
    color: var(--v-accent, var(--accent, #0e67b3));
  }

  /* The map is locked under a soft scrim while the sheet is up. */
  html.vx-fullmap .vx-glance-scrim {
    display: flex; justify-content: center; align-items: flex-start;
    position: fixed; z-index: 59; left: 0; right: 0;
    top: var(--vx-top, 57px); bottom: var(--vx-bottom, 52px); padding-top: 13px;
    background: rgba(12,28,47,.32); opacity: 0; visibility: hidden;
    transition: opacity .45s ease, visibility 0s linear .45s;
  }
  html.vx-fullmap.vx-glance-open .vx-glance-scrim {
    opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s;
  }
  .vx-glance-lock {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px 0 11px;
    border-radius: 15px; background: var(--surface, #fff); color: var(--text, #243b4e);
    font-size: 12.5px; font-weight: 650; box-shadow: 0 6px 18px #10213c2b;
  }

  /* The way in for people who don't know the gesture, and for VoiceOver.
     Bottom left of the map; the zoom buttons sit bottom right. */
  html.vx-fullmap .vx-glance-handle {
    display: inline-flex; align-items: center; gap: 7px;
    position: fixed; z-index: 8; left: 10px; bottom: calc(var(--vx-bottom, 52px) + 6px);
    height: 42px; padding: 0 16px 0 13px; white-space: nowrap;
    border-radius: 20px; border: 1px solid color-mix(in srgb, var(--text, #243b4e) 10%, transparent);
    background: color-mix(in srgb, var(--surface, #fff) 96%, transparent);
    color: var(--text, #243b4e); font-family: inherit; font-size: 13.5px; font-weight: 650;
    box-shadow: 0 8px 22px #10213c26; cursor: pointer;
  }
  html.vx-fullmap.vx-glance-open .vx-glance-handle { visibility: hidden; }

  /* Shown once per device, a moment after the map settles, pointing at the
     button: the swipe is invisible until someone is told about it. */
  html.vx-fullmap .vx-glance-hint {
    display: flex; flex-direction: column; gap: 2px;
    position: fixed; z-index: 9; left: 10px; bottom: calc(var(--vx-bottom, 52px) + 60px);
    max-width: 252px; padding: 10px 13px; border-radius: 14px;
    background: var(--text, #243b4e); color: var(--surface, #fff);
    font-size: 13px; line-height: 1.35; box-shadow: 0 10px 26px #10213c40;
    animation: vxHintIn .55s cubic-bezier(.16,.84,.3,1);
    transition: opacity .3s ease;
  }
  html.vx-fullmap .vx-glance-hint strong { font-weight: 700; font-size: 13.5px; }
  html.vx-fullmap .vx-glance-hint::after {
    content: ''; position: absolute; left: 30px; bottom: -6px; width: 12px; height: 12px;
    background: inherit; border-radius: 2px; transform: rotate(45deg);
  }
  html.vx-fullmap .vx-glance-hint.is-out { opacity: 0; }
  @keyframes vxHintIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* Demo: its "Live demo" card (quick links + Start free) opens at the top of
     the glance sheet instead of floating over the map. */
  html.vx-fullmap #hubLayout .hub-insights > #demoIntro { margin: 2px 0 14px; }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  html.vx-fullmap #hubLayout .hub-work-panel > .hub-insights, html.vx-fullmap .vx-glance-scrim { transition: none; }
  html.vx-fullmap .vx-glance-hint { animation: none; }
}
html[data-motion="off"].vx-fullmap .vx-glance-hint { animation: none; }
html[data-motion="off"].vx-fullmap #hubLayout .hub-work-panel > .hub-insights,
html[data-motion="off"].vx-fullmap .vx-glance-scrim { transition: none; }