@charset "UTF-8";

/* ============================================================
   Portal surfaces.

   Tokens come from the site's style.css, which is loaded first — this file
   defines no colours of its own beyond the two navy washes the aside needs.
   Buttons are named .pbtn rather than .btn on purpose: the site's .btn
   variants are scattered across three stylesheets and have lost specificity
   fights before (see v2-changelog trap 1). A separate namespace keeps the
   portal out of that argument entirely.
   ============================================================ */

.p-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
}
.p-skip:focus { left: 0; }

/* ── Shared form furniture ───────────────────────────────── */

.p-field { margin-bottom: 18px; }

.p-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--mute);
  margin-bottom: 7px;
  letter-spacing: .01em;
}

.p-input,
.p-select,
.p-textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid #D4DBE5;
  border-radius: 10px;
  padding: 13px 15px;
  transition: border-color .15s, box-shadow .15s;
}
.p-textarea { min-height: 110px; resize: vertical; }

.p-input:focus,
.p-select:focus,
.p-textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30, 94, 255, .14);
}

.p-input[aria-invalid="true"] { border-color: #B42318; }

/* The eye toggle sits inside the field, so the input needs the padding. */
.p-passwrap { position: relative; }
.p-passwrap .p-input { padding-right: 46px; }
.p-passtoggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--mute);
  cursor: pointer;
  border-radius: 8px;
}
.p-passtoggle:hover { color: var(--ink); }
.p-passtoggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.p-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--body);
  line-height: 1.5;
  cursor: pointer;
}
.p-check input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--blue);
  flex: none;
}

.p-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 520px) { .p-row { grid-template-columns: 1fr; gap: 0; } }

.p-hint { font-size: 12.5px; color: var(--mute); margin-top: 6px; }

/* Required marker. Colour alone would not carry it, so the label text keeps
   the asterisk as a real character rather than a ::before decoration. */
.p-req { color: #B42318; font-weight: 700; }

/* Step badge on the intake form. */
.p-step-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 650;
  color: var(--blue);
  margin: 0 0 12px;
}
.p-step-badge span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  flex: none;
}

/* A dependent select before its parent has been chosen. */
.p-select[aria-disabled="true"] {
  background: var(--void);
  color: var(--mute);
  cursor: not-allowed;
}

/* ── Buttons ─────────────────────────────────────────────── */

.pbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 22px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.pbtn--full { width: 100%; }
.pbtn--primary { background: var(--navy); color: #fff; }
.pbtn--primary:hover { background: var(--navy-lo); }
.pbtn--ghost { background: var(--panel); color: var(--ink); border-color: #D4DBE5; }
.pbtn--ghost:hover { border-color: var(--ink); }
.pbtn--danger { background: #fff; color: #B42318; border-color: #F3C3BE; }
.pbtn--danger:hover { background: #FEF3F2; }
.pbtn--sm { padding: 9px 14px; font-size: 13.5px; }
.pbtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pbtn[disabled] { opacity: .55; cursor: not-allowed; }

.p-linkrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 14px;
  margin-bottom: 22px;
}
.p-link { color: var(--blue); text-decoration: none; font-weight: 500; }
.p-link:hover { text-decoration: underline; }

.p-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  color: var(--mute);
  font-size: 13px;
}
.p-or::before,
.p-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #DFE5EE;
}

/* ── Flash messages ──────────────────────────────────────── */

.p-flash {
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 18px;
  border: 1px solid;
}
.p-flash--error   { background: #FEF3F2; border-color: #F3C3BE; color: #912018; }
.p-flash--success { background: #ECFDF3; border-color: #A9E5C3; color: #0A5C36; }
.p-flash--info    { background: #EFF4FF; border-color: #C3D4FB; color: #17408F; }

/* ============================================================
   Auth screens
   ============================================================ */

body.p-auth { background: var(--void); }

.p-auth__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100dvh;
}
.p-auth__grid--solo { grid-template-columns: 1fr; }

@media (max-width: 900px) {
  .p-auth__grid { grid-template-columns: 1fr; }
  .p-auth__aside { display: none; }
}

.p-auth__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.p-auth__inner { width: 100%; max-width: 420px; }

.p-auth__brand {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 44px;
  color: var(--navy);
  line-height: 0;
}
.p-auth__grid--centred .p-auth__brand { color: #f2efe8; }

/* The EAC lockup and its square monogram, inlined from assets/brand by
   brand_logo() / brand_monogram() in includes/layout.php (2026-09-15). The
   logo is one colour through currentColor; never stretch it. */
.brand-logo { display: block; height: 28px; width: auto; aspect-ratio: 253.58 / 34; }
.brand-mono { display: block; width: 32px; height: 32px; }
.p-auth__brand .brand-logo { height: 30px; }
.p-side__brand .brand-logo { height: 24px; margin-bottom: 8px; color: #f2efe8; }

.p-auth__title {
  font-size: clamp(30px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 10px;
  font-weight: 300;
}
.p-auth__sub {
  color: var(--body);
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0 0 28px;
}

.p-auth__foot {
  margin-top: 34px;
  font-size: 13px;
  color: var(--mute);
  display: flex;
  gap: 8px;
  align-items: center;
}
.p-auth__foot a { color: var(--mute); text-decoration: none; }
.p-auth__foot a:hover { color: var(--ink); text-decoration: underline; }

.p-auth__switch {
  margin-top: 26px;
  text-align: center;
  font-size: 14.5px;
  color: var(--body);
}

/* The aside carries the positioning claim, not a testimonial: no client
   quotes have been collected, and inventing them on the one page whose job
   is trust would be exactly the wrong trade. */
.p-auth__aside {
  background: var(--navy);
  background-image: linear-gradient(160deg, #0B1B2E 0%, #17324F 100%);
  display: flex;
  align-items: center;
  padding: 48px;
  position: relative;
  overflow: hidden;
}
.p-auth__aside::after {
  content: "";
  position: absolute;
  inset: auto -20% -35% auto;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30,94,255,.28), transparent 70%);
}
.p-auth__asideInner { position: relative; z-index: 1; max-width: 440px; }


.p-auth__eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin: 0 0 18px;
}
.p-auth__asideTitle {
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: #fff;
  font-weight: 700;
  margin: 0 0 16px;
}
.p-auth__asideBody {
  color: rgba(255,255,255,.72);
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 26px;
}
.p-auth__points { list-style: none; margin: 0; padding: 0; }
.p-auth__points li {
  color: rgba(255,255,255,.9);
  font-size: 14.5px;
  padding: 11px 0 11px 26px;
  border-top: 1px solid rgba(255,255,255,.12);
  position: relative;
}
.p-auth__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6E9BFF;
}

/* Google button keeps the mark at its real colours — a recoloured Google
   logo is a brand-guideline violation, not a styling choice. */
.p-google svg { width: 19px; height: 19px; flex: none; }

/* ── TOTP ────────────────────────────────────────────────── */

.p-code {
  font-family: var(--font-ident);
  font-size: 26px;
  letter-spacing: .38em;
  text-align: center;
  padding: 15px;
}
.p-qr {
  display: grid;
  place-items: center;
  padding: 16px;
  background: #fff;
  border: 1px solid #E3E8EF;
  border-radius: 12px;
  margin-bottom: 18px;
}
.p-qr svg { width: 200px; height: 200px; display: block; }

.p-secret {
  font-family: var(--font-ident);
  font-size: 15px;
  letter-spacing: .12em;
  word-break: break-all;
  background: var(--void);
  border: 1px solid #E3E8EF;
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--ink);
}

.p-recovery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  font-family: var(--font-ident);
  font-size: 15px;
  background: var(--void);
  border: 1px solid #E3E8EF;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
}

/* ============================================================
   App shell
   ============================================================ */

body.p-app { background: var(--void); }

.p-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100dvh; }

