/* ==========================================================================
   JCI NomCom — frontend scoring form
   v1.11.3. Drop-in replacement for assets/front.css.

   Every class name from the previous stylesheet is preserved, so no changes to
   class-jci-frontend.php. Scoped to .jci-front, which wrap() already emits.

   Change of intent worth naming: the previous file was deliberately neutral so
   it inherited the theme. This one asserts its own identity instead, so a
   commissioner opening a private link sees an instrument of the Commission
   rather than a form dropped into jcilegazpi.org. That is the point, but it is
   a reversal of the earlier decision.

   Typefaces are self-hosted from assets/fonts/. No third-party font request
   is made, so nothing leaks a candidate code via a Referer header.
   ========================================================================== */
/* ---------------------------------------------------------------------------
   Self-hosted typefaces. Nothing is requested from a third party, so no
   Referer carrying a candidate code ever leaves this server.

   Archivo and Source Serif 4 are variable fonts: one file covers the whole
   weight axis. Latin subset only, which covers every character the views
   render, including N-tilde and the accented Latin-1 letters in Filipino
   names. The greater-or-equal sign and the filled and empty squares in the
   Form 7 result list are not in any of these families and fall back to a
   system font, exactly as they did when the fonts came from Google.

   All three are SIL Open Font License. The licences travel with the files in
   assets/fonts/, as the OFL requires when redistributing.

   This block is duplicated verbatim at the top of front.css so neither file
   needs an @import. Edit both, or neither.
   --------------------------------------------------------------------------- */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/archivo-variable-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Source Serif 4';
  font-style:normal;
  font-weight:200 900;
  font-display:swap;
  src:url('fonts/source-serif-4-variable-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Source Serif 4';
  font-style:italic;
  font-weight:200 900;
  font-display:swap;
  src:url('fonts/source-serif-4-variable-latin-italic.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-600.woff2') format('woff2');
}


.jci-front{
  --nc-ink:#10192B; --nc-navy:#16325C; --nc-blue:#0B5FA5;
  --nc-paper:#F5F7FA; --nc-rule:#D3D9E3; --nc-seal:#8A2027; --nc-amber:#8A6410;
  --nc-mute:#5A6A82;
  --nc-grotesk:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --nc-serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --nc-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  max-width:780px;margin:0 auto;padding:8px 0 64px;
  font-family:var(--nc-grotesk);font-size:15px;line-height:1.55;
  color:var(--nc-ink);
  -webkit-font-smoothing:antialiased;
}
.jci-front *{box-sizing:border-box}
.jci-front *:focus-visible{outline:2px solid var(--nc-blue);outline-offset:2px}

/* ------------------------------ headings -------------------------------- */
.jci-front .jci-f-h{
  margin:0 0 6px;font-family:var(--nc-grotesk);font-size:26px;font-weight:700;
  letter-spacing:-.025em;line-height:1.15;color:var(--nc-ink)}
/* the eyebrow above the title, since the Commission is the author here */
.jci-front .jci-f-h::before{
  content:"JCI Philippines \00b7  National Nomination Committee";
  display:block;font-family:var(--nc-mono);font-size:10px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--nc-blue);
  margin-bottom:9px}
.jci-front .jci-f-h4{
  margin:30px 0 8px;font-family:var(--nc-grotesk);font-size:15px;font-weight:600;
  letter-spacing:-.012em;color:var(--nc-ink)}
.jci-front .jci-f-note{
  margin:0 0 18px;font-size:13.5px;line-height:1.6;color:var(--nc-mute);
  opacity:1;max-width:62ch}
.jci-front .jci-f-muted{
  font-family:var(--nc-mono);font-size:11px;letter-spacing:.02em;
  color:var(--nc-mute);opacity:1;font-weight:400}
.jci-front .jci-f-head{margin:0 0 20px}

/* ---------------------- callouts, results, errors ----------------------- */
.jci-front .jci-f-callout,
.jci-front .jci-f-ok,
.jci-front .jci-f-err,
.jci-front .jci-f-warn{
  margin:0 0 18px;padding:12px 15px;border-left:2px solid;border-radius:0 3px 3px 0;
  font-size:13px;line-height:1.6}
