/* Shared small-screen layout, loaded after each page's component styles. */
@media(max-width:768px){
  *,*::before,*::after{box-sizing:border-box}
  body{min-width:0}
  main,section,article,form,fieldset,.card,.layout,.story-body{min-width:0;max-width:100%}
  img,video,iframe{max-width:100%}
  input,select,textarea{min-width:0;max-width:100%;font-size:16px!important}
  button,a.btn{touch-action:manipulation}
  .website-story-row{display:grid!important;grid-template-columns:52px minmax(0,1fr);gap:12px!important;padding:14px!important}
  .website-story-copy>div:first-child{white-space:normal!important;overflow-wrap:anywhere}
  .website-story-copy>div:last-child{flex-wrap:wrap}
  .website-story-actions{grid-column:1/-1;display:flex!important;flex-wrap:wrap;width:100%}
  .website-story-actions>div{flex:1;min-width:0}
  .website-story-actions button{width:100%;min-width:0!important;min-height:46px}
  .publication-time{flex-wrap:wrap;gap:6px;overflow-wrap:anywhere}
  .publishing-row>*{min-width:0}
  .publishing-identity strong,.ux-health-detail{overflow-wrap:anywhere}
  .overview-footer .btn{width:100%}
  .table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card-header .card-actions,.card-header>div[style*="display:flex"]{flex-wrap:wrap}
  #web-queue-search{width:100%!important;min-width:0!important}
  #studio-frame{height:calc(100dvh - 170px)!important;min-height:360px!important;border-radius:10px!important}
  #sec-studio{margin:-4px -4px 0}
  dialog{max-width:calc(100vw - 24px)!important;width:calc(100vw - 24px)!important;max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;padding:18px!important}
  dialog .controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  dialog .controls button{min-height:46px;width:100%}
  #chosen-photo{max-height:24dvh}
  #large-image{max-height:65dvh}
  .page-row{flex-wrap:wrap;gap:12px}.page-row>span{min-width:0;overflow-wrap:anywhere;flex:1 1 140px}
  footer{flex-wrap:wrap;gap:12px}
}
@media(max-width:400px){
  .topbar-actions{gap:3px!important}.topbar{gap:4px!important;padding:8px!important}
  .topbar-heading{flex-basis:80px!important}.topbar-title{font-size:15px!important}
  .website-story-actions>.pill{width:100%;text-align:left}
  .website-story-actions>div{flex-basis:100%}
  .publication-count{flex-wrap:wrap}
}
@media(max-width:768px){
  #sec-webqueue>div:first-child>div:first-child{flex-basis:100%!important}
  #sec-webqueue>div:first-child>.btn{flex:1}
  #sec-webqueue>.responsive-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
  #sec-webqueue>.responsive-grid .metric-card{padding:12px 8px!important;min-height:100px}
  #sec-webqueue>.responsive-grid .metric-value{font-size:25px!important}
}
@media(max-width:768px){
  #main>.content:not(:has(.page-section.active)){display:none}
  #main>.page-section{padding:18px 14px calc(90px + env(safe-area-inset-bottom))}
  #main>#sec-studio{padding:8px 8px calc(80px + env(safe-area-inset-bottom));margin:0}
}