.p-side {
  background: var(--navy);
  display: flex;
  flex-direction: column;
  padding: 26px 20px;
  position: sticky;
  top: 0;
  height: 100dvh;
}

.p-side__brand {
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 15px;
  margin-bottom: 30px;
  display: block;
}
.p-side__brand span { font-weight: 400; }
.p-side__brand small {
  display: block;
  font-weight: 500;
  letter-spacing: .02em;
  font-size: 12px;
  color: rgba(255,255,255,.5);
  margin-top: 5px;
}

/* Identity card, so the sidebar says whose portal this is. */
.p-side__card {
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 11px 12px;
  margin-bottom: 22px;
  min-width: 0;
}
.p-side__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  flex: none;
}
.p-side__who { min-width: 0; }
.p-side__who strong {
  display: block;
  color: #fff;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.p-side__who small {
  display: block;
  color: rgba(255,255,255,.5);
  font-size: 11.5px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p-side__nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }

.p-side__group {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  margin: 16px 0 6px;
  padding: 0 13px;
}
.p-side__group:first-child { margin-top: 0; }

.p-side__link {
  display: flex;
  align-items: center;
  gap: 11px;
  color: rgba(255,255,255,.74);
  text-decoration: none;
  font-size: 14.5px;
  padding: 10px 13px;
  border-radius: 8px;
  transition: background-color .15s, color .15s;
}
.p-side__link svg { flex: none; opacity: .8; }
.p-side__link span { flex: 1; min-width: 0; }
.p-side__link:hover { background: rgba(255,255,255,.07); color: #fff; }
.p-side__link:hover svg { opacity: 1; }
.p-side__link.is-active {
  background: rgba(255,255,255,.13);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 2px 0 0 #6E9BFF;
}
.p-side__link.is-active svg { opacity: 1; color: #9FBEFF; }
.p-side__link--admin { color: #9FBEFF; }

.p-side__badge {
  background: #E5484D;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 19px;
  height: 19px;
  border-radius: 100px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  flex: none;
}

.p-side__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.p-side__small {
  display: block;
  color: rgba(255,255,255,.55);
  font-size: 12.5px;
  text-decoration: none;
  padding: 4px 0;
}
.p-side__small:hover { color: #fff; }
.p-side__logout {
  margin-top: 10px;
  width: 100%;
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 10px;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.p-side__logout:hover { background: rgba(255,255,255,.16); }

.p-main { min-width: 0; }
.p-main__inner { max-width: 940px; padding: 40px 32px 80px; }

.p-burger { display: none; }

@media (max-width: 860px) {
  .p-shell { grid-template-columns: 1fr; }
  .p-side {
    position: fixed;
    inset: 0 auto 0 0;
    width: 262px;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform .22s ease;
  }
  .p-side.is-open { transform: none; }
  .p-burger {
    display: grid;
    place-items: center;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 70;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid #D4DBE5;
    background: var(--panel);
    cursor: pointer;
  }
  .p-burger span {
    width: 18px; height: 2px; background: var(--ink);
    box-shadow: 0 -6px 0 var(--ink), 0 6px 0 var(--ink);
  }
  .p-main__inner { padding: 74px 20px 60px; }
}

/* ── Page furniture ──────────────────────────────────────── */

.p-h1 {
  font-size: clamp(25px, 3.4vw, 33px);
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 6px;
  font-weight: 700;
}
.p-lede { color: var(--body); font-size: 15.5px; line-height: 1.6; margin: 0 0 30px; }

.p-card {
  background: var(--panel);
  border: 1px solid #E3E8EF;
  border-radius: 14px;
  padding: 26px;
  margin-bottom: 22px;
  box-shadow: 0 1px 2px rgba(11,27,46,.04);
}
.p-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}
.p-card__sub { color: var(--mute); font-size: 14px; margin: 0 0 20px; line-height: 1.55; }

/* ── Empty states ─────────────────────────────────────────────
   These sections are legitimately empty for weeks at a time, so the empty
   state is not an error and not a setup screen — it is the answer to the
   question the client actually opens the page with, which is "where is my
   file and is anything happening?".

   That rules out the shape a product-onboarding empty state takes. A courier
   consignment is created by the office, not by the client; offering them a
   button to make one teaches an affordance that does not exist. So the split
   is: a section the client can fill gets one action, a section only we can
   fill gets a timeline instead, showing where in the process the emptiness
   sits.

   No ghost rows and no faded example content anywhere. CLAUDE.md already
   forbids it for the employer panel — greyed-out rows teach that data exists
   and is being withheld — and the same reasoning holds for a candidate's own
   file. */
.p-empty {
  text-align: left;
  padding: 26px 24px;
  color: var(--mute);
}
.p-empty strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
  font-weight: 650;
  margin-bottom: 6px;
}
.p-empty__head { display: flex; gap: 14px; align-items: flex-start; }
.p-empty__body { margin: 0; font-size: 14px; line-height: 1.6; max-width: 48ch; }

/* The tile carries the accent as a fill. The glyph inside is --amber-ink
   rather than --cta: yellow as type measures 1.5:1 on white, and the same
   caution appears in every design system that has an accent token — it is a
   fill and border colour, not a text colour. */
.p-empty__ico {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--cta) 18%, transparent);
  color: var(--amber-ink);
}
.p-empty__ico svg { width: 21px; height: 21px; }

/* ── The timeline, for sections the client cannot fill ────── */
.p-empty__steps {
  list-style: none;
  margin: 20px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid #EDF1F6;
  display: grid;
  gap: 11px;
}
.p-empty__step {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  font-size: 13.5px;
  color: var(--ink);
}
.p-empty__step i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #D5DDE8;
  background: #fff;
}
.p-empty__step small { color: var(--mute); font-size: 12.5px; }

