/* Shutter Host Events — companion page. All colours come from CSS variables so
   the colour themes (class-themes.php) can recolour everything by overriding
   them on .she-wrap. These defaults are the "Light" theme. */
.she-wrap {
  --she-accent:#f59e0b; --she-accent-ink:#1a1300;
  --she-bg:transparent; --she-card:#ffffff; --she-card-2:#f3f4f6;
  --she-text:#1a1a1a; --she-text-2:#374151; --she-muted:#6b7280; --she-line:#e5e7eb;
  max-width: 760px; margin: 24px auto; padding: 16px;
  background: var(--she-bg); border-radius: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--she-text);
}
.she-wrap * { box-sizing: border-box; }

.she-hero { border: 1px solid var(--she-line); border-radius: 16px; overflow: hidden; background: var(--she-card); margin-bottom: 16px; }
.she-hero-img { width: 100%; aspect-ratio: 16/9; background-size: cover; background-position: center; }
.she-hero-body { padding: 18px 20px; }
.she-title { margin: 0 0 8px; font-size: 1.7rem; line-height: 1.15; font-weight: 800; color: var(--she-text); }
.she-meta { margin: 4px 0; color: var(--she-muted); font-size: .98rem; display:flex; gap:8px; align-items:center; }
.she-ic { font-style: normal; }

.she-section { background: var(--she-card); border: 1px solid var(--she-line); border-radius: 16px; padding: 18px 20px; margin-bottom: 16px; }
.she-h2 { margin: 0 0 12px; font-size: 1.15rem; font-weight: 800; color: var(--she-text); text-align: center; }
.she-muted { color: var(--she-muted); }
.she-desc { line-height: 1.6; color: var(--she-text-2); }
.she-desc :is(p,ul,ol) { margin: 0 0 10px; }

/* Top row: Submit (left) · social icons (centre) · Results (right). */
.she-topbar-grid { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:12px; }
.she-topbar-left { justify-self:start; }
.she-topbar-right { justify-self:end; }
.she-social-row { display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap; }
.she-social-link { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; text-decoration:none;
  background: var(--she-card-2); color: var(--she-text); border:1px solid var(--she-line); }
.she-social-link:hover { border-color: var(--she-accent); color: var(--she-accent); }
.she-social-link svg { width:22px; height:22px; display:block; }
@media (max-width:560px){
  .she-topbar-grid { grid-template-columns:1fr; justify-items:center; gap:14px; }
  .she-topbar-left, .she-topbar-right { justify-self:center; }
}

/* Challenge refresh prompt (attendees, drip mode). */
.she-refresh { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.she-refresh-btn { display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  background: var(--she-accent); color: var(--she-accent-ink); border:1px solid var(--she-accent);
  border-radius:8px; padding:8px 14px; font-weight:700; font-size:.88rem; }
.she-refresh-btn svg { width:15px; height:15px; }

/* Links — compact buttons, centred. */
.she-link-grid { display: flex; flex-direction: column; gap: 10px; align-items: center; }

/* Sponsors — logos in their own section. */
.she-sponsor-row { display:flex; flex-wrap:wrap; gap:18px 26px; align-items:center; justify-content:center; }
.she-sponsor { display:inline-flex; align-items:center; }
.she-sponsor-logo { max-height:56px; max-width:170px; width:auto; height:auto; display:block; }
.she-sponsor-name { font-weight:700; color:var(--she-text); }
.she-link { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.she-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  background: var(--she-card-2); color: var(--she-text); border:1px solid var(--she-line); border-radius: 8px;
  padding: 8px 14px; font-weight: 700; font-size: .88rem; }
.she-btn-primary { background: var(--she-accent); border-color: var(--she-accent); color: var(--she-accent-ink); }
.she-qr-btn { flex: 0 0 auto; border:1px solid var(--she-line); background: var(--she-card); border-radius: 8px;
  padding: 8px 12px; font-weight: 800; font-size: .78rem; letter-spacing:.03em; cursor: pointer; color: var(--she-text); }
.she-qr-btn:hover { border-color: var(--she-accent); }

/* Page QR */
.she-pageqr { text-align: center; }
.she-qr-inline { width: 220px; max-width: 70%; margin: 8px auto 0; }
.she-qr-inline :is(svg,img) { width: 100%; height: auto; display:block; image-rendering: pixelated; }

/* Challenges */
.she-hostbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  background: color-mix(in oklab, var(--she-accent) 12%, var(--she-card));
  border:1px solid color-mix(in oklab, var(--she-accent) 35%, var(--she-line));
  border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.she-hostbar-label { font-size:.82rem; font-weight:700; margin-right:auto;
  color: color-mix(in oklab, var(--she-accent) 70%, var(--she-text)); }
.she-host-btn { border:1px solid var(--she-accent); background: var(--she-accent); color: var(--she-accent-ink);
  border-radius: 8px; padding: 7px 12px; font-weight:700; font-size:.85rem; cursor:pointer; }
.she-host-btn.ghost { background: var(--she-card); color: color-mix(in oklab, var(--she-accent) 70%, var(--she-text)); }
.she-host-btn:disabled { opacity:.45; cursor:not-allowed; }
.she-empty { padding: 8px 0; }

.she-challenge-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.she-challenge { display:flex; gap:12px; border:1px solid var(--she-line); border-radius:12px; padding:14px; }
.she-challenge-latest { border-color: var(--she-accent);
  box-shadow: 0 0 0 1px var(--she-accent), 0 8px 22px color-mix(in oklab, var(--she-accent) 22%, transparent); }
.she-challenge-new { display:inline-block; background: var(--she-accent); color: var(--she-accent-ink);
  font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  border-radius:999px; padding:2px 9px; margin-bottom:7px; }
.she-challenge-num { flex:0 0 32px; height:32px; width:32px; border-radius:50%; background:var(--she-accent);
  color:var(--she-accent-ink); font-weight:800; display:grid; place-items:center; }
.she-challenge-body { flex:1; min-width:0; }
.she-challenge-title { margin:2px 0 6px; font-size:1.05rem; font-weight:800; color: var(--she-text); }
.she-challenge-brief { margin:6px 0 0; line-height:1.55; color:var(--she-text-2); }
.she-challenge-img { width:100%; height:auto; border-radius:10px; margin-top:8px; }

.she-gate { background: color-mix(in oklab, var(--she-accent) 12%, var(--she-card));
  border:1px solid color-mix(in oklab, var(--she-accent) 35%, var(--she-line)); border-radius:12px; padding:14px; }

/* QR overlay */
.she-qr-overlay { position: fixed; inset:0; z-index: 99999; display:none; align-items:center; justify-content:center;
  background: rgba(0,0,0,.78); padding: 20px; }
.she-qr-overlay.open { display:flex; }
.she-qr-card { background:#fff; border-radius:18px; padding:22px; max-width:340px; width:100%; text-align:center; }
.she-qr-card .she-qr-img { width: 260px; max-width:100%; margin: 4px auto 12px; }
.she-qr-card .she-qr-img :is(svg,img) { width:100%; height:auto; display:block; image-rendering: pixelated; }
.she-qr-card .she-qr-label { font-weight:800; font-size:1.05rem; margin-bottom:4px; color:#1a1a1a; }
.she-qr-card .she-qr-url { font-size:.8rem; color:#6b7280; word-break:break-all; margin-bottom:14px; }
.she-qr-close { border:none; background:#f59e0b; color:#1a1300; font-weight:800; border-radius:10px;
  padding:11px 18px; cursor:pointer; width:100%; }