/* ═══════════════════════════════════════════════════════════════
   MERIWETHER ACADEMY PORTAL — Phase 1
   Scoped under .mwa-portal so styles can't leak.
   Hides Saison's header/footer ONLY on the portal page
   (body.mwa-portal-page) so the dark sidebar can extend full-height.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600;1,700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Cinzel:wght@400;500;600;700&family=Style+Script&display=swap');

/* ─── Hide theme chrome on the portal page only ─── */
body.mwa-portal-page header,
body.mwa-portal-page .site-header,
body.mwa-portal-page .wp-block-template-part[class*="header"],
body.mwa-portal-page footer,
body.mwa-portal-page .site-footer,
body.mwa-portal-page .wp-block-template-part[class*="footer"] {
  display: none !important;
}
body.mwa-portal-page,
body.mwa-portal-page .wp-site-blocks,
body.mwa-portal-page main,
body.mwa-portal-page .entry-content,
body.mwa-portal-page .wp-block-post-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

.mwa-portal {
  --mwa-parch-light:  #f7f0dc;
  --mwa-parch:        #efe4c4;
  --mwa-parch-mid:    #e4d5a8;
  --mwa-parch-deep:   #d9c88e;
  --mwa-parch-worn:   #c9b87a;
  --mwa-ink:          #1e160a;
  --mwa-ink-brown:    #2e1f0e;
  --mwa-ink-mid:      #4a3520;
  --mwa-ink-light:    #6b5035;
  --mwa-ink-faint:    #8a7058;
  --mwa-gold:         #8a6520;
  --mwa-gold-warm:    #a07828;
  --mwa-gold-bright:  #c49a38;
  --mwa-rust:         #7a3518;
  --mwa-success:      #4a6b2a;

  --mwa-sidebar-w: 260px;

  position: relative;
  min-height: 100vh;
  background: var(--mwa-parch);
  color: var(--mwa-ink-brown);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 16px;
  line-height: 1.6;
  /* Reserve space for the fixed sidebar so .mwa-main starts to the right of it. */
  padding-left: var(--mwa-sidebar-w);
}

.mwa-portal *, .mwa-portal *::before, .mwa-portal *::after { box-sizing: border-box; }
.mwa-portal a { color: inherit; text-decoration: none; }

/* ─── SIDEBAR — fixed in viewport so it stays put while content scrolls ─── */
.mwa-portal .mwa-sidebar {
  background: var(--mwa-ink);
  color: var(--mwa-parch-mid);
  padding: 28px 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--mwa-sidebar-w);
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid rgba(201,184,122,0.15);
  z-index: 100;
}
/* WordPress admin bar offset — when admin bar is showing, push sidebar down */
.admin-bar .mwa-portal .mwa-sidebar {
  top: 32px;
  height: calc(100vh - 32px);
}
@media screen and (max-width: 782px) {
  .admin-bar .mwa-portal .mwa-sidebar {
    top: 46px;
    height: calc(100vh - 46px);
  }
}
.mwa-portal .mwa-sidebar::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(to right, var(--mwa-gold), var(--mwa-gold-warm), var(--mwa-gold));
}
.mwa-brand { padding: 0 28px 28px; border-bottom: 1px solid rgba(201,184,122,0.12); margin-bottom: 24px; }
.mwa-brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.mwa-brand-crest {
  position: relative;
  width: 46px; height: 46px;
  background: var(--mwa-parch-light); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--mwa-gold);
  box-shadow: 0 0 0 2px var(--mwa-ink), 0 0 0 3px rgba(201,184,122,0.3);
  flex-shrink: 0;
  overflow: hidden;
}
.mwa-brand-crest-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  /* Slight inset so the crest's outline doesn't kiss the gold ring. */
  padding: 3px;
}
.mwa-brand-crest-fallback {
  /* Shown by JS via onerror if the crest image isn't present. */
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-style: italic;
  color: var(--mwa-ink);
  font-size: 1.3rem;
}
.mwa-brand-text { font-family: 'Cinzel', serif; font-size: 0.78rem; letter-spacing: 0.22em; color: var(--mwa-parch-light); text-transform: uppercase; line-height: 1.3; }
.mwa-brand-tag { font-family: 'Style Script', cursive; font-size: 1rem; color: var(--mwa-gold-bright); padding-left: 4px; }
.mwa-member-card { background: rgba(201,184,122,0.06); border: 1px solid rgba(201,184,122,0.15); padding: 12px 14px; display: flex; align-items: center; gap: 11px; }
.mwa-member-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--mwa-gold-warm), var(--mwa-rust));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-weight: 700; font-style: italic;
  color: var(--mwa-parch-light); font-size: 0.95rem; flex-shrink: 0;
  /* The has-photo modifier sets background-image inline; reset the gradient
     so the photo isn't tinted, and clear the initials text styling. */
}
.mwa-member-avatar.has-photo {
  background-color: transparent;
  background-image: var(--mwa-photo, none);
  background-size: cover;
  background-position: center;
}
.mwa-member-info { min-width: 0; flex: 1; }
.mwa-member-name {
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600;
  font-size: 0.88rem; color: var(--mwa-parch-light); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mwa-member-role { font-family: 'Cinzel', serif; font-size: 0.5rem; letter-spacing: 0.18em; color: var(--mwa-gold-bright); text-transform: uppercase; margin-top: 3px; }

.mwa-nav-section { padding: 0 14px; margin-bottom: 22px; }
.mwa-nav-label {
  font-family: 'Cinzel', serif; font-size: 0.52rem; letter-spacing: 0.28em;
  color: var(--mwa-ink-faint); text-transform: uppercase; padding: 0 14px;
  margin-bottom: 8px; display: flex; align-items: center; gap: 9px;
}
.mwa-nav-label::after { content: ''; flex: 1; height: 1px; background: rgba(201,184,122,0.1); }
.mwa-nav-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.16em;
  color: var(--mwa-parch-mid); text-transform: uppercase;
  cursor: pointer; transition: all 0.2s; border-left: 2px solid transparent;
  margin-bottom: 1px; text-decoration: none;
}
.mwa-nav-item:hover { background: rgba(201,184,122,0.06); color: var(--mwa-parch-light); }
.mwa-nav-item.active { background: rgba(201,184,122,0.1); color: var(--mwa-gold-bright); border-left-color: var(--mwa-gold-bright); }
.mwa-nav-item.mwa-nav-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.mwa-nav-icon { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; flex-shrink: 0; }
.mwa-nav-badge {
  margin-left: auto; background: var(--mwa-rust); color: var(--mwa-parch-light);
  font-family: 'EB Garamond', serif; font-style: italic; font-weight: 600;
  font-size: 0.7rem; padding: 1px 7px; border-radius: 9px;
}
.mwa-nav-badge.mwa-nav-soon { background: rgba(201,184,122,0.2); color: var(--mwa-ink-faint); font-size: 0.55rem; font-style: normal; letter-spacing: 0.15em; }

/* ─── MAIN ─── */
.mwa-main { background: var(--mwa-parch); position: relative; min-width: 0; }
.mwa-topbar {
  background: var(--mwa-parch-light);
  border-bottom: 1px solid var(--mwa-parch-deep);
  padding: 16px 36px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(8px);
}
.mwa-search {
  flex: 1; max-width: 460px; position: relative;
  background: var(--mwa-parch); border: 1px solid var(--mwa-parch-deep);
  display: flex; align-items: center; padding: 8px 14px; gap: 10px;
}
.mwa-search svg { width: 14px; height: 14px; stroke: var(--mwa-ink-faint); fill: none; stroke-width: 1.8; flex-shrink: 0; }
.mwa-search input {
  flex: 1; background: transparent; border: 0; outline: 0;
  font-family: 'EB Garamond', serif; font-size: 0.95rem; color: var(--mwa-ink-brown);
  font-style: italic;
}
.mwa-search input::placeholder { color: var(--mwa-ink-faint); }

/* ─── CONTENT ─── */
.mwa-content { padding: 36px; max-width: 1500px; margin: 0 auto; }
.mwa-page { display: none; animation: mwaFadeIn 0.4s ease; }
.mwa-page.active { display: block; }
@keyframes mwaFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.mwa-page-header { margin-bottom: 36px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.mwa-page-eyebrow {
  font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.38em;
  color: var(--mwa-gold); text-transform: uppercase;
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.mwa-page-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--mwa-gold-warm); }
.mwa-page-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 700;
  line-height: 1.05; color: var(--mwa-ink); letter-spacing: -0.01em;
}
.mwa-page-title em { font-style: italic; color: var(--mwa-gold); }
.mwa-page-subtitle { font-family: 'Style Script', cursive; font-size: 1.4rem; color: var(--mwa-ink-mid); margin-top: 6px; }

.mwa-loading { text-align: center; padding: 60px 20px; font-family: 'EB Garamond', serif; font-style: italic; color: var(--mwa-ink-faint); font-size: 1rem; }

/* ─── STATS ─── */
.mwa-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 36px; }
.mwa-stat {
  background: var(--mwa-parch-light); border: 1px solid var(--mwa-parch-deep);
  padding: 22px 24px; position: relative; overflow: hidden;
}
.mwa-stat::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(to right, var(--mwa-gold), var(--mwa-gold-bright));
}
.mwa-stat-label { font-family: 'Cinzel', serif; font-size: 0.52rem; letter-spacing: 0.25em; color: var(--mwa-gold); text-transform: uppercase; margin-bottom: 10px; }
.mwa-stat-value { font-family: 'Playfair Display', serif; font-weight: 700; font-style: italic; font-size: 2.4rem; color: var(--mwa-ink); line-height: 1; }
.mwa-stat-value-text { font-size: 1.6rem; }
.mwa-stat-meta { font-size: 0.82rem; color: var(--mwa-ink-faint); font-style: italic; margin-top: 6px; }

/* ─── PANELS ─── */
.mwa-dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
.mwa-panel { background: var(--mwa-parch-light); border: 1px solid var(--mwa-parch-deep); padding: 28px 30px; }
.mwa-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--mwa-parch-deep); }
.mwa-panel-title { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 600; color: var(--mwa-ink); }
.mwa-panel-title em { font-style: italic; color: var(--mwa-gold); }
.mwa-panel-link {
  font-family: 'Cinzel', serif; font-size: 0.54rem; letter-spacing: 0.22em;
  color: var(--mwa-gold); text-transform: uppercase; display: flex; align-items: center; gap: 7px;
  cursor: pointer; transition: gap 0.2s;
}
.mwa-panel-link::after { content: '→'; }
.mwa-panel-link:hover { gap: 11px; }

/* ─── ROLODEX ─── */
.mwa-filter-bar {
  background: var(--mwa-parch-light); border: 1px solid var(--mwa-parch-deep);
  padding: 14px 20px; margin-bottom: 24px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.mwa-filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.mwa-pill {
  font-family: 'Cinzel', serif; font-size: 0.55rem; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 7px 14px;
  background: var(--mwa-parch); border: 1px solid var(--mwa-parch-deep);
  cursor: pointer; transition: all 0.2s; color: var(--mwa-ink-light);
}
.mwa-pill:hover { background: var(--mwa-parch-mid); }
.mwa-pill.active { background: var(--mwa-ink-brown); color: var(--mwa-parch-light); border-color: var(--mwa-ink-brown); }

.mwa-roster-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mwa-roster-card {
  background: var(--mwa-parch-light); border: 1px solid var(--mwa-parch-deep);
  padding: 22px 22px 20px;
  transition: all 0.25s ease; position: relative; overflow: hidden;
}
.mwa-roster-card:hover { transform: translateY(-3px); box-shadow: 4px 6px 24px rgba(30,22,10,0.12); border-color: var(--mwa-parch-worn); }
.mwa-roster-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(to right, transparent, var(--mwa-gold), transparent);
  opacity: 0; transition: opacity 0.3s;
}
.mwa-roster-card:hover::before { opacity: 1; }
.mwa-roster-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.mwa-roster-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-weight: 700; font-style: italic;
  color: var(--mwa-parch-light); font-size: 1.35rem;
  flex-shrink: 0; border: 2px solid var(--mwa-parch-light);
  box-shadow: 0 0 0 1px var(--mwa-parch-worn);
  background: linear-gradient(135deg, var(--mwa-ink-brown), var(--mwa-rust));
  background-size: cover; background-position: center;
}
.mwa-roster-name { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 1.08rem; color: var(--mwa-ink); line-height: 1.2; }
.mwa-roster-handle { font-family: 'Cinzel', serif; font-size: 0.5rem; letter-spacing: 0.18em; color: var(--mwa-gold); text-transform: uppercase; margin-top: 4px; }

/* Location pinned directly below the username, with a small pin icon. */
.mwa-roster-location {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.88rem;
  color: var(--mwa-ink-light);
  line-height: 1.3;
}
.mwa-roster-location svg {
  stroke: var(--mwa-gold);
  flex-shrink: 0;
  margin-top: -1px;
}
.mwa-roster-title { font-style: italic; font-size: 0.9rem; color: var(--mwa-ink-light); line-height: 1.4; margin-bottom: 10px; }

/* Occupation + city headline above the bio. Italic Garamond, gold-tinted,
   with a tiny midpoint separator that drops to a line break on narrow cards. */
.mwa-roster-headline {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--mwa-ink-mid);
  line-height: 1.35;
  margin: 4px 0 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.mwa-roster-headline-occ {
  color: var(--mwa-ink-brown);
  font-weight: 500;
}
.mwa-roster-headline-city {
  color: var(--mwa-ink-light);
}
.mwa-roster-headline-sep {
  color: var(--mwa-gold);
  font-style: normal;
  margin: 0 2px;
  opacity: 0.75;
}
.mwa-roster-meta { display: flex; flex-direction: column; gap: 5px; padding-top: 12px; border-top: 1px solid rgba(217,200,142,0.6); font-size: 0.78rem; color: var(--mwa-ink-faint); }
.mwa-roster-meta-row { display: flex; align-items: center; gap: 7px; }
.mwa-roster-meta-row svg { width: 11px; height: 11px; stroke: var(--mwa-ink-faint); fill: none; stroke-width: 1.6; flex-shrink: 0; }
.mwa-roster-actions { display: flex; gap: 7px; margin-top: 14px; }
.mwa-btn-mini {
  flex: 1; font-family: 'Cinzel', serif; font-size: 0.5rem; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 7px; text-align: center;
  border: 1px solid var(--mwa-parch-deep); cursor: pointer; transition: all 0.2s;
  background: var(--mwa-parch); color: var(--mwa-ink-brown); text-decoration: none;
  display: block;
}
.mwa-btn-mini:hover { background: var(--mwa-parch-mid); }
.mwa-btn-mini.primary { background: var(--mwa-ink-brown); color: var(--mwa-parch-light); border-color: var(--mwa-ink-brown); }
.mwa-btn-mini.primary:hover { background: var(--mwa-ink); }

/* ─── ONLINE NOW ─── */
.mwa-online-list { display: flex; flex-direction: column; gap: 11px; }
.mwa-online-row { display: flex; align-items: center; gap: 10px; }
.mwa-online-row .mwa-roster-avatar { width: 30px; height: 30px; font-size: 0.75rem; }
.mwa-online-name { font-family: 'Playfair Display', serif; font-weight: 500; font-size: 0.88rem; color: var(--mwa-ink-brown); flex: 1; }
.mwa-online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mwa-success); flex-shrink: 0; }

/* Dashboard: recent activity rows */
.mwa-portal .mwa-dash-activity-list { display: flex; flex-direction: column; gap: 14px; }
.mwa-portal .mwa-dash-activity-row {
  display: flex; gap: 11px; align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--mwa-parch-deep);
}
.mwa-portal .mwa-dash-activity-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.mwa-portal .mwa-dash-activity-avatar {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 50%; overflow: hidden;
  border: 1px solid var(--mwa-parch-deep);
  display: block;
}
.mwa-portal .mwa-dash-activity-avatar img {
  width: 100%; height: 100%; display: block; object-fit: cover;
}
.mwa-portal .mwa-dash-activity-body { min-width: 0; flex: 1; }
.mwa-portal .mwa-dash-activity-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px;
}
.mwa-portal .mwa-dash-activity-name {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 600;
  font-size: 0.9rem;
  color: var(--mwa-ink) !important;
  text-decoration: none;
}
.mwa-portal .mwa-dash-activity-name:hover { color: var(--mwa-gold) !important; }
.mwa-portal .mwa-dash-activity-date {
  font-family: 'EB Garamond', serif;
  font-style: italic; font-size: 0.78rem;
  color: var(--mwa-ink-light);
}
.mwa-portal .mwa-dash-activity-text {
  font-family: 'EB Garamond', serif;
  font-size: 0.92rem; line-height: 1.5;
  color: var(--mwa-ink-mid);
  word-wrap: break-word;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1200px) {
  .mwa-portal .mwa-roster-grid { grid-template-columns: repeat(3, 1fr); }
  .mwa-portal .mwa-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .mwa-portal .mwa-dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* The mobile sidebar behavior (fixed-position drawer) lives further
     down in the MOBILE TOP BAR block. Keep only layout-grid tweaks
     here so the two blocks don't fight over the sidebar position. */
  .mwa-portal .mwa-roster-grid { grid-template-columns: repeat(2, 1fr); }
  .mwa-portal .mwa-content { padding: 24px 20px; }
  .mwa-portal .mwa-topbar { padding: 14px 20px; }
}
@media (max-width: 600px) {
  .mwa-portal .mwa-roster-grid { grid-template-columns: 1fr; }
  .mwa-portal .mwa-stats-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   LIBRARY PAGE — Britannica Great Books (visual only)
   ═══════════════════════════════════════════════════════════════ */
.mwa-portal .mwa-library-notice {
  background: var(--mwa-parch-light);
  border: 1px solid var(--mwa-parch-deep);
  border-left: 3px solid var(--mwa-gold);
  padding: 14px 18px;
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'EB Garamond', Georgia, serif;
}
.mwa-portal .mwa-library-notice-icon {
  flex-shrink: 0;
  color: var(--mwa-gold);
}
.mwa-portal .mwa-library-notice-body {
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--mwa-ink-mid);
}
.mwa-portal .mwa-library-notice-meta {
  display: inline-block;
  margin-left: 6px;
  font-style: italic;
  color: var(--mwa-ink-light);
}
@media (max-width: 600px) {
  .mwa-portal .mwa-library-notice {
    padding: 12px 14px;
    gap: 10px;
  }
  .mwa-portal .mwa-library-notice-body {
    font-size: 0.92rem;
  }
  .mwa-portal .mwa-library-notice-meta {
    display: block;
    margin-left: 0;
    margin-top: 2px;
  }
}