.jci-front .jci-f-callout{
  border-left-color:var(--nc-navy);background:#EFF3F9;color:#2A3B57}
.jci-front .jci-f-ok{
  border-left-color:#0C5A34;background:#EDF7F1;color:#0C5A34}
.jci-front .jci-f-err{
  border-left-color:var(--nc-seal);background:#FBF0F1;color:var(--nc-seal)}
.jci-front .jci-f-warn{
  border-left-color:var(--nc-amber);background:#FCF6E9;color:#5A5238}
.jci-front .jci-f-callout strong{color:var(--nc-navy)}
.jci-front .jci-f-warn strong{color:var(--nc-amber)}
.jci-front .jci-f-err strong{color:var(--nc-seal)}
.jci-front .jci-f-ok strong{color:#0C5A34}

/* ------------------------------- picker --------------------------------- */
.jci-front .jci-f-picker{
  margin:0 0 24px;padding:14px 16px;background:#fff;
  border:1px solid var(--nc-rule);border-radius:4px;
  display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}
.jci-front .jci-f-picker label{
  display:block;font-family:var(--nc-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--nc-mute)}
.jci-front .jci-f-picker select{
  display:block;margin-top:6px;padding:8px 10px;min-width:220px;
  font-family:var(--nc-grotesk);font-size:13.5px;color:var(--nc-ink);
  border:1px solid var(--nc-rule);border-radius:3px;background:#fff;line-height:1.4}
.jci-front .jci-f-picker select:focus{border-color:var(--nc-blue);box-shadow:0 0 0 1px var(--nc-blue)}

/* ============================ the rubric ================================
   One criterion per row. The criterion is prose, so it stays serif-adjacent
   in its description; the score is evidence, so it is mono and tabular.
   ======================================================================== */
.jci-front .jci-f-rubric{
  width:100%;border-collapse:separate;border-spacing:0;margin:0 0 20px;
  background:#fff;border:1px solid var(--nc-rule);border-radius:4px;overflow:hidden}
.jci-front .jci-f-rubric th,
.jci-front .jci-f-rubric td{
  border:0;border-bottom:1px solid #EAEEF4;padding:12px 14px;
  text-align:left;font-size:13.5px;vertical-align:middle;line-height:1.45}
.jci-front .jci-f-rubric thead th{
  border-bottom:1px solid var(--nc-rule);
  font-family:var(--nc-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--nc-mute)}
.jci-front .jci-f-rubric tbody tr:last-child th,
.jci-front .jci-f-rubric tbody tr:last-child td,
.jci-front .jci-f-rubric tr:last-child td{border-bottom:0}
.jci-front .jci-f-num{
  text-align:right;white-space:nowrap;
  font-family:var(--nc-mono);font-variant-numeric:tabular-nums}
.jci-front .jci-f-rubric td.jci-f-num{color:var(--nc-mute);font-size:12px}
.jci-front .jci-f-rubric input[type=number]{
  width:88px;padding:9px 10px;text-align:right;
  font-family:var(--nc-mono);font-size:15px;font-variant-numeric:tabular-nums;
  color:var(--nc-ink);border:1px solid var(--nc-rule);border-radius:3px;background:#fff}
.jci-front .jci-f-rubric input[type=number]:focus{
  border-color:var(--nc-blue);box-shadow:0 0 0 1px var(--nc-blue)}
/* the server refuses an over-max criterion; say so at the field too */
.jci-front .jci-f-rubric input[type=number]:out-of-range{
  border-color:var(--nc-seal);background:#FBF0F1;color:var(--nc-seal)}
.jci-front .jci-f-crit-desc{
  margin-top:5px;font-family:var(--nc-serif);font-size:13px;font-style:italic;
  line-height:1.5;color:var(--nc-mute);opacity:1;font-weight:400;max-width:52em}

/* ------------------------- text and PIN fields -------------------------- */
.jci-front .jci-f-text{
  width:100%;padding:10px 12px;font-family:var(--nc-serif);font-size:14px;
  line-height:1.6;color:var(--nc-ink);border:1px solid var(--nc-rule);
  border-radius:3px;background:#fff;resize:vertical}
.jci-front .jci-f-text:focus{border-color:var(--nc-blue);box-shadow:0 0 0 1px var(--nc-blue)}
.jci-front .jci-f-pin{
  padding:12px 14px;font-family:var(--nc-mono);font-size:20px;font-weight:500;
  letter-spacing:.3em;width:190px;text-align:center;color:var(--nc-ink);
  border:1px solid var(--nc-rule);border-radius:3px;background:#fff}
.jci-front .jci-f-pin:focus{border-color:var(--nc-blue);box-shadow:0 0 0 1px var(--nc-blue)}

/* ------------------------------ buttons --------------------------------- */
.jci-front .jci-f-btn{
  display:inline-block;padding:11px 20px;background:var(--nc-navy);color:#fff;
  border:0;border-radius:3px;font-family:var(--nc-grotesk);font-size:13.5px;
  font-weight:600;letter-spacing:-.005em;cursor:pointer;line-height:1.5;
  text-decoration:none}
.jci-front .jci-f-btn:hover,
.jci-front .jci-f-btn:focus{background:var(--nc-blue);color:#fff}
.jci-front .jci-f-btn:disabled{background:#AEBACB;cursor:not-allowed}
.jci-front .jci-f-btn-alt{
  background:#fff;color:var(--nc-navy);border:1px solid var(--nc-rule);
  padding:10px 17px;font-weight:500}
.jci-front .jci-f-btn-alt:hover,
.jci-front .jci-f-btn-alt:focus{background:#EFF3F9;color:var(--nc-blue);border-color:#B6C4DA}

/* --------------------------- the form itself ---------------------------- */
.jci-front .jci-f-form{margin:0}

@media (max-width:600px){
  .jci-front{font-size:14.5px;padding:4px 0 48px}
  .jci-front .jci-f-h{font-size:22px}
  .jci-front .jci-f-picker select{min-width:0;width:100%}
  .jci-front .jci-f-picker{gap:12px}
  /* the Max column is reference only; the maximum is enforced on the input */
  .jci-front .jci-f-rubric th:nth-child(2),
  .jci-front .jci-f-rubric td:nth-child(2){display:none}
  .jci-front .jci-f-rubric th,
  .jci-front .jci-f-rubric td{padding:11px 12px}
  .jci-front .jci-f-rubric input[type=number]{width:74px}
}

@media(prefers-reduced-motion:reduce){.jci-front *{transition:none!important;animation:none!important}}

/* ==========================================================================
   The candidate examination, rendered by JCI_NomCom_App on the frontend.

   These rules duplicate the .jci-exam block in admin.css because the frontend
   never loads admin.css. Same class names, so the ported view needed no markup
   changes; the differences are that there is no admin bar to offset the sticky
   timer against, and the buttons are .jci-f-btn rather than wp-admin's.

   The paper is set in serif because it is a paper. The timer is mono because
   it is a fact.
   ========================================================================== */
.jci-front .jci-timer{
  position:sticky;top:0;z-index:30;display:inline-block;
  padding:10px 18px;margin:14px 0 4px;background:var(--nc-ink);color:#fff;
  border-radius:4px;font-family:var(--nc-mono);font-weight:600;font-size:24px;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  box-shadow:0 2px 8px rgba(16,25,43,.18)}
.jci-front .jci-timer.jci-warn{background:var(--nc-amber)}
.jci-front .jci-timer.jci-crit{background:var(--nc-seal)}
.jci-front .jci-saveline{
  margin:6px 0 22px;font-family:var(--nc-mono);font-size:10.5px;
  letter-spacing:.05em;color:#0C5A34}

.jci-front .jci-brief{margin:10px 0 0 18px;padding:0;font-size:13.5px;line-height:1.6}
.jci-front .jci-brief li{margin:6px 0}

.jci-front .jci-topic{
  margin:32px 0 4px;padding-bottom:9px;border-bottom:1px solid var(--nc-rule);
  font-family:var(--nc-mono);font-size:10px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--nc-blue)}
.jci-front .jci-q{
  background:#fff;border:1px solid var(--nc-rule);border-radius:4px;
  padding:18px 20px;margin:0 0 10px}
.jci-front .jci-q-stem{
  margin:0 0 12px;font-family:var(--nc-serif);font-weight:400;font-size:16px;
  line-height:1.55;color:var(--nc-ink)}
.jci-front .jci-q-n{
  font-family:var(--nc-mono);font-size:12px;color:#7A8AA3;margin-right:9px;font-weight:400}
.jci-front .jci-opt{
  display:block;padding:9px 11px;font-family:var(--nc-serif);font-size:15px;
  line-height:1.5;cursor:pointer;border-radius:3px}
.jci-front .jci-opt:hover{background:#EFF3F9}
.jci-front .jci-opt:has(input:checked){background:#EFF3F9;box-shadow:inset 0 0 0 1px #B6C4DA}
.jci-front .jci-opt input[type=radio]{accent-color:var(--nc-blue);margin-right:2px}
.jci-front .jci-opt-l{
  display:inline-block;width:24px;font-family:var(--nc-mono);font-size:12px;
  color:var(--nc-navy);font-weight:500}
.jci-front .jci-opt-t{font-family:var(--nc-serif);font-size:15px;line-height:1.5}
.jci-front .jci-submit-row{margin:32px 0 20px}

/* the login form WordPress renders for wp_login_form() */
.jci-front #loginform p{margin:0 0 14px}
.jci-front #loginform label{
  display:block;font-family:var(--nc-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--nc-mute);margin-bottom:6px}
.jci-front #loginform input[type=text],
.jci-front #loginform input[type=password]{
  width:100%;max-width:340px;padding:9px 11px;font-family:var(--nc-grotesk);
  font-size:14px;color:var(--nc-ink);border:1px solid var(--nc-rule);
  border-radius:3px;background:#fff}
.jci-front #loginform input:focus{border-color:var(--nc-blue);box-shadow:0 0 0 1px var(--nc-blue)}
.jci-front #loginform .login-remember label{
  font-family:var(--nc-grotesk);font-size:13px;letter-spacing:0;text-transform:none;
  color:var(--nc-ink);display:flex;align-items:center;gap:7px}
.jci-front #loginform input[type=submit]{
  padding:11px 20px;background:var(--nc-navy);color:#fff;border:0;border-radius:3px;
  font-family:var(--nc-grotesk);font-size:13.5px;font-weight:600;cursor:pointer}
.jci-front #loginform input[type=submit]:hover{background:var(--nc-blue)}

@media (max-width:600px){
  .jci-front .jci-timer{font-size:21px;padding:9px 14px}
  .jci-front .jci-q{padding:15px 16px}
  .jci-front .jci-opt{padding:10px 8px}
}