/* Careers pages — GENERATED by scripts/build_careers.py. Do not hand-edit.

The design export styles every element inline, so this file carries only what
an inline style cannot express: the dialect's style-hover / style-focus
declarations, which are emitted as [data-hov]/[data-foc] rules keyed by the
converter. Everything else lives in the JSX exactly as the export authored it.
*/
html,body{margin:0;padding:0;background:#000;color:#fff;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#fff;text-decoration:none}
a:hover{color:#fff}
@keyframes surge-crawl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes surge-crawl-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* Pinterest picker — search progress.
   A skeleton grid plus a sweeping bar, rather than a spinner: the shape of what
   is coming is visible while it loads, so the dialog does not appear to freeze
   on a slow upstream (the proxy retries once on a 5xx, which can take seconds). */
@keyframes ca-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
@keyframes ca-pulse{0%,100%{opacity:.30}50%{opacity:.66}}
.ca-sweep{animation:ca-sweep 1.05s ease-in-out infinite}
.ca-skel{animation:ca-pulse 1.3s ease-in-out infinite}
.ca-skel:nth-child(3n+2){animation-delay:.16s}
.ca-skel:nth-child(3n+3){animation-delay:.32s}
/* Newly loaded results announce themselves: they fade and lift in, and hold a
   white edge for a beat. A count in small text under the grid was too easy to
   miss — this puts the feedback on the tiles themselves. */
@keyframes ca-fresh-in{
  0%{opacity:0;transform:translateY(8px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes ca-fresh-edge{
  0%,55%{outline-color:#fff}
  100%{outline-color:var(--hairline)}
}
.ca-fresh{
  animation:ca-fresh-in .34s ease-out both, ca-fresh-edge 1.9s ease-out .34s both;
  outline:1px solid var(--hairline);
  outline-offset:-2px;
}
.ca-fresh:nth-child(3n+2){animation-delay:.05s,.39s}
.ca-fresh:nth-child(3n){animation-delay:.1s,.44s}

@media (prefers-reduced-motion:reduce){
  .ca-sweep,.ca-skel{animation:none}
  .ca-skel{opacity:.4}
  /* No movement, but the new tiles still need to be identifiable. */
  .ca-fresh{animation:none;outline:1px solid #fff}
}
@media (prefers-reduced-motion:reduce){
  [style*="surge-crawl"]{animation:none !important}
}

/* The /careers index is not part of the export (it has no careers index), so
   its one hover state is written here rather than keyed by the converter. */
[data-rolecard]:hover{background:rgba(255,255,255,.03)}

[data-hov="0"]:hover{border-bottom-color:#fff}
[data-hov="1"]:hover{color:#fff; border-bottom-color:#fff}
[data-hov="2"]:hover{border-color:#fff}
[data-hov="3"]:hover{background:#fff; color:#000}
[data-hov="4"]:hover{opacity:1; background:rgba(0,0,0,.35)}
[data-hov="5"]:hover{background:#000; color:#fff}
[data-foc="0"]:focus{border-color:#fff}