/* EarthRoster v1452.44 — uploaded iPhone screenshots, focused visual corrections.
   Built on the user's v1452.43 project; original forms, IDs, logic remain. */
:root{--er44-status-clearance:env(safe-area-inset-top,0px)}
@media(max-width:1023px){
 /* Only the installed iPhone PWA uses an inset fallback. Safari's own chrome does not. */
 html.er-ios-standalone{--er44-status-clearance:max(54px,env(safe-area-inset-top,0px))}
}
@layer er-earth {
 @media(max-width:1023px){
  html.er-earth body.ww-app-visible #app#app > .shell > .main{padding-top:0!important}
  html.er-earth body.ww-app-visible #app#app#app#app > .shell > .main > header.topbar,
  html.er-earth body.ww-app-visible #app#app#app#app > .shell > .main > header.topbar.topbar-clock{
   box-sizing:border-box!important;position:relative!important;inset:auto!important;
   transform:none!important;-webkit-transform:none!important;flex:0 0 auto!important;
   height:calc(87px + var(--er44-status-clearance))!important;
   min-height:calc(87px + var(--er44-status-clearance))!important;
   max-height:none!important;
   padding:calc(11px + var(--er44-status-clearance)) 15px 11px!important;
   align-items:center!important;overflow:visible!important;
  }
  html.er-earth body #app .main>.topbar .er38-company-identity{margin:0 0 5px!important;max-width:calc(100vw - 112px)!important;line-height:1.25!important;font-size:13px!important}
  html.er-earth body #app .main>.topbar h1{line-height:1.05!important;max-width:calc(100vw - 112px)!important}
  html.er-earth body #app .main>.topbar .top-tools{align-self:center!important}
  html.er-earth body #app .main>.topbar *{min-width:0}
  html.er-earth body.ww-app-visible #app>.shell>.main>.content{scroll-margin-top:0!important}
 }
 /* The invoice dialog is outside the shell; honour the same Dynamic Island clearance. */
 @media(max-width:760px){
  html.er-earth body #er1278-invoice-root.er41-invoice .er1278-head{
   padding:calc(11px + var(--er44-status-clearance)) 15px 12px!important;
   min-height:calc(80px + var(--er44-status-clearance))!important;
   display:flex!important;align-items:flex-end!important;
  }
  html.er-earth body #er1278-invoice-root.er41-invoice .er1280-head-right{align-self:flex-end!important;flex:0 0 auto!important}
  html.er-earth body #er1278-invoice-root.er41-invoice .er1278-head [data-er1278=close]{
   min-width:40px!important;width:40px!important;height:40px!important;min-height:40px!important;
   display:inline-flex!important;align-items:center!important;justify-content:center!important;position:relative!important;z-index:8!important;
  }
  html.er-earth body #er1278-invoice-root.er41-invoice .er41-actionbar{padding-bottom:max(22px,env(safe-area-inset-bottom,0px))!important}
 }
 /* Responsive messages toolbar: manage lives next to the new-chat action, not in the search row. */
 html.er-earth body #app #page .chat-list.cv-list .cv-head{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important}
 html.er-earth body #app #page .chat-list.cv-list .cv-head-label{flex:1 1 auto!important;min-width:0!important}
 html.er-earth body #app #page .chat-list.cv-list .er43-channel-settings{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 31px!important;width:31px!important;min-width:31px!important;min-height:31px!important;height:31px!important;
  padding:5px!important;margin:0 2px 0 0!important;border:0!important;
  border-radius:8px!important;background:transparent!important;color:#41654b!important;
  text-decoration:none!important;white-space:nowrap!important;box-shadow:none!important;cursor:pointer!important;
 }
 html.er-earth body #app #page .chat-list.cv-list .cv-new{order:3!important;flex:0 0 38px!important;width:38px!important;height:38px!important;min-height:38px!important;padding:8px!important;border-radius:9px!important}
 html.er-earth body #app #page .chat-list.cv-list .cv-search{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
 html.er-earth body #app #page .chat-list.cv-list .cv-search input{min-width:0!important;flex:1 1 80px!important}
 html.er-earth body #app #page .chat-list.cv-list .cv-search .er43-channel-settings svg{width:18px!important;height:18px!important;display:block!important}
 html.er-earth body .workphoto-banner{padding:10px 14px!important;margin:0!important;border-radius:0!important;display:flex!important;flex-direction:column!important;gap:3px!important}
 html.er-earth body .workphoto-banner strong{font-size:13px!important;line-height:1.3!important}
 html.er-earth body .workphoto-banner span{font-size:11px!important;line-height:1.5!important}
 html.er-earth body .chat-thread .photo-upload-btn{width:36px!important;height:36px!important;min-height:36px!important;border-radius:9px!important}
 /* Manage chats: compact list without old brown container around confirmation fields. */
 html.er-earth body .er43-pin-options{margin:12px 0!important;gap:0!important;border:1px solid #dbe4d7!important;border-radius:10px!important;background:#fff!important}
 html.er-earth body .er43-pin-options label{padding:11px 12px!important;min-height:56px!important;gap:10px!important}
 html.er-earth body .er43-pin-options strong{font-size:12px!important}
 html.er-earth body .er43-pin-options small{font-size:10px!important;margin-top:1px!important}
 html.er-earth body dialog :is(#er43-pins-form,#er43-pins-confirm) :is(input[type=text],input:not([type=checkbox])){
  background:#fff!important;border:1px solid #cad9ce!important;border-radius:8px!important;box-shadow:none!important;padding:10px!important}
 /* Invoicing: visible first item, uncramped clear outlines and no desktop field overflow. */
 html.er-earth body #er1278-invoice-root.er41-invoice .er41-items{display:block!important}
 html.er-earth body #er1278-invoice-root.er41-invoice .er41-items>.er41-line:first-child{display:block!important}
 html.er-earth body #er1278-invoice-root.er41-invoice .er41-line{border:1px solid #d8e2da!important;border-radius:11px!important;background:#fff!important;box-shadow:none!important}
 html.er-earth body #er1278-invoice-root.er41-invoice .er1280-add{min-height:35px!important;padding:7px 12px!important;border-radius:8px!important;background:#f6faf7!important;border:1px solid #c8d9ce!important;color:#365e41!important;font-size:12px!important}
 html.er-earth body #er1278-invoice-root.er41-invoice .er41-item-head>button{width:36px!important;max-width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important;border-radius:8px!important}
 html.er-earth body #er1278-invoice-root.er41-invoice .er41-line textarea{height:82px!important;min-height:82px!important}
 html.er-earth body #er1278-invoice-root.er41-invoice :is(input:not([type=checkbox]),select,textarea){background-color:#fff!important;border:1px solid #cfdbd1!important;border-radius:9px!important;box-shadow:none!important}
 html.er-earth body #er1278-invoice-root.er41-invoice .er1278-feedback.bad{max-height:82px!important;overflow-y:auto!important;font-size:12px!important;line-height:1.45!important}
}
@media(min-width:761px){
 @layer er-earth {
  html.er-earth body #er1278-invoice-root.er41-invoice .er41-prices{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important}
  html.er-earth body #er1278-invoice-root.er41-invoice .er41-prices label{min-width:0!important}
  html.er-earth body #er1278-invoice-root.er41-invoice .er41-prices :is(input,select){width:100%!important;min-width:0!important;max-width:100%!important}
 }
}
/* One-time welcome: genuine full-screen destination, not a translucent modal.
   App remains behind the full-opaque surface but is neither visible nor interactive. */
#er44-welcome{
 position:fixed!important;inset:0!important;z-index:2147483000!important;
 width:100vw!important;height:100vh!important;height:100dvh!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 box-sizing:border-box!important;overflow:auto!important;
 padding:max(32px,env(safe-area-inset-top,0px)) 22px max(32px,env(safe-area-inset-bottom,0px))!important;
 background:linear-gradient(153deg,#254734 0%,#17362a 53%,#10271e 100%)!important;
 color:#f8f6ec!important;opacity:1!important;
 animation:er45-welcome-in .18s ease-out both!important;
}
#er44-welcome.leaving{opacity:0!important;pointer-events:none!important;transition:opacity .24s ease!important}
#er44-welcome .er44-welcome-card{
 box-sizing:border-box!important;width:100%!important;max-width:520px!important;
 margin:auto!important;padding:30px 18px!important;text-align:center!important;
 border:0!important;background:transparent!important;box-shadow:none!important;
 color:inherit!important;border-radius:0!important;
}
#er44-welcome .er44-welcome-mark{
 display:inline-grid;place-items:center;margin:0 auto 28px;
 width:66px;height:66px;border-radius:22px;
 background:#e7ecdc;color:#28583d;font-size:31px;box-shadow:0 12px 38px #0c231c33;
}
#er44-welcome small{display:block;font:750 11px/1.6 system-ui;letter-spacing:.19em;color:#d0dbc8}
#er44-welcome h2{font:780 clamp(30px,7vw,48px)/1.1 system-ui;letter-spacing:-1.2px;margin:16px 0 18px;color:#fffdf7}
#er44-welcome p{font:400 clamp(16px,3vw,19px)/1.55 system-ui;margin:6px 0;color:#dae4d9}
#er44-welcome p strong{color:#fffdf5}
#er44-welcome .er44-welcome-helper{font-size:14px;color:#d0dccd;margin-top:10px}
#er44-welcome button{margin-top:36px;background:#f7f5ea;color:#1f4934;border:0;border-radius:12px;padding:14px 35px;min-height:48px;font:750 14px system-ui;cursor:pointer}
#er44-welcome button:focus-visible{outline:3px solid #b8ddc0;outline-offset:4px}
@keyframes er45-welcome-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#er44-welcome{animation:none!important}#er44-welcome.leaving{transition:none!important}}

