/* membership.css — the Membership department (spaces.css precedent: `mb-`
   prefix, DS tokens only, no raw color literals). The member roll is a real
   <table> because it IS tabular: one member per row, the same five facts about
   each. A div grid would have to fake the row and column headers a screen reader
   gets here for free. */

.mb-shell { border:1px solid var(--cx-border); border-radius:var(--cx-radius-lg); background:var(--cx-surface-1); padding:var(--cx-s5); }
.mb-head { margin-bottom:var(--cx-s4); }
.mb-head h2 { margin:0; font-size:20px; font-weight:650; }
.mb-head p { margin:4px 0 0; color:var(--cx-text-muted); font-size:13px; max-width:44rem; }

.mb-empty, .mb-note { color:var(--cx-text-muted); font-size:13px; }
.mb-note { margin-top:var(--cx-s3); }
.mb-error { border:1px solid var(--cx-warn); border-radius:var(--cx-radius-md); background:var(--cx-warn-wash); color:var(--cx-text); padding:var(--cx-s3); font-size:13px; }

/* ---- the roll's filters -------------------------------------------------- */
/* Chips, not tabs: they re-slice the same list. aria-pressed carries the
   active state; the count keeps every chip honest about what it hides. */
.mb-filters { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--cx-s3); }
.mb-filter { border:1px solid var(--cx-line-2); border-radius:999px; background:none; color:var(--cx-text-muted); font:inherit; font-size:12px; padding:4px 10px; cursor:pointer; min-height:32px; }
.mb-filter[aria-pressed="true"] { color:var(--cx-accent); border-color:var(--cx-accent); font-weight:650; }
.mb-filter:focus-visible { outline:2px solid var(--cx-accent); outline-offset:2px; }
.mb-filter__count { color:var(--cx-text-muted); font-variant-numeric:tabular-nums; }

/* ---- the roll ---------------------------------------------------------- */
.mb-table { width:100%; border-collapse:collapse; font-size:13px; }
.mb-caption { caption-side:top; text-align:left; color:var(--cx-text-muted); font-size:12px; padding-bottom:var(--cx-s2); }
.mb-table th { text-align:left; font-weight:650; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--cx-text-muted); padding:6px 10px 6px 0; border-bottom:1px solid var(--cx-border); white-space:nowrap; }
.mb-table td { padding:10px 10px 10px 0; border-bottom:1px solid var(--cx-line-2); vertical-align:top; }
.mb-table tr:last-child td { border-bottom:0; }
.mb-table td small { display:block; color:var(--cx-text-muted); font-size:11px; margin-top:2px; }

.mb-chip { display:inline-block; margin-left:6px; font-size:10px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--cx-text-muted); border:1px solid var(--cx-line-2); border-radius:3px; padding:1px 4px; }

.mb-state { display:inline-block; font-size:11px; font-weight:650; padding:2px 7px; border-radius:999px; border:1px solid var(--cx-line-2); color:var(--cx-text-muted); }
.mb-state--active { color:var(--cx-accent); border-color:var(--cx-accent); }
.mb-state--lapsed { color:var(--cx-warn); border-color:var(--cx-warn); }

/* Three renewal tones. Only overdue and due are allowed to raise their voice —
   if every row is coloured, none of them is a signal. */
.mb-renew { white-space:nowrap; font-variant-numeric:tabular-nums; }
.mb-renew--bad { color:var(--cx-warn); font-weight:650; }
.mb-renew--warn { font-weight:650; }
.mb-renew--calm { color:var(--cx-text-muted); }

/* ---- the rate card ------------------------------------------------------ */
.mb-tiers { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:var(--cx-s3); }
.mb-tier { border:1px solid var(--cx-border); border-radius:var(--cx-radius-md); padding:var(--cx-s4); background:var(--cx-surface-2); }
.mb-tier h3 { margin:0; font-size:15px; font-weight:650; }
.mb-tier__rate { margin:2px 0 0; font-size:18px; font-weight:650; color:var(--cx-accent); }
/* A tier with no published rate must not look like a cheaper one. It is set in
   the muted ink at body size so "Quoted at signing" reads as a sentence, which
   is what canon says it is, rather than as a price that failed to load. */
.mb-tier--private .mb-tier__rate { font-size:14px; font-weight:600; color:var(--cx-text-muted); }
.mb-tier__blurb { margin:var(--cx-s3) 0 0; font-size:12px; color:var(--cx-text-muted); }
.mb-tier__facts { margin:var(--cx-s3) 0 0; display:grid; gap:4px; }
.mb-tier__facts > div { display:flex; justify-content:space-between; gap:var(--cx-s2); font-size:12px; }
.mb-tier__facts dt { color:var(--cx-text-muted); margin:0; }
.mb-tier__facts dd { margin:0; font-weight:650; }
.mb-tier__note { margin:var(--cx-s3) 0 0; font-size:11px; color:var(--cx-text-muted); }

/* ---- row → panel -------------------------------------------------------- */
/* The name IS the affordance: a real button, styled as the text it already
   was, so the row gains a detail view without gaining chrome. */
.mb-rowlink { border:0; background:none; padding:0; margin:0; font:inherit; color:inherit; text-align:left; cursor:pointer; }
.mb-rowlink:hover strong, .mb-rowlink:focus-visible strong { text-decoration:underline; text-underline-offset:2px; }
.mb-rowlink:focus-visible { outline:2px solid var(--cx-accent); outline-offset:2px; border-radius:2px; }

/* ---- the detail panel ---------------------------------------------------- */
.mb-panel { display:grid; gap:var(--cx-s4); font-size:13px; }
.mb-panel__chips { margin:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.mb-panel__chips .mb-chip { margin-left:0; }
.mb-panel__facts { margin:0; display:grid; gap:6px; }
.mb-panel__facts > div { display:flex; justify-content:space-between; gap:var(--cx-s2); }
.mb-panel__facts dt { color:var(--cx-text-muted); margin:0; }
.mb-panel__facts dd { margin:0; font-weight:650; text-align:right; }
.mb-panel__facts dd small { display:block; color:var(--cx-text-muted); font-weight:400; font-size:11px; }
.mb-panel__rate { margin:0; font-size:18px; font-weight:650; color:var(--cx-accent); }
.mb-panel__rate--private { font-size:14px; font-weight:600; color:var(--cx-text-muted); }
.mb-panel__notes { margin:0; color:var(--cx-text-muted); }
.mb-panel__xread h3 { margin:0 0 var(--cx-s2); font-size:11px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--cx-text-muted); }
.mb-panel__list { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.mb-panel__list li { display:flex; justify-content:space-between; gap:var(--cx-s2); border-bottom:1px solid var(--cx-line-2); padding-bottom:6px; }
.mb-panel__list li:last-child { border-bottom:0; }
.mb-panel__list li span { color:var(--cx-text-muted); text-align:right; }

@media (max-width:760px) {
  .mb-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .mb-table td { display:block; border-bottom:0; padding:2px 0; }
  .mb-table tr { display:block; padding:var(--cx-s3) 0; border-bottom:1px solid var(--cx-line-2); }
}