@font-face {
  font-family: 'KCTCS Widget Work Sans';
  src: url('./assets/work-sans-regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'KCTCS Widget Work Sans';
  src: url('./assets/work-sans-semibold.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'KCTCS Widget Work Sans';
  src: url('./assets/work-sans-bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

kctcs-job-outlook {
  display: block;
  width: 100%;
  max-width: 1197px;
  min-width: 0;
  margin-inline: auto;
  container: kctcs-outlook / inline-size;
  font-family: 'KCTCS Widget Work Sans', Arial, sans-serif;
  text-align: left;
  color: #fff;
  line-height: 1.4;
  font-weight: 400;
}
kctcs-job-outlook,
kctcs-job-outlook *,
kctcs-job-outlook *::before,
kctcs-job-outlook *::after {
  box-sizing: border-box;
}
kctcs-job-outlook [hidden] {
  display: none !important;
}
/* Scope content rules through the shell so host section typography does not override them. */
kctcs-job-outlook .kjo-shell :is(h2, h3, h4, p, ul, li) {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
}
kctcs-job-outlook .kjo-shell button {
  appearance: none;
  border: 0;
  box-shadow: none;
  margin: 0;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  color: inherit;
  background: none;
}
kctcs-job-outlook .kjo-shell button:disabled {
  cursor: default;
}
kctcs-job-outlook .kjo-shell :focus-visible {
  outline: 3px solid #e7a614;
  outline-offset: 4px;
}
kctcs-job-outlook .kjo-shell img {
  display: block;
  border: 0;
  max-width: none;
}
/* Interpolate between the 342px mobile widget and 1197px desktop design.
   A length-valued step keeps these calculations compatible with ordinary calc(). */
kctcs-job-outlook .kjo-shell {
  --kjo-growth: clamp(0px, calc((100cqi - 342px) / 855), 1px);
  --kjo-pad: calc(21px + 15 * var(--kjo-growth));
  --kjo-gap: calc(20px + 16 * var(--kjo-growth));
  position: relative;
  padding: var(--kjo-pad);
  background: #00467f;
  border-radius: 25px;
  isolation: isolate;
}
kctcs-job-outlook .kjo-shell .kjo-background {
  display: flex;
  flex-direction: column;
  gap: var(--kjo-gap);
  min-width: 0;
}
kctcs-job-outlook .kjo-shell .kjo-title {
  font-size: calc(26px + 22 * var(--kjo-growth));
  line-height: calc(32px + 24 * var(--kjo-growth));
  font-weight: 700;
  overflow-wrap: anywhere;
}
kctcs-job-outlook .kjo-shell .kjo-switch {
  display: flex;
  align-self: flex-start;
  align-items: stretch;
  padding: calc(4px + 2 * var(--kjo-growth));
  border: 2px solid #e7a614;
  background: #fff;
  border-radius: 43px;
}
kctcs-job-outlook .kjo-shell .kjo-switch button {
  padding: 2px calc(9px + var(--kjo-growth));
  min-height: calc(28px + 4 * var(--kjo-growth));
  font-size: calc(16px + 2 * var(--kjo-growth));
  line-height: calc(20px + 8 * var(--kjo-growth));
  font-weight: 700;
  color: #00467f;
  border-radius: 30px;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}
kctcs-job-outlook .kjo-shell .kjo-switch [aria-selected='true'] {
  background: #00467f;
  color: #fff;
}
kctcs-job-outlook .kjo-shell .kjo-view {
  min-width: 0;
  opacity: 1;
  transition: opacity 140ms ease;
}
kctcs-job-outlook .kjo-shell .kjo-view.is-leaving {
  opacity: 0;
}
kctcs-job-outlook .kjo-shell .kjo-metrics {
  display: grid;
  gap: calc(16px + 8 * var(--kjo-growth)) calc(16px + 20 * var(--kjo-growth));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: 'median median' 'rate grads' 'openings openings' 'post post' 'entry entry';
}
kctcs-job-outlook .kjo-shell .kjo-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: calc(12px + 4 * var(--kjo-growth));
  border-radius: 25px;
  background: #002856;
  text-align: center;
  font-weight: 700;
}
kctcs-job-outlook .kjo-shell .kjo-label {
  font-size: calc(16px + 8 * var(--kjo-growth));
  line-height: calc(20px + 11 * var(--kjo-growth));
  overflow-wrap: anywhere;
}
kctcs-job-outlook .kjo-shell .kjo-value {
  font-size: calc(28px + 20 * var(--kjo-growth));
  line-height: calc(36px + 20 * var(--kjo-growth));
  overflow-wrap: anywhere;
  max-width: 100%;
}
kctcs-job-outlook .kjo-shell .kjo-median {
  grid-area: median;
  min-height: calc(104px + 170 * var(--kjo-growth));
  gap: calc(5px + 19 * var(--kjo-growth));
}
kctcs-job-outlook .kjo-shell .kjo-median .kjo-label {
  font-size: calc(16px + 16 * var(--kjo-growth));
  line-height: calc(20px + 20 * var(--kjo-growth));
}
/* Delay the large wage type until the two-column layout has room for it. */
kctcs-job-outlook .kjo-shell .kjo-median .kjo-value {
  font-size: clamp(32px, min(14cqi, max(48px, calc(48px + (100cqi - 560px) * 48 / 637))), 96px);
  line-height: clamp(56px, calc(56px + (100cqi - 560px) * 40 / 637), 96px);
}
kctcs-job-outlook .kjo-shell .kjo-rate {
  grid-area: rate;
  gap: 16px;
  min-height: calc(193px + 81 * var(--kjo-growth));
}
kctcs-job-outlook .kjo-shell .kjo-median,
kctcs-job-outlook .kjo-shell .kjo-rate {
  margin-bottom: calc(9 * var(--kjo-growth));
}
kctcs-job-outlook .kjo-shell .kjo-rate .kjo-label {
  max-width: min(100%, calc(125px + 300 * var(--kjo-growth)));
}
kctcs-job-outlook .kjo-shell .kjo-ring {
  position: relative;
  width: calc(93px + 82.637 * var(--kjo-growth));
  aspect-ratio: 1;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
/* Feather the edges by about one pixel instead of cutting between whole pixels.
   Intersecting the masks keeps the unused arc completely transparent. */
kctcs-job-outlook .kjo-shell .kjo-ring-art {
  --kjo-ring-mask: radial-gradient(
    circle closest-side,
    transparent calc(65.76% - 0.5px),
    #000 calc(65.76% + 0.5px),
    #000 calc(100% - 1px),
    transparent 100%
  );
  position: absolute;
  inset: 0;
  background:
    url('./assets/ring-gradient.png') center / cover no-repeat,
    conic-gradient(#fff 0% 50%, #e7a614 100%);
  mask-image:
    conic-gradient(
      #000 calc(var(--kjo-sweep, 0%) - var(--kjo-end-softness, 0.2%)),
      transparent var(--kjo-sweep, 0%)
    ),
    var(--kjo-ring-mask);
  mask-composite: intersect;
}
kctcs-job-outlook .kjo-shell .kjo-ring.is-unavailable .kjo-ring-art {
  background: #536c88;
  mask-image: var(--kjo-ring-mask);
}
kctcs-job-outlook .kjo-shell .kjo-ring-value {
  position: relative;
  font-size: calc(24px + 18 * var(--kjo-growth));
  line-height: calc(32px + 24 * var(--kjo-growth));
}
kctcs-job-outlook .kjo-shell .kjo-grads {
  grid-area: grads;
  gap: calc(20px - 8 * var(--kjo-growth));
  min-height: calc(193px + 81 * var(--kjo-growth));
}
kctcs-job-outlook .kjo-shell .kjo-cap-large {
  display: none;
}
kctcs-job-outlook .kjo-shell .kjo-cap-small,
kctcs-job-outlook .kjo-shell .kjo-cap-large {
  width: calc(97.9993px + 81.9987 * var(--kjo-growth));
  height: auto;
  max-width: 100%;
}
kctcs-job-outlook .kjo-shell .kjo-openings {
  grid-area: openings;
}
kctcs-job-outlook .kjo-shell .kjo-post {
  grid-area: post;
}
kctcs-job-outlook .kjo-shell .kjo-entry {
  grid-area: entry;
}
kctcs-job-outlook .kjo-shell .kjo-compact {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 12px;
  min-height: calc(60px + 65 * var(--kjo-growth));
  padding: calc(12px + 4 * var(--kjo-growth)) calc(10px + 6 * var(--kjo-growth));
}
kctcs-job-outlook .kjo-shell .kjo-compact .kjo-value {
  font-size: calc(26px + 22 * var(--kjo-growth));
}
kctcs-job-outlook .kjo-shell .kjo-compact .kjo-label {
  font-size: calc(14px + 10 * var(--kjo-growth));
}
kctcs-job-outlook .kjo-shell .kjo-openings-wide {
  display: none;
}
kctcs-job-outlook .kjo-shell .kjo-related {
  margin-top: calc(16px + 20 * var(--kjo-growth));
}
kctcs-job-outlook .kjo-shell .kjo-related-heading {
  font-size: calc(16px + 16 * var(--kjo-growth));
  line-height: calc(20px + 20 * var(--kjo-growth));
  font-weight: 700;
  text-align: center;
  margin-bottom: calc(12px + 16 * var(--kjo-growth));
}
kctcs-job-outlook .kjo-shell .kjo-occupation-list {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(4px + 22 * var(--kjo-growth));
  padding: calc(24px + 12 * var(--kjo-growth)) calc(14px + 10 * var(--kjo-growth));
  border-radius: 25px;
  background: #002856;
}
kctcs-job-outlook .kjo-shell .kjo-occupation {
  display: block;
  width: 100%;
  min-height: calc(36px + 12 * var(--kjo-growth));
  padding: calc(8px - 8 * var(--kjo-growth)) calc(4px - 4 * var(--kjo-growth));
  font-weight: 700;
  font-size: calc(14px + 4 * var(--kjo-growth));
  line-height: calc(18px + 6 * var(--kjo-growth));
  text-align: center;
  overflow-wrap: anywhere;
  transition: transform 180ms ease;
}
kctcs-job-outlook .kjo-shell .kjo-occupation-tail {
  white-space: nowrap;
}
kctcs-job-outlook .kjo-shell .kjo-chevron {
  color: #e7a614;
  padding-left: 5px;
  white-space: nowrap;
}
kctcs-job-outlook .kjo-shell .kjo-about-button {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  align-self: flex-start;
  min-height: 32px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  padding: 0;
  transition: transform 180ms ease;
  transform-origin: left center;
}
kctcs-job-outlook .kjo-shell .kjo-info-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
}
kctcs-job-outlook .kjo-shell .kjo-info-icon img {
  position: absolute;
  width: 19px;
  height: 19px;
}
kctcs-job-outlook .kjo-shell .kjo-info-icon span {
  z-index: 1;
  font-size: 14px;
  line-height: 19px;
}
kctcs-job-outlook .kjo-shell .kjo-detail,
kctcs-job-outlook .kjo-shell .kjo-about {
  background: #fff;
  color: #013057;
  border-radius: 25px;
  overflow: hidden;
}
kctcs-job-outlook .kjo-shell .kjo-detail {
  animation: kjo-fade-in 180ms ease both;
}
kctcs-job-outlook .kjo-shell .kjo-panel-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(60px + 25 * var(--kjo-growth));
  padding: 14px 54px 14px 18px;
}
kctcs-job-outlook .kjo-shell .kjo-panel-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: #00467f;
}
kctcs-job-outlook .kjo-shell .kjo-close {
  position: absolute;
  inset-inline-end: calc(8px + 4 * var(--kjo-growth));
  top: calc(8px + 12 * var(--kjo-growth));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  padding: 0;
}
kctcs-job-outlook .kjo-shell .kjo-close img {
  width: 24px;
  height: 24px;
}
kctcs-job-outlook .kjo-shell .kjo-close::after {
  content: '×';
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid #00467f;
  background: #fff;
  color: #00467f;
  font-size: 22px;
  line-height: 19px;
  border-radius: 50%;
  opacity: 0;
}
kctcs-job-outlook .kjo-shell .kjo-detail-body {
  border-top: 1px solid #a4c5e0;
  padding: calc(24px + 12 * var(--kjo-growth)) calc(18px + 18 * var(--kjo-growth));
  display: grid;
  gap: calc(22px + 14 * var(--kjo-growth));
}
kctcs-job-outlook .kjo-shell .kjo-salary {
  text-align: center;
  color: #00467f;
  font-weight: 700;
}
kctcs-job-outlook .kjo-shell .kjo-salary-label {
  font-size: calc(16px + 8 * var(--kjo-growth));
  line-height: calc(22px + 9 * var(--kjo-growth));
}
kctcs-job-outlook .kjo-shell .kjo-salary-value {
  font-size: calc(32px + 16 * var(--kjo-growth));
  line-height: calc(42px + 14 * var(--kjo-growth));
  overflow-wrap: anywhere;
}
kctcs-job-outlook .kjo-shell .kjo-description {
  font-size: calc(16px - 2 * var(--kjo-growth));
  line-height: calc(24px - 6 * var(--kjo-growth));
  overflow-wrap: anywhere;
}
kctcs-job-outlook .kjo-shell .kjo-child-occupations {
  grid-column: 1 / -1;
  display: grid;
  gap: 16px;
  font-size: 14px;
  line-height: 21px;
}
kctcs-job-outlook .kjo-shell .kjo-child-occupations h4 {
  font-weight: 700;
}
kctcs-job-outlook .kjo-shell .kjo-about {
  position: absolute;
  z-index: 2;
  inset-inline: var(--kjo-pad);
  bottom: 12px;
  max-height: min(calc(100dvh - 48px), calc(100% - 60px));
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 7px #0004;
  transform-origin: bottom left;
  animation: kjo-panel-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
kctcs-job-outlook .kjo-shell .kjo-about .kjo-panel-header {
  flex-shrink: 0;
}
kctcs-job-outlook .kjo-shell .kjo-about-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #00467f #d9d9d9;
  padding: calc(10px + 14 * var(--kjo-growth)) calc(18px + 30 * var(--kjo-growth))
    calc(24px + 16 * var(--kjo-growth));
  font-size: calc(18px - 2 * var(--kjo-growth));
  line-height: calc(24px - 2 * var(--kjo-growth));
  animation: kjo-fade-in 300ms ease both;
}
kctcs-job-outlook .kjo-shell .kjo-about-body p + p {
  margin-top: calc(24px - 4 * var(--kjo-growth));
}
kctcs-job-outlook .kjo-shell .kjo-empty,
kctcs-job-outlook .kjo-shell .kjo-error {
  padding: 24px;
  border-radius: 25px;
  background: #002856;
  font-size: 16px;
  text-align: center;
}
kctcs-job-outlook .kjo-shell .kjo-retry {
  margin-top: 16px;
  border: 2px solid #e7a614;
  padding: 8px 18px;
  border-radius: 24px;
  font-weight: 700;
}
kctcs-job-outlook .kjo-shell .kjo-status {
  font-size: 14px;
  line-height: 20px;
}
kctcs-job-outlook .kjo-shell .kjo-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
kctcs-job-outlook .kjo-shell .kjo-status.is-loading {
  position: absolute;
  inset-inline: var(--kjo-pad);
  top: 50%;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  text-align: center;
  pointer-events: none;
}

/* Breakpoints change composition; sizing continues through each boundary. */
@container kctcs-outlook (min-width: 560px) {
  kctcs-job-outlook .kjo-shell .kjo-metrics {
    grid-template-areas: 'median rate' 'openings grads' 'post entry';
  }
  kctcs-job-outlook .kjo-shell .kjo-compact {
    flex-direction: column;
    gap: 5px;
  }
  kctcs-job-outlook .kjo-shell .kjo-occupation-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  kctcs-job-outlook .kjo-shell .kjo-detail-body {
    grid-template-columns: minmax(0, min(30%, 273px)) minmax(0, 1fr);
    align-items: center;
  }
}
@container kctcs-outlook (min-width: 900px) {
  kctcs-job-outlook .kjo-shell .kjo-metrics {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas: 'median median median rate rate rate' 'openings openings grads grads post post' 'openings openings grads grads entry entry';
  }
  kctcs-job-outlook .kjo-shell .kjo-cap-small {
    display: none;
  }
  kctcs-job-outlook .kjo-shell .kjo-cap-large {
    display: block;
  }
  kctcs-job-outlook .kjo-shell .kjo-openings-wide {
    display: inline;
  }
  kctcs-job-outlook .kjo-shell .kjo-openings-short {
    display: none;
  }
  kctcs-job-outlook .kjo-shell .kjo-occupation-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@container kctcs-outlook (max-width: 300px) {
  kctcs-job-outlook .kjo-shell {
    --kjo-pad: 14px;
  }
  kctcs-job-outlook .kjo-shell .kjo-title {
    font-size: 23px;
    line-height: 29px;
  }
  kctcs-job-outlook .kjo-shell .kjo-metrics {
    grid-template-areas: 'median median' 'rate rate' 'grads grads' 'openings openings' 'post post' 'entry entry';
  }
}
@media (hover: hover) and (pointer: fine) {
  kctcs-job-outlook .kjo-shell .kjo-occupation:hover,
  kctcs-job-outlook .kjo-shell .kjo-about-button:hover {
    transform: scale(1.035);
  }
  kctcs-job-outlook .kjo-shell .kjo-close:hover::after {
    opacity: 1;
  }
}
@keyframes kjo-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes kjo-panel-in {
  from {
    opacity: 0;
    transform: translateY(18px) scaleY(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  kctcs-job-outlook .kjo-shell *,
  kctcs-job-outlook .kjo-shell *::before,
  kctcs-job-outlook .kjo-shell *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  kctcs-job-outlook .kjo-shell button:hover {
    transform: none !important;
  }
}