.p-empty__step--done i { background: var(--emerald); border-color: var(--emerald); }

/* Ambient only. The dot breathes so the panel is not dead at rest, but the
   state never advances by itself — a screen that moves itself through a
   process the client is waiting on reads as broken, not as alive. */
.p-empty__step--now i {
  border-color: var(--blue);
  background: var(--blue);
  animation: p-empty-pulse 2.4s ease-in-out infinite;
}
.p-empty__step--todo { color: var(--mute); }
.p-empty__step--todo i { background: #F4F7FB; }

@keyframes p-empty-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 42%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--blue) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .p-empty__step--now i { animation: none; }
}

/* One action, full width on a phone, and only on the pages where the client
   is the one who can end the emptiness. */
.p-empty__act { margin-top: 18px; }
@media (max-width: 520px) {
  .p-empty { padding: 22px 18px; }
  .p-empty__act .pbtn { width: 100%; min-height: 44px; }
}

.p-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.p-meta dt {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--mute);
  font-weight: 700;
  margin-bottom: 5px;
}
.p-meta dd { margin: 0; font-size: 15.5px; color: var(--ink); font-weight: 600; }

.p-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid;
}
.p-tag--neutral { background: var(--void);  border-color: #DDE3EC; color: var(--mute); }
.p-tag--blue    { background: #EFF4FF; border-color: #C3D4FB; color: #17408F; }
.p-tag--green   { background: #ECFDF3; border-color: #A9E5C3; color: #0A5C36; }
.p-tag--amber   { background: #FFF8EB; border-color: #F5D89A; color: #8A5A00; }
.p-tag--red     { background: #FEF3F2; border-color: #F3C3BE; color: #912018; }

/* ── Onboarding guide ────────────────────────────────────── */

.p-guide__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.p-guide__pct {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--blue);
  flex: none;
}

.p-guide__steps {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.p-guide__step {
  display: flex;
  flex-direction: column;
  gap: 9px;
  height: 100%;
  padding: 14px 12px;
  border: 1px solid #E3E8EF;
  border-radius: 11px;
  background: var(--panel);
  text-decoration: none;
  transition: border-color .15s, background-color .15s;
}
.p-guide__step:hover { border-color: var(--blue); }
.p-guide__mark {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--void);
  border: 1px solid #D4DBE5;
  color: var(--mute);
  flex: none;
}
.p-guide__label {
  font-size: 13px;
  line-height: 1.45;
  color: var(--body);
}
.p-guide__step.is-done { background: #F4FCF7; border-color: #A9E5C3; }
.p-guide__step.is-done .p-guide__mark { background: #0A7A45; border-color: #0A7A45; color: #fff; }
.p-guide__step.is-done .p-guide__label { color: #0A5C36; }

/* ── Readiness score ─────────────────────────────────────── */

.p-score__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.p-score__dial {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid;
  flex: none;
}
.p-score__dial b { font-size: 26px; letter-spacing: -.02em; line-height: 1; }
.p-score__dial span { font-size: 12.5px; opacity: .75; }
.p-score__dial.is-ok  { background: #ECFDF3; border-color: #A9E5C3; color: #0A5C36; }
.p-score__dial.is-low { background: #FFF8EB; border-color: #F5D89A; color: #8A5A00; }

.p-score__verdict {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14.5px;
  font-weight: 650;
  margin: 0 0 4px;
}
.p-score__verdict.is-ok  { color: #0A5C36; }
.p-score__verdict.is-low { color: #8A5A00; }
.p-score__verdict span { font-weight: 500; color: var(--mute); font-size: 13.5px; }

.p-score__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin: 20px 0 4px;
}
.p-score__item { border-top: 1px solid #EDF1F6; padding-top: 12px; }
.p-score__label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
}
.p-score__label b { font-variant-numeric: tabular-nums; color: var(--blue); }
.p-score__hint { font-size: 12.5px; color: var(--mute); line-height: 1.5; margin: 0; }

.p-score__note {
  margin: 20px 0 0;
  padding: 12px 14px;
  background: var(--void);
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--body);
}

/* ── Step timeline ───────────────────────────────────────── */

.p-progress {
  height: 6px;
  border-radius: 100px;
  background: #E3E8EF;
  overflow: hidden;
  margin: 14px 0 8px;
}
.p-progress span { display: block; height: 100%; background: var(--blue); border-radius: 100px; }

.p-steps { list-style: none; margin: 0; padding: 0; }

.p-step {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 16px;
  padding-bottom: 22px;
  position: relative;
}
.p-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 30px;
  bottom: 0;
  width: 2px;
  background: #E3E8EF;
}
.p-step__dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--panel);
  border: 2px solid #D4DBE5;
  color: var(--mute);
  position: relative;
  z-index: 1;
}
.p-step--done .p-step__dot   { background: #0A7A45; border-color: #0A7A45; color: #fff; }
.p-step--active .p-step__dot { background: var(--blue); border-color: var(--blue); color: #fff; }
.p-step--active::before      { background: linear-gradient(#1E5EFF, #E3E8EF); }
.p-step--blocked .p-step__dot{ background: #FFF8EB; border-color: #F5D89A; color: #8A5A00; }

.p-step__title {
  font-size: 15.5px;
  font-weight: 650;
  color: var(--ink);
  margin: 4px 0 4px;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.p-step__text { color: var(--body); font-size: 14.5px; line-height: 1.6; margin: 0; }
.p-step__note {
  margin: 9px 0 0;
  font-size: 14px;
  color: var(--ink);
  background: var(--void);
  border-left: 3px solid var(--blue);
  padding: 9px 13px;
  border-radius: 0 7px 7px 0;
}
.p-step--pending .p-step__title,
.p-step--pending .p-step__text { opacity: .62; }

/* ── Document state and missing-document chips ───────────── */

.p-docstate {
  background: var(--void);
  border: 1px solid #E3E8EF;
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 24px;
}
.p-docstate__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
}
.p-docstate__head b { color: var(--blue); font-size: 17px; }
.p-docstate__count { font-size: 12.5px; color: var(--mute); margin: 6px 0 0; }
.p-docstate__done { font-size: 13.5px; color: #0A5C36; margin: 12px 0 0; font-weight: 600; }
.p-docstate__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 18px 0 9px;
}

.p-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; }
.p-chip {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #912018;
  background: #FEF3F2;
  border: 1px solid #F3C3BE;
  border-radius: 100px;
  padding: 5px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background-color .15s, border-color .15s;
}
.p-chip:hover { background: #FDE3E0; border-color: #E5484D; }
.p-chip.is-picked { background: var(--blue); border-color: var(--blue); color: #fff; }
.p-chip em {
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  opacity: .8;
}
.p-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── Lists (documents, appointments) ─────────────────────── */

.p-list { list-style: none; margin: 0; padding: 0; }
.p-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 16px 0;
  border-top: 1px solid #EDF1F6;
}
.p-item:first-child { border-top: 0; }
.p-item__main { min-width: 0; flex: 1 1 260px; }
.p-item__title { font-size: 15px; font-weight: 650; color: var(--ink); margin: 0 0 4px; word-break: break-word; }
.p-item__meta { font-size: 13px; color: var(--mute); margin: 0; line-height: 1.5; }
.p-item__side { display: flex; align-items: center; gap: 10px; flex: none; }

.p-file {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px dashed #C9D3E0;
  border-radius: 10px;
  padding: 14px;
  background: var(--void);
  cursor: pointer;
  font-size: 14px;
  color: var(--body);
}
.p-file:hover { border-color: var(--blue); color: var(--ink); }
.p-file input { display: none; }

/* ── Document catalogue picker (admin) ───────────────────── */

.p-catalogue {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2px 18px;
}
.p-catalogue__item {
  padding: 8px 0;
  font-size: 14px;
  align-items: center;
}
.p-catalogue__item em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mute);
  border: 1px solid #DDE3EC;
  border-radius: 100px;
  padding: 1px 7px;
  margin-left: 6px;
  white-space: nowrap;
}
.p-catalogue__item.is-added { opacity: .5; cursor: default; }
.p-catalogue__item.is-added em { border-color: #A9E5C3; color: #0A5C36; }

/* ── Support thread ──────────────────────────────────────── */

.p-thread__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #EDF1F6;
}

.p-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.p-msg {
  border: 1px solid #E3E8EF;
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--panel);
  max-width: 88%;
}
/* Staff replies sit on the other side and on the brand's own ground, so a
   client can tell at a glance which lines are ours. */
.p-msg.is-staff {
  margin-left: auto;
  background: #EFF4FF;
  border-color: #C3D4FB;
}
.p-msg__who {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}
.p-msg__who span { font-weight: 500; color: var(--mute); font-size: 11.5px; }
.p-msg__body { font-size: 14.5px; line-height: 1.6; color: var(--body); word-break: break-word; }
.p-msg__file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--blue);
  text-decoration: none;
  border: 1px solid #C3D4FB;
  border-radius: 8px;
  padding: 6px 11px;
  background: #fff;
}
.p-msg__file:hover { border-color: var(--blue); }
.p-msg__file em { font-style: normal; color: var(--mute); font-size: 11.5px; }

@media (max-width: 620px) { .p-msg { max-width: 100%; } }

/* ── Profile tabs ────────────────────────────────────────── */

.p-profile {
  display: grid;
  grid-template-columns: 1fr 268px;
  gap: 22px;
  align-items: start;
}
/* minmax(0, 1fr), not 1fr. A grid track written as 1fr carries an implicit
   minimum of auto, so it cannot shrink below its content min-content — and the
   six-item tab strip inside measures 450px min-content. On a 375px phone that
   pushed the whole page 75px wide and the profile scrolled sideways, which is
   the one thing the fit check cannot see because it reads stylesheets rather
   than rendered pages. The strip already scrolls on its own; it just needed a
   track that would let it. */
@media (max-width: 900px) {
  .p-profile { grid-template-columns: minmax(0, 1fr); }
  .p-profile > * { min-width: 0; }
}

.p-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid #E3E8EF;
  margin-bottom: 22px;
  scrollbar-width: none;
}
.p-tabs::-webkit-scrollbar { display: none; }
.p-tab {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--mute);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 11px 14px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.p-tab:hover { color: var(--ink); }
.p-tab.is-active { color: var(--blue); border-bottom-color: var(--blue); }
.p-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

/* With JavaScript off every panel is visible, each under its own heading, so
   the form is complete rather than mostly hidden. */
.p-panel__title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}
.p-panel__sub { font-size: 13.5px; color: var(--mute); margin: 0 0 20px; line-height: 1.5; }
.p-panel + .p-panel { margin-top: 34px; padding-top: 28px; border-top: 1px solid #EDF1F6; }
.js .p-panel + .p-panel { margin-top: 0; padding-top: 0; border-top: 0; }
.js .p-panel[hidden] { display: none; }

/* ── Identity card ───────────────────────────────────────── */

.p-idcard {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.p-idcard__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 19px;
  font-weight: 700;
  flex: none;
}
.p-idcard__who { flex: 1 1 220px; min-width: 0; }
.p-idcard__who h2 {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.p-idcard__who p { font-size: 13.5px; color: var(--mute); margin: 0; word-break: break-word; }
.p-idcard__meta {
  display: flex;
  gap: 24px;
  margin: 0;
  flex-wrap: wrap;
}
.p-idcard__meta dt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 3px;
}
.p-idcard__meta dd { margin: 0; font-size: 14px; font-weight: 650; color: var(--ink); }

/* ── Profile aside ───────────────────────────────────────── */

.p-ring { display: flex; align-items: center; gap: 14px; }
.p-ring svg { flex: none; transform: rotate(-90deg); }
.p-ring__track { stroke: #E3E8EF; }
.p-ring__value { stroke: var(--blue); transition: stroke-dashoffset .4s ease; }
.p-ring__pct {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.02em;
  margin: 0;
}
.p-ring__note { font-size: 12.5px; color: var(--mute); margin: 2px 0 0; line-height: 1.4; }

.p-summary { list-style: none; margin: 0; padding: 0; }
.p-summary li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #EDF1F6;
  font-size: 13.5px;
}
.p-summary li:first-child { border-top: 0; }
.p-summary span { color: var(--mute); }
.p-summary b { color: var(--ink); font-weight: 650; text-align: right; }

.p-sections { list-style: none; margin: 14px 0 0; padding: 0; }
.p-sections li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  font-size: 13.5px;
  color: var(--body);
}
.p-sections i {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid #D4DBE5;
  flex: none;
}
.p-sections li.is-done i { background: #0A7A45; border-color: #0A7A45; }
.p-sections li.is-done { color: var(--ink); font-weight: 600; }

/* ── Calendar ────────────────────────────────────────────── */

.p-cal__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.p-cal__title {
  font-size: 15px;
  color: var(--ink);
  letter-spacing: .01em;
  min-width: 10ch;
  text-align: center;
}
.p-cal__today { margin-left: auto; }

.p-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: #E3E8EF;
  border: 1px solid #E3E8EF;
  border-radius: 10px;
  overflow: hidden;
}
.p-cal__dow {
  background: var(--void);
  padding: 9px 4px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
}
.p-cal__cell {
  background: var(--panel);
  min-height: 74px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.p-cal__cell--empty { background: #FAFBFD; }
.p-cal__num { font-size: 12.5px; color: var(--body); font-variant-numeric: tabular-nums; }
.p-cal__cell.is-today { background: #EFF4FF; }
.p-cal__cell.is-today .p-cal__num {
  background: var(--blue);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-weight: 700;
}

/* Kind is carried by colour AND by the list below, never by colour alone. */
.p-cal__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.p-cal__dot.is-consulate { background: #1E5EFF; }
.p-cal__dot.is-deadline  { background: #E5484D; }
.p-cal__dot.is-interview { background: #8A5A00; }
.p-cal__dot.is-meeting   { background: #0A7A45; }

@media (max-width: 620px) {
  .p-cal__cell { min-height: 54px; padding: 5px; }
  .p-cal__num { font-size: 11.5px; }
}

/* ── Tables (admin) ──────────────────────────────────────── */

.p-tablewrap { overflow-x: auto; margin: 0 -26px; padding: 0 26px; }
.p-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 620px; }
.p-table th {
  text-align: left;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mute);
  font-weight: 700;
  padding: 0 14px 10px 0;
  border-bottom: 1px solid #E3E8EF;
  white-space: nowrap;
}
.p-table td {
  padding: 13px 14px 13px 0;
  border-bottom: 1px solid #EDF1F6;
  color: var(--body);
  vertical-align: middle;
}
.p-table td strong { color: var(--ink); font-weight: 650; }
.p-table tr:hover td { background: #FAFCFF; }
.p-table a { color: var(--blue); text-decoration: none; }
.p-table a:hover { text-decoration: underline; }

/* ── Admin tables on a phone ──────────────────────────────────
   Measured at 375px before this existed: the client list rendered 743px wide
   across eight columns, the dashboard and support tables 620px. The wrapper
   scrolled, so reaching the action column — "Dosya aç" — meant swiping the
   table sideways, and once swiped the client's name had scrolled off and the
   row no longer said whose it was.

   Below 768px each row becomes a card instead. Which columns survive is not a
   guess: keep the one that identifies the row, the one that says what to do
   about it, and the one that says whether it is urgent. Everything else is a
   detail of a row you have already decided to open, and it is one tap away on
   the client page.

   Cells declare their own role with data-m so the markup carries the decision
   and the stylesheet carries no column numbers — a table that gains a column
   does not silently reshuffle on mobile.

     id     the identifying cell; stays first and largest
     status the badge; sits beside the identity
     meta   a fact worth seeing in the list; joins one muted line, labelled
            from data-label because a bare "3" means nothing without it
     act    the action; full width at the foot, its own tap target
     hide   everything else

   768px is where the corpus clusters: linear, intercom, hashicorp and binance
   all collapse there. */
@media (max-width: 767px) {
  .p-tablewrap { overflow-x: visible; margin: 0; padding: 0; }
  .p-table { min-width: 0; display: block; font-size: 14px; }
  .p-table thead { display: none; }
  .p-table tbody { display: block; }

  .p-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 2px 10px;
    padding: 14px 2px;
    border-bottom: 1px solid #EDF1F6;
  }
  .p-table tr:hover td { background: none; }

  .p-table td { display: block; padding: 0; border: 0; }

  .p-table td[data-m='id'] { grid-column: 1; font-size: 15px; line-height: 1.4; }
  .p-table td[data-m='id'] span { font-size: 12.5px !important; }

  /* Badge beside the identity rather than under it — the pair reads as one
     line: who, and what state they are in. */
  .p-table td[data-m='status'] { grid-column: 2; grid-row: 1; justify-self: end; }

  /* The facts collapse into a single muted sentence under the name. */
  .p-table td[data-m='meta'] {
    display: inline;
    font-size: 12.5px;
    color: var(--mute);
  }
  .p-table td[data-m='meta']::before {
    content: attr(data-label) ' ';
  }
  .p-table td[data-m='meta'] + td[data-m='meta']::before {
    content: ' · ' attr(data-label) ' ';
  }
  .p-table tr > td[data-m='meta']:first-of-type { margin-top: 4px; }

  /* Full width, own line, 44px tall: the reason this block exists. */
  .p-table td[data-m='act'] {
    grid-column: 1 / -1;
    margin-top: 10px;
    white-space: normal !important;
  }
  .p-table td[data-m='act'] .pbtn { width: 100%; min-height: 44px; }
  .p-table td[data-m='act'] summary { min-height: 44px; display: grid; place-items: center; }

  .p-table td[data-m='hide'] { display: none; }
}


.p-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.p-stat {
  background: var(--panel);
  border: 1px solid #E3E8EF;
  border-radius: 12px;
  padding: 18px;
}
.p-stat b { display: block; font-size: 28px; color: var(--ink); line-height: 1.1; letter-spacing: -.02em; }
.p-stat span { font-size: 13px; color: var(--mute); }
.p-stat a { text-decoration: none; }

/* ── Advisor, shipments — added with migration 004 ────────── */

/* The advisor card. Three columns on a wide screen so the name, the ways to
   reach them, and the fallback route sit side by side rather than stacking
   into a tall block that pushes the case steps below the fold. */
.p-advisor {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: start;
}
.p-advisor__name { font-size: 19px; font-weight: 700; color: var(--ink); margin: 6px 0 2px; }
.p-advisor__reach { margin: 0; }
.p-advisor__reach a { color: inherit; }
.p-advisor__alt { margin: 0; }
@media (max-width: 780px) {
  .p-advisor { grid-template-columns: 1fr; }
}

.p-ship__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
.p-ship__contents { font-size: 16px; font-weight: 650; color: var(--ink); margin: 0 0 4px; }
/* A tracking number is copied by hand more often than it is clicked, so it is
   set in the mono face where 0 and O are distinguishable. */
.p-track {
  font-family: var(--font-ident);
  font-size: 14px;
  letter-spacing: .02em;
  background: var(--void);
  border: 1px solid #DDE3EC;
  border-radius: 6px;
  padding: 3px 8px;
  display: inline-block;
  word-break: break-all;
}

/* ── Read-only profile on the admin client card ───────────── */

/* Section heading inside a card. Smaller than the card title, because the
   card is "Profil bilgileri" and these are its five parts. */
.p-subhead {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 26px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #E7ECF3;
}
.p-subhead:first-of-type { margin-top: 14px; }

/* Two columns of label/value pairs. Staff scan this list looking for the gaps,
   so the rows are dense and the dashes are quiet rather than alarming. */
.p-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px 24px;
  margin: 0;
}
.p-facts > div {
  display: grid;
  grid-template-columns: minmax(120px, 150px) minmax(0, 1fr);
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid #F0F3F8;
}
.p-facts > div:first-child { border-top: 0; }
/* Free text — an experience paragraph or a street address — gets the full
   width and stacks, because 150px of label beside a paragraph wastes the row. */
.p-facts__wide {
  grid-column: 1 / -1;
  grid-template-columns: 1fr !important;
  gap: 4px !important;
}
.p-facts dt { font-size: 13px; color: var(--mute); line-height: 1.5; }
.p-facts dd { margin: 0; font-size: 14.5px; color: var(--ink); line-height: 1.55; word-break: break-word; }
.p-dim { color: #A7B0BE; }

/* ══════════════════════════════════════════════════════════════
   The employer door — added 2026-08-28
   ══════════════════════════════════════════════════════════════ */

/* Brand and language switch share the top line, because the switch has to be
   findable before anything else on the page is read: a German employer who
   cannot see it assumes there is no German. */
.p-auth__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.p-auth__topline .p-auth__brand { margin: 0; }

.p-langsw {
  display: inline-flex;
  padding: 3px;
  border-radius: 8px;
  background: var(--void);
  border: 1px solid #DDE3EC;
}
.p-langsw__on,
.p-langsw__off {
  min-width: 34px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  text-decoration: none;
  line-height: 1.4;
}
.p-langsw__on  { background: var(--cta, #FFC933); color: #0B1B2E; }
.p-langsw__off { color: var(--mute); }
.p-langsw__off:hover { color: var(--ink); background: #fff; }

.p-auth__eyebrow--in {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 6px;
}

/* Said before the account exists. Quiet, but not hidden — the whole point is
   that someone weighing up whether to register can read it first. */
.p-auth__note {
  margin: 18px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--mute);
}
.p-auth__alt { margin: 18px 0 0; font-size: 13.5px; color: var(--mute); }
.p-auth__alt a { font-weight: 700; }

/* A checkbox whose label is a paragraph needs the label beside the box, not
   wrapped under it. */
.p-check--block {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 4px 0 20px;
  font-size: 13px;
  line-height: 1.55;
}
.p-check--block input { margin-top: 2px; }

/* ── The employer shell ───────────────────────────────────── */

.p-empshell { min-height: 100vh; background: var(--void); }
.p-emphead {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background: #0B1B2E;
  border-bottom: 1px solid rgba(237, 241, 247, .1);
}
.p-emphead .p-auth__brandmark { color: #fff; text-decoration: none; margin-right: auto; }
.p-emphead .p-langsw { background: rgba(237, 241, 247, .08); border-color: rgba(237, 241, 247, .18); }
.p-emphead .p-langsw__off { color: rgba(237, 241, 247, .7); }
.p-emphead .p-langsw__off:hover { color: #fff; background: rgba(237, 241, 247, .12); }
.p-emphead .pbtn--ghost { color: #fff; border-color: rgba(237, 241, 247, .28); }

.p-empmain {
  max-width: 860px;
  margin-inline: auto;
  padding: 32px 24px 64px;
  display: grid;
  gap: 18px;
}
.p-empmain .p-tag { display: inline-block; }

/* ── The employer sidebar's language switch ──────────────────
   The switcher was mixed for a light auth screen — a --void track with a grey
   border — and the sidebar is navy, so left alone it is a pale rectangle
   glued to the bottom of a dark column. Same control, inverted ground.
   It sits in the footer rather than in a header row because it is a setting,
   not a destination, and it is the one control this shell has that the
   candidate shell has no equivalent for. */
.p-side__lang {
  display: inline-flex;
  padding: 3px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
}
.p-side__lang .p-langsw__on,
.p-side__lang .p-langsw__off {
  min-width: 34px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  text-decoration: none;
  line-height: 1.4;
}
.p-side__lang .p-langsw__on  { background: var(--cta, #FFC933); color: #0B1B2E; }
.p-side__lang .p-langsw__off { color: rgba(255, 255, 255, .6); }
.p-side__lang .p-langsw__off:hover { color: #fff; background: rgba(255, 255, 255, .1); }

/* Held down. The eye is the only control on these forms whose state lasts
   exactly as long as a finger stays on it, so it says so while it is being
   used — without it the icon swaps and nothing else changes, and on a phone
   the finger is over the icon anyway. */
.p-passtoggle.is-held {
  color: var(--ink);
  background: rgba(11, 27, 46, .08);
}

/* ── The privacy notice, over the form ───────────────────────
   Same component as the marketing site's, mixed for the portal's tokens. The
   text inside comes from the same generated source, so the two surfaces can
   only ever be quoting one document. */
.legaldlg {
  width: min(46rem, calc(100vw - 2rem));
  max-height: min(80vh, 46rem);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: var(--body);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .5);
  overflow: hidden;
}
  /* [open], and this is load-bearing.
     The UA stylesheet hides a closed dialog with `dialog:not([open])`, but
     origin beats specificity: any AUTHOR display wins over it whatever the
     selector looks like. Declaring display on .legaldlg therefore un-hid the
     dialog permanently — it rendered in normal flow, at its place in the
     document, on every page that carried it, and closing it only returned it
     to being visible there. */
/* The bar stays put and only the text scrolls: in a document this long a close
   button that scrolls away is a dialog you have to reach the bottom of in
   order to leave. */
.legaldlg[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.legaldlg::backdrop { background: rgba(7, 11, 25, .62); }

.legaldlg__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px 14px 22px;
  border-bottom: 1px solid #E3E8F0;
  background: var(--void, #EDF1F7);
}
.legaldlg__eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
}
.legaldlg__close {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #DDE3EC;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.legaldlg__close:hover { background: var(--void, #EDF1F7); }

.legaldlg__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px clamp(20px, 5vw, 34px) 32px;
}
.legaldlg__title {
  font-size: clamp(19px, 3vw, 25px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 10px;
}
.legaldlg__lead { margin: 0 0 24px; font-size: 15px; line-height: 1.6; }
.legaldlg__prose section { margin-bottom: 24px; }
.legaldlg__prose h3 {
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 8px;
}
.legaldlg__prose p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.65; }
.legaldlg__foot { margin: 24px 0 0; font-size: 14px; }

.pident {
  display: grid;
  gap: 9px;
  margin: 0 0 24px;
  padding: 16px 18px;
  background: var(--void, #EDF1F7);
  border: 1px solid #DDE3EC;
  border-radius: 12px;
}
.pident__row {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
  gap: 4px 16px;
  font-size: 14px;
}
.pident dt { color: var(--mute); }
.pident dd { margin: 0; color: var(--ink); }
@media (max-width: 560px) {
  .pident__row { grid-template-columns: 1fr; gap: 2px; }
}

/* A link inside a consent label.
   It inherited the label's grey and lost its underline, so the one word in
   that sentence a person is meant to click looked exactly like the words
   around it. Underlined as well as coloured: this sits inside a line of body
   text, where colour alone is the weakest of the two signals and the only one
   a reader who cannot separate hues has. */
.p-check a,
.p-check--block a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.p-check a:hover,
.p-check--block a:hover { color: var(--ink); }

/* ── Centred sign-in over a full-bleed shader ─────────────────
   The two-column split moves to a single card floating on the animated
   ground. The three points the right-hand column used to carry sit under the
   card instead of being dropped with it: they are the reassurance at the exact
   moment somebody decides whether to hand over their file.

   The card keeps the portal palette rather than the reference's blue. Yellow
   is this project's action colour and the only filled button role; a blue
   submit here would put a second action colour on the one screen where there
   is a single thing to do. */
body.p-auth { background: var(--navy); }

.p-auth__canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: block;
  z-index: 0;
  opacity: .72;
}

.p-auth__grid--centred {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 32px 20px;
}
.p-auth__grid--centred .p-auth__panel { padding: 0; width: 100%; }

/* Glass. The tint is navy at high alpha rather than white at low alpha: over a
   moving shader a white scrim shifts with the wave underneath and the text
   contrast moves with it, which is the failure mode of most glass cards. A
   dark base holds still. */
.p-auth__grid--centred .p-auth__inner {
  max-width: 430px;
  padding: 38px 34px 32px;
  border-radius: 18px;
  background: rgba(9, 20, 36, .82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
}

/* The shell was written for a light panel, so every text role inside it has to
   be taken back for a dark one. */
.p-auth__grid--centred .p-auth__brandmark { color: #fff; }
.p-auth__grid--centred .p-auth__title { color: #fff; }
.p-auth__grid--centred .p-auth__sub { color: rgba(255,255,255,.68); }
.p-auth__grid--centred .p-label { color: rgba(255,255,255,.78); }
.p-auth__grid--centred .p-hint { color: rgba(255,255,255,.55); }
.p-auth__grid--centred .p-check { color: rgba(255,255,255,.72); }
.p-auth__grid--centred .p-auth__foot a { color: rgba(255,255,255,.6); }
.p-auth__grid--centred .p-auth__foot a:hover { color: #fff; }
.p-auth__grid--centred .p-auth__switch { color: rgba(255,255,255,.68); }

.p-auth__grid--centred .p-input,
.p-auth__grid--centred .p-select {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
.p-auth__grid--centred .p-input::placeholder { color: rgba(255,255,255,.42); }
.p-auth__grid--centred .p-input:focus,
.p-auth__grid--centred .p-select:focus {
  border-color: var(--blue-hi, #6E9BFF);
  background: rgba(255,255,255,.1);
}

/* The list a <select> opens is painted by the browser, not by the page.
   The closed box was recoloured for the dark card; the popup kept the light
   scheme :root declares for the whole site, while its options inherited the
   card's white type. White on white — which is why an opened list looked
   empty apart from the row under the cursor.

   color-scheme is the only property that reaches that popup, and because
   :root says `light`, it has to be re-declared here rather than inherited.
   The explicit option colours are the fallback for the browsers that paint
   the list themselves, where color-scheme alone does not settle it. */
.p-auth__grid--centred .p-select {
  color-scheme: dark;
}
.p-auth__grid--centred .p-select option {
  background: #14293F;
  color: #fff;
}
.p-auth__grid--centred .p-select option:disabled {
  color: rgba(255, 255, 255, .45);
}

/* Under the card, one row on a wide screen and a stack on a narrow one. */
.p-auth__points--under {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  max-width: 560px;
}
.p-auth__points--under li {
  font-size: 13px;
  color: rgba(255,255,255,.62);
  display: flex;
  align-items: center;
  gap: 7px;
}
.p-auth__points--under li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cta);
  flex: none;
}

@media (max-width: 560px) {
  .p-auth__grid--centred .p-auth__inner { padding: 30px 22px 26px; border-radius: 16px; }
  .p-auth__points--under { flex-direction: column; align-items: center; gap: 9px; }
}

/* The action, on the dark card.
   .pbtn--primary is navy, which is right on the portal's light panels and
   invisible on this one. --blue is the site's other action colour and carries
   white type at 5.5:1, which is the pairing the reference uses; on this navy
   ground it also stays a button rather than becoming the brightest thing on
   the card, which is what the yellow did. */
.p-auth__grid--centred .pbtn--primary {
  background: var(--blue);
  color: #fff;
  border-color: transparent;
}
.p-auth__grid--centred .pbtn--primary:hover { background: #1A52E0; }

/* The secondary button was a white panel on a white page; on glass it becomes
   a hairline ghost so the yellow keeps the only filled role. */
.p-auth__grid--centred .pbtn--ghost {
  background: rgba(255,255,255,.06);
  color: #fff;
  border-color: rgba(255,255,255,.22);
}
.p-auth__grid--centred .pbtn--ghost:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.4);
}
.p-auth__grid--centred .pbtn:focus-visible { outline-color: var(--blue-hi, #6E9BFF); }

/* ── Underline fields with floating labels ────────────────────
   The look from the reference component, built without it. The animation the
   original drives through Tailwind peer- classes is two CSS selectors:
   :placeholder-shown says the field is empty and :focus says the caret is in
   it, so the label knows where to sit without a line of JavaScript.

   :has() on the wrapper rather than a sibling combinator, because the password
   input sits inside .p-passwrap for the reveal control and a ~ selector cannot
   reach out of it. That also means the markup does not have to be reordered,
   so every auth form gets this without being touched.

   One thing here is better than the reference: the reference blanks its
   placeholder to a single space, which throws away a real hint. Here the
   placeholder is kept and only revealed once the label has moved out of the
   way, so the field shows its example format at the moment it is being
   filled. */
.p-auth__grid--centred .p-field {
  position: relative;
  padding-top: 22px;
  margin-bottom: 26px;
}

.p-auth__grid--centred .p-input {
  background: transparent;
  border: 0;
  border-bottom: 2px solid rgba(255, 255, 255, .28);
  border-radius: 0;
  padding: 8px 0;
  color: #fff;
  transition: border-color .25s ease;
}
.p-auth__grid--centred .p-input:focus {
  background: transparent;
  border-bottom-color: var(--blue-hi, #6E9BFF);
  box-shadow: none;
}
.p-auth__grid--centred .p-input::placeholder { color: transparent; transition: color .2s ease; }
.p-auth__grid--centred .p-input:focus::placeholder { color: rgba(255, 255, 255, .38); }

.p-auth__grid--centred .p-label {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .62);
  transform: translateY(0) scale(1);
  transform-origin: left top;
  transition: transform .25s ease, color .25s ease;
  pointer-events: none;
}

/* Empty: the label sits on the line, doing the placeholder's job. */
.p-auth__grid--centred .p-field:has(.p-input:placeholder-shown) .p-label {
  transform: translateY(30px) scale(1.12);
  color: rgba(255, 255, 255, .5);
}

/* Focused: back up to the caption slot. This used to be a :not() guard on the
   rule above; it is its own rule now so that the autofill rule below can join
   the same cascade without having to out-specify a compound selector. */
.p-auth__grid--centred .p-field:has(.p-input:focus) .p-label {
  transform: translateY(0) scale(1);
  color: var(--blue-hi, #6E9BFF);
}

/* Autofilled: also up — and this is the one that matters.
   Chrome PREVIEWS a saved value before the user confirms it, and during the
   preview input.value is still empty for privacy, so :placeholder-shown stays
   true and the label stayed sitting on the line with the previewed text drawn
   straight through it. That is the overlap; it is not reachable through value
   state at all, only through the autofill pseudo.

   Written twice rather than as one selector list: a list containing a pseudo
   the browser does not know is dropped whole, so pairing them would cost
   Firefox the standard one it does support. */
.p-auth__grid--centred .p-field:has(.p-input:-webkit-autofill) .p-label {
  transform: translateY(0) scale(1);
}
.p-auth__grid--centred .p-field:has(.p-input:autofill) .p-label {
  transform: translateY(0) scale(1);
}

/* The two icons, from the stylesheet so no form markup changes. */
.p-auth__grid--centred .p-label::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.p-auth__grid--centred .p-label[for="email"],
.p-auth__grid--centred .p-label[for="emp_email"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.p-auth__grid--centred .p-label[for="password"],
.p-auth__grid--centred .p-label[for="emp_password"] {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
.p-auth__grid--centred .p-label:not([for="email"]):not([for="password"]):not([for="emp_email"]):not([for="emp_password"])::before {
  display: none;
}

/* The arrow, and the nudge it takes on hover. */
.p-auth__grid--centred .pbtn--primary::after {
  content: "";
  width: 17px;
  height: 17px;
  margin-left: 9px;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
  mask: var(--arrow) center / contain no-repeat;
  transition: transform .25s ease;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
}
.p-auth__grid--centred .pbtn--primary:hover::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .p-auth__grid--centred .p-label,
  .p-auth__grid--centred .pbtn--primary::after { transition: none; }
}

/* Autofill, on the dark card.
   Chrome paints its own pale background on a field it has filled, and
   background-color does not override it. The usual answer is an opaque inset
   box-shadow big enough to repaint the box — which cannot be used here,
   because an opaque fill would turn the glass card into a solid one over a
   shader that is meant to show through it.

   So the delayed transition is what does the work: the background is animated
   over a span long enough that it never arrives, which leaves the field
   transparent. -webkit-text-fill-color is separate and still required — it is
   the only way to recolour autofilled text.

   Without this the card looked right until the browser filled it in and then
   showed two pale boxes where the underlines should be, which is what anybody
   with a saved password sees — that is, most people. */
.p-auth__grid--centred .p-input:-webkit-autofill,
.p-auth__grid--centred .p-input:-webkit-autofill:hover,
.p-auth__grid--centred .p-input:-webkit-autofill:focus,
.p-auth__grid--centred .p-input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  transition: background-color 100000s ease 0s;
}

/* Links inside the card read white, not blue.
   Blue is a third colour on a surface that already has yellow for the action
   and white for everything readable, and on this ground it sits at the dim end
   of legible. Underlined white carries the same "this is a link" signal
   without adding a hue. */
.p-auth__grid--centred .p-link,
.p-auth__grid--centred .p-auth__switch a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .38);
  text-underline-offset: 3px;
}
.p-auth__grid--centred .p-link:hover,
.p-auth__grid--centred .p-auth__switch a:hover {
  text-decoration-color: #fff;
}