/* Saga Member Card CR80 — 7 themes x 5 variants */
.saga-member-card {
  --member-card-ink: #f7f1e7;
  --member-card-stroke: #173f35;
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 85.6 / 53.98;
  min-height: 10rem;
  grid-template: auto 1fr auto / minmax(0, 1fr) auto;
  padding: clamp(16px, 5vw, 21px);
  border: 1px solid rgb(24 20 17 / 14%);
  border-radius: clamp(18px, 6vw, 25px);
  background: #173f35;
  box-shadow: 0 12px 28px rgb(43 27 22 / 16%);
  color: var(--member-card-ink);
  isolation: isolate;
  overflow: hidden;
}

.saga-member-card.tone-light { --member-card-ink: #173f35; --member-card-stroke: #f7f1e7; }
.saga-member-card.variant-a { background-color: #173f35; }
.saga-member-card.variant-b { background-color: #eee3cf; }
.saga-member-card.variant-c { background-color: #b4491d; }
.saga-member-card.variant-d { background-color: #211e1a; }
.saga-member-card.variant-e { background-color: #839176; }
.saga-member-card.theme-polos.variant-e { --member-card-ink: #211e1a; }

.member-card-art { position: absolute; z-index: -1; inset: 0; opacity: .72; pointer-events: none; }
.saga-member-card:not(.theme-polos) { background-color: #eee8dc; }
.saga-member-card:not(.theme-polos) .member-card-art { opacity: 1; }
.member-card-art > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.saga-member-card.theme-futuristik { background-color: #102c28; }
.member-card-artwork-feedback { position: absolute; inset: 27% 8% 25%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--member-card-ink); text-align: center; font-size: .75rem; line-height: 1.4; }
.member-card-artwork-feedback[hidden], .member-card-artwork-feedback button[hidden] { display: none; }
.member-card-artwork-feedback button { min-height: 44px; padding: 6px 14px; border: 1px solid currentColor; border-radius: 12px; background: transparent; color: inherit; font: inherit; }
.member-card-artwork-feedback button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.member-card-artwork-feedback button[aria-disabled="true"] { cursor: wait; }
.saga-member-card[data-artwork-state="ready"] :is(.member-card-brand, .member-card-nfc, .member-card-person, .member-card-id) > :is(strong, span) {
  /* A crisp, opaque outer halo; never thicken/shrink the foreground glyph. */
  -webkit-text-stroke-width: 0;
  text-shadow: .055em 0 0 var(--member-card-stroke), -.055em 0 0 var(--member-card-stroke),
    0 .055em 0 var(--member-card-stroke), 0 -.055em 0 var(--member-card-stroke),
    .039em .039em 0 var(--member-card-stroke), -.039em .039em 0 var(--member-card-stroke),
    .039em -.039em 0 var(--member-card-stroke), -.039em -.039em 0 var(--member-card-stroke);
}
.member-card-brand { display: flex; flex-wrap: wrap; align-items: baseline; align-self: start; min-width: 0; row-gap: 2px; padding-inline-end: 8px; font-size: clamp(1.08rem, 5.4vw, 1.4rem); line-height: 1; }
.member-card-brand strong { font-weight: 700; }
.member-card-brand span { font-weight: 400; }
.member-card-nfc { display: flex; align-items: center; align-self: start; justify-self: end; gap: 3px; font-size: clamp(.65rem, 3vw, .78rem); }
.member-card-nfc strong { font-weight: 700; }
.member-card-contactless { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.member-card-contactless-outline { display: none; }
.saga-member-card[data-artwork-state="ready"] .member-card-contactless { overflow: visible; }
.saga-member-card[data-artwork-state="ready"] .member-card-contactless-outline { display: block; stroke: var(--member-card-stroke); stroke-width: 3.5; }
.member-card-person { display: grid; align-self: end; min-width: 0; gap: 2px; grid-column: 1; grid-row: 3; text-transform: uppercase; }
.member-card-person strong { max-width: 20ch; font-size: clamp(.83rem, 4vw, 1rem); line-height: 1.05; overflow-wrap: anywhere; }
.member-card-person strong.name-small { font-size: clamp(.72rem, 3.5vw, .88rem); }
.member-card-person strong.name-compact { max-width: 24ch; font-size: clamp(.64rem, 3vw, .78rem); line-height: 1.1; }
.member-card-person span { font-size: clamp(.75rem, 3vw, .82rem); }
.member-card-id { display: grid; align-self: end; justify-items: end; gap: 2px; grid-column: 2; grid-row: 3; }
.member-card-id span { font-size: clamp(.75rem, 2.4vw, .78rem); }
.member-card-id strong { font-size: clamp(.72rem, 3.2vw, .86rem); }

.member-card-orbit { position: absolute; width: 76%; aspect-ratio: 1; border: 1px solid rgb(218 202 163 / 44%); border-radius: 50%; }
.orbit-one { right: -33%; bottom: -77%; }
.orbit-two { right: -16%; bottom: -86%; }
.member-card-dot { position: absolute; width: 7px; aspect-ratio: 1; border-radius: 50%; background: #9da78c; }
.dot-one { right: 28%; top: 43%; }
.dot-two { right: 20%; top: 59%; }
.member-card-bean { position: absolute; width: 32px; height: 21px; top: 39%; right: 22%; border: 2px solid #756342; border-radius: 50%; transform: rotate(-48deg); }
.member-card-bean::after { position: absolute; inset: 2px 13px; border-left: 1px solid #756342; content: ""; transform: rotate(15deg); }
.member-card-spark { position: absolute; width: 18px; aspect-ratio: 1; right: 13%; top: 46%; border: 1px solid #8a794d; transform: rotate(45deg); }
.member-card-spark::after { position: absolute; inset: 4px; background: #eee3cf; content: ""; }
.spark-two { width: 10px; right: 20%; top: 60%; }
.member-card-leaf { position: absolute; width: 110px; height: 120px; right: 9%; bottom: 3%; border-left: 2px solid rgb(255 209 151 / 40%); transform: rotate(38deg); }
.member-card-leaf i { position: absolute; width: 43px; height: 18px; left: -3px; border: 2px solid rgb(255 209 151 / 40%); border-left: 0; border-radius: 0 100% 0 100%; }
.member-card-leaf i:nth-child(1) { top: 21px; }
.member-card-leaf i:nth-child(2) { top: 50px; transform: scaleX(-1); transform-origin: left; }
.member-card-leaf i:nth-child(3) { top: 79px; }
.member-card-frame { position: absolute; width: 72px; height: 64px; right: 13%; bottom: 18%; border-top: 2px solid #a78056; border-right: 2px solid #a78056; }
.member-card-frame::before { position: absolute; width: 32px; height: 28px; right: 22px; bottom: 0; border-bottom: 2px solid #a78056; border-left: 2px solid #a78056; content: ""; }
.member-card-dot-grid { position: absolute; width: 3px; height: 3px; right: 31%; bottom: 37%; border-radius: 50%; background: #a78056; box-shadow: 10px 0 #a78056, 20px 0 #a78056, 30px 0 #a78056, 0 10px #a78056, 10px 10px #a78056, 20px 10px #a78056, 30px 10px #a78056, 0 20px #a78056, 10px 20px #a78056, 20px 20px #a78056, 30px 20px #a78056; }
.member-card-ring { position: absolute; aspect-ratio: 1; border: 2px solid rgb(232 221 178 / 35%); border-radius: 50%; }
.ring-one { width: 41%; right: 10%; bottom: 4%; }
.ring-two { width: 61%; right: -1%; bottom: -18%; }
.member-card-s-path { position: absolute; width: 86%; height: 86%; right: -38%; bottom: -43%; border: 2px solid rgb(232 221 178 / 30%); border-radius: 50%; }

.member-card-note { display: flex; align-items: flex-start; gap: 8px; margin: 10px 2px 0; color: var(--v7-muted); font-size: .75rem; line-height: 1.4; }
.member-card-note svg { flex: 0 0 auto; margin-top: 1px; }
.member-card-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 10px; }
.member-card-preview-heading span { color: var(--v7-ink); font-size: .8rem; font-weight: 750; }
.member-card-preview-heading small { color: var(--v7-muted); font-size: .75rem; }
.member-card-customizer { margin-top: 24px; }
.member-card-customizer .editorial-section-heading { margin-bottom: 12px; }
.member-card-picker-shell { display: grid; gap: 14px; }
.member-card-drag-viewport { min-width: 0; padding: 6px; margin: -6px; overflow: clip; }
.member-card-carousel { touch-action: pan-y pinch-zoom; cursor: grab; user-select: none; min-width: 0; }
.member-card-carousel:active { cursor: grabbing; }
.member-card-carousel:focus-visible { outline: 2px solid var(--v7-ink); outline-offset: 3px; border-radius: 22px; }
.member-card-carousel-controls { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
.member-card-carousel-controls button { min-height: 44px; border: 1px solid rgb(24 20 17 / 16%); border-radius: 50%; background: transparent; color: var(--v7-ink); font-size: 26px; }
.member-card-carousel-controls span { display: grid; gap: 4px; text-align: center; }
.member-card-carousel-controls strong { font-size: 13px; }
.member-card-carousel-controls small { font-size: 12px; color: var(--v7-muted); }
.member-card-theme-rail { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; width: 100%; }
.member-card-theme-rail button { display: grid; min-width: 44px; min-height: 44px; padding: 0; place-items: center; border: 1px solid rgb(24 20 17 / 16%); border-radius: 50%; background: var(--v7-milk); color: var(--v7-ink); font: inherit; transition: transform 160ms ease, opacity 160ms ease; }
.member-card-theme-rail button span { font-size: 1.75rem; font-weight: 500; line-height: 1; transform: translateY(-1px); }
.member-card-theme-rail button:active { transform: scale(.94); }
.member-card-theme-current { display: grid; min-width: 0; justify-items: center; gap: 2px; text-align: center; }
.member-card-theme-current small { color: var(--v7-muted); font-size: .75rem; }
.member-card-theme-current strong { max-width: 100%; font-size: .9rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-card-theme-copy { display: grid; gap: 3px; }
.member-card-theme-copy span { color: var(--v7-muted); font-size: .75rem; line-height: 1.4; text-align: center; }
.member-card-picker-status { min-height: 1.2em; margin: 10px 2px 0; color: var(--v7-muted); font-size: .75rem; }
.member-card-apply-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid rgb(24 20 17 / 15%); border-radius: 16px; background: var(--v7-milk); }
.member-card-apply-panel p { display: grid; min-width: 0; gap: 2px; margin: 0; }
.member-card-apply-panel small { color: var(--v7-muted); font-size: .75rem; }
.member-card-apply-panel strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.member-card-apply { min-height: 44px; padding-inline: 14px; white-space: nowrap; }
.member-card-apply:disabled { border-color: rgb(24 20 17 / 12%); background: rgb(24 20 17 / 8%); color: var(--v7-muted); opacity: 1; }
.member-card-save-feedback { display: grid; gap: 10px; margin-top: 12px; padding: 12px; border-inline-start: 3px solid var(--v7-ink); color: var(--v7-ink); background: var(--v7-milk); border-radius: 0 12px 12px 0; }
.member-card-save-feedback strong { display: block; font-size: .875rem; line-height: 1.45; }
.member-card-save-feedback p { margin: 4px 0 0; font-size: .75rem; line-height: 1.5; color: var(--v7-muted); text-wrap: pretty; }
.member-card-save-feedback .button { min-height: 44px; white-space: normal; line-height: 1.4; }
.member-card-save-feedback [data-card-save-status]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.member-card-save-feedback [data-card-save-status] { scroll-margin-block: 96px; }
.member-card-save-feedback[data-card-save-state="error"] { border-inline-start-style: double; border-inline-start-width: 4px; }
.member-card-save-feedback[data-card-save-state="idle"] { padding: 0 2px; border: 0; border-radius: 0; background: transparent; }
.member-card-save-feedback .member-card-undo-target { margin: 0; }
.member-card-save-feedback .member-card-undo-target strong { font-size: .75rem; color: var(--v7-ink); }
.member-card-actions { display: flex; margin-top: 12px; }
.member-card-export { width: 100%; min-height: 46px; }
.member-card-export[aria-busy="true"] { opacity: .65; }

.pass-focus-card-host { width: 100%; margin-top: 16px; isolation: isolate; }
.pass-focus-card-host .saga-member-card { width: 100%; box-shadow: 0 14px 28px rgb(43 27 22 / 18%); }
.pass-focus-demo-note { margin: 9px 0 0; color: var(--v7-muted); font-size: .68rem; font-weight: 800; letter-spacing: .035em; text-align: center; }

@media (max-width: 340px) {
  .saga-member-card { padding: 15px; }
  .member-card-apply-panel { grid-template-columns: 1fr; }
  .member-card-apply { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .saga-member-card, .member-card-theme-rail button { transition: none; }
}

@media (forced-colors: active) {
  .member-card-customizer .button,
  .member-card-carousel-controls button,
  .member-card-theme-rail button { color: ButtonText; background: ButtonFace; border: 1px solid ButtonText; forced-color-adjust: none; }
  .member-card-customizer .button:disabled { color: GrayText; border-color: GrayText; }
  .saga-member-card { border: 1px solid CanvasText; box-shadow: none; }
  .saga-member-card { background: Canvas; color: CanvasText; }
  .saga-member-card .member-card-art { visibility: hidden; }
  .saga-member-card[data-artwork-state="ready"] .member-card-contactless-outline { display: none; }
  .saga-member-card:not(.theme-polos) :is(.member-card-brand, .member-card-nfc, .member-card-person, .member-card-id) > :is(strong, span) { text-shadow: none; }
}