:root {
  --navy:        #10263A;
  --slate:       #2E4E68;
  --cloud:       #F7FAFC;
  --white:       #FFFFFF;
  --gray:        #4B5563;
  --orange:      #D0711E;
  --orange-dark: #A85819;
  --border:      #C9D4DC;
  --danger:      #B91C1C;
  --max:         1100px;
  --radius:      3px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: var(--cloud); /* fallback while image loads */
  background-attachment: fixed;
  background-size: cover;
  background-position: center top;
  color: var(--navy);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
a { color: var(--slate); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { width: min(calc(100% - 2rem), var(--max)); margin: 0 auto; }

/* ── Header ───────────────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1000;
  background: var(--navy);
  border-bottom: 2px solid var(--slate);
}
/* Fallback padding when JS hasn't run yet; JS overrides via inline style */
body { padding-top: 75px; }

/* Narrow screens: same size, keep override for specificity safety */
@media (max-width: 768px) {
  body { padding-top: 75px; }
  .site-logo { height: 75px !important; }
}
.site-header .wrap { padding: 0; }
.site-header .wrap.header-row {
  justify-content: center;
  position: relative;
  flex-wrap: nowrap;
}
.brand { display: flex; align-items: center; }
.brand:hover { text-decoration: none; opacity: .9; }
.site-logo {
  height: 75px;
  width: auto;
  display: block;
}

/* Controls (user menu / sign-in) — absolutely pinned to right, vertically centred */
.header-controls {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}

/* Hamburger toggle — absolutely pinned to left, vertically centred */
.nav-toggle {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; padding: .25rem;
  color: rgba(255,255,255,.78); cursor: pointer; line-height: 1; min-height: 0;
}
.nav-toggle:hover { color: #fff; }
/* Hide hamburger when nav is already showing (unscrolled state) */
.site-header:not(.scrolled) .nav-toggle { display: none; }

/* Nav — shown automatically when not scrolled; hamburger toggles it when scrolled */
.nav { background: var(--navy); border-top: 1px solid rgba(255,255,255,.08); display: none; }
.nav.open { display: block; }
.site-header:not(.scrolled) .nav { display: block; }

/* Vertical layout (hamburger-opened) */
.nav-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: .25rem 0; }
.nav-links > a { display: block; color: rgba(255,255,255,.78); font-size: .875rem; letter-spacing: .03em; padding: .6rem 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,.06); }
.nav-links > a:hover { color: #fff; text-decoration: none; }

/* Horizontal layout when auto-shown at top */
.site-header:not(.scrolled) .nav-links { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 1.25rem; padding: .4rem 0; }
.site-header:not(.scrolled) .nav-links > a { width: auto; border-bottom: none; padding: .3rem 0; }

/* ── Hero banner (semi-transparent strip over body background) ── */
.site-hero {
  background: rgba(16,38,58,.78);
  border-bottom: 2px solid rgba(46,78,104,.7);
  padding: 2.5rem 0 2rem;
  color: #fff;
  backdrop-filter: blur(2px);
}
.site-hero__inner {
  width: min(calc(100% - 2rem), var(--max)); margin: 0 auto;
}
.site-hero h1 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); color: #fff; margin-bottom: .5rem; }
.site-hero .lead { color: rgba(255,255,255,.82); font-size: 1rem; max-width: 54ch; margin-bottom: 1.25rem; }
.site-hero .button-row { justify-content: flex-start; }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
  background: rgba(16,38,58,.88);
  backdrop-filter: blur(2px);
  color: rgba(255,255,255,.7);
  border-top: 2px solid rgba(46,78,104,.7);
  margin-top: 3rem; padding: 2rem 0 2.5rem;
  font-size: .9rem; text-align: center;
}
.site-footer p { margin: .3rem 0; }
.site-footer a { color: rgba(255,255,255,.75); }

/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3 { line-height: 1.2; margin-top: 0; color: var(--navy); }
h1 { font-size: clamp(1.7rem, 4vw, 2.7rem); text-shadow: 0 1px 6px rgba(255,255,255,.6); }
h2 { font-size: 1.25rem; margin-bottom: .75rem; text-shadow: 0 1px 4px rgba(255,255,255,.5); }
.lead { color: var(--gray); font-size: 1.05rem; max-width: 60ch; }
.muted { color: var(--gray); }
.hero { padding: 2rem 0 1rem; }

