/* =============================================================================================
   Admin > Members (2.9.9 redesign language): live search, filter chips, the member list (a dense
   table from 768px, stacked cards below), the member drawer (right-hand on desktop, a tall sheet
   on phones) and the action sheets. Inter for UI, Space Grotesk for the title and numerals,
   JetBrains Mono for labels; tokens from sw.css, no new hues.

   Plain CSS, unlayered, linked after sw.css in both hosts (Supwell/wwwroot/index.html and
   Supwell.Web/Components/App.razor), like sw/shoes.css. Every class is mb- prefixed. Sheets portal
   to <body>, so sheet classes never depend on .mb-page. The app is light-only (sw.css has no dark
   tokens), so this is too.
   ============================================================================================= */

:root {
  --mb-muted: var(--sw-ink-muted);
  --mb-danger: #b84c41;            /* the warm red Moderation uses for "Suspended" */
  --mb-danger-wash: rgba(184, 76, 65, .10);
  --mb-row-h: 60px;
}

/* ---- page ------------------------------------------------------------------------------------- */
.mb-page { min-width: 0; padding: 4px 0 40px; font-family: var(--sw-font-ui); color: var(--sw-ink); letter-spacing: var(--sw-tracking); }
.mb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.mb-title { margin: 0; font: 700 20px/24px var(--sw-font-head); letter-spacing: var(--sw-tracking); color: var(--sw-olive-2); }
.mb-sub { margin: 2px 0 0; font: 500 13px/18px var(--sw-font-ui); color: var(--mb-muted); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.mb-sub__dim { color: var(--mb-muted); }
.mb-mono { font-family: var(--sw-font-mono); letter-spacing: 0; }
.mb-muted { color: var(--mb-muted); }
.mb-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- toolbar: search + sort ------------------------------------------------------------------- */
.mb-toolbar { display: flex; gap: 8px; margin-top: 14px; }
.mb-search { position: relative; flex: 1 1 auto; min-width: 0; }
.mb-search__icon { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--mb-muted); pointer-events: none; }
.mb-search__input {
  width: 100%; min-height: 44px; padding: 9px 72px 9px 40px; border: 1px solid var(--sw-line); border-radius: var(--sw-r-md);
  background: var(--sw-card); color: var(--sw-ink); font: 500 16px/1.4 var(--sw-font-ui); letter-spacing: var(--sw-tracking);
  caret-color: var(--sw-olive); -webkit-appearance: none; appearance: none; transition: border-color var(--sw-dur) ease;
}
.mb-search__input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.mb-search__input::placeholder { color: var(--sw-ink-3); }
.mb-search__input:focus { outline: none; border-color: var(--sw-olive); box-shadow: 0 0 0 3px var(--sw-olive-wash); }
@media (min-width: 768px) { .mb-search__input { font-size: 14px; } }
.mb-search__end { position: absolute; right: 6px; top: 50%; translate: 0 -50%; display: flex; align-items: center; gap: 4px; }
.mb-search__spin { --s: 14px; color: var(--mb-muted); }
.mb-search__clear {
  position: relative; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: var(--sw-ground-2); color: var(--sw-ink); cursor: pointer;
}
.mb-search__clear::after { content: ""; position: absolute; inset: -8px; }
.mb-search__clear:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; }

.mb-sort { position: relative; flex: none; display: flex; align-items: center; }
.mb-sort__label { position: absolute; left: 12px; top: 6px; font: 500 10px/1 var(--sw-font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--mb-muted); pointer-events: none; }
.mb-sort__select {
  min-height: 44px; padding: 17px 32px 4px 12px; border: 1px solid var(--sw-line); border-radius: var(--sw-r-md); background: var(--sw-card);
  color: var(--sw-ink); font: 600 13px/1.2 var(--sw-font-ui); letter-spacing: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.mb-sort__select:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; }
.mb-sort__chev { position: absolute; right: 10px; top: 50%; translate: 0 -50%; color: var(--mb-muted); pointer-events: none; }

