/* =============================================================================
   Rang Technologies - Candidate Portal
   portal.css

   The supplied Candidate Portal design is the visual source of truth here. The
   Rang HR Admin Panel supplies the brand: the Urbanist typeface, the purple and
   teal identity, the rounded-card philosophy and the sign in treatment. The
   Candidate Portal is deliberately lighter and softer than the admin panel, so
   the heavy purple gradients of the admin panel are not carried across.
   ========================================================================== */

/* ============================== DESIGN TOKENS ============================= */
:root{
  /* Brand, shared with the HR Admin Panel */
  --purple:#8b2ae8;
  --purple-2:#a12cf0;
  --lavender:#f1e8fa;          /* the info pills and policy icon tiles */
  --lavender-2:#f7f1fd;
  --teal:#0b93a3;              /* links, the candidate's name, accents */
  --teal-dark:#087f8d;
  --teal-nav:#2f9dac;          /* the filled active navigation item */
  --teal-soft:rgba(47,157,172,.10);

  /* Neutrals */
  --ink:#141618;
  --ink-2:#2b3136;
  --muted:#77828a;
  --faint:#9aa5ab;
  --card:#ffffff;
  --line:#e7eef0;              /* the thin dividers inside cards */
  --line-2:#eef2f4;

  /* Status */
  --ok:#1faa5f;
  --ok-soft:#e8f7ee;
  --warn:#b3760a;
  --warn-soft:#fdf3e2;
  --info:#0b7d8b;
  --info-soft:#e4f4f6;
  --idle:#6b7780;
  --idle-soft:#eef1f3;
  --danger:#c62828;
  --danger-soft:#fdf1f1;

  /* Shape and depth. The design keeps shadows very light. */
  --r-card:24px;
  --r-md:16px;
  --r-sm:12px;
  --shadow:0 10px 30px rgba(28,64,72,.055);
  --shadow-hi:0 14px 36px rgba(28,64,72,.10);

  /* Fluid layout scale. Everything that used to be a fixed desktop pixel value
     now interpolates between a comfortable laptop size and the full design
     size, so 1280 through 1920 - and browser zoom, which changes the effective
     viewport - are all handled by one set of rules instead of a stack of
     breakpoints fighting each other. */
  --sidebar-w:clamp(206px,16.6vw,250px);
  --gap:clamp(14px,1.55vw,24px);
  --card-pad-x:clamp(18px,1.95vw,28px);
  --card-pad-y:clamp(18px,1.8vw,26px);
  --main-pad-r:clamp(16px,2.5vw,36px);
  --main-pad-l:clamp(16px,1.5vw,22px);
  --main-pad-t:clamp(18px,1.8vw,26px);
  --candidate-brand-primary:var(--purple);
  --candidate-brand-secondary:var(--teal);
  /* 9.8.0: sign-in visual, overridden per company from its colours */
  --login-grad-1:rgba(142,29,242,.98);
  --login-grad-2:rgba(92,76,202,.96);
  --login-grad-3:rgba(15,151,167,.98);
  --login-tint-1:rgba(126,20,238,.12);
  --login-tint-2:rgba(1,151,161,.12);
  --login-orb-1:#6469d2;
  --login-orb-2:#4f9bbd;
  --login-orb-3:#00a0a2;
  --login-orb-4:#39b36a;
}
/* 9.8.0: no per-company rules here any more. A company's colours arrive as
   the same custom properties: brand-css.php on its sign-in page, and
   applyCandidateBrand() (assets/js/app.js) after sign-in, both from
   portal_brands. html[data-candidate-brand=<key>] stays as a CSS hook. */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#fbfcfc;
  color:var(--ink);
  font-family:'Urbanist',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--teal);text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ico{flex:0 0 auto}

.view{display:none}
.view.is-active{display:block}
/* The hidden attribute has to beat the display rules set on these elements. */
[hidden]{display:none!important}

/* ============================== BOOT STATE ===============================
   Shown while the portal asks the server whether a session already exists.
   It prevents the sign in screen appearing for a split second in front of a
   candidate who is in fact already signed in.
   ====================================================================== */
.bootstate{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;background:#fafcfc;text-align:center}
.bootstate[hidden]{display:none}
.bootstate p{font-size:13.5px;color:var(--muted)}
.bootspin{width:26px;height:26px;border-radius:50%;border:2.5px solid #dbe7ea;
  border-top-color:var(--teal);animation:bootspin .8s linear infinite}
@keyframes bootspin{to{transform:rotate(360deg)}}

/* ================================= SIGN IN ===============================
   Built on the HR Admin Panel sign in treatment so the two systems read as
   one product, with Candidate Portal wording and its own credentials.
   ====================================================================== */
#view-login{min-height:100vh;background:#fff}
#view-login.is-active{display:grid;grid-template-columns:48.25% 51.75%}

.login-visual{
  position:relative;min-height:100vh;overflow:hidden;color:#fff;
  background:linear-gradient(152deg,var(--login-grad-1) 0%,var(--login-grad-2) 46%,var(--login-grad-3) 100%);
  padding:8.3vh 9.2% 0;
}
.login-visual::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,var(--login-tint-1),var(--login-tint-2))}
.login-visual>*{position:relative;z-index:4}
.login-logo{width:132px;margin-bottom:12vh}
/* 9.8.0: a company without a white logo shows its colour logo as a white
   silhouette; wide logos get more room; no logo at all = the company name. */
