/* Campus Pulse · Sunstone light theme */
:root {
  --bg: #FFFFFF;
  --bg-cream: #F9F3EA;
  --bg-ice: #F5F9FB;
  --navy: #22366A;
  --navy-deep: #16244A;
  --ink: #0C0C0C;
  --ink-dim: #647297;
  --ink-faint: #9AA3BC;
  --gold: #C88C32;
  --gold-dark: #B57C28;
  --gold-soft: rgba(200, 140, 50, 0.16);
  --line: rgba(34, 54, 106, 0.14);
  --danger: #C8443D;
  --font: "Public Sans", "Inter", Arial, sans-serif;
  --shadow: 0 2px 8px rgba(34,54,106,.08);
  --shadow-lift: 0 10px 30px rgba(34,54,106,.16);
  --radius: 14px;
  --sab: env(safe-area-inset-bottom, 0px);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font); background: var(--bg-ice); color: var(--ink);
  min-height: 100dvh; touch-action: manipulation;
}
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px;
}
input, select, textarea { font-family: var(--font); font-size: 16px; }
.icon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2;
  fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -3px; }
.icon.filled { fill: currentColor; stroke: none; }
img, video { display: block; }
.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =================== LOGIN =================== */
.login { min-height: 100dvh; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--bg); }
.login-brand {
  background: linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 55%, #2d4485 100%);
  color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.login-brand::after {
  content: ""; position: absolute; right: -120px; bottom: -120px; width: 420px; height: 420px;
  border-radius: 50%; background: radial-gradient(circle, rgba(200,140,50,.28), transparent 68%);
}
.login-wordmark { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; }
.login-wordmark .brand { height: 22px; }
.login-wordmark .wm-sep { height: 20px; margin: 0 12px; }
.login-wordmark small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); margin-top: 2px; }
.login-pitch { position: relative; z-index: 1; }
.login-pitch h1 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; max-width: 420px; }
.login-pitch h1 .hl { color: #E8B563; box-shadow: inset 0 -3px 0 var(--gold); }
.login-pitch p { margin-top: 14px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.72); max-width: 400px; }
.login-points { margin-top: 28px; display: flex; flex-direction: column; gap: 13px; }
.login-point { display: flex; align-items: center; gap: 11px; font-size: 14px; color: rgba(255,255,255,.88); }
.login-point .icon { color: var(--gold); width: 19px; height: 19px; }
.login-foot { font-size: 12px; color: rgba(255,255,255,.45); position: relative; z-index: 1; }

.login-panel { display: flex; align-items: center; justify-content: center; padding: 48px 24px; background: var(--bg-ice); }
.login-card {
  background: var(--bg); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-lift); padding: 40px 36px; width: min(400px, 100%); text-align: center;
}
.login-card h2 { font-size: 21px; font-weight: 700; color: var(--navy); }
.login-card > p { margin-top: 8px; font-size: 14px; color: var(--ink-dim); line-height: 1.55; }
.btn-google {
  margin-top: 28px; width: 100%; min-height: 52px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--bg);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 15px; font-weight: 600; color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
.btn-google:hover { border-color: var(--navy); box-shadow: var(--shadow); }
.btn-google svg { width: 20px; height: 20px; }
.login-domain {
  margin-top: 18px; font-size: 12.5px; color: var(--ink-faint);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.login-domain .icon { width: 14px; height: 14px; }
.login-error {
  margin-top: 16px; background: rgba(200,68,61,.09); color: var(--danger);
  border-radius: 10px; padding: 11px 14px; font-size: 13px; font-weight: 500; line-height: 1.5;
}

@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .login-brand { padding: 32px 24px 40px; min-height: 42dvh; gap: 28px; }
  .login-foot { display: none; }
  .login-panel { margin-top: -24px; border-radius: 24px 24px 0 0; position: relative; padding: 36px 20px calc(36px + var(--sab)); }
  .login-card { box-shadow: var(--shadow); padding: 32px 24px; }
}

/* =================== APP CHROME =================== */
header.app-header { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.header-inner { max-width: 1220px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 14px; }
.wordmark { font-weight: 700; font-size: 19px; color: var(--navy); letter-spacing: -0.01em; white-space: nowrap; }
.wordmark .hl { position: relative; z-index: 0; }
.wordmark .hl::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 1px; height: 8px;
  background: var(--gold); opacity: .4; z-index: -1; border-radius: 2px; }
.wordmark small { display: block; font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
/* The Sunstone logo leads every wordmark: the official navy PNG, a hairline, then the product name.
   On the navy login panel the same file is inverted to white. */
.brand { height: 19px; width: auto; display: inline-block; vertical-align: -3px; }
.wm-sep { display: inline-block; width: 1px; height: 18px; background: var(--line); margin: 0 10px; vertical-align: -3px; }
.brand-light { filter: brightness(0) invert(1); }
.login-wordmark .wm-sep { background: rgba(255,255,255,.35); }
.header-spacer { flex: 1; }
.nav-link { margin-left: 6px; padding: 8px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-dim); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.nav-link:hover { background: var(--bg-ice); color: var(--navy); }
.btn-share-top {
  background: var(--navy); color: #fff; border-radius: 10px; padding: 11px 18px;
  font-weight: 600; font-size: 14px; min-height: 44px; display: flex; align-items: center; gap: 7px;
  transition: background .2s;
}
.btn-share-top:hover { background: var(--navy-deep); }
.user-menu { position: relative; }
.avatar-btn { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2px solid var(--line); padding: 0; }
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; }
.avatar-fallback { width: 100%; height: 100%; background: var(--gold); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.user-pop {
  position: absolute; right: 0; top: 48px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-lift); padding: 8px; min-width: 220px; z-index: 60;
}
.user-pop .who { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.user-pop .who b { display: block; font-size: 14px; color: var(--navy); }
.user-pop .who span { font-size: 12px; color: var(--ink-faint); }
.user-pop button { width: 100%; text-align: left; padding: 11px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--ink-dim); display: flex; gap: 9px; align-items: center; }
.user-pop button:hover { background: var(--bg-ice); color: var(--navy); }

/* hero */
.hero { background: var(--bg); border-bottom: 1px solid var(--line); }
.hero-inner { max-width: 1220px; margin: 0 auto; padding: 24px 20px 22px;
  display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.hero h1 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; color: var(--navy); letter-spacing: -0.01em; line-height: 1.22; }
.hero h1 .hl { box-shadow: inset 0 -10px 0 var(--gold-soft); }
.hero p { color: var(--ink-dim); font-size: 14px; margin-top: 5px; max-width: 560px; line-height: 1.5; }
.hero-stats { display: flex; gap: 26px; margin-left: auto; }
.stat .num { font-size: 22px; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.stat .lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); }

/* compact hero on phones: one short line + slim inline stats */
@media (max-width: 640px) {
  .hero-inner { padding: 14px 16px 13px; gap: 8px; align-items: flex-start; flex-direction: column; }
  .hero h1 { font-size: 17px; }
  .hero p { display: none; }
  .hero-stats { margin-left: 0; gap: 6px; align-items: center; }
  .stat { display: flex; align-items: baseline; gap: 5px; background: var(--bg-ice);
    border-radius: 8px; padding: 4px 9px; }
  .stat .num { font-size: 14px; }
  .stat .lbl { font-size: 9.5px; letter-spacing: .05em; }
  .form-grid { grid-template-columns: 1fr; }
  .filters-wrap { padding-top: 12px; }
  .chip { padding: 8px 13px; font-size: 12.5px; min-height: 38px; }
}

/* filters */
.filters-wrap { max-width: 1220px; margin: 0 auto; padding: 16px 0 2px; }
.filters { display: flex; gap: 8px; padding: 2px 20px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.filters::-webkit-scrollbar { display: none; }
.chip {
  border: 1px solid var(--line); background: var(--bg); color: var(--navy);
  border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 500;
  transition: border-color .2s, background .2s; white-space: nowrap; min-height: 40px;
}
.chip .cnt { color: var(--ink-faint); font-weight: 500; }
.chip:hover { border-color: var(--navy); }
.chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip.active .cnt { color: rgba(255,255,255,.65); }
/* top-3 campuses: the chips are the leaderboard */
.chip.top { background: var(--bg-cream); border-color: rgba(200,140,50,.45); font-weight: 600; }
.chip.top.active { background: var(--navy); border-color: var(--navy); }

/* layout */
.layout { max-width: 1220px; margin: 0 auto; padding: 16px 20px calc(90px + var(--sab)); }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
@media (max-width: 900px) {
  .layout { padding-left: 16px; padding-right: 16px; padding-top: 12px; }
  .wall { grid-template-columns: 1fr; }
}

.lb-empty { font-size: 13px; color: var(--ink-faint); padding: 8px 0 12px; }

/* =================== CARDS =================== */
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease; display: flex; flex-direction: column; }
@media (hover: hover) {
  .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
}
.card:active { transform: scale(.985); }