/* ---- filter chips ----------------------------------------------------------------------------- */
.mb-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 12px; }
.mb-fgroup { display: flex; align-items: center; gap: 6px; }
.mb-fgroup__label { margin-right: 2px; font: 500 11px/1 var(--sw-font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--mb-muted); }
.mb-chip {
  position: relative; display: inline-flex; align-items: center; flex: none; min-height: 30px; padding: 0 11px;
  border: 1px solid var(--sw-line); border-radius: var(--sw-r-pill); background: var(--sw-card); color: var(--sw-ink);
  font: 500 13px/1 var(--sw-font-ui); letter-spacing: 0; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--sw-dur-fast) ease, border-color var(--sw-dur-fast) ease, color var(--sw-dur-fast) ease;
}
.mb-chip::after { content: ""; position: absolute; inset: -7px -2px; }
.mb-chip:hover { border-color: var(--sw-line-2); }
.mb-chip:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; }
.mb-chip.is-on, .mb-chip.is-on:hover { background: var(--sw-olive); border-color: var(--sw-olive); color: var(--sw-on-olive); }
.mb-chip--lg { min-height: 40px; padding: 0 14px; border-radius: var(--sw-r-md); font-size: 14px; }
.mb-filters__clear { margin-left: auto; }

/* Phones: one row that scrolls sideways inside itself (the page never scrolls sideways). */
@media (max-width: 767px) {
  .mb-filters {
    flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--sw-gutter)); padding: 4px var(--sw-gutter) 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; gap: 8px 14px;
  }
  .mb-filters::-webkit-scrollbar { display: none; }
  .mb-filters__clear { margin-left: 0; flex: none; order: -1; }  /* first, so an off-screen filter is never a mystery */
}

/* ---- links, notes, errors --------------------------------------------------------------------- */
.mb-link {
  display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 13px/1.3 var(--sw-font-ui); color: var(--sw-olive); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.mb-link:hover { color: var(--sw-olive); }
.mb-link:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; border-radius: 4px; }
.mb-link--block { margin-top: 12px; }
.mb-err { margin: 6px 0 0; font: 500 13px/1.35 var(--sw-font-ui); color: var(--mb-danger); }
.mb-note { padding: 14px 16px; border-radius: var(--sw-r-card); background: var(--sw-ground-2); font-size: 14px; }
.mb-note--card { margin-top: 16px; padding: 24px 16px; text-align: center; display: grid; justify-items: center; gap: 6px; }
.mb-note__title { margin: 0; font: 600 15px/1.3 var(--sw-font-ui); }
.mb-note__body { margin: 0 0 6px; font-size: 13px; color: var(--mb-muted); }
.mb-emptystate { margin-top: 16px; }

/* ---- the list --------------------------------------------------------------------------------- */
.mb-list {
  container: mblist / inline-size; margin-top: 14px; border-radius: var(--sw-r-card); background: var(--sw-card); box-shadow: var(--sw-shadow-tile);
  transition: opacity var(--sw-dur) ease;
}
.mb-list.is-refreshing { opacity: .72; }

.mb-listhead, .mb-row {
  display: grid; align-items: center; column-gap: 12px; padding: 0 12px 0 16px;
  grid-template-columns: minmax(0, 1fr) 72px 126px 112px 84px 84px 108px 32px;
}
.mb-listhead {
  min-height: 36px; border-bottom: 1px solid var(--sw-line);
  font: 500 10.5px/1 var(--sw-font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--mb-muted);
}
.mb-row {
  position: relative; min-height: var(--mb-row-h); padding-block: 8px; border-top: 1px solid var(--sw-line); cursor: pointer;
  transition: background-color var(--sw-dur-fast) ease;
}
.mb-listhead + .mb-row, .mb-list > .mb-row:first-child { border-top: 0; }
.mb-row:hover { background: rgba(55, 60, 43, .035); }
.mb-row.is-open { background: var(--sw-olive-wash); }
.mb-row:last-child { border-radius: 0 0 var(--sw-r-card) var(--sw-r-card); }
.mb-row--skeleton { display: flex; gap: 12px; cursor: default; }
.mb-skel-lines { flex: 1; }
.mb-row.is-deactivated .mb-who, .mb-row.is-deactivated .mb-avatar { opacity: .55; }

