/* Shared browser layouts. Display boards keep their independent screen layout. */
body:not(.screen){-webkit-text-size-adjust:100%}
body:not(.screen) .container{width:100%;min-width:0}
body:not(.screen) .topbar{min-height:82px;height:auto;gap:24px;padding-block:16px}
body:not(.screen) .topbar>.brand{min-width:0;flex:1}
body:not(.screen) .topbar>.account{flex-wrap:wrap;justify-content:flex-end;min-width:0;max-width:55%;gap:12px 18px}
body:not(.screen) .account>span{overflow-wrap:anywhere;min-width:0}
body:not(.screen) .account>form{flex:none;margin:0}
body:not(.screen) .card,body:not(.screen) .mini-card,
body:not(.screen) .page-title>*,body:not(.screen) .event-heading>*,
body:not(.screen) .form-grid>*,body:not(.screen) .split>*{min-width:0;max-width:100%}
body:not(.screen) .row>*{min-width:0;max-width:100%}
body:not(.screen) h1,body:not(.screen) h2,body:not(.screen) h3,
body:not(.screen) .alert,body:not(.screen) .help,body:not(.screen) .job-meta{overflow-wrap:anywhere}
body:not(.screen) .split{grid-template-columns:repeat(2,minmax(0,1fr))}
body:not(.screen) .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
body:not(.screen) .event-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}
body:not(.screen) .inline-form{flex-wrap:wrap;align-items:flex-end;gap:12px}
body:not(.screen) .inline-form>label{flex:1 1 180px;margin:0}
body:not(.screen) .inline-form>input{flex:1 1 220px;min-width:0}
body:not(.screen) .inline-form>button{flex:0 0 auto;min-height:44px}
body:not(.screen) input,body:not(.screen) select,body:not(.screen) textarea{min-width:0;max-width:100%}
body:not(.screen) .tabs{max-width:100%;min-width:0;overscroll-behavior-x:contain;scroll-padding-inline:12px;-webkit-overflow-scrolling:touch}
body:not(.screen) .tabs>a{display:flex;align-items:center;justify-content:center;min-height:44px;flex:none}
body:not(.screen) .account-tabs{flex-wrap:wrap;gap:6px;overflow:visible}
body:not(.screen) .table-wrap{width:100%;max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
body:not(.screen) .table-wrap td{overflow-wrap:anywhere}
body:not(.screen) .table-wrap td.row{display:table-cell}
body:not(.screen) .table-wrap td.row>a{display:inline-flex;align-items:center;min-height:44px;margin-right:14px}
.table-scroll-hint{color:var(--muted);font-size:12px;margin:0 0 10px;line-height:1.6}
.table-scroll-hint[hidden]{display:none!important}
body:not(.screen) .table-wrap:focus-visible{outline:3px solid #7aa6de;outline-offset:3px;border-radius:6px}
body:not(.screen) a:focus-visible,body:not(.screen) button:focus-visible,
body:not(.screen) summary:focus-visible{outline:3px solid #7aa6de;outline-offset:3px}
body:not(.screen) button:disabled{cursor:not-allowed}
body:not(.screen) .pagination{gap:18px;align-items:center;flex-wrap:wrap}
body:not(.screen) .pagination>a{display:inline-flex;align-items:center;min-height:44px}
body:not(.screen) .school-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
body:not(.screen) .job-title{flex-wrap:wrap;gap:8px 20px}
body:not(.screen) .job-errors{overflow-wrap:anywhere}
body:not(.screen) .error-card{margin-block:clamp(20px,5vh,60px)}
@media(max-width:1100px){
  body:not(.screen) .container{padding-inline:28px}
  body:not(.screen) .topbar{padding-inline:28px}
  body:not(.screen) .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  body:not(.screen) .form-grid.three,body:not(.screen) .form-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  body:not(.screen) .split{grid-template-columns:1fr}
  body:not(.screen) .school-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:800px){
  body:not(.screen) .topbar{gap:14px}
  body:not(.screen) .topbar .brand{font-size:16px}
  body:not(.screen) .brand-sub{display:none}
  body:not(.screen) .topbar .brandmark.has-logo{width:128px;height:32px}
  body:not(.screen) .table-wrap table{min-width:640px}
  body:not(.screen) .table-wrap input:not([type=checkbox]):not([type=radio]){min-width:150px}
  body:not(.screen) .login-layout{grid-template-columns:1fr;min-height:0;max-width:560px;margin:24px auto}
  body:not(.screen) .login-intro{display:none}
  body:not(.screen) .login-card{width:100%;max-width:none;margin:0}
}
@media(max-width:700px){
  body:not(.screen) .container{padding:20px max(16px,env(safe-area-inset-left)) calc(32px + env(safe-area-inset-bottom));padding-right:max(16px,env(safe-area-inset-right))}
  body:not(.screen) .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:76px;padding:14px max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));gap:10px 12px}
  body:not(.screen) .topbar>.brand{width:auto;gap:10px;line-height:1.5}
  body:not(.screen) .topbar .brand-copy{min-width:0;overflow-wrap:anywhere;font-size:15px}
  body:not(.screen) .topbar .brandmark{width:38px;height:38px;font-size:17px;border-radius:10px}
  body:not(.screen) .topbar .brandmark.has-logo{width:104px;height:28px;border-radius:0}
  body:not(.screen) .topbar>.account{width:auto;max-width:none;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px}
  body.has-session:not(.screen) .topbar>.account{grid-column:1/-1;justify-content:flex-start;padding-top:8px;border-top:1px solid var(--line)}
  body:not(.screen) .topbar .account>span{flex:1;font-size:12px}
  body:not(.screen) .topbar .account>a:not(.button){display:inline-flex;align-items:center;min-height:44px}
  body:not(.screen) .topbar .account>.button{font-size:12px;padding-inline:10px}
  body:not(.screen) button,body:not(.screen) .button{min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.5}
  body:not(.screen) input,body:not(.screen) select,body:not(.screen) textarea{font-size:16px}
  body:not(.screen) input:not([type=checkbox]):not([type=radio]):not([type=range]),body:not(.screen) select{min-height:46px}
  body:not(.screen) input[type=file]{padding:9px;font-size:14px;overflow:hidden}
  body:not(.screen) input[type=file]::file-selector-button{max-width:100%;margin-right:8px;padding:5px 8px}
  body:not(.screen) .card,body:not(.screen) .mini-card{padding:20px 16px;overflow-wrap:anywhere}
  body:not(.screen) h1{font-size:26px}
  body:not(.screen) .page-title,body:not(.screen) .event-heading{align-items:stretch;gap:14px}
  body:not(.screen) .page-title>.row{width:100%;gap:8px}
  body:not(.screen) .page-title>.row>.button{flex:1 1 120px}
  body:not(.screen) .page-title>.button{width:100%}
  body:not(.screen) .event-heading>.pill{align-self:flex-start}
  body:not(.screen) .account-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding-bottom:14px;margin-bottom:22px}
  body:not(.screen) .account-tabs a{min-width:0;padding:8px 5px;font-size:13px;white-space:normal;text-align:center;overflow-wrap:anywhere}
  body:not(.screen) .event-grid{gap:16px}
  body:not(.screen) .event-card h2{font-size:21px}
  body:not(.screen) .event-counts{gap:24px;flex-wrap:wrap}
  body:not(.screen) .form-grid,body:not(.screen) .form-grid.three,body:not(.screen) .form-grid.four,body:not(.screen) .school-grid{grid-template-columns:1fr}
  body:not(.screen) .inline-form{gap:10px}
  body:not(.screen) .inline-form>label{flex-basis:100%}
  body:not(.screen) .inline-form>input{flex:1 1 160px;max-width:none}
  body:not(.screen) .check{min-height:44px;align-items:flex-start;line-height:1.7}
  body:not(.screen) .check input{margin-top:4px}
  body:not(.screen) .table-wrap table{min-width:580px}
  body:not(.screen) .table-wrap td,body:not(.screen) .table-wrap th{padding:12px;font-size:13px}
  body:not(.screen) .empty{padding:28px 16px}
  body:not(.screen) .settings-actions{align-items:stretch;gap:12px}
  body:not(.screen) .settings-actions button,body:not(.screen) .poster-editor-body button,body:not(.screen) .poster-add form>button{width:100%}
  body:not(.screen) .settings-actions>a{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere}
  body:not(.screen) .poster-editor-heading{align-items:flex-start}
  body:not(.screen) .poster-editor-heading>.pill{flex:none;max-width:45%}
  body:not(.screen) .poster-editor-body,body:not(.screen) .poster-editor-body>*,body:not(.screen) .wechat-settings form{min-width:0}
  body:not(.screen) .pdf-preview{height:65vh;height:65dvh;min-height:320px}
  body:not(.screen) #toast{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));max-width:none;overflow-wrap:anywhere}
}
@media(max-width:380px){
  body:not(.screen) .account-tabs{gap:4px}
  body:not(.screen) .account-tabs a{font-size:12px}
  body:not(.screen) .topbar .account .small{padding-inline:8px}
}
@media(prefers-reduced-motion:reduce){
  body:not(.screen) .event-card{transition:none}
}