/* ==================================================================
   The participant portal.

   Everything a registered participant sees after signing in with the
   ID that was emailed to them. Built from the site's own tokens, so it
   is recognisably the same site rather than a bolted-on application.
   ================================================================== */

.pw{background:var(--cream);min-height:100vh;padding:132px 0 96px}
.pw .shell{width:var(--shell);margin:0 auto}

/* ---- the identity strip at the top of every portal screen ---- */
.pid{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:linear-gradient(120deg,var(--nro-maroon-2),var(--nro-maroon) 62%,#2c0303);
  color:#fff;border-radius:22px;padding:24px 28px;margin-bottom:26px}
.pid-who b{font-family:var(--serif);font-size:1.32rem;display:block;line-height:1.2}
.pid-who span{font-size:13px;color:rgba(255,255,255,.72)}
.pid-code{margin-left:auto;text-align:right}
.pid-code b{font-family:var(--serif);font-size:1.28rem;letter-spacing:.04em;display:block}
.pid-code span{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.pid-out{border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;
  border-radius:100px;padding:8px 17px;font-family:var(--sans);font-size:12.5px;cursor:pointer;
  text-decoration:none;display:inline-block}
.pid-out:hover{background:rgba(255,255,255,.14)}

/* ---- the rules panel ---- */
.rules{background:var(--paper);border:1px solid var(--line);border-radius:22px;
  padding:30px 32px;margin-bottom:30px}
.rules h3{font-family:var(--serif);font-size:1.16rem;margin-bottom:16px}
.rules ul{list-style:none;display:grid;gap:13px}
/* The bullet is positioned rather than a flex sibling: as a flex item every
   <b> and <span> inside the sentence became a column of its own and the
   text laid out sideways instead of flowing. */
.rules li{position:relative;padding-left:21px;font-size:14.5px;
  color:var(--ink-2);line-height:1.75}
.rules li::before{content:'';position:absolute;left:0;top:10px;
  width:7px;height:7px;border-radius:50%;background:var(--clay)}
.rules li b{color:var(--ink);font-weight:600}
.rules .money{color:var(--clay);font-weight:600;white-space:nowrap}

/* ---- the six category cards ---- */
.pgrid2{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pcard2{display:block;background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:26px 24px;position:relative;overflow:hidden;text-align:left;width:100%;
  font-family:var(--sans);cursor:pointer;text-decoration:none;color:inherit;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.pcard2:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(18,60,34,.11);
  border-color:rgba(18,60,34,.3)}
.pcard2::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--green),var(--clay));transform:scaleX(0);
  transform-origin:left;transition:transform .5s var(--ease)}
.pcard2:hover::after{transform:scaleX(1)}
.pcard2 h4{font-family:var(--serif);font-size:1.14rem;font-weight:600;margin-bottom:9px;color:var(--ink)}
.pcard2 p{font-size:13.5px;color:var(--ink-2);line-height:1.65}
.pc-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;border-radius:100px;padding:5px 12px;margin-bottom:14px}
.pc-tag.free{background:rgba(47,125,67,.13);color:#256b38}
.pc-tag.paid{background:rgba(122,31,22,.12);color:var(--clay)}
.pc-tag.picked{background:var(--forest);color:#fff}
.pc-tag.waiting{background:rgba(182,64,47,.14);color:#8d3425}
.pc-wait{margin-top:auto;padding-top:12px;font-size:13px;font-weight:700;color:#8d3425;line-height:1.4}
.pc-go{display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:13px;font-weight:600;color:var(--clay)}
/* Locked once the participant's allowance is used up. */
.pcard2.locked{opacity:.46;cursor:not-allowed;transform:none;box-shadow:none}
.pcard2.locked:hover{transform:none;box-shadow:none;border-color:var(--line)}
.pc-lock{font-size:12px;color:var(--ink-3);margin-top:14px;line-height:1.55}
.pcard2.chosen{border-color:var(--forest);box-shadow:0 0 0 2px rgba(18,60,34,.16)}
.pcard2.chosen::after{transform:scaleX(1)}

/* ---- a portal screen: heading + body ---- */
.psec{background:var(--paper);border:1px solid var(--line);border-radius:24px;
  padding:38px 40px;margin-bottom:24px}
.psec > .eyebrow{margin-bottom:10px}
.psec h2{font-size:clamp(1.5rem,2.6vw,2.05rem);margin-bottom:14px}
.psec .lede2{margin-bottom:0}
/* .lede2 carries a 60-character measure, which is right for a long read
   on a wide marketing page and wrong inside a portal card: the paragraph
   broke halfway across while the lists under it ran the full width, and
   it was set larger and airier than them too. In here it takes the
   card's width at the card's size, so the panel reads as one block. */
.pw .psec .lede2{max-width:none;font-size:15px;line-height:1.75;color:var(--ink-2)}
.pback{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
  color:var(--clay);background:none;border:none;cursor:pointer;text-decoration:none;
  font-family:var(--sans);padding:0;margin-bottom:20px}

/* ---- rules-and-regulations blocks ---- */
.rr{display:grid;gap:22px;margin-top:8px}
.rr-b{border-left:2px solid var(--clay);padding-left:20px}
.rr-b h4{font-family:var(--serif);font-size:1.05rem;margin-bottom:9px}
.rr-b p,.rr-b li{font-size:14px;color:var(--ink-2);line-height:1.75}
.rr-b ul{list-style:none;display:grid;gap:7px}
.rr-b li{display:flex;gap:10px}
.rr-b li::before{content:'—';color:var(--clay);flex:none}
/* The value under "Theme" is content, not a heading: the display face is
   kept for the headings above it and everything else reads in the body
   face, so a panel is not three typefaces deep. */
.rr-theme{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--forest);line-height:1.6}

/* ---- option lists (radio cards) ---- */
.opts{display:grid;gap:10px;margin-top:4px}
.opts.two{grid-template-columns:1fr 1fr}
/* Written as .fld label.opt / .fld .opt input on purpose: the theme's
   .fld label (uppercase, block) and .fld input (width:100%) would otherwise
   win and turn every card into a centred radio over shouting text. */
.opt,.fld label.opt{display:flex;gap:13px;align-items:flex-start;border:1.5px solid var(--line);
  border-radius:14px;padding:15px 17px;cursor:pointer;background:var(--cream);
  text-transform:none;letter-spacing:0;font-size:14.5px;font-weight:400;margin-bottom:0;
  transition:border-color .25s,background .25s}
.opt:hover,.fld label.opt:hover{border-color:rgba(18,60,34,.34);background:#fff}
.opt input,.fld .opt input{width:auto;margin:3px 0 0;padding:0;accent-color:var(--forest);flex:none}
.opt b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:3px}
.opt span{font-size:12.5px;color:var(--ink-3);line-height:1.6}
.opt.on,.fld label.opt.on{border-color:var(--forest);background:#fff;box-shadow:0 0 0 2px rgba(18,60,34,.1)}
.opt .price{margin-left:auto;font-family:var(--serif);font-size:1.02rem;color:var(--clay);white-space:nowrap}

/* ---- a note under a field ---- */
.pnote{background:var(--moss);border-radius:13px;padding:15px 17px;margin-top:14px;
  font-size:13px;color:var(--ink-2);line-height:1.7}
.pnote b{color:var(--forest)}

/* ---- the entry form's own controls, dressed like the dialog's ---- */
.nro-entry .fld input[type="text"],.nro-entry .fld input[type="email"],
.nro-entry .fld select,.nro-entry .fld textarea{width:100%;padding:12px 14px;
  border:1.5px solid var(--line);border-radius:11px;font-family:var(--sans);font-size:14.5px;
  color:var(--ink);background:var(--cream);resize:vertical}
.nro-entry .fld input:focus,.nro-entry .fld select:focus,.nro-entry .fld textarea:focus{
  outline:none;border-color:var(--green);background:#fff}
.nro-entry .fld input[readonly]{color:var(--ink-3)}
.nro-entry .fld label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
.nro-entry .drop{border:1.5px dashed var(--line);border-radius:13px;padding:22px;text-align:center;
  background:var(--cream);cursor:pointer}
.nro-entry .drop.has{border-color:var(--green);background:rgba(47,125,67,.06)}
.nro-entry .drop b{display:block;font-size:13.5px;color:var(--forest);margin-bottom:4px}
.nro-entry .drop span{font-size:12px;color:var(--ink-3)}

/* The helper line under a field. It had no rule of its own, so it fell
   back to full body text and shouted over the field it was explaining;
   it now matches the hint inside the upload box. */
.nro-entry .fld .phint,.phint{display:block;margin-top:7px;font-family:var(--sans);
  font-size:12.5px;line-height:1.65;color:var(--ink-3);text-transform:none;
  letter-spacing:0;font-weight:400;max-width:78ch}
.nro-entry [data-err]{display:block;margin:0 0 14px}
.nro-entry [data-err][hidden]{display:none}
.nro-entry .msubmit{width:100%;padding:15px;border:none;border-radius:13px;background:var(--forest);
  color:#fff;font-family:var(--sans);font-weight:600;font-size:15px;cursor:pointer;
  box-shadow:0 8px 24px rgba(18,60,34,.26)}
.nro-entry .msubmit[disabled]{opacity:.6;cursor:wait}
.signin .msubmit{width:100%;padding:15px;border:none;border-radius:13px;background:var(--forest);
  color:#fff;font-family:var(--sans);font-weight:600;font-size:15px;cursor:pointer}
.signin .fld input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;
  font-family:var(--sans);font-size:14.5px;background:var(--cream)}
.signin .fld label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
.pw .tick{width:62px;height:62px;border-radius:50%;background:rgba(47,125,67,.12);color:var(--green);
  display:grid;place-items:center;font-size:29px}
[hidden]{display:none!important}

/* ---- team rows ---- */
.team-row{display:grid;grid-template-columns:auto 1fr 1fr;gap:13px;align-items:end;margin-bottom:13px}
.team-row .n{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-2);padding-bottom:13px;white-space:nowrap}
@media(max-width:780px){.team-row{grid-template-columns:1fr}.team-row .n{padding-bottom:0}}

/* ---- the running total on a paid screen ---- */
.ptotal{display:flex;justify-content:space-between;align-items:baseline;
  background:var(--cream);border:1px solid var(--line);border-radius:14px;
  padding:17px 20px;margin:20px 0}
.ptotal span{font-size:13.5px;color:var(--ink-2)}
.ptotal b{font-family:var(--serif);font-size:1.34rem;color:var(--forest)}

/* ---- sign-in ---- */
.signin{max-width:430px;margin:0 auto}
.signin .psec{padding:36px 34px}

@media(max-width:980px){.pgrid2{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .pgrid2,.opts.two{grid-template-columns:1fr}
  .psec{padding:28px 22px}
  .pid{padding:20px}
  .pid-code{margin-left:0;text-align:left;width:100%}
}

/* ---- option cards, restated at .nro-entry specificity ----
   .nro-entry .fld label / input above outrank the plain .opt rules, so the
   cards are restated here, last, at the same weight plus one class. */
.nro-entry .fld label.opt{display:flex;gap:13px;align-items:flex-start;text-transform:none;
  letter-spacing:0;font-size:14.5px;font-weight:400;margin-bottom:0;color:var(--ink)}
.nro-entry .fld .opt input{width:auto;margin:3px 0 0;padding:0;border:0;background:none;flex:none}
.nro-entry .fld .opt b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:3px;text-transform:none;letter-spacing:0}
.nro-entry .fld .opt span{font-size:12.5px;color:var(--ink-3);line-height:1.6;text-transform:none;letter-spacing:0}
.nro-entry .fld .opt .price{margin-left:auto;font-family:var(--serif);font-size:1.02rem;color:var(--clay)}

/* ---- a team that can grow past its minimum ------------------------- */
.team-row .n .lead,
.team-row .n .opt-tag{
  display:inline-block;margin-left:8px;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;font-weight:600;padding:2px 8px;border-radius:100px;vertical-align:middle}
.team-row .n .lead{background:rgba(18,60,34,.1);color:var(--forest)}
.team-row .n .opt-tag{background:rgba(125,138,128,.14);color:var(--ink-3)}
.addmem{
  display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  background:none;border:1px dashed var(--line);border-radius:12px;
  padding:11px 18px;font-family:var(--sans);font-size:13.5px;font-weight:600;
  color:var(--forest);cursor:pointer;transition:border-color .25s,background .25s,color .25s}
.addmem:hover{border-color:var(--forest);background:rgba(18,60,34,.05)}
.addmem[hidden]{display:none}
[data-add-note]{margin-top:8px}

/* ---- the film link, submitted after registration ------------------- */
.filmlink{border:1px solid var(--line);border-radius:18px;padding:22px 24px;margin-top:22px;background:var(--paper)}
.filmlink h3{font-family:var(--serif);font-size:1.1rem;font-weight:600;color:var(--forest);margin:0 0 4px}
.filmlink p{font-size:14px;color:var(--ink-2);line-height:1.65;margin:0 0 14px}
.filmlink .row{display:flex;gap:10px;flex-wrap:wrap}
.filmlink input[type="url"]{flex:1 1 260px;min-width:0}
.filmlink .done{color:var(--forest);font-weight:600;font-size:14px}
.filmlink .late{color:var(--clay);font-weight:600}

/* =====================================================================
   An abstract after it has been read
   ================================================================== */
.absbox{border-radius:16px;padding:20px 22px;margin:18px 0 0}
.absbox h3{font-family:var(--serif);font-size:1.12rem;font-weight:600;margin:0 0 8px}
.absbox p{font-size:14.5px;line-height:1.75;color:var(--ink-2);margin:0 0 10px}
.absbox p:last-child{margin-bottom:0}
.absbox.waiting{background:var(--cream);border:1px solid var(--line)}
.absbox.waiting h3{color:var(--ink)}
.absbox.yes{background:rgba(47,125,67,.09);border:1px solid rgba(47,125,67,.3)}
.absbox.yes h3{color:var(--forest)}
.absbox.no{background:rgba(182,64,47,.07);border:1px solid rgba(182,64,47,.26)}
.absbox.no h3{color:var(--clay)}
.absnote{background:#fff;border-left:2px solid var(--clay);border-radius:0 10px 10px 0;
  padding:12px 14px;font-size:14px}

.absh{font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--ink);margin:26px 0 8px}

.abstpl{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-top:16px}
.abstpl b{display:block;font-family:var(--serif);font-size:1.02rem;color:var(--forest);margin-bottom:3px}
.abstpl span{display:block;font-size:13px;color:var(--ink-3);line-height:1.6;max-width:60ch}

/* ---- a PDF in a popup (the abstract guidelines) ---- */
.pdf-lock{overflow:hidden}
.pdfm{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(12,20,15,.62);backdrop-filter:blur(3px)}
.pdfm-card{width:min(980px,100%);height:min(88vh,860px);display:flex;flex-direction:column;
  background:var(--paper,#fff);border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.pdfm-head{display:flex;align-items:center;gap:14px;padding:16px 22px;
  background:linear-gradient(120deg,var(--nro-maroon-2,#63120f),var(--nro-maroon,#470505));color:#fff}
.pdfm-head b{font-family:var(--serif);font-size:1.2rem;margin-right:auto;line-height:1.2}
.pdfm-tab{color:rgba(255,255,255,.8);font-size:12.5px;text-decoration:underline;white-space:nowrap}
.pdfm-tab:hover{color:#fff}
.pdfm-x{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:transparent;color:#fff;font-size:22px;line-height:1;cursor:pointer}
.pdfm-x:hover{background:rgba(255,255,255,.16)}
.pdfm-frame{flex:1;width:100%;border:0;background:#f2f0ea}
@media(max-width:640px){
  .pdfm{padding:0}
  .pdfm-card{height:100%;border-radius:0}
  .pdfm-head{padding:13px 16px}
}

.absgot{background:rgba(47,125,67,.1);border-radius:11px;padding:11px 14px;margin-bottom:14px;
  font-size:13.5px;font-weight:600;color:var(--forest)}
.promo-msg.good{background:rgba(47,125,67,.1);color:var(--forest);border-radius:11px;padding:11px 14px;font-size:13.5px}

/* WhatsApp group card and pop-up */
.wacard{max-width:460px;margin:18px auto 4px;padding:20px 22px;border:1px solid rgba(37,160,84,.3);border-radius:18px;background:rgba(37,211,102,.07);text-align:center}
.wacard h3,.wam-card h3{font-family:var(--serif,Georgia,serif);font-size:1.2rem;margin:8px 0 6px;color:var(--ink,#16201a)}
.wacard p,.wam-card p{font-size:14px;line-height:1.65;color:var(--ink-2,#415044);margin:0 0 14px}
.wa-ico{width:48px;height:48px;border-radius:50%;background:#25a054;color:#fff;display:inline-flex;align-items:center;justify-content:center}
.wa-join{background:#1f8f4a;border-color:#1f8f4a}
.wam{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(12,24,16,.6);backdrop-filter:blur(3px)}
.wam.on{display:flex}
.wam-card{position:relative;max-width:420px;width:100%;background:#fff;border-radius:22px;padding:30px 26px 22px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:wamin .35s cubic-bezier(.2,.7,.2,1)}
.wam-x{position:absolute;top:10px;right:14px;border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:#6b7a70}
.wam-later{display:block;margin:12px auto 0;border:0;background:none;color:#6b7a70;font-size:13px;cursor:pointer;text-decoration:underline}
.wam-lock{overflow:hidden}
@keyframes wamin{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

/* more than one abstract */
.abslist{margin:16px 0 4px;display:grid;gap:8px}
.abslist>b{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2,#415044)}
.absitem{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px 14px;border:1px solid var(--line,#e2ded2);border-radius:12px;text-decoration:none;color:var(--ink,#16201a);font-size:14px;background:#fff}
.absitem.on{border-color:var(--forest,#123c22);box-shadow:0 0 0 2px rgba(18,60,34,.12)}
.absitem em{font-style:normal;font-size:12px;color:var(--ink-2,#415044);white-space:nowrap}
.absitem i{font-style:normal;color:var(--ink-2,#415044);font-size:12px}
.absmore{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:14px 0 4px}
.absmore span{font-size:13px;color:var(--ink-2,#415044)}