.mwa-portal .mwa-library-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 16px 22px;
  background: var(--mwa-parch-light);
  border: 1px solid var(--mwa-parch-deep);
  margin-bottom: 24px;
  font-family: 'EB Garamond', serif;
  font-size: 0.85rem;
  color: var(--mwa-ink-mid);
}
.mwa-portal .mwa-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-style: italic;
}
.mwa-portal .mwa-binding-swatch {
  display: inline-block;
  width: 14px;
  height: 18px;
  border-radius: 1px;
  border: 1px solid rgba(30, 22, 10, 0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15);
}

.mwa-portal .mwa-library-shelf {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.mwa-portal .mwa-book {
  height: 260px;
  position: relative;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
  border: 1px solid rgba(30, 22, 10, 0.3);
  border-radius: 2px;
  overflow: hidden;
}
.mwa-portal .mwa-book:focus-visible {
  outline: 2px solid var(--mwa-gold);
  outline-offset: 3px;
}

.mwa-portal .mwa-book:hover {
  transform: translateY(-4px) rotate(-0.5deg);
  box-shadow: 6px 8px 24px rgba(30, 22, 10, 0.25);
}

.mwa-portal .mwa-book-spine {
  height: 100%;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  position: relative;
}
/* Center group — title + author kept tight together, floats in
   the middle of the spine via space-between on the parent. */
.mwa-portal .mwa-book-center {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mwa-portal .mwa-book-spine::before {
  content: '';
  position: absolute;
  top: 8px; left: 8px; right: 8px; bottom: 8px;
  border: 1px solid rgba(255, 240, 220, 0.25);
  pointer-events: none;
}

.mwa-portal .mwa-book-volume {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: rgba(255, 240, 220, 0.7);
  margin-top: 6px;
}

.mwa-portal .mwa-book-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fef6e0;
  line-height: 1.25;
  padding: 0 4px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

.mwa-portal .mwa-book-author {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 0.78rem;
  color: rgba(255, 240, 220, 0.85);
  padding: 0 4px;
  line-height: 1.3;
}

.mwa-portal .mwa-book-footer {
  font-family: 'Cinzel', serif;
  font-size: 0.42rem;
  letter-spacing: 0.18em;
  color: rgba(255, 240, 220, 0.55);
  margin-bottom: 6px;
}

/* Binding categories — colors approximating the 1952 Britannica edition.
   These selectors also include .mwa-detail-spine so that the mini-spine
   inside the body-mounted detail modal paints with the same gradient
   even though it's outside the .mwa-portal scope. */
.mwa-portal .mwa-bind-intro,
.mwa-binding-swatch.mwa-bind-intro,
.mwa-detail-spine.mwa-bind-intro {
  background: linear-gradient(135deg, #4a4a4a, #2e2e2e);
}
.mwa-portal .mwa-bind-lit,
.mwa-binding-swatch.mwa-bind-lit,
.mwa-detail-spine.mwa-bind-lit {
  background: linear-gradient(135deg, #c49a38, #8a6520);
}
.mwa-portal .mwa-bind-hist,
.mwa-binding-swatch.mwa-bind-hist,
.mwa-detail-spine.mwa-bind-hist {
  background: linear-gradient(135deg, #2a4a6b, #1a3550);
}
.mwa-portal .mwa-bind-sci,
.mwa-binding-swatch.mwa-bind-sci,
.mwa-detail-spine.mwa-bind-sci {
  background: linear-gradient(135deg, #3a5a3a, #243a24);
}
.mwa-portal .mwa-bind-phil,
.mwa-binding-swatch.mwa-bind-phil,
.mwa-detail-spine.mwa-bind-phil {
  background: linear-gradient(135deg, #7a3518, #4a1f0e);
}

@media (max-width: 1100px) {
  .mwa-portal .mwa-library-shelf {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 900px) {
  .mwa-portal .mwa-library-shelf {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .mwa-portal .mwa-library-shelf {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .mwa-portal .mwa-book {
    height: 230px;
  }
  .mwa-portal .mwa-book-title {
    font-size: 0.82rem;
  }
}


/* ═══════════════════════════════════════════════════════════════
   BP-PAGE LAYOUT — full-shell mode with FIXED sidebar
   On any BuddyPress page for a logged-in member, hide all theme
   chrome (header, footer, page title) and lay out the dark sidebar
   + BP content as a full-viewport shell, identical to the portal.
   The sidebar is position:fixed so it stays put while content scrolls.
   ═══════════════════════════════════════════════════════════════ */

/* Hide Saison's header, footer, and the page-title block */
body.mwa-bp-with-sidebar header,
body.mwa-bp-with-sidebar .site-header,
body.mwa-bp-with-sidebar .wp-block-template-part[class*="header"],
body.mwa-bp-with-sidebar footer,
body.mwa-bp-with-sidebar .site-footer,
body.mwa-bp-with-sidebar .wp-block-template-part[class*="footer"],
body.mwa-bp-with-sidebar main > .wp-block-spacer,
body.mwa-bp-with-sidebar main > .wp-block-post-title {
  display: none !important;
}

/* Aggressively zero ALL top spacing. Saison adds padding/margin in many
   places — root padding, .has-global-padding, .is-layout-flow gap, etc. */
body.mwa-bp-with-sidebar,
body.mwa-bp-with-sidebar .wp-site-blocks,
body.mwa-bp-with-sidebar main,
body.mwa-bp-with-sidebar main.wp-block-group,
body.mwa-bp-with-sidebar .entry-content,
body.mwa-bp-with-sidebar .wp-block-post-content,
body.mwa-bp-with-sidebar .has-global-padding {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  background: var(--mwa-parch, #efe4c4);
}
/* Override Saison's root padding CSS variables for the whole body */
body.mwa-bp-with-sidebar {
  --wp--style--root--padding-top: 0 !important;
  --wp--style--root--padding-right: 0 !important;
  --wp--style--root--padding-bottom: 0 !important;
  --wp--style--root--padding-left: 0 !important;
  --wp--preset--spacing--50: 0 !important;
  --wp--style--block-gap: 0 !important;
}
/* Saison applies margin-block-start to children via .is-layout-flow */
body.mwa-bp-with-sidebar .wp-site-blocks > *,
body.mwa-bp-with-sidebar main > *,
body.mwa-bp-with-sidebar .is-layout-flow > *,
body.mwa-bp-with-sidebar .is-layout-constrained > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  max-width: 100% !important;
}

/* The flex container that wraps sidebar + BP content.
   Because the sidebar is fixed, we offset the content with padding-left. */
.mwa-bp-layout {
  --mwa-parch-light:  #f7f0dc;
  --mwa-parch:        #efe4c4;
  --mwa-parch-mid:    #e4d5a8;
  --mwa-parch-deep:   #d9c88e;
  --mwa-parch-worn:   #c9b87a;
  --mwa-ink:          #1e160a;
  --mwa-ink-brown:    #2e1f0e;
  --mwa-ink-mid:      #4a3520;
  --mwa-ink-light:    #6b5035;
  --mwa-ink-faint:    #8a7058;
  --mwa-gold:         #8a6520;
  --mwa-gold-warm:    #a07828;
  --mwa-gold-bright:  #c49a38;
  --mwa-rust:         #7a3518;
  --mwa-success:      #4a6b2a;

  --mwa-sidebar-w: 260px;

  position: relative;
  min-height: 100vh;
  background: var(--mwa-parch);
  font-family: 'EB Garamond', Georgia, serif;
  color: var(--mwa-ink-brown);
  font-size: 16px;
  line-height: 1.6;
  padding-left: var(--mwa-sidebar-w); /* reserve space for the fixed sidebar */
}

.mwa-bp-layout *, .mwa-bp-layout *::before, .mwa-bp-layout *::after {
  box-sizing: border-box;
}

/* Sidebar — FIXED in viewport, stays in place while content scrolls.
   Visual styling (dark brown background, parchment text, gold accent)
   mirrors the .mwa-portal .mwa-sidebar rule so BP pages match the portal. */
.mwa-bp-layout .mwa-sidebar {
  background: var(--mwa-ink);
  color: var(--mwa-parch-mid);
  padding: 28px 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--mwa-sidebar-w);
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid rgba(201,184,122,0.15);
  z-index: 100;
}
.mwa-bp-layout .mwa-sidebar::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(to right, var(--mwa-gold), var(--mwa-gold-warm), var(--mwa-gold));
}
/* WordPress admin bar offsets — the admin bar is always 32/46px tall */
.admin-bar .mwa-bp-layout .mwa-sidebar {
  top: 32px;
  height: calc(100vh - 32px);
}
@media screen and (max-width: 782px) {
  .admin-bar .mwa-bp-layout .mwa-sidebar {
    top: 46px;
    height: calc(100vh - 46px);
  }
}

/* The content area — fills the rest of the viewport beside the sidebar. */
.mwa-bp-content {
  padding: 36px clamp(20px, 4vw, 48px);
  min-width: 0;
  background: var(--mwa-parch);
  min-height: 100vh;
}

.mwa-bp-content > #buddypress.buddypress-wrap {
  max-width: 100% !important;
  margin: 0 !important;
}

/* Responsive: under 900px, the sidebar collapses into the drawer
   defined in the MOBILE TOP BAR block lower in this file. We only
   tweak content padding here. */
@media (max-width: 900px) {
  .mwa-bp-content {
    padding: 24px 20px;
    min-height: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   BULLETIN
   ═══════════════════════════════════════════════════════════════ */

/* ─── Composer ─── */
.mwa-portal .mwa-bulletin-composer {
  background: var(--mwa-parch-light);
  border: 1px solid var(--mwa-parch-deep);
  padding: 22px 26px;
  margin: 0 0 24px;
  position: relative;
}
.mwa-portal .mwa-bulletin-composer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--mwa-gold), var(--mwa-gold-warm), var(--mwa-gold));
}
.mwa-portal .mwa-composer-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.mwa-portal .mwa-composer-avatar {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mwa-gold-warm), var(--mwa-rust));
  color: var(--mwa-parch-light);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 700;
  font-size: 1rem;
}
.mwa-portal .mwa-composer-field {
  flex: 1;
  min-width: 0;
}
.mwa-portal #mwa-bulletin-textarea {
  width: 100%;
  background: var(--mwa-parch);
  border: 1px solid var(--mwa-parch-deep);
  padding: 12px 14px;
  font-family: 'EB Garamond', serif;
  font-size: 1rem;
  color: var(--mwa-ink-brown);
  resize: vertical;
  min-height: 80px;
  outline: none;
  transition: border-color 0.2s;
  border-radius: 0;
}
.mwa-portal #mwa-bulletin-textarea:focus {
  border-color: var(--mwa-gold);
}
.mwa-portal #mwa-bulletin-textarea::placeholder {
  color: var(--mwa-ink-faint);
  font-style: italic;
}
.mwa-portal .mwa-composer-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  gap: 16px;
  flex-wrap: wrap;
}
.mwa-portal .mwa-composer-hint {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 0.82rem;
  color: var(--mwa-ink-light);
  flex: 1;
  min-width: 0;
}
.mwa-portal .mwa-composer-hint code {
  background: var(--mwa-parch);
  padding: 1px 6px;
  font-family: 'EB Garamond', serif;
  font-style: normal;
  font-size: 0.85rem;
  color: var(--mwa-gold);
  border: 1px solid var(--mwa-parch-deep);
}
.mwa-portal .mwa-btn-post {
  background: var(--mwa-ink-brown);
  color: var(--mwa-parch-light);
  border: 1px solid var(--mwa-ink-brown);
  padding: 9px 22px;
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.2s, transform 0.2s, opacity 0.2s;
  flex-shrink: 0;
}
.mwa-portal .mwa-btn-post:hover:not(:disabled) {
  background: var(--mwa-ink);
  transform: translateY(-1px);
}
.mwa-portal .mwa-btn-post:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── Feed ─── */
.mwa-portal .mwa-bulletin-feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mwa-portal .mwa-bulletin-empty {
  background: var(--mwa-parch-light);
  border: 1px dashed var(--mwa-parch-deep);
  padding: 50px 24px;
  text-align: center;
  font-family: 'EB Garamond', serif;
  font-style: italic;
  color: var(--mwa-ink-light);
  font-size: 1rem;
}

/* ─── Post card ─── */
.mwa-portal .mwa-post {
  background: var(--mwa-parch-light);
  border: 1px solid var(--mwa-parch-deep);
  padding: 22px 26px;
  font-family: 'EB Garamond', serif;
  color: var(--mwa-ink-brown);
}
.mwa-portal .mwa-post-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
.mwa-portal .mwa-post-avatar {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--mwa-parch-deep);
  display: block;
}
.mwa-portal .mwa-post-avatar img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
.mwa-portal .mwa-post-meta { min-width: 0; }
.mwa-portal .mwa-post-author {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--mwa-ink) !important;
  text-decoration: none;
  line-height: 1.2;
  display: block;
}
.mwa-portal .mwa-post-author:hover { color: var(--mwa-gold) !important; }
.mwa-portal .mwa-post-date {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 0.82rem;
  color: var(--mwa-ink-light);
  margin-top: 2px;
}
.mwa-portal .mwa-post-body {
  font-family: 'EB Garamond', serif;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--mwa-ink-mid);
  word-wrap: break-word;
}
.mwa-portal .mwa-post-body p { margin: 0 0 10px; }
.mwa-portal .mwa-post-body p:last-child { margin-bottom: 0; }
.mwa-portal .mwa-post-body a {
  color: var(--mwa-gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.mwa-portal .mwa-post-body a:hover { color: var(--mwa-rust); }
.mwa-portal .mwa-post-body .bp-mention,
.mwa-portal .mwa-post-body a.bp-suggestions-mention {
  background: rgba(201,184,122,0.18);
  color: var(--mwa-ink) !important;
  padding: 1px 5px;
  font-style: italic;
  text-decoration: none;
}
.mwa-portal .mwa-post-body iframe {
  max-width: 100%;
  margin: 10px 0;
}

/* ─── Post actions (like / reply) ─── */
.mwa-portal .mwa-post-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--mwa-parch-deep);
}
.mwa-portal .mwa-post-like,
.mwa-portal .mwa-post-reply-toggle {
  background: transparent;
  border: 1px solid transparent;
  padding: 7px 12px;
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mwa-ink-light);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mwa-portal .mwa-post-like:hover,
.mwa-portal .mwa-post-reply-toggle:hover {
  background: rgba(201, 184, 122, 0.12);
  color: var(--mwa-ink);
}
.mwa-portal .mwa-post-like.is-liked {
  color: var(--mwa-rust);
  border-color: var(--mwa-rust);
  background: rgba(122, 53, 24, 0.08);
}
.mwa-portal .mwa-post-like.is-liked svg {
  fill: var(--mwa-rust);
  stroke: var(--mwa-rust);
}
.mwa-portal .mwa-count {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
  color: inherit;
  text-transform: none;
}

/* ─── Replies ─── */
.mwa-portal .mwa-post-replies {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--mwa-parch-deep);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mwa-portal .mwa-reply {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: var(--mwa-parch);
  border-left: 2px solid var(--mwa-parch-worn);
}
.mwa-portal .mwa-reply-avatar {
  width: 32px; height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  border: 1px solid var(--mwa-parch-deep);
}
.mwa-portal .mwa-reply-avatar img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
.mwa-portal .mwa-reply-body { min-width: 0; flex: 1; }
.mwa-portal .mwa-reply-author {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--mwa-ink) !important;
  text-decoration: none;
  margin-right: 8px;
}
.mwa-portal .mwa-reply-author:hover { color: var(--mwa-gold) !important; }
.mwa-portal .mwa-reply-date {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 0.78rem;
  color: var(--mwa-ink-light);
}
.mwa-portal .mwa-reply-content {
  font-family: 'EB Garamond', serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--mwa-ink-mid);
  margin-top: 2px;
  word-wrap: break-word;
}
.mwa-portal .mwa-reply-content p { margin: 0 0 6px; }
.mwa-portal .mwa-reply-content p:last-child { margin-bottom: 0; }

/* ─── Reply form ─── */
.mwa-portal .mwa-reply-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--mwa-parch-deep);
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.mwa-portal .mwa-reply-textarea {
  flex: 1;
  background: var(--mwa-parch);
  border: 1px solid var(--mwa-parch-deep);
  padding: 8px 12px;
  font-family: 'EB Garamond', serif;
  font-size: 0.95rem;
  color: var(--mwa-ink-brown);
  resize: vertical;
  min-height: 56px;
  outline: none;
  border-radius: 0;
}
.mwa-portal .mwa-reply-textarea:focus { border-color: var(--mwa-gold); }
.mwa-portal .mwa-reply-submit {
  background: var(--mwa-ink-brown);
  color: var(--mwa-parch-light);
  border: 1px solid var(--mwa-ink-brown);
  padding: 8px 18px;
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.2s;
  flex-shrink: 0;
}
.mwa-portal .mwa-reply-submit:hover:not(:disabled) {
  background: var(--mwa-ink);
}
.mwa-portal .mwa-reply-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── Load more button ─── */
.mwa-portal .mwa-bulletin-more {
  text-align: center;
  margin-top: 18px;
}
.mwa-portal .mwa-btn-more {
  background: transparent;
  color: var(--mwa-ink-light);
  border: 1px solid var(--mwa-parch-deep);
  padding: 10px 24px;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
}
.mwa-portal .mwa-btn-more:hover {
  background: var(--mwa-parch-light);
  color: var(--mwa-ink);
  border-color: var(--mwa-gold);
}

