/* I2CAN placement portal.
   Uses the theme's tokens so the portal is part of the site rather than a
   widget bolted onto it. Nothing here redefines a colour or a typeface. */

.i2p{--i2p-gap:clamp(16px,1.8vw,26px)}

.i2p__crumb{
  font-size:var(--fs-2xs);color:var(--muted);letter-spacing:.04em;
  margin:0 0 clamp(24px,3vw,40px);
}
.i2p__crumb a{color:var(--blue-600);text-decoration:none}
.i2p__crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.i2p__crumb span{margin:0 6px;opacity:.5}
.i2p__crumb b{color:var(--ink)}

.i2p__boot{
  padding:clamp(40px,6vw,80px) 0;text-align:center;
  color:var(--muted);font-size:var(--fs-sm);
}

/* ---- toast ---- */
.i2p__toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,140%);
  background:var(--navy-900);color:#fff;padding:14px 22px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);box-shadow:var(--sh-3);z-index:60;max-width:min(560px,90vw);
  transition:transform .4s var(--ease);
}
.i2p__toast.is-on{transform:translate(-50%,0)}
.i2p__toast.is-bad{background:var(--red-600)}

/* ---- cards ---- */
.i2p-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,36px);box-shadow:var(--sh-1);
}
.i2p-lead{font-size:var(--fs-sm);line-height:1.8;color:var(--body);margin:0 0 22px;max-width:70ch}
.i2p-sub{
  font-size:var(--fs-h3);color:var(--ink);letter-spacing:var(--tr-tight);
  margin:26px 0 14px;
}

/* ---- doors ---- */
.i2p-doors{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--i2p-gap);
  margin-top:clamp(24px,3vw,40px);
}
.i2p-door{
  display:flex;flex-direction:column;gap:10px;text-align:left;cursor:pointer;
  padding:clamp(26px,2.8vw,40px);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);font:inherit;color:inherit;position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.i2p-door::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--blue-600),var(--red-600));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.i2p-door:hover,.i2p-door:focus-visible{
  transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--blue-200);
}
.i2p-door:hover::before,.i2p-door:focus-visible::before{transform:scaleX(1)}
.i2p-door.is-locked{opacity:.55;cursor:not-allowed}
.i2p-door h3{font-size:var(--fs-h3);letter-spacing:var(--tr-tight);color:var(--ink);margin:6px 0 0}
.i2p-door p{font-size:var(--fs-sm);line-height:1.75;color:var(--body);margin:0}
.i2p-door__go{
  margin-top:auto;padding-top:16px;font-size:var(--fs-xs);font-weight:500;color:var(--blue-600);
}

/* The dark door. These must sit after the light-door rules above:
   `.i2p-door--alt h3` and `.i2p-door h3` carry the same specificity, so
   whichever is written last wins. Getting that backwards is what put dark
   navy text on a dark navy card. */