.mb-c { min-width: 0; font-size: 13px; line-height: 1.3; }
.mb-c--who { display: flex; align-items: center; gap: 10px; }
.mb-c--joined, .mb-c--active { color: var(--sw-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-c--activity { display: grid; gap: 2px; }
.mb-c--more { position: relative; display: flex; justify-content: flex-end; }

.mb-avatar {
  --mb-av: 36px; flex: none; width: var(--mb-av); height: var(--mb-av); border-radius: 50%; object-fit: cover; background: var(--sw-line);
}
.mb-avatar--initials {
  display: grid; place-items: center; color: var(--sw-olive-2); background: #e9e4da;
  font: 600 calc(var(--mb-av) * .36)/1 var(--sw-font-ui); letter-spacing: 0;
}
.mb-who { min-width: 0; flex: 1 1 auto; }
.mb-who__top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.mb-name {
  flex: 0 1 auto; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 14px/1.3 var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-ink);
}
.mb-name:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; border-radius: 4px; }
.mb-handle { flex: 0 10 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--mb-muted); letter-spacing: 0; }
.mb-email { margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--mb-muted); letter-spacing: 0; }
.mb-reports {
  flex: none; align-self: center; display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 6px; border-radius: var(--sw-r-pill);
  background: var(--mb-danger-wash); color: var(--mb-danger); font: 700 11px/1 var(--sw-font-ui); letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.mb-act { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-act--sub { font-size: 11.5px; color: var(--mb-muted); }

/* pills */
.mb-pill {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 22px; padding: 0 8px; border-radius: var(--sw-r-pill);
  font: 600 11.5px/1 var(--sw-font-ui); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--sw-ground-2); color: var(--mb-muted);
}
.mb-pill--olive { background: var(--sw-olive); color: var(--sw-on-olive); }
.mb-pill--go { background: var(--sw-go-wash); color: #44691f; }
.mb-pill--amber { background: var(--sw-amber-wash); color: #86660a; }
.mb-pill--danger { background: var(--mb-danger-wash); color: var(--mb-danger); }

.mb-status { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.mb-status--active { color: var(--sw-ink); }
.mb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sw-go); flex: none; }
.mb-status__until { font: 600 11.5px/1.2 var(--sw-font-ui); color: var(--mb-danger); letter-spacing: 0; white-space: nowrap; }
.mb-status.is-stacked { flex-direction: column; align-items: flex-start; gap: 3px; }

/* row ⋯ menu */
.mb-more {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px;
  background: none; color: var(--sw-ink); cursor: pointer;
}
.mb-more::after { content: ""; position: absolute; inset: -6px; }
.mb-more:hover, .mb-more[aria-expanded="true"] { background: var(--sw-ground-2); }
.mb-more:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 1px; }
.mb-menu-scrim { position: fixed; inset: 0; z-index: calc(var(--sw-z-popover) - 1); cursor: default; }
.mb-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: var(--sw-z-popover); min-width: 212px; padding: 6px;
  border-radius: 12px; background: var(--sw-card); box-shadow: var(--sw-shadow-pop); border: 1px solid var(--sw-line);
  animation: mb-menu-in calc(160ms / var(--sw-tempo)) var(--sw-out) backwards; cursor: default;
}
@keyframes mb-menu-in { from { opacity: 0; translate: 0 -4px; } }
.mb-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 8px;
  background: none; color: var(--sw-ink); text-align: left; text-decoration: none; cursor: pointer;
  font: 500 14px/1.2 var(--sw-font-ui); letter-spacing: var(--sw-tracking);
}
.mb-menu__item:hover, .mb-menu__item:focus-visible { background: var(--sw-ground-2); color: var(--sw-ink); outline: none; }
.mb-menu__item .sw-icon { color: var(--mb-muted); }
.mb-menu__sep { display: block; height: 1px; margin: 5px 4px; background: var(--sw-line); }

.mb-more-wrap { display: grid; justify-items: center; gap: 4px; margin-top: 16px; }

/* Narrower desktop content: drop Activity, then Joined, before the member column gets squeezed. */
@container mblist (max-width: 1000px) {
  .mb-listhead, .mb-row { grid-template-columns: minmax(0, 1fr) 72px 126px 108px 84px 84px 32px; }
  .mb-c--activity { display: none; }
}
@container mblist (max-width: 780px) {
  .mb-listhead, .mb-row { grid-template-columns: minmax(0, 1fr) 68px 120px 108px 80px 32px; }
  .mb-c--joined { display: none; }
}

/* ---- phones: stacked cards -------------------------------------------------------------------- */
/* who + ⋯ on the first line; role, billing and status pills under the name; then one meta line
   (joined, last active, runs). The desktop date and activity cells hide; .mb-c--meta shows. */
