/* ==========================================================================
   admin.css: the access requests page, facilitators only
   --------------------------------------------------------------------------
   The look is compete.html's facilitator block, on purpose: the same person
   uses both, a few taps apart. The sign-in card, the field, the message
   strip, the pill tabs and the board table are the same rules with the same
   values, so a change to one should be made to the other. The request card
   is the .adm panel with its Dark Red top edge. Palette tokens only, motion
   tokens only, nothing hidden without JavaScript except the panels the
   script owns, and every control is 44px to a thumb.
   ========================================================================== */

.hero3{padding:34px 0 30px}
.hero3 .eyebrow{margin-bottom:8px}
.hero3 h1{font-size:31px}
.hero3 p{font-size:15px;max-width:640px;margin-top:8px}

.admpage{padding:0 24px 60px}

/* ---- the check and the refusal ---------------------------------------- */
.signcard{max-width:520px;margin:34px auto;background:var(--surface-card);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:28px;border-top:4px solid var(--red)}
.signcard h2{font-size:22px;margin-top:6px}
.signcard p{margin-top:9px}
.signcard .btn{margin-top:18px;display:flex;align-items:center;justify-content:center;min-height:44px;
  text-decoration:none}
.btn.wide{width:100%;padding:13px;font-size:15px}

/* ---- fields ----------------------------------------------------------- */
.fld{margin-top:16px}
.fld label{display:block;font-size:12.5px;font-weight:700;color:var(--g800);margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;
  padding:11px 14px;min-height:46px;font:500 15px var(--font);color:var(--ink-strong);
  background:var(--surface-input)}
.fld textarea{min-height:76px;resize:vertical;line-height:1.45}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--red);
  background:var(--surface-card)}
.search{max-width:460px}

.say{margin-top:14px;padding:12px 14px;border-radius:10px;font-size:13.4px;display:none}
.say.on{display:block}
.say.ok{background:var(--ok-bg);color:var(--ok)}
.say.no{background:var(--bad-bg);color:var(--warn-ink);border-inline-start:3px solid var(--bad)}
.say.info{background:var(--warn-bg);color:var(--warn-ink)}

.caution{margin-top:22px;padding:12px 14px;border-radius:10px;background:var(--warn-bg);
  color:var(--warn-ink);font-size:13.4px;max-width:none}

.lnk{background:none;border:0;color:var(--g800);font:inherit;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;padding:8px 2px;min-height:34px;display:inline-flex;
  align-items:center}
.lnk:hover{color:var(--red)}
.who{margin-top:28px;font-size:12.8px}

/* ---- tabs ------------------------------------------------------------- */
.tabs2{display:flex;gap:6px;flex-wrap:wrap;margin:22px 0 0}
.tab2{background:var(--surface-input);border:0;border-radius:99px;padding:9px 16px;font:700 13px var(--font);
  color:var(--ink);cursor:pointer;min-height:44px}
.tab2.on{background:var(--tint);color:var(--burg);box-shadow:inset 0 0 0 1.5px var(--red)}
.tab2 .cnt{font-weight:800;color:var(--ink-muted);margin-inline-start:2px}
.tab2.on .cnt{color:var(--red)}

/* ---- a request -------------------------------------------------------- */
.rq{background:var(--surface-card);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 22px;
  margin-top:16px;border-top:4px solid var(--burg)}
.rqhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
/* The status pill keeps its own width: in a row with a long address it was
   squeezed and cut at the card edge on a phone. */
.rqhead .pill{flex:0 0 auto}
.rqhead h3{font-size:18px;color:var(--g900);overflow-wrap:anywhere}
.rqmail{font-size:13.4px;color:var(--g600);overflow-wrap:anywhere}
.rqfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 18px;margin-top:12px}
.rqfacts div{min-width:0}
.rqfacts b{display:block;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-muted)}
.rqfacts span{display:block;font-size:14px;color:var(--g800);overflow-wrap:anywhere;margin-top:2px}
.rqnote{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--surface-input);
  font-size:13.6px;color:var(--g800);overflow-wrap:anywhere;white-space:pre-wrap}
.rqact{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px;border-top:1px solid var(--g300);
  padding-top:14px}
.rqact .fld{margin-top:0}
/* Each side is a column with its button at the foot, so Approve and Reject
   line up although the reason box is taller than the cohort picker. */
.rqact > div{display:flex;flex-direction:column}
.rqact > div > .fld{flex:1 0 auto}
.rqact .btn{margin-top:10px;min-height:44px}
.btn.no{background:var(--burg)}
.btn.no:hover:not(:disabled){background:var(--burg);box-shadow:inset 0 0 0 99px rgba(0,0,0,.14)}

.pill{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  background:var(--surface-input);color:var(--ink-muted);border-radius:99px;padding:3px 9px;white-space:nowrap}
.pill.done{background:var(--ok-bg);color:var(--ok)}
/* Not .live: depth.css draws every span.live as an 8px pulsing dot, and
   "Pending" collapsed into one. */
.pill.wait{background:var(--tint);color:var(--burg)}

.empty{margin-top:18px}
.swipe{display:none;margin-top:14px;font-size:12.8px}

/* ---- lists ------------------------------------------------------------ */
.card.list{margin-top:16px}
table.board{width:100%;border-collapse:collapse;font-size:14px}
table.board th{text-align:start;font-size:11px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--g600);padding:8px 10px;border-bottom:2px solid var(--g300)}
table.board td{padding:11px 10px;border-bottom:1px solid var(--g300);color:var(--g800);vertical-align:top;
  overflow-wrap:anywhere}
table.board td.why{max-width:320px}
/* A date, a time and an address each stay on one line. */
.nw,table.board td bdi{white-space:nowrap;overflow-wrap:normal}

@media(max-width:640px){
  .hero3 h1{font-size:25px}
  .admpage{padding:0 16px 48px}
  .rq{padding:18px 16px}
  .rqact{grid-template-columns:1fr}
  /* Same as compete.html: a table of addresses scrolls inside its own box on
     a phone, so the page never scrolls sideways. */
  table.board{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .swipe{display:block}
  table.board td,table.board th{white-space:normal;min-width:96px}
}