/* ─── Responsive ─── */
@media (max-width: 600px) {
  .mwa-portal .mwa-bulletin-composer { padding: 16px 18px; }
  .mwa-portal .mwa-post { padding: 18px 18px; }
  .mwa-portal .mwa-composer-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .mwa-portal .mwa-btn-post { width: 100%; }
  .mwa-portal .mwa-post-actions { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════
   EVENTS PAGE — mirrors the public /events/ page styling
   ═══════════════════════════════════════════════════════════════ */
.mwa-portal .mwa-events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.mwa-portal .mwa-ec {
  background: var(--mwa-parch-light);
  border: 1px solid var(--mwa-parch-deep);
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mwa-portal .mwa-ec:not(.mwa-ec-static):hover {
  transform: translateY(-5px) rotate(0.3deg);
  box-shadow: 5px 8px 32px rgba(30, 22, 10, 0.15), 0 0 0 1px var(--mwa-parch-worn);
}

.mwa-portal .mwa-ec-img-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--mwa-parch-mid);
}
.mwa-portal .mwa-ec-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: sepia(30%) brightness(0.88) contrast(1.05) saturate(0.8);
  transition: filter 0.35s, transform 0.4s;
}
.mwa-portal .mwa-ec:not(.mwa-ec-static):hover .mwa-ec-img {
  filter: sepia(15%) brightness(0.92) contrast(1.05) saturate(0.9);
  transform: scale(1.04);
}

.mwa-portal .mwa-ec-soldout-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  font-family: 'Cinzel', serif;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  background: rgba(30, 22, 10, 0.28);
}
.mwa-portal .mwa-ec-static .mwa-ec-img {
  filter: sepia(45%) brightness(0.78) contrast(1.06) saturate(0.6);
}

.mwa-portal .mwa-ec-body {
  padding: 20px 20px 18px;
}

.mwa-portal .mwa-ec-badge {
  float: right;
  margin: 0 0 12px 16px;
  background: var(--mwa-parch);
  border: 1px solid var(--mwa-parch-deep);
  padding: 8px 14px;
  text-align: center;
  min-width: 62px;
  box-shadow: 2px 2px 8px rgba(30, 22, 10, 0.08);
}
.mwa-portal .mwa-ec-mo {
  font-family: 'Cinzel', serif;
  font-size: 0.52rem;
  letter-spacing: 0.15em;
  color: var(--mwa-gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}
.mwa-portal .mwa-ec-dy {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--mwa-ink);
  line-height: 1;
  display: block;
}
.mwa-portal .mwa-ec-dy-range {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--mwa-ink);
  line-height: 1.2;
  display: block;
}

.mwa-portal .mwa-ec-type {
  font-family: 'Cinzel', serif;
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  color: var(--mwa-gold);
  text-transform: uppercase;
  margin-bottom: 7px;
}
.mwa-portal .mwa-ec-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--mwa-ink);
  margin-bottom: 8px;
}
.mwa-portal .mwa-ec-meta {
  font-size: 0.88rem;
  color: var(--mwa-ink-light);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 16px;
}

.mwa-portal .mwa-ec-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--mwa-parch-deep);
  clear: both;
}
.mwa-portal .mwa-ec-price {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  color: var(--mwa-gold-warm);
  font-weight: 600;
}
.mwa-portal .mwa-ec-price.sold {
  color: var(--mwa-ink-faint);
  text-decoration: line-through;
  font-size: 0.74rem;
}
.mwa-portal .mwa-ec-note {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  color: var(--mwa-gold);
  text-transform: uppercase;
  text-decoration: none;
  margin-left: 4px;
  font-weight: 400;
}
.mwa-portal .mwa-ec-reg {
  font-family: 'Cinzel', serif;
  font-size: 0.54rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mwa-parch-light);
  background: var(--mwa-ink-brown);
  padding: 7px 14px;
  transition: background 0.2s;
}
.mwa-portal .mwa-ec:hover .mwa-ec-reg:not(.waitlist) {
  background: var(--mwa-ink);
}
.mwa-portal .mwa-ec-reg.waitlist {
  background: transparent;
  color: var(--mwa-ink-faint);
  border: 1px solid var(--mwa-parch-deep);
  padding: 6px 13px;
}

/* Footer link — "View past events & full calendar" */
.mwa-portal .mwa-events-footer {
  margin-top: 32px;
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid var(--mwa-parch-deep);
}
.mwa-portal .mwa-events-allcta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mwa-gold);
  text-decoration: none;
  padding: 10px 16px;
  border: 1px solid transparent;
  transition: color 0.2s, gap 0.2s, border-color 0.2s;
}
.mwa-portal .mwa-events-allcta:hover {
  color: var(--mwa-rust);
  gap: 12px;
  border-color: var(--mwa-parch-deep);
}

/* ─── Member benefit callout card (sits between header and grid) ─── */
.mwa-portal .mwa-events-perk-card {
  margin: -16px 0 32px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(135deg, var(--mwa-parch-light), var(--mwa-parch));
  border: 1px solid var(--mwa-parch-deep);
  border-left: 4px solid var(--mwa-gold);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.mwa-portal .mwa-events-perk-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mwa-gold);
  background: var(--mwa-parch-light);
  border: 1px solid var(--mwa-parch-deep);
  border-radius: 50%;
}
.mwa-portal .mwa-events-perk-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mwa-gold);
  margin-bottom: 4px;
}
.mwa-portal .mwa-events-perk-copy {
  font-family: 'EB Garamond', serif;
  font-size: 1.04rem;
  line-height: 1.45;
  color: var(--mwa-ink);
  margin: 0;
}
.mwa-portal .mwa-events-perk-copy strong {
  color: var(--mwa-ink);
  font-weight: 700;
}
@media (max-width: 600px) {
  .mwa-portal .mwa-events-perk-card { gap: 14px; padding: 16px 18px; }
  .mwa-portal .mwa-events-perk-icon { width: 36px; height: 36px; }
  .mwa-portal .mwa-events-perk-copy { font-size: 0.98rem; }
}

/* ─── Admin: per-event GHL tag manager ─── */
.mwa-portal .mwa-ghl-tagmgr {
  margin-top: 48px;
  padding: 24px 26px 28px;
  background: var(--mwa-parch-light);
  border: 1px solid var(--mwa-parch-deep);
  border-radius: 4px;
}
.mwa-portal .mwa-ghl-tagmgr-head { margin-bottom: 16px; }
.mwa-portal .mwa-ghl-tagmgr-title {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--mwa-ink);
  margin: 4px 0 6px;
  line-height: 1.2;
}
.mwa-portal .mwa-ghl-tagmgr-title em {
  font-style: italic;
  color: var(--mwa-gold);
}
.mwa-portal .mwa-ghl-tagmgr-help {
  font-family: 'EB Garamond', serif;
  color: var(--mwa-ink-light);
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 760px;
}
.mwa-portal .mwa-ghl-tagmgr-table {
  margin-top: 18px;
  border-top: 1px solid var(--mwa-parch-deep);
}
.mwa-portal .mwa-ghl-tagmgr-headerrow,
.mwa-portal .mwa-ghl-tagmgr-row {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr auto;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--mwa-parch-mid);
  align-items: center;
  position: relative;
}
.mwa-portal .mwa-ghl-tagmgr-headerrow {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mwa-ink-faint);
  padding: 8px 0;
}
.mwa-portal .mwa-ghl-tagmgr-event-title {
  font-family: 'EB Garamond', serif;
  font-size: 1.02rem;
  color: var(--mwa-ink);
  font-weight: 600;
  line-height: 1.25;
}
.mwa-portal .mwa-ghl-tagmgr-event-meta {
  font-family: 'EB Garamond', serif;
  font-size: 0.78rem;
  color: var(--mwa-ink-faint);
  margin-top: 3px;
  line-height: 1.4;
}
.mwa-portal .mwa-ghl-tagmgr-event-meta code {
  font-family: Menlo, Consolas, monospace;
  font-size: 0.78rem;
  background: var(--mwa-parch);
  border: 1px solid var(--mwa-parch-deep);
  padding: 1px 5px;
  border-radius: 2px;
  color: var(--mwa-ink-brown);
}
.mwa-portal .mwa-ghl-tagmgr-status {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-family: 'Cinzel', serif;
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid currentColor;
}
.mwa-portal .mwa-ghl-tagmgr-status.auto   { color: var(--mwa-ink-faint); }
.mwa-portal .mwa-ghl-tagmgr-status.custom { color: var(--mwa-gold); }
.mwa-portal .mwa-ghl-tagmgr-status.none   { color: var(--mwa-rust, #c8332a); }
.mwa-portal .mwa-ghl-tagmgr-input {
  width: 100%;
  padding: 8px 10px;
  font-family: Menlo, Consolas, monospace;
  font-size: 0.86rem;
  color: var(--mwa-ink);
  background: #fff;
  border: 1px solid var(--mwa-parch-deep);
  border-radius: 2px;
}
.mwa-portal .mwa-ghl-tagmgr-input:focus {
  outline: none;
  border-color: var(--mwa-gold);
  box-shadow: 0 0 0 2px rgba(154,120,40,0.15);
}
.mwa-portal .mwa-ghl-tagmgr-actions {
  display: flex;
  gap: 6px;
}
.mwa-portal .mwa-ghl-tagmgr-btn {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid var(--mwa-parch-deep);
  background: var(--mwa-parch);
  color: var(--mwa-ink-brown);
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.15s;
}
.mwa-portal .mwa-ghl-tagmgr-btn:hover { background: var(--mwa-parch-mid); }
.mwa-portal .mwa-ghl-tagmgr-btn.save  { background: var(--mwa-ink-brown); color: var(--mwa-parch-light); border-color: var(--mwa-ink-brown); }
.mwa-portal .mwa-ghl-tagmgr-btn.save:hover { background: var(--mwa-ink); }
.mwa-portal .mwa-ghl-tagmgr-btn[disabled] { opacity: 0.55; cursor: progress; }
.mwa-portal .mwa-ghl-tagmgr-toast {
  position: absolute;
  right: 8px;
  bottom: -4px;
  font-family: 'Cinzel', serif;
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mwa-gold);
  background: var(--mwa-parch-light);
  padding: 2px 8px;
  border-radius: 2px;
}
@media (max-width: 760px) {
  .mwa-portal .mwa-ghl-tagmgr-headerrow { display: none; }
  .mwa-portal .mwa-ghl-tagmgr-row {
    grid-template-columns: 1fr;
    padding: 14px 0;
  }
  .mwa-portal .mwa-ghl-tagmgr-actions { justify-content: flex-end; }
}

/* Responsive */
@media (max-width: 1100px) {
  .mwa-portal .mwa-events-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .mwa-portal .mwa-events-grid {
    grid-template-columns: 1fr;
  }
  .mwa-portal .mwa-ec-soldout-overlay {
    font-size: 1.4rem;
  }
}


/* ═══════════════════════════════════════════════════════════════
   LIBRARY — ADMIN CHECKOUT & ADD-BOOK CONTROLS  (v1.11)
   Admin-only controls are double-gated: rendered only when
   MWA_PORTAL.current_user.is_admin is true AND scoped under
   .mwa-portal.is-admin so CSS can hide them as a safety net.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Library page admin actions (top-right of page header) ─── */
.mwa-portal .mwa-library-admin-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mwa-portal:not(.is-admin) .mwa-library-admin-actions,
.mwa-portal:not(.is-admin) .mwa-btn-add-book,
.mwa-portal:not(.is-admin) .mwa-book-admin-btn,
.mwa-portal:not(.is-admin) .mwa-book-checkin-btn {
  display: none !important;
}

.mwa-portal .mwa-btn-add-book {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mwa-parch-light);
  background: linear-gradient(180deg, var(--mwa-ink-brown), var(--mwa-ink));
  border: 1px solid var(--mwa-ink);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s;
}
.mwa-portal .mwa-btn-add-book:hover {
  background: linear-gradient(180deg, var(--mwa-gold-warm), var(--mwa-gold));
  color: #fff;
  transform: translateY(-1px);
}
.mwa-portal .mwa-btn-add-book svg { display: block; }

/* ─── On-book admin "Checkouts" button (only when not checked out) ─── */
.mwa-portal .mwa-book { /* establish positioning context */ position: relative; }
.mwa-portal .mwa-book-admin-btn {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 6px;
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mwa-parch-light);
  background: rgba(30, 22, 10, 0.85);
  border: 1px solid rgba(255, 240, 220, 0.35);
  border-radius: 1px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s, transform 0.18s, background 0.18s;
  z-index: 3;
}
.mwa-portal .mwa-book:hover .mwa-book-admin-btn,
.mwa-portal .mwa-book:focus-within .mwa-book-admin-btn {
  opacity: 1;
  transform: translateY(0);
}
.mwa-portal .mwa-book-admin-btn:hover {
  background: var(--mwa-gold);
  color: #fff;
}
.mwa-portal .mwa-book-admin-btn svg { display: block; }

/* ─── "Checked out by …" band — visible to ALL members ─── */
/* The band sits IN FLOW inside the spine, between the author name and
   the series footer, so it never covers the book's information. It uses
   a slight tilt + negative side margin to keep the rubber-stamp look. */
.mwa-portal .mwa-book.is-checked-out { /* slight desaturation cue */
  filter: saturate(0.7) brightness(0.95);
}
.mwa-portal .mwa-book-checkout-band {
  margin: 6px -10px;
  padding: 5px 8px 6px;
  text-align: center;
  background: rgba(122, 53, 24, 0.94);   /* rust */
  color: #fef6e0;
  border-top: 1px dashed rgba(255, 240, 220, 0.55);
  border-bottom: 1px dashed rgba(255, 240, 220, 0.55);
  box-shadow: 0 1px 6px rgba(30, 22, 10, 0.35);
  transform: rotate(-1.4deg);
  position: relative;
  z-index: 2;
}
.mwa-portal .mwa-book-checkout-stamp {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 240, 220, 0.92);
  margin-bottom: 2px;
}
.mwa-portal .mwa-book-checkout-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff6dc;
  line-height: 1.15;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.mwa-portal .mwa-book-checkin-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 3px 8px;
  font-family: 'Cinzel', serif;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mwa-ink);
  background: rgba(255, 240, 220, 0.92);
  border: 1px solid rgba(30, 22, 10, 0.4);
  border-radius: 1px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mwa-portal .mwa-book-checkin-btn:hover {
  background: var(--mwa-success);
  color: #fff;
}
.mwa-portal .mwa-book-checkin-btn svg { display: block; }

/* Custom-book spines get a thin gold edge so admins can spot them. */
.mwa-portal .mwa-book.is-custom {
  border-color: rgba(196, 154, 56, 0.7);
  box-shadow: inset 0 0 0 1px rgba(196, 154, 56, 0.25);
}

/* ═══════════════════════════════════════════════════════════════
   MODAL — shared chrome for the member picker AND add-book form
   ═══════════════════════════════════════════════════════════════ */
body.mwa-modal-open { overflow: hidden; }

.mwa-checkout-modal {
  /* IMPORTANT: modals are appended to <body>, OUTSIDE the .mwa-portal
     wrapper, so the palette custom properties defined on .mwa-portal
     don't cascade in. Redeclare them here so the dialog/header/buttons
     all paint their parchment colours correctly. */
  --mwa-parch-light:  #f7f0dc;
  --mwa-parch:        #efe4c4;
  --mwa-parch-mid:    #e4d5a8;
  --mwa-parch-deep:   #d9c88e;
  --mwa-parch-worn:   #c9b87a;
  --mwa-ink:          #1e160a;
  --mwa-ink-brown:    #2e1f0e;
  --mwa-ink-mid:      #4a3520;
  --mwa-ink-light:    #6b5035;
  --mwa-ink-faint:    #8a7058;
  --mwa-gold:         #8a6520;
  --mwa-gold-warm:    #a07828;
  --mwa-gold-bright:  #c49a38;
  --mwa-rust:         #7a3518;
  --mwa-success:      #4a6b2a;

  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  font-family: 'EB Garamond', Georgia, serif;
  color: var(--mwa-ink-brown);
}
.mwa-checkout-modal *, .mwa-checkout-modal *::before, .mwa-checkout-modal *::after {
  box-sizing: border-box;
}
.mwa-checkout-modal.is-open { display: block; }

.mwa-checkout-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 6, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.mwa-checkout-dialog {
  position: relative;
  margin: 6vh auto;
  width: min(560px, calc(100% - 32px));
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--mwa-parch-light);
  border: 1px solid var(--mwa-ink);
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(20, 14, 6, 0.55);
  overflow: hidden;
}

.mwa-checkout-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 14px;
  border-bottom: 1px solid rgba(30, 22, 10, 0.15);
  background: linear-gradient(180deg, var(--mwa-parch-light), var(--mwa-parch));
}
.mwa-checkout-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mwa-gold);
  margin-bottom: 4px;
}
.mwa-checkout-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--mwa-ink);
  line-height: 1.2;
}
.mwa-checkout-subtitle {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--mwa-ink-light);
  margin-top: 4px;
}
.mwa-checkout-close {
  background: transparent;
  border: 1px solid rgba(30, 22, 10, 0.2);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--mwa-ink-light);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.mwa-checkout-close:hover {
  background: var(--mwa-ink);
  color: #fff;
}

