/* =====================================================================
   MailFlow product tour – simulator-only layout rules
   Loaded AFTER /css/app.css on /tour/play only. The real app never loads it.
   ===================================================================== */
/* The real app's body is a flex row (sidebar + main); in the tour #root takes that role. */
.mf-sim .main{flex:1;min-width:0}
.mf-sim .sidebar{z-index:5}
.mf-sim a[data-act],.mf-sim button[data-act]{cursor:pointer}
/* Phones: the real app has no mobile layout, so the simulated sidebar collapses to icons. */
@media (max-width:760px){
  .mf-sim .sidebar{width:64px;padding:16px 8px}
  .mf-sim .sidebar .brand img{width:44px;height:auto;object-fit:cover;object-position:left}
  .mf-sim .sidebar nav a{justify-content:center;padding:11px 0}
  .mf-sim .sidebar nav a span,.mf-sim .sidebar .me .who{display:none}
  .mf-sim .sidebar .me{flex-direction:column;gap:8px}
  .mf-sim .main{padding:18px 14px 120px}
  .mf-sim .page-head{flex-wrap:wrap;gap:10px}
  .mf-sim .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mf-sim .table{display:block;overflow-x:auto;white-space:nowrap}
}