.login-logo img.is-silhouette{filter:brightness(0) invert(1)}
.login-logo.is-wide{width:clamp(150px,15vw,190px)}
.login-wordmark{display:block;font-size:22px;font-weight:700;line-height:1.2;color:#fff}
.bootstate .boot-wordmark{font-size:20px;font-weight:700;color:var(--purple)}
.login-kicker{margin-bottom:21px;font-size:clamp(16px,1.65vw,19px);font-weight:500}
.login-story h1{margin:0 0 26px;font-size:clamp(34px,4.15vw,47px);line-height:1.28;letter-spacing:-1.25px;font-weight:400}
.login-story p{margin:0;max-width:430px;font-size:clamp(15px,1.52vw,18px);line-height:1.36;color:rgba(255,255,255,.96)}
.gptw-badge{width:clamp(62px,6.2vw,78px);margin-top:clamp(28px,4.2vh,42px);height:auto}
.login-orb{position:absolute;z-index:2;border-radius:50%;opacity:.27}
.orb-1{width:240px;height:240px;left:-52px;bottom:48px;background:var(--login-orb-1)}
.orb-2{width:214px;height:214px;left:52px;bottom:-5px;background:var(--login-orb-2)}
.orb-3{width:244px;height:244px;right:-18px;bottom:-26px;background:var(--login-orb-3)}
.orb-4{width:115px;height:115px;right:-50px;bottom:-20px;background:var(--login-orb-4)}

.login-panel{position:relative;z-index:6;min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:#fff;border-radius:14px 0 0 14px}
.login-box{width:min(74%,382px)}
.login-box h2{margin:0 0 8px;font-size:25px;font-weight:600}
.login-sub{margin:0 0 26px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.login-field{margin-bottom:17px}
.login-field label{display:block;margin-bottom:6px;font-size:11.5px;font-weight:600;color:#3f484e}
.login-field input{width:100%;height:42px;padding:0 13px;border:1px solid #d8dee1;border-radius:10px;background:#fff;
  font-size:13.5px;outline:none;transition:border-color .18s,box-shadow .18s}
.login-field input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(11,147,163,.12)}
.login-btn{width:100%;height:42px;border:0;border-radius:10px;background:var(--teal);color:#fff;
  font-size:13.5px;font-weight:600;transition:background .18s}
.login-btn:hover{background:var(--teal-dark)}
.login-btn[disabled]{opacity:.65;cursor:progress}
.login-link{display:block;margin:18px auto 0;padding:0;border:0;background:none;color:var(--teal);font-size:12.5px}
.login-link:hover{text-decoration:underline}#forgotMessage:not(:empty){margin-top:14px}
.login-error{display:none;margin-top:14px;padding:9px 12px;border-radius:9px;background:var(--danger-soft);
  color:var(--danger);font-size:12.5px;text-align:center}
.login-error.is-shown{display:block}

/* The three development accounts, offered as one-click fills. */
.demo-accounts{margin-top:26px;padding-top:20px;border-top:1px solid var(--line-2)}
.demo-accounts[hidden]{display:none}
.demo-accounts h3{margin:0 0 3px;font-size:12px;font-weight:700;color:#3f484e}
.demo-accounts>p{margin:0 0 12px;font-size:11.5px;line-height:1.45;color:var(--faint)}
.demo-row{display:flex;flex-direction:column;gap:7px}
.demo-btn{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:1px solid var(--line);
  border-radius:11px;background:#fff;text-align:left;transition:border-color .18s,background .18s}
.demo-btn:hover{border-color:#bfe1e6;background:#f7fcfd}
.demo-btn img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 30px;background:#eef3f5}
.demo-btn b{display:block;font-size:12.5px;font-weight:600;color:var(--ink)}
.demo-btn span{display:block;font-size:11px;color:var(--faint)}

@media (max-width:900px){
  #view-login.is-active{display:block}
  .login-visual{min-height:auto;padding:36px 28px 44px}
  .login-logo{width:120px;margin-bottom:38px}
  .login-story h1{font-size:32px}
  .login-panel{min-height:auto;padding:44px 24px 60px;border-radius:20px 20px 0 0;margin-top:-20px}
  .login-box{width:min(100%,430px)}
}

/* ================================== SHELL ================================
   One persistent shell. The sidebar and the header never re-render on
   navigation; only .page-body is replaced.
   ====================================================================== */
.shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  background:
    radial-gradient(880px 620px at -6% -8%, #e6f1f3 0%, rgba(230,241,243,0) 62%),
    radial-gradient(760px 640px at 104% 96%, #e4f1f4 0%, rgba(228,241,244,0) 60%),
    radial-gradient(620px 520px at 96% 4%, #ffffff 0%, rgba(255,255,255,0) 62%),
    #fafcfc;
}
/* The mobile drawer backdrop. Hidden, and out of the grid, until it is needed. */
.sidebar-scrim{display:none}

/* The faint diagonal wash the design carries behind the cards. */
.shell::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(420px 900px at 88% 62%, rgba(202,229,233,.34), transparent 70%),
    radial-gradient(360px 700px at 4% 88%, rgba(206,231,235,.30), transparent 72%);
}

/* -------------------------------------------------------------- sidebar */
.sidebar{
  position:sticky;top:0;z-index:20;
  height:100vh;overflow-y:auto;overscroll-behavior:contain;
  padding:26px 22px 26px;
}
.sidebar-logo{width:96px;margin:0 0 26px 8px}
.side-group+.side-group{margin-top:14px}
.side-heading{margin:0 0 4px;padding-left:10px;font-size:11px;font-weight:600;letter-spacing:.085em;
  text-transform:uppercase;color:#8b969c}
.side-link{
  width:100%;height:42px;padding:0 14px;margin-bottom:2px;
  display:flex;align-items:center;gap:12px;
  border:0;border-radius:var(--r-sm);background:transparent;
  color:#4d585f;font-size:14px;font-weight:500;text-align:left;
  transition:background .18s,color .18s;
}
.side-link:hover{background:var(--teal-soft);color:var(--teal-dark)}
.side-link.is-active{background:var(--teal-nav);color:#fff;font-weight:600;
  box-shadow:0 10px 22px rgba(47,157,172,.26)}
.side-link.is-active:hover{background:var(--teal-nav);color:#fff}
/* A child page of the dashboard is open, e.g. Announcements. Softly marked. */
.side-link.is-trail{background:var(--teal-soft);color:var(--teal-dark);font-weight:600}

/* ---------------------------------------------------------------- header */
.main{position:relative;z-index:1;min-width:0;
  padding:var(--main-pad-t) var(--main-pad-r) 44px var(--main-pad-l)}

.topbar{display:flex;align-items:center;gap:clamp(12px,1.6vw,24px);margin-bottom:var(--gap)}
.topbar-text{min-width:0;flex:1}
.topbar-text h2{margin:0 0 2px;font-size:clamp(16px,1.4vw,19px);font-weight:700;letter-spacing:-.015em}
.topbar-text p{font-size:clamp(12.5px,1.05vw,14px);color:var(--muted)}

.top-actions{display:flex;align-items:center;flex:0 0 auto;gap:clamp(2px,.45vw,6px);
  padding:6px clamp(6px,.8vw,10px);border-radius:999px;
  background:rgba(255,255,255,.92);box-shadow:0 6px 22px rgba(28,64,72,.06)}
.top-btn{width:clamp(36px,3.1vw,42px);height:clamp(36px,3.1vw,42px);display:grid;place-items:center;border:0;border-radius:50%;
  background:transparent;color:#3d474d;transition:background .18s,color .18s}
.top-btn:hover{background:#eef6f7;color:var(--teal-dark)}
.top-btn.is-open{background:#e4f2f4;color:var(--teal-dark)}
.top-avatar{padding:0;overflow:hidden}
.top-avatar img{width:32px;height:32px;border-radius:50%;object-fit:cover;background:#e9eff1}
.top-btn[data-badge]{position:relative}
.top-btn[data-badge]::after{content:attr(data-badge);position:absolute;top:5px;right:5px;min-width:16px;height:16px;
  padding:0 4px;border-radius:999px;background:var(--purple);color:#fff;font-size:10px;font-weight:700;
  line-height:16px;text-align:center;box-shadow:0 0 0 2px #fff}

.menu-btn{display:none;width:42px;height:42px;flex:0 0 42px;place-items:center;border:0;border-radius:12px;
  background:rgba(255,255,255,.92);color:#3d474d;box-shadow:0 6px 22px rgba(28,64,72,.06)}

/* ------------------------------------------------------- identity banner */
.identity{display:flex;align-items:center;gap:clamp(10px,1.3vw,18px);flex-wrap:wrap;margin-bottom:var(--gap)}
.identity h1{font-size:clamp(26px,3.2vw,46px);font-weight:500;line-height:1.08;letter-spacing:-.028em;
  white-space:nowrap;min-width:0}
.identity h1 span{color:var(--teal)}
.pill-row{display:flex;align-items:center;gap:clamp(8px,1.25vw,18px);flex-wrap:wrap;flex:1;min-width:0}
.pill{display:inline-flex;align-items:center;gap:7px;height:clamp(36px,3.2vw,46px);
  padding:0 clamp(13px,1.7vw,24px);border-radius:999px;
  background:var(--lavender);font-size:clamp(12px,.98vw,14px);white-space:nowrap}
.pill em{font-style:normal;color:#6d6a78}
.pill b{font-weight:700;color:var(--ink)}
.edit-btn{width:clamp(40px,3.4vw,48px);height:clamp(40px,3.4vw,48px);flex:0 0 auto;aspect-ratio:1;display:grid;place-items:center;margin-left:auto;
  border:1px solid #e6e9ec;border-radius:14px;background:#fff;color:#5c666c;transition:border-color .18s,color .18s}
.edit-btn:hover{border-color:var(--teal);color:var(--teal)}

/* Inner pages use the same type treatment without the greeting. */
/* A page's title lives once, in the shell header. Inside the content area only
   section titles appear - they describe a group of cards, never repeat the
   page name. */
.sec-title{margin:0 0 14px;font-size:clamp(17px,1.6vw,23px);font-weight:700;letter-spacing:-.015em}
* + .sec-title{margin-top:clamp(20px,2.4vw,34px)}
.page-back{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;padding:0;border:0;
  background:none;color:var(--teal);font-size:13px;font-weight:600}
.page-back:hover{text-decoration:underline}

/* =================================== CARDS =============================== */
.card{background:var(--card);border-radius:var(--r-card);
  padding:var(--card-pad-y) var(--card-pad-x);box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.card-head h2{font-size:clamp(16.5px,1.45vw,20px);font-weight:700;letter-spacing:-.015em;min-width:0}
.card-head h3{font-size:16px;font-weight:700}
.link-btn{padding:0;border:0;background:none;color:var(--teal);font-size:14px;font-weight:500}
.link-btn:hover{text-decoration:underline}
.divider{height:1px;margin:16px 0 20px;background:var(--line)}

/* An item with the rounded colour bar down its left edge. */
.accent{position:relative;padding-left:16px}
.accent::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:5px;border-radius:999px;
  background:var(--teal-nav)}
.accent.accent-purple::before{background:#a44ae8}
.accent h3{font-size:16px;font-weight:700;margin-bottom:4px}
.accent p{font-size:15px;line-height:1.45;color:var(--muted)}

/* Label / value rows, used on the profile card and across the inner pages. */
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:10px 0}
.row dt,.row .row-k{font-size:14.5px;color:#7b858b;font-weight:400}
.row dd,.row .row-v{margin:0;font-size:14.5px;font-weight:700;text-align:right;color:var(--ink)}
.row-v.is-ok{color:var(--ok)}
.rows.is-lined .row+.row{border-top:1px solid var(--line-2)}

/* ============================ DASHBOARD LAYOUT =========================== */
.dash{display:grid;grid-template-columns:minmax(0,555fr) minmax(0,554fr);gap:var(--gap);align-items:start}
.dash-col{display:flex;flex-direction:column;gap:var(--gap);min-width:0}

/* ------------------------------------------------------- profile card */
.profile-plate{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:495/320;background:#e9eff1}
.profile-plate>img{width:100%;height:100%;object-fit:cover}
.profile-plate::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,104,116,0) 52%,rgba(10,104,116,.52) 74%,rgba(6,84,93,.94) 100%)}
.plate-name{position:absolute;left:26px;right:26px;bottom:22px;z-index:2;color:#fff}
.plate-name b{display:block;font-size:24px;font-weight:600;letter-spacing:-.015em}
.plate-name span{display:block;margin-top:2px;font-size:15px;color:rgba(255,255,255,.94)}

/* ------------------------------------------------------- leave bars */
.leave-item+.leave-item{margin-top:20px}
.leave-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.leave-top b{font-size:15px;font-weight:700}
.leave-top span{font-size:14.5px;color:#6f797f}
.bar{height:8px;border-radius:999px;background:#f4f8f9;overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#5fb4c2 0%,#8fd0d9 62%,#b3e2e8 100%)}

/* ------------------------------------------------------- policy list */
.policy-list{display:flex;flex-direction:column;gap:22px}
.policy{display:flex;gap:18px;align-items:flex-start;width:100%;padding:0;border:0;background:none;text-align:left}
.policy-ico{width:52px;height:52px;flex:0 0 52px;display:grid;place-items:center;border-radius:16px;
  background:var(--lavender-2);color:var(--purple)}
.policy b{display:block;font-size:16px;font-weight:700;margin-bottom:3px}
.policy p{font-size:15px;line-height:1.42;color:var(--muted)}
.policy:hover b{color:var(--purple)}

/* ---------------------------------------------------- icon-only button */
.icon-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid #e8ebee;border-radius:14px;
  background:#fff;color:#5c666c;transition:border-color .18s,color .18s,background .18s}
.icon-btn:hover{border-color:var(--teal);color:var(--teal);background:#f8fdfd}
.icon-btn[disabled]{opacity:.5;cursor:not-allowed}

/* ================================ ELEMENTS =============================== */
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;
  font-size:12.5px;font-weight:600;line-height:1.5;white-space:nowrap}
.chip-ok{background:var(--ok-soft);color:var(--ok)}
.chip-info{background:var(--info-soft);color:var(--info)}
.chip-warn{background:var(--warn-soft);color:var(--warn)}
.chip-idle{background:var(--idle-soft);color:var(--idle)}
.chip-purple{background:var(--lavender);color:#7b25cf}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 22px;border:0;
  border-radius:999px;font-size:13.5px;font-weight:600;transition:filter .18s,background .18s,border-color .18s}
.btn-primary{background:var(--teal);color:#fff;box-shadow:0 8px 20px rgba(11,147,163,.22)}
.btn-primary:hover{background:var(--teal-dark)}
.btn-purple{background:linear-gradient(90deg,var(--purple),var(--purple-2));color:#fff;
  box-shadow:0 8px 20px rgba(139,42,232,.20)}
.btn-purple:hover{filter:brightness(.96)}
.btn-ghost{background:#fff;color:#4d585f;box-shadow:inset 0 0 0 1px var(--line)}
.btn-ghost:hover{background:#f7fafb;color:var(--ink)}
.btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* Explicit column counts, because these carry the design's intent: a two
   column page stays two columns on a wide screen rather than drifting to four.
   The two breakpoints below step them down. minmax(0,1fr) lets long values
   shrink instead of forcing the track wider. */
.grid{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stack{display:flex;flex-direction:column;gap:var(--gap);min-width:0}
.week-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:10px}

.note{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-md);
  background:#f4fafb;color:#4a5c62;font-size:13.5px;line-height:1.5}
.note.is-purple{background:var(--lavender-2);color:#5b4a70}
.note .ico{color:var(--teal);margin-top:1px}
.note.is-purple .ico{color:var(--purple)}

/* Empty and pending states are a place to say what happens next. */
.empty{padding:34px 26px;text-align:center;border-radius:var(--r-md);background:#f8fafb;border:1px dashed #dbe4e7}
.empty .ico{color:#9dbcc2;margin:0 auto 12px}
.empty b{display:block;font-size:16px;font-weight:700;margin-bottom:5px}
.empty p{font-size:14px;color:var(--muted);max-width:44ch;margin:0 auto}
.empty .btn{margin-top:18px}

/* --------------------------------------------------------------- tables */
/* position:relative so visually-hidden labels inside the table are contained
   and clipped by this scroll box. Without it they position against .main and
   stretch the page horizontally on narrow screens. */
.table-wrap{position:relative;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;min-width:520px}
.table th{padding:0 14px 12px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#8b969c;text-align:left;border-bottom:1px solid var(--line)}
.table td{padding:16px 14px;font-size:14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table th:first-child,.table td:first-child{padding-left:0}
.table th:last-child,.table td:last-child{padding-right:0;text-align:right}
.table td b{font-weight:700}
.table .num{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- listing */
.list{display:flex;flex-direction:column}
.list-item{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.list-item:last-child{border-bottom:0}
.list-item .li-ico{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;border-radius:14px;
  background:var(--lavender-2);color:var(--purple)}
.list-item .li-ico.is-teal{background:#e9f5f7;color:var(--teal-dark)}
.list-item .li-body{min-width:0;flex:1}
.list-item b{display:block;font-size:15px;font-weight:700}
.list-item p{font-size:13.5px;color:var(--muted);line-height:1.45}
.list-item .li-end{margin-left:auto;display:flex;align-items:center;gap:12px;flex:0 0 auto}

/* Card that is itself a button, used for the resource and link grids. */
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:24px;border:0;
  border-radius:var(--r-md);background:#fff;box-shadow:var(--shadow);text-align:left;
  transition:transform .18s,box-shadow .18s}
.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-hi)}
.tile .t-ico{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;margin-bottom:16px;
  background:var(--lavender-2);color:var(--purple)}
.tile b{font-size:16px;font-weight:700;margin-bottom:6px}
.tile p{font-size:13.5px;line-height:1.5;color:var(--muted)}
.tile .t-meta{margin-top:14px;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint)}

/* ------------------------------------------------------------ accordion */
.acc-item{border-bottom:1px solid var(--line-2)}
.acc-item:last-child{border-bottom:0}
.acc-q{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;padding:18px 0;
  border:0;background:none;text-align:left;font-size:15.5px;font-weight:600;color:var(--ink)}
.acc-q .ico{color:var(--teal);transition:transform .22s}
.acc-item.is-open .acc-q .ico{transform:rotate(90deg)}
.acc-a{display:none;padding:0 40px 20px 0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.acc-item.is-open .acc-a{display:block}

/* ---------------------------------------------------------------- forms */
.field{margin-bottom:16px}
.field label{display:block;margin-bottom:6px;font-size:12.5px;font-weight:600;color:#3f484e}
.field input,.field select,.field textarea{width:100%;min-height:44px;padding:11px 13px;border:1px solid #dde3e6;
  border-radius:11px;background:#fff;font-size:14px;outline:none;transition:border-color .18s,box-shadow .18s}
.field textarea{min-height:96px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(11,147,163,.12)}
.field input[readonly]{background:#f6f8f9;color:#5c666c;cursor:not-allowed}
.field .hint{margin-top:6px;font-size:11.5px;line-height:1.45;color:var(--faint)}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}

/* Marks which fields a candidate could eventually edit themselves. */
.owner{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11px;
  font-weight:600;letter-spacing:.02em}
.owner-self{background:#e9f5f7;color:var(--info)}
.owner-hr{background:#f2f3f5;color:#69737a}

/* =============================== OVERLAYS ================================ */
.scrim{position:fixed;inset:0;z-index:60;display:none;background:rgba(16,38,44,.34);
  backdrop-filter:blur(2px);padding:80px 20px 20px}
.scrim.is-open{display:block}

.modal{width:min(100%,540px);margin:0 auto;background:#fff;border-radius:22px;box-shadow:0 30px 70px rgba(16,38,44,.24);
  overflow:hidden;max-height:calc(100vh - 100px);display:flex;flex-direction:column}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:24px 26px 0}
.modal-head h2{font-size:19px;font-weight:700}
.modal-head p{margin-top:4px;font-size:13.5px;color:var(--muted)}
.modal-body{padding:20px 26px 26px;overflow-y:auto}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:0 26px 26px}
.modal-x{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border:0;border-radius:50%;
  background:#f3f6f7;color:#5c666c}
.modal-x:hover{background:#e9eef0;color:var(--ink)}

/* Panels dropped from the header icons. */
.pop{position:absolute;z-index:70;top:calc(100% + 10px);right:0;width:340px;background:#fff;border-radius:18px;
  box-shadow:0 24px 60px rgba(16,38,44,.20);overflow:hidden;display:none}
.pop.is-open{display:block}
.pop-head{padding:18px 20px 12px;border-bottom:1px solid var(--line-2)}
.pop-head b{font-size:15px;font-weight:700}
.pop-head p{font-size:12.5px;color:var(--faint);margin-top:2px}
.pop-body{max-height:340px;overflow-y:auto;padding:8px}
.pop-item{display:flex;gap:12px;align-items:flex-start;width:100%;padding:11px 12px;border:0;border-radius:12px;
  background:none;text-align:left}
.pop-item:hover{background:#f4f8f9}
.pop-item .ico{color:var(--teal);margin-top:2px}
.pop-item b{display:block;font-size:13.5px;font-weight:600;line-height:1.4}
.pop-item span{display:block;font-size:12px;color:var(--faint);margin-top:2px}
.pop-foot{padding:10px 12px 12px;border-top:1px solid var(--line-2)}
.top-actions{position:relative}

.search-field{position:relative;padding:14px 16px;border-bottom:1px solid var(--line-2)}
.search-field input{width:100%;height:42px;padding:0 14px;border:1px solid #dde3e6;border-radius:11px;
  font-size:14px;outline:none}
.search-field input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(11,147,163,.12)}
.no-hits{padding:24px 16px;text-align:center;font-size:13px;color:var(--faint)}

/* --------------------------------------------------------------- toast */
/* 9.8.0: above every dialog scrim (incl. the Project Information form dialog, 1000). */
.toast{position:fixed;left:50%;bottom:30px;z-index:1100;transform:translate(-50%,18px);
  display:flex;align-items:center;gap:10px;max-width:min(92vw,440px);padding:13px 20px;border-radius:999px;
  background:#15303a;color:#fff;font-size:13.5px;box-shadow:0 18px 40px rgba(16,38,44,.28);
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s}
.toast.is-shown{opacity:1;transform:translate(-50%,0)}
.toast .ico{color:#7fdbe6}

/* A visible reminder that nothing here is real. */
.demo-flag{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  background:var(--lavender);color:#7b25cf;font-size:11.5px;font-weight:700;letter-spacing:.03em}


/* ============================ PROFILE PAGE ===============================
   Built to the supplied Candidate Profile design: a summary card, a three tab
   strip, then three field sections. Every value is injected by the renderer
   from the signed in candidate; nothing here is candidate specific.
   ====================================================================== */
.profile-card .psum{display:flex;align-items:center;gap:clamp(16px,2.2vw,32px);flex-wrap:wrap}
.psum-avatar{width:clamp(78px,7.6vw,116px);aspect-ratio:1;flex:0 0 auto;border-radius:50%;
  object-fit:cover;object-position:50% 22%;background:#eaf0f2}
.psum-text{flex:1 1 260px;min-width:0}
.psum-line{display:flex;align-items:center;gap:clamp(10px,1.2vw,16px);flex-wrap:wrap}
.psum-line h3{font-size:clamp(21px,2.35vw,33px);font-weight:600;letter-spacing:-.022em;line-height:1.12}
.id-pill{display:inline-flex;align-items:center;gap:7px;padding:6px clamp(12px,1.2vw,17px);border-radius:999px;
  background:var(--lavender);font-size:clamp(12px,1vw,14px);white-space:nowrap}
.id-pill em{font-style:normal;color:#6d6a78}
.id-pill b{font-weight:700}
.psum-meta{margin-top:7px;font-size:clamp(13.5px,1.25vw,17px);color:#5d666c;overflow-wrap:anywhere}
.psum-joined{margin-top:6px;font-size:clamp(13px,1.05vw,15px);font-weight:500;color:var(--teal)}

.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(5px,.75vw,12px);
  margin:var(--gap) 0;padding:clamp(7px,.8vw,12px);border-radius:clamp(16px,1.7vw,26px);
  background:#fff;box-shadow:var(--shadow);
  /* Sticky so the strip stays reachable while reading the sections below it.
     Turned off on small screens, where it would cost too much vertical room. */
  position:sticky;top:10px;z-index:12}
.tab{height:clamp(42px,3.5vw,52px);padding:0 8px;border:0;border-radius:999px;background:transparent;
  font-size:clamp(12px,1.05vw,15.5px);font-weight:700;color:var(--ink-2);line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;transition:background .18s,color .18s}
.tab:hover{background:#f1f7f8}
.tab.is-active{background:#d9ecee;color:var(--teal-dark)}

.profile-sections{display:flex;flex-direction:column;gap:var(--gap)}
.profile-section{scroll-margin-top:110px}
.profile-section:focus{outline:none}

/* Label above value, two per row, left aligned - the field pattern the design
   uses in all three sections. */
/* Two columns, as the design specifies - not auto-fit, which would slip into
   three on a wide screen and lose the intended rhythm. */
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(17px,2vw,28px) clamp(20px,3vw,48px)}
.fg{min-width:0}
.fg-k{display:block;margin-bottom:6px;font-size:clamp(12.5px,1.05vw,15px);color:#77828a}
.fg-v{display:block;font-size:clamp(13.5px,1.15vw,16.5px);font-weight:700;line-height:1.4;
  overflow-wrap:anywhere}

.edit-ghost{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border:0;border-radius:12px;
  background:transparent;color:#5c666c;transition:background .18s,color .18s}
.edit-ghost:hover{background:#f1f7f8;color:var(--teal-dark)}

/* ============================= WELCOME KIT ===============================
   Decorated document cards, alternating teal and purple, exactly as the
   supplied Welcome Kit design lays them out. The wash is drawn in CSS so no
   extra image assets are needed.
   ====================================================================== */
.kit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,296px),1fr));gap:var(--gap)}
.kit-card{position:relative;overflow:hidden;border-radius:clamp(16px,1.5vw,22px);
  padding:clamp(19px,2vw,28px);box-shadow:0 8px 26px rgba(28,64,72,.055)}
.kit-teal{background:#e9f4f5}
.kit-purple{background:#f4eefb}

.kit-deco{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.kit-deco::before,.kit-deco::after{content:"";position:absolute}
.kit-deco::before{width:170%;height:130%;left:-24%;top:44%;transform:rotate(-13deg);
  border-radius:46% 54% 38% 62%/52% 40% 60% 48%}
.kit-deco::after{width:86%;height:96%;right:-28%;bottom:-42%;border-radius:50%}
.kit-teal .kit-deco::before{background:rgba(255,255,255,.62)}
.kit-teal .kit-deco::after{background:rgba(146,201,209,.26)}
.kit-purple .kit-deco::before{background:rgba(255,255,255,.68)}
.kit-purple .kit-deco::after{background:rgba(186,151,226,.20)}

.kit-body{position:relative;z-index:1;display:flex;flex-direction:column;height:100%}
.kit-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:clamp(10px,1.2vw,16px)}
.kit-top h3{min-width:0;font-size:clamp(16.5px,1.5vw,21px);font-weight:700;letter-spacing:-.015em;
  line-height:1.25}
.kit-dl{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border:0;border-radius:11px;
  background:transparent;color:#3f4a50;transition:background .18s,color .18s}
.kit-dl:hover{background:rgba(255,255,255,.86);color:var(--teal-dark)}
.kit-card p{margin-bottom:clamp(16px,1.9vw,26px);font-size:clamp(13.5px,1.1vw,15.5px);line-height:1.5;
  color:#5b656b}
.kit-view{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:9px;
  height:clamp(40px,3.3vw,48px);padding:0 clamp(15px,1.5vw,22px);border:0;border-radius:999px;
  font-size:clamp(12.5px,1.05vw,15px);font-weight:500;color:#2c3438;transition:filter .18s}
.kit-teal .kit-view{background:rgba(176,215,220,.66)}
.kit-purple .kit-view{background:rgba(226,207,245,.74)}
.kit-view:hover{filter:brightness(.96)}

/* The demo document shown behind View and Sign. */
.sign-doc{padding:clamp(18px,2vw,24px);margin-bottom:16px;border:1px solid var(--line);border-radius:16px;
  background:#fbfdfd}
.sign-doc h3{margin:12px 0 4px;font-size:19px;font-weight:700}
.sign-doc .sign-for{margin-bottom:14px;font-size:13px;color:var(--faint)}
.sign-doc p{font-size:13.5px;line-height:1.6;color:var(--muted)}
.sign-doc p + p{margin-top:10px}

/* ============================== RESPONSIVE ===============================
   Most of the scaling is already done by the clamp() tokens at the top of this
   file, which cover roughly 1280px to 1920px - and browser zoom, since zooming
   changes the effective viewport width. The breakpoints below only handle the
   things a fluid value cannot: when a layout has to change shape.
   ====================================================================== */

/* Laptops around 1366x768. The sidebar must not eat the content area, and the
   greeting, pills and edit button all have to sit on one line. */
@media (max-width:1400px){
  .sidebar{padding:20px 16px 22px}
  .sidebar-logo{width:86px;margin-bottom:20px}
  .side-link{height:40px;gap:10px;padding:0 12px;font-size:13.5px}
  .side-heading{font-size:10.5px}
  .side-group+.side-group{margin-top:12px}
  .main{padding-bottom:36px}
}

/* Three-across grids lose too much width here. */
@media (max-width:1180px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* The dashboard's two columns stop being readable before this. */
@media (max-width:1080px){
  .dash{grid-template-columns:minmax(0,1fr)}
  .profile-plate{aspect-ratio:16/8}
}

/* Everything multi-column becomes a single column. */
@media (max-width:820px){
  .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
}

/* Sidebar becomes a drawer. Below here the shell is a single column. */
@media (max-width:980px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .menu-btn{display:grid}
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:30;width:min(84vw,280px);height:100dvh;
    padding:22px 18px 24px;background:#fbfdfd;border-right:1px solid var(--line);
    transform:translateX(-100%);transition:transform .24s ease;
    box-shadow:0 0 60px rgba(16,38,44,.16)}
  .sidebar.is-open{transform:none}
  .sidebar-scrim{position:fixed;inset:0;z-index:29;background:rgba(16,38,44,.32)}
  .sidebar-scrim.is-open{display:block}
  .side-link{height:44px;font-size:14px}
  .identity h1{white-space:normal}
  .edit-btn{margin-left:0}
  .tabs{position:static}
}

/* Phone and small tablet. The header reflows to two rows so the title always
   has the full width and can never collide with the action cluster. */
@media (max-width:760px){
  .topbar{flex-wrap:wrap;row-gap:12px}
  .top-actions{margin-left:auto}
  .topbar-text{order:3;flex:1 0 100%}
  .topbar-text h2{font-size:19px}
  .topbar-text p{font-size:13.5px}
  .card{border-radius:20px}
  .identity{gap:10px}
  .identity h1{font-size:clamp(24px,7vw,30px);flex:1 0 100%}
  .pill{height:36px;padding:0 14px;font-size:12.5px}
  .row{flex-direction:column;align-items:flex-start;gap:2px}
  .row dd,.row .row-v{text-align:left}
  .pop{width:min(92vw,340px)}
  .scrim{padding:70px 12px 12px}
  .tabs{grid-template-columns:minmax(0,1fr);gap:4px;border-radius:18px}
  .field-grid{grid-template-columns:minmax(0,1fr)}
  .tab{height:44px;font-size:14px}
  .psum{justify-content:flex-start}
  .modal-foot{flex-wrap:wrap}
  .modal-foot .btn{flex:1 1 140px}
}

/* Very narrow. Keep everything reachable rather than pretty. */
@media (max-width:420px){
  .top-btn{width:34px;height:34px}
  .psum-avatar{width:72px}
  .kit-view,.btn{width:100%;justify-content:center}
  .kit-view{align-self:stretch}
  .btn-row{flex-direction:column;align-items:stretch}
  .demo-flag{width:auto}
}

/* Short viewports, e.g. 1366x768 and 1280x720. The sidebar scrolls on its own
   rather than clipping Help Desk off the bottom. */
@media (max-height:800px) and (min-width:981px){
  .sidebar{padding-top:16px}
  .sidebar-logo{margin-bottom:16px}
  .side-link{height:38px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important}
}

@media print{
  .sidebar,.topbar,.page-back,.edit-btn,.tabs{display:none}
  .shell{display:block}
  .card{box-shadow:none;border:1px solid var(--line)}
}

/* v4.0.2 · Project Form on first login and dashboard updates */
.dash-updates-list{display:flex;flex-direction:column;gap:12px}
.dash-update{padding:13px 14px;border:1px solid #e2eaf0;border-radius:14px;background:#fcfdff}
.dash-update strong{display:block;font-size:14px;color:#233b46}
.dash-update p{white-space:normal;overflow-wrap:anywhere;color:#53616c;font-size:13px;line-height:1.55;margin:7px 0}
.dash-update small{font-size:11px;color:#6b7782}
.dash-update.pending-form{background:#faf6ff;border-color:#e9dbfa}
.dash-update.pending-form .btn{margin-top:7px;white-space:normal;text-align:center}
.project-form-success{font-size:12px;font-weight:600;color:#09764d;align-self:center}
.form-hint{margin-top:12px;color:#65717a;font-size:12.5px;line-height:1.55}




/* v4.0.22 – global, fixed scrolling notices above the Candidate Portal shell. */
#candidateNoticeBar[hidden]{display:none!important}
.candidate-notice-bar{position:fixed;z-index:95;top:0;left:0;right:0;height:38px;
  background:#0b93a3;color:#fff;overflow:hidden;display:flex;align-items:center;
  box-shadow:0 2px 8px rgba(0,79,87,.15);font-size:13px;font-weight:600;line-height:1.2}
.candidate-notice-marquee{display:flex;align-items:center;width:max-content;white-space:nowrap;
  animation:rang-notice-scroll var(--notice-duration,34s) linear infinite;will-change:transform}
.candidate-notice-group{display:inline-flex;align-items:center;flex:0 0 auto;min-width:100vw;gap:52px;
  padding:0 52px 0 24px;box-sizing:border-box}
.candidate-notice-item{display:inline-flex;align-items:center;gap:9px}
.candidate-notice-separator{opacity:.8;font-size:18px;line-height:1}
.candidate-notice-bar:hover .candidate-notice-marquee,
.candidate-notice-bar:focus-within .candidate-notice-marquee{animation-play-state:paused}
@keyframes rang-notice-scroll{to{transform:translateX(-50%)}}
#candidateAppShell.notice-visible{padding-top:38px}
#candidateAppShell.notice-visible .sidebar{top:38px;height:calc(100vh - 38px)}
@media(max-width:860px){#candidateAppShell.notice-visible .sidebar{top:0;height:auto}}
@media(prefers-reduced-motion:reduce){.candidate-notice-marquee{animation:none;max-width:100%;overflow-x:auto;
  scrollbar-width:thin}.candidate-notice-group[data-copy="true"]{display:none}}

/* v4.0.24: accessible, compact self-service profile photo editor. */
.profile-photo-control{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;gap:9px}
.profile-photo-control .psum-avatar{width:clamp(78px,7.6vw,116px);height:clamp(78px,7.6vw,116px);flex:none;object-fit:cover}
.profile-photo-change{font-size:12px;white-space:nowrap;padding:7px 11px;min-height:36px}
.profile-photo-editor{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.profile-photo-editor .field{flex:1 1 210px;min-width:0}
.profile-photo-editor input[type="file"]{width:100%;max-width:100%;font-size:13px;padding:10px;white-space:normal}
.profile-photo-preview{display:block;width:144px;height:144px;flex:none;border-radius:50%;object-fit:cover;border:3px solid #e1eff1;background:#edf4f5}
@media(max-width:520px){.profile-photo-editor{flex-direction:column;align-items:stretch}.profile-photo-preview{align-self:center;width:120px;height:120px}.profile-photo-control{width:auto}}

/* v8.2: mobile touch and ticker accessibility. The manual ticker pause control was removed. */
#candidateNoticeBar:focus-within .candidate-notice-marquee{animation-play-state:paused}
#candidateNoticeBar:focus-within{outline:2px solid #fff;outline-offset:-2px}
@media(max-width:980px){
 #candidateAppShell.notice-visible .sidebar{top:38px!important;height:calc(100dvh - 38px)!important}
 .sidebar-scrim.is-open{z-index:29}
 .menu-btn,.top-btn{min-width:44px;min-height:44px}
 .sidebar .side-link{min-height:44px;height:auto;padding-top:11px;padding-bottom:11px}
}
@media(max-width:760px){
 #view-app .main{padding:14px 12px 35px;min-width:0}
 #view-app .topbar{gap:8px}
 #view-app .top-actions{max-width:calc(100vw - 76px);gap:0;padding:3px}
 #view-app .pop{position:fixed;left:12px;right:12px;top:75px;width:auto;max-width:none;
   max-height:calc(100dvh - 96px);overflow-y:auto;z-index:100}
 #view-app .pop-body{max-height:min(55dvh,400px)}
 #view-app .identity .pill-row{width:100%;flex:1 1 100%;gap:6px}
 #view-app .identity .pill{max-width:100%;min-width:0;white-space:normal;height:auto;min-height:38px;
    padding:7px 12px;overflow-wrap:anywhere}
 #view-app .identity .pill b{overflow-wrap:anywhere}
 #view-app .card,#view-app .panel{min-width:0;max-width:100%}
 #view-app img,#view-app iframe,#view-app canvas{max-width:100%}
 #view-app .tabs{max-width:100%;overflow-x:auto}
 #view-app input,#view-app select,#view-app textarea{max-width:100%;font-size:16px}
 #view-app button,#view-app a.btn{touch-action:manipulation}
}
@media(max-width:400px){
 #view-app .topbar-text h2{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
 #candidateNoticeBar .candidate-notice-marquee{animation:none!important;max-width:100%;overflow-x:auto}
 #candidateNoticeBar .candidate-notice-group[data-copy="true"]{display:none!important}
}

/* Update 6: real Leave + Help Desk workflows */
.tile .tile-action{margin-top:18px;align-self:flex-start}
.helpdesk-ticket-list{display:flex;flex-direction:column;gap:14px}
.helpdesk-ticket{border:1px solid var(--line);border-radius:16px;padding:16px;background:#fbfdfd}
.helpdesk-ticket-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.helpdesk-ticket-head b{font-size:14px;color:var(--ink)}
.helpdesk-ticket-head p{margin-top:4px;font-size:12px;color:var(--muted)}
.helpdesk-thread{display:flex;flex-direction:column;gap:10px;padding-top:12px}
.helpdesk-message{max-width:88%;padding:11px 13px;border-radius:13px;background:#f1f4f5}
.helpdesk-message.is-hr{margin-left:auto;background:var(--lavender-2)}
.helpdesk-message>div{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px}
.helpdesk-message b{font-size:12px}
.helpdesk-message time{font-size:10.5px;color:var(--faint)}
.helpdesk-message p{font-size:13px;line-height:1.5;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:760px){.helpdesk-ticket-head{flex-direction:column}.helpdesk-message{max-width:100%}.tile .tile-action{width:100%}}

/* Update 8 candidate company branding. Rang uses its existing logo; brands
   without an uploaded logo use a clean text wordmark instead of a broken image. */
.candidate-brand-wordmark{font-weight:850;font-size:18px;line-height:1.15;letter-spacing:.01em;color:var(--purple);margin:2px 0 26px;max-width:170px}
@media(max-width:980px){.candidate-brand-wordmark{margin:0 0 14px;font-size:16px}}

/* 9.8.0: generic company logo sizing (replaces the KVRA / QSP rules). Every
   logo keeps its proportions; wide logos (3:1 or wider, marked .is-wide by
   applyCandidateBrand) get more width. The sign-in gradient comes from the
   --login-grad-* properties of the company's colours. */
.sidebar-logo{height:auto;object-fit:contain;object-position:left center}
.sidebar-logo.is-wide{width:164px;max-height:56px;margin-left:2px}
@media(max-width:980px){.sidebar-logo.is-wide{width:138px;max-height:48px}}

/* V8.3 targeted holiday refinements */
.holiday-card-top{display:flex;justify-content:flex-end;margin-bottom:5px}.holiday-note{margin-top:7px!important;color:var(--muted)!important;font-size:13px!important;line-height:1.45}.holiday-list-item.is-past{opacity:.62}.holiday-list-item.is-past .li-ico{filter:grayscale(.2)}

/* Audit fix: quick link tiles without an approved address are not interactive. */
.tile.is-unavailable { cursor: default; opacity: .72; }
.tile.is-unavailable:hover { transform: none; box-shadow: none; }
a.tile { text-decoration: none; color: inherit; }
/* Candidate reply box under a Help Desk ticket */
.helpdesk-reply { margin-top: 12px; }
.helpdesk-reply textarea { width: 100%; resize: vertical; }

/* 9.8.0: the Project Information form dialog - the real form in the first
   sign-in pop-up (app.js openModal(html, true): #scrim.is-form-dialog +
   #modal.project-form-modal). Replaces the old full-screen Google Form iframe
   layer. Sized for the form; only the body scrolls; the header and the footer
   with "Complete later / Save draft / Submit" stay reachable, also on phones
   (safe-area). It sits above the notice bar; the toast sits above it. */
#scrim.is-form-dialog{z-index:1000;padding:8px;overflow:hidden}
#scrim.is-form-dialog.is-open{display:flex;align-items:center;justify-content:center}
#scrim #modal.project-form-modal{box-sizing:border-box;position:relative;display:flex;flex-direction:column;overflow:hidden;
  flex:0 1 auto;margin:auto;width:min(920px,calc(100vw - 16px));max-width:calc(100vw - 16px);min-width:0;
  height:auto;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);border-radius:18px}
#scrim #modal.project-form-modal .modal-head{flex:0 0 auto;padding:18px 22px 12px;border-bottom:1px solid var(--line-2)}
#scrim #modal.project-form-modal .modal-body{flex:1 1 auto;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:16px 22px 18px}
#scrim #modal.project-form-modal .modal-foot{flex:0 0 auto;padding:10px 22px max(12px,env(safe-area-inset-bottom));
  border-top:1px solid var(--line-2);background:#fff}
.pf-popup-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 10px;width:100%;min-width:0}
.pf-popup-actions #pfSaveState{margin-right:auto!important}
.pf-popup-actions #pfSaveState:empty{display:none}
.pf-popup-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.pf-popup-intro p{margin:0;font-size:13px;line-height:1.5}
.pf-popup-host .note{margin-bottom:14px}
#projectFormNative{scroll-margin-top:56px}
@media(max-width:700px){
  #scrim #modal.project-form-modal{border-radius:14px}
  #scrim #modal.project-form-modal .modal-head{padding:14px 14px 10px}
  #scrim #modal.project-form-modal .modal-head h2{font-size:17px}
  #scrim #modal.project-form-modal .modal-body{padding:12px 14px 14px}
  #scrim #modal.project-form-modal .modal-foot{padding:8px 14px max(10px,env(safe-area-inset-bottom))}
  .pf-popup-actions .btn{flex:1 1 40%;width:auto;min-width:0;min-height:44px;white-space:normal;text-align:center;justify-content:center}
  .pf-popup-actions .btn-primary{flex-basis:100%}
  .pf-popup-actions #pfSaveState{flex:1 1 100%}
  .pf-popup-intro{flex-direction:column;gap:8px}
}
@media(max-height:500px){#scrim #modal.project-form-modal .modal-head{padding-top:8px;padding-bottom:6px}
  #scrim #modal.project-form-modal .modal-head p{display:none}}
/* Approved project information state */
.project-form-approved{padding:14px 16px;border:1px solid #bfe6d3;background:#f1fbf6;border-radius:12px;color:#0b5b3c}
.project-form-details summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
/* Notifications: unread state and dismiss control */
.notif-row{display:flex;align-items:stretch}
.notif-row .pop-item{flex:1 1 auto;min-width:0}
.notif-row.is-unread .pop-item b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#0f8f8f;margin-right:7px;vertical-align:middle}
.notif-dismiss{flex:0 0 44px;min-height:44px;border:0;background:transparent;font-size:20px;color:#6b7782;cursor:pointer;border-radius:10px}
.notif-dismiss:hover,.notif-dismiss:focus-visible{background:#eef3f6;color:#233b46}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Scrolling notice controls (pause, resume, view all) */
.candidate-notice-controls{position:absolute;right:6px;top:3px;display:flex;gap:4px;z-index:2}
.candidate-notice-controls button{min-height:32px;padding:0 10px;border-radius:8px;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.18);color:inherit;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.candidate-notice-controls button:focus-visible{outline:2px solid #fff;outline-offset:1px}
.candidate-notice-bar.is-paused .candidate-notice-marquee{animation-play-state:paused}
.candidate-notice-bar{padding-right:170px}
@media(max-width:520px){.candidate-notice-bar{padding-right:118px}.candidate-notice-controls button{padding:0 8px}}
.notice-dialog-list{margin:0;padding-left:18px;line-height:1.6}
/* Touch targets on phones */
@media(max-width:700px){#view-app .btn,#view-app .pop-item,#view-app .nav-item,#view-app .icon-btn,#view-app select{min-height:44px}}

/* 9.1.3: notice text no longer shows through the Pause / View all buttons. */
.candidate-notice-controls{top:0;right:0;bottom:0;align-items:center;padding:0 6px 0 14px;background:inherit;
  box-shadow:-12px 0 10px -6px rgba(0,0,0,.18)}

/* 9.1.3: short laptop screens (1366x768, 1280x720) fit every sidebar link without scrolling. */
@media (max-height:800px) and (min-width:981px){
  .sidebar-logo{margin-bottom:10px}
  .side-group+.side-group{margin-top:8px}
  .side-heading{margin-bottom:2px}
  .side-link{height:34px;margin-bottom:1px}
}

/* 9.1.3: on phones each table row becomes a stacked card, labelled from the
   column headings, so Status and HR comment are visible without sideways scrolling. */
@media (max-width:600px){
  #view-app .table{min-width:0}
  #view-app .table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  #view-app .table,#view-app .table tbody,#view-app .table tr,#view-app .table td{display:block;width:100%}
  #view-app .table tr{padding:10px 0;border-bottom:1px solid var(--line-2)}
  #view-app .table tr:last-child{border-bottom:0}
  #view-app .table td,#view-app .table td:first-child,#view-app .table td:last-child{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:6px 0;border-bottom:0;text-align:right;overflow-wrap:anywhere}
  #view-app .table td[data-label]::before{content:attr(data-label);flex:0 0 auto;max-width:45%;text-align:left;
    font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8b969c}
}

/* 9.2.0 installable-app control */
.pwa-install-action[hidden]{display:none!important}.pwa-install-action{cursor:pointer}

/* =========================== 9.3.0 additions =========================== */
/* Employment ended: read-only grace-period banner (every page). */
.lifecycle-banner{display:flex;gap:12px;align-items:flex-start;margin:0 0 18px;padding:14px 18px;border-radius:var(--r-md);
  background:var(--warn-soft);border:1px solid #f1d9a8;color:#6b4708;font-size:14px;line-height:1.5}
.lifecycle-banner[hidden]{display:none}
.lifecycle-banner .ico{flex:0 0 auto;color:var(--warn);margin-top:1px}
.lifecycle-banner b{font-weight:700}
.lifecycle-banner time{font-weight:700}
/* Controls that start a workflow while the portal is read-only. */
.is-locked{opacity:.5;cursor:not-allowed;box-shadow:none}

/* Shared small form pieces. */
.btn-sm{height:34px;padding:0 14px;font-size:12.5px}
.req{color:var(--danger)}
.hint-inline{font-weight:500;color:var(--faint);font-size:12px}
.field-error{margin-top:5px;font-size:12px;font-weight:600;color:var(--danger)}
.field-error:empty{display:none}
.field input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px rgba(198,40,40,.10)}
.check{display:flex;align-items:flex-start;gap:9px;padding:6px 0;font-size:14px;line-height:1.4;cursor:pointer}
.field label.check{display:flex;margin:0;font-size:14px;font-weight:500;color:var(--ink)}
.check input,.field .check input{width:18px;height:18px;min-height:0;flex:0 0 18px;margin:1px 0 0;padding:0;accent-color:var(--teal)}
.check input:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
fieldset.field,.absence-form fieldset{border:0;margin:0 0 16px;padding:0;min-width:0}
fieldset.field legend,.absence-form legend{margin-bottom:6px;font-size:12.5px;font-weight:600;color:#3f484e}
.field-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}

/* Leave: full day / hourly switch. */
.leave-unit{display:flex;flex-wrap:wrap;gap:4px 22px}
.leave-unit legend{flex:1 0 100%}

/* Absence Form page. */
.absence-intro{margin:0 0 18px;font-size:14px;line-height:1.55;color:var(--muted);max-width:75ch}
.absence-form fieldset{padding:16px 18px 2px;border:1px solid var(--line-2);border-radius:var(--r-md);margin-bottom:16px}
.absence-form legend{padding:0 6px;font-size:13px;font-weight:700;color:var(--ink)}
.absence-reasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 18px;margin-bottom:12px}
.absence-preview{margin-top:20px}
.absence-preview[hidden]{display:none}
.absence-preview canvas{display:block;width:100%;max-width:640px;height:auto;border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow)}
.absence-preview .hint{margin-bottom:10px;font-size:12.5px;color:var(--faint)}

/* LinkedIn reminder. */
.linkedin-copy{font-size:14px;line-height:1.6;color:var(--muted)}
.linkedin-copy.linkedin-note{margin-top:10px;font-size:12.5px;color:var(--faint)}

@media(max-width:760px){
  .field-3,.absence-reasons{grid-template-columns:minmax(0,1fr)}
  .absence-form fieldset{padding:14px 12px 2px}
  .lifecycle-banner{padding:12px 14px;font-size:13.5px}
}
/* ===================== 9.4.0 Timesheet entry ===================== */
.ts-weeknav{margin:-4px 0 4px}
.ts-table .ts-hours{width:96px;min-height:40px;padding:8px 10px;border:1px solid #dde3e6;border-radius:10px;font:inherit;font-size:15px;
  text-align:right;background:#fff;color:var(--ink)}
.ts-table .ts-hours:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(11,147,163,.12)}
.ts-table .ts-hours[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px rgba(198,40,40,.10)}
.ts-table tr.is-blocked td{color:#9aa4a9}
.ts-table .ts-blocked{display:block;font-size:12px;color:#9aa4a9;margin-top:2px}
.ts-table tfoot th,.ts-table tfoot td{padding-top:14px;border-top:2px solid var(--line);font-size:15px}
.ts-table .ts-err{display:block;text-align:right}
.ts-versions{margin-top:18px;font-size:14px}
.ts-versions summary{cursor:pointer;font-weight:600;color:var(--teal-dark)}
.ts-versions ol{margin:10px 0 0 18px;padding:0;display:grid;gap:8px;line-height:1.5}
.ts-confirm{font-size:15px;line-height:1.6;margin:0}
/* 9.8.0: Regular hours and a separate Overtime section, locked rows, totals */
.ts-section{margin-top:18px}
.ts-section + .ts-section{margin-top:26px;padding-top:18px;border-top:1px dashed var(--line)}
.ts-section-title{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-dark)}
.ts-hint{margin:0 0 10px}
.ts-table tr.is-locked td{color:#7d878c}
.ts-table .ts-locked{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:#f0f0f5;color:#5d666b;font-size:12px;font-weight:600}
.ts-totals{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0;padding:0}
.ts-totals div{flex:1 1 120px;min-width:0;padding:12px 14px;border-radius:12px;background:#f6f8f9}
.ts-totals dt{font-size:12px;color:var(--muted, #66707a);margin:0}
.ts-totals dd{margin:2px 0 0;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.ts-totals .ts-total-all{background:#eef7f8}
.ts-form-err:empty{display:none}
.ts-form-err{margin-top:12px}
@media(max-width:760px){
  .ts-table .ts-hours{width:100%;max-width:140px}
  .ts-table tfoot tr{display:flex;justify-content:space-between}
  .ts-weeknav .btn{flex:1 1 auto}
}
/* 9.5.0 native Project Information form */
.note.is-amber{background:#fff7e6;color:#5a3d00;border:1px solid #efcf8f}
.pf-group{border:0;margin:0 0 18px;padding:0}
.pf-group>legend{font-weight:700;font-size:14px;margin-bottom:10px;padding:0}
.pf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.pf-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.pf-field label{font-size:13px;font-weight:600}
.pf-field input,.pf-field select{width:100%;min-width:0}
.pf-field [aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
.pf-wide{grid-column:1/-1}
.pf-radios{border:0;padding:0;margin:0;grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 22px}
.pf-radios legend{font-size:13px;font-weight:600;margin-bottom:6px;width:100%}
.pf-radios label{display:flex;gap:8px;align-items:center;font-size:14px}
.pf-summary .row dt{min-width:42%}
.pf-history summary{cursor:pointer;font-weight:600;font-size:13px}
.pf-history ul{margin:8px 0 0;padding-left:18px;font-size:13px;color:var(--muted)}
@media (max-width:720px){.pf-grid{grid-template-columns:1fr}.pf-actions .btn{flex:1 1 auto}}

/* 9.8.0 ME Connect (assets/js/me-connect.js) */
.mc-card + .mc-card{margin-top:22px}
.mc-intro{margin:0 0 16px;font-size:14px;line-height:1.55;color:var(--muted)}
.mc-manager{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-md);background:#f8fafb;border:1px solid var(--line-2);margin-bottom:16px;min-width:0}
.mc-manager b{display:block;font-size:15px}
.mc-manager span{display:block;font-size:13.5px;color:var(--muted);overflow-wrap:anywhere}
.mc-manager .mc-src{margin-top:6px;font-size:12px}
.mc-missing{margin-bottom:14px}
.mc-flag{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;background:var(--warn-soft);color:var(--warn);font-size:12px;font-weight:600}
.mc-window{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:0 14px}
.mc-window .field{min-width:0}
.mc-window input{width:100%;min-width:0}
.mc-sub{margin:4px 0 8px;font-size:13px;font-weight:700;letter-spacing:.02em}
.mc-review{margin:0}
.mc-review .row dt{min-width:38%}
.mc-review dd{overflow-wrap:anywhere;white-space:pre-wrap}
.mc-err{margin:10px 0 0;font-size:13px;font-weight:600;color:var(--danger)}
.mc-err:empty{display:none}
.mc-list td{overflow-wrap:anywhere}
.mc-list .mc-meta{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}
.mc-history{margin-top:6px}
.mc-history summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--teal)}
.mc-history ol{margin:6px 0 0;padding-left:18px;font-size:12.5px;color:var(--muted);text-align:left}
.mc-count{font-size:13px;color:var(--muted);margin:0 0 10px}
@media (max-width:720px){.mc-window{grid-template-columns:1fr}.mc-card .btn-row .btn{flex:1 1 auto}}

/* 9.8.0: very narrow phones (320 px) - keep the top-bar buttons inside the screen */
@media (max-width:340px){#view-app .topbar{gap:4px}#view-app .top-actions{gap:0;padding:2px}#view-app .top-btn{width:32px;height:32px;min-width:32px;min-height:32px}#view-app .menu-btn{min-width:40px}}

/* 9.8.2: Consultant Connect Program card (dashboard; Rang Technologies and Rang Healthcare only) */
.cc-body{display:flex;align-items:flex-start;gap:16px}
.cc-thumb{flex:0 0 auto;width:104px;height:150px;object-fit:cover;object-position:top;border-radius:12px;border:1px solid var(--line);background:var(--lavender-2)}
.cc-text{flex:1 1 auto;min-width:0}
.cc-text p{margin:0 0 14px;color:var(--muted);font-size:14px;line-height:1.55}
.cc-text .btn{min-height:44px;max-width:100%}
@media (max-width:380px){.cc-body{gap:12px}.cc-thumb{width:80px;height:116px}.cc-text .btn{width:100%;padding:0 14px}}
/* 9.8.2: long values (e.g. a long work e-mail) wrap instead of widening the page on 320 px phones */
.row dd,.row .row-v{min-width:0;overflow-wrap:anywhere}