/* ─── Member picker ─── */
.mwa-checkout-searchwrap {
  position: relative;
  padding: 14px 24px 0;
  display: flex;
  align-items: center;
}
.mwa-checkout-searchwrap svg {
  position: absolute;
  left: 36px;
  top: 50%;
  transform: translateY(calc(-50% + 7px));
  color: var(--mwa-ink-faint);
  pointer-events: none;
}
.mwa-checkout-search {
  width: 100%;
  padding: 10px 12px 10px 36px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  color: var(--mwa-ink);
  background: #fff;
  border: 1px solid rgba(30, 22, 10, 0.25);
  border-radius: 2px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mwa-checkout-search:focus {
  border-color: var(--mwa-gold);
  box-shadow: 0 0 0 3px rgba(196, 154, 56, 0.2);
}

.mwa-checkout-list {
  padding: 12px 12px 18px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.mwa-checkout-empty {
  padding: 24px 12px;
  text-align: center;
  font-style: italic;
  color: var(--mwa-ink-faint);
}
.mwa-checkout-member {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, border-color 0.12s;
}
.mwa-checkout-member:hover,
.mwa-checkout-member:focus {
  background: rgba(196, 154, 56, 0.12);
  border-color: rgba(196, 154, 56, 0.4);
  outline: none;
}
.mwa-checkout-member-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fef6e0;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.mwa-checkout-member-info {
  flex: 1 1 auto;
  min-width: 0;
}
.mwa-checkout-member-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--mwa-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mwa-checkout-member-title {
  font-style: italic;
  font-size: 0.82rem;
  color: var(--mwa-ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mwa-checkout-member-cta {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mwa-gold);
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.mwa-checkout-member:hover .mwa-checkout-member-cta,
.mwa-checkout-member:focus .mwa-checkout-member-cta {
  opacity: 1;
}

/* ─── Add Book form ─── */
.mwa-addbook-form {
  padding: 18px 24px 22px;
  overflow-y: auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mwa-addbook-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mwa-addbook-label {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mwa-ink-mid);
}
.mwa-addbook-opt {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--mwa-ink-faint);
  margin-left: 4px;
}
.mwa-addbook-form input[type="text"],
.mwa-addbook-form select {
  width: 100%;
  padding: 9px 11px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  color: var(--mwa-ink);
  background: #fff;
  border: 1px solid rgba(30, 22, 10, 0.25);
  border-radius: 2px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mwa-addbook-form input[type="text"]:focus,
.mwa-addbook-form select:focus {
  border-color: var(--mwa-gold);
  box-shadow: 0 0 0 3px rgba(196, 154, 56, 0.2);
}
.mwa-addbook-error {
  padding: 8px 12px;
  font-style: italic;
  color: var(--mwa-rust);
  background: rgba(122, 53, 24, 0.08);
  border-left: 3px solid var(--mwa-rust);
  border-radius: 2px;
}
.mwa-addbook-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}
.mwa-addbook-cancel,
.mwa-addbook-submit {
  padding: 10px 18px;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.12s;
}
.mwa-addbook-cancel {
  background: transparent;
  color: var(--mwa-ink-mid);
  border: 1px solid rgba(30, 22, 10, 0.25);
}
.mwa-addbook-cancel:hover {
  background: rgba(30, 22, 10, 0.06);
  color: var(--mwa-ink);
}
.mwa-addbook-submit {
  background: linear-gradient(180deg, var(--mwa-ink-brown), var(--mwa-ink));
  color: var(--mwa-parch-light);
  border: 1px solid var(--mwa-ink);
}
.mwa-addbook-submit:hover:not([disabled]) {
  background: linear-gradient(180deg, var(--mwa-gold-warm), var(--mwa-gold));
  color: #fff;
  transform: translateY(-1px);
}
.mwa-addbook-submit[disabled] {
  opacity: 0.65;
  cursor: wait;
}

@media (max-width: 600px) {
  .mwa-checkout-dialog { margin: 0; max-height: 100vh; height: 100vh; width: 100%; border-radius: 0; }
  .mwa-portal .mwa-book-checkout-stamp { font-size: 0.5rem; }
  .mwa-portal .mwa-book-checkout-name { font-size: 0.78rem; }
  .mwa-portal .mwa-book-admin-btn { opacity: 1; transform: none; } /* touch — always visible */
}


/* ═══════════════════════════════════════════════════════════════
   LIBRARY — CATEGORY FILTER PILLS + SEARCH BAR  (v1.12)
   The legend was promoted to a clickable filter bar; a search
   input lives alongside it for title/author lookup.
   ═══════════════════════════════════════════════════════════════ */

.mwa-portal .mwa-library-filter-bar {
  justify-content: space-between;
}

.mwa-portal .mwa-library-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* Buttons default to bold; pills above are styled assuming <div>, so
     normalize so library pills match the rolodex/bulletin look. */
  font-weight: 400;
  line-height: 1;
}

.mwa-portal .mwa-library-pill .mwa-binding-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid rgba(30, 22, 10, 0.45);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 220, 0.35);
  flex-shrink: 0;
}

/* Keep the swatch readable when the pill becomes active (dark background). */
.mwa-portal .mwa-library-pill.active .mwa-binding-swatch {
  border-color: rgba(255, 240, 220, 0.55);
}

.mwa-portal .mwa-library-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 280px;
  min-width: 200px;
}
.mwa-portal .mwa-library-search svg {
  position: absolute;
  left: 11px;
  color: var(--mwa-ink-faint);
  pointer-events: none;
}
.mwa-portal .mwa-library-search input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.95rem;
  color: var(--mwa-ink);
  background: #fff;
  border: 1px solid var(--mwa-parch-deep);
  border-radius: 2px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mwa-portal .mwa-library-search input::placeholder {
  font-style: italic;
  color: var(--mwa-ink-faint);
}
.mwa-portal .mwa-library-search input:focus {
  border-color: var(--mwa-gold);
  box-shadow: 0 0 0 3px rgba(196, 154, 56, 0.18);
}

.mwa-portal .mwa-library-empty {
  grid-column: 1 / -1;
  padding: 40px 20px;
  text-align: center;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--mwa-ink-faint);
  background: var(--mwa-parch-light);
  border: 1px dashed var(--mwa-parch-deep);
  border-radius: 2px;
}

/* When a custom book has no series, the footer line collapses naturally.
   Reserve the slot so spine-line spacing stays even with Britannica books. */
.mwa-portal .mwa-book.is-custom .mwa-book-footer:empty::before {
  content: '\00a0';   /* non-breaking space — preserves vertical rhythm */
}

@media (max-width: 700px) {
  .mwa-portal .mwa-library-search {
    flex: 1 1 100%;
  }
}


/* ═══════════════════════════════════════════════════════════════
   ROLODEX — MEMBER BIO LINE + INLINE EDITOR  (v1.13)
   Short bio (≤120 chars) shown under the member's name on each
   roster card. The user's own card (and admins on any card) get
   a small pencil to edit in-place.
   ═══════════════════════════════════════════════════════════════ */

/* The right-hand column next to the avatar — name + bio + handle */
.mwa-portal .mwa-roster-namecol {
  min-width: 0;     /* let truncation/wrapping work inside flex */
  flex: 1 1 auto;
}

.mwa-portal .mwa-roster-bio {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 10px;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--mwa-ink-light);
  position: relative;
}
.mwa-portal .mwa-roster-bio-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* The little pencil — quiet by default, picks up gold on hover. */
.mwa-portal .mwa-roster-bio-edit-btn {
  background: transparent;
  border: 0;
  padding: 2px;
  margin: 1px 0 0;
  color: var(--mwa-ink-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s, color 0.15s;
  flex-shrink: 0;
}
.mwa-portal .mwa-roster-card:hover .mwa-roster-bio-edit-btn,
.mwa-portal .mwa-roster-bio:focus-within .mwa-roster-bio-edit-btn {
  opacity: 1;
}
.mwa-portal .mwa-roster-bio-edit-btn:hover {
  color: var(--mwa-gold);
}

/* Empty-state pill — visible only on your own card if no bio is set. */
.mwa-portal .mwa-roster-bio.is-empty {
  margin-top: 6px;
}
.mwa-portal .mwa-roster-bio-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mwa-ink-faint);
  background: transparent;
  border: 1px dashed rgba(30, 22, 10, 0.25);
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.mwa-portal .mwa-roster-bio-add:hover {
  color: var(--mwa-gold);
  border-color: var(--mwa-gold);
  background: rgba(196, 154, 56, 0.06);
}

/* ─── Inline editor ─── */
.mwa-portal .mwa-roster-bio.is-editing {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 6px;
  margin-top: 6px;
  background: rgba(247, 240, 220, 0.7);
  border: 1px solid var(--mwa-parch-worn);
  border-radius: 2px;
}
.mwa-portal .mwa-roster-bio-input {
  width: 100%;
  resize: vertical;
  min-height: 44px;
  padding: 6px 8px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--mwa-ink);
  background: #fff;
  border: 1px solid rgba(30, 22, 10, 0.22);
  border-radius: 2px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mwa-portal .mwa-roster-bio-input:focus {
  border-color: var(--mwa-gold);
  box-shadow: 0 0 0 3px rgba(196, 154, 56, 0.18);
}
.mwa-portal .mwa-roster-bio-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.mwa-portal .mwa-roster-bio-counter {
  flex: 1 1 auto;
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mwa-ink-faint);
}
.mwa-portal .mwa-roster-bio-counter.is-near { color: var(--mwa-gold); }
.mwa-portal .mwa-roster-bio-counter.is-over { color: var(--mwa-rust); }

.mwa-portal .mwa-roster-bio-btn {
  padding: 5px 11px;
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mwa-portal .mwa-roster-bio-btn.cancel {
  background: transparent;
  color: var(--mwa-ink-light);
  border: 1px solid rgba(30, 22, 10, 0.22);
}
.mwa-portal .mwa-roster-bio-btn.cancel:hover {
  background: rgba(30, 22, 10, 0.06);
  color: var(--mwa-ink);
}
.mwa-portal .mwa-roster-bio-btn.save {
  background: var(--mwa-ink-brown);
  color: var(--mwa-parch-light);
  border: 1px solid var(--mwa-ink-brown);
}
.mwa-portal .mwa-roster-bio-btn.save:hover:not([disabled]) {
  background: var(--mwa-gold-warm);
  border-color: var(--mwa-gold-warm);
}
.mwa-portal .mwa-roster-bio-btn[disabled] { opacity: 0.6; cursor: wait; }


/* ═══════════════════════════════════════════════════════════════
   LIBRARY — REQUEST FLOW (non-admin)  +  DASHBOARD ADMIN PANEL  (v1.15)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Non-admin "Check this book out" button ───
   Same footer slot as the admin Checkouts button. Visible on hover,
   touch-friendly always-visible at mobile widths. */
.mwa-portal .mwa-book-request-btn,
.mwa-portal .mwa-book-request-pending {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 6px;
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 1px;
  z-index: 3;
}

.mwa-portal .mwa-book-request-btn {
  color: var(--mwa-parch-light);
  background: rgba(30, 22, 10, 0.85);
  border: 1px solid rgba(255, 240, 220, 0.35);
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s, transform 0.18s, background 0.18s, color 0.18s;
}
.mwa-portal .mwa-book:hover .mwa-book-request-btn,
.mwa-portal .mwa-book:focus-within .mwa-book-request-btn {
  opacity: 1;
  transform: translateY(0);
}
.mwa-portal .mwa-book-request-btn:hover {
  background: var(--mwa-gold);
  color: #fff;
}
.mwa-portal .mwa-book-request-btn svg { display: block; }

/* Pending state — always visible (a queued request is information). */
.mwa-portal .mwa-book-request-pending {
  background: rgba(74, 107, 42, 0.92);   /* muted Academy green */
  color: #fef6e0;
  border: 1px solid rgba(255, 240, 220, 0.4);
  gap: 0;
  justify-content: space-between;
  padding: 0;
}
.mwa-portal .mwa-book-request-pending-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 8px;
  flex: 1 1 auto;
  justify-content: center;
}
.mwa-portal .mwa-book-request-pending-label svg { display: block; }

.mwa-portal .mwa-book-request-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  align-self: stretch;
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
  border: 0;
  border-left: 1px solid rgba(255, 240, 220, 0.35);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.15s;
}
.mwa-portal .mwa-book-request-cancel:hover {
  background: var(--mwa-rust);
}

@media (max-width: 600px) {
  .mwa-portal .mwa-book-request-btn { opacity: 1; transform: none; }
}

/* ─── Request modal — small additions on top of the existing modal chrome ─── */
.mwa-portal .mwa-request-confirm,
.mwa-request-confirm {
  margin-bottom: 8px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.96rem;
  color: var(--mwa-ink-light);
  line-height: 1.45;
}
.mwa-portal .mwa-request-asline,
.mwa-request-asline {
  padding: 9px 12px;
  background: rgba(196, 154, 56, 0.08);
  border: 1px solid rgba(196, 154, 56, 0.3);
  border-radius: 2px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.95rem;
  color: var(--mwa-ink);
}
.mwa-request-form-textarea,
.mwa-addbook-form textarea {
  width: 100%;
  padding: 9px 11px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--mwa-ink);
  background: #fff;
  border: 1px solid rgba(30, 22, 10, 0.25);
  border-radius: 2px;
  outline: none;
  resize: vertical;
  min-height: 56px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mwa-addbook-form textarea:focus {
  border-color: var(--mwa-gold);
  box-shadow: 0 0 0 3px rgba(196, 154, 56, 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — ADMIN PANEL
   Compact two-section panel that sits below the existing dashboard
   grid. Scoped for admins via the parent .mwa-portal.is-admin.
   ═══════════════════════════════════════════════════════════════ */

.mwa-portal .mwa-admin-panel {
  margin-top: 28px;
  background: var(--mwa-parch-light);
  border: 1px solid var(--mwa-parch-deep);
  border-radius: 2px;
  /* Vintage admin-stamp ribbon */
  background-image: linear-gradient(180deg, rgba(196, 154, 56, 0.05), transparent 30%);
}

.mwa-portal .mwa-admin-panel-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px 12px;
  border-bottom: 1px solid rgba(217, 200, 142, 0.7);
}
.mwa-portal .mwa-admin-panel-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mwa-gold);
  margin-bottom: 3px;
}
.mwa-portal .mwa-admin-panel-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--mwa-ink);
  margin: 0;
  line-height: 1.2;
}
.mwa-portal .mwa-admin-panel-title em {
  font-style: italic;
  color: var(--mwa-gold);
}
.mwa-portal .mwa-admin-refresh {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mwa-ink-light);
  background: transparent;
  border: 1px solid var(--mwa-parch-worn);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mwa-portal .mwa-admin-refresh:hover {
  background: var(--mwa-ink-brown);
  color: var(--mwa-parch-light);
  border-color: var(--mwa-ink-brown);
}
.mwa-portal .mwa-admin-refresh svg { display: block; }
.mwa-portal .mwa-admin-refresh[disabled],
.mwa-portal .mwa-admin-refresh.is-loading {
  opacity: 0.65;
  cursor: progress;
}
.mwa-portal .mwa-admin-refresh.is-loading svg {
  animation: mwa-spin 0.9s linear infinite;
}
@keyframes mwa-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.mwa-portal .mwa-events-refresh-btn { align-self: flex-end; }

.mwa-portal .mwa-admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.mwa-portal .mwa-admin-section {
  padding: 14px 18px 16px;
}
.mwa-portal .mwa-admin-section + .mwa-admin-section {
  border-left: 1px solid rgba(217, 200, 142, 0.7);
}

.mwa-portal .mwa-admin-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.mwa-portal .mwa-admin-section-title {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mwa-ink-mid);
  margin: 0;
}
.mwa-portal .mwa-admin-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 1px 6px;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--mwa-parch-light);
  background: var(--mwa-ink-brown);
  border-radius: 10px;
  line-height: 1.4;
}

.mwa-portal .mwa-admin-section-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mwa-portal .mwa-admin-empty {
  padding: 14px 4px;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--mwa-ink-faint);
  text-align: center;
}

.mwa-portal .mwa-admin-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--mwa-parch-worn);
  border-radius: 2px;
  font-size: 0.9rem;
}

.mwa-portal .mwa-admin-row-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--mwa-parch-deep), var(--mwa-parch-worn));
}
.mwa-portal .mwa-admin-row-avatar-text {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mwa-ink-light);
}

.mwa-portal .mwa-admin-row-body {
  flex: 1 1 auto;
  min-width: 0;
}
.mwa-portal .mwa-admin-row-line1 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-family: 'EB Garamond', Georgia, serif;
  color: var(--mwa-ink);
}
.mwa-portal .mwa-admin-row-line1 strong {
  font-weight: 600;
}
.mwa-portal .mwa-admin-row-sep {
  color: var(--mwa-ink-faint);
  font-size: 0.85rem;
}
.mwa-portal .mwa-admin-row-title {
  font-style: italic;
  color: var(--mwa-ink-light);
}
.mwa-portal .mwa-admin-row-meta {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mwa-ink-faint);
  margin-top: 2px;
}
.mwa-portal .mwa-admin-row-notes {
  margin-top: 5px;
  padding: 5px 8px;
  background: rgba(196, 154, 56, 0.08);
  border-left: 2px solid var(--mwa-gold);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--mwa-ink-light);
  line-height: 1.35;
}