.i2p-door--alt{background:var(--navy-900);border-color:var(--navy-900)}
.i2p-door--alt .ix-kicker{color:var(--blue-200)}
.i2p-door--alt h3{color:#fff}
.i2p-door--alt p{color:rgba(255,255,255,.78)}
.i2p-door--alt .i2p-door__go{color:#fff}
.i2p-door--alt:hover,.i2p-door--alt:focus-visible{border-color:var(--blue-500)}

/* ---- stepper ---- */
.i2p-steps{
  list-style:none;display:flex;flex-wrap:wrap;gap:8px 28px;margin:0 0 clamp(22px,2.4vw,32px);padding:0;
}
.i2p-steps li{
  font-size:var(--fs-2xs);letter-spacing:var(--tr-caps);text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:8px;
}
.i2p-steps li span{color:var(--line-2);font-weight:600}
.i2p-steps li.now{color:var(--ink)}
.i2p-steps li.now span{color:var(--red-600)}
.i2p-steps li.done{color:var(--blue-600)}
.i2p-steps li.done span{color:var(--blue-600)}

/* ---- fields ---- */
.i2p-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.i2p-narrow{max-width:320px}
.i2p-field{display:block;margin-bottom:16px}
.i2p-field__label{
  display:block;font-size:var(--fs-2xs);letter-spacing:var(--tr-caps);
  text-transform:uppercase;color:var(--muted);margin-bottom:7px;
}
.i2p-field__label b{color:var(--red-600)}
.i2p-field input,.i2p-field select,.i2p-field textarea{
  width:100%;font:inherit;font-size:var(--fs-sm);color:var(--ink);
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:12px 14px;transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.i2p-field textarea{resize:vertical;min-height:84px;line-height:1.7}
.i2p-field input:focus,.i2p-field select:focus,.i2p-field textarea:focus{
  outline:none;border-color:var(--blue-600);box-shadow:0 0 0 3px var(--blue-100);
}
.i2p-field__err{display:block;font-size:var(--fs-2xs);color:var(--red-600);margin-top:5px;min-height:1em}
.i2p-field.is-bad input,.i2p-field.is-bad select,.i2p-field.is-bad textarea{border-color:var(--red-600)}

/* ---- buttons ---- */
.i2p-btnrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;align-items:center}
.i2p-btn{
  font:inherit;font-size:13px;font-weight:500;cursor:pointer;
  padding:13px 26px;border-radius:var(--r-pill);border:1px solid transparent;
  background:var(--blue-050);color:var(--navy-900);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.i2p-btn--primary{background:var(--red-600);color:#fff}
.i2p-btn--primary:hover{background:var(--red-700)}
.i2p-btn--ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.i2p-btn--ghost:hover{border-color:var(--navy-900)}
.i2p-btn--chip{padding:9px 18px;font-size:var(--fs-xs);background:var(--blue-050);border-color:var(--blue-100)}
.i2p-btn--chip:hover{background:var(--blue-100)}
.i2p-btn--sm{padding:10px 20px;font-size:var(--fs-xs)}
.i2p-btn--lock{background:var(--line);color:var(--muted);cursor:not-allowed}
.i2p-btn[disabled]{opacity:.6;cursor:wait}

/* ---- meter ---- */
.i2p-meter{margin:0 0 20px}
.i2p-meter__bar{height:6px;background:var(--line);border-radius:var(--r-pill);overflow:hidden}
.i2p-meter__bar i{display:block;height:100%;background:var(--blue-600);transition:width .5s var(--ease)}
.i2p-meter span{display:block;font-size:var(--fs-xs);color:var(--body);margin-top:9px}

/* ---- notes ---- */
.i2p-note{
  font-size:var(--fs-xs);color:var(--body);line-height:1.7;
  padding:13px 16px;background:var(--blue-050);border-radius:var(--r-sm);margin:14px 0;
}
.i2p-note--warn{background:var(--red-050);color:var(--ink-2)}
.i2p-note a{color:var(--blue-600);font-weight:500}

.i2p-status{
  font-size:var(--fs-xs);padding:12px 16px;border-radius:var(--r-sm);
  background:var(--blue-050);color:var(--ink-2);margin:16px 0;
}
.i2p-status--approved{background:#EAF6EF;color:#1B7F4B}
.i2p-status--rejected{background:var(--red-050);color:var(--red-700)}

/* ---- jobs ---- */
.i2p-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.i2p-jobs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--i2p-gap)}
.i2p-job{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.2vw,30px);box-shadow:var(--sh-1);
  display:flex;flex-direction:column;gap:9px;
}
.i2p-job h3{font-size:var(--fs-h3);letter-spacing:var(--tr-tight);color:var(--ink);margin:4px 0 0}
.i2p-job__meta{font-size:var(--fs-xs);color:var(--muted);margin:0;line-height:1.7}
.i2p-job .i2p-btn{align-self:flex-start;margin-top:8px}
.i2p-empty{
  font-size:var(--fs-sm);color:var(--muted);line-height:1.8;
  padding:30px;border:1px dashed var(--line-2);border-radius:var(--r-md);text-align:center;
}
.i2p-empty a{color:var(--blue-600)}

/* ---- applicants ---- */
.i2p-applicants{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--i2p-gap)}
.i2p-applicant h3{font-size:var(--fs-h3);color:var(--ink);margin:0 0 6px;letter-spacing:var(--tr-tight)}
.i2p-badge{
  display:inline-block;font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;
  background:var(--blue-050);color:var(--blue-600);border:1px solid var(--blue-100);
  border-radius:var(--r-pill);padding:3px 10px;vertical-align:middle;margin-left:6px;font-weight:600;
}
.i2p-answers{margin:12px 0 0;padding:0 0 0 18px}
.i2p-answers li{font-size:var(--fs-xs);color:var(--body);line-height:1.7;margin-bottom:5px}
.i2p-ref{font-size:var(--fs-2xs);color:var(--muted);margin:12px 0 0}

/* ---- table ---- */
.i2p-table{width:100%;border-collapse:collapse;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.i2p-table th,.i2p-table td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.i2p-table thead th{
  background:var(--navy-900);color:#fff;font-weight:500;
  font-size:var(--fs-2xs);letter-spacing:var(--tr-caps);text-transform:uppercase;
}
.i2p-table tbody tr:last-child td{border-bottom:0}
.i2p-table code{font-size:var(--fs-xs);color:var(--blue-600)}

.i2p-choice{margin-bottom:18px}

/* ---- responsive ---- */
@media (max-width:920px){
  .i2p-doors,.i2p-jobs,.i2p-applicants{grid-template-columns:1fr}
}
@media (max-width:620px){
  .i2p-grid2{grid-template-columns:1fr}
  .i2p-btnrow .i2p-btn{flex:1 1 auto}
  .i2p-steps{gap:6px 16px}
}