/* Mobile LIVE FEED bottom sheet (Lance GO 2:59–3:00 PM CST Nov 12 2026;
   handle-in-header fix Nov 12 3:13 PM CST). Desktop (min-width: 761px) is
   unchanged: the handle is hidden and no sheet rules apply. */

#feed-sheet-handle{display:none}

@media (max-width:760px){
  :root{
    --sheet-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    --sheet-cur: 40dvh;
  }
  body.has-cyber-lane{
    --sheet-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  /* Lift the tickers with the home indicator so the sheet can sit just above them. */
  #ticker{bottom:env(safe-area-inset-bottom, 0px); height:calc(30px + env(safe-area-inset-bottom, 0px)); padding-bottom:env(safe-area-inset-bottom, 0px); box-sizing:border-box}
  #cyber-ticker{bottom:calc(30px + env(safe-area-inset-bottom, 0px))}

  #feed.sheet-on{
    top:auto;
    left:0;
    right:0;
    width:auto;
    bottom:var(--sheet-bottom);
    height:var(--sheet-cur);
    border-left:0;
    border-right:0;
    will-change:transform;
    overflow:visible;
    /* Clip the list when minimized, but let the 44px handle peek a few pixels above the map/feed boundary. */
    -webkit-clip-path:inset(-20px 0 0 0);
    clip-path:inset(-20px 0 0 0);
    touch-action:pan-y;
  }
  /* Searching no longer forces a fixed 52vh; the sheet height stays on the snap (JS expands to half if minimized). */
  #feed.sheet-on.is-searching{height:var(--sheet-cur)}

  /* Handle lives inside the LIVE FEED header row, centered between the title and LIVE.
     88×44 tap target; top slightly overlaps the map/feed boundary; bottom at the header's bottom.
     It does not grow the header or take its own row. */
  #feed.sheet-on .panel-h{
    position:relative;
    overflow:visible;
    flex:none;
    touch-action:none;
    -webkit-user-select:none;
    user-select:none;
  }
  #feed.sheet-on #feed-sheet-handle,
  #feed-sheet-handle.sheet-handle{
    display:flex;
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    width:auto;
    min-width:88px;
    min-height:44px;
    margin:0;
    /* Top padding matches the 8px peek above the boundary so the label lines up with LIVE FEED / LIVE. */
    padding:8px 12px 0;
    background:transparent;
    border:0;
    color:var(--amber);
    font-family:var(--mono);
    font-size:9.5px;
    font-weight:800;
    letter-spacing:.16em;
    line-height:1;
    cursor:grab;
    touch-action:none;
    -webkit-user-select:none;
    user-select:none;
    z-index:2;
  }
  #feed-sheet-handle:active{cursor:grabbing}
  #feed-sheet-handle:focus-visible{outline:2px solid #fff; outline-offset:-2px}
  .sheet-grabber{
    display:block;
    position:absolute;
    top:2px;
    left:50%;
    transform:translateX(-50%);
    width:44px;
    height:5px;
    border-radius:3px;
    background:var(--amber);
    box-shadow:0 0 8px #ffb00088;
    flex:none;
  }
  .sheet-handle-lbl{display:flex;align-items:center;gap:5px;pointer-events:none}
  .sheet-chevron{
    display:block;
    width:8px;
    height:8px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg);
    margin-top:-4px;
    flex:none;
  }
  #feed[data-sheet="min"] .sheet-chevron{transform:rotate(-135deg); margin-top:2px}

  /* Clipped when minimized; keep them out of the tab order visually via pointer-events. */
  #feed[data-sheet="min"] .feed-search,
  #feed[data-sheet="min"] #stats,
  #feed[data-sheet="min"] #layers-toggle,
  #feed[data-sheet="min"] #layers,
  #feed[data-sheet="min"] #cz-layers,
  #feed[data-sheet="min"] #feed-list,
  #feed[data-sheet="min"] .legend{pointer-events:none}

  /* HUD, admin, and map credits follow the live sheet height (overrides style.css 31vh and ux.css 40vh). */
  body.sheet-active #hud{
    display:flex;
    bottom:calc(var(--sheet-cur) + var(--sheet-bottom) + 4px);
  }
  body.sheet-active #admin{
    bottom:calc(var(--sheet-cur) + var(--sheet-bottom) + 28px);
  }
  body.sheet-active #detail:not(.hidden)~#admin,
  body.sheet-active #health:not(.hidden)~#admin{
    bottom:calc(62dvh + 40px);
  }
  body.sheet-active .maplibregl-ctrl-bottom-right{
    bottom:calc(var(--sheet-cur) + var(--sheet-bottom) + 24px);
  }
  /* Cards still sit on the ticker stack, not on the feed sheet. */
  body.sheet-active #detail,
  body.sheet-active #health{
    bottom:var(--sheet-bottom);
  }

  @media (prefers-reduced-motion: reduce){
    #feed.sheet-on{transition:none!important}
  }
}