/* huadorr-screens.css - mobile layout fixes + Discover card matched to the design board.
   Loaded AFTER huadorr.css (last stylesheet). Rollback: remove its <link> tag.
   Rules marked "phone" sit inside max-width media queries, so desktop (900px and up) is unchanged. */

:root{--navh:64px}

/* ---------- header: never wider than the screen ---------- */
header{flex-wrap:wrap;gap:8px 12px}
header>div:last-child{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:480px){
  .brand{font-size:24px}
  header .btn.sm{padding:0 14px;min-height:40px;font-size:13px}
  .theme-btn,#lb{width:40px;height:40px;min-height:40px;padding:0;justify-content:center}
}

/* ---------- Discover card: square rounded photo, pills on the photo, two-line bio ---------- */
.card{background:var(--bg);clip-path:none;border-radius:0;box-shadow:none}
.pic{flex:0 0 auto;aspect-ratio:1/1;border-radius:22px;background:var(--tint)}
.pic.np{background:var(--tint)}
.ini{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);font-family:var(--font-d);font-size:min(55vw,210px);line-height:1;color:transparent;-webkit-text-stroke:2.5px var(--acc)}

.rk,.dist{top:auto;bottom:14px;padding:7px 14px;font-size:13px;font-weight:700}
.rk{left:14px;right:auto;background:var(--t1);color:var(--bg);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.dist{right:14px;left:auto;background:var(--s1);color:var(--t1);border-radius:16px 16px 4px 16px}

.body{padding:12px 6px 30px;overflow:hidden}
.body h3{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:30px;line-height:1.1;margin-bottom:4px}
.meta{font-size:14px;margin:0 0 8px}
.bio{font-size:14px;line-height:1.45;color:var(--t2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rpt{right:6px;bottom:8px;padding:6px 4px}

.acts{gap:12px;margin-top:10px}
.acts .btn{min-height:56px;font-size:18px}
.acts .btn.ghost{background:var(--line)}
.acts .btn.ghost:hover{background:var(--line2)}

/* ---------- "players like you" banner ---------- */
.li.lkb{margin:10px 0 0;padding:8px 14px;gap:12px;background:var(--s1);border:1.5px solid var(--line);border-radius:26px}
.li.lkb:hover{background:var(--s2)}
.lkb>.grow{font-size:14px;font-weight:700}
.lkb a{min-height:44px;display:inline-flex;align-items:center;color:var(--t1);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.lkb-av>*{border-color:var(--s1)}
.lk-ph{background:var(--tint);color:var(--acc-t)}

/* ---------- footer links are not shown on logged-in app screens (Discover, Matches, Chat, Premium, Profile) ---------- */
.wrap:has(#nav) .foot{display:none}

/* ---------- ISSUE 1: navigation count badge (small, round, readable, tied to the icon pill) ---------- */
nav#nav{--pill-top:10px}
nav#nav .nb{
  top:calc(var(--pill-top) - 9px);left:calc(50% + 13px);
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--t1);color:var(--bg);
  font:700 11px/18px var(--font-b);text-align:center;
  box-shadow:0 0 0 2px var(--s1);
}

/* ---------- ISSUE 2: Matches grid, balanced for one match or an odd number ---------- */
@media (max-width:899px){
  .mc2{background:var(--tint)}
  .mgrid .mc2{aspect-ratio:1/1}
  .mgrid .mc2:last-child:nth-child(odd){grid-column:1/-1;aspect-ratio:16/9}
  .mgrid .mc2:last-child:nth-child(odd) img{object-position:50% 30%}
  .mc2 .l0{left:50%;top:50%;transform:translate(-50%,-50%);font-size:min(36vw,150px);line-height:1;color:transparent;-webkit-text-stroke:2px var(--acc)}
}

/* ---------- phone layout (640px and below) ---------- */
@media (max-width:640px){

  /* bottom navigation: one fixed height, identical tabs, one active treatment */
  nav#nav{--pill-top:8px;height:calc(var(--navh) + env(safe-area-inset-bottom,0px));padding:0 4px env(safe-area-inset-bottom,0px);align-items:stretch}
  nav#nav button{height:var(--navh);min-height:0;padding:8px 2px 0;justify-content:flex-start;gap:2px;white-space:nowrap}
  nav#nav button span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;line-height:1.3}

  /* app screens: compact header, page fills the screen, nothing hides behind the nav */
  .wrap:has(#nav){
    display:flex;flex-direction:column;
    min-height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    min-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    padding-bottom:calc(var(--navh) + 16px);
  }
  .wrap:has(#nav)>#root{flex:1 0 auto}
  .wrap:has(#nav) header{padding:10px 0}

  /* ISSUE 3: Discover fills the screen: card grows with the phone, Pass/Like stay above the nav,
     and the empty state centres in the free space instead of floating in a fixed-height box */
  .wrap:has(#nav):has(.stage)>#root{display:flex;flex-direction:column}
  .wrap:has(#nav):has(.stage) #view{flex:1;display:flex;flex-direction:column}
  .stage{flex:1 1 auto;height:auto;min-height:420px;max-height:760px}
  .stage:has(.empty){display:flex;min-height:240px}
  .stage>.empty{flex:1;min-height:0;padding:24px 16px}
  .card .pic{flex:1 1 auto;min-height:120px;max-height:calc((100vw - 36px) * 1.2)}
  .card .body{flex:0 0 auto}
  .hint{display:none}
  .wrap:has(.stage) #view>p.muted:last-child{margin:6px 0 0!important}

  /* ISSUE 3b: Matches / Chat empty states centre in the free space too */
  .wrap:has(#nav):has(#view>.empty)>#root{display:flex;flex-direction:column}
  .wrap:has(#nav):has(#view>.empty) #view{flex:1;display:flex;flex-direction:column}
  #view>.empty{flex:1;min-height:240px}

  /* ISSUE 4: open conversation uses the real height between header and nav; composer sits above the nav */
  .wrap:has(#nav):has(.th){
    height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    min-height:0;
    padding-bottom:calc(var(--navh) + 8px);
  }
  .wrap:has(#nav):has(.th)>#root{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
  .wrap:has(#nav):has(.th) #view{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
  .th{flex:1 1 auto;height:auto;min-height:0}
  .th-body{min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .comp{padding-bottom:6px}

  /* toasts must not hide behind the nav */
  body:has(#nav) .toast{bottom:calc(var(--navh) + 16px + env(safe-area-inset-bottom,0px))}
}