.mb-c--meta { display: none; }
@media (max-width: 767px) {
  .mb-listhead { display: none; }
  .mb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 8px 12px 14px; }
  .mb-row > .mb-c { order: 2; }
  .mb-row > .mb-c--who { order: 0; flex: 1 1 calc(100% - 44px); }
  .mb-row > .mb-c--more { order: 1; flex: none; align-self: flex-start; }
  .mb-row .mb-c--role { margin-left: 50px; }
  .mb-row .mb-c--joined, .mb-row .mb-c--active, .mb-row .mb-c--activity { display: none; }
  .mb-row .mb-status.is-stacked { flex-direction: row; align-items: center; gap: 6px; }
  .mb-row .mb-c--meta {
    display: block; flex: 1 1 100%; padding-left: 50px; font-size: 12px; color: var(--mb-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0;
  }
  .mb-avatar { --mb-av: 40px; }
  .mb-row--skeleton { padding: 14px; }
}

/* ---- drawer ----------------------------------------------------------------------------------- */
.sw-sheet.mb-drawer .mb-drawer__body { padding: 4px 16px 24px; }
@media (min-width: 1024px) {
  .sw-sheet-root:has(> .mb-drawer) { align-items: stretch; justify-content: flex-end; padding: 0; }
  .sw-sheet.mb-drawer {
    width: 560px; max-width: 560px; height: 100vh; height: 100dvh; max-height: none; border-radius: 0;
    box-shadow: -12px 0 40px rgba(0, 0, 0, .14); animation: mb-drawer-in calc(300ms / var(--sw-tempo)) var(--sw-glide) backwards;
  }
  .sw-sheet.mb-drawer .sw-sheet__head { padding-top: 6px; }
  .sw-sheet.mb-drawer .mb-drawer__body { padding: 8px 24px 32px; }
}
@keyframes mb-drawer-in { from { translate: 48px 0; opacity: 0; } }

.mb-d__head { display: flex; gap: 14px; align-items: flex-start; padding-top: 6px; }
.mb-d__who { min-width: 0; flex: 1 1 auto; }
.mb-d__name { margin: 0; font: 700 20px/1.2 var(--sw-font-head); letter-spacing: var(--sw-tracking); color: var(--sw-ink); overflow-wrap: anywhere; }
.mb-d__sub { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 13px; color: var(--mb-muted); letter-spacing: 0; }
.mb-d__email { display: flex; align-items: center; gap: 4px; min-width: 0; margin-top: 4px; font-size: 14px; color: var(--sw-ink); letter-spacing: 0; }
.mb-copy {
  position: relative; flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--mb-muted); cursor: pointer;
}
.mb-copy::after { content: ""; position: absolute; inset: -8px; }
.mb-copy:hover { background: var(--sw-ground-2); color: var(--sw-ink); }
.mb-copy:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 1px; }
.mb-d__pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.mb-d__pills .mb-status.is-stacked { flex-direction: row; }
.mb-d__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mb-d__actions .sw-btn { font-size: 13px; padding: 0 12px; }
.mb-d__tabs { margin-top: 18px; }
.mb-d__tabs .sw-seg__opt { font-size: 12.5px; padding: 0 6px; }
.mb-d__panel { margin-top: 16px; min-height: 120px; }
.mb-d__loading { display: grid; gap: 4px; }

.mb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; border-radius: 12px; background: var(--sw-line); border: 1px solid var(--sw-line); }
.mb-stats > div { padding: 10px 12px; background: var(--sw-card); }
.mb-stats dt { font: 500 10.5px/1.2 var(--sw-font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--mb-muted); }
.mb-stats dd { margin: 4px 0 0; font: 600 20px/1.1 var(--sw-font-head); font-variant-numeric: tabular-nums; color: var(--sw-ink); }
.mb-stats dd.is-warn { color: var(--mb-danger); }
.mb-kv { margin: 16px 0 0; display: grid; }
.mb-kv > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--sw-line); }
.mb-kv > div:first-child { border-top: 0; }
.mb-kv dt { font-size: 13px; color: var(--mb-muted); }
.mb-kv dd { margin: 0; font-size: 14px; color: var(--sw-ink); overflow-wrap: anywhere; }
.mb-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mb-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 1px solid var(--sw-line); border-radius: var(--sw-r-pill); font-size: 12.5px; }
.mb-bio { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--sw-ground-2); font-size: 14px; line-height: 1.5; white-space: pre-line; }