.mwa-portal .mwa-admin-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.mwa-portal .mwa-admin-btn {
  padding: 5px 10px;
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mwa-portal .mwa-admin-btn.approve {
  background: var(--mwa-success);
  color: #fff;
  border: 1px solid var(--mwa-success);
}
.mwa-portal .mwa-admin-btn.approve:hover { background: #3a5520; border-color: #3a5520; }

.mwa-portal .mwa-admin-btn.deny {
  background: transparent;
  color: var(--mwa-rust);
  border: 1px solid rgba(122, 53, 24, 0.4);
}
.mwa-portal .mwa-admin-btn.deny:hover {
  background: var(--mwa-rust);
  color: #fff;
  border-color: var(--mwa-rust);
}

.mwa-portal .mwa-admin-btn.checkin {
  background: var(--mwa-ink-brown);
  color: var(--mwa-parch-light);
  border: 1px solid var(--mwa-ink-brown);
}
.mwa-portal .mwa-admin-btn.checkin:hover {
  background: var(--mwa-gold-warm);
  border-color: var(--mwa-gold-warm);
}

@media (max-width: 900px) {
  .mwa-portal .mwa-admin-grid { grid-template-columns: 1fr; }
  .mwa-portal .mwa-admin-section + .mwa-admin-section {
    border-left: 0;
    border-top: 1px solid rgba(217, 200, 142, 0.7);
  }
}

@media (max-width: 600px) {
  .mwa-portal .mwa-admin-row {
    flex-wrap: wrap;
  }
  .mwa-portal .mwa-admin-row-actions {
    flex-basis: 100%;
    justify-content: flex-end;
  }
}


/* ═══════════════════════════════════════════════════════════════
   ROLODEX — SOCIAL LINKS  (v1.16)
   Small inline icons under the bio/title, with an "Add social links"
   affordance on the user's own card.
   ═══════════════════════════════════════════════════════════════ */
.mwa-portal .mwa-roster-social {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.mwa-portal .mwa-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(30, 22, 10, 0.06);
  border: 1px solid var(--mwa-parch-worn);
  color: var(--mwa-ink-light);
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.mwa-portal .mwa-social-link:hover {
  background: var(--mwa-ink-brown);
  color: var(--mwa-parch-light);
  border-color: var(--mwa-ink-brown);
  transform: translateY(-1px);
}
.mwa-portal .mwa-social-link svg { display: block; }

.mwa-portal .mwa-social-edit-btn {
  background: transparent;
  border: 0;
  padding: 2px;
  color: var(--mwa-ink-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s, color 0.15s;
}
.mwa-portal .mwa-roster-card:hover .mwa-social-edit-btn,
.mwa-portal .mwa-roster-social:focus-within .mwa-social-edit-btn {
  opacity: 1;
}
.mwa-portal .mwa-social-edit-btn:hover { color: var(--mwa-gold); }

/* Empty-state add pill — own card only */
.mwa-portal .mwa-roster-social.is-empty {
  margin: 4px 0 12px;
}
.mwa-portal .mwa-social-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mwa-ink-faint);
  background: transparent;
  border: 1px dashed rgba(30, 22, 10, 0.25);
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.mwa-portal .mwa-social-add:hover {
  color: var(--mwa-gold);
  border-color: var(--mwa-gold);
  background: rgba(196, 154, 56, 0.06);
}

/* ─── Social-links modal: per-field inline icon ─── */
.mwa-social-field .mwa-addbook-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mwa-social-field-icon {
  display: inline-flex;
  align-items: center;
  color: var(--mwa-ink-mid);
}
.mwa-social-field-icon svg { display: block; }


/* ═══════════════════════════════════════════════════════════════
   ADD BOOK MODAL — Summary & Year fields + AI Generate button (v1.17)
   ═══════════════════════════════════════════════════════════════ */
.mwa-checkout-modal .mwa-addbook-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.mwa-checkout-modal .mwa-addbook-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mwa-parch-light);
  background: linear-gradient(180deg, var(--mwa-gold-warm), var(--mwa-gold));
  border: 1px solid var(--mwa-gold);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.12s, opacity 0.15s;
}
.mwa-checkout-modal .mwa-addbook-ai-btn:hover:not([disabled]) {
  background: linear-gradient(180deg, var(--mwa-ink-brown), var(--mwa-ink));
  transform: translateY(-1px);
}
.mwa-checkout-modal .mwa-addbook-ai-btn[disabled] {
  opacity: 0.55;
  cursor: wait;
}
.mwa-checkout-modal .mwa-addbook-ai-btn svg { display: block; }


/* ═══════════════════════════════════════════════════════════════
   LIBRARY — LEARN MORE BUTTON + CHECKED OUT BADGE  (v1.18)
   The shelf card is now a clickable launcher to the detail modal.
   Spine summary is gone; the band overlay is replaced by a quiet
   "Checked Out" corner stamp.
   ═══════════════════════════════════════════════════════════════ */

/* Hover button at the bottom of every available card, mirroring the
   "Checkouts" / "Check this book out" pills it replaces. */
.mwa-portal .mwa-book-learn-btn {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mwa-parch-light);
  background: rgba(30, 22, 10, 0.88);
  border: 1px solid rgba(255, 240, 220, 0.4);
  border-radius: 1px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s, transform 0.18s, background 0.18s, color 0.18s;
  z-index: 3;
}
.mwa-portal .mwa-book:hover .mwa-book-learn-btn,
.mwa-portal .mwa-book:focus-within .mwa-book-learn-btn,
.mwa-portal .mwa-book:focus-visible .mwa-book-learn-btn {
  opacity: 1;
  transform: translateY(0);
}
.mwa-portal .mwa-book-learn-btn:hover {
  background: var(--mwa-gold);
  border-color: var(--mwa-gold);
  color: #fff;
}

/* Checked-out banner — sits in the empty space between the title/author
   group and the footer credit, painting a clear "Checked Out by Name"
   strip across the spine. */
.mwa-portal .mwa-book.is-checked-out { filter: saturate(0.72) brightness(0.92); }
.mwa-portal .mwa-book-checkout-banner {
  margin: 0 -12px;             /* overhang the spine padding on both sides */
  padding: 6px 8px 7px;
  text-align: center;
  background: rgba(122, 53, 24, 0.94);
  color: #fef6e0;
  border-top: 1px dashed rgba(255, 240, 220, 0.55);
  border-bottom: 1px dashed rgba(255, 240, 220, 0.55);
  box-shadow: 0 1px 6px rgba(20, 14, 6, 0.35);
  pointer-events: none;
}
.mwa-portal .mwa-book-checkout-stamp {
  font-family: 'Cinzel', serif;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 240, 220, 0.92);
  margin-bottom: 1px;
}
.mwa-portal .mwa-book-checkout-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff6dc;
  line-height: 1.15;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

@media (max-width: 600px) {
  .mwa-portal .mwa-book-learn-btn { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   BOOK DETAIL MODAL
   Two-column layout: a stylized mini "spine" in the binding color
   on the left, full info + paragraph summary + actions on the right.
   ═══════════════════════════════════════════════════════════════ */
/* Override the generic modal display so the dialog flex-centers
   on screen instead of sitting near the top. */
.mwa-detail-modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mwa-detail-modal .mwa-detail-dialog {
  position: relative;
  margin: 0;
  width: min(820px, calc(100% - 32px));
  max-height: min(90vh, calc(100vh - 40px));
  background: var(--mwa-parch-light);
  border: 1px solid var(--mwa-ink);
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(20, 14, 6, 0.55);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--mwa-ink-brown);
  font-family: 'EB Garamond', Georgia, serif;
}

.mwa-detail-modal .mwa-detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
}

.mwa-detail-modal .mwa-detail-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
}

.mwa-detail-modal .mwa-detail-spine-wrap {
  background: linear-gradient(180deg, var(--mwa-parch), var(--mwa-parch-mid));
  padding: 36px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(217, 200, 142, 0.7);
}

.mwa-detail-spine {
  /* Match the shelf-card look so the modal's mini-spine reads as the
     same book the user just clicked on. Sized a touch larger than a
     shelf card so it feels prominent inside the modal. */
  width: 165px;
  height: 280px;
  border: 1px solid rgba(30, 22, 10, 0.35);
  border-radius: 2px;
  box-shadow: 4px 6px 18px rgba(30, 22, 10, 0.25);
  overflow: hidden;
  position: relative;
}
.mwa-detail-modal .mwa-detail-spine .mwa-book-spine {
  height: 100%;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  position: relative;
}
.mwa-detail-modal .mwa-detail-spine .mwa-book-spine::before {
  content: '';
  position: absolute;
  top: 8px; left: 8px; right: 8px; bottom: 8px;
  border: 1px solid rgba(255, 240, 220, 0.25);
  pointer-events: none;
}
.mwa-detail-modal .mwa-detail-spine .mwa-book-center {
  display: flex; flex-direction: column; gap: 4px;
}
.mwa-detail-modal .mwa-detail-spine .mwa-book-volume {
  font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.22em;
  color: rgba(255, 240, 220, 0.7); margin-top: 6px;
}
.mwa-detail-modal .mwa-detail-spine .mwa-book-title {
  font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 0.95rem;
  font-weight: 600; color: #fef6e0; line-height: 1.25; padding: 0 4px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.mwa-detail-modal .mwa-detail-spine .mwa-book-author {
  font-family: 'EB Garamond', serif; font-style: italic; font-size: 0.78rem;
  color: rgba(255, 240, 220, 0.85); padding: 0 4px; line-height: 1.3;
}
.mwa-detail-modal .mwa-detail-spine .mwa-book-footer {
  font-family: 'Cinzel', serif; font-size: 0.42rem; letter-spacing: 0.18em;
  color: rgba(255, 240, 220, 0.55); margin-bottom: 6px;
}

/* Right column — info + actions */
.mwa-detail-modal .mwa-detail-content {
  padding: 36px 36px 28px 36px;
  overflow-y: auto;
  min-width: 0;
}
.mwa-detail-modal .mwa-detail-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mwa-gold);
  margin-bottom: 8px;
}
.mwa-detail-modal .mwa-detail-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--mwa-ink);
  line-height: 1.15;
  margin: 0 0 6px;
}
.mwa-detail-modal .mwa-detail-author {
  font-style: italic;
  font-size: 1.05rem;
  color: var(--mwa-ink-light);
  margin-bottom: 14px;
}
.mwa-detail-modal .mwa-detail-genre-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 6px;
  background: rgba(196, 154, 56, 0.10);
  border: 1px solid rgba(196, 154, 56, 0.35);
  border-radius: 2px;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mwa-ink-mid);
  margin-bottom: 18px;
}
.mwa-detail-modal .mwa-detail-genre-row .mwa-binding-swatch {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  border: 1px solid rgba(30, 22, 10, 0.4);
}

.mwa-detail-modal .mwa-detail-summary {
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--mwa-ink-brown);
  margin-bottom: 20px;
}
.mwa-detail-modal .mwa-detail-credit {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mwa-ink-faint);
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(217, 200, 142, 0.7);
  margin-bottom: 18px;
}
.mwa-detail-modal .mwa-detail-credit:empty { display: none; }

/* Status block */
.mwa-detail-modal .mwa-detail-status:empty { display: none; }
.mwa-detail-modal .mwa-detail-status-row {
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 2px;
  font-size: 0.95rem;
  line-height: 1.4;
}
.mwa-detail-modal .mwa-detail-status-row.available {
  background: rgba(74, 107, 42, 0.10);
  border: 1px solid rgba(74, 107, 42, 0.35);
  color: var(--mwa-success);
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mwa-detail-modal .mwa-detail-status-row.pending {
  background: rgba(196, 154, 56, 0.10);
  border: 1px solid rgba(196, 154, 56, 0.4);
}
.mwa-detail-modal .mwa-detail-status-label {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mwa-ink-light);
  margin-bottom: 3px;
}
.mwa-detail-modal .mwa-detail-status-value {
  font-style: italic;
  font-size: 1rem;
  color: var(--mwa-ink);
}

/* Actions block */
.mwa-detail-modal .mwa-detail-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mwa-detail-modal .mwa-detail-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mwa-detail-modal .mwa-detail-as-line {
  padding: 9px 12px;
  background: rgba(196, 154, 56, 0.08);
  border: 1px solid rgba(196, 154, 56, 0.3);
  border-radius: 2px;
  font-size: 0.95rem;
  color: var(--mwa-ink);
}
.mwa-detail-modal .mwa-detail-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mwa-detail-modal .mwa-detail-field-label {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mwa-ink-mid);
}
.mwa-detail-modal .mwa-detail-field textarea {
  width: 100%;
  padding: 9px 11px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.98rem;
  color: var(--mwa-ink);
  background: #fff;
  border: 1px solid rgba(30, 22, 10, 0.25);
  border-radius: 2px;
  outline: none;
  resize: vertical;
  min-height: 50px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mwa-detail-modal .mwa-detail-field textarea:focus {
  border-color: var(--mwa-gold);
  box-shadow: 0 0 0 3px rgba(196, 154, 56, 0.2);
}
.mwa-detail-modal .mwa-detail-error {
  padding: 8px 12px;
  font-style: italic;
  color: var(--mwa-rust);
  background: rgba(122, 53, 24, 0.08);
  border-left: 3px solid var(--mwa-rust);
  border-radius: 2px;
}

.mwa-detail-modal .mwa-detail-btn {
  padding: 11px 22px;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.12s, border-color 0.15s;
  text-align: center;
}
.mwa-detail-modal .mwa-detail-btn.primary {
  background: linear-gradient(180deg, var(--mwa-ink-brown), var(--mwa-ink));
  color: var(--mwa-parch-light);
  border: 1px solid var(--mwa-ink);
}
.mwa-detail-modal .mwa-detail-btn.primary:hover:not([disabled]) {
  background: linear-gradient(180deg, var(--mwa-gold-warm), var(--mwa-gold));
  transform: translateY(-1px);
}
.mwa-detail-modal .mwa-detail-btn.primary[disabled] {
  opacity: 0.6;
  cursor: wait;
}
.mwa-detail-modal .mwa-detail-btn.ghost {
  background: transparent;
  color: var(--mwa-ink-mid);
  border: 1px solid rgba(30, 22, 10, 0.25);
}
.mwa-detail-modal .mwa-detail-btn.ghost:hover {
  background: rgba(30, 22, 10, 0.06);
  color: var(--mwa-ink);
}

/* Responsive — stack on narrow viewports */
@media (max-width: 720px) {
  .mwa-detail-modal .mwa-detail-layout {
    grid-template-columns: 1fr;
  }
  .mwa-detail-modal .mwa-detail-spine-wrap {
    border-right: 0;
    border-bottom: 1px solid rgba(217, 200, 142, 0.7);
    padding: 22px 16px 18px;
  }
  .mwa-detail-modal .mwa-detail-content {
    padding: 22px 22px 28px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   BULLETIN — auto-embed styling (YouTube, Vimeo, etc.)  (v1.18.1)
   ═══════════════════════════════════════════════════════════════ */
.mwa-portal .mwa-post-body iframe,
.mwa-portal .mwa-post-body embed,
.mwa-portal .mwa-post-body object {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 12px 0 4px;
  border: 1px solid var(--mwa-parch-deep);
  border-radius: 2px;
  background: var(--mwa-ink);
}
/* WordPress wraps oembed output in <p><iframe…/></p> after wpautop. */
.mwa-portal .mwa-post-body p:has(> iframe:only-child),
.mwa-portal .mwa-post-body p:has(> embed:only-child) {
  margin: 0;
}
.mwa-portal .mwa-post-body .wp-embedded-content {
  max-width: 100% !important;
  width: 100% !important;
}
.mwa-portal .mwa-post-body blockquote.twitter-tweet,
.mwa-portal .mwa-post-body blockquote.instagram-media {
  max-width: 100%;
  margin: 12px auto 4px;
}
/* Dashboard "Recent Activity" preview should keep embeds tidy too,
   but since that view strips HTML to plain text, no extra rules needed. */


/* ═══════════════════════════════════════════════════════════════
   DETAIL MODAL — Edit & Delete buttons (admin, custom books only)  (v1.18.2)
   ═══════════════════════════════════════════════════════════════ */
.mwa-detail-modal .mwa-detail-btn.danger {
  background: transparent;
  color: var(--mwa-rust);
  border: 1px solid rgba(122, 53, 24, 0.45);
}
.mwa-detail-modal .mwa-detail-btn.danger:hover:not([disabled]) {
  background: var(--mwa-rust);
  color: #fff;
  border-color: var(--mwa-rust);
}


/* ═══════════════════════════════════════════════════════════════
   BULLETIN — LINK PREVIEW CARDS  (v1.19)
   Horizontal cards rendered beneath each post for any link in
   its content. Image left, title/desc right.
   ═══════════════════════════════════════════════════════════════ */
.mwa-portal .mwa-post-linkcards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 6px;
}

.mwa-portal .mwa-post-linkcard {
  background: var(--mwa-parch-light);
  border: 1px solid var(--mwa-parch-deep);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 0.18s, transform 0.12s, box-shadow 0.18s;
}
.mwa-portal .mwa-post-linkcard:hover {
  border-color: var(--mwa-gold);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(20, 14, 6, 0.08);
}
.mwa-portal .mwa-post-linkcard.is-loading .mwa-post-linkcard-meta {
  padding: 12px 14px;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--mwa-ink-faint);
  text-align: center;
}
.mwa-portal .mwa-post-linkcard-link {
  display: flex;
  align-items: stretch;
  gap: 0;
  text-decoration: none;
  color: inherit;
}
.mwa-portal .mwa-post-linkcard-img {
  position: relative;
  flex: 0 0 180px;
  background: var(--mwa-parch);
  overflow: hidden;
}
.mwa-portal .mwa-post-linkcard-img img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100px;
  object-fit: cover;
}
.mwa-portal .mwa-post-linkcard-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.mwa-portal .mwa-post-linkcard-play svg {
  width: 50px;
  height: 50px;
  background: rgba(20, 14, 6, 0.65);
  border-radius: 50%;
  padding: 12px 10px 12px 14px;
  display: block;
}
.mwa-portal .mwa-post-linkcard-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}
.mwa-portal .mwa-post-linkcard-site {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mwa-gold);
}
.mwa-portal .mwa-post-linkcard-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--mwa-ink);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mwa-portal .mwa-post-linkcard-desc {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.92rem;
  color: var(--mwa-ink-light);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 600px) {
  .mwa-portal .mwa-post-linkcard-link { flex-direction: column; }
  .mwa-portal .mwa-post-linkcard-img { flex-basis: auto; aspect-ratio: 16 / 9; }
}




/* ═══════════════════════════════════════════════════════════════
   MOBILE TOP BAR — branding + identity + menu icon  (v1.19.2)
   On viewports ≤ 900px the dark sidebar collapses into a drawer.
   A full-width sticky bar at the top of the page holds:
     - LEFT   Meriwether Academy / Member Portal lockup
     - CENTER user avatar + first name
     - RIGHT  small hamburger button (toggles the drawer)
   ═══════════════════════════════════════════════════════════════ */

/* Hidden on desktop */
.mwa-portal .mwa-mobile-topbar,
.mwa-bp-layout .mwa-mobile-topbar,
.mwa-portal .mwa-mobile-menu-backdrop,
.mwa-bp-layout .mwa-mobile-menu-backdrop {
  display: none;
}

/* Lock body scroll while the drawer is open */
body.mwa-mobile-menu-locked { overflow: hidden; }

