/* FoxyPick Mobile Experience · 2026-11-05
   A single mobile-only finishing layer. Does not alter desktop layouts.
   Scope all controls by existing FoxyPick classes to avoid affiliate widgets. */
@media (max-width: 700px) {
  html { -webkit-text-size-adjust: 100%; }
  #fp-nav-v2 .fn-inner { min-width:0; }
  #fp-nav-v2 .fn-logo { min-width:0; }
  #fp-nav-v2 .fn-logo img { height:auto; }
  #fp-nav-v2 .fn-mobile { z-index:900; }
  #fp-nav-v2 .fn-mobile > summary {
    display:flex;align-items:center;justify-content:center;
    min-width:92px;min-height:48px;line-height:1.2;
    padding:12px 15px;font-size:15px;
    touch-action:manipulation;
  }
  #fp-nav-v2 .fn-mobile-menu {
    max-width:calc(100vw - 24px);
    max-height:min(75dvh,650px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding-bottom:max(12px,env(safe-area-inset-bottom));
    z-index:950;
  }
  #fp-nav-v2 .fn-mobile-menu a {min-height:48px;font-size:16px;line-height:1.35;padding:13px 15px;}
  #fp-nav-v2 .fn-mobile-menu a:active {background:#355a3e;}
  #fp-nav-v2 .fn-mobile > summary:focus-visible {outline:3px solid #c2eb8e;outline-offset:3px;}

  /* iPhone: 16px form fields prevent Safari's disruptive focus zoom. */
  .fp-problem input,.fp-problem select,.fp-problems input,.fp-problems select,
  .fp-guide-browser input,.fp-guide-browser select,.fp-library-main input,.fp-library-main select,
  .rfc input,.rfc select,.fp-clean-rankings input,.fp-clean-rankings select,
  .fp-rank-focus input,.fp-rank-focus select,
  #fp-live-board input,#fp-live-board select {
    font-size:16px!important; min-height:46px;max-width:100%;
  }
  .fp-guide-filters .filter-btn,
  .fp-problems [data-problem-filter],
  #fp-rank-toolbar button,.fp-rank-focus button,
  .rfc button,.fp-problem .btn {
    min-height:44px;
    touch-action:manipulation;
  }
  .fp-guide-filters .filter-btn {min-height:44px!important;font-size:13px!important;}
  .fp-problem .anchor-nav a {
    display:inline-flex;align-items:center;min-height:44px;
    font-size:13px;font-weight:800;
    padding:7px 2px;
    touch-action:manipulation;
  }
  .fp-problem .anchor-nav .shell {row-gap:3px;}
  .fp-problem h1 {font-size:clamp(36px,9.5vw,47px)!important;line-height:1.1!important;}
  .fp-problem .faq summary {min-height:46px;display:flex;align-items:center;font-size:16px;line-height:1.45;}
  .fp-problem .faq p {font-size:15px;line-height:1.7;}
  .fp-problem .tool label {font-size:14px;line-height:1.5;}
  .fp-problem .tool output {overflow-wrap:anywhere;}
  .fp-problem .table-wrap,
  #fp-hist-table,.fpe2-table-wrap,.fp-comparison-table-wrap {
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .fp-problem figure,.fph-main img,.fp-problems img {max-width:100%;}
  .fp-problems .bar button {min-height:44px;}
  .fp-problems article h3 {font-size:21px;line-height:1.3;}
  .fp-problems article a {display:inline-flex;align-items:center;min-height:44px;font-size:14px;}

  /* Rankings: replace 9–10px legacy compression with legible type. */
  #fp-board-rows .fp-row-topline {
    gap:8px!important;
    padding-right:0!important;
    min-width:0;
  }
  #fp-board-rows .fp-row-topline > .fp-rank-trigger {
    min-width:0!important;
    flex:1 1 0!important;
    gap:8px!important;
  }
  #fp-board-rows .fp-rank-main {min-width:0;overflow-wrap:anywhere;}
  #fp-board-rows .fp-rank-name {font-size:15px!important;line-height:1.32!important;}
  #fp-board-rows .fp-rank-punchline {font-size:13px!important;line-height:1.5!important;}
  #fp-board-rows .fp-rank-subtitle,
  #fp-board-rows .fp-quickfacts {font-size:12px!important;line-height:1.5!important;}
  #fp-board-rows .fp-row-amazon {
    display:inline-flex!important;
    align-items:center;justify-content:center;
    min-width:95px!important;max-width:112px!important;
    min-height:44px!important;
    padding:10px 8px!important;
    font-size:12px!important;
    line-height:1.25!important;
    white-space:normal!important;text-align:center!important;
    overflow-wrap:normal;
  }
  #fp-board-rows .fp-rank-num {flex-shrink:0;}
  #fp-board-rows .fp-rank-trigger {min-height:58px;}
  #fp-board-rows .fp-rank-actions a {min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
  #fp-live-board #fp-rank-toolbar {gap:9px!important;}
  #fp-live-board #fp-rank-toolbar label {font-size:12px!important;}
  #fp-hist-tabs button {min-height:44px;}
  .fp-clean-rankings .fp-board-tabs button,.fp-clean-rankings .fp-board-tabs a {min-height:44px;}
}
@media (max-width: 380px) {
  #fp-nav-v2 .fn-inner {gap:7px!important;}
  #fp-nav-v2 .fn-logo img {max-width:40vw!important;}
  .fp-problem .shell,.fp-problems .shell {width:calc(100% - 28px)!important;}
  .fp-problem h1 {font-size:35px!important;}
  #fp-board-rows .fp-rank-num {width:34px!important;min-width:34px!important;flex-basis:34px!important;}
  #fp-board-rows .fp-row-amazon {min-width:88px!important;max-width:95px!important;font-size:11.5px!important;}
  #fp-board-rows .fp-rank-name {font-size:14px!important;}
}
@media (prefers-reduced-motion:reduce) {
  #fp-nav-v2 .fn-mobile-menu *,#fp-board-rows * {scroll-behavior:auto;transition-duration:0s!important;animation-duration:0s!important;}
}

