/* ============================================================================
   EMPLOYEE PORTAL — /employee-login
   Loaded AFTER style.css, which supplies :root tokens, .btn and .fpm-credit.
   Nothing in here is used by the marketing page, and nothing here overrides a
   marketing-page selector, so the two can change independently.

   Served under css/* = max-age:0, must-revalidate (see vercel.json), so this
   file needs no ?v= cache-bust — unlike /assets/*, which is immutable.
   ========================================================================== */

.portal{background:var(--ink);color:var(--bone);min-height:100vh}
/* The UA stylesheet's [hidden]{display:none} is a plain type-less rule, so ANY
   author display declaration outranks it — .gate{display:grid} below meant
   gate.hidden=true did nothing and the sign-in card stayed on screen above the
   dashboard after submit. This has to come first and it has to be !important,
   because .gate/.app set display unconditionally. */
[hidden]{display:none!important}

/* ---------- concept banner ---------- */
.pbanner{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:center;
  gap:.6rem;padding:.6rem 1rem;background:var(--purple);color:#fff;text-align:center}
.pbanner p{margin:0;font-size:.86rem;line-height:1.35}
.pbanner strong{font-weight:700}
.pbanner__dot{width:8px;height:8px;border-radius:50%;background:#fff;flex-shrink:0;opacity:.9}
@media (max-width:640px){.pbanner__long{display:none}}

/* ---------- gate ---------- */
.gate{min-height:calc(100vh - var(--pbanner-h,44px));display:grid;place-items:center;
  padding:clamp(24px,6vw,64px) 20px}
.gate__card{width:100%;max-width:430px;background:var(--ink-2);border:1px solid var(--ink-3);
  border-radius:22px;padding:clamp(26px,5vw,40px);text-align:center}
.gate__brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;margin-bottom:1.4rem}
.gate__word{height:26px;width:auto;display:block}
.gate__card h1{font-family:var(--display);font-weight:800;font-size:1.85rem;color:var(--bone);
  letter-spacing:-.01em}
.gate__sub{margin:.7rem 0 0;color:var(--bone-dim);font-size:.95rem;line-height:1.5}
.gate__form{display:grid;gap:1rem;margin-top:1.9rem;text-align:left}
.gf{display:grid;gap:.4rem}
.gf label{font-family:var(--display);font-weight:600;font-size:.85rem;color:var(--bone)}
/* readonly, and styled to look it — a field that looks editable in a mockup
   invites someone to type a real credential into it. */
/* Editable now, so it has to look editable — the old rule painted these as
   disabled (dimmed text, not-allowed cursor) back when they were readonly. */
.gf input{width:100%;background:var(--ink);border:1px solid var(--ink-3);border-radius:11px;
  padding:.8rem .95rem;color:var(--bone);font:inherit;font-size:.95rem}
.gf input:focus-visible{border-color:var(--purple-lift)}
/* Magenta here is NOT a budget regression — style.css already assigns magenta
   the form-error role (.field input:user-invalid, .form-status.err). This is
   the same semantic use on a page that is noindex and off the marketing
   funnel, not a new decorative accent. */
.gate__err{margin:0;padding:.6rem .8rem;border-radius:9px;font-size:.85rem;
  background:rgba(232,29,117,.12);border:1px solid var(--magenta);color:var(--magenta-lift)}
.gate__btn{justify-content:center;width:100%;margin-top:.3rem}
.gate__note{margin:0;font-size:.78rem;color:var(--grey);line-height:1.45;text-align:center}
.gate__back{display:inline-block;margin-top:1.6rem;font-size:.85rem;color:var(--bone-dim);
  text-decoration:none}
.gate__back:hover{color:var(--purple-lift)}

/* ---------- top bar ---------- */
/* Offset is the banner's real measured height, published as --pbanner-h by the
   script on this page and re-measured on resize. Hardcoding 44px broke the
   moment the banner wrapped to two lines (narrow viewports, large text) and
   left a gap or an overlap. The 44px fallback only ever applies for the frame
   before the script runs, and `top` on a sticky element is not a layout
   property, so there is no CLS either way. */
.ptb{position:sticky;top:var(--pbanner-h,44px);z-index:50;background:rgba(23,23,28,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ink-3)}
.ptb__in{max-width:1180px;margin:0 auto;padding:.75rem 20px;display:flex;align-items:center;gap:.85rem}
.ptb__brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}
.ptb__word{height:20px;width:auto;display:block}
.ptb__div{width:1px;height:22px;background:var(--ink-3)}
.ptb__ctx{font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--bone-dim)}
.ptb__right{margin-left:auto;display:flex;align-items:center;gap:.9rem}
.ptb__user{display:inline-flex;align-items:center;gap:.5rem}
.ptb__avatar{width:28px;height:28px;border-radius:50%;background:var(--purple);color:#fff;
  display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:.72rem}
.ptb__uname{font-size:.88rem;color:var(--bone-dim)}
.ptb__out{background:none;border:1px solid var(--ink-3);border-radius:9px;padding:.4rem .8rem;
  color:var(--bone-dim);font:inherit;font-size:.83rem;cursor:pointer;white-space:nowrap}
