/* Settings > Account > Members and Settings > Notifications (js/members-notify.js).
   Rows on the pane's one surface, separated by a hairline; type from the four roles only. Tokens only. */
.mn-list { list-style: none; margin: 0; padding: 0; display: grid; }
.mn-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2) var(--s3); min-width: 0;
  padding: var(--rhythm-rows) 0; }
.mn-row + .mn-row { border-top: 1px solid var(--line); }
.mn-row:first-child { padding-top: 0; }
.mn-who { display: grid; min-width: 0; }
.mn-who strong { font: var(--type-body-strong); color: var(--ink-strong); overflow-wrap: anywhere; }
.mn-who strong small { font: var(--type-body); color: var(--muted); }
.mn-who small { font: var(--type-meta); color: var(--muted); overflow-wrap: anywhere; }
.mn-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.mn-role { width: 8.5rem; }
html[data-look] .mn-actions :is(.btn, select):disabled { opacity: 1; color: var(--muted); -webkit-text-fill-color: var(--muted); }   /* disabled stays readable (4.5:1); the reason sits beside it */
.mn-reason { flex: 1 1 100%; font: var(--type-meta); color: var(--ink); }
html[data-look] .mn-actions .btn:disabled { background: transparent; border: 0; box-shadow: inset 0 0 0 1px var(--line-2); }
/* The locked role is plain text with a lock, not a greyed input. */
.mn-role:has(select:disabled) { width: auto; display: inline-flex; align-items: center; gap: var(--s2); position: relative; }
.mn-role:has(select:disabled)::before { content: ""; width: 0.875rem; height: 0.875rem; flex: none; background: currentColor; color: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat; }
html[data-look] .mn-actions .mn-role select:disabled { appearance: none; -webkit-appearance: none; height: auto; width: auto; padding: 0; background: none; box-shadow: none; border: 0;
  font: var(--type-body-strong); color: var(--ink-strong); -webkit-text-fill-color: var(--ink-strong); }
.mn-role:has(select:disabled) > .i, .mn-role:has(select:disabled) > svg { display: none; }
.mn-fixed { font: var(--type-meta); color: var(--muted); }
.mn-owner-note { margin-top: var(--s3); }
/* "Only you so far": one quiet line under your own row */
.mn-list + .estate--row { margin-top: var(--s3); padding: var(--s3) 0 0; border-top: 1px solid var(--line); }
/* Email, role and the button on one row, bottoms aligned; the error line spans under them. */
.mn-invite { display: grid; grid-template-columns: minmax(0, 1fr) 9rem auto; gap: var(--s2) var(--s3); align-items: end; margin-top: var(--s5);
  padding-top: var(--s5); border-top: 1px solid var(--line); }
.mn-invite .field { margin: 0; }
.mn-error { grid-column: 1 / -1; margin: 0; font: var(--type-meta); color: var(--dk-tx-st-fail, var(--st-fail)); }
.mn-error[hidden] { display: none; }
.mn-roles { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s1); font: var(--type-meta); color: var(--muted); max-width: var(--measure); }
.mn-roles strong { color: var(--ink-strong); font-weight: var(--fw-strong); }

/* Notifications: events down, channels across, every box centred under its column heading. */
.mn-kind { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3); }
.mn-chs { display: grid; grid-auto-flow: column; grid-auto-columns: 4.5rem; justify-items: center; }
.mn-ch { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-width: 2.75rem; min-height: 2.75rem; font: var(--type-meta); color: var(--muted); cursor: pointer; }
.mn-ch > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mn-ch input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--ink-strong); cursor: pointer; }
.mn-ch input:disabled { cursor: not-allowed; }
.mn-head { padding: 0 0 var(--s2); font: var(--type-meta); color: var(--muted); }
.mn-head + .pref { border-top: 1px solid var(--line); }
.mn-desktop { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.mn-desktop .pref-label { flex: 1 1 auto; cursor: default; }
.mn-desktop .pref-label strong { font: var(--type-body-strong); color: var(--ink-strong); }
.mn-desktop .pref-label small { font: var(--type-meta); color: var(--muted); max-width: var(--measure); }
.mn-desktop > .pill, .mn-desktop > .btn { flex: none; }
@media (max-width: 640px) {
  .mn-desktop { flex-wrap: wrap; }
  .mn-head { display: none; }
  .mn-head + .pref { border-top: 0; padding-top: 0; }
  .mn-kind { grid-template-columns: 1fr; }
  .mn-chs { grid-auto-columns: auto; justify-content: start; gap: var(--s4); }
  .mn-ch { justify-content: flex-start; }
  .mn-ch > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .mn-invite { grid-template-columns: 1fr; }
  .mn-invite .btn { justify-self: start; }
}

/* The only owner: role as plain text, and "Transfer ownership to leave" as an inline link. */
.mn-role-text { font: var(--type-body-strong); color: var(--ink-strong); }
.mn-transfer { background: none; border: 0; padding: 0; font: var(--type-body); color: var(--dk-tx-accent, var(--accent)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 2.75rem; }
/* Q2 polish. The footnote under the notification grid sits below a divider; a column whose channel is not available is greyed. */
.mn-grid + .field-note { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); max-width: none; }
.mn-ch:has(input:disabled) { color: var(--muted); cursor: not-allowed; }
.mn-ch input:disabled { opacity: 1; }

/* optional text-message number (Settings > Notifications) */
.mn-phone { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 16px; }
.mn-phone-row { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 260px; justify-content: flex-end; }
.mn-phone-row .input { flex: 1 1 160px; min-width: 0; max-width: 240px; }