/* Phone layout only. Desktop and tablet retain the persistent text sidebar. */
@media(max-width:640px),(max-width:900px) and (pointer:coarse) and (orientation:landscape){
  html:has(#app .sidebar--mobile-open){overflow:hidden}
  :root #app .app-shell{display:block!important;grid-template-columns:minmax(0,1fr)!important;min-width:0}
  :root #app .app-shell>.content-column{width:100%;min-width:0}
  :root #app .app-shell>.sidebar{position:fixed;inset:0 auto 0 0;align-self:auto;width:min(320px,calc(100vw - 48px));max-width:calc(100vw - 48px);height:100dvh;box-sizing:border-box;padding:16px 12px;transform:translateX(-100%);visibility:hidden;z-index:110;transition:transform .18s ease}
  :root #app .app-shell>.sidebar--mobile-open{visibility:visible;transform:translateX(0)}
  :root #app .app-shell .mobile-scrim{display:block;position:fixed;inset:0;width:100%;height:100dvh;border:0;background:rgba(16,35,58,.42);z-index:100}
  :root #app .app-shell .drawer-close{display:grid;place-items:center;width:44px;height:44px;margin-left:auto;border:1px solid #dbe6f3;border-radius:12px;background:white;color:#48617e;font-size:24px;cursor:pointer}
  :root #app .app-shell .sidebar .brand-mark__logo{width:34px;height:34px}
  :root #app .app-shell .sidebar .brand-mark__copy strong{font-size:14px}
  :root #app .app-shell .sidebar .nav-group__trigger b{font-size:14px}
  :root #app .app-shell .sidebar .nav-link{min-height:44px;box-sizing:border-box}
  :root #app .app-shell .sidebar .nav-link b,:root #app .app-shell .sidebar .nav-sub-link{font-size:14px}
  :root #app .app-shell .sidebar .side-user{grid-template-columns:28px minmax(0,1fr) 44px}
  :root #app .app-shell .sidebar .side-settings{width:44px;height:44px}
  :root #app .phone-bottom-nav{position:fixed;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));inset:auto 0 0;z-index:40;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));border-top:1px solid #dce6f3;background:rgba(255,255,255,.97);box-shadow:0 -4px 20px rgba(28,63,105,.06);backdrop-filter:blur(12px)}
  :root #app .phone-bottom-nav a,:root #app .phone-bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:52px;padding:4px;border:0;border-radius:12px;background:transparent;color:#6d8199;font:inherit;font-size:12px;text-decoration:none;cursor:pointer}
  :root #app .phone-bottom-nav .is-active{color:var(--brand-primary,#1768d7);background:var(--brand-soft,#edf5ff);font-weight:750}
  :root #app .app-shell .topbar{position:sticky;top:0;z-index:30;min-height:64px;height:auto;padding:8px 12px;box-sizing:border-box;flex-wrap:nowrap;gap:8px}
  :root #app .topbar .page-heading{min-width:0;flex:1}
  :root #app .topbar .page-heading h1{font-size:20px;line-height:1.3;white-space:normal}
  :root #app .topbar .page-heading small{display:none}
  :root #app .topbar .top-actions{flex:0 0 auto;gap:6px}
  :root #app .topbar .top-actions>.search-box,:root #app .topbar .top-actions>.theme-switcher,:root #app .topbar .top-actions>.scope-pill,:root #app .topbar .top-actions>.logout{display:none!important}
  :root #app .app-shell .workspace-main{min-width:0;padding:12px 12px calc(90px + env(safe-area-inset-bottom,0px));box-sizing:border-box}
  :root #app .workspace-main>*, :root #app .workspace-main :where(.card,.layout,.main-grid,.detail-grid,.grid,.toolbar,.form,.left,.right,.queue-card,.detail-card,.apply-card){min-width:0;box-sizing:border-box}
  :root #app .workspace-main :where(.layout,.main-grid,.detail-grid,.fields,.form-grid,.content-grid){grid-template-columns:minmax(0,1fr)!important}
  :root #app .workspace-main :where(input,select,textarea){min-width:0;max-width:100%;font-size:16px!important;min-height:44px!important}
  :root #app .workspace-main button{min-height:44px!important;font-size:14px!important;touch-action:manipulation}
  :root #app .workspace-main label{font-size:14px!important}
  :root #app .workspace-main :where(.hero,.page-hero,.page-head){min-width:0;min-height:0!important;padding:16px!important;gap:12px!important;flex-wrap:wrap;border-radius:16px!important}
  :root #app .workspace-main :where(.hero,.page-hero) h1{font-size:22px!important}
  :root #app .workspace-main :where(.card,.apply-card,.queue-card,.detail-card){padding:14px;border-radius:16px}
  :root #app .workspace-main :where(.card-head,.detail-head,.card-title,.hero-stats,.detail-actions,.actions){flex-wrap:wrap;min-width:0}
  :root #app .workspace-main :where(.hero-stats span,.business-row,.customer-row,.queue-row,.request-tabs small){min-width:0;white-space:normal;overflow-wrap:anywhere}
  :root #app .workspace-main .request-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  :root #app .workspace-main :where(.phone-panel-hidden){display:none!important}
  :root #app .reports-page>.hero,:root #app .reports-page>.role-requirement{display:none!important}
  :root #app .reports-page .today-strip{padding:12px 14px;gap:7px}
  :root #app .reports-page .today-strip strong{font-size:18px}
  :root #app .reports-page .today-strip p{font-size:12px;line-height:1.6}
  :root #app .reports-page .two-column{display:contents}
  :root #app .reports-page .phone-report-tabs{position:sticky;top:64px;z-index:25;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;background:#eaf1fa;border-radius:13px}
  :root #app .reports-page .phone-report-tabs button{display:flex;align-items:center;justify-content:center;gap:4px;padding:8px 3px;border:0;border-radius:10px;background:transparent;color:#657c96;font-size:13px!important;font-weight:700;cursor:pointer}
  :root #app .reports-page .phone-report-tabs button[aria-pressed=true]{background:#fff;color:#1768d7;box-shadow:0 2px 8px rgba(34,72,117,.08)}
  :root #app .reports-page .phone-report-tabs small{font-size:10px;color:#8394a7;white-space:nowrap}
  :root #app .reports-page :where(.plan-card,.review-card,.history){scroll-margin-top:76px}
  :root #app .reports-page .card-head{margin-bottom:14px}
  :root #app .reports-page .card-head p{display:none}
  :root #app .reports-page .card-head div>span{font-size:12px;line-height:1.6}
  :root #app .reports-page .deadline{font-size:12px}
  :root #app .reports-page :where(.analysis-grid,.row-main,.onsite-row .row-main,.onsite-row>.row-textareas){grid-template-columns:minmax(0,1fr)!important;min-width:0}
  :root #app .reports-page .detail-rows{min-width:0;overflow:visible}
  :root #app .reports-page .detail-editor{padding:12px;min-width:0}
  :root #app .reports-page .detail-row{position:relative;min-width:0!important;width:100%;max-width:100%;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr)!important;gap:10px;padding:12px!important}
  :root #app .reports-page .detail-row>*, :root #app .reports-page .detail-row .row-textareas{grid-column:1!important;min-width:0}
  :root #app .reports-page .detail-row>b{margin-bottom:2px}
  :root #app .reports-page .detail-row .remove-row{position:absolute;right:4px;top:3px;width:44px;margin:0}
  :root #app .reports-page .detail-row :where(input,textarea,select){min-width:0!important;max-width:100%;width:100%;box-sizing:border-box}
  :root #app .reports-page .detail-row :where(label>span,.textarea-field>span){font-size:13px}
  :root #app .reports-page :where(.detail-editor,.analysis-editor,.completion-editor) summary{flex-wrap:wrap;gap:7px}
  :root #app .reports-page :where(.detail-editor,.analysis-editor,.completion-editor) summary strong{font-size:14px}
  :root #app .reports-page .detail-editor summary button{width:100%;margin:0}
  :root #app .reports-page .time-field{min-height:46px!important;width:100%;font-size:14px!important}
  :root #app .reports-page .time-popover{position:fixed!important;top:auto!important;left:12px!important;right:12px!important;bottom:calc(76px + env(safe-area-inset-bottom,0px))!important;transform:none!important;z-index:70!important;width:auto!important;max-width:none;max-height:calc(100dvh - 110px);overflow-y:auto;box-sizing:border-box}
  :root #app .reports-page :where(.time-grid,.quick-time){grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  :root #app .reports-page .plan-item-row{grid-template-columns:22px minmax(0,1fr) 44px}
  :root #app .reports-page .plan-item-row .remove-item{width:44px;height:44px}
  :root #app .reports-page :where(.detail-rule,.moments-fixed p){font-size:12px}
  :root #app .reports-page .moments-fixed{padding:12px}
  :root #app .reports-page .moments-slots{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  :root #app .reports-page .moments-slots span{padding:9px 1px;font-size:10px}
  :root #app .reports-page .extra-visits{flex-wrap:wrap}
  :root #app .reports-page .history-toolbar{grid-template-columns:minmax(0,1fr)}
  :root #app .reports-page .history-quick{flex-wrap:wrap}
  :root #app .reports-page :where(.confirm-layer,.feedback-layer){z-index:1200;padding:16px;box-sizing:border-box}
  :root #app :where(.confirm-card,.feedback-card){width:100%;max-width:430px;max-height:calc(100dvh - 32px);overflow-y:auto;padding:20px;box-sizing:border-box}
  :root #app .reports-page .confirm-actions{display:grid;grid-template-columns:1fr 1fr}
  :root #app .reports-page .visit-line{overflow-wrap:anywhere}
}