/* ============================================================================
   JNVKAA event volunteers: event-page panel, member hub, volunteer ID card,
   /v/{token} verification and the organisers' Volunteers tab.
   MOBILE-FIRST. No style="" anywhere (CSP): every visual lives here.
   Brand: teal #129298 · cream #FFF0E6 · dark #001D23 · Saira headings.
   ========================================================================== */
:root { --vol-teal: #129298; --vol-cream: #FFF0E6; --vol-dark: #001D23; --vol-teal-deep: #0b6569; }

/* ---- event page panel ------------------------------------------------------------------- */
.vol-panel__pitch { margin: 0 0 var(--sp-3); color: var(--ink-2, var(--ink)); font-size: var(--fs-sm); line-height: 1.55; white-space: pre-line; }
.vol-roles { list-style: none; padding: 0; margin: 0 0 var(--sp-3); }
.vol-slots { margin: 0 0 var(--sp-3); }
.vol-slots__text { margin: 0 0 6px; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.vol-slots__text strong { color: var(--ink); }
.vol-slots__bar { display: block; width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: #e7eeee; -webkit-appearance: none; appearance: none; }
.vol-slots__bar::-webkit-progress-bar { background: #e7eeee; border-radius: 999px; }
.vol-slots__bar::-webkit-progress-value { background: var(--vol-teal); border-radius: 999px; }
.vol-slots__bar::-moz-progress-bar { background: var(--vol-teal); border-radius: 999px; }

/* ---- member hub --------------------------------------------------------------------------- */
.vol-page .pg-eyebrow { margin-bottom: 2px; }
.vol-role { position: relative; overflow: hidden; border-radius: var(--card-radius); padding: var(--sp-4); color: #fff;
  background: radial-gradient(circle at 92% 0%, rgba(77, 192, 197, .45), transparent 45%), linear-gradient(135deg, var(--vol-dark) 0%, #06313a 55%, var(--vol-teal-deep) 100%); }
.vol-role__kicker { margin: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.vol-role__name { margin: 2px 0 var(--sp-3); font-family: var(--font-head); font-weight: 800; font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.9rem); line-height: 1.1; color: #fff; }
.vol-role__facts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: 0 0 var(--sp-3); }
.vol-role__facts dt { font-size: var(--fs-2xs, .7rem); text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.vol-role__facts dd { margin: 0; font-weight: 600; }
.vol-role__note { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); opacity: .9; max-width: 60ch; }
.vol-role__actions { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
@media (min-width: 480px) { .vol-role__actions { display: flex; flex-wrap: wrap; } }
.vol-role__actions .btn { justify-content: center; }

.vol-briefs { display: grid; gap: var(--sp-3); }
.vol-brief { border: 1px solid var(--line); border-radius: 12px; padding: var(--sp-3) var(--sp-4); background: #fff; min-width: 0; }
.vol-brief.is-pinned { border-color: #f5d7a9; background: #fffaf3; }
.vol-brief__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px var(--sp-2); margin-bottom: var(--sp-2); }
.vol-brief__head h3 { margin: 0; font-family: var(--font-head); font-size: var(--fs-md, 1rem); line-height: 1.3; }
.vol-brief__body p { margin: 0 0 .7em; line-height: 1.6; max-width: 70ch; overflow-wrap: anywhere; }
.vol-brief__body p:last-child { margin-bottom: 0; }
.vol-brief__when { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--muted); }

.vol-team { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.vol-team li { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.vol-team li.is-me .vol-team__av { background: var(--vol-teal); color: #fff; }
.vol-team__av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--vol-cream);
  color: var(--teal-700, var(--vol-teal-deep)); font-family: var(--font-head); font-weight: 700; font-size: .8rem; }
.vol-team__who { display: grid; min-width: 0; }
.vol-team__who strong { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.vol-withdraw summary { cursor: pointer; color: var(--muted); }

.vol-form__row { display: grid; gap: 0 var(--sp-3); }
@media (min-width: 560px) { .vol-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; } }
.vol-form .field { margin-bottom: var(--sp-3); }
.vol-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }

/* ---- volunteer ID card (CR80: 85.6 × 54 mm = 1.586) ----------------------------------------- */
.vol-card-wrap { display: grid; gap: var(--sp-4); justify-items: center; padding: var(--sp-5) var(--sp-3); border: 1px solid var(--line);
  border-radius: var(--card-radius); background: #fff; }
.vol-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); width: 100%; max-width: 460px; }
.vol-card-actions .btn { justify-content: center; }
@media (min-width: 480px) { .vol-card-actions { display: flex; justify-content: center; } .vol-card-actions .btn { min-width: 140px; } }

.vcard { width: 100%; max-width: 460px; aspect-ratio: 1.586; position: relative; overflow: hidden; border-radius: 18px; container-type: inline-size;
  background: radial-gradient(circle at 92% 45%, rgba(18, 146, 152, .16), transparent 45%), var(--vol-cream); color: var(--vol-dark);
  box-shadow: 0 30px 60px -25px rgba(0, 29, 35, .5); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; font-family: var(--font-body); }
.vcard__top { height: 13cqw; background: var(--vol-dark); color: #fff; display: flex; align-items: center; gap: 2.4cqw; padding: 0 4cqw; }
.vcard__top img { width: 8.7cqw; height: 8.7cqw; }
.vcard__org { font-family: var(--font-head); font-weight: 800; font-size: 4.3cqw; letter-spacing: .04em; line-height: 1; min-width: 0; }
.vcard__org small { display: block; font-weight: 500; font-size: 1.85cqw; letter-spacing: .01em; opacity: .75; margin-top: .5cqw; }
.vcard__date { margin-left: auto; font-weight: 600; font-size: 2.4cqw; white-space: nowrap; }
.vcard__mid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 3cqw; padding: 2.6cqw 4cqw; }
.vcard__photo { width: 19.4cqw; height: 23.3cqw; border-radius: 2cqw; object-fit: cover; border: .4cqw solid var(--vol-dark); background: var(--vol-teal); }
.vcard__initials { display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 9cqw; }
.vcard__who { min-width: 0; }
.vcard__name { margin: 0 0 .8cqw; font-family: var(--font-head); font-weight: 700; font-size: 4.6cqw; line-height: 1.08; overflow-wrap: anywhere; color: var(--vol-dark); }
.vcard__batch { margin: 0 0 1.4cqw; font-size: 2.6cqw; font-weight: 600; color: #3b4f54; }
.vcard__role { display: inline-block; margin: 0; padding: .7cqw 1.8cqw; border-radius: 99px; background: var(--vol-teal); color: #fff; font-weight: 700; font-size: 2.6cqw; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcard__qr { width: 21.7cqw; height: 21.7cqw; border-radius: 1.6cqw; background: #fff; padding: .8cqw; image-rendering: pixelated; }
.vcard__band { height: 11cqw; background: var(--vol-teal); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 0 4cqw;
  font-family: var(--font-head); font-weight: 800; font-size: 7.5cqw; letter-spacing: 1cqw; line-height: 1; }
.vcard__code { font-size: 2.8cqw; letter-spacing: .2cqw; font-weight: 700; white-space: nowrap; }
.vcard__event { height: 9.5cqw; display: block; padding: 0 4cqw; font-family: var(--font-head); font-weight: 700; font-size: 3cqw; line-height: 9.5cqw;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

@media print {
  @page { size: A6 landscape; margin: 8mm; }
  body { background: #fff !important; }
  .no-print, .mnav, .mdrawer, .footer, .site-footer, header.site-header, .topbar, .side, .side-scrim, .alert, .ev-sticky { display: none !important; }
  .vol-card-wrap { border: 0; padding: 0; background: none; }
  .vcard { width: 85.6mm; max-width: none; height: 54mm; box-shadow: none; border: .2mm solid #c9d3d4; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---- /v/{token} verification -------------------------------------------------------------- */
.vol-verify { max-width: 480px; margin: 0 auto; text-align: center; }
.vol-verify__seal { width: 76px; height: 76px; margin: 0 auto var(--sp-3); border-radius: 50%; display: grid; place-items: center; font-size: 2.1rem; }
.vol-verify.is-ok .vol-verify__seal { background: #e8f6ef; color: #10794f; }
.vol-verify.is-bad .vol-verify__seal { background: #fdecec; color: #b3261e; }
.vol-verify__title { margin: 0 0 var(--sp-1); font-family: var(--font-head); font-size: var(--fs-xl, 1.4rem); }
.vol-verify.is-ok .vol-verify__title { color: #10794f; }
.vol-verify.is-bad .vol-verify__title { color: #b3261e; }
.vol-verify__lead { margin: 0 0 var(--sp-3); color: var(--muted); }
.vol-verify__facts { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0; text-align: left; border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.vol-verify__facts > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--sp-2); align-items: baseline; }
.vol-verify__facts dt { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-head); }
.vol-verify__facts dd { margin: 0; font-family: var(--font-head); font-weight: 700; overflow-wrap: anywhere; }
.vol-verify__badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; background: #e8f6ef; color: #10794f; font-weight: 600; font-size: var(--fs-sm); }
.vol-verify__help { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); }

/* ---- organisers' Volunteers tab ---------------------------------------------------------------- */
.vol-table .vol-scan-btn { white-space: nowrap; }
.vol-briefings { margin-top: var(--sp-6); }
.vol-brief-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 1024px) { .vol-brief-grid { grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); align-items: start; } }
.vol-brief-form { display: grid; gap: 0; }
.vol-brief-form .field { margin-bottom: var(--sp-3); }
.vol-brief-form .pg-card-title { margin: 0 0 var(--sp-3); }
.vol-pin { margin-bottom: var(--sp-3); }
.vol-brief-list { display: grid; gap: var(--sp-3); min-width: 0; }
.vol-brief-list .vol-brief.is-editing { outline: 2px solid var(--vol-teal); outline-offset: 1px; }
.vol-brief__text { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--ink-2, var(--ink)); white-space: pre-line; }
.vol-brief__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-xs); }

@media (prefers-reduced-motion: reduce) { .vcard, .vol-role { transition: none !important; } }