/* Loaded only at <=820px, and scoped again here. Desktop app.css is unchanged. */
@media(max-width:820px){
  #auth-overlay{align-items:flex-start;justify-content:center;overflow-y:auto;overscroll-behavior:contain;
    height:var(--mobile-height,100dvh);top:var(--mobile-top,0px);bottom:auto;padding:20px 16px}
  .auth-card{width:100%;max-width:420px;flex-shrink:0;padding:24px;margin-block:auto}
  .auth-form label{font-size:13px}
  .auth-form input,.auth-form select{min-height:44px;font-size:16px}
  .auth-btn{min-height:44px;font-size:15px}

  header{padding:0 8px;gap:6px;height:56px;align-items:center}
  header>div:first-child{gap:0!important;flex:none}
  header nav,#mobile-menu-btn,header .logo>svg,.nav-history,#nav-back,#nav-forward{display:none!important}
  header .logo{padding:8px 4px}
  header .logo .logo-mark-wrap,header .logo .logo-mark-wrap svg{width:22px!important;height:22px!important}
  .mobile-module-menu-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;
    padding:0;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg2);color:var(--text2);cursor:pointer}
  .mobile-module-menu-btn:hover,.mobile-module-menu-btn[aria-expanded="true"]{background:var(--bg3);color:var(--text);border-color:var(--border2)}
  .mobile-module-menu-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .mobile-module-menu{position:fixed;z-index:1000;top:58px;left:46px;width:min(260px,calc(100vw - 58px));padding:6px;
    border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg2);box-shadow:var(--shadow-md)}
  .mobile-module-menu[hidden]{display:none}
  .mobile-module-menu button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:9px 12px;
    border:0;border-radius:var(--r-sm);background:transparent;color:var(--text2);font:inherit;font-size:var(--ui-action);text-align:left;cursor:pointer}
  .mobile-module-menu button:hover,.mobile-module-menu button:focus-visible{background:var(--bg3);color:var(--text);outline:0}
  .mobile-module-menu button[aria-current="page"]{background:var(--accent-light);color:var(--accent-ink);font-weight:600}
  .mobile-module-menu button:disabled{opacity:.45;cursor:not-allowed}
  header .user-badge{padding:6px;gap:0;min-width:44px;min-height:44px;justify-content:center}
  header .user-badge>div:not(.user-avatar){display:none}
  header .nav-icon-btn,header #global-search-btn,header #notif-bell-btn{width:44px;min-width:44px;height:44px}
  header .nav-icon-btn svg{width:17px;height:17px}
  .nav-timer-compact-icon{display:none}
  :is(.btn,.btn-sm):not(:where(.eln-list *,.side-panel *,.bio-filter-panel *,.pj-sidebar *,#map-sidebar *,.subtab-strip *)){min-height:44px;font-size:14px;padding:9px 12px}
  :is(.icon-btn,.close-btn,.sidebar-plain-icon-btn):not(:where(.eln-list *,.side-panel *,.bio-filter-panel *,.pj-sidebar *,#map-sidebar *,.subtab-strip *)){min-width:44px;width:44px;min-height:44px;height:44px;padding:10px}
  :is(.form-row input:not([type=checkbox]):not([type=radio]),.form-row select,.form-row textarea,
  .form-input,.person-card input,.person-card textarea,.person-card select):not(:where(.eln-list *,.side-panel *,.bio-filter-panel *,.pj-sidebar *,#map-sidebar *,.subtab-strip *)){font-size:var(--ui-input);min-height:44px;max-width:100%}
  :is(.form-row label,.account-hint,.person-hint):not(:where(.eln-list *,.side-panel *,.bio-filter-panel *,.pj-sidebar *,#map-sidebar *,.subtab-strip *)){font-size:12px;line-height:1.5}
  :is(input,textarea,select):not(:where(.eln-list *,.side-panel *,.bio-filter-panel *,.pj-sidebar *,#map-sidebar *,.subtab-strip *)){scroll-margin-block:60px}
  :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select):not(:where(.eln-list *,.side-panel *,.bio-filter-panel *,.pj-sidebar *,#map-sidebar *,.subtab-strip *)){font-size:var(--ui-input)!important}
  .av-grid,.av-grid-compact{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
  .av-opt,.av-grid-compact .av-opt{width:44px;height:44px}
  .form-row :is(input,select,textarea):not(:where(.eln-list *,.side-panel *,.bio-filter-panel *,.pj-sidebar *,#map-sidebar *,.subtab-strip *)){min-width:0}

  #reac-section-add-request{padding:16px!important}
  #reac-section-add-request [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  .pj-metrics{max-width:100%;flex-wrap:wrap}
  .pj-metric{min-width:0;flex:1 1 40%}
  .proj-task-board{grid-template-columns:minmax(0,1fr)}
  .proj-task-col+.proj-task-col{border-left:0;border-top:1px solid var(--border)}
  #equip-detail-bar>div:last-child{flex-wrap:wrap;max-width:100%}
  #admin-tab-users>.admin-section>div:first-child{flex-wrap:wrap}
  #admin-user-search{width:100%!important;font-size:var(--ui-input)!important}
  /* Text-entry controls in compact sidebars still use the mobile input size:
     16px prevents Safari from zooming the whole application on focus. */
  :is(#admin-nav-search,#bio-list-search,#cv-load-input,#eln-search,#equip-search,#searchInput){font-size:var(--ui-input)!important}
  #admin-tab-users h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%}
  #admin-tab-users h3>.btn{margin-left:0!important}

  .role-roster{display:none!important;position:static!important;width:auto!important;height:auto!important;box-shadow:none!important;inset:auto!important}
  .mobile-role-control{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text2);margin:12px 0}
  .mobile-role-control select{width:100%;height:44px;font:inherit;font-size:16px;border:1px solid var(--border2);border-radius:var(--r-sm);background:var(--bg2);color:var(--text);padding:8px}
  .role-workspace{grid-template-columns:minmax(0,1fr);gap:0}
  .role-editor{padding:12px;min-width:0}
  .role-settings{grid-template-columns:minmax(0,1fr);gap:12px}
  .role-settings>label:nth-child(2){grid-column:auto;grid-row:auto}
  .role-settings>label input:not([type=checkbox]){height:44px;font-size:16px}
  .role-settings>label,.role-permission-text small,.role-group-heading h5{font-size:12px}
  .role-permission-grid{grid-template-columns:minmax(0,1fr)}
  .role-permission{min-height:52px;padding:12px;font-size:14px}
  .role-review-setting,.role-enabled-filter{min-height:44px;font-size:13px}
  .role-permission input{margin-top:4px}
  .role-permission-kind{display:none}
  .role-permission-search{max-width:none;min-width:0;width:100%;height:44px}
  .role-permission-search input{font-size:16px}
  .role-editor-footer{gap:8px;padding:12px;margin:12px -12px -12px;flex-wrap:wrap}
  .role-editor-footer>div{width:100%;margin:0;justify-content:flex-end;flex-wrap:wrap}
  .role-page-heading{align-items:flex-start;gap:8px}

  /* Storage maps are position grids, not ordinary data tables. */
  #box-detail-modal .modal>div:first-child{flex-wrap:wrap;gap:12px}
  #box-detail-modal .modal>div:first-child>div:first-child{flex:1 1 100%;min-width:0}
  #box-detail-modal .modal>div:first-child>div:last-child{width:100%;justify-content:flex-end;flex-wrap:wrap}
  #bdm-title,#bdm-subtitle{overflow-wrap:anywhere}
  .box-detail-wrap{max-width:100%;overflow:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
  .box-detail-tbl{table-layout:fixed}
  .box-detail-tbl .bd-cell{width:44px;min-width:44px;max-width:44px;height:44px;font-size:10px;white-space:nowrap}
  .box-detail-tbl .bd-col-lbl{min-width:44px;font-size:11px}
  .box-detail-tbl .bd-row-lbl{font-size:11px}
  #box-detail-modal #move-bar,#box-detail-modal #assign-bar{flex-wrap:wrap;gap:8px}
  #box-detail-modal #mb-label,#box-detail-modal #ab-label{flex-basis:100%!important;overflow-wrap:anywhere}
  #box-detail-modal #mb-box-select{min-width:0;max-width:100%}

  .mobile-table-scroll{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .mobile-scroll-hint{font-size:12px;line-height:1.5;color:var(--text2);padding:6px 2px;margin:0}
  .mobile-table-scroll>table{min-width:600px;max-width:none}
  .mobile-table-scroll :is(th,td){font-size:13px}
  .mobile-account-cards{overflow:visible}
  .mobile-account-cards>.mobile-scroll-hint{display:none}
  .mobile-account-cards table,.mobile-account-cards tbody{display:block;min-width:0!important;width:100%!important}
  .mobile-account-cards thead{display:none}
  .mobile-account-cards tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px;border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:12px;background:var(--bg2)}
  .mobile-account-cards tbody td{display:block;min-width:0;padding:0!important;border:0!important;overflow-wrap:anywhere;white-space:normal!important;font-size:14px}
  .mobile-account-cards tbody td::before{content:attr(data-mobile-label);display:block;font-size:12px;color:var(--text3);margin-bottom:4px;font-weight:400}
  .mobile-account-cards tbody td:first-child,.mobile-account-cards tbody td:nth-child(2),.mobile-account-cards tbody td:last-child{grid-column:1/-1}
  .mobile-account-cards tbody td:last-child{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .mobile-account-cards tbody td:last-child::before{flex-basis:100%}
  .mobile-account-cards tbody td:nth-child(3){grid-column:1/-1}
  .mobile-account-cards :is(input,select){max-width:100%!important;font-size:var(--ui-input)!important;min-height:44px}

  .modal-overlay{padding:12px;align-items:center;justify-content:center;height:var(--mobile-height,100dvh);top:var(--mobile-top,0px);bottom:auto;overflow:hidden}
  .modal{position:relative!important;inset:auto!important;width:100%!important;max-width:100%!important;max-height:calc(var(--mobile-height,100dvh) - 24px)!important;margin:0!important;padding:16px;border-radius:var(--r-lg);overflow-y:auto;scroll-padding-block:60px}
  .modal>.modal-actions:last-child,.modal>.modal-footer:last-child,.modal>div:last-child:has(>.btn){position:sticky;bottom:-16px;background:var(--bg2);padding:12px 0 0;margin-top:16px;border-top:1px solid var(--border);gap:8px;z-index:2;flex-wrap:wrap}
  #configuration-modal>.modal{display:flex;flex-direction:column;overflow:hidden}
  #configuration-modal .modal-body{overflow:auto;min-height:0;padding:0 2px 4px;scroll-padding:16px}
  #configuration-modal .modal-actions{position:static;flex-shrink:0;padding-bottom:0}
  #configuration-modal .modal-actions .btn{flex:none!important}
  #prof-eln-start-row{display:grid;grid-template-columns:100px minmax(0,1fr);gap:8px;align-items:center}
  #prof-eln-start-row label,#prof-eln-start-row>span{grid-column:1/-1;margin:0!important}
  #prof-eln-start-row .btn{margin:0!important;width:auto}
  #configuration-modal .form-row>span{display:block;margin:6px 0 0!important;font-size:12px!important}
  #person-profile-modal{padding:12px}
  #person-profile-modal .person-card{display:flex;flex-direction:column;overflow:hidden;padding:16px;max-height:calc(var(--mobile-height,100dvh) - 24px)!important}
  .person-card-head{gap:10px;margin-bottom:10px;flex-shrink:0}
  .person-card-head h3{font-size:var(--ui-dialog);line-height:1.4}
  .person-card-head p{font-size:13px;line-height:1.4}
  .person-card-head>.av{width:40px!important;height:40px!important;flex:none}
  .person-card>.person-links,.person-tabs{flex-shrink:0}
  .person-tabs{gap:0;margin:10px 0}
  .person-tabs button{font-size:var(--ui-action);min-height:44px;padding:8px;white-space:normal}
  .my-profile-card .person-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .my-profile-card .person-tabs button{min-width:0}
  .person-card-body{overflow:auto;min-height:0;padding-right:2px;scroll-padding:16px}
  .person-form-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .person-link{min-height:44px;font-size:var(--ui-action);padding:8px;max-width:100%;overflow-wrap:anywhere}
  .person-link-row{grid-template-columns:minmax(0,1fr) 44px;gap:8px}
  .person-link-row input:nth-child(2){grid-column:1;grid-row:2}
  .person-link-row button{grid-column:2;grid-row:1/3}
  .person-actions{position:sticky;bottom:0;background:var(--bg2);padding-top:12px;border-top:1px solid var(--border);z-index:1;flex-wrap:wrap}
  .person-stage-head{align-items:flex-start;gap:8px;line-height:1.5}
  .person-stage-head>span{flex-shrink:0}
  .person-result-title{font-size:var(--ui-body);line-height:1.5}
  .person-result-meta{font-size:var(--ui-caption)}
  .person-section h4{font-size:var(--ui-section)}
  .person-disclosure{font-size:var(--ui-reading);line-height:1.6}
  .pj-team-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .pj-member{padding:14px;align-items:flex-start;min-height:96px}
  .pj-member-name{font-size:15px;line-height:1.4;overflow-wrap:anywhere}
  .pj-member-role,.pj-member-meta{font-size:13px;line-height:1.5}
  .pj-member-activity{margin-top:6px}

  .home-grid,.home-grid.home-grid-small,.home-grid.home-grid-medium,.home-grid.home-grid-big{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .home-card{padding:12px;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:10px;min-height:116px}
  .home-card-header{gap:6px!important}
  .home-card-title{font-size:14px;line-height:1.3;overflow-wrap:anywhere}
  .home-card-icon{width:28px;height:28px;flex-shrink:0}
  .home-card-desc{display:none}
  .home-stat-main{font-size:21px;line-height:1.2}
  .home-stat-sub{font-size:12px;line-height:1.3}

  .gs-overlay.show{align-items:flex-start;padding:16px 12px}
  #global-search-modal .gs-modal{position:relative!important;inset:auto!important;margin:0 auto!important;width:100%!important;max-height:calc(var(--mobile-height,100dvh) - 32px)!important;padding:0;overflow:hidden;border-radius:var(--r-lg)}
  .gs-input-row{padding:12px}
  .gs-input-row input{font-size:16px;min-height:32px;min-width:0}
  .gs-results{max-height:calc(var(--mobile-height,100dvh) - 140px)}
  .gs-result-row{min-height:44px;padding:10px 8px;flex-wrap:wrap;gap:4px 8px}
  .gs-label{font-size:14px;max-width:calc(100% - 24px)}
  .gs-sub{font-size:13px;line-height:1.4;flex-basis:100%;padding-left:24px;white-space:normal;color:var(--text2)}
  .gs-cat,.gs-note,.gs-foot{font-size:12px;color:var(--text2)}
  .gs-foot{gap:8px;flex-wrap:wrap;padding:8px 12px}
  .gs-foot-tip{display:none}

  #lcms-modal{padding:0}
  #lcms-modal .lcms-inner{width:100%;max-width:none;max-height:none;height:var(--mobile-height,100dvh);border-radius:0}
  .lc-head{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:12px}
  .lc-title{min-width:0;flex-wrap:wrap;gap:6px;grid-row:1}
  .lc-title h3{font-size:17px;overflow-wrap:anywhere}
  .lc-title .lc-sub{display:none}
  .lc-report-name{grid-column:1/-1;grid-row:2;margin:0;flex:auto}
  .lc-report-name input{width:100%;height:44px;font-size:16px}
  .lc-actions{grid-column:1;grid-row:3;min-width:0;gap:6px}
  .lc-actions .btn{min-height:44px;padding:8px;font-size:13px}
  .lc-actions .icon-btn{min-width:40px;width:40px}
  .lc-metadata>summary{min-height:44px;padding:8px 12px}
  #lc-draft-warning{font-size:12px;line-height:1.4;margin:4px 12px;padding:8px}
  .mobile-lc-settings{flex-shrink:0;border-block:1px solid var(--border);background:var(--bg)}
  .mobile-lc-settings>summary{min-height:44px;padding:12px;font-size:14px;cursor:pointer}
  .mobile-lc-settings .lc-bar{padding:12px;gap:12px}
  .lc-field>span{font-size:12px}
  .lc-field input,.lc-field select{height:44px;font-size:16px}
  .lc-seg button{min-height:44px;font-size:var(--ui-action)}
  .lc-scroll{padding:10px;overscroll-behavior:contain}
  .lc-workspace{display:flex;flex-direction:column;gap:10px}
  .lc-card{padding:12px;width:100%;min-width:0}
  .lc-workbar{gap:8px}
  .lc-auto-controls{gap:6px;align-items:center;width:100%}
  .lc-auto-settings>summary{min-height:44px;padding:12px 0}
  .lc-auto-controls>.btn{font-size:13px;min-height:44px;padding:8px}
  .lc-hint{font-size:var(--ui-caption);line-height:1.4}
  .lc-workbar .lc-hint{display:none}
  .lc-readout{font-size:var(--ui-body);line-height:1.4;gap:4px;margin:8px 0}
  .lc-readout>span:last-child{display:none}
  .lc-chromatograms .lc-c-uv{height:230px}
  .lc-chromatograms .lc-c-ms{height:220px}
  .lc-ms-toolbar{gap:8px;flex-wrap:wrap}
  .lc-review .lc-tablewrap{overflow-x:auto;scrollbar-width:thin}
  .lc-review .lc-tablewrap::before{content:"Scroll sideways for more columns";display:block;font-size:12px;color:var(--text2);padding:6px 0}
  .lc-table{min-width:780px;font-size:var(--ui-body)}
  .lc-table input,.lc-table select{min-height:44px;font-size:16px}
  .lc-window input{height:44px;width:104px}
  .lc-spectra .lc-c-spec{height:220px}

  #bst-panel-bca>div:has(#bst-bca-std-tbody){display:block!important}
  #bst-panel-bca>div:has(#bst-bca-std-tbody)>div{min-width:0!important;max-width:100%;margin-bottom:20px}
  #bst-panel-bca table{min-width:0!important;width:100%!important;table-layout:auto}
  #bst-panel-bca th,#bst-panel-bca td{font-size:12px;padding:6px 3px;white-space:normal}
  #bst-panel-bca input[type=number]{width:88px!important;height:44px;font-size:16px;text-align:right}
  #bst-panel-bca input[type=text]{width:90px!important;height:44px;font-size:16px}
  #bst-panel-bca .mobile-scroll-hint{display:none}
  .wp-stat-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .wp-stat-tiles>div{padding:12px}
  .wp-stat-tiles span,.wp-hm-hint,.wp-bars-h{font-size:12px;line-height:1.5}
  .wp-hm{padding:12px 0;margin:12px 0}
  .wp-hm .pj-heat-month{font-size:11px;height:16px}
  .wp-hm .pj-heat-clip{overflow-x:auto;scrollbar-width:thin;padding:4px}
  .wp-hm .pj-heat-cell{width:12px;height:12px}
  .wp-hm .pj-heat-wd{font-size:10px;height:12px;line-height:12px}
  .wp-hm .pj-heat-grid,.wp-hm .pj-heat-col,.wp-hm .pj-heat-days,.wp-hm .pj-heat-wds{gap:3px}
  #wp-history-tip{font-size:13px;max-width:calc(100vw - 24px)}
  .task-page-doc{padding:20px 16px}
  .task-page-bar{flex-wrap:wrap;gap:8px;padding:8px 12px}
  .task-page-crumb{flex-basis:100%}
  .task-page-actions{flex-wrap:wrap;max-width:100%}
  .task-page-actions .pj-note-icon-btn{width:44px;height:44px;min-width:44px;padding:10px}
  .tp-prop{flex-wrap:wrap}
  .tp-select{min-height:44px;min-width:0;max-width:100%}
}

@media(max-width:430px){
  header .nav-timer{flex:0 0 44px;width:44px;height:44px;margin:0;padding:0;justify-content:center}
  header .nav-timer::before,header .nav-timer .nav-timer-label{display:none}
  header .nav-timer .nav-timer-compact-icon{display:block;width:18px;height:18px}
  .notif-pop.open,.nav-timer-pop:not([hidden]){left:50%!important;right:auto!important;transform:translateX(-50%)!important;
    width:calc(100vw - 24px);box-sizing:border-box;animation:none}
  .notif-pop.open{max-width:392px}
  .nav-timer-pop:not([hidden]){max-width:340px}
  .notif-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center}
  .notif-head-title{grid-column:1;grid-row:1}
  #notif-settings-btn{grid-column:2;grid-row:1;justify-self:end}
  .notif-filter{grid-column:1;grid-row:2;justify-self:start}
  #notif-markall{grid-column:2;grid-row:2;justify-self:end}
}

@media(max-width:820px){
  #detail-panel .dp-header{padding:12px;gap:8px}
  #detail-panel .dp-header-actions{gap:4px}
  #detail-panel .icon-btn,#detail-panel .dp-header-actions>.close-btn{width:44px;height:44px;min-width:44px}
  #detail-panel .lib-detail-tabs{padding:0 8px;gap:0}
  #detail-panel .lib-detail-tabs>[role=tab]{font-size:12px;padding:12px 9px;min-height:44px}
  #detail-panel .lib-detail-panel>.dp-section{padding:14px 12px}
  #detail-panel .dp-struct{height:170px}
  #detail-panel .lib-detail-identity{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px}
  #detail-panel .lib-detail-identity>div:first-child{grid-column:1/-1}
  #detail-panel .lib-detail-descriptors{gap:8px}
  #detail-panel .lib-stock-head{flex-wrap:wrap}
  #detail-panel .lib-stock-title{gap:7px}
  #detail-panel .lib-stock-quantity>input{min-height:44px;width:78px}
  #detail-panel .lib-stock-actions{margin-left:auto}
  #detail-panel .lib-stock-add-note input{min-height:44px}
  #detail-panel .lib-stock-extra>summary{min-height:44px;box-sizing:border-box;padding:12px}
  #detail-panel .lib-detail-file{flex-wrap:wrap;gap:8px}
  #detail-panel .lib-detail-file-actions{margin-left:auto}
  #detail-panel .lib-detail-docking-row{grid-template-columns:minmax(0,1fr) auto 44px;gap:8px}
  #detail-panel .lib-detail-job-status{grid-column:1;grid-row:2}
  #detail-panel .lib-detail-docking-row>.icon-btn{grid-column:3;grid-row:1/3}
  #detail-panel .dp-footer{padding:10px 12px}
}