/* kmobile.css · one system for the phone, loaded after the shared styles on every app page.
   The desktop stays square and editorial. Below 1024px every surface follows the same three radii:
     14px  cards, grouped lists, primary buttons (16px on the manage page's settings cards)
     12px  inputs, secondary buttons, tiles, covers
     10px  small inline buttons and selects
   Sheets rise from the bottom with 16px top corners and a grab handle.
   A full screen opened from the tab bar or from More has a large title and no close button,
   the tab bar is the way back (the same grammar as More and Free tools). */

/* ======================================================================
   THE SYSTEM (phone) · one scale, three text colors, three surfaces, one accent
   type    large title 34/700 · title 22/700 · body 15-17/400 · footnote 13 · caption 12
   text    primary #fff · secondary rgba(235,235,245,.6) · tertiary rgba(235,235,245,.32)
   surface page #111114 · card #1C1C1F · raised #2A2A2E
   accent  lime marks the one action on a screen and nothing else; marks, counts and
           indicators are white
   ====================================================================== */

@media (max-width:1023px){
  /* ---- Request: the same card and the same primary button as Send ---- */
  html body:not(#_) .rcard .tfield{border-radius:14px; overflow:hidden;}
  html body:not(#_) #reqMake{height:56px !important; border-radius:14px !important; border:0 !important; box-shadow:none !important; background:#DFFF3F !important; color:#17171A !important; font-size:16.5px !important; font-weight:650 !important; letter-spacing:-.2px;}
  html body:not(#_) #reqMake:active{transform:scale(.985); background:#D2F22B !important;}
  html body:not(#_) #reqMake:disabled{background:rgba(255,255,255,.08) !important; color:rgba(255,255,255,.38) !important;}

  /* ---- Transfers: one count per filter, the amber "ending soon" mark already sits on each row ---- */
  html body .klist:not(#_):not(#__) .ksent-tab em{display:none;}

  /* ---- Settings (brand): the same corners as every other card ---- */
  html body:not(#_) #kyou .kyou-prev{border-radius:14px; overflow:hidden;}
  html body:not(#_) #kyou .kyou-prevb{border-radius:10px;}
  html body:not(#_) #kyou .kyou-logo{border-radius:14px;}
  html body:not(#_) #kyou #kyouName, html body:not(#_) #kyou input.tin, html body:not(#_) #kyou textarea{border-radius:12px !important;}
  html body:not(#_) #kyou .expb{border-radius:10px !important;}

  /* ---- More: cards share the 14px corner ---- */
  html body:not(#_) .navmenu-h, html body:not(#_) .navmenu-l{border-radius:14px !important;}

  /* ---- Albums ---- */
  html body :is(#kalb,#kalbs):not(#_) .ka-btn{border-radius:12px;}
  html body :is(#kalb,#kalbs):not(#_) .ka-cta .ka-btn, html body :is(#kalb,#kalbs):not(#_) .ka-acts0 .ka-btn.lime{border-radius:14px;}
  html body :is(#kalb,#kalbs):not(#_) .ka-cov{border-radius:12px;}
  html body :is(#kalb,#kalbs):not(#_) .ka-sel{border-radius:10px;}
  html body :is(#kalb,#kalbs):not(#_) .ka-url{border-radius:12px; overflow:hidden;}
  html body :is(#kalb,#kalbs):not(#_) .ka-url button{border-radius:9px;}
  html body :is(#kalb,#kalbs):not(#_) .ka-shq{border-radius:14px;}
  html body :is(#kalb,#kalbs):not(#_) input:not([type=checkbox]):not([type=radio]):not([type=file]){border-radius:12px;}
  html body :is(#kalb,#kalbs):not(#_) .ka-mock{border-radius:14px; overflow:hidden;}

  /* ---- Manage: Your files reads like the cards around it (the manage cards use 16px) ---- */
  /* the top bar names the product, as on every other screen */
  html body.manpage:not(#_) .navcrumb{display:none !important;}
  html body.manpage:not(#_) .topnav .navtag{display:inline-flex !important;}
  html body.manpage:not(#_) .topnav .navtag .navtag-bar{display:block !important;}
  html body.manpage.titleup:not(#_) .topnav .navtag{opacity:0; transition:opacity .18s ease;}
  html body.manpage:not(#_) #dlOwnAddB{border-radius:10px !important;}
  html body.manpage:not(#_) #glWrap{border:0 !important; border-radius:16px !important; overflow:hidden; background:#1C1C1F !important; box-shadow:none !important;}
  html:not(#_){-webkit-tap-highlight-color:transparent;}
  html body:not(#_) :is(button,a,[role=button],[role=switch],label){-webkit-tap-highlight-color:transparent; touch-action:manipulation;}
  html body:not(#_) :is(button,[role=button],[role=switch]){-webkit-user-select:none; user-select:none; -webkit-touch-callout:none;}
  html body:not(#_) #krail{-webkit-user-select:none; user-select:none;}

  /* iOS zooms into any field under 16px · every field the phone types into is 16px */
  html body:not(#_) :is(#ksent,#kyou,#kalb,#kalbs,.dlos,.dlownlink,.dlownadd,#tman) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=hidden]),select,textarea),
  html body.manpage:not(#_) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=hidden]),select,textarea){font-size:16px !important;}
  html body:not(#_) #ksentEmail, html body:not(#_) #ksentGo{height:44px !important;}
  html body:not(#_) #kyouName{height:44px !important;}
  html body :is(#kalb,#kalbs):not(#_) .ka-sel{height:36px;}

  /* small text actions keep their look, their hit area grows to 44px */
  html body:not(#_) :is(#reqToC,.tknown button,.ka-back,#dlTitleEdit,.ksent-h span a){position:relative;}
  html body:not(#_) :is(#reqToC,.tknown button,.ka-back,.ksent-h span a)::after{content:""; position:absolute; left:-10px; right:-10px; top:50%; height:44px; transform:translateY(-50%);}
  html body:not(#_) #reqOnce{min-height:44px;}
  html body .klist:not(#_):not(#__) .ksent-tab{height:36px; padding:0 14px;}
  html body:not(#_) #dlTitleEdit{width:40px !important; height:40px !important;}
  html body :is(#kalb,#kalbs):not(#_) .ka-ph1 .ka-btn{height:44px;}

  /* pressed rows: the row darkens a shade under the finger, the same everywhere */
  html body:not(#_) :is(.navmenu-l button,.navmenu-l a,.ka-shi,.ktl,.dlownlink #dlAsClient):active{background-color:rgba(255,255,255,.07) !important;}
  html body :is(#kalb,#kalbs):not(#_) .ka-card:active{opacity:.72; transition:opacity .06s;}
  html body :is(#kalb,#kalbs):not(#_) .ka-btn:active{transform:scale(.985); transition:transform .06s;}

  /* Albums: no empty band between the header and the first section */
  html body :is(#kalb,#kalbs):not(#_) .ka-ph1 + .ka-sec{margin-top:6px; padding-top:0; border-top:0;}
}

@media (max-width:1023px){
  /* full screens: large title, no close button */
  html body:not(#_) :is(#ksent,#kyou) .ksent-x{display:none !important;}
  html body .klist:not(#_):not(#__) :is(#ksent,#kyou) .ksent-h, html body:not(#_) #kyou .ksent-h{padding:14px 20px 10px !important; border:0 !important;}
  html body:not(#_) #ktools .ksent-h{padding:14px 20px 6px !important;}
  html.mtoggle body:not(#_) #navMenu{padding-top:8px !important;}
  html body .klist:not(#_):not(#__) .ksent-h b, html body:not(#_) #kyou .ksent-h b{font-size:34px !important; font-weight:700 !important; letter-spacing:-.8px !important; line-height:1.1;}
  html body:not(#_) #kyou .ksent-h span{font-size:14px !important; margin-top:6px;}

  /* sheets rise from the bottom with rounded tops and a handle */
  html body :is(#kalb,#kalbs):not(#_) .ka-sheet{border-radius:16px 16px 0 0; position:relative; padding-top:30px;}
  html body :is(#kalb,#kalbs):not(#_) .ka-sheet::before{content:""; position:absolute; top:8px; left:50%; width:36px; height:5px; border-radius:3px; background:rgba(255,255,255,.22); transform:translateX(-50%);}
  html body :is(#kalb,#kalbs):not(#_) .ka-sheet .ka-foot .ka-btn{height:48px;}

  /* the recipient page: the same button and card corners as the app */
  html body:not(.manpage):not(#_) #dlBtn{border-radius:14px !important;}
  html body:not(.manpage):not(#_) #glWrap{border-radius:14px !important; overflow:hidden;}
  html body:not(#_) #dlPreview{border-radius:14px !important;}
  html body:not(#_) #dlPreviewX{border-radius:9px !important;}
  html body:not(#_) .topnav .navsend{border-radius:10px !important; background:#F4F4F1 !important;}
  html.mtoggle:not(.request):not(.collect) body:not(#_) .topnav{display:none !important;}
  /* the top bar (#ktop, krail.js) is 44px plus the notch · every full screen starts under it */
  html.mtoggle:not(.request):not(.collect){--ktop:calc(44px + env(safe-area-inset-top));}
  html.mtoggle:not(.request):not(.collect) body:not(#_) :is(#ksent,#kyou,#ktools,#navMenu,#kalb){top:var(--ktop) !important;}
  html.mtoggle:not(.request):not(.collect) body:not(#_) #kalb .ka-in{padding-top:14px;}
  html.mtoggle:not(.request):not(.collect) body:not(#_){
    --k-t2:rgba(235,235,245,.6); --k-t3:rgba(235,235,245,.32);
    --k-bg:#111114; --k-card:#1C1C1F; --k-raise:#2A2A2E;
  }
  html body.manpage:not(#_){--k-t2:rgba(235,235,245,.6); --k-t3:rgba(235,235,245,.32); --k-bg:#111114; --k-card:#1C1C1F; --k-raise:#2A2A2E;}

  /* large titles, one size and one weight on every screen */
  html.mtoggle:not(.request):not(.collect) body:not(#_) :is(#heroH1,#reqH,#kalb .ka-ph1 h1,#kaTitle),
  html body.manpage:not(#_) #dlH1{font-size:34px !important; font-weight:700 !important; letter-spacing:-.8px !important; line-height:1.1 !important;}
  html body:not(#_) #kalb .ka-t input{font-size:34px !important; font-weight:700 !important; letter-spacing:-.8px !important;}
  html.mtoggle body:not(#_) #sumLine{font-size:22px !important; font-weight:700 !important; letter-spacing:-.4px !important;}

  /* secondary text */
  html.mtoggle:not(.request):not(.collect) body:not(#_) :is(#heroSub,#heroSub *,.rsub,#reqTo,#reqToE,.tas,.tas span,#clearAll,.tctl-t > span,#kalb .ka-ph1 p,#kaState,#kalb .ka-back,.ka-sub,.ka-tabs button:not(.on)),
  html body.manpage:not(#_) :is(.dlos-h,.kst span,#dlOwnSub span){color:var(--k-t2) !important;}
  html body :is(#kalb,#kalbs):not(#_) .ka-sec{color:var(--k-t2,rgba(235,235,245,.6)); font-weight:400;}
  /* tertiary text */
  html.mtoggle:not(.request):not(.collect) body:not(#_) :is(.tterms,.tfoot,.tfoot a,.tdrops span,.cnt.opt,#kalb .ka-none){color:var(--k-t3) !important;}

  /* buttons: one weight */
  html.mtoggle body:not(#_) :is(#drop .mcta,#sendBtn,#sendBtn *,#reqMake){font-weight:600 !important;}

  /* surfaces */
  html.mtoggle:not(.request):not(.collect) body:not(#_) :is(#ksent,#kyou,#navMenu,#kalb){background-color:var(--k-bg) !important;}
  html body :is(#kalb,#kalbs):not(#_) :is(.ka-cov,.ka-sheet){background-color:#1C1C1F;}
  html body :is(#kalb,#kalbs):not(#_) .ka-btn:not(.lime):not(.ghost){background-color:#2A2A2E;}

  /* the accent: marks and counts turn white */
  html body .krail:not(#_) .krail-n{background:#fff !important; color:#111114 !important;}
  html body .krail:not(#_) .ka-rdot, html body .krail:not(#_) .krail-i.on .ka-rdot{background:#fff !important; box-shadow:0 0 0 2px #141414 !important;}
  html body .krail-i:not(#_)::before{background:#fff !important;}
  html body:not(#_) .navmenu-row i b{background:#fff !important;}
  html body .navmenu-l:not(#_)>button[data-go="brand"]>svg:first-child{background:transparent !important; color:inherit !important;}
  html body .navmenu-l:not(#_)>button[data-go="brand"]>svg circle{fill:currentColor !important;}
  html body :is(#kalb,#kalbs):not(#_) .ka-card .ka-m em{color:#fff; font-weight:500;}
  html body :is(#kalb,#kalbs):not(#_) .ka-fresh, html body :is(#kalb,#kalbs):not(#_) .ka-dot.on{background:#fff;}
  html body :is(#kalb,#kalbs):not(#_) .ka-cnt{background:#fff; color:#111114;}
  html body .klist:not(#_):not(#__) :is(.ksent-ico.gal,.ksent-ico.col){background:rgba(255,255,255,.08) !important; color:#fff !important;}
  html body .klist:not(#_):not(#__) .ksent-c.cur .ksent-right span{color:#fff !important;}
  html body.manpage:not(#_) .topnav .navtag{display:none !important;}
  /* the mark sits in the middle until the page title scrolls up into its place */
  html body.manpage:not(#_) .topnav > a[aria-label="Kepla home"]{display:flex !important; position:absolute !important; left:50% !important; bottom:0; height:44px; align-items:center; padding:0 12px; transform:translateX(-50%); transition:opacity .18s ease;}
  html body.manpage:not(#_) .topnav{height:calc(44px + env(safe-area-inset-top)) !important;}
  html body.manpage:not(#_) .topnav > a[aria-label="Kepla home"] img{height:20px !important; width:auto !important;}
  html body.manpage.titleup:not(#_) .topnav > a[aria-label="Kepla home"]{opacity:0; pointer-events:none;}
  html body.manpage:not(#_) .topnav #navAll{display:inline-flex !important; align-items:center; gap:2px; height:44px; margin-left:-6px; padding:0 8px 0 2px; color:#fff !important; font-size:16px; font-weight:400; text-decoration:none; background:none !important; border:0 !important; box-shadow:none !important;}
  html body.manpage:not(#_) .topnav #navAll::before{content:""; width:22px; height:22px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;}
  html body.manpage:not(#_) .topnav #navAll .navall-l{display:none !important;}
  html body.manpage:not(#_) .topnav #navAll .navall-s{display:inline !important;}
  html body.manpage:not(#_) .topnav #navAll:active{opacity:.6;}

  /* the account mark is a person, not an accent */
  html body .navmenu-av:not(#_):not(.anon){background:#2A2A2E !important; color:#fff !important; box-shadow:none !important;}

  /* one line under the Send title says the limit · the line under the button repeated it */
  html.mtoggle:not(.request):not(.collect) body:not(#_) #drop .tdrops{display:none !important;}
  /* the sign-in card is one line and a field · the button says the rest */
  html.mtoggle body:not(#_) #ksentInS{display:none !important;}
  html body.manpage:not(#_) .topnav .navtitle{position:absolute !important; left:50% !important; top:auto !important; bottom:0 !important; height:44px !important; display:flex; align-items:center; transform:translateX(-50%); max-width:55vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0 !important;}
  html.mtoggle:not(.request):not(.collect) body:not(#_) .therowrap{padding-top:calc(var(--ktop) + 8px) !important;}
  html.mtoggle:not(.request):not(.collect) body:not(.hasfiles):not(#_) #drop:not(.mini){min-height:calc(100svh - var(--ktop) - var(--ktab, 56px) - 182px) !important;}
  /* the tab bar draws the only line at the bottom; the hero's own hairline sat 20px above it */
  html.mtoggle:not(.request):not(.collect) body:not(#_) .thero{border-bottom:0 !important;}
  /* an empty list is a quiet line, not another card */
  html body .klist:not(#_):not(#__) .ksent-e{background:none !important; box-shadow:none !important; border:0 !important; padding:28px 0 !important; color:var(--k-t2,rgba(235,235,245,.6)) !important;}
  /* a row's own buttons are secondary · the screen keeps one lime action */
  html body .klist:not(#_):not(#__) .ksent-c .ksent-b.lime{background:#fff !important; color:#111114 !important;}
  html body :is(#kalb,#kalbs):not(#_) .ka-mlive i{background:#fff;}
}

@media (max-width:1023px){
  /* back is navigation, not the action · white like every other back */
  html body:not(#_) .ktool-back{color:#fff !important;}
}

/* ---- tab screens switch in place, the way a native tab bar does ----
   Two entrance animations were stacked on the Transfers screen (a slide-up on every visible panel and a
   sideways slide while it carried .in); when .in came off, the first one started over and the screen
   blinked out and faded in a second time. A tab is a place, not an event: on a phone it is simply there.
   Sheets, the photo viewer and the desktop drawers keep their motion. */
@media (max-width:1023px){
  html.mtoggle body:not(#_) :is(.ksent,.kyou,#ktools,.ksent.in,.kyou.in,.tcard,.tcard.in,.rcard,#kalb),
  html.mtoggle body:not(#_) #navMenu, html.mtoggle body:not(#_) #navMenu .navmenu-l > *,
  html.mtoggle body:not(#_) .navmenu:not([hidden]) .navmenu-l > *{animation:none !important;}
}
html.ms-seen body:not(#_) #drop:not(.mini) .ms{animation:none !important;}
@media (max-width:1023px){
  /* the tab bar answers with the tab lighting, not a bounce */
  html body .krail-i:not(#_).on .krail-ico svg{animation:none !important;}
}

/* ======================================================================
   A PHONE HELD SIDEWAYS · the same app, fitted to a short screen
   Every phone rule above also matches a phone in landscape (a screen under 500px tall, touch only).
   Here the chrome gets out of the way: a 40px top bar, a 44px tab bar with the icon beside its
   label (as iOS does sideways), 28px titles, and the notch side kept clear.
   ====================================================================== */
@media (orientation:landscape) and (max-height:500px) and (max-width:1023px) and (hover:none) and (pointer:coarse){
  :root:not(#_){--krail-tab:calc(44px + env(safe-area-inset-bottom)); --ktab:calc(44px + env(safe-area-inset-bottom));}
  html.mtoggle:not(.request):not(.collect){--ktop:calc(40px + env(safe-area-inset-top));}

  /* the tab bar: one row, icon beside label */
  html body .krail:not(#_){padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;}
  html body .krail-g:not(#_){height:44px !important;}
  html body .krail-i:not(#_){height:44px !important; min-height:0 !important; padding:0 !important; flex-direction:row !important; justify-content:center !important; align-items:center !important; gap:7px !important; font-size:12px !important;}
  html body .krail-ico:not(#_){width:24px !important; height:22px !important;}
  html body .krail-n:not(#_){top:-8px !important; right:-7px !important; min-width:15px !important; height:15px !important; font-size:9.5px !important; padding:0 4px !important;}
  html body .krail-i:not(#_)[data-k="sent"]{gap:10px !important;}
  html body .krail:not(#_) .ka-rdot{top:-2px !important; right:-3px !important;}
  html body .krail-i:not(#_)::before{width:56px !important;}

  /* the top bar: shorter, clear of the notch */
  html.mtoggle body .ktop:not(#_){padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);}
  html.mtoggle body .ktop:not(#_) .ktop-mark{height:40px;}
  html.mtoggle body .ktop:not(#_) .ktop-mark img{height:18px;}
  html.mtoggle body .ktop:not(#_) .ktop-me{height:40px; right:calc(8px + env(safe-area-inset-right));}

  /* every screen stays clear of the notch */
  html.mtoggle:not(.request):not(.collect) body:not(#_) :is(#ksent,#kyou,#ktools,#navMenu,#kalb){left:env(safe-area-inset-left) !important; right:env(safe-area-inset-right) !important;}
  html.mtoggle:not(.request):not(.collect) body:not(#_) .therowrap{padding-left:calc(16px + env(safe-area-inset-left)) !important; padding-right:calc(16px + env(safe-area-inset-right)) !important;}
  html body.manpage:not(#_) .topnav{padding-left:calc(16px + env(safe-area-inset-left)) !important; padding-right:calc(16px + env(safe-area-inset-right)) !important;}

  /* titles a size down · a short screen needs its height for the content */
  html.mtoggle:not(.request):not(.collect) body:not(#_) :is(#heroH1,#reqH,#kalb .ka-ph1 h1,#kaTitle),
  html body.manpage:not(#_) #dlH1,
  html body .klist:not(#_):not(#__) .ksent-h b, html body:not(#_) #kyou .ksent-h b, html body:not(#_) #ktools .ksent-h b{font-size:28px !important; letter-spacing:-.6px !important;}
  html body .navmenu:not(#_)::before{font-size:28px !important; padding:6px 4px 10px !important;}
  html.mtoggle body:not(#_) #sumLine{font-size:20px !important;}
  html body .klist:not(#_):not(#__) :is(#ksent,#kyou) .ksent-h, html body:not(#_) #kyou .ksent-h{padding:10px 20px 8px !important;}

  /* Send, nothing picked yet: the words and the button on the left, the photographs on the right */
  html.mtoggle:not(.request):not(.collect) body:not(.hasfiles):not(#_) #drop:not(.mini){min-height:0 !important;}
  html.mtoggle:not(.request):not(.collect) body:not(.hasfiles):not(#_) .thleft,
  html.mtoggle:not(.request):not(.collect) body:not(.hasfiles):not(#_) #drop:not(.mini) .mcta{max-width:52%;}
  html.mtoggle:not(.request):not(.collect) body:not(.hasfiles):not(#_) #drop:not(.mini) .mstack{position:fixed !important; top:calc(var(--ktop) + 8px) !important; bottom:calc(var(--ktab) + 84px) !important; height:auto !important; right:calc(12px + env(safe-area-inset-right)); width:44%; min-height:0 !important; flex:none; pointer-events:none;}
  html.mtoggle:not(.request):not(.collect) body:not(.hasfiles):not(#_) #drop:not(.mini) .ms{max-width:132px; width:34%;}

  /* the Send button scrolls with the form · docked, it covered the form on a screen this short */
  html.mtoggle body:not(#_) #formBox .tactions{position:static !important; background:none !important; margin:14px 0 0 !important; padding:0 0 16px !important;}
  /* the hero no longer fills the screen sideways: it lets the photographs show whole, and the page under it is the same black */
  html.mtoggle:not(.request):not(.collect) body:not(.hasfiles):not(#_) .thero{overflow:visible !important;}
  html.mtoggle:not(.request):not(.collect) body:not(#_), html.mtoggle:not(.request):not(.collect) body:not(#_) div:has(> .thero){background-color:#111114 !important;}
}

/* ---- the sweep across devices (320 to 932 wide, both ways round) ---- */
@media (max-width:1023px){
  /* the tab bar is a solid surface · translucent, it let the lime button of the screen underneath glow through */
  html body .krail:not(#_){background:rgba(17,17,20,.96) !important;}
  /* Settings scrolls as one page; its note sits at the end instead of pinned over the colour swatches */
  html.mtoggle body:not(#_) #kyou{overflow-y:auto !important; -webkit-overflow-scrolling:touch;}
  html.mtoggle body:not(#_) #kyou .ksent-l{flex:none !important; overflow:visible !important;}
  html.mtoggle body:not(#_) #kyou .ksent-f{border-top:0 !important; padding:4px 20px 28px !important; color:var(--k-t3,rgba(235,235,245,.32)) !important;}
  /* the recipient preview is a strip at the top of the page, in the flow · pinned to the bottom it sat on Download all */
  html body:not(#_) #dlPreview{position:relative !important; left:auto !important; right:auto !important; bottom:auto !important; transform:none !important; margin:calc(env(safe-area-inset-top) + 8px) 12px 0 !important; z-index:1 !important;}
  /* small links on the recipient page get a finger-sized target */
  html body:not(#_) #dlPreviewX{min-height:36px; display:inline-flex !important; align-items:center; padding:0 14px !important;}
  html body:not(#_) .topnav > a[aria-label="Kepla home"]{min-height:44px; display:flex !important; align-items:center;}
}
/* short phones: the Send button follows the form instead of docking over it */
@media (max-width:767px) and (max-height:700px){
  html.mtoggle body:not(#_) #formBox .tactions{position:static !important; background:none !important; margin:14px 0 0 !important; padding:0 0 16px !important;}
}
/* the narrowest phones: stat figures step down so "5 days" fits its tile */
@media (max-width:359px){
  html body.manpage:not(#_) .kst b{font-size:20px !important; letter-spacing:-.4px !important;}
}
/* sideways: the album's actions keep their size instead of stretching across the screen */
@media (orientation:landscape) and (max-height:500px) and (max-width:1023px) and (hover:none) and (pointer:coarse){
  html body :is(#kalb,#kalbs):not(#_) .ka-acts0 .ka-btn:first-child{flex:0 0 auto !important; min-width:180px;}
}

/* ---- touch screens 600 to 1023 wide, upright (iPad mini, iPad, big Android tablets) ----
   The phone design, held in a centred column the width of a large phone, as iPad apps do. */
@media (min-width:600px) and (max-width:1023px) and (min-height:501px){
  html.mtoggle:not(.request):not(.collect) body:not(#_) .therowrap{padding-left:max(16px, calc((100vw - 640px) / 2)) !important; padding-right:max(16px, calc((100vw - 640px) / 2)) !important;}
  html.mtoggle:not(.request):not(.collect) body:not(#_) :is(#ksent,#kyou,#ktools){padding-left:max(0px, calc((100vw - 672px) / 2)) !important; padding-right:max(0px, calc((100vw - 672px) / 2)) !important; box-sizing:border-box;}
  html.mtoggle body:not(#_) #navMenu{padding-left:max(16px, calc((100vw - 640px) / 2)) !important; padding-right:max(16px, calc((100vw - 640px) / 2)) !important;}
  html body :is(#kalb):not(#_) .ka-in{max-width:672px !important; margin-left:auto !important; margin-right:auto !important;}
  html body.manpage:not(#_) .dlmain, html body.manpage:not(#_) .thero > *{max-width:640px; margin-left:auto !important; margin-right:auto !important;}
  /* the photographs on Send keep a phone's proportions instead of filling a tablet */
  html.mtoggle:not(.request):not(.collect) body:not(.hasfiles):not(#_) #drop:not(.mini) .mstack{max-height:420px;}
}

/* ---- the desktop layout on a touch screen (iPad held sideways, iPad Pro) ----
   Same design, controls sized for a finger. */
@media (min-width:1024px) and (hover:none) and (pointer:coarse){
  html body:not(#_) :is(.tin,input.tin,#toEmail,#title,#ksentQ,#kyouName,select){min-height:40px;}
  html body:not(#_) :is(.btn-w,.btn-o,.tctl,.expb,.dlownb,.ksent-b,.ka-btn,#clearAll){min-height:40px;}
  html body .klist:not(#_):not(#__) .ksent-tab{height:36px !important;}
  html body:not(#_) :is(#ksentX,#kyouX,#ktoolsX,#draftX,.ksent-x){width:40px !important; height:40px !important;}
  html body:not(#_) .kyou-sw button, html body:not(#_) #kyou [aria-label="Default"], html body:not(#_) #kyou :is([aria-label="Black"],[aria-label="Blue"],[aria-label="Green"],[aria-label="Rust"],[aria-label="Violet"]){width:38px !important; height:38px !important;}
  html body:not(#_) :is(#reqToC,.tknown button,.tas button,.ka-back,#reqOpen,#dlShareBtn,#reportLink,#dlOwnDel,.navtag,.topnav > a[aria-label="Kepla home"]){position:relative;}
  html body:not(#_) :is(#reqToC,.tknown button,.tas button,.ka-back,#reqOpen,#dlShareBtn,#reportLink,#dlOwnDel,.navtag,.topnav > a[aria-label="Kepla home"])::after{content:""; position:absolute; left:-8px; right:-8px; top:50%; height:44px; transform:translateY(-50%);}
  html body:not(#_) #reqOnce{min-height:44px;}
  html:not(#_){-webkit-tap-highlight-color:transparent;}
}

/* ---- desktop: no text under 11px · the small capitals stay small, never squinting-small ---- */
html body #navMeP:not(#_), html body .navmenu-k:not(#_), html body .navtag-t:not(#_), html body .navtag .dtx-d:not(#_), html body .navtag .dtx-m:not(#_){font-size:11px !important;}
html body .navmenu-l:not(#_) em, html body .klist:not(#_):not(#__) .ksent-tab em{font-size:11px !important;}
html body .fl:not(#_){font-size:max(11px, 1em);}
@media (hover:none) and (pointer:coarse){
  html body:not(#_) :is(.navtag,#filesFold,.dlfoot a,#dlPreviewX,a[href*="privacy"],a[href*="terms"]){position:relative;}
  html body:not(#_) :is(.navtag,.dlfoot a,a[href*="privacy"],a[href*="terms"])::after{content:""; position:absolute; left:-6px; right:-6px; top:50%; height:44px; transform:translateY(-50%);}
  html body:not(#_) #filesFold{min-width:40px; min-height:40px;}
  html body:not(#_) #dlPreviewX{min-height:36px !important; display:inline-flex !important; align-items:center;}
}