@media (max-width: 900px) {
  /* Paint the body dark on portal pages so if anything (a theme
     wrapper, viewport quirks, iOS rubber-banding, etc.) leaves a
     hairline above the fixed topbar, that strip reads as more nav
     instead of a parchment crack revealing page content. */
  body.mwa-portal-page,
  body.mwa-bp-with-sidebar { background: #1e160a !important; }

  /* === Sticky top bar === */
  .mwa-portal .mwa-mobile-topbar,
  .mwa-bp-layout .mwa-mobile-topbar {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 10px;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 64px;
    padding: 0 14px;
    background: linear-gradient(180deg, #2e1f0e, #1e160a) !important;
    color: var(--mwa-parch-light);
    border-bottom: 1px solid #8a6520;
    /* Outer box-shadow upward so any single-pixel gap (e.g. from a
       viewport meta inconsistency) is still painted dark brown. */
    box-shadow: 0 -8px 0 #1e160a, 0 2px 12px rgba(20, 14, 6, 0.45);
    z-index: 1000 !important;
    margin: 0 !important;
  }
  .admin-bar .mwa-portal .mwa-mobile-topbar,
  .admin-bar .mwa-bp-layout .mwa-mobile-topbar { top: 46px; }

  /* LEFT — brand lockup */
  .mwa-mobile-brand { justify-self: start; min-width: 0; }
  .mwa-mobile-brand-name {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mwa-parch-light);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mwa-mobile-brand-tag {
    font-family: 'Style Script', cursive;
    font-size: 0.95rem;
    color: var(--mwa-gold-bright);
    line-height: 1.1;
    margin-top: 1px;
  }

  /* CENTER — avatar + name */
  .mwa-mobile-identity {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .mwa-mobile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mwa-gold-warm), var(--mwa-rust));
    border: 1px solid rgba(255, 240, 220, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--mwa-parch-light);
    flex-shrink: 0;
  }
  .mwa-mobile-identity-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 0.92rem;
    color: var(--mwa-parch-light);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 28vw;
  }

  /* RIGHT — hamburger button */
  .mwa-portal .mwa-mobile-menu-btn,
  .mwa-bp-layout .mwa-mobile-menu-btn {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    color: var(--mwa-parch-light);
    border: 1px solid rgba(255, 240, 220, 0.3);
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .mwa-portal .mwa-mobile-menu-btn:hover,
  .mwa-bp-layout .mwa-mobile-menu-btn:hover {
    background: rgba(196, 154, 56, 0.18);
    border-color: var(--mwa-gold);
    color: var(--mwa-gold-bright);
  }
  .mwa-portal .mwa-mobile-menu-btn:focus-visible,
  .mwa-bp-layout .mwa-mobile-menu-btn:focus-visible {
    outline: 2px solid var(--mwa-gold);
    outline-offset: 2px;
  }
  .mwa-mobile-menu-icon { display: block; }
  .mwa-mobile-icon-close { display: none; }
  .mwa-portal.mwa-menu-open .mwa-mobile-icon-open,
  .mwa-bp-layout.mwa-menu-open .mwa-mobile-icon-open { display: none; }
  .mwa-portal.mwa-menu-open .mwa-mobile-icon-close,
  .mwa-bp-layout.mwa-menu-open .mwa-mobile-icon-close { display: block; }

  /* Make room for the bar at the top of the page */
  .mwa-portal,
  .mwa-bp-layout { padding-left: 0 !important; padding-top: 64px !important; }
  .admin-bar .mwa-portal,
  .admin-bar .mwa-bp-layout { padding-top: 110px !important; }

  /* === Drawer behavior for the sidebar ===
     Belt-and-suspenders on every property — the sidebar must be a
     left-slide drawer on mobile, never a relative full-width block. */
  .mwa-portal .mwa-sidebar,
  .mwa-bp-layout .mwa-sidebar {
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    width: 280px !important;
    max-width: 80vw !important;
    height: calc(100vh - 64px) !important;
    bottom: auto !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s ease !important;
    z-index: 999 !important;
    box-shadow: 6px 0 30px rgba(20, 14, 6, 0.5);
    overflow-y: auto !important;
    margin: 0 !important;
  }
  .admin-bar .mwa-portal .mwa-sidebar,
  .admin-bar .mwa-bp-layout .mwa-sidebar {
    top: 110px !important;
    height: calc(100vh - 110px) !important;
  }
  .mwa-portal.mwa-menu-open .mwa-sidebar,
  .mwa-bp-layout.mwa-menu-open .mwa-sidebar { transform: translateX(0) !important; }

  /* The drawer already shows the brand + member card up top — hide
     them on mobile so we're not repeating what's on the bar. */
  .mwa-portal .mwa-sidebar .mwa-brand,
  .mwa-bp-layout .mwa-sidebar .mwa-brand {
    display: none;
  }

  /* Backdrop — ONLY shown when the drawer is open. (The previous
     build painted this constantly, which made the page look blurred.) */
  .mwa-portal.mwa-menu-open .mwa-mobile-menu-backdrop,
  .mwa-bp-layout.mwa-menu-open .mwa-mobile-menu-backdrop {
    display: block;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(20, 14, 6, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 998;
  }
  .admin-bar .mwa-portal.mwa-menu-open .mwa-mobile-menu-backdrop,
  .admin-bar .mwa-bp-layout.mwa-menu-open .mwa-mobile-menu-backdrop { top: 110px; }
}

/* Squeeze the center identity name out on very narrow phones */
@media (max-width: 420px) {
  .mwa-mobile-brand-tag { display: none; }
  .mwa-mobile-identity-name { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   ROLODEX — "Reading:" block  (v1.19.2)
   Sits between social-links and the "Member since" meta row. Only
   rendered when the member currently has a library book checked
   out; disappears when the book is returned.
   ═══════════════════════════════════════════════════════════════ */
.mwa-portal .mwa-roster-reading {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 1px;
  padding: 8px 10px;
  margin: 0 0 12px;
  background: rgba(196, 154, 56, 0.08);
  border-left: 2px solid var(--mwa-gold);
  border-radius: 0 2px 2px 0;
}
.mwa-portal .mwa-roster-reading-label {
  grid-row: 1 / span 2;
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mwa-gold);
  align-self: center;
}
.mwa-portal .mwa-roster-reading-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--mwa-ink);
  line-height: 1.25;
  /* Allow long titles to wrap onto multiple lines so the whole title
     is visible. (Was previously nowrap + ellipsis which truncated.) */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mwa-portal .mwa-roster-reading-author {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.78rem;
  color: var(--mwa-ink-light);
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — "Your Profile" panel + 2×2 stat box  (v1.19.6)
   The profile card on the left, the four stat tiles squared off
   on the right, so the whole block reads as one cohesive section
   at the top of the dashboard.
   ═══════════════════════════════════════════════════════════════ */
.mwa-portal .mwa-dash-profile-section {
  margin-bottom: 28px;
}
.mwa-portal .mwa-dash-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.mwa-portal .mwa-dash-profile-card .mwa-roster-card {
  width: 100%;
  height: 100%;
}

/* Stats grid in "square" mode — used inside the Your Profile section.
   Two columns, two rows, square-ish tiles. */
.mwa-portal .mwa-stats-grid-square {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 14px;
  margin: 0;
}
.mwa-portal .mwa-stats-grid-square .mwa-stat {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 900px) {
  .mwa-portal .mwa-dash-profile-layout {
    grid-template-columns: 1fr;
  }
  .mwa-portal .mwa-stats-grid-square { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .mwa-portal .mwa-stats-grid-square { grid-template-columns: 1fr; }
}


/* Dashboard divider between the welcome lockup and the profile block. */
.mwa-portal .mwa-dash-divider {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mwa-parch-deep) 18%, var(--mwa-parch-deep) 82%, transparent);
  margin: 22px 0 24px;
}


/* ═══════════════════════════════════════════════════════════════
   AUTH FORMS — login / register / lost-password / reset-password
   v1.20.0  Self-contained palette so the form renders correctly
   on any Page, with or without the .mwa-portal wrapper.
   ═══════════════════════════════════════════════════════════════ */
.mwa-auth-wrap {
  --mwa-parch-light:  #f7f0dc;
  --mwa-parch:        #efe4c4;
  --mwa-parch-deep:   #d9c88e;
  --mwa-parch-worn:   #c9b87a;
  --mwa-ink:          #1e160a;
  --mwa-ink-brown:    #2e1f0e;
  --mwa-ink-mid:      #4a3520;
  --mwa-ink-light:    #6b5035;
  --mwa-ink-faint:    #8a7058;
  --mwa-gold:         #8a6520;
  --mwa-gold-warm:    #a07828;
  --mwa-gold-bright:  #c49a38;
  --mwa-rust:         #7a3518;
  --mwa-success:      #4a6b2a;

  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px 60px;
  background: var(--mwa-parch);
  font-family: 'EB Garamond', Georgia, serif;
  color: var(--mwa-ink-brown);
}
.mwa-auth-wrap *, .mwa-auth-wrap *::before, .mwa-auth-wrap *::after { box-sizing: border-box; }

.mwa-auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--mwa-parch-light);
  border: 1px solid var(--mwa-ink);
  border-radius: 4px;
  box-shadow: 0 18px 50px rgba(20, 14, 6, 0.18);
  padding: 36px 32px 30px;
  position: relative;
}
.mwa-auth-card::before {
  content: '';
  position: absolute;
  top: 8px; left: 8px; right: 8px; bottom: 8px;
  border: 1px solid rgba(196, 154, 56, 0.25);
  pointer-events: none;
  border-radius: 2px;
}

.mwa-auth-header { text-align: center; margin-bottom: 22px; }
.mwa-auth-crest {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--mwa-parch-light);
  border: 1.5px solid var(--mwa-gold);
  box-shadow: 0 0 0 2px var(--mwa-ink), 0 0 0 3px rgba(201,184,122,0.3);
  display: block;
  margin: 0 auto 14px;
  object-fit: contain;
  padding: 3px;
}
.mwa-auth-crest-fallback {
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900; font-style: italic;
  font-size: 1.6rem; color: var(--mwa-ink);
  padding: 0;
}
.mwa-auth-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mwa-gold);
  margin-bottom: 6px;
}
.mwa-auth-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.65rem;
  font-weight: 600;
  font-style: italic;
  color: var(--mwa-ink);
  line-height: 1.2;
  margin: 0 0 6px;
}
.mwa-auth-sub {
  font-size: 0.98rem;
  color: var(--mwa-ink-light);
  line-height: 1.45;
  margin: 0;
}

.mwa-auth-error,
.mwa-auth-notice {
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 2px;
  font-size: 0.94rem;
  line-height: 1.4;
}
.mwa-auth-error {
  background: rgba(122, 53, 24, 0.08);
  border-left: 3px solid var(--mwa-rust);
  color: var(--mwa-rust);
  font-style: italic;
}
.mwa-auth-notice {
  background: rgba(74, 107, 42, 0.08);
  border-left: 3px solid var(--mwa-success);
  color: #3a5520;
  font-style: italic;
}

.mwa-auth-form { display: flex; flex-direction: column; gap: 14px; }
.mwa-auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mwa-auth-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mwa-auth-label {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mwa-ink-mid);
}
.mwa-auth-hint {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.82rem;
  color: var(--mwa-ink-faint);
}
.mwa-auth-form input[type="text"],
.mwa-auth-form input[type="email"],
.mwa-auth-form input[type="password"] {
  width: 100%;
  padding: 11px 13px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  color: var(--mwa-ink);
  background: #fff;
  border: 1px solid rgba(30, 22, 10, 0.25);
  border-radius: 2px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mwa-auth-form input:focus {
  border-color: var(--mwa-gold);
  box-shadow: 0 0 0 3px rgba(196, 154, 56, 0.18);
}
.mwa-auth-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--mwa-ink-light);
  cursor: pointer;
  margin: 2px 0;
}
.mwa-auth-check input { accent-color: var(--mwa-gold); }

.mwa-auth-submit {
  margin-top: 8px;
  padding: 12px 18px;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mwa-parch-light);
  background: linear-gradient(180deg, var(--mwa-ink-brown), var(--mwa-ink));
  border: 1px solid var(--mwa-ink);
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  transition: background 0.15s, transform 0.12s;
}
.mwa-auth-submit:hover {
  background: linear-gradient(180deg, var(--mwa-gold-warm), var(--mwa-gold));
  color: #fff;
  transform: translateY(-1px);
}

.mwa-auth-links {
  text-align: center;
  margin-top: 18px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.92rem;
  color: var(--mwa-ink-light);
}
.mwa-auth-links a {
  color: var(--mwa-gold);
  text-decoration: none;
  font-style: italic;
}
.mwa-auth-links a:hover { color: var(--mwa-gold-bright); text-decoration: underline; }
.mwa-auth-sep { color: var(--mwa-ink-faint); margin: 0 6px; }

.mwa-auth-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  margin-top: 6px;
}
.mwa-auth-link {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  color: var(--mwa-ink-light);
  text-decoration: none;
  font-size: 0.92rem;
}
.mwa-auth-link:hover { color: var(--mwa-gold); }

@media (max-width: 480px) {
  .mwa-auth-card { padding: 26px 20px 22px; }
  .mwa-auth-row { grid-template-columns: 1fr; }
  .mwa-auth-title { font-size: 1.4rem; }
}

/* When the portal-page shortcode is rendering the gate, allow the
   auth form to fill the parchment area without theme chrome wars. */
body.mwa-portal-page .mwa-auth-wrap {
  min-height: 100vh;
  align-items: center;
}


/* ═══════════════════════════════════════════════════════════════
   ONBOARDING — first-time welcome sequence  (v1.21)
   Full-viewport three-screen flow with parchment palette and a
   gentle fade between steps. Lives at /welcome/ for new members.
   ═══════════════════════════════════════════════════════════════ */

.mwa-onboarding {
  --mwa-parch-light:  #f7f0dc;
  --mwa-parch:        #efe4c4;
  --mwa-parch-deep:   #d9c88e;
  --mwa-parch-worn:   #c9b87a;
  --mwa-ink:          #1e160a;
  --mwa-ink-brown:    #2e1f0e;
  --mwa-ink-mid:      #4a3520;
  --mwa-ink-light:    #6b5035;
  --mwa-ink-faint:    #8a7058;
  --mwa-gold:         #8a6520;
  --mwa-gold-warm:    #a07828;
  --mwa-gold-bright:  #c49a38;
  --mwa-rust:         #7a3518;
  --mwa-success:      #4a6b2a;

  font-family: 'EB Garamond', Georgia, serif;
  color: var(--mwa-ink-brown);
  background: var(--mwa-parch);
  position: relative;
  min-height: 100vh;
}
.mwa-onboarding *, .mwa-onboarding *::before, .mwa-onboarding *::after { box-sizing: border-box; }

.mwa-onboarding .mwa-ob-step {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vh 20px 60px;
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.mwa-onboarding .mwa-ob-step.is-active {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  position: relative;
  min-height: 100vh;
}

.mwa-onboarding .mwa-ob-inner {
  width: 100%;
  max-width: 620px;
  text-align: center;
}
.mwa-onboarding .mwa-ob-welcome { max-width: 660px; }

/* Crest — generous on welcome, smaller on subsequent steps */
.mwa-ob-crest-wrap {
  position: relative;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--mwa-parch-light);
  border: 2px solid var(--mwa-gold);
  box-shadow: 0 0 0 3px var(--mwa-ink), 0 0 0 4px rgba(201,184,122,0.3);
  overflow: hidden;
}
.mwa-ob-crest-large {
  width: 132px;
  height: 132px;
}
.mwa-ob-crest-small {
  width: 76px;
  height: 76px;
  margin-bottom: 18px;
}
.mwa-ob-crest {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 4px;
  display: block;
}
.mwa-ob-crest-fallback {
  position: absolute; inset: 0;
  align-items: center; justify-content: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900; font-style: italic;
  color: var(--mwa-ink);
}
.mwa-ob-crest-large .mwa-ob-crest-fallback { font-size: 2.4rem; }
.mwa-ob-crest-small .mwa-ob-crest-fallback { font-size: 1.5rem; }

.mwa-onboarding .mwa-ob-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--mwa-gold);
  margin-bottom: 10px;
}

.mwa-onboarding .mwa-ob-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.4rem;
  font-weight: 600;
  font-style: italic;
  color: var(--mwa-ink);
  line-height: 1.15;
  margin: 0 0 14px;
}
.mwa-onboarding .mwa-ob-title em {
  font-style: italic;
  color: var(--mwa-gold-warm);
}

.mwa-onboarding .mwa-ob-body {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--mwa-ink-light);
  max-width: 540px;
  margin: 0 auto 16px;
}

.mwa-onboarding .mwa-ob-form {
  text-align: left;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mwa-onboarding .mwa-ob-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.mwa-onboarding .mwa-ob-field {
  display: flex; flex-direction: column; gap: 5px;
}
.mwa-onboarding .mwa-ob-label {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mwa-ink-mid);
}
.mwa-onboarding .mwa-ob-opt {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--mwa-ink-faint);
  margin-left: 4px;
}
.mwa-onboarding .mwa-ob-hint {
  font-style: italic;
  font-size: 0.88rem;
  color: var(--mwa-ink-faint);
  margin: -6px 0 6px;
}
.mwa-onboarding .mwa-ob-form input[type="text"],
.mwa-onboarding .mwa-ob-form input[type="email"],
.mwa-onboarding .mwa-ob-form textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  color: var(--mwa-ink);
  background: #fff;
  border: 1px solid rgba(30, 22, 10, 0.25);
  border-radius: 2px;
  outline: none;
  resize: vertical;
  min-height: 42px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mwa-onboarding .mwa-ob-form input:focus,
.mwa-onboarding .mwa-ob-form textarea:focus {
  border-color: var(--mwa-gold);
  box-shadow: 0 0 0 3px rgba(196, 154, 56, 0.18);
}

.mwa-onboarding .mwa-ob-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 0;
  color: var(--mwa-ink-faint);
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.mwa-onboarding .mwa-ob-divider::before,
.mwa-onboarding .mwa-ob-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mwa-parch-worn), transparent);
}

.mwa-onboarding .mwa-ob-checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}
.mwa-onboarding .mwa-ob-check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--mwa-parch-light);
  border: 1px solid var(--mwa-parch-worn);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-size: 1rem;
  color: var(--mwa-ink);
}
.mwa-onboarding .mwa-ob-check:hover {
  border-color: var(--mwa-gold);
  background: #fff;
}
.mwa-onboarding .mwa-ob-check input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--mwa-gold);
}

/* "Uncheck all / Check all" toggle button at the bottom of the list */
.mwa-onboarding .mwa-ob-toggle-all {
  align-self: flex-end;
  background: transparent;
  border: none;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mwa-gold);
  cursor: pointer;
  padding: 4px 0;
  margin-top: 2px;
  transition: color 0.15s;
}
.mwa-onboarding .mwa-ob-toggle-all:hover { color: var(--mwa-rust); }

/* Footnote — Academy announcements always send */
.mwa-onboarding .mwa-ob-footnote {
  margin: 18px 0 0;
  padding: 12px 16px;
  background: rgba(196, 154, 56, 0.10);
  border-left: 3px solid var(--mwa-gold);
  border-radius: 2px;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--mwa-ink-light);
  line-height: 1.55;
}

/* Welcome-step "Our Mission" parchment callout */
.mwa-onboarding .mwa-ob-mission {
  margin: 22px 0 18px;
  padding: 20px 24px 22px;
  background: var(--mwa-parch-light);
  border: 1px solid var(--mwa-parch-deep);
  border-left: 3px solid var(--mwa-rust);
  border-radius: 3px;
  position: relative;
}
.mwa-onboarding .mwa-ob-mission-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mwa-rust);
  margin-bottom: 10px;
}
.mwa-onboarding .mwa-ob-mission-body {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--mwa-ink-brown);
  margin: 0;
}