.mb-h { margin: 22px 0 8px; font: 500 11px/1.2 var(--sw-font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--mb-muted); }
.mb-empty { margin: 0; padding: 14px; border-radius: 12px; background: var(--sw-ground-2); font-size: 13px; color: var(--mb-muted); text-align: center; }
.mb-items { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.mb-item { padding: 12px 14px; border: 1px solid var(--sw-line); border-radius: 12px; }
.mb-item__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mb-item__title { min-width: 0; font: 600 14px/1.3 var(--sw-font-ui); overflow-wrap: anywhere; }
.mb-item__meta { margin: 4px 0 0; font-size: 12.5px; color: var(--mb-muted); letter-spacing: 0; overflow-wrap: anywhere; }
.mb-item__body { margin: 6px 0 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.mb-billcard { display: grid; gap: 6px; justify-items: start; padding: 14px; border-radius: 12px; background: var(--sw-ground-2); }
.mb-billcard__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mb-billcard__plan { font: 600 14px/1.3 var(--sw-font-ui); }
.mb-billcard p { margin: 0; font-size: 13px; }

.mb-danger { margin-top: 28px; padding: 14px; border: 1px solid rgba(184, 76, 65, .35); border-radius: 14px; }
.mb-danger__title { margin: 0 0 4px; font: 500 11px/1.2 var(--sw-font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--mb-danger); }
.mb-danger__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--sw-line); }
.mb-danger__row:first-of-type { border-top: 0; }
.mb-danger__name { margin: 0; font: 600 14px/1.3 var(--sw-font-ui); }
.mb-danger__desc { margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--mb-muted); letter-spacing: 0; }
.mb-dbtn {
  flex: none; min-height: 36px; padding: 0 14px; border: 1px solid rgba(184, 76, 65, .45); border-radius: var(--sw-r-md); background: var(--sw-card);
  color: var(--mb-danger); font: 600 13px/1 var(--sw-font-ui); cursor: pointer;
}
.mb-dbtn:hover:not(:disabled) { background: var(--mb-danger-wash); }
.mb-dbtn:focus-visible { outline: 2px solid var(--mb-danger); outline-offset: 2px; }
.mb-dbtn:disabled { opacity: .45; cursor: default; }

/* ---- action sheets ---------------------------------------------------------------------------- */
.mb-target { display: flex; align-items: center; gap: 12px; padding: 4px 0 14px; border-bottom: 1px solid var(--sw-line); margin-bottom: 14px; }
.mb-target__name { margin: 0; font: 600 15px/1.3 var(--sw-font-ui); }
.mb-target__sub { margin: 2px 0 0; font-size: 13px; color: var(--mb-muted); }
.mb-field { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.mb-field--left { text-align: left; margin-top: 12px; }
.mb-field__label { padding: 0; font: 600 13px/1.3 var(--sw-font-ui); color: var(--sw-ink); }
.mb-req, .mb-opt { margin-left: 4px; font: 500 10.5px/1 var(--sw-font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--mb-muted); }
.mb-durations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mb-durations .mb-chip { justify-content: center; padding: 0 6px; }
.mb-textarea { min-height: 84px; font-family: var(--sw-font-ui); }
.mb-hint { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--mb-muted); letter-spacing: 0; }
.mb-hint--row { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.mb-hint--row .mb-err { margin: 0; }
.mb-hint--lead { margin-bottom: 14px; font-size: 13.5px; }
.mb-switchrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border-radius: 12px; background: var(--sw-ground-2); }
.mb-switchrow__title { margin: 0 0 2px; font: 600 14px/1.3 var(--sw-font-ui); }
.mb-warn { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--mb-danger-wash); color: #8e3a31; font-size: 13.5px; line-height: 1.45; }

.mb-options { display: grid; gap: 8px; margin-bottom: 12px; }
.mb-option {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--sw-line); border-radius: 12px;
  background: var(--sw-card); text-align: left; cursor: pointer; color: var(--sw-ink); transition: border-color var(--sw-dur-fast) ease, background-color var(--sw-dur-fast) ease;
}
.mb-option.is-on { border-color: var(--sw-olive); background: var(--sw-olive-wash); }
.mb-option:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; }
.mb-option:disabled { opacity: .45; cursor: not-allowed; }
.mb-option__radio { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--sw-line-3); background: var(--sw-card); }
.mb-option.is-on .mb-option__radio { border: 5px solid var(--sw-olive); }
.mb-option__text { display: grid; gap: 2px; min-width: 0; }
.mb-option__title { font: 600 14px/1.3 var(--sw-font-ui); }
.mb-option__desc { font-size: 12.5px; line-height: 1.4; color: var(--mb-muted); }

@media (prefers-reduced-motion: reduce) {
  .mb-menu, .sw-sheet.mb-drawer { animation: none; }
}