/* V1452.46: Booking reminder's attachment cannot expand into a giant paperclip.
   Based on the user's October 24 IMG_6623 video; leaves file picker/storage unchanged. */
html body #modalHost label.bk-filebox {
  display:flex!important;flex-direction:row!important;align-items:center!important;
  justify-content:flex-start!important;gap:11px!important;
  box-sizing:border-box!important;width:100%!important;max-width:100%!important;
  padding:10px 12px!important;min-height:60px!important;
  background:#f8faf7!important;border:1px dashed #c9d8cc!important;
  border-radius:11px!important;cursor:pointer!important;
}
html body #modalHost label.bk-filebox > svg,
html body #modalHost label.bk-filebox > svg.icon {
  display:block!important;width:32px!important;height:32px!important;
  min-width:32px!important;min-height:32px!important;
  max-width:32px!important;max-height:32px!important;
  padding:7px!important;box-sizing:border-box!important;
  flex:0 0 32px!important;align-self:center!important;
  background:#e7f0e8!important;color:#315d43!important;border-radius:8px!important;
}
html body #modalHost label.bk-filebox > img{
  display:block!important;object-fit:cover!important;width:36px!important;height:36px!important;
  min-width:36px!important;max-width:36px!important;flex:0 0 36px!important;border-radius:7px!important;
}
html body #modalHost label.bk-filebox > span{
  display:block!important;flex:1 1 auto!important;min-width:0!important;
  max-width:100%!important;overflow-wrap:anywhere!important;
  font:400 12px/1.35 system-ui!important;color:#5b7163!important;
}
html body #modalHost label.bk-filebox > span strong{
  display:inline!important;font:650 13px/1.5 system-ui!important;color:#284e38!important;
}
html body #modalHost label.bk-filebox:focus-within{outline:2px solid #8cb29b!important;outline-offset:2px!important}