:root{
  --wv-green-950:#001716;
  --wv-green-900:#03261b;
  --wv-green-800:#053825;
  --wv-green-700:#0b5233;
  --wv-green-600:#1c8349;
  --wv-green-500:#1c8349;
  --wv-text:#10241b;
  --wv-muted:#5d6963;
  --wv-line:#e7ebe9;
  --wv-soft:#f6f8f7;
  --wv-card:#ffffff;
  --wv-blue:#dff1ff;
  --wv-shadow:0 3px 12px rgba(6,61,42,.08);
  --wv-radius:12px;
  --wv-bottom:64px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body,#app{margin:0;width:100%;min-height:100%;background:#fff;color:var(--wv-text)}
body{font-family:inherit;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,textarea,select{font:inherit}
button{-webkit-tap-highlight-color:transparent}
.icon{fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.spacer{flex:1}

@media (max-width:700px){
  html,body{font-size:14px;overflow-x:hidden}
  .sidebar{display:none!important}
  .mobile-only{display:flex!important}
  .main{margin:0!important;width:100%!important;max-width:none!important;min-height:100dvh!important;padding:0 16px calc(var(--wv-bottom) + env(safe-area-inset-bottom) + 8px)!important;background:#fff!important;overflow-x:hidden!important}
  .main:not(.view-dashboard){padding-top:max(env(safe-area-inset-top),8px)!important}
  .main:not(.view-dashboard)>.topbar{display:none!important}
  .topbar{height:74px!important;min-height:74px!important;margin:0!important;padding:calc(env(safe-area-inset-top) + 7px) 0 5px!important;border:0!important;background:#fff!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:10px!important}
  .topbar>.mobile-only{display:grid!important;place-items:center!important;width:30px!important;height:30px!important;min-width:30px!important;padding:0!important;border:0!important;background:transparent!important;color:#164532!important}
  .topbar>.mobile-only .icon{width:19px!important;height:19px!important;stroke-width:2.2!important}
  .topbar .online,.topbar .language-select544{display:none!important}
  .company-heading544{display:flex!important;flex-direction:column!important;line-height:1.05!important;gap:2px!important}
  .company-heading544 strong{font-size:13px!important;font-weight:800!important;letter-spacing:-.015em!important;color:#103b2b!important}
  .company-heading544 small{font-size:9px!important;font-weight:700!important;color:#168157!important}
  .avatar{width:30px!important;height:30px!important;min-width:30px!important;border-radius:50%!important;border:1px solid #e3e9e6!important;background:#f1f5f3!important;color:#174f39!important;display:grid!important;place-items:center!important;font-size:11px!important;font-weight:800!important}

  /* Dashboard */
  .wv-home-head{margin:2px 0 13px!important}
  .wv-home-head h1{margin:0!important;font-size:25px!important;line-height:1.04!important;font-weight:820!important;letter-spacing:-.038em!important;color:#0b3e2b!important}
  .wv-home-head p{margin:5px 0 0!important;font-size:12.5px!important;line-height:1.25!important;font-weight:450!important;color:#283a32!important}
  .wv-home-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin:0 0 14px!important}
  .wv-home-action{height:94px!important;min-height:94px!important;margin:0!important;padding:11px 8px 10px!important;border:1px solid #e6eae8!important;border-radius:11px!important;background:#fff!important;box-shadow:0 3px 11px rgba(18,55,41,.075)!important;color:#053825!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:8px!important;font-size:11px!important;line-height:1.05!important;font-weight:790!important;text-align:center!important}
  .wv-home-action .action-icon{width:34px!important;height:34px!important;fill:#053825!important;stroke:none!important;color:#053825!important}
  .wv-recent{margin-top:0!important}
  .wv-section-title{height:28px!important;display:flex!important;align-items:center!important;margin:0!important}
  .wv-section-title h2{margin:0!important;font-size:13px!important;line-height:1!important;font-weight:820!important;letter-spacing:-.02em!important;color:#172a20!important}
  .wv-section-title button{min-height:24px!important;padding:0!important;border:0!important;background:transparent!important;color:#128153!important;font-size:9px!important;font-weight:690!important}
  .wv-project-list{display:grid!important;gap:0!important}
  .wv-project-row{width:100%!important;min-height:49px!important;margin:0!important;padding:5px 0!important;border:0!important;border-bottom:1px solid #edf0ee!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:7px!important;text-align:left!important;color:var(--wv-text)!important}
  .wv-project-icon{width:27px!important;height:27px!important;min-width:27px!important;display:grid!important;place-items:center!important;color:#0a6044!important}
  .wv-project-icon .icon{width:18px!important;height:18px!important;stroke-width:2!important}
  .wv-project-copy h3{margin:0!important;font-size:10.5px!important;line-height:1.08!important;font-weight:790!important;color:#18271f!important}
  .wv-project-copy p{margin:2px 0 0!important;font-size:8.7px!important;line-height:1.22!important;font-weight:470!important;color:#58655f!important}
  .badge{display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;border-radius:10px!important;padding:5px 7px!important;font-size:7.7px!important;line-height:1!important;font-weight:760!important;border:0!important}
  .badge.green,.badge.gold{background:#dcf3e4!important;color:#246f45!important}.badge.rose{background:#dff1ff!important;color:#2877a5!important}

  /* Bottom navigation */
  .bottom-nav{position:fixed!important;z-index:80!important;left:0!important;right:0!important;bottom:0!important;height:calc(var(--wv-bottom) + env(safe-area-inset-bottom))!important;padding:5px 13px env(safe-area-inset-bottom)!important;border-top:1px solid #e5e9e7!important;background:rgba(255,255,255,.985)!important;backdrop-filter:blur(18px)!important;display:grid!important;grid-template-columns:1fr 1fr 58px 1fr 1fr!important;align-items:start!important;box-shadow:0 -2px 10px rgba(12,57,40,.03)!important}
  .bottom-nav button{height:52px!important;min-height:52px!important;padding:2px 1px!important;border:0!important;border-radius:0!important;background:transparent!important;color:#153f30!important;display:grid!important;place-items:center!important;align-content:center!important;gap:2px!important;font-size:8px!important;line-height:1.05!important;font-weight:670!important}
  .bottom-nav button .icon{width:18px!important;height:18px!important;stroke-width:2.1!important}
  .bottom-nav button.active{color:#0c8954!important;background:linear-gradient(to top,#eff9f3,transparent 72%)!important}
  .bottom-nav .quick-add544{width:50px!important;height:50px!important;min-height:50px!important;margin:-16px auto 0!important;align-self:start!important;border-radius:50%!important;border:3px solid #fff!important;background:#1c8349!important;color:#fff!important;box-shadow:0 2px 9px rgba(7,83,56,.24)!important;display:grid!important;place-items:center!important}
  .bottom-nav .quick-add544 .icon{width:24px!important;height:24px!important;stroke-width:2.25!important;color:#fff!important}
  .bottom-nav .quick-add544 span{display:none!important}

  /* Generic headers and search */
  .wv-screen-head,.wv-project-top{height:47px!important;min-height:47px!important;margin:0!important;display:grid!important;grid-template-columns:28px 1fr 28px!important;align-items:center!important;border:0!important;background:#fff!important}
  .wv-screen-head h1,.wv-project-top h1{margin:0!important;font-size:15px!important;line-height:1!important;font-weight:810!important;letter-spacing:-.018em!important;color:#13281e!important}
  .wv-back,.wv-more{height:30px!important;min-height:30px!important;padding:0!important;border:0!important;background:transparent!important;color:#173d2e!important;font-size:29px!important;line-height:1!important;display:grid!important;place-items:center!important}
  .wv-more{font-size:20px!important;letter-spacing:1px!important}
  .wv-search-row{height:39px!important;min-height:39px!important;margin:0 0 8px!important;padding:0 10px!important;border:0!important;border-radius:10px!important;background:#f6f8f7!important;display:flex!important;align-items:center!important;gap:8px!important;color:#8b9791!important}
  .wv-search-row>.icon{width:14px!important;height:14px!important;stroke-width:2!important}
  .wv-search-row input{flex:1!important;height:37px!important;min-height:37px!important;margin:0!important;padding:0!important;border:0!important;outline:0!important;background:transparent!important;color:#36483f!important;font-size:10.5px!important;font-weight:480!important}
  .wv-search-row input::placeholder{color:#a1aaa5!important}
  .wv-filter{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;padding:0!important;border:0!important;background:transparent!important;color:#245d47!important;font-size:19px!important;display:grid!important;place-items:center!important}
  .wv-filter .icon{width:17px!important;height:17px!important}

  /* Customers and materials */
  .wv-contact-list,.wv-material-list,.wv-work-list{display:grid!important;gap:0!important}
  .wv-contact-row,.wv-material-row,.wv-work-row{width:100%!important;min-height:67px!important;margin:0!important;padding:7px 2px!important;border:0!important;border-bottom:1px solid #e9edeb!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:10px!important;text-align:left!important;color:#16281f!important}
  .wv-contact-avatar{width:40px!important;height:40px!important;min-width:40px!important;border-radius:50%!important;display:grid!important;place-items:center!important;font-size:11.5px!important;font-weight:760!important}.wv-contact-avatar.c0{background:#dcecff!important;color:#246eb3!important}.wv-contact-avatar.c1{background:#ffe5d3!important;color:#a55b27!important}.wv-contact-avatar.c2{background:#eddcff!important;color:#6d2ba5!important}.wv-contact-avatar.c3{background:#fde1e8!important;color:#b93e61!important}.wv-contact-avatar.c4{background:#dceff2!important;color:#2c7781!important}
  .wv-contact-row b,.wv-material-row b,.wv-work-row b{display:block!important;font-size:10.5px!important;line-height:1.08!important;font-weight:780!important;color:#17281f!important}
  .wv-contact-row small,.wv-material-row small,.wv-work-row small{display:block!important;margin-top:3px!important;font-size:8.6px!important;line-height:1.22!important;font-weight:470!important;color:#606c66!important}
  .wv-row-plus{margin-right:4px!important;font-size:24px!important;line-height:1!important;font-weight:450!important;color:#0a5b40!important}
  .wv-material-thumb,.wv-work-icon{width:45px!important;height:45px!important;min-width:45px!important;border:0!important;border-radius:4px!important;background:#f2f4f3!important;display:grid!important;place-items:center!important;overflow:hidden!important;color:#164f39!important}
  .wv-material-thumb img{width:100%!important;height:100%!important;object-fit:contain!important;background:#f5f6f5!important}
  .wv-material-thumb .icon,.wv-work-icon .icon{width:20px!important;height:20px!important;stroke-width:1.8!important}
  .wv-chip-row{display:flex!important;gap:6px!important;margin:2px 0 8px!important;overflow:hidden!important;white-space:nowrap!important}
  .wv-chip-row button{height:25px!important;min-height:25px!important;padding:0 10px!important;border:0!important;border-radius:14px!important;background:#f0f3f1!important;color:#35483f!important;font-size:7.8px!important;font-weight:690!important;white-space:nowrap!important}.wv-chip-row button.active{background:#053825!important;color:#fff!important}

  /* Project details */
  .wv-project-visuals{height:98px!important;margin:1px 0 8px!important;display:grid!important;grid-template-columns:1.65fr 1fr!important;gap:6px!important}
  .wv-project-visuals img,.wv-photo-fallback{width:100%!important;height:98px!important;border-radius:6px!important;object-fit:cover!important;background:#edf1ef!important;overflow:hidden!important}
  .wv-project-summary{display:flex!important;align-items:center!important;gap:8px!important;margin:0 0 8px!important;padding:0 2px!important}
  .wv-project-summary>div:first-child{min-width:0!important;flex:1!important}
  .wv-project-summary h2{margin:0!important;font-size:12px!important;line-height:1.05!important;font-weight:820!important;letter-spacing:-.015em!important;color:#17291f!important}
  .wv-project-summary p{margin:4px 0 0!important;font-size:8.6px!important;line-height:1.28!important;color:#536159!important}
  .wv-project-tabs{height:35px!important;margin:0 -2px 4px!important;border-bottom:1px solid #e8ecea!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:0!important}
  .wv-project-tabs button{height:35px!important;min-height:35px!important;padding:0 2px!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;background:transparent!important;color:#3d4d45!important;font-size:7.7px!important;font-weight:680!important}.wv-project-tabs button.active{color:#0b6747!important;border-bottom-color:#0b8a54!important}
  .wv-ref-general{padding:0!important}
  .wv-ref-info-row{min-height:40px!important;padding:5px 1px!important;border-bottom:1px solid #edf0ee!important;display:grid!important;grid-template-columns:19px 78px 1fr auto!important;align-items:center!important;column-gap:6px!important}
  .wv-ref-info-row>.icon{width:13px!important;height:13px!important;color:#2b5f48!important;stroke-width:1.9!important}
  .wv-ref-info-row>span{font-size:8px!important;line-height:1.12!important;font-weight:540!important;color:#34483e!important}.wv-ref-info-row>b{font-size:8.7px!important;line-height:1.2!important;font-weight:610!important;color:#1a2a22!important}
  .wv-ref-contact{font-size:11px!important;color:#0a6a48!important;white-space:nowrap!important}
  .wv-ref-desc{min-height:54px!important;align-items:start!important;padding-top:8px!important}.wv-ref-desc>b{line-height:1.35!important}
  .wv-ref-offer-cta{width:100%!important;height:39px!important;min-height:39px!important;margin:7px 0 0!important;padding:0!important;border:0!important;border-radius:6px!important;background:#1c8349!important;color:#fff!important;font-size:10px!important;font-weight:760!important;box-shadow:none!important}.wv-ref-offer-cta span{margin-left:7px!important;font-size:15px!important;vertical-align:-1px!important}
  .wv-ref-material-row{min-height:58px!important;padding:6px 1px!important;border-bottom:1px solid #edf0ee!important;display:flex!important;align-items:center!important;gap:9px!important}.wv-ref-material-row b{font-size:10px!important}.wv-ref-material-row small{font-size:8px!important;color:#68736d!important}.wv-ref-notes textarea{min-height:180px!important}

  /* Work list in project keeps full power but compact */
  .wv-ref-works .stats{grid-template-columns:repeat(4,1fr)!important;gap:4px!important;margin:7px 0!important}.wv-ref-works .stat{min-height:46px!important;padding:7px!important;border-radius:7px!important}.wv-ref-works .stat strong{font-size:14px!important}.wv-ref-works .stat .label{font-size:7px!important}
  .wv-ref-works .card{padding:10px!important;border-radius:8px!important;box-shadow:none!important;border:1px solid #edf0ee!important}.wv-ref-works .card h2{font-size:11px!important}.wv-ref-works .pointcard{border-radius:7px!important}.wv-ref-works .pointhead,.wv-ref-works .pointbody{padding:8px!important}.wv-ref-works .pointhead h3{font-size:10px!important}.wv-ref-works .point-meta{font-size:8px!important}

  /* Calendar */
  .wv-calendar{padding:0 1px!important}.wv-cal-head{height:35px!important;display:flex!important;align-items:center!important}.wv-cal-head h2{margin:0!important;font-size:12px!important;font-weight:790!important;color:#24362d!important}.wv-cal-arrows{margin-left:auto!important;display:flex!important;gap:4px!important}.wv-cal-arrows button{width:26px!important;height:26px!important;min-height:26px!important;padding:0!important;border:0!important;background:transparent!important;color:#32604b!important;font-size:19px!important}.wv-cal-grid{display:grid!important;grid-template-columns:repeat(7,1fr)!important}.wv-cal-labels b{height:27px!important;display:grid!important;place-items:center!important;font-size:7.7px!important;font-weight:570!important;color:#828b87!important}.wv-cal-grid button,.wv-cal-grid>span{height:29px!important;min-height:29px!important;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;color:#273a31!important;font-size:8.7px!important;font-weight:570!important}.wv-cal-grid button.active{width:27px!important;background:#1c8349!important;color:#fff!important;justify-self:center!important}.wv-calendar h3{margin:9px 0 7px!important;font-size:10px!important;font-weight:740!important}.wv-time-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:6px!important}.wv-time-grid button{height:29px!important;min-height:29px!important;padding:0!important;border:1px solid #dce5e0!important;border-radius:6px!important;background:#fff!important;color:#176d42!important;font-size:8.5px!important;font-weight:590!important}.wv-time-grid button.active{background:#1c8349!important;color:#fff!important;border-color:#1c8349!important}.wv-calendar .field{margin-top:8px!important;gap:4px!important}.wv-calendar .field>span{font-size:8px!important;color:#3d5147!important}.wv-calendar textarea{height:42px!important;min-height:42px!important;padding:7px!important;border:1px solid #e0e6e3!important;border-radius:6px!important;font-size:8px!important;resize:none!important}.wv-full-cta{height:39px!important;min-height:39px!important;margin-top:8px!important;border:0!important;border-radius:6px!important;background:#1c8349!important;color:#fff!important;font-size:9.7px!important;font-weight:730!important}

  /* Quote and invoice */
  .wv-doc-head{margin-bottom:1px!important}.wv-doc-mobile{padding:4px 1px 0!important;color:#18281f!important}.wv-doc-brand{display:grid!important;grid-template-columns:1fr 1.08fr!important;gap:11px!important;margin:0 0 8px!important;font-size:7.1px!important;line-height:1.32!important;color:#45544d!important}.wv-doc-logo{display:flex!important;align-items:flex-start!important;gap:4px!important;color:#173a2b!important;font-size:7px!important;font-weight:760!important}.wv-doc-logo .icon{width:20px!important;height:20px!important;color:#1c8349!important;fill:#1c8349!important;stroke:#1c8349!important}.wv-doc-mobile>h2{margin:7px 0 8px!important;font-size:17px!important;line-height:1!important;font-weight:820!important;letter-spacing:-.025em!important;color:#16281f!important}.wv-doc-meta{display:grid!important;grid-template-columns:61px 1fr!important;column-gap:7px!important;row-gap:2px!important;margin-bottom:8px!important;font-size:7.4px!important;line-height:1.28!important}.wv-doc-meta span{color:#68736e!important}.wv-doc-meta b{font-weight:610!important;color:#34433c!important}.wv-doc-mobile table{width:100%!important;margin:0!important;border-collapse:collapse!important;font-size:7.2px!important;line-height:1.2!important}.wv-doc-mobile thead{border-top:1px solid #dce3df!important;border-bottom:1px solid #dce3df!important}.wv-doc-mobile th{padding:4px 2px!important;background:#fff!important;color:#20332a!important;font-size:6.8px!important;font-weight:790!important;text-transform:none!important;letter-spacing:0!important}.wv-doc-mobile td{padding:4px 2px!important;border-bottom:1px solid #e9edeb!important;color:#46524c!important}.wv-doc-mobile th:nth-child(n+2),.wv-doc-mobile td:nth-child(n+2){text-align:right!important}.wv-doc-totals{width:63%!important;margin:6px 0 8px auto!important;display:grid!important;grid-template-columns:1fr auto!important;gap:4px 9px!important;font-size:7.3px!important;line-height:1.2!important;text-align:right!important}.wv-doc-totals b{font-weight:690!important}.wv-doc-totals .grand{padding:5px 5px!important;border-radius:4px!important;background:#dcf2df!important;color:#245f36!important;font-weight:820!important}.wv-doc-notes{min-height:69px!important;margin:5px 0 8px!important;font-size:7.2px!important;line-height:1.38!important;color:#4b5751!important}.wv-paid{display:inline-block!important;margin:5px 0 0!important;padding:3px 5px!important;border-radius:4px!important;background:#dff3e3!important;color:#1b7443!important;font-weight:760!important}.wv-doc-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:6px!important}.wv-doc-actions button{height:38px!important;min-height:38px!important;padding:0!important;border:0!important;border-radius:6px!important;background:#f0f3f1!important;color:#214034!important;font-size:9.7px!important;font-weight:760!important}.wv-doc-actions button.primary{background:#1c8349!important;color:#fff!important}

  /* Settings */
  .wv-settings-list{margin-top:0!important}.wv-settings-row{width:100%!important;height:44px!important;min-height:44px!important;margin:0!important;padding:0 3px!important;border:0!important;border-bottom:1px solid #e9edeb!important;border-radius:0!important;background:#fff!important;color:#20342a!important;display:flex!important;align-items:center!important;gap:10px!important;text-align:left!important;font-size:9.8px!important;font-weight:580!important}.wv-settings-row>.icon{width:14px!important;height:14px!important;color:#2f5f49!important;stroke-width:1.9!important}.wv-settings-row>b{font-weight:500!important;color:#7e8a84!important}.wv-settings-row small,.wv-settings-row select{width:auto!important;min-height:24px!important;padding:0!important;border:0!important;background:transparent!important;color:#65716b!important;font-size:8px!important}.wv-settings-row.danger,.wv-settings-row.danger span,.wv-settings-row.danger .icon{color:#d74440!important}

  /* Login splash */
  .wv-login-splash{position:fixed!important;inset:0!important;min-height:100dvh!important;padding:0 28px!important;overflow:hidden!important;background:linear-gradient(153deg,#003c31 0%,#004f3d 51%,#002321 100%)!important;color:#fff!important}
  .wv-login-splash:before,.wv-login-splash:after{content:""!important;position:absolute!important;pointer-events:none!important}
  .wv-login-splash:before{left:-35%!important;top:42%!important;width:180%!important;height:22%!important;background:linear-gradient(14deg,transparent 0 25%,rgba(20,144,94,.42) 26% 55%,transparent 56%)!important;transform:rotate(-13deg)!important}
  .wv-login-splash:after{left:-70%!important;top:57%!important;width:220%!important;height:23%!important;background:linear-gradient(9deg,transparent 0 30%,rgba(5,92,66,.62) 31% 52%,transparent 53%)!important;transform:rotate(9deg)!important}
  .wv-splash-safe{position:relative!important;z-index:2!important;padding-top:calc(env(safe-area-inset-top) + 112px)!important;text-align:center!important}
  .wv-splash-logo{width:76px!important;height:76px!important;margin:0 auto 21px!important;border-radius:17px!important;background:linear-gradient(145deg,#16a361,#087044)!important;box-shadow:0 10px 25px rgba(0,0,0,.20)!important;display:grid!important;place-items:center!important}.wv-splash-logo .icon{width:42px!important;height:42px!important;fill:#fff!important;stroke:#fff!important;color:#fff!important;stroke-width:1!important}
  .wv-splash-title{font-size:30px!important;line-height:1!important;font-weight:820!important;letter-spacing:-.04em!important}.wv-splash-company{margin-top:8px!important;font-size:13px!important;line-height:1!important;font-weight:650!important;letter-spacing:.01em!important}.wv-splash-tag{margin-top:44px!important;font-size:13px!important;line-height:1.45!important;font-weight:520!important}
  .wv-splash-actions{position:absolute!important;z-index:2!important;left:28px!important;right:28px!important;bottom:calc(env(safe-area-inset-bottom) + 31px)!important;display:grid!important;gap:10px!important;text-align:center!important}.wv-splash-actions button{height:48px!important;min-height:48px!important;padding:0 18px!important;border-radius:26px!important;font-size:11.5px!important;font-weight:720!important}.wv-splash-primary{border:0!important;background:#1dad62!important;color:#fff!important;box-shadow:none!important}.wv-splash-primary span{float:right!important;font-size:18px!important;line-height:1!important;margin-top:-2px!important}.wv-splash-secondary{border:1.3px solid rgba(255,255,255,.95)!important;background:rgba(0,0,0,.03)!important;color:#fff!important}.wv-splash-langs{display:flex!important;justify-content:center!important;align-items:center!important;gap:25px!important;margin-top:25px!important;font-size:10px!important;font-weight:620!important}.wv-splash-langs b{padding:5px 7px!important;border-radius:14px!important;background:#197a57!important;color:#fff!important}

  /* Dialogs/forms, keep business functions usable */
  dialog#modal{width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:#fff!important}dialog#modal::backdrop{background:#fff!important}.modalhead{height:54px!important;min-height:54px!important;padding:calc(env(safe-area-inset-top) + 5px) 16px 5px!important;border-bottom:1px solid #e9edeb!important;background:#fff!important}.modalhead h2{font-size:15px!important}.modalcontent{padding:10px 16px 88px!important;max-height:calc(100dvh - 54px)!important;overflow:auto!important}.modalfoot{position:fixed!important;left:0!important;right:0!important;bottom:0!important;padding:8px 16px calc(8px + env(safe-area-inset-bottom))!important;border-top:1px solid #e9edeb!important;background:#fff!important;display:flex!important;gap:8px!important}.modalfoot button{flex:1!important;height:42px!important;min-height:42px!important;border-radius:8px!important;font-size:10px!important}.field{gap:4px!important}.field>span{font-size:9px!important}.field input,.field select,.field textarea{min-height:39px!important;border-radius:7px!important;font-size:10px!important}.primary{background:#1c8349!important;color:#fff!important}
}

/* Tablet */
@media (min-width:701px) and (max-width:1100px){
  body{background:#eef3f0}.sidebar{width:210px}.main{margin-left:210px!important;max-width:none!important;padding:0 28px 40px!important}.topbar{height:74px!important}.wv-home-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}.wv-home-action{min-height:125px!important;border-radius:14px!important}.wv-home-action .action-icon{width:40px!important;height:40px!important;fill:#053825!important;stroke:none!important}.wv-project-visuals{max-width:760px;grid-template-columns:1.7fr 1fr;height:210px}.wv-project-visuals img{height:210px}.wv-project-summary,.wv-project-tabs,.wv-project-tabbody{max-width:760px}.wv-material-list,.wv-contact-list,.wv-work-list{max-width:780px}.bottom-nav{display:none!important}.wv-doc-mobile{max-width:720px;margin:0 auto}.wv-login-splash{max-width:540px;left:50%!important;transform:translateX(-50%);box-shadow:0 0 70px rgba(0,0,0,.16)}
}

/* Desktop and macOS */
@media (min-width:1101px){
  body{background:#f3f6f4}.sidebar{background:#03261b!important}.main{max-width:none!important;padding:0 38px 50px!important}.topbar{height:82px!important}.wv-home-head{max-width:1050px}.wv-home-actions{max-width:1050px;display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:14px!important}.wv-home-action{min-height:130px!important;border-radius:15px!important;background:#fff!important;border:1px solid #e4eae6!important;box-shadow:var(--wv-shadow)!important;color:#053825!important}.wv-home-action .action-icon{width:42px!important;height:42px!important;fill:#053825!important;stroke:none!important}.wv-recent{max-width:1050px}.wv-project-visuals{max-width:900px;height:240px;grid-template-columns:1.75fr 1fr}.wv-project-visuals img{height:240px}.wv-project-summary,.wv-project-tabs,.wv-project-tabbody{max-width:900px}.wv-material-list,.wv-contact-list,.wv-work-list,.wv-settings-list,.wv-calendar{max-width:820px}.wv-doc-mobile{max-width:760px;margin:0 auto;padding:34px!important;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.08)}.bottom-nav{display:none!important}.wv-login-splash{max-width:500px;left:50%!important;transform:translateX(-50%);box-shadow:0 0 80px rgba(0,0,0,.18)}
}
@media (max-width:700px){.badge.blue{background:#dff1ff!important;color:#2679a7!important}.wv-filter .icon{width:17px!important;height:17px!important;stroke-width:2!important}}
/* Native scale refinement based on 390pt mobile canvas */
@media (max-width:700px){
  .wv-home-head h1{font-size:28px!important}.wv-home-head p{font-size:14px!important}
  .wv-home-action{height:104px!important;min-height:104px!important;font-size:13px!important;gap:9px!important}.wv-home-action .action-icon{width:38px!important;height:38px!important}
  .wv-section-title{height:31px!important}.wv-section-title h2{font-size:16px!important}.wv-section-title button{font-size:11px!important}
  .wv-project-row{min-height:58px!important}.wv-project-icon{width:31px!important;height:31px!important}.wv-project-icon .icon{width:21px!important;height:21px!important}.wv-project-copy h3{font-size:12.5px!important}.wv-project-copy p{font-size:10.5px!important}.badge{font-size:9.5px!important;padding:6px 8px!important}
  .bottom-nav button{font-size:9.4px!important}.bottom-nav button .icon{width:20px!important;height:20px!important}
  .wv-screen-head h1,.wv-project-top h1{font-size:18px!important}.wv-screen-head,.wv-project-top{height:54px!important;min-height:54px!important}
  .wv-search-row{height:44px!important;min-height:44px!important}.wv-search-row input{height:42px!important;min-height:42px!important;font-size:13px!important}.wv-search-row>.icon{width:17px!important;height:17px!important}
  .wv-contact-row,.wv-material-row,.wv-work-row{min-height:76px!important;padding:8px 2px!important;gap:12px!important}.wv-contact-avatar{width:45px!important;height:45px!important;min-width:45px!important;font-size:13px!important}.wv-material-thumb,.wv-work-icon{width:52px!important;height:52px!important;min-width:52px!important}.wv-contact-row b,.wv-material-row b,.wv-work-row b{font-size:13px!important}.wv-contact-row small,.wv-material-row small,.wv-work-row small{font-size:10.5px!important;line-height:1.25!important}.wv-row-plus{font-size:28px!important}
  .wv-chip-row button{height:29px!important;min-height:29px!important;font-size:9.5px!important;padding:0 12px!important}
  .wv-project-visuals{height:112px!important}.wv-project-visuals img,.wv-photo-fallback{height:112px!important}.wv-project-summary h2{font-size:14.5px!important}.wv-project-summary p{font-size:10.5px!important}.wv-project-tabs{height:39px!important}.wv-project-tabs button{height:39px!important;min-height:39px!important;font-size:9.7px!important}
  .wv-ref-info-row{min-height:44px!important;grid-template-columns:21px 90px 1fr auto!important}.wv-ref-info-row>.icon{width:15px!important;height:15px!important}.wv-ref-info-row>span{font-size:10.3px!important}.wv-ref-info-row>b{font-size:10.8px!important}.wv-ref-contact{font-size:13px!important}.wv-ref-desc{min-height:60px!important}.wv-ref-offer-cta{height:43px!important;min-height:43px!important;font-size:12px!important}
  .wv-cal-head h2{font-size:14px!important}.wv-cal-labels b{font-size:9.5px!important}.wv-cal-grid button,.wv-cal-grid>span{height:33px!important;min-height:33px!important;font-size:10.5px!important}.wv-calendar h3{font-size:11.5px!important}.wv-time-grid button{height:33px!important;min-height:33px!important;font-size:10px!important}.wv-calendar .field>span{font-size:10px!important}.wv-calendar textarea{font-size:10px!important;height:46px!important;min-height:46px!important}.wv-full-cta{height:43px!important;min-height:43px!important;font-size:11.5px!important}
  .wv-doc-brand{font-size:9px!important}.wv-doc-logo{font-size:9px!important}.wv-doc-logo .icon{width:24px!important;height:24px!important}.wv-doc-mobile>h2{font-size:22px!important}.wv-doc-meta{grid-template-columns:75px 1fr!important;font-size:9.5px!important;row-gap:3px!important}.wv-doc-mobile table{font-size:9.2px!important}.wv-doc-mobile th{font-size:9px!important;padding:5px 2px!important}.wv-doc-mobile td{padding:5px 2px!important}.wv-doc-totals{font-size:9.5px!important;gap:5px 10px!important}.wv-doc-notes{font-size:9.3px!important;min-height:82px!important}.wv-doc-actions button{height:42px!important;min-height:42px!important;font-size:11.5px!important}
  .wv-settings-row{height:50px!important;min-height:50px!important;font-size:12px!important}.wv-settings-row>.icon{width:17px!important;height:17px!important}.wv-settings-row small,.wv-settings-row select{font-size:10px!important}
}
/* Reference density pass */
@media (max-width:700px){
  .bottom-nav{--wv-bottom:70px;height:calc(70px + env(safe-area-inset-bottom))!important}.bottom-nav button{height:57px!important;min-height:57px!important;font-size:10px!important}.bottom-nav button .icon{width:22px!important;height:22px!important}.bottom-nav .quick-add544{width:56px!important;height:56px!important;min-height:56px!important;margin-top:-18px!important}.bottom-nav .quick-add544 .icon{width:27px!important;height:27px!important}
  .wv-home-action{height:110px!important;min-height:110px!important;font-size:14px!important}.wv-home-action .action-icon{width:42px!important;height:42px!important}.wv-home-actions{gap:8px!important}.wv-project-row{min-height:62px!important}.wv-project-copy h3{font-size:13px!important}.wv-project-copy p{font-size:11px!important}.badge{font-size:10px!important}
  .wv-contact-row,.wv-material-row,.wv-work-row{min-height:94px!important;padding:10px 3px!important}.wv-material-thumb,.wv-work-icon{width:60px!important;height:60px!important;min-width:60px!important}.wv-contact-avatar{width:52px!important;height:52px!important;min-width:52px!important;font-size:14px!important}.wv-contact-row b,.wv-material-row b,.wv-work-row b{font-size:14px!important}.wv-contact-row small,.wv-material-row small,.wv-work-row small{font-size:11.5px!important}.wv-row-plus{font-size:30px!important}.wv-chip-row button{height:31px!important;min-height:31px!important;font-size:10px!important}
  .wv-project-visuals{height:124px!important}.wv-project-visuals img,.wv-photo-fallback{height:124px!important}.wv-project-summary h2{font-size:15.5px!important}.wv-project-summary p{font-size:11px!important}.wv-project-tabs button{font-size:10.2px!important}.wv-ref-info-row{min-height:49px!important}.wv-ref-info-row>span{font-size:11px!important}.wv-ref-info-row>b{font-size:11.5px!important}.wv-ref-desc{min-height:68px!important}.wv-ref-offer-cta{height:47px!important;min-height:47px!important;font-size:13px!important}
  .wv-cal-head{height:42px!important}.wv-cal-head h2{font-size:15px!important}.wv-cal-labels b{height:33px!important;font-size:10px!important}.wv-cal-grid button,.wv-cal-grid>span{height:39px!important;min-height:39px!important;font-size:11.5px!important}.wv-cal-grid button.active{width:35px!important}.wv-calendar h3{font-size:12.5px!important;margin-top:12px!important}.wv-time-grid button{height:39px!important;min-height:39px!important;font-size:11px!important}.wv-calendar textarea{height:52px!important;min-height:52px!important;font-size:11px!important}.wv-full-cta{height:48px!important;min-height:48px!important;font-size:13px!important}
  .wv-doc-brand{font-size:11px!important}.wv-doc-logo{font-size:10.5px!important}.wv-doc-logo .icon{width:28px!important;height:28px!important}.wv-doc-mobile>h2{font-size:24px!important;margin:11px 0 10px!important}.wv-doc-meta{grid-template-columns:82px 1fr!important;font-size:11px!important;row-gap:4px!important}.wv-doc-mobile table{font-size:10.5px!important}.wv-doc-mobile th{font-size:10px!important;padding:7px 2px!important}.wv-doc-mobile td{padding:7px 2px!important}.wv-doc-totals{font-size:11px!important;gap:6px 12px!important;margin-top:9px!important}.wv-doc-notes{font-size:10.8px!important;min-height:100px!important;margin-top:9px!important}.wv-doc-actions{gap:9px!important}.wv-doc-actions button{height:48px!important;min-height:48px!important;font-size:13px!important}
  .wv-settings-row{height:58px!important;min-height:58px!important;font-size:13px!important}.wv-settings-row>.icon{width:19px!important;height:19px!important}.wv-settings-row small,.wv-settings-row select{font-size:11px!important}
  .wv-splash-safe{padding-top:calc(env(safe-area-inset-top) + 95px)!important}.wv-splash-logo{width:94px!important;height:94px!important;border-radius:20px!important;margin-bottom:26px!important}.wv-splash-logo .icon{width:52px!important;height:52px!important}.wv-splash-title{font-size:36px!important}.wv-splash-company{font-size:16px!important;margin-top:9px!important}.wv-splash-tag{font-size:15px!important;margin-top:50px!important}.wv-splash-actions{bottom:calc(env(safe-area-inset-bottom) + 28px)!important}.wv-splash-actions button{height:54px!important;min-height:54px!important;font-size:13px!important}.wv-splash-langs{font-size:11px!important;margin-top:28px!important}
}

/* 20.0.2 auth splash fix: login screen must be fully styled on desktop/tablet too. */
.wv-login-splash{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  min-height:100dvh!important;
  overflow:hidden!important;
  padding:0 28px!important;
  background:linear-gradient(153deg,#003c31 0%,#004f3d 51%,#002321 100%)!important;
  color:#fff!important;
}
.wv-login-splash:before,.wv-login-splash:after{content:""!important;position:absolute!important;pointer-events:none!important}
.wv-login-splash:before{left:-35%!important;top:42%!important;width:180%!important;height:22%!important;background:linear-gradient(14deg,transparent 0 25%,rgba(20,144,94,.42) 26% 55%,transparent 56%)!important;transform:rotate(-13deg)!important}
.wv-login-splash:after{left:-70%!important;top:57%!important;width:220%!important;height:23%!important;background:linear-gradient(9deg,transparent 0 30%,rgba(5,92,66,.62) 31% 52%,transparent 53%)!important;transform:rotate(9deg)!important}
.wv-splash-safe{position:relative!important;z-index:2!important;padding-top:clamp(74px,14vh,132px)!important;text-align:center!important}
.wv-splash-logo{width:94px!important;height:94px!important;margin:0 auto 26px!important;border-radius:20px!important;background:linear-gradient(145deg,#1c8349,#0b5233)!important;box-shadow:0 10px 25px rgba(0,0,0,.20)!important;display:grid!important;place-items:center!important}
.wv-splash-logo .icon{width:52px!important;height:52px!important;fill:#fff!important;stroke:#fff!important;color:#fff!important;stroke-width:1!important}
.wv-splash-title{font-size:36px!important;line-height:1!important;font-weight:820!important;letter-spacing:-.04em!important;color:#fff!important}
.wv-splash-company{margin-top:9px!important;font-size:16px!important;line-height:1!important;font-weight:650!important;letter-spacing:.01em!important;color:#fff!important}
.wv-splash-tag{margin-top:50px!important;white-space:pre-line!important;font-size:15px!important;line-height:1.45!important;font-weight:520!important;color:#fff!important}
.wv-splash-actions{position:absolute!important;z-index:2!important;left:28px!important;right:28px!important;bottom:calc(env(safe-area-inset-bottom) + 28px)!important;display:grid!important;gap:10px!important;text-align:center!important}
.wv-splash-actions>button{height:54px!important;min-height:54px!important;padding:0 18px!important;border-radius:28px!important;font-size:13px!important;font-weight:720!important}
.wv-splash-primary{border:0!important;background:#1c8349!important;color:#fff!important;box-shadow:none!important}.wv-splash-primary span{float:right!important;font-size:20px!important;line-height:1!important;margin-top:-2px!important}
.wv-splash-secondary{border:1.3px solid rgba(255,255,255,.95)!important;background:rgba(0,0,0,.03)!important;color:#fff!important}
.wv-login-splash .auth-languages{display:flex!important;justify-content:center!important;align-items:center!important;gap:25px!important;margin:20px 0 0!important}
.wv-login-splash .auth-languages button{height:30px!important;min-height:30px!important;padding:0 8px!important;border:0!important;border-radius:15px!important;background:transparent!important;color:rgba(255,255,255,.88)!important;font-size:10.5px!important;font-weight:650!important}
.wv-login-splash .auth-languages button.active{background:#1c8349!important;color:#fff!important}
@media (min-width:701px){
  body:has(.wv-login-splash){background:#001716!important}
  .wv-login-splash{width:min(100%,500px)!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;box-shadow:0 0 80px rgba(0,0,0,.25)!important}
}
@media (max-width:700px){
  .wv-login-splash{width:100%!important;left:0!important;right:0!important;transform:none!important}
  .wv-splash-safe{padding-top:calc(env(safe-area-inset-top) + 95px)!important}
}

/* Project workflow tabs and supplier material imagery */
.wv-project-tabs{display:flex;overflow-x:auto;overflow-y:hidden;gap:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;white-space:nowrap;padding-bottom:2px}
.wv-project-tabs::-webkit-scrollbar{display:none}
.wv-project-tabs button{flex:0 0 auto}
.wv-product-preview{display:flex;justify-content:center;align-items:center;min-height:150px;margin:0 0 14px;border:1px solid var(--line,#e7ebe8);border-radius:16px;background:#fff;overflow:hidden}
.wv-product-preview img{display:block;max-width:100%;max-height:220px;object-fit:contain}
.wv-material-thumb img,.v10-material-image img{width:100%;height:100%;object-fit:contain;display:block}
.v10-material-image{width:62px;height:62px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#fff;border:1px solid #e7ebe8;overflow:hidden}
@media(max-width:760px){.wv-project-tabs{margin-left:-2px;margin-right:-2px;padding-left:2px;padding-right:2px}.wv-project-tabs button{font-size:12px;padding:9px 10px}.wv-product-preview{min-height:120px}}
.wv-approval-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px}
.wv-approval-flow>div{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid #e4e9e6;border-radius:12px;background:#f7f9f8;color:#69746f;font-size:12px}
.wv-approval-flow b{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#e9eeeb;color:#315141;flex:0 0 auto}
.wv-approval-flow .active{border-color:#9cc9ae;background:#eef8f1;color:#163f2a}.wv-approval-flow .active b,.wv-approval-flow .done b{background:#1c8349;color:#fff}
.wv-approval-flow .done{color:#315141}
@media(max-width:680px){.wv-approval-flow{grid-template-columns:1fr}.wv-approval-flow>div{font-size:13px}}

/* 20.1.1 iOS focus zoom fix
   Mobile Safari/WKWebView auto-zooms focused controls below 16px and may keep that scale after navigation.
   Keep all editable controls at 16px on touch/mobile layouts so the viewport never changes scale. */
@media (max-width:700px) and (hover:none) and (pointer:coarse){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea{
    font-size:16px!important;
  }
  .field input,
  .field select,
  .field textarea,
  .wv-search-row input,
  .wv-calendar textarea,
  .wv-settings-row select{
    font-size:16px!important;
  }
}

/* Capacitor iOS/WKWebView also matches WebKit even when pointer media reporting differs. */
@supports (-webkit-touch-callout:none){
  @media (max-width:700px){
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea,
    .field input,
    .field select,
    .field textarea,
    .wv-search-row input,
    .wv-calendar textarea,
    .wv-settings-row select{
      font-size:16px!important;
    }
  }
}

/* 20.1.2 unified WerkVolt green chrome */
@media (max-width:700px){
  /* Dashboard top chrome: same dark green family as the login splash */
  .main.view-dashboard{
    padding-left:0!important;
    padding-right:0!important;
  }
  .main.view-dashboard>.topbar{
    height:calc(70px + env(safe-area-inset-top))!important;
    min-height:calc(70px + env(safe-area-inset-top))!important;
    padding:calc(env(safe-area-inset-top) + 8px) 16px 8px!important;
    margin:0!important;
    background:linear-gradient(145deg,var(--wv-green-900),var(--wv-green-800))!important;
    color:#fff!important;
  }
  .main.view-dashboard>.topbar .company-heading544 strong,
  .main.view-dashboard>.topbar .company-heading544 small,
  .main.view-dashboard>.topbar>.mobile-only,
  .main.view-dashboard>.topbar .avatar{color:#fff!important}
  .main.view-dashboard>.topbar .company-heading544 small{color:#bde9cf!important}
  .main.view-dashboard>.topbar .avatar{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.2)!important}

  .main.view-dashboard .wv-home-head{
    margin:0 0 12px!important;
    padding:15px 16px 17px!important;
    border-radius:0 0 22px 22px!important;
    background:linear-gradient(155deg,var(--wv-green-900) 0%,var(--wv-green-800) 72%,var(--wv-green-700) 100%)!important;
    box-shadow:0 8px 18px rgba(0,23,22,.14)!important;
  }
  .main.view-dashboard .wv-home-head h1{color:#fff!important}
  .main.view-dashboard .wv-home-head p{color:#d9efe2!important}
  .main.view-dashboard .wv-home-actions,
  .main.view-dashboard .wv-recent{margin-left:16px!important;margin-right:16px!important}

  /* Dark brand bottom navigation across the app */
  .bottom-nav{
    border-top:1px solid rgba(255,255,255,.08)!important;
    background:linear-gradient(180deg,#053825 0%,#03261b 100%)!important;
    box-shadow:0 -5px 18px rgba(0,23,22,.18)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
  }
  .bottom-nav button{color:#d6e8df!important}
  .bottom-nav button .icon{color:currentColor!important}
  .bottom-nav button.active{
    color:#fff!important;
    background:linear-gradient(to top,rgba(28,131,73,.32),transparent 75%)!important;
  }
  .bottom-nav button.active:after{background:#54c982!important}
  .bottom-nav .quick-add544{
    border-color:#03261b!important;
    background:linear-gradient(145deg,#28a85e,#1c8349)!important;
    color:#fff!important;
    box-shadow:0 5px 16px rgba(0,0,0,.28)!important;
  }

  /* Other mobile screens use the same brand header family */
  .wv-screen-head,.wv-project-top{
    margin-left:-16px!important;
    margin-right:-16px!important;
    padding-left:16px!important;
    padding-right:16px!important;
    width:calc(100% + 32px)!important;
    height:55px!important;
    min-height:55px!important;
    background:linear-gradient(145deg,var(--wv-green-900),var(--wv-green-800))!important;
    border-bottom:0!important;
    color:#fff!important;
  }
  .wv-screen-head h1,.wv-project-top h1,
  .wv-screen-head .wv-back,.wv-project-top .wv-back,
  .wv-screen-head .wv-more,.wv-project-top .wv-more{color:#fff!important}

  /* Consistent primary actions */
  .wv-full-cta,.wv-ref-offer-cta,.primary,
  button.primary:not(.danger),.wv-doc-actions button:last-child{
    background:linear-gradient(145deg,#239653,#1c8349)!important;
    border-color:#1c8349!important;
    color:#fff!important;
  }
  .wv-row-plus{color:#1c8349!important}
  .wv-chip-row button.active,.wv-project-tabs button.active{color:#0b5233!important;border-color:#8ec9a7!important;background:#e8f6ed!important}
}

@media (min-width:701px){
  /* Keep desktop chrome restrained while using the same brand colors */
  .topbar{border-bottom:1px solid #dfe8e3!important}
  .sidebar{background:linear-gradient(180deg,#03261b 0%,#001716 100%)!important}
  .sidebar .nav button.active{background:rgba(28,131,73,.22)!important;color:#fff!important}
  .sidebar .nav button:hover{background:rgba(255,255,255,.06)!important}
}

/* 20.2 production mobile interaction and readability fixes */
@media (max-width:700px){
  html,body{height:100%;width:100%;overflow:hidden!important;overscroll-behavior:none!important;background:#f7faf8!important}
  body{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation!important}
  #app{height:100%;overflow:hidden!important}
  .main{height:100dvh!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior-y:none!important;-webkit-overflow-scrolling:touch!important;padding-bottom:calc(104px + env(safe-area-inset-bottom))!important;touch-action:pan-y!important}
  .main::-webkit-scrollbar{display:none}
  button,a,[data-action],input,select,textarea{touch-action:manipulation!important}
  .bottom-nav{padding-bottom:env(safe-area-inset-bottom)!important}
  dialog{overscroll-behavior:contain!important}
  dialog .modalcontent{overflow-wrap:anywhere}

  /* Typography should remain legible on real phones */
  .main,.modalcontent{color:#142b20!important}
  .wv-screen-head h1,.wv-project-top h1,.wv-home-head h1{font-weight:800!important;letter-spacing:-.025em!important}
  .wv-project-summary h2,.wv-section-title h2,.pointhead h3,.wv-work-row b,.wv-material-row b,.wv-project-row h3,.wv-ref-info-row b{font-weight:760!important;color:#142b20!important}
  .wv-project-summary p,.wv-project-copy p,.wv-work-row small,.wv-material-row small,.point-meta,.small{color:#617168!important}
  .wv-work-row b,.wv-material-row b{font-size:15px!important;line-height:1.25!important}
  .wv-work-row small,.wv-material-row small{font-size:12.5px!important;line-height:1.35!important}

  /* Project tabs: keep all workflow stages inside the project page */
  .wv-project-tabs{display:flex!important;overflow-x:auto!important;overflow-y:hidden!important;gap:0!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;white-space:nowrap!important;scroll-snap-type:x proximity!important}
  .wv-project-tabs::-webkit-scrollbar{display:none!important}
  .wv-project-tabs button{flex:0 0 auto!important;min-width:max-content!important;padding:11px 16px!important;scroll-snap-align:start!important;font-size:13px!important;font-weight:700!important}

  /* Contact/address actions */
  .wv-ref-info-row{min-height:56px!important;align-items:center!important}
  .wv-ref-contact-actions{display:flex!important;gap:7px!important;margin-left:auto!important;align-items:center!important}
  .wv-mini-action{width:36px!important;height:36px!important;min-height:36px!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:#f1f6f3!important;border:1px solid #dce7e0!important;color:#0b5233!important}
  .wv-mini-action .icon{width:17px!important;height:17px!important}
  .wv-ref-info-row .wv-address-value{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}
  .wv-go-map{min-height:34px!important;padding:5px 10px!important;border-radius:18px!important;font-size:12px!important;background:#e8f6ed!important;color:#0b5233!important;border-color:#b9dec8!important}

  /* Sidebar becomes an actual mobile drawer */
  .sidebar.open{display:flex!important;position:fixed!important;left:0!important;top:0!important;bottom:0!important;width:min(82vw,330px)!important;z-index:90!important;box-shadow:18px 0 50px rgba(0,0,0,.28)!important;animation:wvDrawerIn .18s ease-out both!important}
  .sidebar.open:after{content:'';position:fixed;inset:0 0 0 min(82vw,330px);background:rgba(0,0,0,.28);pointer-events:none}
  @keyframes wvDrawerIn{from{transform:translateX(-100%)}to{transform:none}}

  /* Usable row actions */
  .wv-row-plus{display:grid!important;place-items:center!important;min-width:42px!important;min-height:42px!important;font-size:30px!important;font-weight:500!important}
  .wv-inline-actions{display:flex!important;gap:7px!important;align-items:center!important;margin-left:auto!important}
  .wv-inline-actions button{min-height:36px!important;padding:6px 10px!important;font-size:12px!important}

  /* Material image placeholders and live source state */
  .wv-material-thumb{background:#f2f5f3!important;border:1px solid #e7ece9!important;overflow:hidden!important}
  .wv-material-thumb img{background:#fff!important;object-fit:contain!important}
  .wv-material-source{display:block!important;color:#77867e!important;font-size:10.5px!important;margin-top:3px!important}
  .wv-refresh-strip{display:flex!important;gap:8px!important;margin:8px 0 12px!important}
  .wv-refresh-strip button{flex:1!important;min-height:40px!important;font-size:12px!important}

  /* Project work card edit/delete controls */
  .pointhead .wv-point-actions{display:flex!important;gap:6px!important;margin-left:auto!important}
  .pointhead .wv-point-actions button{min-height:36px!important;padding:6px 10px!important;font-size:12px!important}

  /* Keep bottom nav from covering last content */
  .wv-project-tabbody,.wv-material-list,.wv-work-list,.wv-project-list{padding-bottom:24px!important}
}

/* 20.2.1 real-device stabilization: safe areas, fixed viewport, visible workflow tabs */
@media (max-width:700px){
  html,body,#app{width:100%!important;height:100%!important;min-height:100%!important;max-height:100%!important}
  html,body{position:fixed!important;inset:0!important;overflow:hidden!important;overscroll-behavior:none!important}
  #app{position:fixed!important;inset:0!important;overflow:hidden!important}
  .main{position:absolute!important;inset:0!important;width:100%!important;max-width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding-left:16px!important;padding-right:16px!important;padding-top:0!important;padding-bottom:calc(96px + env(safe-area-inset-bottom))!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior-y:none!important;-webkit-overflow-scrolling:touch!important}
  .main>*{max-width:100%;min-width:0}
  .main:not(.view-dashboard){padding-top:0!important}

  .main.view-dashboard>.topbar{
    position:sticky!important;top:0!important;z-index:35!important;
    height:calc(58px + env(safe-area-inset-top))!important;
    min-height:calc(58px + env(safe-area-inset-top))!important;
    padding:env(safe-area-inset-top) 16px 0!important;
    align-items:center!important;
  }
  .main.view-dashboard .wv-home-head{margin-top:0!important}

  .wv-screen-head,.wv-project-top{
    position:sticky!important;top:0!important;z-index:34!important;
    box-sizing:border-box!important;
    height:calc(55px + env(safe-area-inset-top))!important;
    min-height:calc(55px + env(safe-area-inset-top))!important;
    padding-top:env(safe-area-inset-top)!important;
    margin-top:0!important;
  }

  /* All eight project workflow tabs are visible without a hidden menu. */
  .wv-project-tabs{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-auto-rows:minmax(42px,auto)!important;
    height:auto!important;min-height:84px!important;
    overflow:visible!important;white-space:normal!important;
    gap:0!important;padding:0!important;margin-bottom:10px!important;
    border-bottom:1px solid #e5ebe7!important;
  }
  .wv-project-tabs button{
    min-width:0!important;width:100%!important;height:auto!important;min-height:42px!important;
    padding:7px 4px!important;white-space:normal!important;line-height:1.12!important;
    font-size:10.5px!important;font-weight:760!important;text-align:center!important;
    border-radius:0!important;border:0!important;border-bottom:2px solid transparent!important;
    background:#fff!important;color:#32463b!important;
  }
  .wv-project-tabs button.active{background:#e8f6ed!important;color:#075436!important;border-bottom-color:#49b476!important}

  /* Prevent iOS native rubber-banding and accidental text/viewport gestures. */
  .bottom-nav{position:fixed!important;left:0!important;right:0!important;bottom:0!important;z-index:85!important}
  button,a,[data-action]{-webkit-touch-callout:none!important}
  .wv-home-actions,.wv-recent,.wv-project-list,.wv-contact-list,.wv-work-list,.wv-material-list{width:auto!important;max-width:100%!important;min-width:0!important}
  .wv-home-action,.wv-project-row,.wv-work-row,.wv-material-row,.wv-contact-row{max-width:100%!important;min-width:0!important;overflow:hidden!important}
  .wv-home-action span,.wv-project-copy,.wv-work-row>span:nth-child(2),.wv-material-row>span:nth-child(2),.wv-contact-row>span:nth-child(2){min-width:0!important;overflow-wrap:anywhere!important}

  /* Readability on phone: darker copy and stronger weights. */
  .main{font-weight:480!important}
  .wv-project-summary h2,.wv-project-copy h3,.wv-work-row b,.wv-material-row b,.wv-contact-row b,.pointhead h3,.wv-ref-info-row b{font-weight:780!important;color:#10291d!important}
  .wv-project-summary p,.wv-project-copy p,.wv-work-row small,.wv-material-row small,.wv-contact-row small,.point-meta,.small{color:#53665b!important;font-weight:500!important}
  .wv-ref-info-row>b small{display:block!important;margin-top:3px!important;font-size:11px!important;line-height:1.25!important;color:#5b6c63!important;font-weight:560!important}

  /* Make the mobile drawer unquestionably interactive. */
  .topbar>[data-action="menu"]{position:relative!important;z-index:95!important;pointer-events:auto!important}
  .sidebar.open{pointer-events:auto!important;overflow-y:auto!important}

  /* Fullscreen modals own their safe area. Capacitor contentInset is disabled. */
  dialog#modal{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;max-height:none!important;margin:0!important;overflow:hidden!important}
  dialog#modal .modalhead{box-sizing:border-box!important;height:calc(56px + env(safe-area-inset-top))!important;min-height:calc(56px + env(safe-area-inset-top))!important;padding:env(safe-area-inset-top) 16px 0!important;align-items:center!important}
  dialog#modal .modalcontent{height:calc(100% - 56px - env(safe-area-inset-top))!important;max-height:none!important;padding:14px 16px calc(92px + env(safe-area-inset-bottom))!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important}
  dialog#modal .modalfoot{z-index:8!important}
  dialog#modal .modalhead h2{font-size:17px!important;font-weight:800!important;color:#14291e!important}
  dialog#modal .field>span{font-size:12px!important;font-weight:720!important;color:#53625b!important}
  dialog#modal .field input,dialog#modal .field select,dialog#modal .field textarea{font-size:16px!important;min-height:48px!important}
  dialog#modal .modalfoot button{font-size:13px!important;font-weight:720!important;min-height:50px!important;height:50px!important}

  .wv-go-map{font-weight:700!important}
  .wv-ref-contact-actions{flex-shrink:0!important}
  .wv-ref-info-row{grid-template-columns:22px 88px minmax(0,1fr) auto!important}
}
@media (max-width:700px){
 .wv-head-add{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;border:0!important;background:transparent!important;color:#fff!important;font-size:24px!important;line-height:1!important;display:grid!important;place-items:center!important}
 .wv-screen-head .wv-filter{color:#fff!important}
}

/* 20.2.2 unified native mobile header + Schouw primary action */
@media (max-width:700px){
  :root{--wv-mobile-chrome:#03261b}

  /* Every mobile page uses the same solid WerkVolt chrome as the bottom bar. */
  .wv-screen-head,
  .wv-project-top,
  .main.view-dashboard>.topbar,
  .main.view-dashboard .wv-home-head,
  .pagehead{
    background:var(--wv-mobile-chrome)!important;
    background-image:none!important;
    color:#fff!important;
  }

  /* Legacy desktop page headers become proper iOS/Android app bars. */
  .pagehead{
    position:sticky!important;
    top:0!important;
    z-index:36!important;
    box-sizing:border-box!important;
    width:calc(100% + 32px)!important;
    min-height:calc(58px + env(safe-area-inset-top))!important;
    height:calc(58px + env(safe-area-inset-top))!important;
    margin:0 -16px 14px!important;
    padding:env(safe-area-inset-top) 16px 0!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .pagehead-copy{min-width:0!important;display:flex!important;align-items:center!important;height:58px!important}
  .pagehead .eyebrow,.pagehead p{display:none!important}
  .pagehead h1{
    margin:0!important;
    color:#fff!important;
    font-size:20px!important;
    line-height:1.1!important;
    font-weight:800!important;
    letter-spacing:-.02em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .pagehead-back{
    display:grid!important;
    place-items:center!important;
    flex:0 0 34px!important;
    width:34px!important;
    height:40px!important;
    min-width:34px!important;
    min-height:40px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:#fff!important;
    font-size:36px!important;
    font-weight:400!important;
    line-height:1!important;
  }
  .pagehead>.spacer{display:block!important;flex:1 1 auto!important}
  .pagehead>.actions{display:flex!important;align-items:center!important;gap:6px!important;margin:0!important}
  .pagehead>.actions button{
    min-height:38px!important;
    height:38px!important;
    padding:0 12px!important;
    border-radius:11px!important;
    border:1px solid rgba(255,255,255,.28)!important;
    background:rgba(255,255,255,.10)!important;
    color:#fff!important;
    font-size:12px!important;
    font-weight:700!important;
  }
  .pagehead>.actions .primary{
    background:#1c8349!important;
    border-color:#56b77b!important;
  }

  /* Reference headers use identical dimensions and solid color. */
  .wv-screen-head,.wv-project-top{
    min-height:calc(58px + env(safe-area-inset-top))!important;
    height:calc(58px + env(safe-area-inset-top))!important;
    padding-top:env(safe-area-inset-top)!important;
  }
  .wv-screen-head h1,.wv-project-top h1{font-size:20px!important;font-weight:800!important}
  .wv-screen-head .wv-back,.wv-project-top .wv-back{
    width:34px!important;min-width:34px!important;height:40px!important;
    display:grid!important;place-items:center!important;
    font-size:36px!important;line-height:1!important;
  }

  /* Bottom navigation and primary Schouw control share exactly the same palette. */
  .bottom-nav{background:var(--wv-mobile-chrome)!important;background-image:none!important}
  .bottom-nav .quick-add544{
    width:64px!important;height:64px!important;
    background:#1c8349!important;
    border:4px solid var(--wv-mobile-chrome)!important;
    color:#fff!important;
  }
  .bottom-nav .quick-add544 .icon{width:29px!important;height:29px!important}
  .bottom-nav .quick-add544 span{display:none!important}

  /* Keep the system status bar visually connected to the header. */
  .main:not(.view-dashboard){background:#fff!important}
}

/* 20.2.3 supplier refresh pill */
.wv-refresh-strip{display:flex!important;justify-content:center!important;margin:12px 0 18px!important}
.wv-live-refresh{appearance:none!important;border:0!important;border-radius:999px!important;background:#1f9a55!important;color:#fff!important;font-weight:800!important;font-size:15px!important;line-height:1!important;min-height:44px!important;padding:0 20px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;box-shadow:0 6px 18px rgba(31,154,85,.18)!important}
.wv-live-refresh svg{width:21px!important;height:21px!important;stroke:currentColor!important}
.wv-live-refresh:active{transform:scale(.98)!important;background:#177b44!important}

/* WerkVolt 20.2.4: mobile search visibility + horizontally scrollable category chips */
@media (max-width:700px){
  /* Rows filtered by the live search must actually disappear, even though row layouts use !important. */
  .wv-work-row[hidden],
  .wv-material-row[hidden],
  .wv-contact-row[hidden],
  .project-row[hidden],
  [hidden]{display:none!important;}

  /* Category pills are a horizontal touch scroller, not a clipped row. */
  .wv-chip-row{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    width:100%!important;
    max-width:100%!important;
    padding:0 2px 9px!important;
    margin:2px 0 8px!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    touch-action:pan-x!important;
    scrollbar-width:none!important;
  }
  .wv-chip-row::-webkit-scrollbar{display:none!important;}
  .wv-chip-row>button{
    flex:0 0 auto!important;
    white-space:nowrap!important;
    touch-action:manipulation!important;
  }

  /* Search field remains vertically scroll-safe while typing. */
  .wv-search-row{touch-action:pan-y!important;}
  .wv-search-row input{touch-action:manipulation!important;}
}

/* 20.2.6 quotation editor interaction and numeric precision */
@media (max-width:700px){
  dialog#modal:has(.v10-editor){overflow-y:auto!important;overflow-x:hidden!important;height:100dvh!important;max-height:100dvh!important;touch-action:pan-y!important;-webkit-overflow-scrolling:touch!important}
  dialog#modal:has(.v10-editor) .modalhead{position:sticky!important;top:0!important;z-index:20!important}
  dialog#modal:has(.v10-editor) .modalcontent{height:auto!important;max-height:none!important;overflow:visible!important;padding:14px 16px 16px!important;pointer-events:auto!important}
  dialog#modal:has(.v10-editor) .modalfoot{position:static!important;display:grid!important;grid-template-columns:1fr!important;padding:10px 16px calc(18px + env(safe-area-inset-bottom))!important;pointer-events:auto!important}
  dialog#modal:has(.v10-editor) .modalfoot button{width:100%!important;min-height:52px!important;font-size:15px!important;pointer-events:auto!important}
  dialog#modal:has(.v10-editor) input,dialog#modal:has(.v10-editor) textarea,dialog#modal:has(.v10-editor) select,dialog#modal:has(.v10-editor) button{pointer-events:auto!important;touch-action:manipulation!important}
}

/* 20.2.8 shared mobile geometry. The old max-width cap truncated full-bleed
   headers after their negative margins, leaving a white strip on the right. */
@media (max-width:700px){
  .main,.main.view-dashboard{--wv-safe-top:env(safe-area-inset-top,0px);--wv-gutter-left:calc(16px + env(safe-area-inset-left,0px));--wv-gutter-right:calc(16px + env(safe-area-inset-right,0px));padding-left:var(--wv-gutter-left)!important;padding-right:var(--wv-gutter-right)!important;touch-action:pan-x pan-y!important;scroll-padding-top:calc(64px + var(--wv-safe-top))}
  .main > :is(.wv-screen-head,.wv-project-top,.pagehead),
  .main.view-dashboard > .topbar{
    position:sticky!important;top:0!important;left:auto!important;right:auto!important;transform:none!important;
    width:auto!important;max-width:none!important;min-width:0!important;box-sizing:border-box!important;
    margin:0 calc(-1 * var(--wv-gutter-right)) 0 calc(-1 * var(--wv-gutter-left))!important;
    padding:var(--wv-safe-top) var(--wv-gutter-right) 0 var(--wv-gutter-left)!important;
    height:calc(58px + var(--wv-safe-top))!important;min-height:calc(58px + var(--wv-safe-top))!important;
    display:flex!important;align-items:center!important;gap:8px!important;background:#03261b!important;color:#fff!important;
    border:0!important;border-radius:0!important;z-index:40!important;flex-wrap:nowrap!important;
  }
  .main > :is(.wv-screen-head,.wv-project-top,.pagehead) h1{margin:0!important;font-size:19px!important;line-height:1.2!important;font-weight:750!important;min-width:0!important;white-space:nowrap!important;text-overflow:ellipsis!important;overflow:hidden!important;color:#fff!important}
  .main > :is(.wv-screen-head,.wv-project-top,.pagehead) :is(.wv-back,.pagehead-back){flex:0 0 36px!important;width:36px!important;height:44px!important;min-height:44px!important;padding:0!important;color:#fff!important}
  .main > :is(.wv-screen-head,.wv-project-top,.pagehead) :is(.wv-more,.wv-head-add){margin-left:auto!important;flex:0 0 40px!important;width:40px!important;min-width:40px!important;height:44px!important;min-height:44px!important;padding:0!important;color:#fff!important}
  .main.view-dashboard .wv-home-head{width:auto!important;max-width:none!important;margin:0 calc(-1 * var(--wv-gutter-right)) 18px calc(-1 * var(--wv-gutter-left))!important;padding:14px var(--wv-gutter-right) 18px var(--wv-gutter-left)!important;background:#03261b!important}
  .main.view-dashboard .wv-home-actions,.main.view-dashboard .wv-recent{margin-left:0!important;margin-right:0!important}
  .wv-chip-row{touch-action:pan-x pan-y!important}
  .wv-project-tabs{touch-action:pan-x pan-y!important}
  .wv-doc-actions-row{display:flex!important;flex-wrap:wrap!important;gap:8px!important;padding-top:10px!important}
  .wv-doc-actions-row button{flex:1 1 130px!important;min-height:44px!important;font-size:14px!important}
  .wv-quote-shell,.wv-invoice-shell{padding:8px!important;overflow:hidden!important}
  .wv-document .wd-table .wd-unit{font-size:10px!important;line-height:1.35!important}
}

/* Every form/dialog has ONE scroll owner. Nothing transparent lies above inputs.
   Modal actions follow their content, never an invisible fixed full-screen footer. */
dialog#modal[open]{padding:0!important;overflow:hidden!important;isolation:isolate!important}
dialog#modal[open] #modalbody{position:relative!important;display:block!important;height:100%!important;max-height:inherit!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;touch-action:pan-x pan-y!important;-webkit-overflow-scrolling:touch!important}
dialog#modal[open] .modalcontent{height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;padding:18px!important;position:relative!important;pointer-events:auto!important}
dialog#modal[open] .modalfoot{position:static!important;inset:auto!important;height:auto!important;max-height:none!important;display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin:0!important;padding:16px 18px calc(18px + env(safe-area-inset-bottom,0px))!important;background:#fff!important;pointer-events:auto!important;z-index:auto!important}
dialog#modal[open] .modalfoot button{flex:1 1 150px!important;height:auto!important;min-height:46px!important;font-size:14px!important;line-height:1.35!important;padding:12px!important}
dialog#modal[open] .modalhead{position:sticky!important;top:0!important;z-index:10!important;background:#03261b!important;color:#fff!important;display:flex!important;align-items:center!important;gap:12px!important;border:0!important}
dialog#modal[open] .modalhead h2,dialog#modal[open] .modalhead button{color:#fff!important}
dialog#modal[open] .modalhead h2{font-size:17px!important;line-height:1.25!important;margin:0!important;font-weight:750!important}
dialog#modal[open] .modalhead button{flex:0 0 auto!important;min-height:44px!important;padding:8px 12px!important}
dialog#modal[open] :is(input,textarea,select){font-size:16px!important;touch-action:manipulation!important;max-width:100%!important}
dialog#modal[open] .field>span{font-size:13px!important;line-height:1.4!important;color:#435c4e!important;font-weight:650!important}
dialog#modal[open] .v10-row,dialog#modal[open] [data-v10-invoice]{border:1px solid #dce6df;border-radius:12px;margin:16px 0;padding:16px;min-width:0}
dialog#modal[open] .v10-row legend{font-size:12px;font-weight:700;color:#0b5233;padding:0 6px}
dialog#modal[open] .v10-sectionhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:16px 0}
dialog#modal[open] .v10-sectionhead h3{margin:0;font-size:17px}
dialog#modal[open] .v10-regroup-action{margin:12px 0;font-size:13px}
dialog#modal[open] .v10-row .formgrid{margin-top:12px}
body:has(dialog#modal[open]) .bottom-nav{visibility:hidden!important}
@media(max-width:700px){
 dialog#modal[open]{width:100%!important;max-width:100%!important;height:100dvh!important;max-height:100dvh!important;inset:0!important;margin:0!important;border:0!important;border-radius:0!important}
 dialog#modal[open] .modalhead{height:auto!important;min-height:calc(58px + env(safe-area-inset-top,0px))!important;padding:calc(env(safe-area-inset-top,0px) + 6px) calc(16px + env(safe-area-inset-right,0px)) 6px calc(16px + env(safe-area-inset-left,0px))!important}
 dialog#modal[open] .modalfoot button{width:auto!important}
 dialog#modal[open] .formgrid.three{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
 dialog#modal[open] .formgrid.three>.field:last-child{grid-column:1/-1}
 dialog#modal[open] #modalbody{scroll-padding-top:calc(74px + env(safe-area-inset-top,0px))}
}