/* Mobile readability for Search and the reference Viewer only.
   Loaded after creation-options.css so these narrow-screen floors stay authoritative. */

/* iOS input zoom can also affect tablet-width search layouts. */
@media (max-width:860px){
  .topnav .hsearch input,
  .ms-source-search input{font-size:16px}
}

@media (max-width:760px){
  /* Search: retain quiet, conventional search chrome while making its text readable. */
  .meld-search-ui{
    padding-inline:calc(16px + env(safe-area-inset-left)) calc(16px + env(safe-area-inset-right));
  }
  .ms-segment button,
  .ms-scope,
  .ms-scope-link,
  .ms-reset,
  .ms-filter-chip,
  .ms-section-heading button,
  .ms-person-filter,
  .ms-facet-chip{font-size:14px}
  .ms-segment button span,
  .ms-results-heading span,
  .ms-person-filter small,
  .ms-facet-chip small{font-size:13px;color:var(--ink3)}
  .ms-segment button,
  .ms-scope-link,
  .ms-reset,
  .ms-filter-chip,
  .ms-section-heading button,
  .ms-person-filter,
  .ms-facet-chip,
  .ms-source-actions button,
  .ms-panel-close,
  .ms-suggestion-terms button,
  .ms-suggestion-refs button,
  .ms-filter-footer button{min-height:44px}
  .ms-panel-close{width:44px;min-width:44px}
  .ms-hue{width:44px;height:44px}
  .ms-hue::before{inset:13px}
  .ms-collection-card small,
  .ms-person-card small{font-size:14px;color:var(--ink2)}

  /* Popovers follow the keyboard-sized viewport hook and device safe areas. */
  .ms-popover{
    inset:auto max(8px,env(safe-area-inset-right)) calc(100dvh - var(--mc-vh,100dvh) + max(8px,env(safe-area-inset-bottom))) max(8px,env(safe-area-inset-left))!important;
    max-height:calc(var(--mc-vh,100dvh) - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .ms-source-picker{
    max-height:calc(var(--mc-vh,100dvh) - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  #meld-search-suggestions{
    left:max(8px,env(safe-area-inset-left))!important;
    right:max(8px,env(safe-area-inset-right));
    max-height:calc(var(--mc-vh,100dvh) - 128px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .ms-source-search{height:48px;color:var(--ink2)}
  .ms-source-left h3,
  .ms-facets h3,
  .ms-suggestion-box section h3{font-size:14px;color:var(--ink3);letter-spacing:.04em}
  .ms-source-left>p,
  .ms-source-primary small,
  .ms-category small,
  .ms-panel-empty,
  .ms-filter-head p,
  .ms-suggestion-terms>span,
  .ms-suggestion-refs small,
  .ms-suggestion-jumps small{font-size:14px;color:var(--ink2);line-height:1.45}
  .ms-source-primary em,
  .ms-source-actions button,
  .ms-suggestion-terms button,
  .ms-suggestion-refs b,
  .ms-suggestion-jumps b{font-size:14px}
  .ms-source-actions{font-size:13px;color:var(--ink3)}
  .ms-archive{font-size:14px}
  .ms-archive small,
  .ms-suggestion-jumps em{font-size:13px;color:var(--ink3)}
  .mv-fullscreen-layer .mv-media-count{font-size:13px;color:var(--ink3)}
  .mv-fullscreen-layer .mv-page-input{width:44px;height:44px}
  .mv-fullscreen-layer [data-browse-person]{min-width:44px}
}

@media(max-width:760px){
 .ms-segment button span,.ms-person-filter small,.ms-facet-chip small,.ms-archive small{color:var(--ink2)}
 .meld-dialog input:not([type=checkbox]):not([type=radio]):not([type=range]),.meld-dialog textarea,.meld-dialog select{font-size:1rem}
 .meld-dialog input::placeholder,.meld-dialog textarea::placeholder{color:var(--ink2);opacity:1}
 .meld-dialog .field{font-size:.875rem;line-height:1.5}
 .meld-dialog .btn{min-height:44px}.meld-dialog .icon-btn{min-width:44px;min-height:44px}
}