/* ============================================================
   Mobile logged-in homepage — app layout (≤700px).
   Ported from the Claude Design prototype
   "ORMA 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-grab{display:none;}

@media (max-width:700px){
  body.mhome-active{overflow:hidden;height:100dvh;}
  body.mhome-active .site-footer,
  body.mhome-active .hp-quote{display:none;}
  /* The site's standard header stays — the phone homepage is a website
     page like any other. It pins above the search toolbar. display:flex
     also overrides the returning-view rule that swaps the topnav for the
     desktop-only dark app header. */
  body.mhome-active .topnav{display:flex;position:fixed;top:0;left:0;right:0;z-index:72;}

  /* ---- TOP BAR: the toolbar (search pill + filters + avatar) ----
     The dark app header and greeting bar stay desktop-only; on phones the
     dog identity lives in the map's conditions pill and the account pill is
     moved into the toolbar by homepage-mobile.js. */
  body.mhome-active .li-top,
  body.mhome-active .li-greetbar{display:none;}
  body.mhome-active .li-toolbar{position:fixed;top:var(--mhome-nav,56px);left:0;right:0;z-index:70;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:7px 6px;padding:8px 12px 9px;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-toolbar-greet{grid-column:1/-1;grid-row:1;display:flex;align-items:center;gap:7px;min-width:0;margin:0;}
  body.mhome-active .li-greet-avatar{flex:none;width:25px;height:25px;border-radius:50%;background:var(--accent);background-size:cover;background-position:center;color:#fff;display:grid;place-items:center;font:800 10px 'Inter',sans-serif;overflow:hidden;}
  body.mhome-active .li-toolbar-greet-copy{display:flex;min-width:0;flex-direction:row;align-items:baseline;gap:6px;}
  body.mhome-active .li-toolbar-greet-copy strong{font:700 17px/1.15 'Bricolage Grotesque',sans-serif;white-space:nowrap;}
  body.mhome-active .li-toolbar-greet-copy small{margin:0;font:600 10px/1.2 'Inter',sans-serif;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  body.mhome-active .li-toolbar-breed{text-underline-offset:1px;}
  body.mhome-active .li-search{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--paper-line);border-radius:999px;padding:8px 13px;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-menuwrap{position:static;}
  body.mhome-active .li-country-wrap{grid-column:1;grid-row:3;}
  body.mhome-active .li-region-wrap{grid-column:2;grid-row:3;}
  body.mhome-active .li-saved-only{grid-column:3;grid-row:3;}
  body.mhome-active #liFiltersWrap{grid-column:4;grid-row:3;}
  body.mhome-active .li-country-btn,
  body.mhome-active .li-region-btn,
  body.mhome-active .li-saved-only,
  body.mhome-active .li-filt{width:100%;min-width:0;padding:8px 6px;gap:4px;font-size:11.5px;}
  body.mhome-active .li-control-kicker{display:none;}
  body.mhome-active .li-saved-count{display:none;}
  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-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:0;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;}

  /* The dog identity moved into the toolbar greeting row — the map stays
     clean of the conditions pill on phones. */
  body.mhome-active .li-cond{display:none !important;}

  /* 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 'Bricolage Grotesque',sans-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;}
  body.mhome-active .li-cond-t-desk{display:none;}
  body.mhome-active .li-cond-t-mobile{display:inline;}

  /* Map overlay controls: clear of the pill and the bottom sheet */
  /* Map controls hug the edges — a LEFT stack (conditions pill, Layers,
     style switch) and a RIGHT stack (Expand, zoom/locate). Nothing floats
     mid-map and the stacks can never collide. */
  body.mhome-active #trailMap .map-btn{bottom:auto;top:12px;left:12px;}
  body.mhome-active .li-map .li-map-expand{top:10px;right:12px;}
  body.mhome-active #trailMap .maplibregl-ctrl-top-right{top:52px;}
  body.mhome-active #trailMap .maplibregl-ctrl-attrib{font-size:9px;line-height:1.3;padding:2px 6px;}
  /* Map · Satellite · 3D switch sits opposite the Layers chip, same row */
  body.mhome-active #trailMap .td-layer-switch{top:54px;left:12px;right:auto;bottom:auto;}
  body.mhome-active #trailMap .map-btn--terrain{left:12px;right:auto;top:54px;bottom:auto;}
  body.mhome-active #trailMap .map-panel{bottom:auto;top:96px;left:12px;}

  /* ---- EXPANDED MAP: truly full screen. The base mhome rule pins the
     map between the search bar and the tab bar, which also overrode the
     shared .map-fs fullscreen — "Expand map" only ever grew it a little.
     Expanded, it now covers the whole viewport above the app chrome, with
     safe-area offsets so controls clear the notch. ---- */
  body.mhome-active .li-map.map-fs{top:0;bottom:0;z-index:80;}
  body.mhome-active .li-map.map-fs .li-map-expand{top:calc(10px + env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));}
  body.mhome-active .li-map.map-fs .li-cond{top:calc(12px + env(safe-area-inset-top));}
  body.mhome-active .li-map.map-fs #trailMap .map-btn{top:calc(12px + env(safe-area-inset-top));}
  body.mhome-active .li-map.map-fs #trailMap .td-layer-switch,
  body.mhome-active .li-map.map-fs #trailMap .map-btn--terrain{top:calc(54px + env(safe-area-inset-top));}
  body.mhome-active .li-map.map-fs #trailMap .map-panel{top:calc(96px + env(safe-area-inset-top));}
  body.mhome-active .li-map.map-fs #trailMap .maplibregl-ctrl-top-right{top:calc(52px + env(safe-area-inset-top));}

  /* Recording lives in the toolbar: it stays available without being
     mistaken for map data or obscuring the trail surface. */
  body.mhome-active .li-record{grid-column:3;grid-row:1;min-height:32px;padding:7px 11px;font-size:11.5px;box-shadow:none;}
  body.mhome-active .maplibregl-ctrl-bottom-right{left:auto;right:0;max-width:32%;}
  body.mhome-active .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  /* ---- HIDDEN SHEET: dragging (or tapping) the handle down collapses
     "Ranked for your dog" to just the grab pill, giving the map the whole
     screen. ---- */
  body.mhome-active .mhome-grab{cursor:grab;touch-action:none;}
  body.mhome-active .li-list.mhome-sheet-hidden{border-radius:16px 16px 0 0;}
  body.mhome-active .li-list.mhome-sheet-hidden>*:not(.mhome-grab){visibility:hidden;}
  /* Attribution rides just above the sheet, wherever it is — including
     fully hidden (homepage-mobile.js keeps --mhome-sheet current). */
  body.mhome-active .maplibregl-ctrl-bottom-left,
  body.mhome-active .maplibregl-ctrl-bottom-right{bottom:calc(var(--mhome-sheet, 26dvh) + env(safe-area-inset-bottom) + 6px);transition:bottom .28s cubic-bezier(.22,1,.36,1);}

  /* 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-sheet,26dvh) + env(safe-area-inset-bottom) + 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:0;padding-bottom:env(safe-area-inset-bottom);z-index:45;display:flex;flex-direction:column;height:26dvh;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:'Bricolage Grotesque',sans-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) ---- */
}