.ptb__out:hover{color:var(--bone);border-color:var(--purple-lift)}
@media (max-width:560px){.ptb__ctx,.ptb__uname{display:none}}

/* ---------- canvas ---------- */
.pcanvas{padding:clamp(28px,5vw,52px) 0 clamp(40px,6vw,72px)}
.pwrap{max-width:1180px;margin:0 auto;padding:0 20px}
.phead h2{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.6vw,2.4rem);
  color:var(--bone);letter-spacing:-.01em}
.phead p{margin:.45rem 0 0;color:var(--bone-dim);font-size:.98rem;max-width:60ch}

/* Honesty note. One page-level statement rather than a badge on all 18 rows —
   when every item is a placeholder, per-row tags are noise that stops being
   read. The banner above repeats it, and clicking any row says it again. */
.pnote{margin:1.6rem 0 0;padding:1rem 1.15rem;background:var(--ink-2);
  border:1px dashed var(--ink-3);border-radius:12px;color:var(--bone-dim);
  font-size:.88rem;line-height:1.55}
.pnote strong{color:var(--bone)}

.psec{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--purple-lift);margin:2.6rem 0 1rem}

/* ---------- resource rows ---------- */
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
/* <button> and <a> in the same grid: reset the button's UA styling so the two
   are visually identical, and force text-align/font because buttons inherit
   neither. */
.res{display:flex;align-items:center;gap:.95rem;width:100%;text-align:left;
  font:inherit;color:inherit;cursor:pointer;text-decoration:none;
  background:var(--ink-2);border:1px solid var(--ink-3);border-radius:14px;
  padding:1rem 1.15rem;transition:border-color .2s,background .2s}
.res:hover{background:var(--ink-3);border-color:var(--purple-lift)}
.res__ic{flex-shrink:0;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:rgba(87,60,129,.28);border:1px solid var(--ink-3)}
.res__ic svg{width:19px;height:19px;color:var(--purple-lift)}
.res__t{display:grid;gap:.15rem;min-width:0}
.res__n{font-family:var(--display);font-weight:700;font-size:.98rem;color:var(--bone)}
.res__d{font-size:.84rem;color:var(--bone-dim);line-height:1.4}
.res__go{margin-left:auto;flex-shrink:0;color:var(--grey);font-size:1.05rem;transition:color .2s,transform .2s}
.res:hover .res__go{color:var(--purple-lift);transform:translateX(3px)}
/* The two rows that genuinely go somewhere (tel:, mailto:) read as live. */
.res--live{border-color:var(--purple)}
.res--live .res__go{color:var(--purple-lift)}

/* Placeholder notice, shown on clicking any inert row. Sticky at the bottom of
   the viewport so it is visible no matter how far down the list the click was. */
.ptoast{position:sticky;bottom:16px;z-index:40;margin:2rem 0 0;
  padding:.85rem 1.1rem;background:var(--purple);color:#fff;border-radius:12px;
  font-size:.88rem;line-height:1.45;box-shadow:0 10px 30px rgba(0,0,0,.45)}

/* ---------- account / change password (visual outline only) ----------
   Deliberately its own card, not another .rgrid row — this is a control, not
   a resource link, and grouping it with the folders above would bury the
   one section on the page that looks like it does something. See the HTML
   comment above this block for why the fields are `disabled` rather than
   just unwired. */
.pwcard{max-width:480px;background:var(--ink-2);border:1px solid var(--ink-3);
  border-radius:16px;padding:clamp(22px,3.4vw,32px)}
.pwcard__hd h4{font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--bone);margin:0}
.pwcard__note{margin:.5rem 0 0;font-size:.85rem;color:var(--bone-dim);line-height:1.5}
.pwcard__body{display:grid;gap:1rem;margin-top:1.5rem}
/* Reuses .gf (label + input) from the gate above. This rule is the only
   thing that makes these three fields look inactive — it fires on
   :disabled, so the gate's genuinely-editable fields are untouched.
   Disabled controls are exempt from the WCAG text-contrast requirement (the
   dimming IS the signal that the field is inert), so --grey rather than
   --bone-dim is correct here, not a contrast miss. */
.gf input:disabled{color:var(--grey);cursor:not-allowed;opacity:.85}
.gf input:disabled::placeholder{color:var(--grey);opacity:1}
.pwcard__reqs{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;
  font-size:.82rem;color:var(--bone-dim)}
.pwcard__reqs li{position:relative;padding-left:1.3rem}
.pwcard__reqs li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;
  border-radius:50%;background:var(--ink-3);border:1px solid var(--grey)}
.pwcard__btn{width:100%;justify-content:center;margin-top:.2rem}
/* pointer-events:none so :hover's background/transform never fires — a
   disabled .btn-primary that still lifts on hover reads as clickable. */
.pwcard__btn[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none}

/* ---------- footer ---------- */
.pfoot{border-top:1px solid var(--ink-3);padding:1.6rem 0}
.pfoot__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.82rem;color:var(--bone-dim)}

@media (max-width:820px){
  .rgrid{grid-template-columns:1fr}
}