/* =====================================================================
   careers-v3 mockup (2026-10-14): Career Explore refinement and a white
   sidebar. Blue Rail tokens only (navy, blue, sky and their alphas):
   blue is kept for actions, the active place, links and focus; content
   sits on white; world illustrations sit on a calm neutral tile. Worlds
   are told apart by their pictures, not by new colours.
   ===================================================================== */
:root{ --cx-tile:#F3F6FA; --cx-line:#E6EAF0; --cx-ease:cubic-bezier(.16,1,.3,1) }

/* =============================== SIDEBAR ===============================
   White, a hairline on the right, navy text, the active item on pale blue
   in brand blue. The pale-blue pill slides between items (transitions.js
   carries its place across page loads); the active icon settles in with a
   small scale. Collapse keeps every icon in the same column. */
.side{background:#fff; color:var(--navy); border-right:1px solid var(--cx-line);
  --ink:var(--navy); --ink-2:rgba(16,34,64,.8); --ink-3:rgba(16,34,64,.66); --ink-4:rgba(16,34,64,.55);
  --hair:var(--cx-line); --hair-2:rgba(16,34,64,.12); --hair-3:rgba(16,34,64,.24); --acc:var(--blue);
  --sky-06:rgba(157,202,227,.14); --sky-10:rgba(157,202,227,.24)}
.side-bg{display:none}
.side :focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.side .side-toggle{color:var(--ink-3); border-color:var(--cx-line); background:#fff}
.side .side-toggle:hover{color:var(--blue); border-color:var(--blue-40)}
.side .nav-a{padding:11px 14px 11px 12px; gap:14px; border-radius:12px; color:var(--ink-3); font-weight:500}
.side .nav-a .i{width:22px; height:22px; stroke-width:1.6; color:rgba(16,34,64,.5); transition:color .25s var(--cx-ease), transform .35s var(--cx-ease), fill .25s}
.side .nav-a:hover{background:var(--cx-tile); color:var(--navy)}
.side .nav-a:hover .i{color:var(--navy)}
.side .nav-a.on{background:var(--blue-24); color:var(--blue); font-weight:600}
/* Airbnb-style icons: thin outlines at rest; the active one fills with pale
   blue, draws a little bolder, and hops once when it becomes active */
.side .nav-a.on .i{color:var(--blue); fill:rgba(48,112,182,.16); stroke-width:2; transform:scale(1.06)}
.side .nav-a:hover:not(.on) .i{transform:translateY(-1px)}
@keyframes nav-pop{
  0%{transform:scale(.82) translateY(2px)}
  40%{transform:scale(1.2) translateY(-3px) rotate(-7deg)}
  65%{transform:scale(.96) translateY(0) rotate(3deg)}
  85%{transform:scale(1.09) rotate(0)}
  100%{transform:scale(1.06)}}
.side .nav-a.pop .i{animation:nav-pop .6s cubic-bezier(.2,.8,.2,1)}
.side .nav-m{background:rgba(16,34,64,.07); color:var(--ink-2)}
.side .nav-a.on .nav-m{background:rgba(48,112,182,.14); color:var(--blue)}
.side-nav > .ind{background:var(--blue-24); border-radius:12px}
.side-nav[data-ind] .nav-a.on, .side-nav[data-ind] .nav-a.on:hover{background:transparent}
/* while the pill travels the old colours hold, so the blue arrives with it */
.side-nav[data-travel] .nav-a.on, .side-nav[data-travel] .nav-a.on .i{color:var(--ink-3); fill:none; transform:none}
.side-nav[data-travel] .nav-a.on .nav-m{background:rgba(16,34,64,.07); color:var(--ink-2)}
.side-foot{border-top:1px solid var(--cx-line)}
.side .nav-out:hover{background:var(--cx-tile)}
.side .me-btn{background:var(--cx-tile); border-color:var(--cx-line)}
.side .av{background:var(--blue); color:#fff}

/* collapse: the width eases, labels fade, icons never move */
.shell{transition:grid-template-columns .38s var(--cx-ease)}
.side .nav-l, .side .nav-m{transition:opacity .2s var(--cx-ease)}
.side-min .side .nav-a, .side-min .nav-a{justify-content:flex-start; padding:11px 12px}
/* the rail's tooltips and focus rings must not be clipped by the list */
.side-min .side-nav{overflow:visible}
.side-min [data-tip]:hover::after, .side-min [data-tip]:focus-visible::after{content:attr(data-tip); position:absolute; left:calc(100% + 12px); top:50%; translate:0 -50%;
  white-space:nowrap; background:var(--navy); color:#fff; font-size:.78rem; font-weight:600; padding:6px 10px; border-radius:8px; pointer-events:none; z-index:50;
  box-shadow:0 6px 16px -8px rgba(16,34,64,.5)}
@media (prefers-reduced-motion:reduce){
  .shell, .side .nav-a .i, .side .nav-l, .side .nav-m{transition:none}
  .side .nav-a.on .i{transform:none}
  .side .nav-a.pop .i{animation:none}
}

/* =============================== CAREERS: landing =============================== */
.main-careers .pg-head{margin-bottom:18px}
.cx-saved{gap:8px}
.cx-saved:hover{transform:none}
.cx-saved em{font-style:normal; min-width:22px; height:22px; padding:0 7px; border-radius:99px; display:grid; place-items:center; font-size:.76rem; font-weight:700; background:var(--blue); color:#fff}
.main-careers .ctop{margin:0 0 28px}

/* Picked for you: compact cards in one row, arrows where there is more */
.cx-picks{margin:0 0 36px}
.cx-sh{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.cx-sh .v2-h{margin:0}
.cx-arrows{display:flex; gap:6px}
.cx-arr{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#fff; border:1px solid var(--cx-line); color:var(--navy); transition:border-color .2s, color .2s, opacity .2s}
.cx-arr:not(.is-next) .i{transform:rotate(180deg)}
.cx-arr .i{width:16px; height:16px}
.cx-arr:hover:not([disabled]){border-color:var(--blue); color:var(--blue)}
.cx-arr[disabled]{opacity:.35; cursor:default}
.cx-scroll{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px, 1fr); gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 2px;
  padding:2px 2px 10px; margin:-2px -2px 0; scrollbar-width:thin; scrollbar-color:var(--hair-2) transparent}
@media (min-width:1400px){ .cx-scroll{grid-auto-columns:calc((100% - 36px) / 4)} }
.pk2{position:relative; scroll-snap-align:start; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:12px; padding:14px 10px 14px 14px;
  border-radius:16px; background:#fff; border:1px solid var(--cx-line); cursor:pointer; transition:border-color .2s, box-shadow .2s}
.pk2:hover{border-color:var(--blue-40); box-shadow:0 6px 18px -12px rgba(16,34,64,.3)}
.pk2:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.pk2-ic{width:42px; height:42px; border-radius:12px; background:var(--cx-tile); color:var(--navy)}
.pk2-ic .i{width:20px; height:20px}
.pk2-b{min-width:0; display:flex; flex-direction:column; gap:2px}
.pk2-b b{font-size:.95rem; font-weight:600; line-height:1.3; color:var(--navy); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pk2-b small{font-size:.8rem; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pk2-b em{margin-top:6px; font-style:normal; font-size:.76rem; font-weight:600; color:var(--ink-3)}
.pk2-b em.b-strong{color:var(--blue)}
.pk2-save{margin:-4px 0 0}

/* Explore worlds: white cards, the illustration on a calm tile */
.cx-worlds .v2-h{margin:0 0 14px}
.main-careers .pc.pw{background:#fff; border:1px solid var(--cx-line); border-radius:18px; padding:8px 8px 14px; transition:border-color .2s, box-shadow .25s var(--cx-ease), transform .25s var(--cx-ease)}
.main-careers .pc.pw:hover{border-color:var(--blue-40); box-shadow:0 10px 26px -18px rgba(16,34,64,.4); transform:translateY(-2px)}
.main-careers .pw-ph{background:var(--cx-tile); aspect-ratio:16 / 10; border-radius:12px}
.main-careers .pw-ph svg{max-height:82%}
.main-careers .pw-t{margin:12px 8px 2px}
.main-careers .pw-m{margin:2px 8px 0}
.main-careers .pw .pc-nirf{color:var(--blue); background:#fff; box-shadow:0 0 0 1px var(--cx-line)}
.main-careers .wtiles.is-list .wt{background:#fff; border:1px solid var(--cx-line)}
.main-careers .wtiles.is-list .wt-art{background:var(--cx-tile)}
@media (prefers-reduced-motion:reduce){ .main-careers .pc.pw:hover{transform:none} }

/* search results: the same white tiles */
.main-careers .ct{background:#fff; border:1px solid var(--cx-line)}
.main-careers .ct .ct-ic{background:var(--cx-tile); color:var(--navy)}

/* =============================== CAREERS: a world =============================== */
.main-careers .wh.wh2{background:#fff; border:1px solid var(--cx-line); box-shadow:none; padding:18px 18px 18px 32px; grid-template-columns:minmax(0,1fr) 240px; gap:24px; margin-bottom:16px; min-height:0}
.main-careers .wh2 .wh-b{padding:0}
.main-careers .wh2 .wh-art{min-height:0; height:132px; border-radius:16px; background:var(--cx-tile)}
.main-careers .wh2 .wh-t{font-size:clamp(1.8rem, 1.3rem + 1.4vw, 2.4rem)}
.main-careers .wh2 .wh-p{color:var(--ink-2)}
.main-careers .wh-fit{display:inline-block; vertical-align:middle; margin-left:10px; font-size:.8rem; letter-spacing:0}
.main-careers .wh2 .wh-s{margin-top:18px}
.main-careers .wh2 .wh-s{display:flex; flex-wrap:wrap; gap:6px 0; margin-top:16px}
.main-careers .wh2 .wh-s > *{padding:0 14px; border:0; border-left:1px solid var(--cx-line); border-radius:0; background:none; box-shadow:none; height:auto; font-size:.9rem; color:var(--ink-3)}
.main-careers .wh2 .wh-s > :first-child{padding-left:0; border-left:0}
.main-careers .wh2 .wh-s b{color:var(--navy); font-weight:600}
.main-careers .wh2 .wh-s a{color:var(--blue); font-weight:500}
.main-careers .wh2 .wh-s a b{color:var(--blue)}

/* one control bar: tracks as underline tabs, then layout, search and order */
.main-careers .wnav{background:rgba(244,247,251,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--cx-line)}
.main-careers .wtab{height:44px; padding:0 4px; margin-right:18px; border-radius:0; background:none; color:var(--ink-3); font-weight:500}
.main-careers .wtab small{color:var(--ink-4)}
.main-careers .wtab:hover{color:var(--navy); background:none}
.main-careers .wtab.on{background:none; color:var(--blue); font-weight:600}
.main-careers .wtab.on small{color:var(--blue)}
.main-careers .wtab.on::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:var(--blue)}
.main-careers .wnav-tabs > .ind{background:none; border-radius:0}
.main-careers .wnav-tabs > .ind::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:var(--blue)}
.main-careers .wnav-tabs[data-ind] .wtab.on::after{display:none}
.main-careers .wnav-tabs[data-travel] .wtab.on, .main-careers .wnav-tabs[data-travel] .wtab.on small{color:var(--ink-3)}
/* the track row fades at its edges when there is more to scroll */
.main-careers .wnav-tabs{mask-image:linear-gradient(90deg, #000 calc(100% - 40px), transparent); -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 40px), transparent)}
/* search and order sit in their own row above the tracks */
.main-careers .wtools{display:flex; align-items:center; gap:12px; margin:0 0 14px}
.main-careers .wtools .wn-search{flex:1; max-width:480px; height:44px; background:#fff; border:1px solid var(--cx-line); border-radius:999px}
.main-careers .wtools .wf-sort{margin-left:auto}
.main-careers .wnav{justify-content:flex-start}
.main-careers .wnav-tabs{flex:1}

/* track sections: shorter, calmer */
.main-careers .wsec{padding:28px 0 6px}
.main-careers .wsec-h{margin-bottom:14px}
.main-careers .wsec-h .ic-md{width:40px; height:40px; border-radius:12px; background:var(--cx-tile); color:var(--navy)}
.main-careers .wsec-h .ic-md .i{width:20px; height:20px}
.main-careers .wsec-t{font-size:1.12rem}
.main-careers .wsec-a{color:var(--ink-3); font-size:.9rem}

/* career rows: one height, the row opens, the bookmark saves */
.main-careers .wk{min-height:60px; padding:10px 8px 10px 16px; border-radius:12px; border-color:var(--cx-line); transition:border-color .2s, box-shadow .2s}
.main-careers .wk:hover{border-color:var(--blue-40); box-shadow:0 4px 14px -10px rgba(16,34,64,.35)}
.main-careers .wk:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.main-careers .wk-t{font-size:.92rem}
.main-careers .wgrid.is-list{grid-template-columns:minmax(0,1fr); gap:0; border:1px solid var(--cx-line); border-radius:14px; background:#fff; overflow:hidden}
.main-careers .wgrid.is-list .wk{border:0; border-radius:0; border-top:1px solid var(--cx-line); min-height:56px; box-shadow:none}
.main-careers .wgrid.is-list .wk:first-child{border-top:0}
.main-careers .wgrid.is-list .wk:hover{background:var(--cx-tile)}
.main-careers .wgrid.is-list .wk-b{display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 14px}
.main-careers .wgrid.is-list .wk-b > *{margin:0}

/* study routes under a track: a quiet line of route chips */
.main-careers .wsr{margin-top:12px; padding:12px 0 0; border-radius:0; background:none; border-top:1px dashed var(--cx-line)}
.main-careers .wsr-t{font-size:.82rem; color:var(--ink-3)}
.main-careers .wsr-c{background:#fff; border:1px solid var(--cx-line); box-shadow:none}
.main-careers .wsr-c:hover{border-color:var(--blue-40)}

/* =============================== CAREER DETAILS ===============================
   The same three tabs; the header is white with navy type, so the page
   behind and the dialog read as one product. Full screen on small windows. */
.kp-hero{background:#fff; color:var(--navy); padding:30px 76px 22px 32px; border-bottom:1px solid var(--cx-line)}
.kp-ic{background:var(--cx-tile); color:var(--navy); box-shadow:none; width:60px; height:60px; border-radius:18px}
.kp-ic .i{width:28px; height:28px}
.kp-hero .sx-crumb{color:var(--blue)} .kp-hero .sx-crumb span{color:var(--ink-4)}
.kp-hero .sx-back{color:var(--ink-3)} .kp-hero .sx-back:hover{color:var(--navy)}
.kp-hero .sx-t{color:var(--navy)}
.kp-hero .cc-fit{background:var(--blue-24); color:var(--blue)}
.kp-q{color:var(--ink-2)}
.kp-glance{gap:0; margin-top:20px; border:1px solid var(--cx-line); border-radius:14px; overflow:hidden}
.kp-glance li{border-radius:0; background:#fff; box-shadow:none; border-left:1px solid var(--cx-line); padding:12px 16px 12px 12px}
.kp-glance li:first-child{border-left:0}
.kp-glance li > span{background:var(--cx-tile); color:var(--navy)}
.kp-glance b{color:var(--navy)}
.kp-glance small{color:var(--ink-3)}
.dlg-career:has(.kp-hero) .dlg-x{color:var(--navy); background:var(--cx-tile)}
.dlg-career:has(.kp-hero) .dlg-x:hover{background:var(--blue-24); color:var(--blue)}
.kp-tabs button[aria-selected="true"]{color:var(--blue)}
.kp-tabs button[aria-selected="true"]::after, .kp-tabs > .ind::after{background:var(--blue)}
.kp-scene{background:var(--cx-tile)}
@media (max-width:720px){
  .dlg.dlg-career{width:100vw; max-width:100vw; height:100dvh; max-height:none; margin:0; border-radius:0}
  .dlg.dlg-career .dlg-in, .dlg.dlg-career:has(.kp-hero) .dlg-in{height:100dvh; max-height:none; border-radius:0}
  .kp-hero{padding:22px 60px 18px 18px}
  .kp-glance{grid-template-columns:minmax(0,1fr)}
  .kp-glance li{border-left:0; border-top:1px solid var(--cx-line)}
  .kp-glance li:first-child{border-top:0}
}

@media (max-width:1100px){
  .main-careers .wh.wh2{grid-template-columns:minmax(0,1fr)}
  .main-careers .wh2 .wh-art{display:none}
}