/* Modurel Home's own layout, on the shared tokens (shared/src/ByteNuts.Modurel.UI/wwwroot/css). The Design project has
   no screens for the home, Project settings or invitations yet (MISS-1): these rules only arrange shared components
   and are replaced when it does. */

/* The home */
.hm-group{display:flex;flex-direction:column;gap:12px}
.hm-owner{display:flex;align-items:center;gap:8px;color:var(--text-muted);font:500 13px var(--font-sans)}
.hm-card{display:flex;flex-direction:column;gap:8px;padding:14px 16px;min-width:0}
.hm-card-top{display:flex;align-items:center;gap:8px;min-width:0}
.hm-card-title{flex:1;min-width:0;font:600 14px var(--font-sans);color:var(--text-primary);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-card-title:hover{text-decoration:underline}
.hm-card-title:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-radius:var(--radius-xs)}
.hm-card-products,.hm-badges,.hm-person-access{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hm-level{font-size:12px;color:var(--text-secondary);background:var(--surface-inset);border-radius:var(--radius-sm);padding:2px 6px;white-space:nowrap}

/* Lists */
.hm-strong{font-weight:600;color:var(--text-primary);text-decoration:none}
a.hm-strong:hover{text-decoration:underline}
.hm-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-row-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.hm-person-who{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hm-person-name{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hm-owner-fact{font-size:12px;color:var(--text-muted)}
.hm-grow{flex:1;min-width:0}
.hm-invitation-text{flex:1;min-width:0}
/* Names may be email addresses (an account without a name): long ones break rather than push the layout wide. */
.hm-invitation-text,.hm-card > .sh-muted,.hm-accept-head > div,.hm-accept dd{min-width:0;overflow-wrap:anywhere}

/* Project settings */
.hm-settings{display:flex;flex-direction:column;gap:16px}
.hm-section-body{padding:16px;display:flex;flex-direction:column;gap:12px}
.hm-inline-form{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.hm-inline-badge{margin-left:8px}
.hm-fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.hm-access{display:flex;flex-direction:column;gap:16px}
.hm-access-admin{display:flex;flex-direction:column;gap:4px}
.hm-outcome{display:flex;flex-direction:column;gap:16px}
.hm-managed-note{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.hm-link{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.hm-link .md-field,.hm-link-field{width:100%}
.hm-dialog-alert{margin-top:12px}

/* An invitation */
.hm-accept{display:flex;flex-direction:column}
.hm-accept-head{display:flex;gap:12px;align-items:flex-start;padding:16px 16px 0}
.hm-accept-head .sh-title{font-size:20px}
.hm-accept-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--border-subtle)}
.hm-accept > .hm-dialog-alert{margin:0 16px 16px}
.hm-offer{display:flex;flex-direction:column;gap:2px;margin-top:4px}

@media (max-width:639px){
  .hm-person,.hm-pending,.hm-invitation{flex-wrap:wrap}
  .hm-person-access{width:100%;padding-left:36px}
  /* On phones the actions go below the text instead of squeezing it. */
  .hm-pending .hm-person-who,.hm-invitation-text{flex:1 1 calc(100% - 40px)}
  .hm-row-actions{margin-left:auto}
}