/* ============================================================
   05-mobile.css
   Phone layout: the sidebar becomes a bottom tab bar and the brand moves
   into a slim header.
   ------------------------------------------------------------
   Load order matters — see index.html. These files are the old
   app.css split at section boundaries, in the original order, so
   the cascade is unchanged.
   ============================================================ */
/* ============================================================
   MOBILE
   The sidebar becomes a bottom tab bar, the brand moves into a slim
   header, and every horizontal control strip is allowed to scroll
   rather than stacking into a wall of chrome.
   ============================================================ */
.mobile-head{display:none;}

@media(max-width:960px){
  .shell{flex-direction:column;}

  /* --- brand header --- */
  .mobile-head{
    display:flex; align-items:center; gap:11px;
    padding:12px 2px 14px; margin-bottom:2px;
  }
  .mobile-head .brand-mark{width:auto;height:30px;flex:0 0 auto;}
  .mobile-head .brand-text{display:flex; flex-direction:row; align-items:baseline; gap:6px;}
  .mobile-head .brand-name{font-size:15px; letter-spacing:.09em;}

  /* --- sidebar becomes a bottom tab bar --- */
  .rail{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    width:100%; height:auto; flex:none; z-index:70;
    flex-direction:row; padding:0; gap:0; overflow:visible;
    background:rgba(9,13,21,.97); backdrop-filter:blur(10px);
    border-right:none; border-top:1px solid var(--line-2);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .rail .brand, .rail .rail-foot{display:none;}
  .nav{
    flex-direction:row; width:100%; padding:7px 4px 5px; gap:0;
    justify-content:space-around; overflow:visible;
  }
  .nav-item[data-id="upload"], .nav-item[data-id="settings"]{display:none;}
  .nav-item{
    flex-direction:column; gap:4px; padding:6px 4px; font-size:10.5px;
    text-align:center; min-width:0; flex:1; border-radius:var(--r1);
  }
  .nav-item .ico{width:21px;height:21px;flex:0 0 21px;}
  .nav-item .lbl{font-size:10.5px; line-height:1.1;}
  .nav-item.active{background:transparent; color:var(--accent-hi);}
  .nav-item.active::before{
    display:block; left:50%; transform:translateX(-50%);
    top:0; bottom:auto; width:26px; height:3px; border-radius:0 0 3px 3px;
  }
  .nav-item .count{
    position:absolute; top:1px; right:max(4px, 22%); font-size:9.5px; padding:0 5px;
  }
  .main{padding:8px 15px calc(84px + env(safe-area-inset-bottom)); max-width:100%;}

  /* --- top bar --- */
  .topbar{gap:9px; margin-bottom:16px;}
  .topsearch{padding:8px 12px; max-width:none;}
  .topsearch input{font-size:16px;}      /* 16px stops iOS zooming on focus */
  .round-btn{width:36px;height:36px;}
  .round-btn svg{width:16px;height:16px;}

  /* --- dashboard --- */
  .dash{grid-template-columns:1fr; gap:16px;}
  .side{position:static;}
  .hero, .plus-promo{padding:26px 22px 24px; min-height:0; border-radius:var(--r2);}
  .hero h1{font-size:clamp(26px,8vw,36px);}
  .hero .tagline{font-size:14px; margin-bottom:18px;}
  .hero-actions{gap:9px;}
  .hero-actions .btn{flex:1; justify-content:center; min-width:0;}
  .panel-head{padding:13px 15px;}
  .panel-head h2, .panel-head h3{font-size:17px;}
  .panel-body{padding:14px 15px;}
  .dash-decks{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:11px;}
  .mini-deck .art{height:92px;}
  .discover{padding:20px 18px;}

  /* --- view headers --- */
  .view-head{margin-bottom:18px;}
  .view-head h2{font-size:23px;}
  .view-head p{font-size:13.5px;}

  /* A toolbar holding a text field can't be swiped: a drag that starts on the
     input belongs to the input, and here the field eats most of the visible
     strip, so the buttons past it were effectively unreachable. These wrap
     instead of scrolling — the field takes its own row and every button stays
     on screen. */
  #cardsView .toolbar, #view-commander .toolbar, #setsPanel .toolbar{
    flex-wrap:wrap; overflow-x:visible; touch-action:auto;
  }
  #cardsView .toolbar .search-input,
  #view-commander .toolbar .search-input,
  #setsPanel .toolbar .search-input{flex:1 1 100%; min-width:0;}
  #cardsView .toolbar > .btn, #setsPanel .toolbar > .btn{flex:1 1 auto;}

  /* The COLLECTION's sort bar lives behind the funnel icon on a phone, so the
     bar itself would be a second copy of the same controls taking up a
     screenful. The search results bar (#sSortBar) is not in the sheet and stays. */
  #sortBar:not(.in-sheet){display:none;}
  /* Binders are one tap away via "All binders"; the sidebar list is desktop-only. */
  .coll-aside{display:none;}

  /* --- control strips scroll instead of stacking --- */
  .toolbar, .binder-bar, .add-filters, .sort-bar{
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding-bottom:4px;
    /* the page is pan-y only; these opt back into sideways swiping, and
       overscroll-behavior stops a swipe past the end from chaining out */
    touch-action:pan-x;
    overscroll-behavior-x:contain;
  }
  .toolbar::-webkit-scrollbar, .binder-bar::-webkit-scrollbar,
  .add-filters::-webkit-scrollbar, .sort-bar::-webkit-scrollbar{display:none;}
  .toolbar > *, .binder-bar > *, .add-filters > *, .sort-bar > *{flex:0 0 auto;}
  .sort-bar{padding:10px 12px;}
  .sort-note{display:none;}
  .toolbar .search-input{min-width:170px; font-size:16px;}
  .toolbar-right{margin-left:0;}
  .binder-bar{padding:10px 12px;}
  .value-bar{padding:12px 14px; gap:12px;}
  .value-main .amount{font-size:25px;}
  .value-bar select{margin-left:0; width:100%; font-size:16px;}
  .value-split{width:100%;}

  /* --- card grids --- */
  .grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px;}
  .binder-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:11px;}
  .btile-art{height:96px;}
  .btile-name{font-size:16px;}
  .coll-title{font-size:21px;}
  .art-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); max-height:190px;}
  .art-preview img{height:104px;}
  .card-tile .cname{font-size:12px;}
  .card-tile .ctype{font-size:10px;}
  .tile-actions{opacity:1;}
  .pick-btn{opacity:1;}

  /* --- deck editor --- */
  .deck-name-input{font-size:21px; min-width:0;}
  .add-panel{padding:13px 14px;}
  .add-head{gap:8px;}
  .add-head .search-input{flex:1 1 100%; font-size:16px;}
  .add-results{max-height:260px;}
  .add-row img{width:26px;height:36px;flex:0 0 26px;}
  .add-row .at{display:none;}          /* the type line is the first thing to go */
  .cmd-header{flex-direction:column; padding:16px;}
  .cmd-header .cimg{width:120px;}
  .cmd-header h2{font-size:22px;}
  .stat-row{gap:8px;}
  .stat{min-width:0; flex:1 1 44%; padding:11px 13px;}
  .stat .n{font-size:22px;}
  .curve-wrap, .deck-charts .curve-wrap{max-width:none;}
  .deck-charts{gap:12px;}

  /* --- search --- */
  .filters{padding:14px 15px;}
  .filter-grid{grid-template-columns:1fr; gap:13px;}
  .fgroup input[type=text], .fgroup input[type=number], .fgroup select{font-size:16px;}
  .filter-foot{gap:8px;}
  .filter-foot .btn{flex:1;}
  .query-preview{width:100%; font-size:10.5px;}
  .mode-row select{flex:1; font-size:16px;}
  .set-row{padding:10px 12px; gap:11px;}
  .set-meta{font-size:11px;}
  .set-count{min-width:0;}
  .set-owned{display:none;}

  /* --- scanner --- */
  .scan-wrap{grid-template-columns:1fr; gap:15px;}
  .scan-stage{padding:12px;}
  .video-box{aspect-ratio:3/4;}
  .scan-controls .btn{min-width:0; flex:1 1 44%;}
  .match-body{gap:12px;}
  .match-body img{width:84px;flex:0 0 84px;}
  .manual-row input, .manual-row select{font-size:16px;}

  /* --- shopping list --- */
  .shop-panel{padding:16px 15px;}
  .shop-row .rl{display:none;}

  /* --- modals behave like sheets --- */
  .modal-back{padding:0; align-items:flex-end;}
  .modal{
    width:100%; max-width:none; max-height:90vh; overflow-y:auto;
    border-radius:var(--r3) var(--r3) 0 0; padding:20px 18px calc(20px + env(safe-area-inset-bottom));
  }
  .modal textarea{min-height:200px; font-size:13px;}
  .modal-foot{flex-direction:column-reverse;}
  .modal-foot .btn{width:100%;}
  /* align-items:flex-start is right for the two-column desktop layout, but in
     a COLUMN flex container it makes every child shrink to its own content
     width instead of filling the sheet. The rules text and the manage row are
     wider than a phone, so the sheet gained ~140px of horizontal scroll: text
     was cut off at the right edge, and a sideways swipe scrolled the sheet
     instead of stepping to the next card. That is the whole "wobbly" feel. */
  /* The two boards side by side stay tappable at phone width. */
  .board-seg{width:100%;}
  .board-seg button{flex:1;}

  .detail{flex-direction:column; align-items:stretch;}
  .detail .dimg{width:min(62vw,230px); flex:0 0 auto; margin:0 auto;}
  /* Nothing in the detail view is meant to scroll sideways. */
  .modal{overflow-x:hidden;}
  .detail, .detail .dbody, .detail-manage{min-width:0; max-width:100%;}
  .detail .dtext{overflow-wrap:anywhere;}
  .manual-row{flex-wrap:wrap;}

  /* --- toasts clear the tab bar --- */
  #toastHost{
    left:12px; right:12px; bottom:calc(80px + env(safe-area-inset-bottom));
    align-items:stretch;
  }
  .toast{max-width:none;}
  #offlineBar{
    left:12px!important; right:12px!important; transform:none!important;
    bottom:calc(80px + env(safe-area-inset-bottom))!important;
  }

  /* --- settings --- */
  .field input[type=text], .field select{font-size:16px;}
  pre.code{font-size:10.5px; padding:12px;}
  .auth-row input{flex:1 1 100%; font-size:16px;}
  .auth-actions .btn{flex:1;}
}

