/* Phones, tablets and touch screens, following the RLS universal website kit's mobile-first rules.
   Loaded last: it adjusts the shell and pages for small and touch screens without rewriting their desktop styles. */

/* Full-height screens use the small viewport so phone browser bars never cover their content. */
.boot,.auth,.shell{min-height:100vh;min-height:100svh}

/* The phone copy of the dark mode switch lives in the account menu; the rail keeps its own on wide screens. */
.acct-theme{display:none}

/* ===== Phones and small tablets: one sticky top bar, and the page itself scrolls ===== */
@media (max-width:899px){
  body:has(.shell){overflow:visible}
  .shell{display:block;height:auto;padding-bottom:0}
  .shell>.top{position:sticky;top:0;z-index:20;padding:6px 12px;gap:4px}
  .shell>#main{overflow:visible;min-height:0}
  /* Dark mode leaves the fixed bottom bar, which took 68px of every phone screen. */
  .top>.theme-control{display:none}
  .acct-theme{display:block;margin:4px 0;padding:4px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .acct-theme .theme-control{margin:0;padding:0;border:0}
  .acct-theme .theme-toggle{width:100%;min-height:44px;padding:8px 10px;font-size:14px;font-weight:500;color:var(--ink)}
  /* The account menu hangs from the header across the screen, never off its left edge. */
  .shell>.top>.acct{position:static}
  .shell>.top .acct-menu{left:12px;right:12px;top:calc(100% + 4px);bottom:auto;min-width:0;max-width:420px}
  .mi{min-height:44px;font-size:14px}
  .toasts{bottom:calc(16px + env(safe-area-inset-bottom))}
  /* Header controls are full-size touch targets. */
  #refresh-btn{width:44px;height:44px}
  .shell>.top>.acct .acct-btn{min-width:44px;min-height:44px;justify-content:center}
  /* Section links: full height, never squeezed below their text; the row scrolls sideways only when it must. */
  .shell>.top>.mainnav{padding-bottom:0;scrollbar-width:none;scroll-snap-type:x proximity}
  .shell>.top>.mainnav::-webkit-scrollbar{display:none}
  .shell>.top>.mainnav a{flex:1 0 auto;min-height:44px;padding:8px 5px;font-size:13px;justify-content:center;scroll-snap-align:start}
  .shell>.top>.mainnav a[aria-current=page]::before{left:5px;right:5px;bottom:2px}
  .page{padding:20px 16px 56px}
}
@media (max-width:374px){
  .shell>.top{padding:6px 8px}
  .tool-link{width:38px;height:38px;padding:7px}
  .tool-link img{width:22px;height:22px}
}
/* Landscape phones: the header scrolls away so the page has room to read. */
@media (max-width:899px) and (max-height:500px){
  .shell>.top{position:relative}
}

/* ===== Phone pages ===== */
@media (max-width:720px){
  /* Reading text: page summaries at 15px, list titles at 16px. */
  .sub,.empty p,.quiet p,.st-meta{font-size:15px}
  .ptitle,.atitle{font-size:16px}
  .adesc,.pmeta,.asched{font-size:13.5px}
  .fulltext{font-size:16px}
  .prompt{font-size:15px}
  .dmeta dd{font-size:15px}
  /* Site detail: the five status cards join into one plate instead of a stack of boxes with an orphan. */
  .st-cards{gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden}
  .st-card{border:0;border-radius:0}
  .st-cards>.st-card:last-child:nth-child(odd){grid-column:1/-1}
  .st-ids code{word-break:normal;overflow-wrap:anywhere}
  /* Zapier: three short facts per line, so 25 Zaps take half the scrolling. */
  .zp-table tr{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;padding:14px}
  .zp-table td:first-child{grid-column:1/-1}
  .zp-table td{font-size:14px}
}
@media (max-width:360px){.zp-table tr{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Tablets: the five site status cards fill two full rows (three, then two) instead of leaving an empty slot. */
@media (min-width:721px) and (max-width:1000px){
  .st-cards{grid-template-columns:repeat(6,minmax(0,1fr))}
  .st-cards>.st-card{grid-column:span 2}
  .st-cards>.st-card:nth-child(n+4):nth-last-child(-n+2){grid-column:span 3}
}

/* ===== Touch screens: at least 24px for every control, 44px for buttons and navigation ===== */
@media (pointer:coarse){
  .btn{min-height:44px;padding:0 14px}
  .btn.sm{min-height:36px}
  .btn.block{min-height:48px}
  .iconbtn{width:44px;height:44px}
  .wk-step .iconbtn{width:44px;height:42px}
  .toast-x{width:40px;height:40px}
  .seg button,.seg span{min-height:36px;padding:6px 12px}
  .subtabs button,.pv-tabs [role=tab]{min-height:44px}
  .ads-subnav a{display:inline-flex;align-items:center;min-height:44px;padding:0}
  .link,.ao-text,.ah-text-button,.ao-account,.ah-account{min-height:24px;padding-top:3px;padding-bottom:3px}
  .st-site{padding:3px 0}
  .st-crumb a,.ext,.cr-back{display:inline-flex;align-items:center;min-height:24px}
  .st-table a{display:inline-block;min-height:24px;padding:2px 0}
  .mi{min-height:44px}
  .theme-toggle{min-height:44px}
  .ah-account-switch button,.ah-status-switch button{min-height:40px}
  .ah-other-filters button{min-height:36px}
  .alert summary,.publishing-phone summary{min-height:44px}
  .csync summary,.ah-coverage>summary,.ah-match-details>summary,.ao-method summary,.auth-alt summary{display:inline-flex;align-items:center;min-height:32px}
  .check input,.cr-checkbox input[type=checkbox]{width:20px;height:20px;min-height:20px}
  .cr-account .btn{min-height:44px}
}

/* ===== Form fields at 16px so iPhone Safari never zooms in on focus ===== */
@media (max-width:899px),(pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea,.wk-pick select,.searchbox input,.ah-search input{font-size:16px}
  .cr-activation input{font-size:16px!important}
  .field input,.field select,.wk-pick select,.searchbox,.ah-search input{min-height:44px}
}