/* ── Buttons ──────────────────────────────────────────────── */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .65rem 1.25rem; border-radius: var(--radius);
  background: var(--orange); color: #fff;
  font-weight: 600; font-size: .9rem; letter-spacing: .04em;
  border: 2px solid var(--orange); cursor: pointer; text-decoration: none;
}
.button:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: #fff; text-decoration: none; }
.button--secondary {
  background: transparent; color: var(--navy); border: 2px solid var(--navy);
}
.button--secondary:hover { background: var(--navy); color: #fff; }
.button--slate {
  background: var(--slate); color: #fff; border: 2px solid var(--slate);
}
.button--slate:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.button--outline-white {
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.65);
}
.button--outline-white:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.button--danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.button--danger:hover { background: #991b1b; border-color: #991b1b; color: #fff; }
.button--discord { background: #5865F2; border-color: #5865F2; color: #fff; }
.button--discord:hover { background: #4752C4; border-color: #4752C4; color: #fff; }
.button--small { padding: .38rem .85rem; font-size: .8rem; }

/* ── Layout ───────────────────────────────────────────────── */
.header-row, .page-head, .button-row, .meta-row, .filter-row {
  display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
}

/* ── Flash messages ───────────────────────────────────────── */
.flash {
  padding: .85rem 1rem; margin-top: 1rem; border-radius: var(--radius);
  border-left: 4px solid var(--slate); background: var(--white);
  box-shadow: 0 2px 8px rgba(16,38,58,.10); font-weight: 500;
}
.flash--success { border-left-color: #16a34a; background: #f0fdf4; color: #15803d; }
.flash--error   { border-left-color: var(--danger); background: #fef2f2; color: var(--danger); }
.flash--warning { border-left-color: var(--orange); background: #fff7ed; color: var(--orange-dark); }
.flash--info    { border-left-color: var(--slate); background: #f0f6ff; color: var(--slate); }

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: 0 2px 12px rgba(16,38,58,.13);
}

/* Event cards — slate blue left accent */
.event-card { border-left: 10px solid var(--slate); }
.event-card h3 { color: var(--slate); }

/* Club cards — orange left accent */
.club-card { border-left: 10px solid var(--orange); }
.club-card h3 { color: var(--orange-dark); }

/* Resource cards — runway gray left accent */
.resource-card { border-left: 10px solid var(--gray); }
.resource-card h3 { color: var(--gray); }

/* Section/info cards — navy top stripe */
.card--section { border-top: 10px solid var(--navy); }

.grid { display: grid; gap: 1rem; }
.two-up { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.one-up { grid-template-columns: minmax(0, 1fr); }
.three-up { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stack { display: grid; gap: 1rem; }

/* ── Pills ────────────────────────────────────────────────── */
.pill {
  display: inline-block; border: 1px solid var(--border); color: var(--gray);
  padding: .18rem .55rem; border-radius: 2px; font-size: .78rem; font-weight: 500;
  background: var(--cloud);
}
.pill--active { background: var(--orange); color: #fff; border-color: var(--orange); font-weight: 700; }
.pill--live { color: #16a34a; border-color: #16a34a; background: transparent; font-weight: 600; }
.pill--verified { color: #16a34a; border-color: #16a34a; background: transparent; }
.verified-badge { color: #16a34a; vertical-align: middle; margin-left: .2rem; }

/* ── Filter groups ────────────────────────────────────────── */
.filter-group {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-bottom: 1rem; padding: .55rem .85rem;
  background: var(--white); border: 1px solid var(--border);
  border-left: 3px solid var(--slate);
  border-radius: var(--radius);
  box-shadow: 0 2px 12px rgba(16,38,58,.13);
}
.filter-group__label {
  font-weight: 700; font-size: .75rem; color: var(--slate);
  white-space: nowrap; text-transform: uppercase; letter-spacing: .06em;
}
.filter-group__options { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ── Event hero (info callout) ────────────────────────────── */
.event-hero {
  background: var(--cloud); border: 1px solid var(--border);
  border-top: 3px solid var(--slate);
  border-radius: var(--radius); padding: 1.25rem; text-align: center; margin-bottom: 1rem;
}
.event-hero__value { font-size: 1.5rem; font-weight: 700; color: var(--navy); word-break: break-all; }
.event-hero__label {
  font-size: .72rem; font-weight: 700; color: var(--gray);
  margin-bottom: .25rem; text-transform: uppercase; letter-spacing: .08em;
}
.tag-group { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.tag-group__label { font-weight: 600; font-size: .875rem; color: var(--gray); margin-right: .25rem; }

/* ── Forms ────────────────────────────────────────────────── */
.prose > *:last-child { margin-bottom: 0; }
.form-grid { display: grid; gap: 1rem; }
label { display: grid; gap: .4rem; font-weight: 600; color: var(--navy); font-size: .9rem; }
input, textarea, select {
  width: 100%; padding: .7rem .85rem;
  border-radius: var(--radius); border: 1.5px solid var(--border);
  background: var(--white); color: var(--navy);
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--slate); box-shadow: 0 0 0 2px rgba(46,78,104,.15);
}
section { margin-top: 1.25rem; }
ul { padding-left: 1.15rem; }

/* ── User menu ────────────────────────────────────────────── */
.user-menu { position: relative; display: inline-block; }
.user-menu__toggle { cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; color: rgba(255,255,255,.78); }
.user-menu__toggle:hover { color: #fff; }
.user-menu__dropdown {
  display: none; position: absolute; right: 0; top: 100%; margin-top: .35rem;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  min-width: 150px; padding: .25rem 0; z-index: 1100;
  box-shadow: 0 6px 20px rgba(16,38,58,.14);
}
.user-menu__dropdown a {
  display: block; padding: .6rem 1rem; color: var(--navy);
  font-weight: 600; font-size: .875rem;
}
.user-menu__dropdown a:hover { background: var(--cloud); text-decoration: none; }
.user-menu.open .user-menu__dropdown { display: block; }

/* ── Checkboxes ───────────────────────────────────────────── */
label:has(> input[type="checkbox"]) {
  display: flex; flex-direction: row; align-items: center;
  gap: .5rem; cursor: pointer; font-weight: 600;
}
label:has(> input[type="checkbox"]) input[type="checkbox"] {
  width: auto; min-height: auto; flex-shrink: 0;
  width: 1rem; height: 1rem; accent-color: var(--slate);
}

/* ── Touch-friendly (VR browsers) ────────────────────────── */
.button, button[type="submit"] { cursor: pointer; min-height: 44px; }
input:not([type="checkbox"]), textarea, select { min-height: 44px; font-size: 1rem; }

/* ── Tables ───────────────────────────────────────────────── */
table { border-collapse: collapse; }
th, td { padding: .5rem .75rem; text-align: left; border-bottom: 1px solid var(--border); }
th { color: var(--gray); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .two-up, .three-up { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wrap { width: min(calc(100% - 1rem), var(--max)); }
  .nav { gap: .6rem; }
  table { font-size: .875rem; }
  th, td { padding: .4rem .5rem; }
  .site-hero { padding: 3.5rem 0 3rem; }
}

/* ── Live-session pulse animation ────────────────────────── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.75); }
}

/* ── Club directory redesign ─────────────────────────────── */
/* Hero (solid navy — visually continues the fixed header) */
.cd-hero {
  background: var(--navy);
  padding: 1.75rem 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-top: 0;
}
.cd-hero__inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  gap: .5rem;
}
.cd-search {
  flex: 1;
  padding: .7rem 1rem;
  font: inherit;
  font-size: .95rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius);
  color: #fff;
  outline: none;
  transition: border-color .15s, background .15s;
  min-height: 44px;
}
.cd-search::placeholder { color: rgba(255,255,255,.45); }
.cd-search:focus {
  border-color: var(--orange);
  background: rgba(255,255,255,.14);
}
.cd-search-btn {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: .7rem 1.4rem;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.cd-search-btn:hover { background: var(--orange-dark); }

/* Action bar (lighter navy — one row of pill filters) */
.cd-actions {
  background: #1a3350;
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 0 1.25rem;
}
.cd-actions__inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: .5rem 0;
}
.cd-filter-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  flex-wrap: wrap;
  padding: .15rem 0;
}
.cd-filter-row--bottom {
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: .45rem;
  margin-top: .35rem;
}
.cd-filter-label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  margin-right: .25rem;
  white-space: nowrap;
}
.cd-sep {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,.15);
  margin: 0 .375rem;
  flex-shrink: 0;
}

.cd-dropdown { position: relative; }
.cd-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  padding: .35rem .8rem;
  font: inherit;
  font-size: .8rem;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
  min-height: 36px;
  user-select: none;
}
.cd-pill:hover,
.cd-pill--open {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
}
.cd-pill--has-value {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.cd-pill--has-value:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
}
.cd-pill-val { font-weight: 600; }
.cd-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .7;
  flex-shrink: 0;
  transition: transform .15s;
}
.cd-pill--open .cd-caret { transform: rotate(180deg); }

/* Live Now toggle pill (red-tinted when on) */
.cd-live-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  padding: .35rem .8rem;
  font: inherit;
  font-size: .8rem;
  font-weight: 500;
  color: rgba(255,255,255,.78);
  cursor: pointer;
  white-space: nowrap;
  min-height: 36px;
  transition: all .15s;
  user-select: none;
}
.cd-live-pill:hover { background: rgba(255,255,255,.16); }
.cd-live-pill--on {
  background: rgba(224,59,59,.25);
  border-color: rgba(224,59,59,.6);
  color: #ff9090;
}
.cd-live-pill--on:hover { background: rgba(224,59,59,.32); }
.cd-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  flex-shrink: 0;
}
.cd-live-pill--on .cd-live-dot {
  background: #e03b3b;
  box-shadow: 0 0 6px #e03b3b;
  animation: cd-pulse 1.4s ease-in-out infinite;
}
@keyframes cd-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

/* Archived toggle pill (dimmed when off) */
.cd-archived-pill { opacity: .65; }
.cd-archived-pill--on {
  opacity: 1;
  background: var(--orange);
  border-color: var(--orange);
}
.cd-archived-pill--on:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
}

/* Dropdown menus (open below pill) */
.cd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  overflow: hidden;
  z-index: 200;
  display: none;
  animation: cd-fade-down .12s ease;
  padding: 0;
  list-style: none;
}
.cd-menu--open { display: block; }
@keyframes cd-fade-down {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cd-menu-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem .85rem;
  font: inherit;
  font-size: .875rem;
  cursor: pointer;
  color: var(--navy);
  transition: background .1s;
  white-space: nowrap;
  background: none;
  border: 0;
  width: 100%;
  text-align: left;
  min-height: 0;
}
.cd-menu-item:hover { background: var(--cloud); }
.cd-menu-item--selected { color: var(--orange); font-weight: 600; }
.cd-menu-item__check {
  width: 14px;
  font-size: .75rem;
  color: var(--orange);
  flex-shrink: 0;
}

/* Content area (card list) */
.cd-content {
  max-width: 860px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 2.5rem;
}
.cd-result-count {
  font-size: .8rem;
  color: var(--gray);
  margin-bottom: .9rem;
}
.cd-result-count strong { color: var(--navy); }
.cd-empty {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--gray);
}

.cd-cards {
  display: flex;
  flex-direction: column;
  gap: .625rem;
}
.cd-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: stretch;
  overflow: hidden;
  transition: box-shadow .15s, transform .15s;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.cd-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  transform: translateY(-1px);
  text-decoration: none;
}
.cd-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--cd-accent, var(--border));
}
.cd-card--archived { opacity: .72; }
.cd-card--archived:hover { opacity: .9; }