/* Photo upload step */
.mwa-onboarding .mwa-ob-photo-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 22px 0 4px;
}
.mwa-onboarding .mwa-ob-photo-preview {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: var(--mwa-parch);
  background-size: cover;
  background-position: center;
  border: 2px solid var(--mwa-gold);
  box-shadow: 0 0 0 4px var(--mwa-parch-light), 0 0 0 5px rgba(201,184,122,0.4);
  cursor: pointer;
  transition: transform 0.15s;
}
.mwa-onboarding .mwa-ob-photo-preview:hover { transform: scale(1.02); }
.mwa-onboarding .mwa-ob-photo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(20, 14, 6, 0.0);
  color: rgba(247, 240, 220, 0);
  transition: background 0.15s, color 0.15s;
  pointer-events: none;
}
.mwa-onboarding .mwa-ob-photo-preview:hover .mwa-ob-photo-overlay {
  background: rgba(20, 14, 6, 0.42);
  color: var(--mwa-parch-light);
}
.mwa-onboarding .mwa-ob-photo-preview.has-new {
  border-color: var(--mwa-rust);
}
.mwa-onboarding .mwa-ob-photo-pick {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.mwa-onboarding .mwa-ob-photo-meta {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--mwa-ink-faint);
  text-align: center;
}

.mwa-onboarding .mwa-ob-error {
  padding: 10px 14px;
  border-radius: 2px;
  background: rgba(122, 53, 24, 0.08);
  border-left: 3px solid var(--mwa-rust);
  color: var(--mwa-rust);
  font-style: italic;
  font-size: 0.94rem;
}

.mwa-onboarding .mwa-ob-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.mwa-ob-welcome .mwa-ob-actions { margin-top: 36px; }

.mwa-onboarding .mwa-ob-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.12s, border-color 0.15s;
  text-decoration: none;
}
.mwa-onboarding .mwa-ob-btn.primary {
  background: linear-gradient(180deg, var(--mwa-ink-brown), var(--mwa-ink));
  color: var(--mwa-parch-light);
  border: 1px solid var(--mwa-ink);
}
.mwa-onboarding .mwa-ob-btn.primary:hover:not([disabled]) {
  background: linear-gradient(180deg, var(--mwa-gold-warm), var(--mwa-gold));
  transform: translateY(-1px);
}
.mwa-onboarding .mwa-ob-btn.primary[disabled] { opacity: 0.6; cursor: wait; }
.mwa-onboarding .mwa-ob-btn.ghost {
  background: transparent;
  color: var(--mwa-ink-mid);
  border: 1px solid rgba(30, 22, 10, 0.25);
}
.mwa-onboarding .mwa-ob-btn.ghost:hover {
  background: rgba(30, 22, 10, 0.05);
  color: var(--mwa-ink);
}
.mwa-onboarding .mwa-ob-btn svg { display: block; }

@media (max-width: 600px) {
  .mwa-onboarding .mwa-ob-title { font-size: 1.7rem; }
  .mwa-onboarding .mwa-ob-row { grid-template-columns: 1fr; }
  .mwa-onboarding .mwa-ob-actions { flex-direction: column-reverse; align-items: stretch; }
  .mwa-onboarding .mwa-ob-btn { width: 100%; justify-content: center; }
  .mwa-ob-crest-large { width: 108px; height: 108px; }
}

/* When the welcome page is the active singular, paint the body too
   so any theme gutter behind the parchment doesn't show. */
body.page-template-default:has(.mwa-onboarding),
body:has(.mwa-onboarding) { background: #efe4c4; }


/* ═══════════════════════════════════════════════════════════════
   EVENT RSVPS  (v1.22)
   • Event card "Member RSVP" button + pending/attending states
   • RSVP confirmation modal with thumbnail strip
   • Roster card "Attending" block (above Reading)
   • Dashboard admin Event panel pieces
   ═══════════════════════════════════════════════════════════════ */

/* Event card structure was restructured to a div + inner links so we
   can host a real button. Re-grant the click-anywhere link behavior. */
.mwa-portal .mwa-ec.mwa-ec-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.mwa-portal .mwa-ec.mwa-ec-card .mwa-ec-imglink,
.mwa-portal .mwa-ec.mwa-ec-card .mwa-ec-titlelink {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* "Member RSVP" primary button */
.mwa-portal .mwa-ec-rsvp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mwa-parch-light);
  background: linear-gradient(180deg, var(--mwa-ink-brown), var(--mwa-ink));
  border: 1px solid var(--mwa-ink);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}
.mwa-portal .mwa-ec-rsvp-btn:hover {
  background: linear-gradient(180deg, var(--mwa-gold-warm), var(--mwa-gold));
  transform: translateY(-1px);
}

/* "Attending ✓" confirmed pill */
.mwa-portal .mwa-ec-reg.attending {
  background: rgba(74, 107, 42, 0.12);
  color: var(--mwa-success);
  border: 1px solid rgba(74, 107, 42, 0.45);
  padding: 6px 14px;
  border-radius: 2px;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* "RSVP'd · Pending" + cancel × */
.mwa-portal .mwa-ec-reg.pending {
  display: inline-flex;
  align-items: stretch;
  background: rgba(196, 154, 56, 0.14);
  color: var(--mwa-gold);
  border: 1px solid rgba(196, 154, 56, 0.45);
  border-radius: 2px;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow: hidden;
}
.mwa-portal .mwa-ec-reg.pending > span {
  padding: 7px 12px;
}
.mwa-portal .mwa-ec-rsvp-cancel {
  width: 26px;
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
  border: 0;
  border-left: 1px solid rgba(196, 154, 56, 0.45);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mwa-portal .mwa-ec-rsvp-cancel:hover {
  background: var(--mwa-rust);
  color: #fff;
}

/* ─── RSVP confirmation modal ─── */
.mwa-rsvp-modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mwa-rsvp-modal .mwa-rsvp-dialog {
  position: relative;
  margin: 0;
  width: min(540px, calc(100% - 32px));
  max-height: 90vh;
  background: var(--mwa-parch-light);
  border: 1px solid var(--mwa-ink);
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(20, 14, 6, 0.55);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--mwa-ink-brown);
  font-family: 'EB Garamond', Georgia, serif;
}
.mwa-rsvp-modal .mwa-rsvp-dialog .mwa-checkout-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  background: rgba(247, 240, 220, 0.92);
}
.mwa-rsvp-modal .mwa-rsvp-img-wrap {
  width: 100%;
  background: var(--mwa-ink);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.mwa-rsvp-modal .mwa-rsvp-img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mwa-rsvp-modal .mwa-rsvp-img-wrap:empty {
  display: none;
}
.mwa-rsvp-modal .mwa-rsvp-body {
  padding: 24px 28px 24px;
  overflow-y: auto;
}
.mwa-rsvp-modal .mwa-checkout-eyebrow {
  margin-bottom: 4px;
}
.mwa-rsvp-modal .mwa-rsvp-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 600;
  font-style: italic;
  color: var(--mwa-ink);
  line-height: 1.2;
  margin: 0 0 6px;
}
.mwa-rsvp-modal .mwa-rsvp-meta {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mwa-ink-faint);
  margin-bottom: 18px;
}
.mwa-rsvp-modal .mwa-rsvp-pitch {
  padding: 12px 14px;
  background: rgba(196, 154, 56, 0.10);
  border: 1px solid rgba(196, 154, 56, 0.4);
  border-radius: 2px;
  font-style: italic;
  font-size: 0.98rem;
  color: var(--mwa-ink);
  line-height: 1.5;
  margin-bottom: 18px;
}
.mwa-rsvp-modal .mwa-rsvp-pitch strong {
  font-style: normal;
  color: var(--mwa-gold);
}
.mwa-rsvp-modal .mwa-rsvp-error {
  padding: 10px 14px;
  background: rgba(122, 53, 24, 0.08);
  border-left: 3px solid var(--mwa-rust);
  color: var(--mwa-rust);
  font-style: italic;
  border-radius: 2px;
  margin-bottom: 14px;
}
.mwa-rsvp-modal .mwa-rsvp-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* ─── Roster card "Attending" block ─── */
.mwa-portal .mwa-roster-attending {
  margin: 0 0 12px;
  padding: 8px 10px;
  background: rgba(74, 107, 42, 0.08);
  border-left: 2px solid var(--mwa-success);
  border-radius: 0 2px 2px 0;
}
.mwa-portal .mwa-roster-attending-label {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mwa-success);
  margin-bottom: 4px;
}
.mwa-portal .mwa-roster-attending-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mwa-portal .mwa-roster-attending-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.86rem;
  line-height: 1.3;
}
.mwa-portal .mwa-roster-attending-title {
  font-style: italic;
  font-weight: 600;
  color: var(--mwa-ink);
}
.mwa-portal .mwa-roster-attending-date {
  font-style: italic;
  color: var(--mwa-ink-light);
}
.mwa-portal .mwa-roster-attending-more {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mwa-ink-faint);
  margin-top: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   APPROVE CHECKOUT MODAL — admin sends a confirmation DM with the
   checkout approval. v1.23
   ═══════════════════════════════════════════════════════════════ */
.mwa-approve-modal .mwa-checkout-dialog {
  max-width: 520px;
}
.mwa-approve-body {
  padding: 0 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mwa-approve-label {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mwa-ink-light);
}
.mwa-approve-textarea {
  width: 100%;
  min-height: 110px;
  padding: 12px 14px;
  background: rgba(247, 240, 220, 0.6);
  border: 1px solid var(--mwa-parch-deep);
  border-radius: 3px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--mwa-ink-brown);
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.mwa-approve-textarea:focus {
  outline: none;
  border-color: var(--mwa-gold);
  box-shadow: 0 0 0 3px rgba(196, 154, 56, 0.18);
  background: var(--mwa-parch-light);
}
.mwa-approve-hint {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--mwa-ink-faint);
  margin: 4px 0 0;
  line-height: 1.5;
}
.mwa-approve-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 18px 22px 22px;
}
.mwa-btn-primary,
.mwa-btn-secondary {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--mwa-ink);
}
.mwa-btn-primary {
  background: var(--mwa-ink);
  color: var(--mwa-parch-light);
}
.mwa-btn-primary:hover {
  background: var(--mwa-rust);
  border-color: var(--mwa-rust);
}
.mwa-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.mwa-btn-secondary {
  background: transparent;
  color: var(--mwa-ink);
  border-color: var(--mwa-parch-deep);
}
.mwa-btn-secondary:hover {
  background: var(--mwa-parch);
  border-color: var(--mwa-ink);
}

/* ═══════════════════════════════════════════════════════════════
   MESSAGES PAGE REDESIGN — restyle BuddyPress messages component to
   feel like a real messaging surface. v1.23
   ═══════════════════════════════════════════════════════════════ */

/* Wrap (BP renders #buddypress; the BP-page mount wraps it). */
body.bp-user.messages #buddypress,
.bp-messages #buddypress {
  font-family: 'EB Garamond', Georgia, serif;
}

/* Subnav — make tabs (Inbox / Sentbox / Compose / Notices) elegant */
#buddypress .item-list-tabs#subnav,
#buddypress div.item-list-tabs.no-ajax#subnav {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--mwa-parch-deep);
  padding: 0;
  margin: 0 0 22px;
}
#buddypress div.item-list-tabs ul {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  background: transparent;
}
#buddypress div.item-list-tabs ul li {
  margin: 0;
  list-style: none;
  float: none;
}
#buddypress div.item-list-tabs ul li a {
  display: block;
  padding: 10px 18px;
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mwa-ink-light);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
#buddypress div.item-list-tabs ul li a:hover {
  color: var(--mwa-ink);
  background: rgba(196, 154, 56, 0.06);
}
#buddypress div.item-list-tabs ul li.current a,
#buddypress div.item-list-tabs ul li.selected a {
  color: var(--mwa-rust);
  border-bottom-color: var(--mwa-rust);
  background: transparent;
}
#buddypress div.item-list-tabs ul li a span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 6px;
  background: var(--mwa-rust);
  color: var(--mwa-parch-light);
  border-radius: 9px;
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.05em;
}

/* Message thread list (Inbox / Sentbox) */
#buddypress #message-threads {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--mwa-parch-deep);
  border-radius: 3px;
  background: var(--mwa-parch-light);
  overflow: hidden;
}
#buddypress #message-threads li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--mwa-parch-deep);
  background: var(--mwa-parch-light);
  transition: background 0.15s;
  position: relative;
}
#buddypress #message-threads li:last-child {
  border-bottom: none;
}
#buddypress #message-threads li:hover {
  background: rgba(196, 154, 56, 0.06);
}
#buddypress #message-threads li.unread {
  background: rgba(196, 154, 56, 0.10);
}
#buddypress #message-threads li.unread::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--mwa-rust);
}
#buddypress #message-threads li img.avatar,
#buddypress #message-threads li .avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--mwa-gold) !important;
  flex-shrink: 0;
  margin: 0;
}
#buddypress #message-threads li .thread-from,
#buddypress #message-threads li .thread-from a {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--mwa-ink);
  text-decoration: none;
}
#buddypress #message-threads li .thread-subject,
#buddypress #message-threads li .thread-subject a {
  display: block;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.95rem;
  color: var(--mwa-ink-mid);
  text-decoration: none;
  line-height: 1.4;
  margin-top: 2px;
}
#buddypress #message-threads li .thread-excerpt {
  font-size: 0.88rem;
  color: var(--mwa-ink-faint);
  margin-top: 4px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#buddypress #message-threads li .activity {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mwa-gold);
  margin-top: 4px;
}
#buddypress #message-threads li .thread-options {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Empty state */
#buddypress #message #message-threads,
#buddypress #message-threads:empty {
  padding: 0;
}
#buddypress div#message p {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  color: var(--mwa-ink-mid);
  padding: 32px 24px;
  text-align: center;
  background: var(--mwa-parch-light);
  border: 1px dashed var(--mwa-parch-deep);
  border-radius: 3px;
}

/* Compose form & textareas */
#buddypress #send_message_form,
#buddypress form.standard-form.bp-messages-compose-form,
#buddypress #send-reply {
  background: var(--mwa-parch-light);
  border: 1px solid var(--mwa-parch-deep);
  border-radius: 3px;
  padding: 22px 24px;
  margin-top: 22px;
}
#buddypress label {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mwa-ink-light);
  font-weight: 500;
  margin-bottom: 4px;
  display: block;
}
#buddypress input[type="text"],
#buddypress input[type="email"],
#buddypress input[type="search"],
#buddypress textarea {
  width: 100%;
  padding: 11px 14px;
  background: rgba(247, 240, 220, 0.6);
  border: 1px solid var(--mwa-parch-deep);
  border-radius: 3px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  color: var(--mwa-ink-brown);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
#buddypress input[type="text"]:focus,
#buddypress textarea:focus {
  outline: none;
  border-color: var(--mwa-gold);
  box-shadow: 0 0 0 3px rgba(196, 154, 56, 0.18);
  background: var(--mwa-parch-light);
}
#buddypress textarea { min-height: 140px; line-height: 1.55; resize: vertical; }
#buddypress .submit { margin-top: 14px; }
#buddypress .submit input[type="submit"],
#buddypress button[type="submit"],
#buddypress #send_reply_button,
#buddypress button.button {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 11px 22px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--mwa-ink);
  background: var(--mwa-ink);
  color: var(--mwa-parch-light);
}
#buddypress .submit input[type="submit"]:hover,
#buddypress button[type="submit"]:hover,
#buddypress #send_reply_button:hover {
  background: var(--mwa-rust);
  border-color: var(--mwa-rust);
}

/* Thread view (single conversation) */
#buddypress #message-thread {
  background: transparent;
  margin: 0 0 18px;
}
#buddypress #message-thread > .message-box {
  margin: 0 0 14px;
  padding: 16px 20px;
  background: var(--mwa-parch-light);
  border: 1px solid var(--mwa-parch-deep);
  border-radius: 3px;
  position: relative;
}
#buddypress #message-thread > .message-box.alt {
  background: rgba(196, 154, 56, 0.08);
  border-color: rgba(196, 154, 56, 0.35);
  margin-left: 24px;
}
#buddypress #message-thread .message-metadata {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--mwa-parch-deep);
}
#buddypress #message-thread .message-metadata img.avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid var(--mwa-gold) !important;
  margin: 0;
}
#buddypress #message-thread .message-metadata strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  color: var(--mwa-ink);
}
#buddypress #message-thread .message-metadata .activity {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mwa-gold);
  margin-left: auto;
}
#buddypress #message-thread .message-content {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.02rem;
  color: var(--mwa-ink-brown);
  line-height: 1.65;
  white-space: pre-wrap;
}

/* Thread subject header */
#buddypress h3#message-subject,
#buddypress .messages-notices h3,
#buddypress #message-thread + h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--mwa-ink);
  margin: 0 0 14px;
  letter-spacing: 0.005em;
}

/* Pagination */
#buddypress .pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0;
  padding: 12px 0;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mwa-ink-faint);
}
#buddypress .pagination .pag-count { color: var(--mwa-ink-light); }

/* Compose recipient autocomplete chip */
#buddypress ul.first.tabs#send-to-input,
#buddypress li.bp-messages-recipient-chip {
  background: rgba(196, 154, 56, 0.12);
  border: 1px solid var(--mwa-gold);
  color: var(--mwa-ink-brown);
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  border-radius: 2px;
  padding: 4px 10px;
}

/* "Bulk actions" select shown in inbox toolbar */
#buddypress .messages-options-nav,
#buddypress .messages-options-nav select {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
#buddypress .messages-options-nav select {
  padding: 7px 10px;
  background: var(--mwa-parch);
  border: 1px solid var(--mwa-parch-deep);
  border-radius: 2px;
  color: var(--mwa-ink-brown);
}

/* Notification "unread" badge on the messages nav item in our sidebar */
.mwa-nav-item .mwa-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: auto;
  padding: 0 6px;
  background: var(--mwa-rust);
  color: var(--mwa-parch-light);
  border-radius: 9px;
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Dashboard messages stat tile — same proportions as other stat
   numbers, but coloured rust when there's something pending. */
