/* ClokIt USA — compact mobile field-entry screen, October 2026.
   Only active authenticated ESIR cards; no global form, public report, or desktop effects. */
@media screen and (max-width:760px){
  html.clokit-mobile-card-active:not([data-public-report="true"]) body:not(.public-view) #app.page{
    padding-bottom:0!important;
  }
  html.clokit-mobile-card-active .app-shell .workspace{
    padding-bottom:0!important;min-height:0!important;
  }
  html.clokit-mobile-card-active .v22121-module-body{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    box-sizing:border-box!important;
    min-height:calc(100dvh - 136px - env(safe-area-inset-bottom,0px))!important;
    padding:5px 10px calc(81px + env(safe-area-inset-bottom,0px))!important;
    background:#f0f5f8!important;
    overflow-x:clip!important;
  }
  html.clokit-mobile-card-active .clokit-mobile-card-nav{
    min-height:0!important;padding:8px 12px!important;
    margin:0!important;gap:9px!important;box-shadow:none!important;
    border-bottom:1px solid #dce7ed!important;
    background:#f5f9fb!important;
  }
  html.clokit-mobile-card-active .clokit-mobile-card-nav>button{
    min-height:44px!important;padding:7px 11px!important;
    border-radius:11px!important;font-size:12px!important;
    font-weight:800!important;box-shadow:none!important;
  }
  html.clokit-mobile-card-active .clokit-card-context small{
    font-size:10px!important;line-height:1.2!important;letter-spacing:.1em!important;
  }
  html.clokit-mobile-card-active .clokit-card-context b{
    font-size:13px!important;line-height:1.3!important;color:#5d788a!important;
  }
  html.clokit-mobile-card-active .v22121-module-body>.form-panel{
    margin:2px 0 9px!important;padding:0!important;
    flex:0 0 auto!important;min-width:0!important;width:100%!important;
    border:1px solid #d9e5ec!important;border-radius:16px!important;
    box-shadow:0 2px 9px rgba(11,45,65,.035)!important;
    background:#fff!important;overflow:hidden!important;
  }
  html.clokit-mobile-card-active .form-panel>.panel-head{
    display:flex!important;flex-direction:column!important;align-items:flex-start!important;
    gap:6px!important;padding:14px 15px 12px!important;
    border-bottom:1px solid #e4edf2!important;background:#fff!important;
  }
  html.clokit-mobile-card-active .form-panel>.panel-head h2{
    font-size:clamp(21px,5.6vw,26px)!important;line-height:1.16!important;
    letter-spacing:-.028em!important;margin:0!important;
    color:#112c40!important;
  }
  html.clokit-mobile-card-active .form-panel>.panel-head .muted{
    font-size:12px!important;line-height:1.35!important;color:#6b8191!important;
  }
  /* The old informational pill has no action; don't leave a blank grey band. */
  html.clokit-mobile-card-active .form-panel>.panel-head [hidden],
  html.clokit-mobile-card-active .form-panel>.panel-head .clokit-card-head-actions-empty{
    display:none!important;
  }
  html.clokit-mobile-card-active .form-panel>.panel-head>div:last-child:not(:first-child):not(.clokit-card-head-actions-empty){
    max-width:100%!important;
  }
  html.clokit-mobile-card-active .form-panel>.panel-body{
    padding:13px!important;overflow:visible!important;
    background:#fff!important;
  }
  html.clokit-mobile-card-active .form-panel .field-grid{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    gap:13px!important;width:100%!important;
  }
  html.clokit-mobile-card-active .form-panel .field,
  html.clokit-mobile-card-active .form-panel .field.full{
    min-width:0!important;grid-column:1/-1!important;gap:5px!important;
  }
  html.clokit-mobile-card-active .form-panel .field label{
    color:#284457!important;font-size:12px!important;
    font-weight:800!important;line-height:1.35!important;
  }
  html.clokit-mobile-card-active .form-panel .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  html.clokit-mobile-card-active .form-panel .field select,
  html.clokit-mobile-card-active .form-panel .field textarea{
    box-sizing:border-box!important;min-width:0!important;width:100%!important;
    max-width:100%!important;min-height:47px!important;
    border:1px solid #cfdee8!important;border-radius:12px!important;
    background:#fff!important;color:#102e42!important;
    padding:10px 12px!important;font-size:16px!important;line-height:1.4!important;
    box-shadow:none!important;-webkit-text-size-adjust:100%!important;
    scroll-margin-top:115px!important;scroll-margin-bottom:128px!important;
  }
  html.clokit-mobile-card-active .form-panel .field textarea{
    min-height:84px!important;resize:vertical!important;
  }
  html.clokit-mobile-card-active .form-panel .field :is(input,select,textarea):focus-visible{
    border-color:#1286bb!important;
    outline:2px solid rgba(18,134,187,.20)!important;outline-offset:1px!important;
  }
  /* Important address/JHA help remains visible and useful, just less billboard-like. */
  html.clokit-mobile-card-active .form-panel .intel-card,
  html.clokit-mobile-card-active .form-panel .ai-project-intel{
    border-radius:13px!important;padding:12px!important;
    margin:0 0 13px!important;font-size:12px!important;
    line-height:1.45!important;box-shadow:none!important;
  }
  html.clokit-mobile-card-active .form-panel .intel-note{
    font-size:12px!important;line-height:1.4!important;margin-top:5px!important;
  }
  html.clokit-mobile-card-active .form-panel .intel-actions{
    display:flex!important;flex-wrap:wrap!important;gap:7px!important;
    margin-top:10px!important;
  }
  html.clokit-mobile-card-active .form-panel .intel-actions button{
    min-height:44px!important;max-width:100%!important;
    padding:8px 13px!important;border-radius:11px!important;
    font-size:13px!important;
  }
  /* Repeat cards: smaller controls, clear titles, no cramped desktop buttons. */
  html.clokit-mobile-card-active .form-panel .repeat-wrap{
    padding:12px!important;
  }
  html.clokit-mobile-card-active .form-panel .repeat-card{
    margin:0 0 9px!important;border-radius:14px!important;
    border:1px solid #d8e5ec!important;box-shadow:none!important;
    overflow:hidden!important;padding:0!important;
    background:#fbfdff!important;
  }
  html.clokit-mobile-card-active .form-panel .repeat-card-head{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;gap:8px!important;
    padding:11px 12px!important;margin:0!important;
    border-bottom:1px solid #dfebf0!important;
    background:#f6fafc!important;
  }
  html.clokit-mobile-card-active .form-panel .repeat-card.is-collapsed .repeat-card-head{
    border-bottom:0!important;
  }
  html.clokit-mobile-card-active .form-panel .repeat-card-title{
    min-width:0!important;width:100%!important;overflow:hidden!important;
  }
  html.clokit-mobile-card-active .form-panel .repeat-card-title b{
    font-size:16px!important;line-height:1.25!important;
    overflow-wrap:anywhere!important;
  }
  html.clokit-mobile-card-active .form-panel .repeat-card-title span{
    font-size:12px!important;line-height:1.35!important;
    color:#6e8495!important;overflow:hidden!important;
    text-overflow:ellipsis!important;white-space:nowrap!important;
  }
  html.clokit-mobile-card-active .form-panel .repeat-card-actions{
    display:flex!important;align-items:center!important;
    flex-wrap:nowrap!important;gap:6px!important;flex-shrink:0!important;
  }
  html.clokit-mobile-card-active .form-panel .repeat-card-actions .btn{
    min-height:44px!important;padding:8px 9px!important;
    border-radius:10px!important;font-size:12px!important;
    font-weight:800!important;box-shadow:none!important;
  }
  html.clokit-mobile-card-active .form-panel .repeat-card-body{
    padding:12px!important;background:#fff!important;
  }
  html.clokit-mobile-card-active .form-panel .repeat-bottom-add{
    min-height:46px!important;width:100%!important;
    border:1px solid #c9e0eb!important;border-radius:11px!important;
    background:#eef7fb!important;color:#115477!important;
    font-size:14px!important;font-weight:850!important;
  }
  /* The finish control is the last real task, not a separate web page below it. */
  html.clokit-mobile-card-active .v22121-module-body>.clokit-field-finish{
    display:grid!important;grid-template-columns:35px minmax(0,1fr)!important;
    flex:0 0 auto!important;align-items:center!important;
    gap:7px 9px!important;
    margin:auto 0 0!important;padding:11px 12px!important;
    border:1px solid #d8e6ed!important;border-radius:15px!important;
    background:#fff!important;box-shadow:0 2px 9px rgba(11,45,65,.04)!important;
  }
  html.clokit-mobile-card-active .clokit-field-finish-check{
    width:35px!important;height:35px!important;border-radius:10px!important;
    font-size:17px!important;
  }
  html.clokit-mobile-card-active .clokit-field-finish-copy small{
    font-size:9px!important;line-height:1.25!important;
    letter-spacing:.10em!important;
  }
  html.clokit-mobile-card-active .clokit-field-finish-copy h3{
    font-size:15px!important;line-height:1.2!important;margin-top:2px!important;
  }
  html.clokit-mobile-card-active .clokit-field-finish-copy p{
    font-size:11px!important;line-height:1.35!important;margin-top:3px!important;
  }
  html.clokit-mobile-card-active .clokit-field-finish>button{
    grid-column:1/-1!important;min-height:48px!important;
    padding:10px!important;border-radius:11px!important;
    border:0!important;background:#09638d!important;
    font-size:15px!important;font-weight:850!important;
    box-shadow:none!important;
  }
  html.clokit-mobile-card-active .clokit-field-finish>button:focus-visible{
    outline:3px solid #53b5da!important;outline-offset:2px!important;
  }
  /* Fixed nav overlays may never create extra white-space after the save panel. */
  html.clokit-mobile-card-active .v22121-module-body>.bottom-nav{
    display:none!important;
  }
}
@media screen and (max-width:365px){
  html.clokit-mobile-card-active .form-panel .repeat-card-head{
    grid-template-columns:1fr!important;
  }
  html.clokit-mobile-card-active .form-panel .repeat-card-actions{
    justify-content:flex-start!important;
  }
}
@media (prefers-reduced-motion:reduce){
  html.clokit-mobile-card-active .form-panel .repeat-card,
  html.clokit-mobile-card-active .v22121-module-body>.clokit-field-finish{
    animation:none!important;transition:none!important;
  }
}