/* Mobile overrides, kept after app.css so component selectors remain effective. */
@media (max-width:700px) {
  .studio aside .sidebar-bottom{display:block;margin-top:12px;padding-top:0;text-align:right}
  .sidebar-bottom .pill,.sidebar-bottom p{display:none}
  .sidebar-bottom a{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;font-size:13px}
  .studio nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;gap:4px}
  .studio nav a{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:13px;white-space:normal;text-align:center}
  .lead dl{grid-template-columns:minmax(0,1fr)}
  .lead dt{font-weight:650}
  .lead dd{margin-bottom:12px}
  .section-title{flex-wrap:wrap}
  .section-title>h2,.section-title>h3{overflow-wrap:anywhere;min-width:0}
  .panel,.editor-layout>*,.step-card,.metrics section{min-width:0}
  .studio .step-card button{min-width:44px;min-height:44px;padding:10px;font-size:13px}
  .step-card .actions{flex-wrap:wrap}
  input:not([type=checkbox]):not([type=radio]):not([type=submit]),select,textarea{font-size:16px}
  .public-card fieldset{min-inline-size:0}
  .public-card .actions button{flex:1 1 120px;min-height:48px}
  .choice{min-height:52px}
  .choice span{min-width:0;overflow-wrap:anywhere}
  .consent{min-height:44px}
  .consent input{width:20px;height:20px}
  .metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .metrics span{overflow-wrap:anywhere}
  .wordmark span{white-space:normal}
}
@media (max-width:360px) {
  .studio aside{padding:16px}
  .content{padding:22px 14px}
  .metrics section{padding:12px 9px}
  .page-title{gap:10px}
  .page-title h1{font-size:26px}
  .public-shell{padding:20px 12px}
  .public-card{padding:24px 18px}
}