.collage { position: relative; height: 200px; display: grid; gap: 2px; background: var(--bg-ice); }
.collage.m1 { grid-template-columns: 1fr; }
.collage.m2 { grid-template-columns: 1fr 1fr; }
.collage.m3 { grid-template-columns: 1.7fr 1fr; grid-template-rows: 1fr 1fr; }
.collage.m3 .ct:first-child { grid-row: span 2; }
.collage.m4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.ct { position: relative; overflow: hidden; background: var(--bg-ice); }
.ct img, .ct video { width: 100%; height: 100%; object-fit: cover; }
.ct .file-chip-tile { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center; background: linear-gradient(135deg, var(--navy), #2d4485); color: #fff; }
.ct .file-chip-tile .icon { width: 26px; height: 26px; opacity: .9; }
.ct .file-chip-tile span { font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.ct .play-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ct .play-badge span { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center; color: var(--navy); }
.ct .play-badge .icon { width: 17px; height: 17px; margin-left: 2px; }
.ct .more-overlay { position: absolute; inset: 0; background: rgba(12,18,36,.55); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700; }
.type-tag { position: absolute; left: 10px; top: 10px; background: rgba(255,255,255,.94); color: var(--navy);
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 7px; padding: 4px 9px; z-index: 2; }
.media-count { position: absolute; right: 10px; bottom: 10px; background: rgba(12,12,12,.6); color: #fff;
  font-size: 11.5px; font-weight: 600; border-radius: 8px; padding: 4px 9px; z-index: 2;
  display: flex; align-items: center; gap: 5px; }
.media-count .icon { width: 12px; height: 12px; }

.card-body { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
/* Titles get pasted full paragraphs into them — clamp, or one post stretches
   its whole grid row and leaves the neighbours half empty. */
.card-body h3 { font-size: 16px; font-weight: 600; color: var(--navy); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { font-size: 12.5px; color: var(--ink-dim); font-weight: 500; }
.card-meta .campus { color: var(--gold); font-weight: 600; }
/* Shown only when the event predates the upload — on a same-day post it
   would just repeat the line above it. */
.card-when { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 11.5px; font-weight: 500; color: var(--ink-dim);
  background: var(--bg-ice); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.card-when .icon { width: 12px; height: 12px; flex: none; color: var(--ink-faint); }
.card-desc { font-size: 13px; color: var(--ink-dim); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto;
  padding-top: 8px; border-top: 1px solid var(--line); }
.uploader { font-size: 12px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.like-btn { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600;
  color: var(--ink-faint); padding: 8px 10px; margin: -6px -8px -6px 0; border-radius: 10px;
  min-height: 44px; transition: background .15s, color .15s; font-variant-numeric: tabular-nums; }
.like-btn:hover { background: var(--gold-soft); }
.like-btn.liked { color: #D64545; }
.like-btn.liked .icon { fill: #D64545; stroke: #D64545; }

/* =================== FLAGGING =================== */
/* Quiet until hover — an admin control shouldn't compete with the post. */
.flag-btn { position: absolute; right: 10px; top: 10px; z-index: 3; width: 34px; height: 34px;
  border-radius: 9px; background: rgba(12,18,36,.5); color: #fff; display: flex;
  align-items: center; justify-content: center; opacity: 0; transition: opacity .15s, background .15s; }
.flag-btn .icon { width: 15px; height: 15px; }
.flag-btn:hover, .flag-btn:focus-visible { background: var(--danger); }
.card:hover .flag-btn, .flag-btn:focus-visible { opacity: 1; }
@media (hover: none) { .flag-btn { opacity: 1; } }

/* A flagged post looks like any other; only this badge says it isn't scoring. */
.flag-badge { position: absolute; right: 10px; top: 10px; z-index: 3; width: 28px; height: 28px;
  border-radius: 8px; background: var(--danger); color: #fff; display: flex;
  align-items: center; justify-content: center; }
.flag-badge .icon { width: 13px; height: 13px; }
.flag-restore { position: absolute; right: 44px; top: 10px; z-index: 3; height: 28px; padding: 0 10px;
  border-radius: 8px; background: rgba(255,255,255,.94); color: var(--navy); font-size: 12px; font-weight: 600;
  box-shadow: 0 1px 3px rgba(12,18,36,.25); transition: background .15s, color .15s; }
.flag-restore:hover { background: var(--navy); color: #fff; }
/* The full note, in the detail sheet where there's room to read it. */
.flag-note { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; padding: 9px 12px;
  border-radius: 10px; background: rgba(200,68,61,.09); font-size: 12.5px; color: #8c3a35; }
.flag-note .icon { width: 13px; height: 13px; flex: none; color: var(--danger); }
.flag-note b { font-weight: 700; color: var(--danger); }
.flag-note .restore-btn { margin-left: auto; flex: none; }
.restore-btn { font-size: 12.5px; font-weight: 600; color: var(--navy); background: var(--bg-ice);
  border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; min-height: 36px; }
.restore-btn:hover { border-color: var(--navy); }
.chip.chip-flag { color: var(--danger); border-color: rgba(200,68,61,.4); }
.chip.chip-flag .cnt { color: rgba(200,68,61,.7); }
.chip.chip-flag.active { background: var(--danger); border-color: var(--danger); color: #fff; }
.chip.chip-flag.active .cnt { color: rgba(255,255,255,.7); }

/* the flag sheet */
.flag-sheet { max-width: 520px; }
.reasons { padding: 16px 24px 0; display: flex; flex-direction: column; gap: 9px; }
.reason { display: flex; gap: 11px; align-items: flex-start; border: 1.5px solid var(--line);
  border-radius: 12px; padding: 13px 15px; cursor: pointer; transition: border-color .15s, background .15s; }
.reason.on { border-color: var(--navy); background: var(--bg-ice); }
.reason input { margin-top: 3px; accent-color: var(--navy); flex-shrink: 0; }
.reason b { font-size: 14px; font-weight: 600; color: var(--ink); display: block; }
.reason small { font-size: 12.5px; color: var(--ink-dim); line-height: 1.45; display: block; margin-top: 2px; }
.flag-prev { padding: 16px 24px 0; }
.flag-prev label { font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-faint); }
.flag-prev div { margin-top: 7px; background: var(--bg-ice); border: 1px dashed var(--line);
  border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.6; color: var(--ink-dim); }

/* =================== POP-OVER NOTICES =================== */
/* Centred, one at a time — the queue in app.js shows the next on close. */
.pop-overlay { align-items: center; z-index: 150; }
@media (max-width: 700px) { .pop-overlay { align-items: center; padding: 16px; } }
.pop-sheet { max-width: 420px; text-align: center; padding: 30px 26px 26px; }
@media (max-width: 700px) { .pop-sheet { border-radius: 18px; margin-bottom: 0; } .pop-sheet::before { display: none; } }
.pop-ico { width: 54px; height: 54px; border-radius: 16px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; background: var(--gold-soft); color: var(--gold); }
.pop-ico .icon { width: 25px; height: 25px; }
.pop-ico.warn { background: rgba(200,68,61,.12); color: var(--danger); }
.pop-sheet h2 { margin-top: 16px; font-size: 19px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.pop-sheet p { margin-top: 10px; font-size: 14px; line-height: 1.65; color: var(--ink-dim); }
.pop-sheet p b { color: var(--ink); font-weight: 600; }
.pop-sheet .pop-fine { margin-top: 8px; font-size: 12.5px; color: var(--ink-faint); }
.pop-sheet .btn { margin-top: 20px; width: 100%; }
.pop-sheet.navy { background: linear-gradient(155deg, var(--navy-deep), var(--navy) 60%, #2d4485); }
.pop-sheet.navy h2 { color: #fff; }
.pop-sheet.navy p { color: rgba(255,255,255,.82); }
.pop-sheet.navy p b { color: #E8B563; }
.pop-sheet.navy .pop-ico { background: rgba(255,255,255,.12); color: #E8B563; }
.pop-sheet.navy .pop-fine { color: rgba(255,255,255,.6); }

/* ---------- counts / doesn't count ----------
   One block, used by the eligibility pop-over and by the standing notice on the
   board, so the two can't drift apart. Left-aligned even inside the centred
   pop-over: a centred list doesn't scan, and this exists to be scanned.
   Tick and cross come from the sprite rather than emoji — emoji render
   differently on every phone and can't take the on-navy palette. */
/* `.pop-sheet { max-width: 420px }` above is dead — `.sheet { max-width: 860px }`
   is later in this file at equal specificity and wins, so every pop-over renders
   at 860px. Left alone rather than fixed globally, which would resize the
   fair-play and flag-alert sheets nobody asked me to touch. This one sheet gets
   a reading width of its own: two columns of do/don't need more than 420px, and
   860px is a poster, not a dialogue. */
#ccRulesOverlay .pop-sheet { max-width: 560px; }

.dd { margin-top: 14px; text-align: left; display: grid; gap: 13px; }
.dd h3 { display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--navy); }
.dd ul { margin: 6px 0 0; padding-left: 23px; }
.dd li { font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); }
.dd li + li { margin-top: 5px; }
.dd li b { color: var(--ink); font-weight: 600; }
.dd-mark { flex: none; width: 17px; height: 17px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center; }
.dd-mark .icon { width: 11px; height: 11px; display: block; }
.dd-mark.yes { background: rgba(31,143,90,.13); color: #1F8F5A; }
.dd-mark.no { background: rgba(200,68,61,.12); color: var(--danger); }
/* Lifted for contrast on the navy sheet — the light-background greens and reds
   above go muddy on it. */
.pop-sheet.navy .dd h3 { color: #fff; }
.pop-sheet.navy .dd li { color: rgba(255,255,255,.82); }
.pop-sheet.navy .dd li b { color: #E8B563; }
.pop-sheet.navy .dd-mark.yes { background: rgba(110,231,160,.18); color: #6EE7A0; }
.pop-sheet.navy .dd-mark.no { background: rgba(248,145,140,.18); color: #F8918C; }

/* ============ CAMPAIGN CLOSED POP-OVER ============
   Same navy sheet as the eligibility notice, but this one has to feel like a
   final whistle rather than a rule: a trophy, a date to wait for, and the three
   categories named so every campus can see which race it was in. Needs the
   same explicit reading width — see the .pop-sheet max-width note above. */
#ccClosedOverlay .pop-sheet { max-width: 520px; }
.cl-sheet { position: relative; overflow: hidden; }
/* Lifts the flow content over the confetti. The ✕ is excluded because it sets
   its own position/stacking, and this rule's `position: relative` would win on
   specificity and drop it out of the corner into the flow. */
.cl-sheet > *:not(.cl-conf):not(.cl-x) { position: relative; z-index: 1; }
/* Clipped to the header band. Let it run the full sheet and the shared wkFall
   keyframe carries pieces 260px down, straight across the body copy, where they
   read as specks on the text rather than as confetti. */
.cl-conf { position: absolute; inset: 0 0 auto; height: 104px; pointer-events: none; z-index: 0; overflow: hidden; }
.cl-conf i { position: absolute; top: -14px; width: 5px; height: 9px; border-radius: 1px; opacity: .7;
  animation: wkFall 3.4s linear infinite; }
.cl-conf i:nth-child(1) { left: 9%;  background: #E8B563; animation-delay: 0s; }
.cl-conf i:nth-child(2) { left: 26%; background: #fff;    animation-delay: .7s; }
.cl-conf i:nth-child(3) { left: 43%; background: #E07A28; animation-delay: 1.5s; }
.cl-conf i:nth-child(4) { left: 61%; background: #E8B563; animation-delay: .35s; }
.cl-conf i:nth-child(5) { left: 78%; background: #fff;    animation-delay: 2.1s; }
.cl-conf i:nth-child(6) { left: 92%; background: #E07A28; animation-delay: 1.1s; }
@media (prefers-reduced-motion: reduce) { .cl-conf { display: none; } }

/* Dismissible. Sits above the confetti band; the light .wk-x treatment is for a
   white card and would glare on the navy. */
.cl-x { position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.8);
  display: flex; align-items: center; justify-content: center; z-index: 2; }
.cl-x:hover { background: rgba(255,255,255,.2); color: #fff; }
.cl-x .icon { width: 15px; height: 15px; }

.cl-kicker { margin-top: 14px; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #E8B563; }
.cl-sheet h2 { margin-top: 4px; }

.cl-when { margin-top: 16px; padding: 11px 14px; border-radius: 12px;
  background: rgba(232,181,99,.14); border: 1px solid rgba(232,181,99,.3); }
.cl-when b { display: block; font-size: 14.5px; font-weight: 700; color: #E8B563; }
.cl-when span { font-size: 12px; color: rgba(255,255,255,.62); }

.cl-cats { margin: 12px 0 0; padding: 0; list-style: none; text-align: left; display: grid; gap: 7px; }
.cl-cats li { display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  background: rgba(255,255,255,.07); border-radius: 10px; }
.cl-ab { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  background: rgba(232,181,99,.2); color: #E8B563; font-size: 12px; font-weight: 700; }
.cl-cats b { font-size: 13.5px; font-weight: 600; color: #fff; }

.cl-tease { font-style: italic; }

.cl-rewards { margin-top: 16px; padding: 13px 14px; border-radius: 12px; text-align: left;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.cl-rewards > b { font-size: 11px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255,255,255,.58); }
.cl-rewards ul { margin: 9px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cl-rewards li { display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 600; color: #fff; }
.cl-ri { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(232,181,99,.16); color: #E8B563; }
.cl-ri .icon { width: 14px; height: 14px; display: block; }
.cl-rfine { display: block; margin-top: 9px; font-size: 11.5px; color: rgba(255,255,255,.5); }

/* What the leaderboard becomes once entries close: the standings come down,
   because they are still being checked and because leaving a live ranking up
   would name the winner before the team does. */
.cc-review { text-align: center; padding: 20px 16px 18px; }
.cc-review-ic { width: 42px; height: 42px; border-radius: 13px; margin: 0 auto 12px;
  display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-dark); }
.cc-review-ic .icon { width: 20px; height: 20px; }
.cc-review > b { display: block; font-size: 14.5px; font-weight: 700; color: var(--navy); }
.cc-review p { margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: var(--ink-dim); }
.cc-review-btn { margin-top: 13px; font-size: 12.5px; font-weight: 600; color: var(--navy);
  background: none; border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; cursor: pointer; }
.cc-review-btn:hover { border-color: var(--navy); background: var(--bg-ice); }

/* The post button after the whistle. Not `disabled` — a disabled button eats
   its own click, and this one has to stay clickable to re-open the notice. */
.cc-shut { background: rgba(34,54,106,.12) !important; color: var(--ink-faint) !important;
  border-color: transparent !important; box-shadow: none !important; cursor: pointer; }
.cc-shut:hover { background: rgba(34,54,106,.18) !important; }

/* skeletons */
.skeleton { border-radius: var(--radius); overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.sk { background: linear-gradient(90deg, #EDF1F7 25%, #F6F8FB 50%, #EDF1F7 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton .sk-img { height: 200px; }
.skeleton .sk-line { height: 14px; border-radius: 6px; margin: 12px 16px; }
.skeleton .sk-line.short { width: 55%; margin-top: 0; }

/* empty state */
.empty-state { grid-column: 1/-1; background: var(--bg); border: 1.5px dashed var(--line);
  border-radius: 18px; padding: 56px 24px; text-align: center; }
.empty-state .icon { width: 40px; height: 40px; color: var(--gold); }
.empty-state h3 { margin-top: 14px; font-size: 17px; font-weight: 700; color: var(--navy); }
.empty-state p { margin-top: 6px; font-size: 14px; color: var(--ink-dim); }
.empty-state button { margin-top: 18px; }

/* FAB (mobile) */
.fab { display: none; position: fixed; right: 18px; bottom: calc(18px + var(--sab)); z-index: 70;
  height: 56px; padding: 0 22px 0 18px; border-radius: 18px; background: var(--navy); color: #fff;
  box-shadow: 0 8px 24px rgba(34,54,106,.4); align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 600; transition: transform .2s; }
.fab:active { transform: scale(.94); }
.fab .icon { width: 21px; height: 21px; }
@media (max-width: 900px) {
  .fab { display: flex; }
  .btn-share-top { display: none; }
}

/* =================== OVERLAYS / SHEETS =================== */
.overlay { position: fixed; inset: 0; background: rgba(12,18,36,.55); z-index: 100;
  display: none; align-items: flex-start; justify-content: center; padding: 4dvh 16px; overflow-y: auto; }
.overlay.open { display: flex; }
.sheet { background: var(--bg); border-radius: 18px; max-width: 860px; width: 100%;
  box-shadow: 0 30px 80px rgba(0,0,0,.3); overflow: hidden; margin-bottom: 4dvh;
  animation: sheetIn .28s cubic-bezier(.32,.72,.33,1); }
@keyframes sheetIn { from { opacity: 0; transform: translateY(26px) scale(.98); } }
@media (max-width: 700px) {
  .overlay { padding: 0; align-items: flex-end; }
  .sheet { border-radius: 20px 20px 0 0; margin-bottom: 0; max-height: 94dvh; overflow-y: auto;
    animation: sheetUp .3s cubic-bezier(.32,.72,.33,1); }
  @keyframes sheetUp { from { transform: translateY(60%); } }
  .sheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px;
    background: var(--line); margin: 10px auto 0; }
}
.sheet-head { padding: 22px 24px 0; display: flex; align-items: flex-start; gap: 12px; }
.sheet-head h2 { font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; line-height: 1.28; flex: 1; }
.close-x { background: rgba(34,54,106,.07); border-radius: 12px; width: 44px; height: 44px;
  color: var(--navy); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sheet-meta { padding: 8px 24px 0; font-size: 13.5px; color: var(--ink-dim); font-weight: 500; line-height: 1.6; }
.sheet-meta .campus { color: var(--gold); font-weight: 600; }
.audience-line { padding: 6px 24px 0; font-size: 12.5px; color: var(--ink-faint); }
.audience-line b { color: var(--navy); font-weight: 600; }
.sheet-desc { padding: 14px 24px 0; font-size: 14.5px; line-height: 1.65; color: var(--ink); max-width: 700px;
  white-space: pre-wrap; overflow-wrap: break-word; }
.sheet-desc.placeholder { color: var(--ink-faint); font-style: italic; }
.media-grid { padding: 18px 24px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.media-tile { height: 108px; border-radius: 10px; overflow: hidden; position: relative;
  cursor: zoom-in; transition: transform .15s; background: var(--bg-ice); padding: 0; width: 100%; }
@media (hover: hover) { .media-tile:hover { transform: scale(1.03); } }
.media-tile img, .media-tile video { width: 100%; height: 100%; object-fit: cover; }
.media-tile .fmt { position: absolute; right: 6px; bottom: 6px; background: rgba(12,12,12,.6); color: #fff;
  font-size: 9.5px; font-weight: 600; border-radius: 5px; padding: 2px 6px; letter-spacing: .05em; }
.media-tile .file-chip-tile { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center; background: linear-gradient(135deg, var(--navy), #2d4485); color: #fff; }
.media-tile.expander { display: flex; align-items: center; justify-content: center;
  background: rgba(34,54,106,.08); color: var(--navy); font-size: 14px; font-weight: 700; cursor: pointer; }
/* heart press — a quick pop, only on the tap that adds the like */
@keyframes heartPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.4); }
  55%  { transform: scale(.88); }
  75%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.like-btn.pop .icon { animation: heartPop .45s cubic-bezier(.3,1.4,.5,1); }
@media (prefers-reduced-motion: reduce) { .like-btn.pop .icon { animation: none; } }

/* notification bell */
.bell-btn { position: relative; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--ink-dim);
  border: 1px solid transparent; transition: background .15s, color .15s; }
.bell-btn:hover { background: var(--bg-ice); color: var(--navy); }
.bell-dot { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: #D64545; color: #fff; font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); }
.notif-pop { min-width: 300px; max-width: 340px; max-height: 60dvh; overflow-y: auto; padding-bottom: 6px; }
.notif-empty { padding: 16px 12px; font-size: 13px; color: var(--ink-faint); }
.notif-row { width: 100%; display: flex; gap: 10px; align-items: flex-start; text-align: left;
  padding: 10px 12px; border-radius: 10px; }
.notif-row:hover { background: var(--bg-ice); }
.notif-row.unread { background: var(--gold-soft); }
.notif-row.unread:hover { background: rgba(200,140,50,.24); }
.notif-row .heart-ico { width: 15px; height: 15px; color: #D64545; margin-top: 2px; flex-shrink: 0; }
.notif-row .flag-ico { width: 15px; height: 15px; color: var(--danger); margin-top: 2px; flex-shrink: 0; }
/* flex-basis 0 with min-width 0 — without the basis a long event name pushes
   the row wider than the popover on a phone and the text runs under the icon. */
.notif-txt { font-size: 13px; color: var(--ink-dim); line-height: 1.45; min-width: 0; flex: 1 1 0;
  overflow-wrap: anywhere; }
.notif-txt b { color: var(--navy); font-weight: 600; }
.notif-ev { color: var(--navy); font-weight: 600; }
.notif-txt small { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 1px; }
@media (max-width: 640px) { .notif-pop { position: fixed; left: 12px; right: 12px; top: 62px; max-width: none; } }

/* who liked this post */
.likers { padding: 16px 24px 0; display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.likers .like-btn { margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); min-height: 38px; flex-shrink: 0; }
.likers .like-btn.liked { border-color: rgba(214,69,69,.35); background: rgba(214,69,69,.06); }
.likers-none { font-size: 13px; color: var(--ink-faint); align-self: center; }
.likers-list { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.likers-label { font-size: 12.5px; color: var(--ink-faint); font-weight: 600; }
.liker { background: rgba(34,54,106,.07); color: var(--navy); font-size: 12.5px; font-weight: 600;
  border-radius: 999px; padding: 5px 11px; }
.liker.more { color: var(--gold-dark); background: var(--gold-soft); cursor: pointer; }

.sheet-actions { padding: 18px 24px 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.btn { border-radius: 12px; padding: 12px 18px; font-weight: 600; font-size: 14px;
  min-height: 46px; display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  transition: background .2s, border-color .2s; }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-dark); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-deep); }
.btn-outline { background: var(--bg); border: 1.5px solid var(--line); color: var(--navy); }
.btn-outline:hover { border-color: var(--navy); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-danger { background: var(--bg); border: 1.5px solid rgba(200,68,61,.35); color: var(--danger); }
.btn-danger:hover { border-color: var(--danger); }
.btn-danger.armed { background: var(--danger); border-color: var(--danger); color: #fff; }

/* caption studio */
.studio { background: var(--bg-cream); border-top: 1px solid var(--line); padding: 20px 24px 24px; }
.studio-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.studio-kicker .icon { width: 14px; height: 14px; }
.studio-tabs { display: flex; gap: 6px; margin-bottom: 13px; }
.stab { border: 1px solid var(--line); background: var(--bg); border-radius: 9px; padding: 9px 16px;
  font-size: 13px; font-weight: 600; color: var(--ink-dim); min-height: 40px; }
.stab.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.caption-box { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 15px 17px;
  font-size: 14px; line-height: 1.7; white-space: pre-wrap; min-height: 110px; overflow-wrap: break-word; }
.caption-box.loading { color: var(--ink-faint); display: flex; align-items: center; gap: 10px; }
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity: .3; transform: scale(.85);} 50% { opacity: 1; transform: scale(1.15);} }
.hashtags { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.tag { background: rgba(34,54,106,.08); color: var(--navy); font-size: 12.5px; font-weight: 600; border-radius: 7px; padding: 5px 10px; }
.studio-foot { margin-top: 13px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* =================== FORM =================== */
.form-grid { padding: 0 24px; margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row { padding: 0 24px; margin-top: 16px; }
.form-grid .form-row { padding: 0; margin-top: 0; }
.form-row label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--navy); margin-bottom: 7px; }
.form-row select, .form-row input[type=text], .form-row textarea, .form-row input[type=date] {
  width: 100%; border: 1.5px solid var(--line); border-radius: 11px; padding: 12px 14px;
  color: var(--ink); background: var(--bg); outline: none; min-height: 48px;
  transition: border-color .2s; appearance: none; -webkit-appearance: none; }
.form-row select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2322366A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.form-row select:focus, .form-row input:focus, .form-row textarea:focus { border-color: var(--gold); }
.form-row textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.field-error { margin-top: 6px; font-size: 12.5px; color: var(--danger); display: none; }
.field-error.show { display: block; }
.date-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.date-chip { border: 1px solid var(--line); background: var(--bg); border-radius: 10px; padding: 11px 18px;
  font-size: 13.5px; font-weight: 600; color: var(--navy); min-height: 48px; }
.date-chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.date-row input[type=date] { flex: 1; min-width: 150px; min-height: 48px; border: 1.5px solid var(--line);
  border-radius: 10px; padding: 9px 12px; color: var(--ink-dim); background: var(--bg); }
.aud-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.aud-divider { width: 100%; height: 0; }
.aud-chip { border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 10px 15px;
  font-size: 12.5px; font-weight: 600; color: var(--navy); min-height: 42px; transition: background .15s, border-color .15s; }
.aud-chip.active { background: var(--gold); color: #fff; border-color: var(--gold); }

.dropzone { margin: 16px 24px 0; border: 2px dashed rgba(200,140,50,.5); background: var(--gold-soft);
  border-radius: 14px; padding: 26px 20px; text-align: center; cursor: pointer; transition: background .15s; }
.dropzone:hover, .dropzone.dragover { background: rgba(200,140,50,.26); }
.dropzone .icon { width: 28px; height: 28px; color: var(--gold-dark); }
.dropzone p { font-size: 14px; font-weight: 600; color: var(--navy); margin-top: 8px; }
.dropzone small { font-size: 12px; color: var(--ink-dim); }
.picked { padding: 10px 24px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.file-pill { background: rgba(34,54,106,.08); color: var(--navy); font-size: 12px; font-weight: 600;
  border-radius: 8px; padding: 8px 6px 8px 11px; display: flex; align-items: center; gap: 4px; max-width: 100%; }
.file-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.file-pill button { color: var(--ink-faint); padding: 4px; border-radius: 6px; display: flex; }
.file-pill button:hover { color: var(--danger); background: rgba(200,68,61,.1); }
.file-pill.existing { background: var(--gold-soft); color: var(--gold-dark); }
.submit-row { padding: 20px 24px calc(24px + var(--sab)); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.upload-progress { font-size: 13px; color: var(--ink-dim); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.spinner { width: 16px; height: 16px; border: 2.5px solid var(--gold-soft); border-top-color: var(--gold);
  border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =================== LIGHTBOX =================== */
.lightbox { position: fixed; inset: 0; background: rgba(8,12,24,.93); z-index: 200;
  display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lb-stage { max-width: min(880px, 92vw); max-height: 74dvh; position: relative;
  display: flex; align-items: center; justify-content: center; }
.lb-stage img, .lb-stage video { max-width: 92vw; max-height: 74dvh; border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5); object-fit: contain; }
.lb-stage .lb-file-card { width: min(420px, 86vw); padding: 48px 24px; border-radius: 16px;
  background: linear-gradient(135deg, var(--navy), #2d4485); color: #fff; text-align: center; }
.lb-file-card .icon { width: 44px; height: 44px; }
.lb-file-card p { margin-top: 12px; font-size: 15px; font-weight: 600; overflow-wrap: break-word; }
.lb-file-card a { margin-top: 16px; display: inline-flex; }
.lb-caption { position: fixed; bottom: calc(18px + var(--sab)); left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; align-items: center; background: rgba(12,12,12,.6); border-radius: 10px;
  padding: 8px 14px; color: #fff; font-size: 13px; font-weight: 500; max-width: 90vw; }
.lb-caption .counter { color: rgba(255,255,255,.65); font-variant-numeric: tabular-nums; }
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.14); color: #fff;
  border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.lb-nav:hover { background: rgba(255,255,255,.28); }
.lb-prev { left: max(12px, calc(50vw - 520px)); }
.lb-next { right: max(12px, calc(50vw - 520px)); }
.lb-close { position: fixed; top: max(16px, env(safe-area-inset-top)); right: 18px; background: rgba(255,255,255,.14);
  color: #fff; border-radius: 14px; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 700px) { .lb-nav { display: none; } }

/* share menu */
.share-menu { max-width: 460px; }
.card-actions { display: flex; align-items: center; gap: 6px; }
.share-cta { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: var(--navy); background: rgba(34,54,106,.07); border-radius: 9px;
  padding: 8px 13px; min-height: 40px; transition: background .15s; }
.share-cta:hover { background: rgba(34,54,106,.13); }
.share-cta .icon { width: 15px; height: 15px; }
.share-note { padding: 10px 24px 0; font-size: 12.5px; color: var(--ink-dim); line-height: 1.55; }
.share-rows { padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 4px; }
.share-rows button { display: flex; align-items: center; gap: 13px; text-align: left;
  padding: 11px 12px; border-radius: 12px; min-height: 56px; transition: background .15s; width: 100%; }
.share-rows button:hover { background: var(--bg-ice); }
.share-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; color: #fff; }
.share-ic .icon { width: 21px; height: 21px; }
.share-ic.wa { background: #25D366; }
.share-ic.ig { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); }
.share-ic.li { background: #0A66C2; }
.share-ic.cp { background: rgba(34,54,106,.09); color: var(--navy); }
.share-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.share-txt b { font-size: 14.5px; font-weight: 600; color: var(--navy); }
.share-txt small { font-size: 12px; color: var(--ink-faint); line-height: 1.4; }
.share-preview { margin: 10px 24px calc(22px + var(--sab)); background: var(--bg-ice);
  border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px;
  font-size: 12.5px; line-height: 1.6; color: var(--ink-dim); white-space: pre-wrap;
  max-height: 130px; overflow-y: auto; }

/* share hand-off */
.handoff-back { display: flex; align-items: center; gap: 6px; margin: 12px 24px 0;
  font-size: 13px; font-weight: 600; color: var(--ink-dim); padding: 6px 0; }
.handoff-back:hover { color: var(--navy); }
.handoff-back .icon { width: 15px; height: 15px; }
.handoff-head { display: flex; gap: 13px; align-items: flex-start; padding: 12px 24px 0; }
.handoff-head b { display: block; font-size: 15px; font-weight: 600; color: var(--navy); }
.handoff-head small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; }
.handoff-steps { list-style: none; padding: 16px 24px calc(24px + var(--sab)); display: flex; flex-direction: column; gap: 14px; }
.handoff-steps li { display: flex; gap: 12px; align-items: flex-start; }
.handoff-steps b { font-size: 14px; font-weight: 600; color: var(--navy); }
.handoff-steps small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.45; }
.handoff-steps .btn { margin-top: 9px; }
.step-n { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700;
  background: rgba(34,54,106,.08); color: var(--navy); }
.handoff-steps li.done .step-n { background: #2f9e6a; color: #fff; }
.handoff-steps li.done b { color: var(--ink-dim); }

/* admin panel */
.admin-section { padding: 18px 24px 0; }
.admin-section:last-child { padding-bottom: calc(24px + var(--sab)); }
.admin-section h3 { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 10px;
  display: flex; align-items: center; gap: 7px; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.admin-section h3 .icon { color: var(--gold); width: 15px; height: 15px; }
.opt-list { display: flex; gap: 8px; flex-wrap: wrap; }
.add-row { margin-top: 10px; display: flex; gap: 8px; }
.add-row input { flex: 1; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 13px;
  min-height: 46px; outline: none; background: var(--bg); color: var(--ink); }
.add-row input:focus { border-color: var(--gold); }
.add-row .btn { padding: 10px 16px; }
.admin-hint { margin-top: 10px; font-size: 12px; color: var(--ink-faint); line-height: 1.5; }
.file-pill.editing { background: var(--bg); border: 1.5px solid var(--gold); padding: 4px 6px 4px 4px; }
.file-pill.editing input { border: none; outline: none; background: transparent; font-family: var(--font);
  font-size: 13px; font-weight: 600; color: var(--navy); width: 150px; padding: 4px 6px; }
.file-pill.confirming { background: rgba(200,68,61,.1); color: var(--danger); }
.file-pill.confirming span { color: var(--danger); }
.file-pill button:hover { color: var(--navy); background: rgba(34,54,106,.09); }
.file-pill.confirming button:hover { color: var(--danger); background: rgba(200,68,61,.16); }

/* toast */
.toast { position: fixed; bottom: calc(24px + var(--sab)); left: 50%; transform: translateX(-50%) translateY(90px);
  background: var(--navy); color: #fff; font-size: 14px; font-weight: 600;
  border-radius: 12px; padding: 13px 20px; box-shadow: var(--shadow-lift); z-index: 300;
  transition: transform .3s ease; text-align: center; line-height: 1.5;
  max-width: min(92vw, 480px); width: max-content; }
.toast.show { transform: translateX(-50%) translateY(0); }
.toast .gold { color: var(--gold); }
.toast.error { background: var(--danger); }

/* =================== ONBOARDING DRIVE =================== */
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: blink 1.4s infinite; }
@keyframes blink { 0%,100% { opacity: .4; } 50% { opacity: 1; } }

.drive-banner-wrap { max-width: 1220px; margin: 14px auto 0; padding: 0 20px; }
.drive-banner { width: 100%; text-align: left; background: var(--bg-cream);
  border: 1px solid rgba(200,140,50,.4); border-radius: 12px; padding: 12px 16px;
  font-size: 13.5px; font-weight: 500; color: var(--navy); display: flex; align-items: center; gap: 10px; }
.drive-banner b { font-weight: 700; }
.drive-banner .go { margin-left: auto; color: var(--gold-dark); font-weight: 700; white-space: nowrap; }

.drive-hero { background: linear-gradient(150deg, var(--navy-deep), var(--navy) 60%, #2d4485); color: #fff; }
.drive-hero-inner { max-width: 1220px; margin: 0 auto; padding: 24px 20px 26px; }
.drive-back { display: none; color: rgba(255,255,255,.85); font-size: 13px; font-weight: 600;
  padding: 8px 0 10px; min-height: 40px; }
.drive-kicker { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.drive-hero h1 { font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; letter-spacing: -0.01em; margin-top: 6px; }
.drive-hero .sub { margin-top: 8px; font-size: 14px; color: rgba(255,255,255,.75); max-width: 620px; line-height: 1.6; }

.days { max-width: 1220px; margin: 0 auto; padding: 20px 20px calc(60px + var(--sab)); display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.day-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 18px 14px; cursor: pointer;
  transition: transform .18s, box-shadow .18s; display: flex; flex-direction: column; gap: 9px; }
@media (hover: hover) { .day-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } }
.day-card:active { transform: scale(.985); }
.day-num { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.day-card h3 { font-size: 17.5px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.day-sessions { font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; }
.day-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--line);
  padding-top: 11px; margin-top: auto; min-height: 40px; }
.cam-chip { background: rgba(46,125,79,.12); color: #2E7D4F; font-size: 11.5px; font-weight: 600;
  border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.no-uploads { font-size: 12px; color: var(--ink-faint); font-weight: 500; }

/* drive day sheet */
.sheet-tabs { display: flex; gap: 6px; padding: 16px 24px 0; border-bottom: 1px solid var(--line); }
.sheet-tab { padding: 11px 14px 13px; font-size: 14px; font-weight: 600; color: var(--ink-dim);
  border-bottom: 3px solid transparent; margin-bottom: -1px; display: flex; align-items: center; gap: 7px; min-height: 48px; }
.sheet-tab.active { color: var(--navy); border-bottom-color: var(--gold); }
.tab-pane { padding: 20px 24px 26px; }
.brief-box { background: var(--bg-ice); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.brief-box .k { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.brief-box ul { list-style: none; }
.brief-box li { font-size: 14px; color: var(--ink); line-height: 1.55; padding: 5px 0 5px 22px; position: relative; }
.brief-box li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--gold); }
.ugc-line { margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--ink);
  background: var(--bg-cream); border: 1px solid rgba(200,140,50,.3); border-radius: 10px; padding: 11px 14px; }
.ugc-line b { color: var(--gold-dark); }
.up-title { margin-top: 20px; font-size: 15px; font-weight: 700; color: var(--navy); }
.up-sub { font-size: 13px; color: var(--ink-dim); margin-top: 3px; line-height: 1.5; }
.up-row { margin-top: 13px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.up-row label { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--navy); }
.up-row select { border: 1.5px solid var(--line); border-radius: 11px; padding: 11px 38px 11px 14px; min-height: 48px;
  font-weight: 600; color: var(--ink); background: var(--bg); outline: none; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2322366A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.tab-pane .dropzone { margin: 12px 0 0; }
.who-in { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.who-in h4 { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.who-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.who-row:last-child { border-bottom: none; }
.who-name { font-size: 14px; font-weight: 600; color: var(--navy); }
.who-meta { font-size: 12px; color: var(--ink-faint); }
.who-spacer { flex: 1; }
.who-edit button { font-size: 12px; font-weight: 600; color: var(--ink-dim); padding: 8px 10px;
  border-radius: 8px; min-height: 40px; }
.who-edit button:hover { background: rgba(200,68,61,.08); color: var(--danger); }
.who-empty { font-size: 13px; color: var(--ink-faint); padding: 10px 0 2px; }
.kit-plan { background: var(--bg-ice); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.kit-plan .k { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.kit-plan p { font-size: 14px; color: var(--navy); font-weight: 600; margin-top: 4px; line-height: 1.45; }
.kit-plan small { display: block; font-size: 12.5px; color: var(--ink-dim); margin-top: 4px; line-height: 1.5; }
.kit-note { font-size: 12.5px; color: var(--ink-dim); }
.kit-note b { color: var(--gold-dark); }

@media (max-width: 640px) {
  .nav-link { display: none; }   /* the leaderboard and caps tiles carry the link on phones */
  /* logo + name must share a 360px header with the bell and avatar */
  .header-inner { gap: 10px; padding: 10px 12px; }
  .wordmark { font-size: 15px; }
  .wordmark .brand { height: 15px; }
  .wordmark .wm-sep { height: 14px; margin: 0 7px; }
  .drive-back { display: inline-flex; align-items: center; }
  .drive-banner-wrap { padding: 0 16px; margin-top: 12px; }
  .days { padding-left: 16px; padding-right: 16px; }
}

/* wordmark doubles as the home button */
button.wordmark { text-align: left; padding: 0; }

/* =================== SHARE FORM CLEANUP =================== */
.req { color: var(--danger); font-weight: 700; }
.vh-date { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vh-date.shown { position: static; width: auto; height: auto; opacity: 1; pointer-events: auto;
  flex: 1; min-width: 150px; min-height: 48px; border: 1.5px solid var(--line);
  border-radius: 10px; padding: 9px 12px; color: var(--ink); background: var(--bg); }
.date-chip .icon { width: 15px; height: 15px; }
.aud-cap { width: 100%; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin: 4px 0 2px; }

/* =================== CAMPUS CREATOR OF THE MONTH =================== */
.cc-wrap { max-width: 1400px; margin: 0 auto; padding: 0 20px 72px; }
.cc-grid { display: grid; grid-template-columns: 340px 1fr; gap: 22px; align-items: start; }
/* A grid item is min-width:auto by default, so the sideways-scrolling filter
   row would widen its own track instead of scrolling — and take the page with it. */
.cc-grid > * { min-width: 0; }

.cc-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px; margin-top: 22px; }
.cc-card h2 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.cc-note { font-size: 12.5px; color: var(--ink-dim); margin-bottom: 14px; }

.cc-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; }
.cc-row + .cc-row { border-top: 1px solid var(--line); }
.cc-rank { font-size: 15px; font-weight: 700; color: var(--ink-faint); text-align: center; }
.cc-camp { font-size: 14px; font-weight: 600; color: var(--ink); }
.cc-bar { height: 6px; border-radius: 4px; background: var(--gold-soft); margin-top: 5px; }
.cc-bar i { display: block; height: 100%; border-radius: 4px; background: var(--gold); }
.cc-n { font-size: 15px; font-weight: 700; color: var(--navy); }
.cc-row.top1 .cc-n { color: var(--gold-dark); }
/* your own campus, findable at a glance when 15 of them are listed */
.cc-row.mine { background: var(--bg-cream); border-radius: 8px;
  margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
.cc-row.mine + .cc-row { border-top: none; }
.cc-you { display: inline-block; background: var(--navy); color: #fff; border-radius: 5px;
  padding: 1px 6px; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; vertical-align: 1px; margin-left: 4px; }
.cc-gap { text-align: center; color: var(--ink-faint); font-size: 13px;
  letter-spacing: .2em; padding: 4px 0; }
.cc-toggle { display: block; width: 100%; margin-top: 12px; padding: 9px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg);
  font-size: 12.5px; font-weight: 600; color: var(--navy); transition: border-color .2s; }
.cc-toggle:hover { border-color: var(--navy); }

/* Light, like the rest of the page — it earns attention from the gold rule and
   the leader's cream row, not from a slab of colour. */
.cc-board-card { border-top: 3px solid var(--gold); box-shadow: var(--shadow-lift); }
.cc-board-card .cc-row.top1 { background: var(--bg-cream); border-radius: 8px;
  margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
.cc-board-card .cc-row.top1 + .cc-row { border-top: none; }
.cc-board-card .cc-row.top1 .cc-camp { font-weight: 700; }

.cc-reward { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.cc-reward + .cc-reward { border-top: 1px solid var(--line); }
.cc-reward .ic { font-size: 22px; line-height: 1.2; }
.cc-reward b { display: block; font-size: 13.5px; color: var(--ink); font-weight: 600; }
.cc-reward span { font-size: 12px; color: var(--ink-dim); }

/* One horizontal strip: paste, pick, submit. Submitting is the job the page
   exists for, so it sits above the fold rather than down a sidebar. */
.cc-formbar { display: grid; grid-template-columns: auto 1fr 210px auto;
  align-items: center; gap: 10px; margin-top: 18px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px; }
.cc-formbar-lead { display: flex; align-items: center; gap: 8px; font-size: 13.5px;
  font-weight: 700; color: var(--navy); white-space: nowrap; padding-right: 4px; }
.cc-formbar input, .cc-formbar select { width: 100%; border: 1.5px solid var(--line);
  border-radius: 10px; padding: 11px 12px; background: var(--bg); color: var(--ink); font-size: 14px; }
.cc-formbar input:focus, .cc-formbar select:focus { outline: none; border-color: var(--navy); }
.cc-formbar .btn { white-space: nowrap; }
.cc-err { display: none; font-size: 12.5px; color: var(--danger); margin-top: 8px; }
.cc-err.show { display: block; }
@media (max-width: 1100px) { .cc-formbar { grid-template-columns: 1fr; } }

/* Medium cards: a busy month runs to hundreds of posts, so the feed is a
   browsable grid rather than a column of full-size embeds. */
/* 310px floor is deliberate — Instagram's embed clips its own chrome below
   roughly 326px, so cards get narrower than this only on a phone, where the
   grid drops to one column anyway. */
/* Thumbnails, so the grid can be dense — the whole point of a showcase is
   seeing a dozen reels at once rather than two. 9:16 matches what Instagram
   hands back, so nothing is letterboxed. */
.cc-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 22px; }
/* The handle picker sits beside the chips rather than inside them: the chip row
   scrolls sideways with overflow hidden, which would clip the dropdown. */
.cc-filterrow { display: flex; align-items: center; gap: 10px; }
.cc-filterrow .cc-filters { flex: 1; min-width: 0; }
.cc-hwrap { position: relative; flex: none; margin-top: 22px; }
/* Styled apart from the campus chips on purpose: only admins ever see it, and
   as one more white pill on the same row nobody noticed it had appeared. */
.cc-hbtn { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
  padding-left: 12px; padding-right: 13px; font-weight: 600;
  background: rgba(34,54,106,.06); border-color: rgba(34,54,106,.32); }
.cc-hbtn .icon { width: 14px; height: 14px; color: var(--gold); }
.cc-hbtn em { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; background: var(--navy);
  border-radius: 4px; padding: 2px 5px; }
.cc-hcaret { font-weight: 400; font-size: 11px; color: var(--ink-faint); margin-left: -1px; }
.cc-hbtn.active { background: var(--navy); border-color: var(--navy); }
.cc-hbtn.active .icon { color: #F0CE84; }
.cc-hbtn.active em { background: rgba(255,255,255,.22); }
.cc-hbtn.active .cc-hcaret { color: rgba(255,255,255,.7); }
/* Says it once. Cleared the first time the picker is opened. */
.cc-hnew { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--danger); background: rgba(200,68,61,.12); border-radius: 4px; padding: 2px 5px; }
@media (max-width: 620px) { .cc-hbtn em { display: none; } }
.cc-hpanel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 268px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lift); padding: 10px; }
.cc-hpanel input[type="search"] { width: 100%; font: inherit; font-size: 13px;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-ice); }
.cc-hpanel input[type="search"]:focus { outline: none; border-color: var(--navy); background: var(--bg); }
.cc-hlist { max-height: 262px; overflow-y: auto; margin: 8px -4px 0; padding: 0 4px; }
.cc-hrow { display: flex; align-items: center; gap: 8px; padding: 6px 7px; border-radius: 8px;
  cursor: pointer; font-size: 12.5px; }
.cc-hrow:hover { background: var(--bg-ice); }
.cc-hrow.on { background: var(--bg-cream); }
.cc-hrow input { accent-color: var(--navy); flex: none; }
.cc-hname { flex: 1; min-width: 0; color: var(--ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.cc-hname i { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--danger); background: rgba(200,68,61,.1);
  border-radius: 4px; padding: 1px 5px; margin-left: 6px; }
.cc-hn { flex: none; font-size: 11.5px; font-weight: 600; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; }
.cc-hempty { font-size: 12.5px; color: var(--ink-faint); padding: 12px 6px; }
.cc-hfoot { display: flex; align-items: center; gap: 8px; margin-top: 9px;
  padding-top: 9px; border-top: 1px solid var(--line); }
.cc-hclear { font-size: 12.5px; font-weight: 600; color: var(--ink-dim);
  background: none; border: 0; cursor: pointer; padding: 6px 4px; }
.cc-hclear:hover { color: var(--danger); }
.cc-hdone { margin-left: auto; padding: 6px 14px; font-size: 12.5px; }
@media (max-width: 560px) { .cc-hpanel { width: min(268px, calc(100vw - 42px)); } }

/* Fewer, wider tiles. At six across a tile was ~140px and most submitter names
   were ellipsed — a name nobody can read is worse than one reel fewer per row.
   Four on a laptop, five once there's genuinely room; below the rail's
   breakpoint auto-fill takes over and a phone still gets two. */
@media (min-width: 901px)  { .cc-feed { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1250px) { .cc-feed { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* ---------- multi-select (admins) ----------
   The same admin pill as the handle filter, because it is the same kind of
   thing: a control only admins see, deliberately not another white campus
   chip on that row. */
.cc-selbtn { flex: none; margin-top: 22px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  padding-left: 12px; padding-right: 13px; font-weight: 600;
  background: rgba(34,54,106,.06); border-color: rgba(34,54,106,.32); }
.cc-selbtn .icon { width: 14px; height: 14px; color: var(--gold); }
.cc-selbtn em { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; background: var(--navy);
  border-radius: 4px; padding: 2px 5px; }
.cc-selbtn.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.cc-selbtn.active .icon { color: #F0CE84; }
.cc-selbtn.active em { background: rgba(255,255,255,.22); }
@media (max-width: 620px) { .cc-selbtn em { display: none; } }
/* Sticky: the reels being picked run well past one screen, and the count is
   the only thing saying how big the action about to be taken is. */
.cc-selbar { position: sticky; top: 8px; z-index: 25;
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding: 9px 10px 9px 14px; border-radius: 12px;
  background: var(--navy); box-shadow: var(--shadow-lift); }
.cc-selbar > span { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-selbar .btn { flex: none; min-height: 36px; padding: 8px 13px; font-size: 13px; }
.cc-selbar .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.cc-selbar .btn-outline:hover { border-color: #fff; }
.cc-selbar .btn:disabled { opacity: .5; cursor: not-allowed; }
/* On the cover, which is the entire tap target in this mode. Above .cc-shot-top
   so the campus bar's gradient can't sit over it. */
.cc-pick { position: absolute; top: 9px; right: 9px; z-index: 3;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,12,12,.42); border: 1.5px solid rgba(255,255,255,.85); }
.cc-pick .icon { width: 13px; height: 13px; color: #fff; opacity: 0; }
.cc-tile.cc-picked .cc-pick { background: var(--navy); border-color: #fff; }
.cc-tile.cc-picked .cc-pick .icon { opacity: 1; }
.cc-tile.cc-picked { border-color: var(--navy); box-shadow: 0 0 0 2px var(--navy), var(--shadow); }

.cc-tile { position: relative; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
  display: flex; flex-direction: column; }
.cc-shot { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16;
  background: var(--bg-ice); padding: 0; border: 0; cursor: pointer; overflow: hidden; }
.cc-shot img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease; }
.cc-tile:hover .cc-shot img { transform: scale(1.04); }
.cc-noshot { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center; text-align: center; padding: 14px; }
.cc-noshot .icon { width: 26px; height: 26px; color: var(--ink-faint); }
.cc-noshot .spinner { width: 22px; height: 22px; }
.cc-noshot b { font-size: 12.5px; font-weight: 700; color: var(--navy); }
.cc-noshot > span { font-size: 10.5px; line-height: 1.4; color: var(--ink-faint); }
/* Both overlays sit on scrims rather than on the photo itself — a white campus
   name over a bright frame is unreadable half the time. */
.cc-shot-top { position: absolute; top: 0; left: 0; right: 0; padding: 8px;
  background: linear-gradient(rgba(10,20,45,.55), transparent);
  display: flex; align-items: center; gap: 5px; }
.cc-shot-top .campus { background: rgba(10,20,45,.72); color: #fff; border-radius: 6px;
  padding: 3px 7px; font-size: 10.5px; font-weight: 700; display: inline-block;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-shot-stats { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 9px 8px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  color: #fff; font-size: 12px; font-weight: 600;
  background: linear-gradient(transparent, rgba(10,20,45,.78)); }
/* The student who made it. Truncates rather than wrapping — a second line here
   would push the numbers off the scrim on the longest handles. */
.cc-by { max-width: 100%; font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-nums { display: flex; gap: 11px; }
.cc-nums span { display: inline-flex; align-items: center; gap: 4px; }
.cc-shot-stats .icon { width: 11px; height: 11px; fill: currentColor; stroke: none; }
.cc-tile.flagged .cc-shot img { filter: saturate(.5); }

.cc-fcard { position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
/* Instagram won't report its own content height across origins, so these are
   fixed. Measured against a real embed at our ~323px card width: below ~560px
   the like/comment row clips, and below ~440px the media itself is cut off.
   These two numbers are the only knob if the card width ever changes. */
.cc-fcard iframe { width: 100%; height: 570px; border: 0; display: block; background: #fafafa; }
.cc-fcard.post iframe { height: 545px; }
/* Stands in for an embed Instagram refuses to serve. Same height as the iframe
   it replaces, so one private post doesn't knock its whole grid row out of line. */
.cc-gone { height: 570px; background: var(--bg-ice); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; padding: 24px; text-align: center; text-decoration: none; }
.cc-fcard.post .cc-gone { height: 545px; }
.cc-gone .icon { width: 34px; height: 34px; color: var(--ink-faint); }
.cc-gone b { font-size: 14.5px; font-weight: 600; color: var(--navy); }
.cc-gone span { font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; max-width: 240px; }
.cc-gone-cta { margin-top: 6px; background: var(--navy); color: #fff !important; font-weight: 600;
  font-size: 13px; border-radius: 10px; padding: 9px 16px; transition: background .2s; }
.cc-gone:hover .cc-gone-cta { background: var(--navy-deep); }
/* One card per row below this, so there's no neighbour left to line up with —
   matching the iframe's height would just leave a tall empty box. */
@media (max-width: 700px) {
  .cc-gone, .cc-fcard.post .cc-gone { height: auto; padding: 44px 24px; }
}

.cc-meta { padding: 8px 9px 9px; display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--ink-dim); }
/* One line, always — a long name wrapping made every tile in that grid row
   taller than its neighbours. */
.cc-tile .cc-meta > span:first-child { flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-meta .campus { background: var(--navy); color: #fff; border-radius: 6px;
  padding: 3px 7px; font-size: 11px; font-weight: 700; }
.cc-meta .student { font-weight: 600; color: var(--ink); }
.cc-icon-btn { flex: none; color: var(--ink-faint); padding: 3px; border-radius: 6px;
  background: none; border: 0; cursor: pointer; }
.cc-icon-btn .icon { width: 14px; height: 14px; display: block; }
.cc-del { margin-left: auto; }
.cc-del:hover { color: var(--danger); background: rgba(200,68,61,.08); }
/* Labelled, not a bare icon — this is the wall's "Restore" affordance, and an
   unlabelled ↻ next to an unlabelled ✕ is a coin toss an admin shouldn't have
   to call. `flex: none` comes from .cc-icon-btn, so the "via <name>" span
   still does all the shrinking and the row stays one line. */
.cc-restore { margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px; font-size: 12px; font-weight: 600; color: var(--navy); }
.cc-restore + .cc-del { margin-left: 0; }
.cc-restore:hover { color: var(--navy); background: var(--bg-ice); }

/* ---------- flagging on the creator board ----------
   The wall reveals its flag control on hover; here the card is an Instagram
   iframe that eats the pointer, so the button stays put and only softens. */
.cc-flag-btn { opacity: .82; }
.cc-fcard:hover .cc-flag-btn { opacity: 1; }
/* A strip under the embed, not a cover over it — the reel still plays, and
   this is the only thing that says it doesn't score. Deliberately quiet:
   the campus did the work of collecting the link, and red would read as a
   telling-off in front of every other campus. */
/* On the cover, not under it: as a strip below the image this made one card
   taller than the rest, and every card in that grid row stretched to match. */
.cc-inel { position: absolute; right: 8px; top: 8px; z-index: 3;
  display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 16px);
  background: var(--danger); color: #fff; border-radius: 6px;
  padding: 3px 7px; font-size: 10.5px; font-weight: 700; }
.cc-inel .icon { width: 10px; height: 10px; flex: none; }

/* The full sentence, in the lightbox where there's room to read it. */
.cc-flagnote { display: flex; align-items: center; gap: 7px; padding: 9px 12px;
  background: rgba(200,68,61,.09); border-top: 1px solid rgba(200,68,61,.22);
  font-size: 12px; color: #8c3a35; }
.cc-flagnote .icon { width: 13px; height: 13px; flex-shrink: 0; color: var(--danger); }
.cc-flagnote b { font-weight: 700; color: var(--danger); }
/* The admin judges the reel here, watching it — so the way to undo the flag
   belongs here too, not only on the tile behind the overlay. */
.cc-flagnote-btn { flex: none; margin-left: auto; font-size: 12px; font-weight: 600;
  color: var(--navy); background: #fff; border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.cc-flagnote-btn:hover { border-color: var(--navy); }
.cc-notcount { font-size: 11px; font-weight: 600; color: var(--ink-dim);
  background: var(--bg-ice); border-radius: 5px; padding: 1px 6px; margin-left: 5px; }
/* Fifteen campuses won't fit a phone, so the row scrolls sideways like the
   wall's rather than wrapping into four lines above the reels. */
.cc-filters { display: flex; gap: 8px; margin-top: 22px; padding-bottom: 2px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cc-filters::-webkit-scrollbar { display: none; }
.cc-filters .chip { flex-shrink: 0; }
/* Ice and gold, not the flag note's red — this is the rule stated up front,
   not a verdict on anything already posted. */
/* White on the page's ice, so it reads as a card rather than blending into the
   background the way an ice-on-ice panel did. */
.cc-rules { position: relative; margin-top: 14px; padding: 12px 42px 13px 15px;
  background: var(--bg); box-shadow: var(--shadow);
  border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 10px; }
.cc-rules > b { display: block; font-size: 12.5px; font-weight: 700; color: var(--navy); }
/* Top-right, inside the padding reserved for it above, so a long heading can
   never run under it. */
.cc-rules-x { position: absolute; top: 8px; right: 8px; padding: 6px;
  min-width: 30px; min-height: 30px; display: inline-flex; align-items: center;
  justify-content: center; border: 0; border-radius: 8px; background: none;
  color: var(--ink-faint); cursor: pointer; }
.cc-rules-x .icon { width: 14px; height: 14px; display: block; }
.cc-rules-x:hover { color: var(--navy); background: var(--bg-ice); }
/* Side by side where there's room, stacked on a phone. */
@media (min-width: 620px) { .cc-rules .dd { grid-template-columns: 1fr 1fr; gap: 22px; } }
.cc-filter-note { font-size: 12.5px; color: var(--ink-dim); margin-top: 10px; }
.cc-filters + .cc-feed, .cc-filter-note + .cc-feed { margin-top: 14px; }
.cc-more { display: block; margin: 26px auto 0; }

/* ---- the top student reels, ranked inside the feed ----
   They used to sit in a panel of their own above the grid. On desktop that
   left a wide half-empty band, and any campus with fewer than three of them
   lost the panel entirely — so DRK simply had nothing. Ranking them in place
   fixes both: a campus with one ranked reel shows one. */
.cc-ranknote { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding: 9px 12px; background: var(--bg-cream);
  border: 1px solid rgba(200,140,50,.35); border-radius: 10px; }
.cc-ranknote .icon { width: 13px; height: 13px; color: var(--gold-dark); align-self: center; }
.cc-ranknote b { font-size: 13px; font-weight: 700; color: var(--navy); }
.cc-ranknote span { font-size: 11.5px; color: var(--ink-dim); }
.cc-ranknote + .cc-feed { margin-top: 12px; }

/* Ranked cards read as an award: a committed gold frame, and a ribbon across
   the corner. Same shape and size as every other tile, so the row still flows
   into the feed and survives an odd number of them on a two-column phone —
   which a band wrapped around the group did not.
   NB the earlier tint lived on `.cc-rank`, a class the leaderboard's own medal
   column already used; the badge is gone and so is that collision. */
.cc-tile.ranked { border: 2px solid var(--gold); box-shadow: 0 2px 12px rgba(200,140,50,.28); }
.cc-tile.ranked .cc-shot-top { padding-left: 42px; }

/* Metallic rather than flat: a light band across the middle of the gradient is
   what reads as sheen. Purely CSS — no image to load or go stale. */
.cc-ribbon { position: absolute; top: 10px; left: -26px; z-index: 4;
  transform: rotate(-45deg); padding: 3px 27px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; color: #4a3208;
  background: linear-gradient(135deg,
    #B8802A 0%, #E3B45C 22%, #FFF0C4 46%, #F0CE84 54%, #C88C32 74%, #A8732A 100%);
  box-shadow: 0 1px 5px rgba(20,35,75,.34), inset 0 1px 0 rgba(255,255,255,.55);
  text-shadow: 0 1px 0 rgba(255,255,255,.4); }

.reel-by { font-weight: 700; color: var(--navy); }

/* the board's own refresh, admins only */
.cc-refresh { margin-left: auto; color: var(--ink-faint); padding: 3px; border-radius: 7px;
  background: none; border: 0; cursor: pointer; }
.cc-refresh .icon { width: 15px; height: 15px; display: block; }
.cc-refresh:hover { color: var(--navy); background: var(--bg-ice); }
.cc-refresh:disabled { cursor: default; color: var(--ink-faint); }
.cc-refresh.spinning .icon { animation: cc-spin 1s linear infinite; }
@keyframes cc-spin { to { transform: rotate(360deg); } }
.cc-board-card h2 { display: flex; align-items: center; gap: 7px; }

/* One reel, playing. The only Instagram iframe on the page. */
.reel-overlay { align-items: center; justify-content: center; }
.reel-box { position: relative; width: min(420px, 94vw); max-height: 94vh; overflow: auto;
  background: var(--bg); border-radius: 16px; box-shadow: var(--shadow-lift); }
/* Its own bar: over the embed it landed on Instagram's "View profile" button. */
.reel-head { display: flex; justify-content: flex-end; padding: 6px 8px 2px; }
#reelBody iframe { width: 100%; height: 640px; border: 0; display: block; background: #fafafa; }
#reelBody .cc-gone { height: 460px; }
.reel-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; border-top: 1px solid var(--line); font-size: 12.5px; }
.reel-foot .campus { background: var(--navy); color: #fff; border-radius: 6px;
  padding: 3px 8px; font-size: 11px; font-weight: 700; }
.reel-counts { color: var(--ink-dim); }
.reel-counts b { color: var(--navy); font-weight: 700; }
.reel-foot a { margin-left: auto; font-weight: 600; color: var(--navy); text-decoration: none; }
.reel-foot a:hover { text-decoration: underline; }
@media (max-width: 520px) { #reelBody iframe { height: 560px; } }

@media (max-width: 900px) { .cc-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .cc-wrap { padding: 0 16px 72px; } }

/* count badge on the footer's Creator link — the campaign is closed, so it lives
   with Onboarding in the footer rather than in the header */
.pill-n { display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--gold); color: #fff; font-size: 11px; font-weight: 700; }

/* wall "show more" */
.wall-more { display: block; margin: 24px auto 0; }

/* =================== FOOTER =================== */
.app-foot { border-top: 1px solid var(--line); margin-top: 40px; background: var(--bg); }
.app-foot-inner { max-width: 1220px; margin: 0 auto; padding: 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.foot-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px;
  font-weight: 600; color: var(--navy); padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); transition: border-color .2s; }
.foot-link:hover { border-color: var(--navy); }
.foot-note { margin-left: auto; font-size: 12px; color: var(--ink-faint); }
@media (max-width: 720px) { .foot-note { margin-left: 0; } }

/* total submitted, sitting above the standings */
.cc-total { display: flex; gap: 10px; flex-wrap: nowrap; margin: 0 0 14px;
  padding: 11px 13px; border-radius: 10px; background: var(--bg-ice); }
.cc-total > span { font-size: 11.5px; color: var(--ink-dim); min-width: 0; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-total b { display: block; font-size: 18px; font-weight: 700; color: var(--navy); line-height: 1.15; }

/* =============== "WHERE'S THE LINK?" HELP =============== */
.cc-help { font-size: 11.5px; font-weight: 600; color: var(--gold-dark);
  border: 1px solid rgba(200,140,50,.5); border-radius: 999px; padding: 3px 10px;
  background: var(--bg); white-space: nowrap; transition: background .2s, border-color .2s; }
.cc-help:hover { background: var(--gold-soft); border-color: var(--gold); }

.lh-sheet { max-width: 640px; }
.lh-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.lh-col { padding: 20px 22px; }
.lh-col + .lh-col { border-left: 1px solid var(--line); background: var(--bg-ice); }
.lh-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.lh-tag { background: var(--navy); color: #fff; border-radius: 999px; padding: 4px 11px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.lh-tag.alt { background: var(--ink-dim); }
.lh-note { font-size: 11px; font-weight: 600; color: var(--gold-dark); }
.lh-steps { list-style: none; counter-reset: lh; display: flex; flex-direction: column; gap: 11px; }
.lh-steps li { counter-increment: lh; position: relative; padding-left: 30px;
  font-size: 13px; line-height: 1.5; color: var(--ink-dim); }
.lh-steps li::before { content: counter(lh); position: absolute; left: 0; top: 0;
  width: 21px; height: 21px; border-radius: 50%; background: var(--gold-soft);
  color: var(--gold-dark); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.lh-steps b { color: var(--ink); font-weight: 600; }

.lh-foot { border-top: 1px solid var(--line); padding: 18px 22px 20px; }
.lh-ok { background: var(--bg-cream); border: 1px solid rgba(200,140,50,.35);
  border-radius: 10px; padding: 11px 14px; }
.lh-ok b { display: block; font-size: 12px; color: var(--navy); margin-bottom: 4px; }
.lh-ok code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; color: var(--gold-dark); word-break: break-all; }
.lh-gotchas { list-style: none; margin: 14px 0 16px; display: flex; flex-direction: column; gap: 8px; }
.lh-gotchas li { position: relative; padding-left: 16px; font-size: 12.5px;
  line-height: 1.5; color: var(--ink-dim); }
.lh-gotchas li::before { content: "•"; position: absolute; left: 3px; color: var(--gold); }
.lh-gotchas b { color: var(--ink); font-weight: 600; }
.lh-foot .btn { width: 100%; }

@media (max-width: 700px) {
  .lh-body { grid-template-columns: 1fr; }
  .lh-col + .lh-col { border-left: none; border-top: 1px solid var(--line); }
}

/* clarifier at the top of the "where's the link?" modal */
.lh-lead { background: var(--bg-cream); border-bottom: 1px solid var(--line);
  padding: 13px 22px; font-size: 12.5px; line-height: 1.5; color: var(--ink-dim); }
.lh-lead b { color: var(--navy); font-weight: 700; }

/* =============== CAMPAIGN: THIN STRIP + RAIL (concept F) =============== */
.cc-strip { background: linear-gradient(150deg, var(--navy-deep), var(--navy) 65%, #2d4485); color: #fff; }
.cc-strip-in { max-width: 1400px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-strip-kicker { font-size: 10px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold); }
.cc-strip-title { font-size: 15px; font-weight: 700; color: #fff; }
.cc-strip-role { font-size: 13px; color: rgba(255,255,255,.72); }
.cc-strip-role b { color: #fff; font-weight: 700; }
.cc-strip .drive-back { display: none; padding: 0; }

/* the explainer + rewards, living in the rail's spare room */
.cc-extra > summary { display: none; }
.cc-steps, .cc-wins { margin-top: 12px; }
.cc-steps h4, .cc-wins h4 { font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--gold-dark); margin-bottom: 9px; }
.cc-step { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start;
  font-size: 12px; line-height: 1.5; color: var(--ink-dim); padding: 6px 0; }
.cc-step b { color: var(--ink); font-weight: 700; }
.cc-sn { width: 19px; height: 19px; border-radius: 50%; background: var(--navy); color: #fff;
  font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.cc-step.one .cc-sn { background: #E07A28; }
.cc-wins { background: var(--bg-cream); border-color: rgba(200,140,50,.45); }
.cc-win { display: flex; align-items: center; gap: 9px; font-size: 12.5px;
  color: var(--navy); padding: 7px 0; }
.cc-win + .cc-win { border-top: 1px solid rgba(200,140,50,.28); }
.cc-win .icon { width: 15px; height: 15px; color: #C96A1E; }

/* desktop: the form is a plain inline bar; sheet chrome stays hidden */
.cc-formwrap { display: block; }
.cc-sheet-x, .cc-sheet-note { display: none; }
.cc-fab { background: #E07A28; }
.cc-fab:hover { background: #C96A1E; }
@media (min-width: 901px) { .cc-fab { display: none !important; } }

/* ---------- phone: form becomes a sheet behind the FAB ---------- */
@media (max-width: 900px) {
  .cc-strip-in { padding: 11px 16px; gap: 7px; }
  .cc-strip-title, .cc-strip-role { font-size: 13px; }

  .cc-formwrap { position: fixed; inset: 0; z-index: 120;
    background: rgba(12,18,36,.55); display: flex; align-items: flex-end;
    opacity: 0; pointer-events: none; transition: opacity .2s; }
  .cc-formwrap.open { opacity: 1; pointer-events: auto; }
  .cc-formwrap .cc-formbar { width: 100%; grid-template-columns: 1fr; gap: 10px;
    border-radius: 20px 20px 0 0; margin: 0; padding: 16px 18px calc(20px + var(--sab));
    max-height: 92dvh; overflow-y: auto;
    transform: translateY(14px); transition: transform .24s cubic-bezier(.32,.72,.33,1); }
  .cc-formwrap.open .cc-formbar { transform: none; }
  .cc-formbar-lead { position: relative; padding-right: 34px; }
  .cc-sheet-x { display: flex; position: absolute; right: 0; top: -2px;
    width: 32px; height: 32px; align-items: center; justify-content: center;
    border-radius: 8px; color: var(--ink-faint); }
  .cc-sheet-note { display: block; font-size: 12px; line-height: 1.45;
    color: var(--ink-dim); margin: -2px 0 2px; }
  .cc-formbar input, .cc-formbar select { min-height: 46px; }
  .cc-formbar .btn { width: 100%; min-height: 48px; }

  /* explainer folds into one tappable card */
  .cc-extra { background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow); margin-top: 12px; overflow: hidden; }
  .cc-extra > summary { display: flex; align-items: center; justify-content: space-between;
    list-style: none; cursor: pointer; padding: 14px 15px; min-height: 48px;
    font-size: 13px; font-weight: 700; color: var(--navy); }
  .cc-extra > summary::-webkit-details-marker { display: none; }
  .cc-extra > summary::after { content: "▾"; color: var(--gold-dark); font-size: 13px; }
  .cc-extra[open] > summary::after { content: "▴"; }
  .cc-extra .cc-card { margin: 0; border: none; border-top: 1px solid var(--line);
    border-radius: 0; box-shadow: none; }
}

/* The "where's the link?" sheet is opened FROM the mobile form sheet, so it has
   to stack above it (.cc-formwrap is z-index 120) or it loads out of sight. */
#linkHelpOverlay { z-index: 140; }

/* =============== CAPS OF THE MONTH (wall tile 2) =============== */
.caps-card { padding: 15px; border-top: 3px solid var(--navy); cursor: default; align-self: start; }
@media (hover: hover) { .caps-card:hover { transform: none; box-shadow: var(--shadow); } }
.cap-rows { margin-top: 11px; display: flex; flex-direction: column; }
.cap-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 9px 0; }
.cap-row + .cap-row { border-top: 1px solid var(--line); }
.cap-row.orange { --c: #D9741F; } .cap-row.purple { --c: #5B3F9E; } .cap-row.navy { --c: var(--navy); }
.cap-ico { width: 34px; height: 34px; color: var(--c); }
.cap-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cap-txt b { font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-txt small { font-size: 11.5px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-n { font-size: 18px; font-weight: 700; color: var(--c); font-variant-numeric: tabular-nums; text-align: right; line-height: 1; }
.cap-n small { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); margin-top: 2px; }
.caps-card .lb-foot { justify-content: flex-end; }
.caps-card .lb-more { text-decoration: none; }
/* the cap beside a holder's name — small, coloured, no text */
.cap-mark { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-left: 4px; }
.cap-mark.orange { color: #D9741F; } .cap-mark.purple { color: #5B3F9E; }
.liker .cap-mark { width: 12px; height: 12px; margin-left: 3px; }

/* =============== WEEKLY LEADERBOARD (wall tile 1) =============== */
.lb-card { padding: 15px; border-top: 3px solid var(--gold); cursor: default;
  align-self: start; }   /* don't stretch to the row — that's where the dead space came from */
@media (hover: hover) { .lb-card:hover { transform: none; box-shadow: var(--shadow); } }
.lb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.lb-head h3 { font-size: 14px; font-weight: 700; color: var(--navy); }
.lb-dt { font-size: 11px; color: var(--ink-dim); margin-top: 2px; }
.lb-cd { background: var(--bg-cream); border: 1px solid rgba(200,140,50,.4); border-radius: 999px;
  padding: 4px 10px; font-size: 10.5px; font-weight: 700; color: var(--gold-dark);
  white-space: nowrap; flex: none; }
.lb-rows { margin-top: 11px; }

/* One line per campus. No bar: with five-to-eight rows and the number right
   there, a bar added little, and as a row background it collided with the
   "your campus" tint — 3 posts could look bigger than 4. */
.lb-row { display: grid; grid-template-columns: 22px minmax(0,1fr) auto auto;
  gap: 9px; align-items: center; padding: 8px; margin: 0 -8px; border-radius: 8px; }
.lb-row + .lb-row { box-shadow: inset 0 1px 0 var(--line); }
.lb-row.mine { background: var(--bg-cream); }
.lb-row.mine + .lb-row { box-shadow: none; }
.lb-rk { font-size: 12.5px; font-weight: 700; color: var(--ink-faint); text-align: center; }
.lb-nm { font-size: 13px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 5px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-badge { font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  white-space: nowrap; border-radius: 999px; padding: 3px 8px; }
.p-jump   { background: rgba(31,138,76,.12);  color: #1F8A4C; }
.p-streak { background: rgba(224,122,40,.14); color: #C96A1E; }
.p-love   { background: rgba(214,69,69,.12);  color: #C0392B; }
.p-new    { background: rgba(200,140,50,.16); color: var(--gold-dark); }
/* movement travels with the number, not with the badge — together they read as
   one confusing cluster */
.lb-end { display: flex; align-items: baseline; gap: 6px; justify-content: flex-end; }
.lb-n { font-size: 14px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.lb-mv { font-size: 9.5px; font-weight: 700; }
.lb-mv.up { color: #1F8A4C; } .lb-mv.dn { color: #C8443D; }
.lb-you { background: var(--navy); color: #fff; font-size: 8.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 2px 6px; flex: none; }
.lb-gap { text-align: center; color: var(--ink-faint); letter-spacing: .2em; font-size: 11px; padding: 2px 0; }
.lb-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.lb-at { font-size: 10.5px; color: var(--ink-dim); line-height: 1.5; }
.lb-at b { color: var(--navy); }
.lb-more { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
  font-size: 11.5px; font-weight: 600; color: var(--navy); white-space: nowrap; flex: none; }
.lb-more:hover { border-color: var(--navy); }
.lb-empty { font-size: 12px; color: var(--ink-dim); padding: 14px 0 4px; line-height: 1.5; }

/* full list, in a modal so the tile never changes height */
.lb-all { max-width: 460px; }
.lb-all .sheet-head { align-items: flex-start; }
.lb-all-dt { font-size: 11.5px; color: var(--ink-dim); margin-top: 2px; }
.lb-all-body { padding: 6px 20px 20px; max-height: 62dvh; overflow-y: auto; }

/* =============== MONDAY WINNERS CARD =============== */
.wk-overlay { align-items: center; z-index: 150; }
.wk-card { position: relative; width: min(400px, 100%); background: #F7F1E7; border-radius: 18px;
  overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.34);
  animation: sheetIn .3s cubic-bezier(.32,.72,.33,1); }
.wk-x { position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.8); color: var(--ink-dim); display: flex; align-items: center;
  justify-content: center; z-index: 2; }
.wk-top { background: linear-gradient(150deg, var(--navy-deep), var(--navy) 62%, #2d4485);
  color: #fff; padding: 18px 20px; }
.wk-k { font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); text-align: center; }
.wk-top h4 { font-size: 19px; font-weight: 700; margin: 4px 0 2px; text-align: center; }
.wk-date { font-size: 11px; color: rgba(255,255,255,.62); text-align: center; margin-bottom: 15px; }
.wk-pod { background: rgba(255,255,255,.09); border: 1px solid rgba(200,140,50,.5);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.wk-pod.two { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.wk-pl { display: flex; align-items: baseline; gap: 8px; }
.wk-pm { font-size: 16px; line-height: 1; }
.wk-pc { font-size: 16px; font-weight: 700; }
.wk-pod.two .wk-pc { font-size: 14px; }
.wk-pn { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--gold); white-space: nowrap; }
.wk-pod.two .wk-pn { color: rgba(255,255,255,.7); font-size: 11.5px; }
.wk-pp { font-size: 10.5px; color: rgba(255,255,255,.62); margin-top: 5px; line-height: 1.55; }
.wk-body { padding: 15px 18px 16px; }
.wk-loved { background: var(--bg); border: 1px solid rgba(214,69,69,.28); border-radius: 11px; padding: 11px 13px; }
.wk-loved b { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #C0392B; }
.wk-lc { font-size: 15px; font-weight: 700; color: var(--navy); margin-top: 4px; }
.wk-ls { font-size: 11px; color: var(--ink-dim); margin-top: 2px; line-height: 1.5; }
.wk-lp { font-size: 11px; color: var(--ink-dim); margin-top: 4px; }
.wk-foot { border-top: 1px solid rgba(200,140,50,.35); margin-top: 13px; padding-top: 11px;
  font-size: 10.5px; color: var(--ink-dim); text-align: center; line-height: 1.55; }
.wk-foot b { color: var(--navy); }

/* ---- Monday card: lift it off the scrim ---- */
.wk-card { box-shadow: 0 0 0 3px var(--gold), 0 0 46px rgba(200,140,50,.5), 0 22px 55px rgba(0,0,0,.34); }
.wk-top { position: relative; overflow: hidden; }
.wk-conf { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.wk-conf i { position: absolute; width: 6px; height: 10px; border-radius: 1px; opacity: .9;
  animation: wkFall 2.8s linear infinite; }
@keyframes wkFall { 0% { transform: translateY(-24px) rotate(0); } 100% { transform: translateY(260px) rotate(420deg); } }
.wk-top > *:not(.wk-conf) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .wk-conf i { animation: none; }
  .wk-conf { display: none; }
}

/* The shared .sheet-head puts flex:1 on the h2 itself, but this modal wraps its
   title in a div (title + date), so the wrapper collapsed to content width and
   the close button sat right beside the text instead of at the far right. */
.lb-all .sheet-head > div:first-child { flex: 1; min-width: 0; }
/* Short modal — centre it rather than pinning it near the top. Phones keep the
   bottom-sheet treatment from the base .overlay rule. */
@media (min-width: 701px) { #lbAllOverlay { align-items: center; } }

/* "Last week's winners" — a text link on the date line rather than another
   row or pill, so re-opening the card costs the board no vertical space. */
.lb-last { font: inherit; font-weight: 600; color: var(--gold-dark);
  background: none; border: none; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(200,140,50,.45);
  /* padding + matching negative margin: the tap target reaches 44px for a
     thumb while the date line stays visually 13px tall */
  display: inline-block; padding: 16px 6px; margin: -16px -6px; }
.lb-last:hover { text-decoration-color: var(--gold-dark); }


/* ---------- Meme Challenge (reuses the Creator board's cc-* pieces) ---------- */
.cc-strip-link { margin-left: 10px; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.mm-tile .cc-meta { gap: 6px; }
.mm-campus { flex: 1; min-width: 0; font: inherit; font-size: 11px; color: var(--ink-dim); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 4px; background: #fff; }
.mm-campus:focus { outline: 2px solid var(--gold-soft); border-color: var(--gold); }
.mm-scanline { display: flex; align-items: flex-start; gap: 6px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-faint); line-height: 1.45; }
.mm-scanline .icon { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.mm-scanline span { min-width: 0; }
.mm-scanline b { color: var(--ink-dim); font-weight: 600; }

/* ---------- Meme Challenge on the wall ---------- */
.drive-banner { cursor: pointer; transition: background 160ms ease-out, border-color 160ms ease-out; }
@media (hover: hover) { .drive-banner:hover { background: #FFF7EC; border-color: var(--gold); } }
.drive-banner .icon { flex: none; width: 17px; height: 17px; }
.mm-promo { padding: 15px; border-top: 3px solid var(--gold); cursor: default; align-self: start; }
@media (hover: hover) { .mm-promo:hover { transform: none; box-shadow: var(--shadow); } }
.mm-promo h3 .icon { width: 15px; height: 15px; vertical-align: -2px; }
.mm-promo-stats { display: flex; gap: 10px; margin: 12px 0; padding: 10px 12px; border-radius: 10px; background: var(--bg-ice); }
.mm-promo-stats > span { flex: 1; min-width: 0; font-size: 11px; color: var(--ink-dim); white-space: nowrap; }
.mm-promo-stats b { display: block; font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.15; }
.mm-promo-rows { display: grid; gap: 7px; }
.mm-promo-row { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 9px; font-size: 13px; }
.mm-promo-row .r { font-size: 11px; font-weight: 700; color: var(--ink-faint); }
.mm-promo-row .c { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-promo-row .p { font-weight: 700; color: var(--gold-dark); font-variant-numeric: tabular-nums; }
.mm-promo-empty { font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; }