/* --- Responsive: App layout --- */
@media(min-width:768px){.app{padding:var(--space-12) var(--space-8) 120px}}
@media(min-width:768px){.progress-bar-inner{padding:var(--space-4) var(--space-8)}}

/* --- Mobile: Rank layout switch --- */
@media(max-width:700px){.rank-layout{grid-template-columns:1fr;}}

/* --- Mobile: Name grid 2-col on small screens --- */
@media(max-width:420px){
  .name-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
  .name-btn{padding:var(--space-4) var(--space-3);font-size:15px}
}

/* --- Mobile: Sticky bottom navigation --- */
@media(max-width:768px){
  .nav-row{
    position:fixed;bottom:0;left:0;right:0;z-index:95;
    margin:0;padding:var(--space-3) var(--space-4);gap:var(--space-3);
    background:var(--bg);
    border-top:1px solid var(--border);
    box-shadow:0 -4px 20px rgba(0,0,0,0.3);
  }
  .nav-row-inline{
    position:static;
    border-top:none;box-shadow:none;
    background:none;padding:0;
    margin-top:var(--space-8);
  }
  .nav-row .btn{
    flex:1;justify-content:center;
    padding:var(--space-4) var(--space-4);font-size:15px;
    min-height:48px;
  }
  .app{padding-bottom:160px}
  .section{padding-top:56px}
}

/* --- Mobile: Rating scale stacked layout --- */
@media(max-width:520px){
  .rating-row{
    flex-direction:column;align-items:stretch;gap:var(--space-2);
    padding:var(--space-4) 0;
  }
  .rating-fund-name{font-size:14px;font-weight:600}
  .rating-buttons{
    display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-2);
  }
  .rating-btn{
    width:100%;height:44px;font-size:14px;font-weight:600;
    border-radius:var(--radius-sm);
  }
}
@media(min-width:521px){
  .rating-btn{min-width:40px;min-height:40px}
}

/* --- Mobile: Fund reference panel as bottom sheet --- */
@media(max-width:768px){
  .fund-ref-panel{
    top:auto;bottom:-100vh;right:0;left:0;
    width:100%;max-width:100vw;height:85vh;
    border-left:none;border-top:1px solid var(--border);
    border-radius:16px 16px 0 0;
    transition:bottom 0.35s cubic-bezier(0.4,0,0.2,1);
    padding:var(--space-5) var(--space-4);
  }
  .fund-ref-panel.open{bottom:0;right:0}
  .fund-ref-toggle{
    bottom:76px;right:16px;
    width:52px;height:52px;font-size:20px;
  }
  .fund-ref-close{
    width:44px;height:44px;font-size:24px;
    display:flex;align-items:center;justify-content:center;
  }
  .fund-ref-panel::before{
    content:'';display:block;
    width:36px;height:4px;
    background:var(--border-light);border-radius:2px;
    margin:0 auto 16px;
  }
}

/* --- Mobile: Improve touch targets globally --- */
@media(max-width:768px){
  .choice-card{padding:var(--space-4);min-height:52px}
  .multi-choice-card{padding:var(--space-4) var(--space-4);min-height:52px}
  .multi-check{width:26px;height:26px;border-radius:6px}
  .multi-check-icon{font-size:16px}
  .review-edit-btn{
    padding:10px 16px;font-size:14px;
    display:inline-flex;align-items:center;
    min-height:44px;
  }
  .btn{min-height:48px}
  .meta-pill{padding:8px 14px;font-size:13px}
}

/* --- Mobile: Typography readability --- */
@media(max-width:520px){
  .fund-card .fc-meta{font-size:12px}
  .fund-card .fc-meta span{padding:3px 8px}
  .section-instructions{font-size:14px;padding:var(--space-4) var(--space-4)}
  .scale-legend-item{font-size:13px;gap:var(--space-2)}
  .scale-legend{padding:var(--space-3) var(--space-4);gap:var(--space-2)}
  .open-question h3{font-size:16px;line-height:1.4}
  .pick-count-badge{font-size:14px;padding:var(--space-3) var(--space-4)}
}

/* --- Mobile: Tap-to-rank mode --- */
@media(max-width:700px){
  .tap-rank-hint{display:block}
  .rank-layout{display:none !important}
  .mobile-rank-summary{display:flex !important}
  .mobile-rank-list{display:block !important}
  .available-pool .rank-slots{max-height:none;overflow-y:visible}
  .rank-col-slots{position:static}
}

/* --- Mobile: Progress bar compact --- */
@media(max-width:400px){
  .progress-bar-inner{padding:var(--space-3) var(--space-4);gap:var(--space-3)}
  .progress-label{font-size:11px;min-width:60px}
}