.cd-card__left {
  padding: 1rem 1rem 1rem 1.25rem;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.cd-card__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--orange);
  line-height: 1.2;
}
.cd-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .125rem;
}
.cd-tag {
  font-size: .7rem;
  font-weight: 600;
  padding: .18rem .5rem;
  border-radius: 12px;
  letter-spacing: .02em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.cd-tag--type { background: #e8eaf2; color: #4a5270; }
.cd-tag--recruiting {
  background: #fff3e8;
  color: #b35d0a;
  border: 1px solid #f5c490;
}
.cd-tag--selective {
  background: #edf0ff;
  color: #3d52c4;
  border: 1px solid #b8c4f5;
}
.cd-tag--closed {
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid #d1d5db;
}
.cd-tag--verified {
  background: #edf7f1;
  color: #1e6b3c;
  border: 1px solid #9ed4b5;
  gap: .25rem;
}
.cd-tag--verified::before {
  content: '✓';
  font-size: .65rem;
}
.cd-tag--members { background: #eef0f5; color: #4a5270; }
.cd-tag--archived {
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid #d1d5db;
}

.cd-card__body {
  padding: 1rem 1.125rem;
  font-size: .875rem;
  line-height: 1.6;
  color: #4a5060;
  display: flex;
  align-items: center;
}
.cd-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.cd-card__right {
  padding: 1rem 1rem 1rem .75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem;
  min-width: 80px;
}
.cd-live-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 700;
  color: #e03b3b;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cd-live-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e03b3b;
  animation: cd-pulse 1.4s ease-in-out infinite;
}
.cd-btn-join,
.cd-btn-view {
  border-radius: 6px;
  padding: .45rem 1rem;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  min-height: 34px;
  transition: all .15s;
}
.cd-btn-join {
  background: var(--orange);
  color: #fff;
  border: 1px solid var(--orange);
}
.cd-btn-join:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  color: #fff;
  text-decoration: none;
}
.cd-btn-view {
  background: transparent;
  color: var(--gray);
  border: 1px solid var(--border);
  font-weight: 500;
}
.cd-btn-view:hover {
  border-color: var(--orange);
  color: var(--orange);
  text-decoration: none;
}

/* Hidden-by-filter state (JS-driven) */
.cd-card[hidden] { display: none; }

/* Mobile: cards collapse to single-column stack */
@media (max-width: 640px) {
  .cd-card { grid-template-columns: 1fr; }
  .cd-card__left {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: .85rem 1rem .75rem 1.25rem;
  }
  .cd-card__body { padding: .85rem 1rem; }
  .cd-card__right {
    flex-direction: row;
    align-items: center;
    padding: .6rem 1rem;
    min-width: unset;
    border-top: 1px solid var(--border);
    justify-content: space-between;
  }
  .cd-filter-row { gap: .35rem; }
  .cd-filter-label { display: none; }
  .cd-sep { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   DASHBOARD REDESIGN
   ══════════════════════════════════════════════════════════════════ */

/* Dashboard hero — pill-style action buttons in the hero */
.db-hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; }
.db-btn-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem 1.125rem; border-radius: 20px;
  font: inherit; font-size: .8125rem; font-weight: 600;
  cursor: pointer; border: 1.5px solid; transition: all .15s;
  white-space: nowrap; min-height: 34px; text-decoration: none;
  line-height: 1;
}
.db-btn-pill--primary { background: #C96A1A; color: #fff; border-color: #C96A1A; }
.db-btn-pill--primary:hover { background: #A85714; border-color: #A85714; color: #fff; text-decoration: none; }
.db-btn-pill--ghost { background: transparent; color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.32); }
.db-btn-pill--ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.55); color: #fff; text-decoration: none; }

/* Section-nav bar (pills + current-events dropdown) */
.db-section-nav {
  background: rgba(36,48,69,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 0 1.25rem;
  position: sticky; top: 75px; z-index: 50;
}
.db-section-nav__inner {
  max-width: 860px; margin: 0 auto;
  display: flex; align-items: center;
  padding: .625rem 0; gap: .5rem;
}
.db-nav-center { flex: 1; display: flex; justify-content: center; align-items: center; gap: .3125rem; flex-wrap: wrap; }
.db-nav-right { flex-shrink: 0; }
.db-nav-sep { width: 1px; height: 20px; background: rgba(255,255,255,.15); margin: 0 .1875rem; flex-shrink: 0; }

.db-sec-pill {
  display: inline-flex; align-items: center; gap: .3125rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  padding: .4375rem .875rem; min-height: 36px;
  font: inherit; font-size: .8125rem; font-weight: 500;
  color: rgba(255,255,255,.7); cursor: pointer;
  white-space: nowrap; transition: all .15s;
  user-select: none; line-height: 1;
}
.db-sec-pill:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; text-decoration: none; }
.db-sec-pill.is-active { background: #3b9ed9; border-color: #3b9ed9; color: #fff; font-weight: 600; }

/* Current events pill + dropdown */
.db-events-wrap { position: relative; }
.db-events-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #e03b3b; box-shadow: 0 0 6px #e03b3b;
  animation: db-pulse 1.4s ease-in-out infinite; flex-shrink: 0;
}
.db-events-dot--idle {
  background: rgba(255,255,255,.3); box-shadow: none; animation: none;
}
@keyframes db-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.db-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .65; flex-shrink: 0;
  transition: transform .15s;
}
.db-sec-pill.is-open .db-caret { transform: rotate(180deg); }