/* Live 320/390px QA correction: FoxyPick compact ranking contrast rules
   use more specific selectors than the initial mobile stylesheet.
   Preserve the compact grid while restoring readable labels and 44px actions. */
@media (max-width:700px) {
  html body .fp-clean-rankings #fp-board-rows .fp-rank-row-v2 .fp-row-topline {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 98px!important;
    gap:6px!important;
    align-items:center!important;
    min-width:0;
    padding:0 7px 0 0!important;
  }
  html body .fp-clean-rankings #fp-board-rows .fp-rank-row-v2 .fp-row-topline > .fp-rank-trigger {
    min-width:0!important;
    min-height:78px!important;
    padding:9px 3px 9px 9px!important;
    gap:7px!important;
    align-items:center!important;
  }
  html body .fp-clean-rankings #fp-board-rows .fp-rank-row-v2 .fp-rank-main {
    min-width:0!important;
    overflow-wrap:anywhere;
  }
  html body .fp-clean-rankings #fp-board-rows .fp-rank-row-v2 .fp-rank-name {
    font-size:15px!important;
    line-height:1.3!important;
    letter-spacing:-.018em!important;
  }
  html body .fp-clean-rankings #fp-board-rows .fp-rank-row-v2 .fp-rank-punchline {
    font-size:13px!important;
    line-height:1.45!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  html body .fp-clean-rankings #fp-board-rows .fp-rank-row-v2 .fp-evidence-score {
    font-size:11.5px!important;
    line-height:1.35!important;
  }
  html body .fp-clean-rankings #fp-board-rows .fp-rank-row-v2 .fp-row-amazon {
    justify-self:end!important;
    width:94px!important;
    min-width:94px!important;
    max-width:94px!important;
    min-height:46px!important;
    padding:10px 8px!important;
    white-space:normal!important;
    border-radius:12px!important;
    font-size:0!important; /* The existing ::after supplies concise, visible copy. */
  }
  html body .fp-clean-rankings #fp-board-rows .fp-rank-row-v2 .fp-row-amazon::after,
  html body .fp-clean-rankings #fp-board-rows .fp-rank-row-v2 .fp-row-amazon[href*="amazon.com"]::after {
    font-size:12px!important;
    line-height:1.3!important;
  }
}
@media (max-width:360px) {
  html body .fp-clean-rankings #fp-board-rows .fp-rank-row-v2 .fp-row-topline {
    grid-template-columns:minmax(0,1fr) 90px!important;
    gap:3px!important;
  }
  html body .fp-clean-rankings #fp-board-rows .fp-rank-row-v2 .fp-rank-name {font-size:14px!important;}
  html body .fp-clean-rankings #fp-board-rows .fp-rank-row-v2 .fp-row-amazon {
    width:88px!important;min-width:88px!important;max-width:88px!important;
  }
}