/* Black Gold — the top of the Luxe Circle (store/loyalty.go). Members wear one
   tone, gold on ink, across the whole client app: boot.js / app.js set
   html[data-circle] from the signed-in client. Everything else stays as it is. */

/* Dark (the default theme): warmer ink, gold fill with ink type. */
:root[data-circle="black"]:not([data-theme="light"]) {
  --bg: #0C0B0D; --surface: #17151A; --surface2: #221F25;
  --line: #2A272D; --line2: #3A363E; --ph: #17151A; --thumb: #0C0B0D; --track: #1D1A20; --in-card: #0C0B0D;
  --accent-fill: #CFAE68; --on-accent: #0C0B0D; --accent-text: #E0C384;
  --brand-orange: #D4B46A;
  --accent-soft: #2A2419; --accent-soft-ink: #E8CF95;
  --accent-ring: rgba(212, 180, 106, .32);
}
/* Light: ink fill with gold type; gold links deep enough to read on white. */
:root[data-circle="black"][data-theme="light"] {
  --accent-fill: #141215; --on-accent: #E2C485; --accent-text: #87672A;
  --brand-orange: #B8913F;
  --accent-soft: #F6EFDF; --accent-soft-ink: #6E5420;
  --accent-ring: rgba(156, 122, 54, .28);
}
:root[data-circle="black"] { --gold: #D4B46A; }
:root[data-circle="black"] .cmp-go { box-shadow: 0 6px 16px rgba(212, 180, 106, .2); }
:root[data-circle="black"][data-theme="light"] .cmp-go { box-shadow: 0 6px 16px rgba(12, 11, 13, .18); }
:root[data-circle="black"] .me-avatar,
:root[data-circle="black"] .sidenav-me .avatar { box-shadow: 0 0 0 1.5px var(--gold); }

/* ── The membership card: always ink and gold, in both themes ───────────── */
.member-link { display: block; color: inherit; text-decoration: none; border-radius: var(--r-lg); }
.member-card {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--card-pad) 18px;
  border-radius: var(--r-lg); background: #0C0B0D; color: #F3EEE4; overflow: hidden; isolation: isolate;
  animation: mc-in .8s var(--spring-soft, cubic-bezier(.22, 1, .36, 1)) both;
}
/* The gold edge arrives a beat after the card. */
.member-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(212, 180, 106, .42);
  animation: mc-edge 1.2s var(--spring-soft, cubic-bezier(.22, 1, .36, 1)) .18s both;
}
.member-card .mc-top { display: flex; align-items: center; justify-content: space-between; font-family: var(--num);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(243, 238, 228, .58); }
.member-card .mc-mark { font-family: var(--brand); font-size: 18px; letter-spacing: 0; text-transform: none; color: #F3EEE4; }
.member-card .mc-mark i { font-style: normal; color: #D4B46A; }
.member-card .mc-tier { margin-top: 20px; font-family: var(--display); font-size: 28px; line-height: 1.05; color: #D4B46A;
  animation: mc-tier 1.1s var(--spring-soft, cubic-bezier(.22, 1, .36, 1)) .08s both; }
.member-card .mc-name { font-size: 14px; color: rgba(243, 238, 228, .86); }
.member-card .mc-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px;
  font-family: var(--num); font-size: 13px; color: rgba(243, 238, 228, .6); }
.member-card .mc-meta b { font-size: 16px; font-weight: 500; color: #F3EEE4; margin-right: 2px; }
.member-card .mc-keep { margin-top: 4px; font-family: var(--num); font-size: 12px; color: rgba(212, 180, 106, .82); }
.member-card.compact { padding: 14px 16px; }
.member-card.compact .mc-tier { margin-top: 14px; font-size: 24px; }
.member-link .member-card { transition: transform .5s var(--spring, cubic-bezier(.22, 1, .36, 1)); }
.member-link:active .member-card { transform: scale(.985); transition-duration: .12s; }

@keyframes mc-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes mc-edge { from { opacity: 0; } }
@keyframes mc-tier { from { opacity: 0; letter-spacing: .06em; } }

/* ── Home: private line, first look ─────────────────────────────────────── */
.private-line { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.private-line .btn { height: var(--control-sm); font-size: 14px; gap: 8px; }
.private-line .btn:only-child { grid-column: 1 / -1; }
.first-look { display: flex; gap: 12px; align-items: stretch; color: inherit; text-decoration: none; }
.first-look-title { font-family: var(--display); font-size: var(--fs-h3); font-weight: 400; line-height: 1.15; }
.first-look .sub { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.first-look-img { width: 72px; flex: none; border-radius: var(--r); object-fit: cover; background: var(--ph); }

@media (prefers-reduced-motion: reduce) {
  .member-card, .member-card::after, .member-card .mc-tier { animation: none; }
  .member-link .member-card { transition: none; }
}