.db-events-dropdown {
  position: absolute; top: calc(100% + 8px); left: auto; right: 0;
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,.16);
  min-width: 310px; max-width: 360px; z-index: 400;
  display: none;
}
.db-events-dropdown.is-open { display: block; animation: db-fade .12s ease; }
@keyframes db-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.db-ev-head {
  padding: .6875rem .875rem .5625rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #6b7690;
  border-bottom: 1px solid var(--border);
}
.db-ev-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem .875rem; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: background .1s;
}
.db-ev-item:last-child { border-bottom: none; }
.db-ev-item:hover { background: #f2f4f8; text-decoration: none; }
.db-ev-info { flex: 1; min-width: 0; }
.db-ev-name { font-size: .875rem; font-weight: 600; color: #1a2333; margin-bottom: .125rem; }
.db-ev-meta { font-size: .75rem; color: #6b7690; }
.db-ev-live { display: inline-flex; align-items: center; gap: .25rem; font-size: .625rem; font-weight: 700; color: #e03b3b; letter-spacing: .05em; text-transform: uppercase; flex-shrink: 0; }
.db-ev-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #e03b3b; animation: db-pulse 1.4s ease-in-out infinite; }
.db-ev-empty { padding: 1rem .875rem; font-size: .8125rem; color: #6b7690; text-align: center; }

/* Swipe viewport */
.db-swipe-outer { max-width: 860px; margin: 0 auto; padding: 0 1.25rem; overflow: hidden; }
.db-swipe-track {
  display: flex; width: 100%;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  cursor: grab;
}
.db-swipe-track.is-dragging { cursor: grabbing; transition: none; user-select: none; }
.db-swipe-panel {
  flex: 0 0 100%; width: 100%; min-width: 0;
  padding: 1.375rem 0 .75rem;
  filter: blur(6px); opacity: .35;
  transition: filter .28s ease, opacity .28s ease;
}
.db-swipe-panel.is-active { filter: blur(0); opacity: 1; }

.db-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .75rem;
}
.db-panel-title { font-size: .875rem; font-weight: 700; color: #1a2333; letter-spacing: -.01em; text-shadow: 0 1px 4px rgba(255,255,255,.55); }
.db-panel-link { font-size: .75rem; color: #C96A1A; font-weight: 600; text-decoration: none; }
.db-panel-link:hover { text-decoration: underline; color: #A85714; }

/* Accent colors by club type */
.db-accent-vr { --db-accent: #5a7ef5; }
.db-accent-real { --db-accent: #2a8a50; }
.db-accent-hybrid { --db-accent: #C96A1A; }

/* My clubs cards */
.db-list { display: flex; flex-direction: column; gap: .5rem; }
.db-my-club {
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px;
  display: flex; align-items: center; gap: .875rem;
  padding: .875rem 1rem .875rem 1.375rem;
  position: relative;
  transition: box-shadow .15s, transform .15s;
  text-decoration: none; color: inherit;
}
.db-my-club::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 6px; background: var(--db-accent, var(--border));
  border-radius: 8px 0 0 8px;
}
.db-my-club:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); transform: translateY(-1px); text-decoration: none; }
.db-my-club__info { flex: 1; min-width: 0; }
.db-my-club__name { font-size: 1.0625rem; font-weight: 700; color: #1a2333; margin-bottom: .3125rem; }
.db-my-club__tags { display: flex; gap: .3125rem; flex-wrap: wrap; align-items: center; }
.db-my-club__right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* Featured club card (compact 3-column grid) */
.db-feat-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px;
  display: grid; grid-template-columns: 190px 1fr auto;
  align-items: stretch; overflow: hidden;
  position: relative;
  transition: box-shadow .15s, transform .15s;
  text-decoration: none; color: inherit;
}
.db-feat-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 6px; background: var(--db-accent, var(--border));
}
.db-feat-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); transform: translateY(-1px); text-decoration: none; }
.db-feat-card__left {
  padding: .6875rem .8125rem .6875rem 1.25rem;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: .3125rem;
}
.db-feat-card__name { font-size: .875rem; font-weight: 700; color: #C96A1A; line-height: 1.2; }
.db-feat-card__tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.db-feat-card__body { padding: .6875rem .875rem; font-size: .8125rem; line-height: 1.55; color: #4a5060; display: flex; align-items: center; }
.db-feat-card__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.db-feat-card__right { padding: .6875rem .75rem; display: flex; align-items: center; }

/* Event card (upcoming) */
.db-event-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px;
  display: flex; align-items: center; gap: 1rem;
  padding: .875rem 1rem;
  transition: box-shadow .15s, transform .15s;
  text-decoration: none; color: inherit;
}
.db-event-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); transform: translateY(-1px); text-decoration: none; }
.db-event-bar { width: 6px; height: 48px; border-radius: 3px; background: var(--db-accent, #5a7ef5); flex-shrink: 0; }
.db-event-info { flex: 1; min-width: 0; }
.db-event-club { font-size: .6875rem; color: #6b7690; margin-bottom: .1875rem; }
.db-event-name { font-size: 1rem; font-weight: 700; color: #1a2333; margin-bottom: .25rem; }
.db-event-when { font-size: .75rem; color: #6b7690; }
.db-event-right { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; flex-shrink: 0; }

/* Live badge (reusable) */
.db-live-badge { display: inline-flex; align-items: center; gap: .3125rem; font-size: .6875rem; font-weight: 700; color: #e03b3b; letter-spacing: .04em; text-transform: uppercase; }
.db-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #e03b3b; animation: db-pulse 1.4s ease-in-out infinite; }

/* Tags */
.db-tag { font-size: .6875rem; font-weight: 600; padding: .125rem .5rem; border-radius: 10px; letter-spacing: .02em; white-space: nowrap; display: inline-flex; align-items: center; }
.db-tag--type { background: #e8eaf2; color: #4a5270; }
.db-tag--recruiting { background: #fff3e8; color: #b35d0a; border: 1px solid #f5c490; }
.db-tag--selective { background: #edf0ff; color: #3d52c4; border: 1px solid #b8c4f5; }
.db-tag--verified { background: #edf7f1; color: #1e6b3c; border: 1px solid #9ed4b5; }

/* Role badges */
.db-role { font-size: .625rem; font-weight: 700; padding: .125rem .5rem; border-radius: 10px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.db-role--owner { background: #fff3e0; color: #b35d0a; border: 1px solid #f5c490; }
.db-role--member { background: #eef0f5; color: #6b7690; }

/* Small buttons inside cards */
.db-btn-sm {
  background: transparent; border: 1px solid var(--border);
  color: #6b7690; border-radius: 6px;
  padding: .375rem .8125rem; font: inherit; font-size: .75rem; font-weight: 500;
  cursor: pointer; transition: all .15s; white-space: nowrap;
  text-decoration: none; display: inline-flex; align-items: center; line-height: 1;
  min-height: 30px;
}
.db-btn-sm:hover { border-color: #C96A1A; color: #C96A1A; text-decoration: none; }
.db-btn-sm--orange { background: #C96A1A; color: #fff; border-color: #C96A1A; }
.db-btn-sm--orange:hover { background: #A85714; border-color: #A85714; color: #fff; text-decoration: none; }

.db-empty {
  background: rgba(255,255,255,.85);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.75rem 1.25rem;
  text-align: center;
  color: #6b7690;
  font-size: .875rem;
}
.db-empty a { color: #C96A1A; font-weight: 600; }

/* Unverified banner — sit above section-nav */
.db-unverified {
  background: #fffbeb;
  border: 1px solid #f5c490;
  border-left: 3px solid #C96A1A;
  border-radius: 8px;
  padding: .75rem 1rem;
  margin: 1rem 0;
  font-size: .875rem;
}

/* ── MODERATION ALERTS (dashboard) ── */
.mod-alerts { display: flex; flex-direction: column; gap: .625rem; margin: 1rem 0; }
.mod-alert {
  border-radius: 8px;
  padding: .75rem 1rem;
  font-size: .875rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  justify-content: space-between;
}
.mod-alert--warning {
  background: #fff8f0;
  border: 1px solid #f5c490;
  border-left: 3px solid #C96A1A;
}
.mod-alert--restriction {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-left: 3px solid #6b7280;
}
.mod-alert--delist {
  background: #fff8f0;
  border: 1px solid #f5c490;
  border-left: 3px solid #C96A1A;
}
.mod-alert--notice {
  background: #f0f5ff;
  border: 1px solid #c0cfe8;
  border-left: 3px solid #4a6fa5;
}
.mod-alert__body { flex: 1; min-width: 0; }
.mod-alert__title { display: block; font-weight: 700; margin-bottom: .2rem; }
.mod-alert__reason { margin: .25rem 0; }
.mod-alert__meta { margin: .25rem 0 0; font-size: .8125rem; color: #6b7280; }
.mod-alert__action { flex-shrink: 0; align-self: center; }
html.dark-mode .mod-alert--warning { background: #1e1008; border-color: #6b3e1a; color: #cde3f0; }
html.dark-mode .mod-alert--restriction { background: #1a1c22; border-color: #3a3d48; color: #cde3f0; }
html.dark-mode .mod-alert--delist { background: #1e1008; border-color: #6b3e1a; color: #cde3f0; }
html.dark-mode .mod-alert--notice { background: #0f1825; border-color: #2a3a55; color: #cde3f0; }

/* ── FEATURED RESOURCES (dashboard) & Resources page rows ── */
.rs-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem 1.25rem;
  margin-top: 1.25rem;
}
.rs-header {
  font-size: .6875rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #6b7690;
  margin-bottom: .25rem;
}
.rs-list { display: flex; flex-direction: column; }
.rs-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .5625rem 0; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: background .1s;
  min-width: 0;
}
.rs-item:last-child { border-bottom: none; }
.rs-item:hover { text-decoration: none; }
.rs-item:hover .rs-name { color: #C96A1A; }
.rs-icon {
  width: 30px; height: 30px; background: #eef0f5;
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-size: .8125rem; color: #6b7690; flex-shrink: 0;
  overflow: hidden;
}
.rs-icon img { width: 100%; height: 100%; object-fit: contain; }
.rs-name { font-size: .8125rem; font-weight: 600; color: #1a2333; transition: color .15s; flex-shrink: 0; }
.rs-sep { color: var(--border); font-size: .75rem; flex-shrink: 0; }
.rs-desc { font-size: .75rem; color: #6b7690; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.rs-count { font-size: .75rem; color: #6b7690; flex-shrink: 0; }
.rs-arrow { color: #c9d4dc; font-size: .75rem; flex-shrink: 0; margin-left: auto; }

/* Standalone Resources page */
.rs-page {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem 1.25rem;
  margin-top: .5rem;
}

/* Mobile */
@media (max-width: 640px) {
  .db-section-nav__inner { padding: .5rem 0; gap: .375rem; }
  .db-swipe-outer { padding: 0 1rem; }
  .db-section-nav { padding: 0 1rem; }
  .db-feat-card { grid-template-columns: 1fr; }
  .db-feat-card__left { border-right: none; border-bottom: 1px solid var(--border); }
  .db-feat-card__right { padding: .625rem .875rem; }
  .db-my-club__name { font-size: .9375rem; }
  .rs-section { padding: .875rem 1rem 1rem; }
  .rs-desc { display: none; }
  .db-events-dropdown { min-width: 280px; max-width: calc(100vw - 2rem); }
}



/* ── Club banner mosaic enhancements ───────────────────────────── */
.cd-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .9rem;
}
.cd-toolbar .cd-result-count {
  display: inline-block;
  background: rgba(8,18,35,.72);
  color: rgba(255,255,255,.9);
  padding: 2px 10px;
  border-radius: 4px;
  font-size: .875rem;
  font-weight: 600;
  margin: 0;
}
.cd-toolbar .cd-result-count strong { color: #fff; }
.cd-view-toggle {
  display: inline-flex;
  background: rgba(16,38,58,.72);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 2px;
}
.cd-view-toggle__btn {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.72);
  border-radius: 999px;
  padding: .35rem .7rem;
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
}
.cd-view-toggle__btn--active {
  background: rgba(255,255,255,.22);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.cd-card__body {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: .75rem;
}
.cd-card__banner,
.club-wall-preview {
  display: block;
  background-color: #eef0f5;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  image-rendering: pixelated;
}
.cd-card__banner {
  min-height: 58px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.cd-card__banner:not(.has-banner-preview)::after {
  content: 'No banner yet';
  display: flex;
  height: 58px;
  align-items: center;
  justify-content: center;
  color: rgba(8,18,35,.45);
  font-size: .75rem;
  font-weight: 600;
}

.club-banner-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-auto-rows: 120px;
  grid-auto-flow: dense;
  gap: 4px;
}
.club-banner-wall[hidden] { display: none; }
.cd-cards[hidden] { display: none; }
.club-wall-item {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 5px;
  background: #eef0f5;
  color: #fff;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.club-wall-item[hidden] { display: none; }
.club-wall-item:hover,
.club-wall-item:focus,
.club-wall-item--selected {
  z-index: 1;
  text-decoration: none;
}
.club-wall-item--selected {
  outline: 6px solid rgba(0,0,0,.82);
  outline-offset: -6px;
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 14px rgba(0,0,0,.45);
}
.club-wall-preview {
  position: absolute;
  inset: 0;
  transform: scale(1.01);
}
.club-wall-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: .55rem .6rem;
  background: linear-gradient(to top, rgba(8,18,35,.86), rgba(8,18,35,.05));
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .15s, transform .15s;
}
.club-wall-item:hover .club-wall-label,
.club-wall-item:focus .club-wall-label,
.club-wall-item--selected .club-wall-label {
  opacity: 1;
  transform: translateY(0);
}
.club-wall-item--archived { opacity: .55; }

/* ── Club member list ──────────────────────────────── */
.member-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.member-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.member-row__avatar { width: 32px; height: 32px; flex-shrink: 0; }
.member-row__avatar-ph {
  display: block;
  width: 32px;
  height: 32px;
  background: #f0f0f0;
  border: 1px dashed #ccc;
  border-radius: 2px;
}
.member-row__info { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; min-width: 0; }
.member-row__role { font-size: .85rem; }
.member-name-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(0,0,0,.2);
}
.member-name-btn:hover { text-decoration-color: currentColor; }
.member-popup {
  position: absolute;
  top: calc(100% + 4px);
  left: 38px;
  z-index: 200;
  background: var(--white, #fff);
  border: 1px solid var(--border, #C9D4DC);
  border-radius: 8px;
  padding: .6rem .8rem;
  min-width: 170px;
  box-shadow: 0 4px 14px rgba(0,0,0,.13);
  font-size: .875rem;
}
html.dark-mode .member-row__avatar-ph { background: var(--cloud); border-color: var(--border); }
html.dark-mode .member-popup { background: var(--white); border-color: var(--border); color: #cde3f0; }
html.dark-mode .member-popup .member-name-btn,
html.dark-mode #all-members-modal .member-name-btn { color: #d5eaf8; }

.banner-editor__controls,
.banner-editor__footer {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  margin-bottom: .85rem;
}
.banner-editor__choice,
.banner-editor__columns {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .875rem;
  font-weight: 600;
}
.banner-editor__columns input {
  width: 4.5rem;
}
.banner-editor__preview-wrap {
  margin: .75rem 0 1rem;
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.64);
}
.banner-editor__preview {
  display: block;
  max-width: 100%;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 6px;
}
.banner-editor__selected {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .5rem;
  margin-bottom: .75rem;
}
.banner-arrange-grid {
  display: grid;
  grid-auto-rows: 72px;
  gap: 3px;
  margin-bottom: .5rem;
}
.banner-cell {
  position: relative;
  background: var(--surface-2, #f7f8fa);
  border: 1px dashed rgba(0,0,0,.18);
  border-radius: 5px;
  overflow: hidden;
}
.banner-cell--reserved {
  opacity: .38;
}
.banner-cell--drag-over {
  background: rgba(90,126,245,.1);
  border-color: #5a7ef5;
  border-style: solid;
}
.banner-cell__tile {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3px;
  gap: 2px;
  cursor: grab;
  text-align: center;
}
.banner-cell__tile.is-dragging { opacity: .35; }
.banner-cell__tile canvas {
  max-width: 62%;
  max-height: 58%;
  width: auto;
  height: auto;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.banner-cell__name {
  font-size: .58rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.1;
}
.banner-cell__remove {
  position: absolute;
  top: 1px;
  right: 2px;
  border: 0;
  background: transparent;
  color: rgba(192,57,43,.75);
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
  padding: 1px 2px;
  display: none;
}
.banner-cell:hover .banner-cell__remove { display: block; }
.banner-cell__missing-thumb {
  display: block;
  width: 55%;
  aspect-ratio: 1;
  background:
    linear-gradient(45deg, #eee 25%, transparent 25%),
    linear-gradient(-45deg, #eee 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eee 75%),
    linear-gradient(-45deg, transparent 75%, #eee 75%);
  background-color: #d8d8d8;
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  border-radius: 2px;
}
.banner-pool { min-height: 1.5rem; }
.banner-pool--drag-over {
  outline: 1px dashed #5a7ef5;
  border-radius: 6px;
  background: rgba(90,126,245,.06);
}
.banner-pool-tile.is-dragging { opacity: .4; }
.banner-editor__available {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .85rem;
}
.banner-editor__available .banner-add {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.banner-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--surface-2,#f7f8fa);
  padding: .4rem .5rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: grab;
}
.banner-item.is-dragging {
  opacity: .45;
}
.banner-item--missing {
  border-style: dashed;
  color: var(--gray);
}
.banner-item__missing-thumb {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background:
    linear-gradient(45deg, #eee 25%, transparent 25%),
    linear-gradient(-45deg, #eee 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eee 75%),
    linear-gradient(-45deg, transparent 75%, #eee 75%);
  background-color: #d8d8d8;
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
}
.banner-item__name {
  flex: 1;
  min-width: 0;
  font-size: .875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.banner-item__remove {
  border: 0;
  background: transparent;
  color: #c0392b;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 640px) {
  .cd-card__banner { min-height: 72px; }
  .club-banner-wall {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    grid-auto-rows: 96px;
  }
}

/* ── Light/Dark and Text Boost in user dropdown ── */
.user-menu__dropdown button {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .6rem 1rem; background: transparent; border: none; cursor: pointer;
  color: var(--navy); font-weight: 600; font-size: .875rem; text-align: left; line-height: 1.2;
}
.user-menu__dropdown button:hover { background: var(--cloud); }
.user-menu__dropdown hr { border: none; border-top: 1px solid var(--border); margin: .25rem 0; }
.dm-toggle .dm-sun  { display: none; }
.dm-toggle .dm-moon { display: block; }
html.dark-mode .dm-toggle .dm-sun  { display: block; }
html.dark-mode .dm-toggle .dm-moon { display: none; }
.access-toggle__icon { font-size: .75rem; font-weight: 700; letter-spacing: -.03em; flex-shrink: 0; }
html.accessibility-mode .user-menu__dropdown .access-toggle { background: var(--cloud); }

/* ── Dark mode (class-toggled, default on) ────────────────────── */
html.dark-mode {
  color-scheme: dark;
  --cloud:  #0f1c2b;
  --white:  #1b2f45;
  --gray:   #7ab2d0;
  --border: #274059;
}

html.dark-mode body  { color: #cde3f0; }
html.dark-mode a     { color: #8bbdd6; }
html.dark-mode a:hover { color: #a8d0e8; }
html.dark-mode .button             { color: #fff; }
html.dark-mode .button:hover       { color: #fff; }
html.dark-mode a.button            { color: #fff; }
html.dark-mode a.button:hover      { color: #fff; }
html.dark-mode .db-btn-pill--primary       { color: #fff; }
html.dark-mode .db-btn-pill--primary:hover { color: #fff; }

html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3 { color: #d5eaf8; }
html.dark-mode h1 { text-shadow: 0 1px 8px rgba(0,0,0,.65); }
html.dark-mode h2 { text-shadow: 0 1px 5px rgba(0,0,0,.55); }
html.dark-mode .lead { color: var(--gray); }
html.dark-mode .filter-group__label { color: var(--gray); }

html.dark-mode label { color: #cde3f0; }

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
  background: var(--cloud);
  color: #cde3f0;
  border-color: var(--border);
}
html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
  box-shadow: 0 0 0 2px rgba(122,178,208,.25);
}

html.dark-mode .button--secondary { color: #cde3f0; border-color: rgba(205,227,240,.5); }
html.dark-mode .button--secondary:hover { background: rgba(205,227,240,.08); border-color: rgba(205,227,240,.85); color: #fff; }

html.dark-mode .user-menu__dropdown { background: var(--white); border-color: var(--border); }
html.dark-mode .user-menu__dropdown a { color: #cde3f0; }
html.dark-mode .user-menu__dropdown a:hover { background: var(--cloud); }
html.dark-mode .user-menu__dropdown button { color: #cde3f0; }
html.dark-mode .user-menu__dropdown button:hover { background: var(--cloud); }

html.dark-mode .flash { background: var(--white); color: #cde3f0; }
html.dark-mode .flash--success { background: #0b2319; color: #4ade80; }
html.dark-mode .flash--error   { background: #27100f; color: #f87171; }
html.dark-mode .flash--warning { background: #261604; color: #fb923c; }
html.dark-mode .flash--info    { background: #0c1e2f; color: #8bbdd6; }

html.dark-mode .event-hero { background: var(--white); border-color: var(--border); }
html.dark-mode .event-hero__value { color: #d5eaf8; }
html.dark-mode .event-card h3 { color: #8bbdd6; }
html.dark-mode .resource-card h3 { color: var(--gray); }

/* Club directory */
html.dark-mode .cd-menu { background: var(--white); border-color: var(--border); }
html.dark-mode .cd-menu-item { color: #cde3f0; }
html.dark-mode .cd-menu-item:hover { background: var(--cloud); }
html.dark-mode .cd-menu-item--selected { color: var(--orange); }
html.dark-mode .cd-menu-item__check { color: var(--orange); }
html.dark-mode .cd-result-count { color: var(--gray); }
html.dark-mode .cd-result-count strong { color: #cde3f0; }
html.dark-mode .cd-empty { background: var(--white); border-color: var(--border); color: var(--gray); }
html.dark-mode .cd-card { background: var(--white); border-color: var(--border); }
html.dark-mode .cd-card__left { border-color: var(--border); }
html.dark-mode .cd-card__body { color: #a8c4d8; }
html.dark-mode .cd-card__right { border-color: var(--border); }
html.dark-mode .cd-tag--type { background: #1e2440; color: #8a98c8; border-color: #2e3460; }
html.dark-mode .cd-tag--recruiting { background: #2a1a08; color: #f5a060; border-color: #6b3e1a; }
html.dark-mode .cd-tag--selective { background: #1a2048; color: #7d94f5; border-color: #3a4a9e; }
html.dark-mode .cd-tag--closed { background: #1e2530; color: #7a98b0; border-color: #2a3d50; }
html.dark-mode .cd-tag--verified { background: #0f2a1a; color: #4ade80; border-color: #1e5030; }
html.dark-mode .cd-tag--members { background: #1e2440; color: #8a98c8; border-color: #2e3460; }
html.dark-mode .cd-tag--archived { background: #1e2530; color: #7a98b0; border-color: #2a3d50; }
html.dark-mode .cd-card__banner:not(.has-banner-preview),
html.dark-mode .club-wall-preview:not(.has-banner-preview) { background-color: var(--cloud) !important; }
html.dark-mode .cd-card__banner:not(.has-banner-preview)::after { color: rgba(200,227,240,.3); }
html.dark-mode .club-wall-item { background: var(--white); }
html.dark-mode .banner-editor__preview-wrap { background: rgba(0,0,0,.25); }
html.dark-mode .banner-item { background: var(--cloud); border-color: var(--border); }
html.dark-mode .banner-cell { background: var(--cloud); border-color: var(--border); }

/* Dashboard */
html.dark-mode .db-events-dropdown { background: var(--white); border-color: var(--border); }
html.dark-mode .db-ev-head { color: var(--gray); border-color: var(--border); }
html.dark-mode .db-ev-item { border-color: var(--border); color: #cde3f0; }
html.dark-mode .db-ev-item:hover { background: var(--cloud); }
html.dark-mode .db-ev-name { color: #d5eaf8; }
html.dark-mode .db-ev-meta { color: var(--gray); }
html.dark-mode .db-ev-empty { color: var(--gray); }
html.dark-mode .db-panel-title { color: #d5eaf8; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
html.dark-mode .db-panel-link { color: #C96A1A; }
html.dark-mode .db-panel-link:hover { color: #A85714; }
html.dark-mode .db-my-club { background: var(--white); border-color: var(--border); }
html.dark-mode .db-my-club__name { color: #d5eaf8; }
html.dark-mode .db-feat-card { background: var(--white); border-color: var(--border); }
html.dark-mode .db-feat-card__left { border-color: var(--border); }
html.dark-mode .db-feat-card__body { color: #a8c4d8; }
html.dark-mode .db-event-card { background: var(--white); border-color: var(--border); }
html.dark-mode .db-event-club { color: var(--gray); }
html.dark-mode .db-event-name { color: #d5eaf8; }
html.dark-mode .db-event-when { color: var(--gray); }
html.dark-mode .db-tag--type { background: #1e2440; color: #8a98c8; }
html.dark-mode .db-tag--recruiting { background: #2a1a08; color: #f5a060; border-color: #6b3e1a; }
html.dark-mode .db-tag--selective { background: #1a2048; color: #7d94f5; border-color: #3a4a9e; }
html.dark-mode .db-tag--verified { background: #0f2a1a; color: #4ade80; border-color: #1e5030; }
html.dark-mode .db-role--owner { background: #2a1a08; color: #f5a060; border-color: #6b3e1a; }
html.dark-mode .db-role--member { background: #1e2530; color: #7a98b0; }
html.dark-mode .db-btn-sm { color: var(--gray); border-color: var(--border); }
html.dark-mode .db-btn-sm:hover { border-color: #C96A1A; color: #C96A1A; }
html.dark-mode .db-btn-sm--orange { color: #fff; }
html.dark-mode .db-empty { background: var(--white); border-color: var(--border); color: var(--gray); }
html.dark-mode .db-empty a { color: #C96A1A; }
html.dark-mode .db-unverified { background: #1e1008; border-color: #6b3e1a; color: #cde3f0; }

/* Resources */
html.dark-mode #ext-link-modal > div { color: #cde3f0 !important; }
#ext-link-modal > div                { color: #10263a !important; }
html.dark-mode .rs-section { background: var(--white); border-color: var(--border); }
html.dark-mode .rs-page { background: var(--white); border-color: var(--border); }
html.dark-mode .rs-header { color: var(--gray); }
html.dark-mode .rs-item { border-color: var(--border); }
html.dark-mode .rs-icon { background: var(--cloud); color: var(--gray); }
html.dark-mode .rs-name { color: #d5eaf8; }
html.dark-mode .rs-desc { color: var(--gray); }
html.dark-mode .rs-count { color: var(--gray); }
html.dark-mode .rs-sep { color: var(--border); }
html.dark-mode .rs-arrow { color: var(--border); }

/* ── Larger text / higher contrast accessibility mode ──────────── */
html.accessibility-mode body {
  font-size: 1.075rem;
  line-height: 1.62;
}

/* Strengthen muted/faded text */
html.accessibility-mode [style*="opacity:.55"],
html.accessibility-mode [style*="opacity: .55"] { opacity: .8 !important; }
html.accessibility-mode .lead { opacity: 1; }
html.accessibility-mode .site-footer p { opacity: 1; }
html.accessibility-mode .site-footer [style*="opacity"] { opacity: .85 !important; }

/* Nav */
html.accessibility-mode .nav-links a { font-weight: 500; }

/* Borders */
html.accessibility-mode input,
html.accessibility-mode textarea,
html.accessibility-mode select { border-width: 2px; }

/* Header controls — prevent wrapping on small screens */
html.accessibility-mode .header-controls { gap: .35rem; }
html.accessibility-mode .button--small { font-size: .8rem; }
html.accessibility-mode .user-menu__toggle { font-size: .8rem; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tables — scroll horizontally rather than wrapping */
html.accessibility-mode .table-wrap,
html.accessibility-mode table { overflow-x: auto; display: block; }

/* Club directory */
html.accessibility-mode .filter-group__label { font-weight: 600; }
html.accessibility-mode .cd-menu { font-size: 1rem; }
html.accessibility-mode .cd-card { border-width: 2px; }
html.accessibility-mode .cd-card__body { font-size: .975rem; }
html.accessibility-mode .cd-tag { font-size: .8rem; padding: .2rem .5rem; }
html.accessibility-mode .cd-result-count { font-size: .95rem; }
html.accessibility-mode .cd-empty { font-size: 1rem; }
html.accessibility-mode .club-wall-item__label { font-size: .8rem; font-weight: 600; }

/* Dashboard */
html.accessibility-mode .db-btn-pill { font-size: .85rem; padding: .3rem .75rem; }
html.accessibility-mode .db-events-dropdown { font-size: .975rem; }
html.accessibility-mode .db-ev-name { font-weight: 600; }
html.accessibility-mode .db-panel-title { font-size: 1.05rem; }
html.accessibility-mode .db-my-club { border-width: 2px; }
html.accessibility-mode .db-feat-card { border-width: 2px; }
html.accessibility-mode .db-feat-card__body { font-size: .975rem; }
html.accessibility-mode .db-event-card { border-width: 2px; }
html.accessibility-mode .db-btn-sm { font-size: .8rem; }
html.accessibility-mode .db-empty { font-size: 1rem; }

/* Resources */
html.accessibility-mode .rs-name { font-weight: 600; }
html.accessibility-mode .rs-desc { font-size: .95rem; }

/* Member popup and banner editor */
html.accessibility-mode .member-popup { font-size: .95rem; }
html.accessibility-mode .banner-editor__label { font-weight: 600; }

/* Account page — aircraft panel has page-local fixed sizing */
html.accessibility-mode .aircraft-panel { font-size: .95rem; }
html.accessibility-mode .aircraft-panel .panel-label { font-size: .8rem; font-weight: 600; }

/* Dark mode combined contrast overrides */
html.accessibility-mode.dark-mode body { color: #dceef8; }
html.accessibility-mode.dark-mode a { color: #9dcfe8; }
html.accessibility-mode.dark-mode h1,
html.accessibility-mode.dark-mode h2,
html.accessibility-mode.dark-mode h3 { color: #e5f2fb; }
html.accessibility-mode.dark-mode .lead { color: #9dcfe8; }
html.accessibility-mode.dark-mode label { color: #dceef8; }
html.accessibility-mode.dark-mode input,
html.accessibility-mode.dark-mode textarea,
html.accessibility-mode.dark-mode select { color: #dceef8; border-color: #4a7899; }
html.accessibility-mode.dark-mode .cd-card__body { color: #bcd8ec; }
html.accessibility-mode.dark-mode .cd-result-count { color: #9dcfe8; }
html.accessibility-mode.dark-mode .db-ev-meta { color: #9dcfe8; }
html.accessibility-mode.dark-mode .db-event-club { color: #9dcfe8; }
html.accessibility-mode.dark-mode .rs-desc { color: #9dcfe8; }
html.accessibility-mode.dark-mode .site-footer { color: #bcd8ec; }

/* ── Orange buttons: force white text in accessibility+dark mode ────────────
   html.accessibility-mode.dark-mode a has specificity 0-2-2 which beats
   html.dark-mode a.button (0-2-2, earlier in file). These 3-class selectors
   win at 0-3-1 / 0-3-2 and cover every orange button pattern in the app. */
html.accessibility-mode.dark-mode .button,
html.accessibility-mode.dark-mode .button:hover          { color: #fff; }
html.accessibility-mode.dark-mode a.button,
html.accessibility-mode.dark-mode a.button:hover         { color: #fff; }
html.accessibility-mode.dark-mode .button--secondary,
html.accessibility-mode.dark-mode a.button--secondary    { color: #fff; }
html.accessibility-mode.dark-mode .button--outline,
html.accessibility-mode.dark-mode a.button--outline      { color: #fff; }
html.accessibility-mode.dark-mode .button.muted,
html.accessibility-mode.dark-mode a.button.muted         { color: #fff; }
html.accessibility-mode.dark-mode .db-btn-sm--orange,
html.accessibility-mode.dark-mode .db-btn-sm--orange:hover { color: #fff; }
html.accessibility-mode.dark-mode .db-btn-pill--primary,
html.accessibility-mode.dark-mode .db-btn-pill--primary:hover { color: #fff; }
html.accessibility-mode.dark-mode .cd-search-btn         { color: #fff; }