/* The Credential: one laminated camp ID and one form to edit it, shared by the
   Cadet page and the Cruises STATS tab (credential-card.js builds the markup).
   Every colour falls back to the Cruises palette, so a page that does not
   define those variables still gets the same card. */

/* ---------- the card ----------
   A cadet's own page should open on something issued to them, not on a
   heading. Gold double rule, because that is the camp's mark of record —
   the same family as the SHOW CONCLUDED stamp. */
.cred{position:relative; display:flex; align-items:center; gap:16px;
  margin:18px 0 6px; padding:18px 18px 18px 16px; border-radius:16px;
  border:3px double var(--gold,#ffd60a); overflow:hidden; text-align:left;
  color:var(--ink,#e0f4ff); font-family:"Space Grotesk",system-ui,sans-serif;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(76,220,255,.16), transparent 58%),
    radial-gradient(120% 140% at 100% 100%, rgba(199,125,255,.16), transparent 58%),
    linear-gradient(165deg, #141a44, #0a0e27 58%, #1d0a1f);
  box-shadow:0 18px 44px rgba(0,0,0,.45), inset 0 0 70px rgba(255,214,10,.05);}
/* The scanline pass that ties every printed surface on this site together. */
.cred::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);
  opacity:.45;}
/* No avatar is the COMMON case, so the fallback is the camp's Space Cadet
   badge dimmed, with the cadet's initial over it: the badge gives everyone the
   same belonging, the letter keeps them apart. Auditioned five ways — the
   badge at full strength puts the letter squarely on the cadet's face, and a
   dimmed letter disappears into the art and stops telling anyone apart. The
   badge is a background layer rather than baked into the image, so one file
   serves every letter. */
.credFace{position:relative; isolation:isolate; overflow:hidden;
  flex:0 0 auto; width:92px; height:92px; border-radius:50%;
  background:#121845 center/cover no-repeat; border:2px solid var(--cyan,#4cdcff);
  box-shadow:0 0 0 4px rgba(10,14,39,.8), 0 0 26px -4px var(--cyan,#4cdcff);
  display:grid; place-items:center;
  font-family:"Orbitron",sans-serif; font-size:34px; color:var(--cyan,#4cdcff);
  text-shadow:0 2px 6px rgba(6,10,30,.95);}
.credFace::before{content:""; position:absolute; inset:0; z-index:-1;
  background:url("/avatar_default.jpg") center/cover no-repeat;
  filter:saturate(.35) brightness(.45);}
/* A real avatar replaces the lot — no badge behind it, no letter over it.
   `paintCard` sets a background-image, so that is what marks the difference. */
.credFace[style*="background-image"]{color:transparent; text-shadow:none;}
.credFace[style*="background-image"]::before{display:none;}
.credBody{flex:1 1 auto; min-width:0;}
.credKicker{display:block; font-family:"Orbitron",sans-serif; font-size:7.5px;
  letter-spacing:.3em; color:rgba(255,214,10,.75);}
.cred h2{font-family:"Orbitron",sans-serif; font-size:clamp(19px,5.6vw,27px);
  letter-spacing:.03em; margin:7px 0 0; line-height:1.1; color:#fff6d8;
  text-shadow:0 0 26px rgba(255,214,10,.22);
  overflow:hidden; text-overflow:ellipsis;}
.credChips{display:flex; flex-wrap:wrap; gap:5px; margin-top:9px;}
.credChips span{font-family:"Orbitron",sans-serif; font-size:8px; letter-spacing:.16em;
  border:1px solid rgba(76,220,255,.4); border-radius:999px; padding:3px 8px;
  color:var(--cyan,#4cdcff); background:rgba(76,220,255,.08);}
.credChips span.rank{border-color:var(--gold,#ffd60a); color:var(--gold,#ffd60a);
  background:rgba(255,214,10,.08);}
.credMail{display:block; margin-top:8px; font-size:11px; color:var(--ink-3,#8fa3c8);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding-right:52px; /* clear of the 72 seal in the corner */}
.credBadges{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px;}
.credBadges[hidden]{display:none;}
.credBadges .medal{position:relative; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; font-size:15px; line-height:1;
  background:radial-gradient(circle at 35% 30%, rgba(255,214,10,.28), rgba(255,214,10,.06) 70%);
  border:1px solid rgba(255,214,10,.55); box-shadow:0 0 12px -3px rgba(255,214,10,.5);}
.credBadges .medal b{position:absolute; right:-5px; bottom:-4px; min-width:15px; height:15px;
  padding:0 3px; border-radius:999px; background:var(--gold,#ffd60a); color:#0a0e27;
  font:700 9px/15px "Orbitron",sans-serif; text-align:center;}
/* 7 and 2 are the camp's numbers, and 7-2-2 spells S-C-C on a keypad. */
.credSeal{position:absolute; right:14px; bottom:10px; z-index:1;
  font-family:"Orbitron",sans-serif; font-size:30px; font-weight:800;
  color:rgba(255,214,10,.13); line-height:1; letter-spacing:-.04em;}
.credSeal small{font-size:30px;}
/* Tap-to-edit, where the page asks for it. The hint sits where the seal is
   NOT, so neither covers the other. */
.cred.tappable{cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:transform .15s, box-shadow .15s;}
.cred.tappable:hover{box-shadow:0 18px 44px rgba(0,0,0,.45), 0 0 0 1px rgba(255,214,10,.45), inset 0 0 70px rgba(255,214,10,.08);}
.cred.tappable:active{transform:scale(.99);}
.cred.tappable:focus-visible{outline:2px solid var(--cyan,#4cdcff); outline-offset:3px;}
.credChips span.edit{border:1px dashed rgba(255,214,10,.6); color:var(--gold,#ffd60a);
  background:rgba(255,214,10,.06);}
.cred.tappable:hover .credChips span.edit{border-style:solid; background:rgba(255,214,10,.14);}
@media (max-width:430px){
  .cred{flex-direction:column; align-items:flex-start; text-align:left;}
  .credFace{width:76px; height:76px; font-size:28px;}
}

/* ---------- the form ---------- */
.pf{display:flex; flex-direction:column; gap:14px; max-width:420px; margin-top:18px;
  font-family:"Space Grotesk",system-ui,sans-serif;}
.pf[hidden]{display:none;}
.fld{display:flex; flex-direction:column; gap:6px;}
.fld span{font-family:"Orbitron",sans-serif; font-size:9.5px; letter-spacing:.2em;
  color:var(--ink-3,#8fa3c8);}
.fld input,.fld select{font:inherit; font-size:16px; color:var(--ink,#e0f4ff);
  background:rgba(8,12,40,.75); border:1px solid var(--line,rgba(76,220,255,.35));
  border-radius:10px; padding:11px 12px; width:100%; box-sizing:border-box;}
.fld input:focus,.fld select:focus{outline:2px solid var(--cyan,#4cdcff); outline-offset:1px;}
.pfRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px;}
.avRow{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.avFace{flex:0 0 auto; width:56px; height:56px; border-radius:50%;
  background:#121845 center/cover no-repeat; border:2px solid var(--cyan,#4cdcff);
  display:grid; place-items:center; font-family:"Orbitron",sans-serif; font-size:20px;
  color:var(--cyan,#4cdcff);}
.avPick{display:inline-block;}
.avRow [hidden]{display:none;}
.pfNote{margin:0; font-size:12.5px; color:var(--ink-2,#b8d5ff);}
.pfNote.bad{color:#ffb3b3;}
.credBtn{font-family:"Orbitron",sans-serif; font-size:10px; letter-spacing:.14em;
  border:1px solid var(--line,rgba(76,220,255,.35)); color:var(--ink,#e0f4ff);
  border-radius:999px; padding:9px 15px; background:rgba(10,14,39,.6);
  text-decoration:none; white-space:nowrap; cursor:pointer; backdrop-filter:blur(4px);}
.credBtn:hover,.credBtn.hot{border-color:var(--cyan,#4cdcff); color:var(--cyan,#4cdcff);}
.credBtn[disabled]{opacity:.55; cursor:default;}