/* Mobile-specific guardrails: keep controls on one deliberate line and never
   let a sticky action bar cover form fields or chart headings. */
.short-label{display:none}

@media(max-width:700px){
  body{overflow-x:hidden}
  header{height:auto;min-height:62px;padding:10px 16px;gap:10px;align-items:center}
  header .brand{flex:0 1 auto;min-width:0;gap:7px;white-space:nowrap;font-size:1rem}
  header nav{display:flex;flex:1 1 auto;min-width:0;justify-content:flex-end;align-items:center;flex-wrap:nowrap;gap:6px}
  header nav a,header nav .logout-button{white-space:nowrap;font-size:.82rem}
  header nav form{flex:0 0 auto}
  header .logout-button{padding:6px 8px}

  .chart-card{min-width:0;overflow:hidden}
  .chart-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
  .chart-heading h2{min-width:0;line-height:1.16}
  .chart-pills{flex-wrap:nowrap;justify-content:flex-end;gap:4px}
  .chart-pills button{padding:5px 7px;font-size:.7rem}

  .form-actions{position:static;z-index:auto;margin-top:2px;padding:8px 2px;background:transparent}
}

@media(max-width:350px){
  .chart-heading{grid-template-columns:1fr;align-items:start}
  .chart-pills{width:100%;justify-content:flex-start}
}

@media(max-width:440px){
  header{padding-left:12px;padding-right:12px;gap:7px}
  header nav{gap:5px}
  header nav a,header nav .logout-button{font-size:.78rem}
  .manage-access-link .long-label{display:none}
  .manage-access-link .short-label{display:inline}
  header .logout-button{padding:6px 7px}
}