/* phablets / small tablets still caught by the 960px "mobile" breakpoint —
   the phone-tuned 132px minmax packs 5-6 tiny columns at this width, which
   reads as "too many columns" and pushes people to pinch-zoom for legibility. */
@media(min-width:700px) and (max-width:960px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px;}
  .binder-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}
}

/* very small phones */
@media(max-width:400px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:8px;}
  .dash-decks{grid-template-columns:1fr 1fr;}
  .nav-item .lbl{font-size:9.5px;}
  .main{padding-left:12px; padding-right:12px;}
}

/* coarse pointers: give every tap target room regardless of width */
@media (pointer:coarse){
  .icon-btn{width:34px;height:34px;}
  .qty-btn{width:30px;height:30px;font-size:16px;}
  .pip{width:38px;height:38px;}
  .chip{padding:7px 13px;}
  .binder-edit{width:28px;height:28px;}
  .btn.sm{padding:9px 13px;}
}

/* ---------- sort bars (collection + search results) ---------- */
.sort-bar{
  display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:16px;
  padding:11px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r2);
}
.sort-bar.is-empty{display:none;}
.sort-bar .lbl{
  font-family:'Barlow Condensed',sans-serif; font-size:11.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.13em; color:var(--text-label); margin-right:4px;
}
.sort-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bg-2); border:1px solid var(--line-2); color:var(--text-dim);
  padding:5px 11px; border-radius:20px; font-size:12.5px; transition:all .13s;
}
.sort-chip:hover{border-color:var(--line-3); color:var(--text);}
.sort-chip.on{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600;}
.sort-chip .arrow{font-size:11px; line-height:1;}
.sort-note{font-size:11.5px; color:var(--text-faint); white-space:nowrap;}
.delta{font-size:10.5px; font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:600;}
.delta.up{color:var(--ok);}
.delta.down{color:var(--bad);}

/* "Search by name" in the scanner takes the whole height on a phone, with
   the field at the top: the keyboard comes up below it, nothing jumps. */
@media(max-width:960px){
  .modal.name-search{
    height:calc(100% - 12px - env(safe-area-inset-top)); max-height:none;
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
  }
}