/* ClokIt USA · mobile app-shell refinement · 2026-10-22
   Shared chrome and five authenticated destinations only.
   Purely presentational: does not modify routing, sessions, credits, map, forms or PDFs. */
@media screen and (max-width:760px){
  /* Compact identity. One brand at the top, never a website-sized masthead. */
  html:not([data-public-report="true"]) body:not(.public-view) > .topbar{
    height:56px!important;min-height:56px!important;max-height:56px!important;
    padding:0!important;margin:0!important;overflow:visible!important;
    background:#0e293f!important;border-bottom:1px solid rgba(255,255,255,.1)!important;
    box-shadow:0 1px 7px rgba(10,28,44,.07)!important;
  }
  html:not([data-public-report="true"]) body:not(.public-view) > .topbar > .topbar-inner{
    display:flex!important;position:relative!important;align-items:center!important;
    width:100%!important;max-width:100%!important;
    height:56px!important;min-height:56px!important;max-height:56px!important;
    margin:0!important;padding:0 max(12px,env(safe-area-inset-left,0px))!important;
    overflow:visible!important;
  }
  html:not([data-public-report="true"]) body:not(.public-view) .clokit-app-brand-lockup{
    position:absolute!important;top:50%!important;left:50%!important;right:auto!important;
    transform:translate(-50%,-50%)!important;display:inline-flex!important;
    align-items:center!important;gap:8px!important;min-width:0!important;
    max-width:calc(100vw - 90px)!important;height:43px!important;
    white-space:nowrap!important;text-decoration:none!important;
  }
  html:not([data-public-report="true"]) body:not(.public-view) .clokit-master-brand-mark{
    width:35px!important;height:35px!important;flex:0 0 35px!important;overflow:visible!important;
  }
  html:not([data-public-report="true"]) body:not(.public-view) .clokit-master-brand-mark img{
    width:35px!important;height:35px!important;object-fit:contain!important;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,.18))!important;
  }
  html:not([data-public-report="true"]) body:not(.public-view) .clokit-master-brand-copy b{
    font-size:17px!important;letter-spacing:-.035em!important;line-height:1.03!important;
  }
  html:not([data-public-report="true"]) body:not(.public-view) .clokit-master-brand-copy small{
    margin-top:3px!important;font-size:8px!important;letter-spacing:.085em!important;
  }

  /* The actual five-button rescue dock, not the dormant dashboard nav. */
  html:not([data-public-report="true"]) body:not(.public-view) #clokitMobileNavRescue{
    left:8px!important;right:8px!important;bottom:calc(6px + env(safe-area-inset-bottom,0px))!important;
    width:auto!important;max-width:none!important;min-height:0!important;height:auto!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:3px!important;margin:0!important;padding:5px!important;
    background:rgba(8,38,59,.97)!important;
    border:1px solid rgba(228,244,254,.15)!important;
    border-radius:17px!important;box-shadow:0 8px 26px rgba(6,34,54,.2)!important;
    backdrop-filter:blur(15px)!important;-webkit-backdrop-filter:blur(15px)!important;
  }
  html:not([data-public-report="true"]) body:not(.public-view) #clokitMobileNavRescue:after{
    display:none!important;content:none!important;height:0!important;
  }
  html:not([data-public-report="true"]) body:not(.public-view) #clokitMobileNavRescue button{
    min-width:0!important;min-height:48px!important;max-height:51px!important;
    padding:5px 2px!important;gap:3px!important;border-radius:12px!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  html:not([data-public-report="true"]) body:not(.public-view) #clokitMobileNavRescue button b{
    width:29px!important;height:24px!important;font-size:15px!important;border-radius:8px!important;
  }
  html:not([data-public-report="true"]) body:not(.public-view) #clokitMobileNavRescue button span{
    font-size:10px!important;line-height:1.1!important;letter-spacing:.005em!important;
  }
  html:not([data-public-report="true"]) body:not(.public-view) #clokitMobileNavRescue button.active{
    background:#205e82!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important;
  }
  html:not([data-public-report="true"]) body:not(.public-view) #app.page{
    padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))!important;
  }
  /* Full-screen tasks own the entire interaction surface. */
  html.clokit-pi-open #clokitMobileNavRescue,
  body.clokit-pi-open #clokitMobileNavRescue,
  body.clokit-data-center-open #clokitMobileNavRescue,
  body:has(.clokit-team-chat-mode) #clokitMobileNavRescue{
    display:none!important;visibility:hidden!important;pointer-events:none!important;
  }

  /* Projects + Published: compact app headings, live controls immediately below. */
  html.clokit-mobile-library-active .clokit-library-hero,
  html.clokit-mobile-published-active .clokit-published-hero{
    padding-top:14px!important;padding-bottom:15px!important;
    margin-top:0!important;margin-bottom:11px!important;
    border-radius:0 0 16px 16px!important;box-shadow:0 7px 18px rgba(8,29,45,.095)!important;
  }
  .clokit-library-kicker,.clokit-published-hero>small{
    font-size:9px!important;line-height:1.3!important;letter-spacing:.12em!important;
  }
  .clokit-library-hero h1,.clokit-published-hero h1{
    font-size:23px!important;line-height:1.12!important;letter-spacing:-.033em!important;
    margin:5px 0 0!important;
  }
  .clokit-library-hero>p,.clokit-published-hero>p{display:none!important}
  .clokit-library-search,.clokit-published-search{margin-top:11px!important}
  .clokit-library-search input,.clokit-published-search input{
    min-height:42px!important;font-size:16px!important;border-radius:11px!important;
  }
  .clokit-library-summary,.clokit-published-summary{margin-top:9px!important;margin-bottom:13px!important}
  .clokit-library-summary small,.clokit-published-summary small{
    font-size:9px!important;line-height:1.25!important;letter-spacing:.08em!important;
  }
  .clokit-library-summary b,.clokit-published-summary b{
    font-size:21px!important;line-height:1.15!important;margin-top:5px!important;
  }
  .clokit-library-summary span,.clokit-published-summary span{
    font-size:10px!important;line-height:1.3!important;margin-top:4px!important;
  }
  .clokit-client-head h2,.clokit-published-folder-head h2{
    font-size:19px!important;line-height:1.2!important;
  }
  .clokit-client-folder h3,.clokit-published-folder h3{
    font-size:13px!important;line-height:1.22!important;
  }
  .clokit-client-folder p,.clokit-published-folder p{
    font-size:10px!important;line-height:1.35!important;
  }
  .clokit-client-folder footer,.clokit-published-folder footer{font-size:9px!important}
  .clokit-client-folder,.clokit-published-folder{min-width:0!important}
  html.clokit-mobile-library-active .v221-main,
  html.clokit-mobile-published-active .v221-main{
    padding-bottom:calc(85px + env(safe-area-inset-bottom,0px))!important;
  }

  /* Settings: user data stays prominent, promotional paragraphs do not. */
  .clokit-account-mobile{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))!important}
  .clokit-account-hero{
    padding-top:15px!important;padding-bottom:17px!important;
    margin-bottom:12px!important;border-radius:0 0 17px 17px!important;
    box-shadow:0 7px 19px rgba(8,29,45,.10)!important;
  }
  .clokit-account-kicker{font-size:9px!important;letter-spacing:.12em!important}
  .clokit-account-hero h1{
    font-size:22px!important;line-height:1.13!important;margin:4px 0 0!important;
  }
  .clokit-account-hero>p{display:none!important}
  .clokit-account-identity{margin-top:13px!important;grid-template-columns:46px minmax(0,1fr)!important;gap:10px!important}
  .clokit-account-avatar{width:46px!important;height:46px!important;border-radius:13px!important}
  .clokit-account-identity b{font-size:15px!important}
  .clokit-account-identity span{font-size:10px!important;line-height:1.3!important}
  .clokit-account-stats{margin-top:11px!important}
  .clokit-account-stat{padding:9px 11px!important}
  .clokit-account-stat small{font-size:9px!important;letter-spacing:.075em!important}
  .clokit-account-stat b{font-size:18px!important}
  .clokit-account-control b{font-size:13px!important;line-height:1.3!important}
  .clokit-account-control span{font-size:10px!important;line-height:1.3!important}
  .clokit-account-details summary b{font-size:13px!important}
  .clokit-account-details summary span{font-size:10px!important;line-height:1.35!important}
  .clokit-account-form label span{font-size:11px!important}
  .clokit-account-primary,.clokit-account-secondary,.clokit-account-danger{
    min-height:42px!important;font-size:12px!important;
  }

  /* Clok AI Capture: stop an empty feed consuming the entire viewport. */
  .capture-page{
    height:auto!important;min-height:calc(100dvh - 56px)!important;
    padding:0 0 calc(83px + env(safe-area-inset-bottom,0px))!important;
    overflow-x:hidden!important;overflow-y:visible!important;
    background:#f4f8fb!important;
  }
  .capture-console{
    display:block!important;height:auto!important;min-height:0!important;
    overflow:visible!important;border:0!important;border-radius:0!important;
  }
  .capture-header{padding:11px 12px!important;gap:9px!important}
  .capture-project h1{font-size:15px!important}
  .capture-header-actions button{
    min-height:40px!important;padding:7px 9px!important;font-size:11px!important;
  }
  .capture-body{display:flex!important;flex-direction:column!important;overflow:visible!important}
  .capture-main{
    display:block!important;min-height:0!important;overflow:visible!important;
    padding:10px 12px!important;
  }
  .capture-hero{
    grid-template-columns:37px minmax(0,1fr)!important;
    gap:8px!important;padding:12px!important;border-radius:16px!important;
  }
  .capture-camera-icon{width:37px!important;height:37px!important;border-radius:11px!important}
  .capture-hero h2{font-size:17px!important;line-height:1.2!important}
  .capture-hero-actions{gap:7px!important;min-width:0!important}
  .capture-hero-actions button{min-height:44px!important;font-size:12px!important;padding:8px!important}
  .capture-feed-head{padding:12px 2px 7px!important;align-items:center!important}
  .capture-feed-head button{min-height:39px!important;font-size:11px!important}
  .capture-feed{height:auto!important;min-height:0!important;max-height:270px!important;overflow-y:auto!important}
  .capture-feed:has(.capture-feed-empty){
    height:144px!important;min-height:144px!important;max-height:144px!important;
  }
  .capture-feed-empty{min-height:0!important;height:100%!important;padding:12px!important}
  .capture-side{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;align-items:start!important;overflow:visible!important;
    padding:9px 12px!important;
  }
  .capture-side-card{min-width:0!important;padding:12px!important;border-radius:14px!important}
  .capture-review button{font-size:11px!important;min-height:42px!important}
  @media (max-width:359px){
    .clokit-app-brand-lockup{max-width:calc(100vw - 48px)!important}
    #clokitMobileNavRescue button span{font-size:9px!important}
    .capture-side{grid-template-columns:minmax(0,1fr)!important}
  }
}
@media screen and (max-width:760px) and (max-height:480px){
  html:not([data-public-report="true"]) body:not(.public-view) #clokitMobileNavRescue{
    bottom:0!important;border-radius:13px 13px 0 0!important;
  }
  html:not([data-public-report="true"]) body:not(.public-view) #clokitMobileNavRescue button{
    min-height:42px!important;max-height:42px!important;
  }
}
@media print{
  #clokitMobileNavRescue{display:none!important}
}