.mwa-stat.mwa-stat-messages.has-unread .mwa-stat-num {
  color: var(--mwa-rust);
}
.mwa-stat.mwa-stat-messages .mwa-stat-num-dot {
  display: inline-block;
  margin-left: 2px;
  vertical-align: super;
  font-size: 0.5em;
  color: var(--mwa-rust);
}

/* ═══════════════════════════════════════════════════════════════
   CHAT SPA — two-pane messaging (X / Instagram style). v1.24
   ═══════════════════════════════════════════════════════════════ */
.mwa-portal #mwa-page-messages.active {
  padding: 0;          /* full-bleed inside the main column */
  display: flex;
  flex-direction: column;
}
.mwa-chat {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 0;
  min-height: calc(100vh - 80px);
  background: var(--mwa-parch-light);
  border: 1px solid var(--mwa-parch-deep);
  border-radius: 4px;
  overflow: hidden;
}

/* ─── LEFT PANE — thread list ─── */
.mwa-chat-list-pane {
  display: flex;
  flex-direction: column;
  background: var(--mwa-parch-light);
  border-right: 1px solid var(--mwa-parch-deep);
  min-width: 0;
}
.mwa-chat-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--mwa-parch-deep);
}
.mwa-chat-list-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--mwa-ink);
  margin: 0;
  letter-spacing: 0.005em;
}
.mwa-chat-newbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--mwa-parch-deep);
  background: transparent;
  color: var(--mwa-ink-brown);
  cursor: pointer;
  transition: all 0.15s;
}
.mwa-chat-newbtn:hover {
  background: var(--mwa-ink);
  color: var(--mwa-parch-light);
  border-color: var(--mwa-ink);
}
.mwa-chat-list-search {
  position: relative;
  padding: 12px 14px;
  border-bottom: 1px solid var(--mwa-parch-deep);
}
.mwa-chat-list-search svg {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mwa-ink-faint);
}
.mwa-chat-list-search input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  background: var(--mwa-parch);
  border: 1px solid var(--mwa-parch-deep);
  border-radius: 999px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.95rem;
  color: var(--mwa-ink-brown);
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.mwa-chat-list-search input:focus {
  outline: none;
  border-color: var(--mwa-gold);
  background: var(--mwa-parch-light);
}
.mwa-chat-threads {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 0;
}
.mwa-chat-thread-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(217, 200, 142, 0.4);
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: background 0.12s;
}
.mwa-chat-thread-item:hover {
  background: rgba(196, 154, 56, 0.08);
}
.mwa-chat-thread-item.is-active {
  background: rgba(196, 154, 56, 0.14);
  border-left: 3px solid var(--mwa-rust);
  padding-left: 13px;
}
.mwa-chat-thread-item.has-unread .mwa-chat-thread-item-name {
  color: var(--mwa-ink);
  font-weight: 700;
}
.mwa-chat-thread-item.has-unread .mwa-chat-thread-item-preview {
  color: var(--mwa-ink-mid);
  font-weight: 500;
}
.mwa-chat-thread-avatar-sm {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--mwa-gold);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fef6e0;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.mwa-chat-thread-item-body {
  flex: 1 1 auto;
  min-width: 0;
}
.mwa-chat-thread-item-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.mwa-chat-thread-item-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--mwa-ink-brown);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mwa-chat-thread-item-time {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mwa-ink-faint);
  white-space: nowrap;
  flex-shrink: 0;
}
.mwa-chat-thread-item-preview {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.9rem;
  color: var(--mwa-ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  line-height: 1.4;
}
.mwa-chat-thread-item-dot {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  background: var(--mwa-rust);
  border-radius: 50%;
}
.mwa-chat-empty-inline {
  padding: 22px;
  text-align: center;
  font-family: 'EB Garamond', Georgia, serif;
  color: var(--mwa-ink-faint);
  font-style: italic;
}

/* ─── RIGHT PANE — active thread ─── */
.mwa-chat-thread-pane {
  display: flex;
  flex-direction: column;
  background: var(--mwa-parch);
  min-width: 0;
  position: relative;
}
.mwa-chat-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  color: var(--mwa-ink-light);
}
.mwa-chat-empty svg {
  color: var(--mwa-parch-deep);
  margin-bottom: 18px;
}
.mwa-chat-empty-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: 1.6rem;
  color: var(--mwa-ink);
  margin: 0 0 6px;
}
.mwa-chat-empty-sub {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  color: var(--mwa-ink-faint);
  margin: 0 0 22px;
  max-width: 360px;
  line-height: 1.5;
}
.mwa-chat-empty-btn {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 11px 22px;
  background: var(--mwa-ink);
  color: var(--mwa-parch-light);
  border: 1px solid var(--mwa-ink);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
}
.mwa-chat-empty-btn:hover {
  background: var(--mwa-rust);
  border-color: var(--mwa-rust);
}

.mwa-chat-thread {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* The hidden attribute defaults to `display: none` but our explicit
   `display: flex` rules above override it. Force [hidden] to truly
   hide so JS toggling actually swaps the visible pane. */
.mwa-chat .mwa-chat-empty[hidden],
.mwa-chat .mwa-chat-thread[hidden] {
  display: none !important;
}
.mwa-chat-thread-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: var(--mwa-parch-light);
  border-bottom: 1px solid var(--mwa-parch-deep);
  flex-shrink: 0;
}
.mwa-chat-back {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--mwa-ink-brown);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.mwa-chat-back:hover { background: rgba(196,154,56,0.12); border-color: var(--mwa-parch-deep); }
.mwa-chat-thread-id {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mwa-chat-thread-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--mwa-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fef6e0;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.mwa-chat-thread-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--mwa-ink);
  line-height: 1.2;
}
.mwa-chat-thread-sub {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--mwa-ink-faint);
  line-height: 1.3;
}

.mwa-chat-bubbles {
  flex: 1 1 auto;
  min-height: 0;            /* lets the flex child shrink so composer stays pinned */
  overflow-y: auto;
  padding: 22px 22px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background:
    radial-gradient(circle at 12% 12%, rgba(122,53,24,0.03), transparent 40%),
    radial-gradient(circle at 88% 88%, rgba(138,101,32,0.03), transparent 40%),
    var(--mwa-parch);
}
.mwa-chat-day-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0 10px;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mwa-ink-faint);
}
.mwa-chat-day-sep span {
  padding: 4px 12px;
  background: var(--mwa-parch-light);
  border: 1px solid var(--mwa-parch-deep);
  border-radius: 999px;
}
.mwa-chat-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 2px;
}
.mwa-chat-row.mine { justify-content: flex-end; }
.mwa-chat-bubble-avatar,
.mwa-chat-bubble-avatar-space {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.mwa-chat-bubble-avatar {
  border-radius: 50%;
  border: 1px solid var(--mwa-gold);
  background-color: var(--mwa-parch-light);
}
.mwa-chat-bubble {
  max-width: 70%;
  padding: 9px 14px;
  border-radius: 18px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.mwa-chat-bubble.theirs {
  background: var(--mwa-parch-light);
  color: var(--mwa-ink-brown);
  border: 1px solid var(--mwa-parch-deep);
  border-bottom-left-radius: 6px;
}
.mwa-chat-bubble.theirs.tail {
  border-bottom-left-radius: 18px;
}
.mwa-chat-bubble.mine {
  background: linear-gradient(135deg, var(--mwa-rust), #6b2a18);
  color: var(--mwa-parch-light);
  border: 1px solid var(--mwa-rust);
  border-bottom-right-radius: 6px;
}
.mwa-chat-bubble.mine.tail {
  border-bottom-right-radius: 18px;
}
.mwa-chat-bubble-content { white-space: pre-wrap; }
.mwa-chat-bubble-time {
  display: block;
  margin-top: 4px;
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}
.mwa-chat-bubble.mine .mwa-chat-bubble-time { color: rgba(247, 240, 220, 0.85); }
.mwa-chat-bubble.theirs .mwa-chat-bubble-time { color: var(--mwa-ink-faint); }

/* Composer */
.mwa-chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 18px 14px;
  background: var(--mwa-parch-light);
  border-top: 1px solid var(--mwa-parch-deep);
  flex-shrink: 0;
}
.mwa-chat-input {
  flex: 1 1 auto;
  resize: none;
  min-height: 42px;
  max-height: 180px;
  padding: 10px 16px;
  background: var(--mwa-parch);
  border: 1px solid var(--mwa-parch-deep);
  border-radius: 22px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--mwa-ink-brown);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.mwa-chat-input:focus {
  border-color: var(--mwa-gold);
  background: var(--mwa-parch-light);
  box-shadow: 0 0 0 3px rgba(196,154,56,0.15);
}
.mwa-chat-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--mwa-ink);
  color: var(--mwa-parch-light);
  border: 1px solid var(--mwa-ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.05s;
}
.mwa-chat-send:hover { background: var(--mwa-rust); border-color: var(--mwa-rust); }
.mwa-chat-send:active { transform: scale(0.94); }
.mwa-chat-send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* New conversation modal — recipient picker + textarea */
.mwa-newchat-composer { padding: 0 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.mwa-newchat-to {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.95rem;
  color: var(--mwa-ink-mid);
  padding: 8px 0;
}
.mwa-newchat-to strong { color: var(--mwa-ink); font-weight: 600; }
.mwa-newchat-clear {
  margin-left: 8px;
  background: transparent;
  border: none;
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mwa-gold);
  cursor: pointer;
}
.mwa-newchat-clear:hover { color: var(--mwa-rust); }

/* Responsive: at narrow widths, collapse to single-pane.
   Whatever pane the user is in shows full-width. The chat fills the
   viewport edge-to-edge (escaping .mwa-content's mobile padding) and
   pins the composer to the bottom so it stays visible above the
   virtual keyboard. */
@media (max-width: 900px) {
  /* Break out of the .mwa-content padding box on mobile so the chat
     reaches the screen edges. The negative margins exactly cancel the
     parent's mobile 24px/20px padding. */
  .mwa-portal #mwa-page-messages.active {
    margin: -24px -20px 0;
    width: calc(100% + 40px);
  }
  /* Full-viewport chat. Use dvh where supported so the iOS Safari URL
     bar doesn't push the composer out of view. The fallback uses vh
     minus the known mobile topbar height (64px) and the admin bar (if
     present, 46px). */
  .mwa-chat {
    grid-template-columns: 1fr;
    min-height: calc(100vh - 64px);
    min-height: calc(100dvh - 64px);
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .admin-bar .mwa-chat {
    min-height: calc(100vh - 110px);
    min-height: calc(100dvh - 110px);
  }
  /* Both panes use the available height; only the active one is
     visible, so the bubbles area can scroll while the composer stays
     pinned at the bottom. */
  .mwa-chat-list-pane,
  .mwa-chat-thread-pane {
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
  }
  .admin-bar .mwa-chat-list-pane,
  .admin-bar .mwa-chat-thread-pane {
    height: calc(100vh - 110px);
    height: calc(100dvh - 110px);
  }
  .mwa-chat-thread-pane { display: none; }
  .mwa-chat.mwa-chat-thread-open .mwa-chat-list-pane { display: none; }
  .mwa-chat.mwa-chat-thread-open .mwa-chat-thread-pane { display: flex; }
  .mwa-chat-back { display: inline-flex; }

  /* Tighter spacing for the list head, search, and thread items so we
     don't waste a quarter of the screen on chrome. */
  .mwa-chat-list-head { padding: 14px 16px 10px; }
  .mwa-chat-list-title { font-size: 1.3rem; }
  .mwa-chat-newbtn { width: 38px; height: 38px; }   /* easy thumb target */
  .mwa-chat-list-search { padding: 10px 12px; }
  .mwa-chat-list-search svg { left: 22px; }
  .mwa-chat-thread-item { padding: 12px 14px; gap: 11px; }
  .mwa-chat-thread-avatar-sm { width: 46px; height: 46px; }
  .mwa-chat-thread-item-name { font-size: 1rem; }
  .mwa-chat-thread-item-preview { font-size: 0.92rem; }

  /* Thread head: pull the back button + avatar tight so the name has
     room. Make the back button a proper tap target. */
  .mwa-chat-thread-head {
    padding: 10px 14px;
    gap: 10px;
    flex-shrink: 0;            /* never collapse so composer stays put */
  }
  .mwa-chat-back { width: 40px; height: 40px; flex-shrink: 0; }
  .mwa-chat-thread-avatar { width: 38px; height: 38px; }
  .mwa-chat-thread-name { font-size: 1.05rem; }
  .mwa-chat-thread-sub { font-size: 0.8rem; }

  /* Bubbles: room for ~85% width strings; tighter outer padding. */
  .mwa-chat-bubbles {
    padding: 14px 12px 10px;
    flex: 1 1 auto;
    min-height: 0;             /* let it actually shrink + scroll */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .mwa-chat-bubble { max-width: 82%; font-size: 0.98rem; padding: 9px 13px; }
  .mwa-chat-row { gap: 6px; }
  .mwa-chat-bubble-avatar,
  .mwa-chat-bubble-avatar-space { width: 24px; height: 24px; }

  /* Composer pinned to the visible bottom of the pane, never scrolling
     off-screen. Slight env() safe-area allowance for iPhone notches. */
  .mwa-chat-composer {
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
    gap: 8px;
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 2;
  }
  .mwa-chat-input { min-height: 40px; font-size: 16px; }  /* 16px prevents iOS zoom on focus */
  .mwa-chat-send { width: 44px; height: 44px; }           /* proper tap target */
}

/* Very narrow phones: max out bubble width and drop tiny side gutters. */
@media (max-width: 380px) {
  .mwa-chat-bubble { max-width: 86%; }
  .mwa-chat-bubbles { padding: 12px 10px 10px; }
  .mwa-chat-list-head { padding: 12px 14px 8px; }
}

/* ═══════════════════════════════════════════════════════════════
   JOIN GATE — blur + overlay UX. When the gate is closed, the
   register form renders fully but is blurred + disabled, and a
   passcode prompt overlays the viewport. On correct submit, the
   cookie is set and the page reloads without the overlay. v1.28
   ═══════════════════════════════════════════════════════════════ */

.mwa-auth-register.is-gated {
  position: relative;
  min-height: 100vh;
}
.mwa-auth-register.is-gated .mwa-auth-card {
  filter: blur(7px) saturate(0.7) brightness(0.95);
  pointer-events: none;
  user-select: none;
  transition: filter 0.4s ease;
}
.mwa-auth-register.is-gated .mwa-auth-card * {
  caret-color: transparent;
}

/* Overlay backdrop */
.mwa-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background:
    radial-gradient(circle at 18% 22%, rgba(122, 53, 24, 0.18), transparent 55%),
    radial-gradient(circle at 82% 78%, rgba(138, 101, 32, 0.16), transparent 55%),
    rgba(231, 220, 184, 0.78);
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  animation: mwa-gate-fade 0.35s ease;
}
@keyframes mwa-gate-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Overlay card */
.mwa-gate-overlay-card {
  width: 100%;
  max-width: 440px;
  background: var(--mwa-parch-light);
  border: 1px solid var(--mwa-ink);
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(20, 14, 6, 0.32), 0 4px 14px rgba(20, 14, 6, 0.18);
  padding: 36px 32px 30px;
  position: relative;
  text-align: center;
  animation: mwa-gate-rise 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.0);
}
@keyframes mwa-gate-rise {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.mwa-gate-overlay-card::before {
  content: '';
  position: absolute;
  top: 8px; left: 8px; right: 8px; bottom: 8px;
  border: 1px solid rgba(196, 154, 56, 0.25);
  pointer-events: none;
  border-radius: 2px;
}

.mwa-gate-overlay-crest {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.mwa-gate-overlay-crest img {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--mwa-parch-light);
  border: 1.5px solid var(--mwa-gold);
  box-shadow: 0 0 0 2px var(--mwa-ink), 0 0 0 3px rgba(201,184,122,0.3);
  display: block;
  object-fit: contain;
  padding: 3px;
}
.mwa-gate-overlay-crest-fallback {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--mwa-parch-light);
  border: 1.5px solid var(--mwa-gold);
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--mwa-ink);
}
.mwa-gate-overlay-eyebrow {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mwa-gold);
  margin-bottom: 8px;
}
.mwa-gate-overlay-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: 1.7rem;
  color: var(--mwa-ink);
  margin: 0 0 10px;
  line-height: 1.2;
}
.mwa-gate-overlay-body {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.98rem;
  color: var(--mwa-ink-mid);
  margin: 0 0 18px;
  line-height: 1.55;
}
.mwa-gate-overlay-error {
  padding: 9px 12px;
  margin-bottom: 12px;
  background: rgba(122, 53, 24, 0.10);
  border-left: 3px solid var(--mwa-rust);
  border-radius: 2px;
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--mwa-rust);
  text-align: left;
}
.mwa-gate-overlay-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mwa-gate-overlay-input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(247, 240, 220, 0.7);
  border: 1px solid var(--mwa-parch-deep);
  border-radius: 3px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.05rem;
  color: var(--mwa-ink-brown);
  text-align: center;
  letter-spacing: 0.02em;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  box-sizing: border-box;
}
.mwa-gate-overlay-input:focus {
  outline: none;
  border-color: var(--mwa-gold);
  background: var(--mwa-parch-light);
  box-shadow: 0 0 0 3px rgba(196, 154, 56, 0.18);
}
.mwa-gate-overlay-submit {
  padding: 12px 24px;
  background: var(--mwa-ink);
  color: var(--mwa-parch-light);
  border: 1px solid var(--mwa-ink);
  border-radius: 2px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.mwa-gate-overlay-submit:hover {
  background: var(--mwa-rust);
  border-color: var(--mwa-rust);
}
.mwa-gate-overlay-links {
  margin-top: 16px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.9rem;
  color: var(--mwa-ink-faint);
}
.mwa-gate-overlay-links a {
  color: var(--mwa-gold);
  text-decoration: none;
  font-weight: 500;
}
.mwa-gate-overlay-links a:hover {
  color: var(--mwa-rust);
}

@media (max-width: 480px) {
  .mwa-gate-overlay-card { padding: 28px 22px 24px; }
  .mwa-gate-overlay-title { font-size: 1.5rem; }
  .mwa-gate-overlay-crest img,
  .mwa-gate-overlay-crest-fallback { width: 60px; height: 60px; }
}