/* Settings use compact, readable groups rather than stretching each control
   across the desktop. The APK's small-screen layout remains unchanged. */
@media (min-width:751px) {
  /* Follow the same .app-shell width as Início, Categorias and Agenda. */
  .settings-list{display:block;width:100%;max-width:none;margin-inline:0}
  .settings-list>.setting-card{min-width:0;margin:0 0 16px;overflow-wrap:anywhere}
  .settings-list>.setting-card h3{align-items:flex-start;line-height:1.5}
  .settings-list>.setting-card h3>svg{margin-top:2px}
  .settings-list>.setting-card p{max-width:72ch}
  .settings-list .btn{max-width:100%;white-space:normal;text-align:center}
  .settings-list .row{min-width:0;flex-wrap:wrap}
  .settings-list .row.wrap{gap:9px}
  .settings-list .field{max-width:100%}
  .settings-list .check-label{align-items:flex-start}
  .settings-list .check-label>input{flex:0 0 17px;margin-top:2px}
  .settings-list #readingPace{width:160px;max-width:100%}
  .settings-list .drive-settings-entry .btn{width:auto}
  .settings-list .drive-connection{padding-top:12px}
  .settings-list .drive-connection>div{max-width:100%}
  .settings-list #browserOfflineStatus+.row{margin-bottom:12px}
  .settings-list .setting-card>.notice:last-child{margin-bottom:0}

  /* These dialogs belong to Settings; other editor sheets retain their own
     dimensions. Long help, backup history and licenses scroll inside them. */
  .modal:has(.drive-panel),.modal:has(.drive-intro){max-width:600px}
  .modal:has(.drive-review){max-width:700px}
  .modal:has(.support-screen){max-width:800px}
  .modal:has(#voiceName){max-width:580px}
  .modal:has(.drive-panel) .modal-head h2,
  .modal:has(.drive-review) .modal-head h2,
  .modal:has(.support-screen) .modal-head h2,
  .modal:has(#voiceName) .modal-head h2{min-width:0;overflow-wrap:anywhere}
  .modal:has(.drive-panel) .modal-footer,
  .modal:has(.drive-review) .modal-footer,
  .modal:has(.support-screen) .modal-footer,
  .modal:has(#voiceName) .modal-footer{flex-wrap:wrap}
  .modal:has(.drive-panel) .modal-footer .btn,
  .modal:has(.drive-review) .modal-footer .btn,
  .modal:has(.support-screen) .modal-footer .btn,
  .modal:has(#voiceName) .modal-footer .btn{white-space:normal}
  .drive-panel .drive-frequency{max-width:310px}
  .drive-panel .drive-times p{align-items:baseline}
  .drive-panel .drive-times strong{text-align:right;overflow-wrap:anywhere}
  .drive-panel .drive-private,.drive-review .drive-private{max-width:72ch}
  .support-screen .guide-topic{min-width:0}
  .support-screen .license-link>span{min-width:0;overflow-wrap:anywhere}
  .modal:has(#voiceName) #voiceName{min-width:0;max-width:100%}
}

@media (min-width:1024px) {
  /* Flow down each column in the same order as keyboard navigation. Keeping
     each card intact avoids the empty grid rows caused by unequal card sizes. */
  .settings-list{columns:2;column-gap:clamp(16px,1.5vw,24px)}
  .settings-list>.setting-card{display:flow-root;width:100%;break-inside:avoid-column;margin-bottom:18px}
}

@media (min-width:1100px) {
  .support-screen .support-topic-list{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .support-screen .support-topic-list>.guide-topic[open]{grid-column:1/-1}
}

@media (min-width:1600px) {
  /* Three comfortably sized columns on wide desktops, with no unused margins. */
  .settings-list{columns:3}
}