/* Global mobile layout alignment
   Keep the approved visual design; only normalize outer gutters, gaps and card widths.
   2 mm is approximately 7.56 CSS px at 96 dpi, so the former 16 px mobile gutter becomes 8 px. */
@media (max-width:850px){
  :root{--mobile-gutter:8px;--mobile-gap:8px}

  html,body{width:100%;max-width:100%;overflow-x:hidden}
  main{
    width:100%;
    max-width:100%;
    margin:0 auto;
    padding-left:var(--mobile-gutter)!important;
    padding-right:var(--mobile-gutter)!important;
  }

  /* Every top-level screen block uses the same left/right guide. */
  main>*{max-width:100%;min-width:0}
  .topbar,.hero,.stats,.grid-two,.panel,.list,.detail,.detail-card,
  .toolbar,.calendar-controls,.calendar,.week-calendar,.day-calendar,
  .form-card,.settings-photo,.date-picker{
    max-width:100%;
    min-width:0;
  }

  /* Cards must never use a local width that pushes them outside the common grid. */
  .hero,.panel,.list,.detail-card,.form-card,.day-calendar{
    width:100%;
    margin-left:0;
    margin-right:0;
  }

  /* Home summary cards: equal columns, equal edges, no horizontal overflow. */
  .stats{
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:var(--mobile-gap)!important;
    margin-top:var(--mobile-gap)!important;
    margin-bottom:var(--mobile-gap)!important;
  }
  .stats>.stat{width:100%;min-width:0;margin:0}
  .stats>.stat:last-child{grid-column:1/-1}
  .stat-value{max-width:100%;overflow-wrap:anywhere}

  .grid-two,.detail{
    width:100%;
    gap:var(--mobile-gap)!important;
  }

  /* Form/settings screens follow the same outer edge as home, tasks, materials and calendar. */
  .form-card{max-width:none!important}
  .form-grid{column-gap:var(--mobile-gap)!important}

  /* Calendar controls and content share the same guide without creating a wider canvas. */
  .calendar-controls,.view-switch,.period-nav{max-width:100%;min-width:0}
  .calendar{width:100%}

  /* Lists and detail screens stay inside the viewport even with long content. */
  .list-row,.material-row,.task-row,.task-heading,.schedule-with-person{min-width:0}
  .list-row>*{min-width:0}
  input,select,textarea{max-width:100%;min-width:0}
}