/* A9: phone (390px) and tablet (768px). Loaded AFTER v3.css (generated from the prototype, no media queries of its own), so these rules win over its desktop layout.
   Rules: nothing makes the page itself wider than the screen (a table scrolls inside its own frame, its name column pinned); the menu is a drawer opened by a button; a panel is a full screen;
   everything you tap is at least 40px. */
.navchk{position:absolute;opacity:0;pointer-events:none}
.navbtn,.navscrim{display:none}
@media (max-width:900px){
  html,body{max-width:100%;overflow-x:hidden}
  .navbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-8px;font-size:22px;line-height:1;cursor:pointer;color:var(--text);border-radius:10px}
  .navbtn:hover{background:var(--surface-2)}
  .navchk:focus-visible ~ .mtop .navbtn{outline:2px solid var(--accent);outline-offset:-2px}
  .mtop{gap:8px}.mtop .logo{margin-right:auto}
  /* the menu: a drawer from the left, not a bar along the bottom */
  .rail{position:fixed;top:0;bottom:0;left:0;right:auto;width:min(300px,86vw);height:100vh;flex-direction:column;justify-content:flex-start;padding:16px 12px 24px;border-right:1px solid var(--line);border-top:0;
        transform:translateX(-104%);transition:transform .18s ease;z-index:60;overflow-y:auto;background:var(--bg);visibility:hidden}
  .navchk:checked ~ .shell .rail{transform:none;visibility:visible}
  .navchk:checked ~ .shell .navscrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:55}
  .rail a{min-height:44px;font-size:15px;padding:0 10px;gap:8px;flex:0 0 auto;justify-content:flex-start;align-items:center}
  .rail .mgroup,.rail .mgroup+*{display:block}.rail .mgroup{display:block;margin-top:10px}
  .rail hr{display:block}
  .rail>a[href="/offers"],.rail>a[href$="/settings"],.rail>a[href$="/accounts"]{display:flex}
  .rail .logo{display:none}.rail .railfoot{display:flex;margin-top:auto}.rail .railfoot .signout,.rail .railfoot a{min-height:44px;display:flex;align-items:center}
  .rail>a{display:flex}.v3 .xtoggle,.xtoggle{margin:8px 16px}
  .sheet{display:none}
  .main{padding:12px 16px 24px}.attr{padding:10px 16px 24px}
  .v3.pro.owrap,.v3 .owrap{padding-left:0;padding-right:0}
  /* Prospect: one column, the filters behind their button, the table in its own scrolling frame */
  .v3 .layout,.v3 .layout.nr,.v3 div.layout.nr{grid-template-columns:minmax(0,1fr)!important}
  .v3 .layout>.pmain,.v3 .layout.nr>.pmain,.v3 .layout>.p-main{grid-column:1!important;min-width:0}
  .v3 .layout>.xrail{position:static;height:auto;width:auto;max-height:none;border:0;grid-column:1}
  .v3 .layout>.ftab{display:none!important}
  .v3.pro .xtoggle,.xtoggle{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);cursor:pointer;font-weight:600;gap:6px}
  .v3 .xrailhead{display:none}
  .v3 .xwrap,.v3 .p-main,.v3 .pmain{min-width:0;max-width:100%}
  .v3 .tw{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ob{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  .xwrap,.v3 .xwrap{margin-left:-16px;margin-right:-16px}                            /* the desktop page bleeds over the main padding by 28px: on a phone the main padding is 16px */
  .v3 .p-top,.v3 .afl,.v3 .p-tabs,.v3 .tabs{padding-left:16px;padding-right:16px}
  .v3 .p-top{flex-wrap:wrap;gap:8px}.v3 .p-top .sp{display:none}
  .v3 .p-top h1{flex:1 1 100%}
  .v3 .p-tabs,.v3 .otabs,.v3 .tabs{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap}
  .v3 .afl{overflow-x:auto;flex-wrap:nowrap}
  /* the panel is a full screen on a phone */
  .panel,.has-panel .panel,.v3p{position:fixed;inset:0;width:100%;max-width:100%;height:100vh;height:100dvh;max-height:none;flex:none;z-index:70;border-left:0;overflow-y:auto;background:var(--surface,var(--bg))}
  .has-panel .xrail{display:none}
  /* touch */
  .p-btn,.v3 .p-btn,.sq,.v3 .sq,.mini,.v3 .p-in,.v3 select,.v3 input[type=text],.v3 input[type=search]{min-height:40px}
  .v3 .p-chip{min-height:36px}
  .mark,.v3 .mark{min-width:40px;min-height:40px}
  .pclose,.v3 .pclose{min-width:40px;min-height:40px}
  .v3 button.bmk,button.bmk{min-width:40px;min-height:40px;display:inline-grid;place-items:center}   /* the sign stays small, the area you tap is not */
  .v3 th .rz{display:none}
}
@media (max-width:600px){
  /* only the tick box and the name stay in place while the table scrolls: Actions moves with the rest, so something besides the name is always on screen */
  .v3 col[data-c=name]{width:168px!important}
  .v3 th.p-pin[data-c=act],.v3 td.p-pin[data-c=act]{position:static!important;left:auto!important}
  .v3 td .rn .il{max-width:112px}
  .v3 .p-top h1{font-size:24px}
  .v3 .p-top .p-in,.v3 .p-top select{flex:1 1 140px}
  .v3 td .loc{max-width:200px}
  .solo .sbox{padding-top:24px}
}