/* =====================================================================
   AIDA mobile kit -- one style sheet for every AIDA portal site (2026-10-10).
   Used by: jobs.aidalabs.ca (job-seeker pages), recruiter.aida-job-search.ca and
   recruiters.aidalabs.ca. Source: aida-website-handoff/aida-mobile-kit/.
   Devices: iPhone 12 mini 375, iPad mini 744 / 1133. Desktop (>=1024) unchanged
   except the 3D trading cards. The script sets <html data-aida-kit="jobs|recruiter">.

   1. The AIDA dropdown (the AIDA LABS product menu, toolbox.aidalabs.ca),
      themed per site with the --kd-* variables below
   2. Job-seeker header + button-row dropdowns
   3. Recruiter header
   4. Layout on phones/tablets (job-seeker pages, then recruiter pages)
   5. 3D trading cards (job-seeker pages)
   ===================================================================== */

/* ---------- 1. The AIDA dropdown ---------- */
html[data-aida-kit="jobs"]{
  --kd-bg:#fff; --kd-text:var(--ink,#241D1B); --kd-sub:#6A5A52; --kd-band:var(--coral,#E8664A);
  --kd-label:#B8452C; --kd-outline:2px solid var(--ink,#241D1B); --kd-shadow:6px 6px 0 var(--ink,#241D1B);
  --kd-hover:var(--cream,#FBF3E2); --kd-focus:var(--coral,#E8664A); --kd-rule:rgba(36,29,27,.14);
  --kd-here:var(--coral,#E8664A); --kd-caret:var(--coral,#E8664A)}
html[data-aida-kit="recruiter"]{
  --kd-bg:#141416; --kd-text:var(--cream,#F8F2DF); --kd-sub:rgba(248,242,223,.72); --kd-band:var(--steel,#4E7EA6);
  --kd-label:var(--yellow,#E4B93C); --kd-outline:1.5px solid rgba(248,242,223,.22); --kd-shadow:6px 6px 0 var(--brass,#AD8A54);
  --kd-hover:#22262C; --kd-focus:var(--steel-light,#8FB6D6); --kd-rule:rgba(248,242,223,.14);
  --kd-here:var(--yellow,#E4B93C); --kd-caret:var(--steel-light,#8FB6D6)}
.kd-brand{display:none}
.kd{position:absolute;z-index:300;top:calc(100% + 10px);left:0;
  width:min(400px,calc(100vw - 32px));max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--kd-bg);color:var(--kd-text);border:var(--kd-outline);border-top:6px solid var(--kd-band);
  border-radius:12px;box-shadow:var(--kd-shadow);padding:8px;text-align:left}
.kd[hidden]{display:none !important}
.kd .kd-label{font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--kd-label);padding:10px 12px 4px}
.kd .kd-label ~ .kd-label{border-top:1.5px solid var(--kd-rule);margin-top:6px;padding-top:12px}
.kd-item{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:center;border-radius:4px 8px 8px 4px;border-left:4px solid transparent}
.kd-item > .kd-main{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;gap:2px 12px;padding:10px 12px;min-height:52px;
  text-decoration:none;color:var(--kd-text);border-radius:8px;width:100%;box-sizing:border-box}
.kd-item > button.kd-main{all:unset;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:center;
  padding:10px 12px;min-height:52px;cursor:pointer;color:var(--kd-text);border-radius:8px;width:100%}
.kd-main b{grid-column:2;font-size:17px;font-weight:700;line-height:1.25}
.kd-main small{grid-column:2;font-size:15px;line-height:1.35;color:var(--kd-sub)}
.kd-sw{grid-row:span 2;align-self:start;margin-top:5px;width:14px;height:14px;border-radius:3px;border:1.5px solid var(--ink,#241D1B);background:var(--sw,#E8664A)}
.kd-main:not(:has(.kd-sw)) b,.kd-main:not(:has(.kd-sw)) small{grid-column:1 / -1}
.kd-chip{margin-right:10px;white-space:nowrap;font-size:14px;font-weight:700;color:var(--kd-focus);text-decoration:none;
  border:1.5px solid currentColor;border-radius:999px;padding:6px 12px;min-height:36px;display:inline-flex;align-items:center;opacity:.9}
.kd-item:hover,.kd-item:focus-within{background:var(--kd-hover)}
.kd-item.kd-here{border-left-color:var(--kd-here);background:var(--kd-hover)}
.kd a:focus-visible,.kd button:focus-visible{outline:none;box-shadow:inset 0 0 0 2.5px var(--kd-focus)}
.kd-caret{display:inline-block;font-style:normal;color:var(--kd-caret);margin-left:10px;transition:transform .15s}
[aria-expanded="true"] > .kd-caret{transform:rotate(180deg)}
.kd-brand{background:none;border:0;border-radius:10px;padding:8px 10px;margin-left:-10px;min-height:48px;cursor:pointer;white-space:nowrap;font:inherit;color:var(--kd-text)}
.kd-brand:focus-visible{outline:3px solid var(--kd-focus);outline-offset:2px}
/* a row of buttons that no longer fits becomes a trigger + the same panel */
.kd-shell{position:relative;width:100%}
.kd-shell > .kd-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:52px;padding:0 18px;
  background:var(--kd-bg);color:var(--kd-text);border:var(--kd-outline);border-radius:10px;box-shadow:3px 3px 0 var(--ink,#241D1B);
  font-family:inherit;font-weight:700;font-size:17px;cursor:pointer}
.kd-shell > .kd-trigger[hidden]{display:none}
.kd-shell > .kd-trigger:focus-visible{outline:3px solid var(--kd-focus);outline-offset:3px}
.kd-shell > .kd{width:100%;left:0;right:0}
.kd.kd-row{display:block !important}
.kd.kd-row[hidden]{display:none !important}
.kd .kd-rowitem{display:grid !important;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:center;width:100% !important;
  padding:10px 12px !important;min-height:52px;margin:0 !important;text-align:left;border-radius:8px;cursor:pointer;
  background:none !important;border:0 !important;box-shadow:none !important;transform:none !important;color:var(--kd-text) !important;font:inherit}
.kd .kd-rowitem:hover{background:var(--kd-hover) !important}
.kd .kd-rowitem b{grid-column:2;font-size:17px;font-weight:700;line-height:1.25}
.kd .kd-rowitem small{grid-column:2;font-size:15px;line-height:1.35;color:var(--kd-sub)}

/* ---------- 2. Job-seeker header (<=1023px: the brand opens the dropdown) ---------- */
@media (max-width:1023px){
  header{overflow:visible !important}
  header .wrap.nav{position:relative;padding-left:16px;padding-right:16px}
  header .brand-group{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;position:relative}
  header .brand-group > a.brand,header nav.navlinks{display:none !important}
  html[data-aida-kit="jobs"] .kd-brand{display:inline-flex;align-items:center;background:none;border:0;border-radius:10px;padding:8px 10px;margin-left:-10px;
    min-height:48px;cursor:pointer;color:var(--ink,#241D1B);white-space:nowrap}
  html[data-aida-kit="jobs"] .kd-brand:hover,html[data-aida-kit="jobs"] .kd-brand[aria-expanded="true"]{background:rgba(36,29,27,.06)}
  html[data-aida-kit="jobs"] .kd-brand:focus-visible{outline:3px solid var(--coral,#E8664A);outline-offset:2px}
  html[data-aida-kit="jobs"] .kd-brand .brand{font-size:clamp(21px,5.8vw,26px);pointer-events:none}
  html[data-aida-kit="jobs"] .kd-brand .kd-caret{font-size:18px}
  header .nav-actions .nav-btn{min-height:44px;font-size:16px;display:inline-flex;align-items:center}
}
@media (max-width:599px){header .nav-actions{display:none !important}}


/* ---------- 3. Recruiter header ---------- */
@media (max-width:1023px){
  header{overflow:visible !important}
  header .nav-inner{position:relative}
  header .nav-top-row{position:relative;flex-wrap:nowrap !important}
  header .nav-top-row > a.logo,header nav{display:none !important}
  html[data-aida-kit="recruiter"] .kd-brand{display:inline-flex;align-items:center;background:none;border:0;border-radius:10px;padding:8px 10px;margin-left:-10px;
    min-height:48px;cursor:pointer;white-space:nowrap;font:inherit;color:var(--cream,#F8F2DF)}
  html[data-aida-kit="recruiter"] .kd-brand:hover,html[data-aida-kit="recruiter"] .kd-brand[aria-expanded="true"]{background:rgba(248,242,223,.08)}
  html[data-aida-kit="recruiter"] .kd-brand:focus-visible{outline:3px solid var(--steel-light,#8FB6D6);outline-offset:2px}
  html[data-aida-kit="recruiter"] .kd-brand .logo{font-size:clamp(17px,4.7vw,22px);pointer-events:none}
  html[data-aida-kit="recruiter"] .kd-brand .kd-caret{font-size:18px}
  header .nav-actions .btn-sm{min-height:44px;display:inline-flex;align-items:center}
}
@media (max-width:599px){header .nav-top-row .nav-actions{display:none !important}}


/* ---------- 4 + 5. Layout, tables and 3D cards ---------- */
/* ---------- 3. Phone + tablet layout fixes ---------- */
@media (max-width:1023px){
  main .wrap,.page-wrap > .wrap{padding-left:16px;padding-right:16px}
  .card-section-row{align-items:flex-start}
  .section-side .muted,.section > .muted{font-size:17px}
  .card-hint,.pager,.pager span,.pager button,.table-note{font-size:15px}
  .section-side .btn-sm,.am-btnrow .btn{font-size:16px;min-height:46px;padding:0 16px}
  .scan-table td a + div,.scan-table td .muted,.scan-table td small{font-size:15px}
}
@media (min-width:641px) and (max-width:1023px){
  .card-col{flex:0 0 210px;width:210px;position:sticky;top:16px}
}
@media (max-width:760px){
  /* table rows already stack as cards; make them readable */
  .scan-table tr{padding:14px 0;position:relative}
  .scan-table td{font-size:17px;padding:4px 16px}
  .scan-table td[data-label]:not(:first-child)::before{font-size:14px;opacity:.7}
  .scan-table td.score-cell{position:absolute;top:12px;right:14px;width:auto !important;padding:0}
  .scan-table td.score-cell::before{content:"Score " !important;font-size:14px !important;opacity:1 !important}
  .scan-table td.score-cell{background:var(--ink,#241D1B);color:var(--cream,#FBF3E2);border-radius:999px;padding:4px 12px !important;font-weight:800}
  .scan-table tr:has(td.score-cell:first-child) td:nth-child(2){padding-right:110px}
  .posting-title-link{font-size:16px !important;line-height:1.3}
  .pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
  .pager > span{grid-column:2;grid-row:1;text-align:center;white-space:nowrap}
  .pager button{min-height:44px;font-size:16px;padding:0 14px}
  .pager button:not([id$="Prev"]):not([id$="Next"]){display:none}
  .pager button[id$="Prev"]{grid-column:1;grid-row:1;justify-self:start}
  .pager button[id$="Next"]{grid-column:3;grid-row:1;justify-self:end}
}
@media (max-width:640px){
  .card-col{width:min(230px,64vw)}
}

@media (max-width:1023px){
  .doc-viewer-btns-inline button,.doc-viewer-btns-inline a{font-size:16px !important;min-height:46px;padding:0 18px !important}
}

/* ---------- 4. 3D trading cards (AIDA Labs toolbox .al-pop, adapted) ----------
   Each AIDA trading-card image (800x1129, card centred on a cream margin) is
   split into three layers cut from the same picture: card body (back),
   illustration panel (lifted 34px) and name bar (lifted 56px). Tilt follows
   mouse, finger or keyboard focus; an idle sway keeps it alive on touch. */
@property --am-rx{syntax:"<angle>";inherits:true;initial-value:0deg}
@property --am-ry{syntax:"<angle>";inherits:true;initial-value:0deg}
.am3d{perspective:1000px;display:block;position:relative;-webkit-tap-highlight-color:transparent;line-height:0}
.am3d > img.am3d-src{display:none !important}
.am3d-stage{
  display:block;position:relative;width:100%;aspect-ratio:590/918;transform-style:preserve-3d;
  transform:rotateX(var(--am-rx)) rotateY(var(--am-ry));
  animation:am3d-idle 7s ease-in-out infinite;
}
.am3d.am3d-live .am3d-stage{animation:none}
@keyframes am3d-idle{0%,100%{--am-rx:5deg;--am-ry:-9deg}50%{--am-rx:-4deg;--am-ry:9deg}}
.am3d-layer{position:absolute;display:block;overflow:hidden}
.am3d-layer img{position:absolute;display:block;max-width:none;height:auto;pointer-events:none;border-radius:0 !important}
.am3d-base{inset:0;border-radius:3.2% / 2.1%;transform:translateZ(0);box-shadow:0 28px 40px -16px rgba(36,29,27,.55)}
.am3d-panel{left:5.42%;top:6.86%;width:89%;height:76.7%;border-radius:2px;transform:translateZ(34px);
  box-shadow:0 14px 22px -8px rgba(36,29,27,.45),0 0 0 2px rgba(215,175,89,.85)}
.am3d-bar{left:5.42%;top:90.4%;width:89%;height:7.2%;border-radius:6px;transform:translateZ(56px);
  box-shadow:0 10px 16px -6px rgba(36,29,27,.5)}
.am3d-glare{position:absolute;inset:0;border-radius:3.2% / 2.1%;pointer-events:none;transform:translateZ(57px);mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--am-gx,30%) var(--am-gy,20%),rgba(255,255,255,.8),rgba(255,255,255,0) 58%)}
.am3d-floor{position:absolute;left:14%;right:14%;bottom:-26px;height:22px;border-radius:50%;background:rgba(36,29,27,.4);
  filter:blur(12px);transform:translateZ(-30px);pointer-events:none}
.am3d:focus-visible{outline:3px solid var(--coral,#E8664A);outline-offset:8px;border-radius:12px}
.am3d:active .am3d-stage{scale:1.03}
.card-frame.am3d,.card-frame.am3d:hover{filter:none !important;transform:none !important}
.card-col .card-hint{margin-top:34px;display:block}
@media (prefers-reduced-motion:reduce){.am3d-stage{animation:none}}

/* profile page desktop: side cards keep their 680px height */
.side-col .am3d{width:437px;flex:0 0 437px}

/* profile page: the two side cards come in as a pair on phone + tablet */
.am-card-pair{display:none}
@media (max-width:1023px){
  .am-card-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:520px;margin:18px auto 36px}
  .am-card-pair .am3d{cursor:pointer;border:0;background:none;padding:0;width:100%}
  .am-card-pair .am-busted-tag{display:block;margin:30px auto 0;background:var(--ink,#241D1B);color:var(--cream,#FBF3E2);border:0;border-radius:999px;
    width:100%;white-space:nowrap;padding:10px 12px;font-family:inherit;font-weight:700;font-size:15px;line-height:1.2;box-shadow:3px 3px 0 var(--coral,#E8664A);min-height:44px}
}
.busted-side .busted-card-tag{white-space:normal;max-width:160px;font-size:15px}

/* ---------- 2. Layout on phones + tablets ---------- */
@media (max-width:1023px){
  .hero-img-wrap img{max-width:min(100%,460px)}
  table.roster th{font-size:14px}
}
/* roster tables become one card per row on phones */
@media (max-width:760px){
  .roster-table-wrap{overflow:visible;border:0;background:none}
  table.roster{min-width:0 !important;background:none}
  table.roster thead{display:none}
  table.roster,table.roster tbody,table.roster tr,table.roster td{display:block;width:100%}
  table.roster tr{background:var(--cream,#F8F2DF);border:2px solid var(--charcoal,#2B2B2B);border-left:6px solid var(--steel,#4E7EA6);
    border-radius:12px;margin-bottom:14px;padding:10px 0;box-shadow:4px 4px 0 var(--brass,#AD8A54)}
  table.roster td{border:0 !important;padding:5px 16px !important;font-size:17px}
  table.roster td[data-label]::before{content:attr(data-label);display:block;font-size:14px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--steel-deep,#2F5871);margin-bottom:1px}
  table.roster td:empty{display:none}
  table.roster td .btn{width:100%;text-align:center;margin-top:6px}
}
@media (max-width:760px){
  /* outline buttons are cream-on-black by default; on the cream row cards they need the dark version */
  table.roster td .btn-outline{color:var(--charcoal,#2B2B2B) !important;border-color:var(--charcoal,#2B2B2B) !important;background:transparent !important;
    box-shadow:3px 3px 0 var(--steel,#4E7EA6) !important;min-height:46px;display:flex;align-items:center;justify-content:center}
}