/* ============================================================
   Mobile logged-in homepage — app layout (≤700px).
   Ported from the Claude Design prototype
   "DoloPaws Homepage (Logged in) - Mobile.dc.html".

   homepage-mobile.js toggles body.mhome-active when the returning
   homepage is visible on a small viewport; every rule here is scoped
   to that class, so desktop and the logged-out homepage are untouched.
   The elements themselves (search, filters, map, ranked list, account
   menu) are the same ones the desktop li-* shell renders — this file
   only re-lays them out as: top search bar, full-screen map, draggable
   bottom sheet, bottom tab bar.
   ============================================================ */

.mhome-tabs{display:none;}
.mhome-grab{display:none;}

@media (max-width:700px){
  body.mhome-active{overflow:hidden;height:100dvh;}
  body.mhome-active .topnav,
  body.mhome-active .site-footer,
  body.mhome-active .hp-quote{display:none;}

  /* ---- TOP BAR: search pill + filters + avatar ---- */
  body.mhome-active .li-top{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;background:rgba(247,244,235,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(27,31,25,.08);box-sizing:border-box;}
  body.mhome-active .li-brand,
  body.mhome-active .li-top-spacer{display:none;}
  /* Design order regardless of desktop flex direction: search left, avatar right */
  body.mhome-active .li-top{flex-direction:row;}
  body.mhome-active .li-search{order:1;}
  body.mhome-active .li-top-actions{order:2;}
  body.mhome-active .li-search{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--paper-line);border-radius:999px;padding:9px 14px;min-width:0;color:var(--ink-soft);}
  body.mhome-active .li-search svg{flex:none;}
  body.mhome-active .li-search input{flex:1;min-width:0;border:none;outline:none;background:none;font-family:'Inter',sans-serif;font-size:14px;color:var(--ink);}
  body.mhome-active .li-search input::placeholder{color:#9AA69B;}
  body.mhome-active .li-top-actions{display:flex;align-items:center;gap:8px;flex:none;}
  body.mhome-active .li-menuwrap{position:static;}
  body.mhome-active .li-filt{display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:50%;border:1.5px solid var(--paper-line);background:#fff;color:var(--ink);font-size:0;line-height:0;cursor:pointer;}
  body.mhome-active .li-filt svg{width:16px;height:16px;}
  body.mhome-active .li-filt .li-caret{display:none;}
  body.mhome-active .li-account{display:grid;place-items:center;padding:0;border:none;background:none;cursor:pointer;}
  body.mhome-active .li-account-name{display:none;}
  body.mhome-active .li-avatar{width:38px;height:38px;border-radius:50%;background:var(--accent);background-size:cover;background-position:center;color:#fff;display:grid;place-items:center;font:800 14px 'Inter',sans-serif;overflow:hidden;}
  body.mhome-active .li-avatar img{width:100%;height:100%;object-fit:cover;display:block;}

  /* Header dropdowns become full-width sheets under the top bar */
  body.mhome-active .li-menu{position:fixed;left:10px;right:10px;top:calc(var(--mhome-top,62px) + 8px);z-index:75;background:#fff;border:1px solid var(--paper-line);border-radius:16px;box-shadow:0 18px 40px -18px rgba(23,42,28,.45);padding:14px;max-height:calc(100dvh - var(--mhome-top,62px) - 90px);overflow-y:auto;box-sizing:border-box;}
  body.mhome-active .li-menu[hidden]{display:none;}

  /* ---- MAP: full screen between top bar and tab bar ---- */
  body.mhome-active .li-body{display:block;}
  body.mhome-active .li-map{position:fixed;left:0;right:0;top:var(--mhome-top,62px);bottom:var(--mhome-tabs,64px);z-index:1;margin:0;border:none;border-radius:0;height:auto;}
  body.mhome-active #trailMap{position:absolute;inset:0;width:100%;height:100% !important;border-radius:0 !important;border:none !important;}
  body.mhome-active .li-legend{display:none;}

  /* Conditions card compacts into the design's dog/conditions pill */
  body.mhome-active .li-cond{position:absolute;top:12px;left:12px;right:auto;bottom:auto;z-index:5;display:flex;align-items:center;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--paper-line);border-radius:12px;padding:8px 12px;box-shadow:0 6px 18px -10px rgba(23,42,28,.5);max-width:min(64vw,300px);}
  body.mhome-active .li-cond[hidden]{display:none;}
  body.mhome-active .li-cond-head{display:flex;align-items:center;gap:9px;min-width:0;}
  body.mhome-active .li-avatar-lg{width:32px;height:32px;font-size:13px;flex:none;}
  body.mhome-active .li-cond-title{font:700 13px 'Source Serif 4',serif;line-height:1.1;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  body.mhome-active .li-cond-sub{font-size:10.5px;color:var(--ink-soft);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  body.mhome-active .li-cond-tiles{display:none;}

  /* Map overlay controls: clear of the pill and the bottom sheet */
  body.mhome-active #trailMap .map-btn{bottom:auto;top:64px;left:12px;}
  body.mhome-active #trailMap .map-btn--terrain{left:auto;right:12px;top:64px;bottom:auto;}
  body.mhome-active #trailMap .map-panel{bottom:auto;top:106px;left:12px;}
  body.mhome-active .maplibregl-ctrl-bottom-left,
  body.mhome-active .maplibregl-ctrl-bottom-right{bottom:calc(26dvh + 6px);}

  /* Selected-pin preview card docks above the tab bar (same card as the
     list rows — no separate condensed header on mobile) */
  body.mhome-active .map-callout{position:fixed;left:10px;right:10px;top:auto;bottom:calc(var(--mhome-tabs,64px) + 10px);transform:none;width:auto;z-index:46;}

  /* ---- BOTTOM SHEET: the ranked list ---- */
  /* Beige sheet, white card rows — matches the desktop pane inversion fix */
  body.mhome-active .li-list{position:fixed;left:0;right:0;bottom:var(--mhome-tabs,64px);z-index:45;display:flex;flex-direction:column;height:46dvh;max-width:none;width:auto;background:#EFECE2;border:none;border-radius:22px 22px 0 0;box-shadow:0 -10px 30px -12px rgba(23,42,28,.3);transition:height .28s cubic-bezier(.22,1,.36,1);overflow:hidden;box-sizing:border-box;}
  body.mhome-active .li-list.mhome-dragging{transition:none;}
  body.mhome-active .mhome-grab{display:block;flex:none;padding:11px 0 8px;cursor:grab;touch-action:none;}
  .mhome-grab span{display:block;width:38px;height:5px;border-radius:3px;background:var(--paper-line,#DEDDD0);margin:0 auto;}

  body.mhome-active .li-list-head{flex:none;padding:0 16px 8px;margin:0;}
  /* Sheet header is just kick + title + count (dog identity lives in the map pill) */
  body.mhome-active .li-dog-row{display:none;}
  body.mhome-active .li-newsline{margin:0 0 6px;font-size:11.5px;}
  body.mhome-active .li-list-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:0;}
  body.mhome-active .li-kick{font:700 10px 'Inter',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8A9689;}
  body.mhome-active .li-list-title{font-family:'Source Serif 4',serif;font-weight:700;font-size:18px;color:var(--ink);margin-top:3px;}
  body.mhome-active .li-list-sub{font-size:11.5px;color:#8A9689;font-weight:600;white-space:nowrap;flex:0 1 auto;min-width:0;max-width:46%;overflow:hidden;text-overflow:ellipsis;}
  body.mhome-active .li-sort{display:flex;align-items:center;gap:8px;margin-top:8px;overflow-x:auto;scrollbar-width:none;}
  body.mhome-active .li-sort::-webkit-scrollbar{display:none;}
  body.mhome-active .li-sort-label{font-size:12px;color:var(--ink-soft);flex:none;}

  body.mhome-active .li-rows{flex:1;min-height:0;overflow-y:auto;padding:0 12px calc(14px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none;}
  body.mhome-active .li-rows::-webkit-scrollbar{display:none;}
  /* Compact the reused trail cards for sheet rows */
  body.mhome-active .li-rows .trail-card{padding:10px;gap:11px;margin-bottom:8px;border:none;border-radius:14px;align-items:center;}
  body.mhome-active .li-rows .trail-card .tc-thumb{width:60px;height:60px;align-self:center;border-radius:12px;}
  body.mhome-active .li-rows .trail-card .name{font-size:14.5px;}
  body.mhome-active .li-rows .tc-reason{display:none;}
  body.mhome-active .li-rows .tc-meta-row{margin-bottom:2px;gap:5px;}
  body.mhome-active .li-rows .tc-stats{font-size:11px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  body.mhome-active .li-rows .tc-actions{margin-top:6px;padding-top:0;border-top:none;gap:12px;}
  body.mhome-active .li-rows .tc-actions a,
  body.mhome-active .li-rows .tc-actions button{font-size:11.5px;}
  body.mhome-active .li-rows .companion-match-col{min-width:50px;padding-left:8px;}
  body.mhome-active .li-rows .tc-ring{width:46px;height:46px;}
  body.mhome-active .li-rows .tc-ring-inner{width:36px;height:36px;font-size:11px;}

  /* ---- BOTTOM TAB NAV (injected by homepage-mobile.js) ---- */
  body.mhome-active .mhome-tabs{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:stretch;background:rgba(247,244,235,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid rgba(27,31,25,.08);padding:8px 6px calc(8px + env(safe-area-inset-bottom));box-sizing:border-box;}
  .mhome-tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:#8A9689;text-decoration:none;font:600 10.5px 'Inter',sans-serif;padding:4px 0;}
  .mhome-tabs a.on{color:var(--ink);font-weight:800;}
}