/* Profile form isolation.
   The dynamic ui-layout-fixes sheet assigns named grid areas on desktop.
   On mobile those higher-specificity named areas were surviving the old reset,
   creating implicit grid tracks and moving the action row ahead of account fields.
   This sheet fails the profile back to explicit document order on narrow screens. */
.form-screen:has(form[data-form="profile"]){
  overflow-x:hidden;
}
.form-screen:has(form[data-form="profile"]) .form-card{
  min-width:0;
  box-sizing:border-box;
}

@media(max-width:700px){
  .form-screen:has(form[data-form="profile"]){
    display:block!important;
    min-height:100dvh!important;
    padding:10px!important;
    overflow-x:hidden!important;
  }

  .form-screen:has(form[data-form="profile"]) .form-card{
    width:100%!important;
    max-width:100%!important;
    max-height:none!important;
    min-width:0!important;
    overflow:visible!important;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom))!important;
    border-radius:18px!important;
  }

  .form-screen:has(form[data-form="profile"]) .form-card h1{
    font-size:34px!important;
  }

  form[data-form="profile"]{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:none!important;
    grid-auto-flow:row!important;
    grid-auto-rows:auto!important;
    align-items:stretch!important;
    gap:11px!important;
    width:100%!important;
    min-width:0!important;
    margin-top:16px!important;
  }

  /* Critical reset: grid-area also sets row/column. Reset all three because
     the earlier nth-child rules have greater specificity than a generic mobile rule. */
  form[data-form="profile"] > .field,
  form[data-form="profile"] > .form-actions{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    grid-area:auto!important;
    grid-column:1!important;
    grid-row:auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
  }

  /* Make the intended order explicit so no enhancement stylesheet can
     auto-place the action buttons between fields. */
  form[data-form="profile"] > .field:nth-child(1){order:1!important}
  form[data-form="profile"] > .field:nth-child(2){order:2!important}
  form[data-form="profile"] > .field:nth-child(3){order:3!important}
  form[data-form="profile"] > .field:nth-child(4){order:4!important}
  form[data-form="profile"] > .form-actions{order:5!important}

  form[data-form="profile"] > .field{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:5px!important;
    visibility:visible!important;
    opacity:1!important;
    max-height:none!important;
    overflow:visible!important;
  }

  form[data-form="profile"] > .field > label,
  form[data-form="profile"] > .field > input,
  form[data-form="profile"] > .field > textarea{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    float:none!important;
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    margin:0!important;
  }

  form[data-form="profile"] > .field > label{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    white-space:normal!important;
  }

  form[data-form="profile"] > .field > input{
    min-height:48px!important;
    font-size:16px!important;
  }

  form[data-form="profile"] > .field > textarea{
    min-height:92px!important;
    max-height:none!important;
    font-size:16px!important;
  }

  form[data-form="profile"] > .form-actions{
    display:grid!important;
    grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)!important;
    gap:8px!important;
    align-items:stretch!important;
    margin-top:5px!important;
  }

  form[data-form="profile"] > .form-actions > button{
    position:static!important;
    transform:none!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:50px!important;
    margin:0!important;
    padding-left:10px!important;
    padding-right:10px!important;
    white-space:nowrap!important;
    box-sizing:border-box!important;
  }
}