/* 2026 refresh: salary guide (/salary, /salary/<career>, /salary/calculator). Markup: src/pages/salary/*.astro.
   Built from the refreshed pages' pieces (hero band like All Campuses, breadcrumb, Learn More band) on the 8px grid;
   tokens and buttons come from the All Campuses CSS chunk the pages load. docs/salary.md. */

/* ---- hero band: Dark Blue with the turquoise symbol ---- */
.section_salary-hero {
  position: relative;
  overflow: hidden;
  margin-top: var(--nav-h);
  background-color: var(--_style-guide-2-0---outset-dark-blue);
  color: var(--_style-guide-2-0---outset-off-white);
}
.salary-hero_pattern { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.salary-hero_component {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 76rem;
  margin: 0 auto;
  padding: 6rem 0 4rem;
  text-align: center;
}
.salary-hero_component.is-left { align-items: flex-start; text-align: left; padding-top: 4rem; }
.salary-hero_eyebrow { margin: 0; color: var(--_style-guide-2-0---outset-turquoise); }
.salary-hero_heading { color: var(--_style-guide-2-0---white); text-wrap: balance; }
.salary-hero_text { max-width: 44rem; margin: 0; color: var(--_style-guide-2-0---outset-off-white); }
.section_salary-hero .breadcrumb_component { color: var(--_style-guide-2-0---outset-off-white); font-size: .875rem; }

.salary-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  width: 100%;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.salary-tile {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: 1.5rem;
  border: 1px solid #f3f7f733;
  border-radius: 4px;
  background-color: #f3f7f70f;
}
.salary-tile_label { font-size: .75rem; font-weight: 500; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--_style-guide-2-0---outset-turquoise); }
.salary-tile_career { color: var(--_style-guide-2-0---white); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.salary-tile_career:hover { color: var(--_style-guide-2-0---outset-turquoise); }
.salary-tile_figure { font-family: Marrsans Web, Arial, sans-serif; font-size: 2.25rem; font-weight: 600; line-height: 1.1; letter-spacing: -.03em; color: var(--_style-guide-2-0---white); }
.salary-tile_note { font-size: .875rem; line-height: 1.4; color: var(--_style-guide-2-0---outset-off-white-tint); }

/* ---- content sections ---- */
.section_salary { padding: 5rem 0; background-color: var(--_style-guide-2-0---outset-off-white); color: var(--_style-guide-2-0---outset-soft-black); }
.section_salary.is-path { background-color: var(--_style-guide-2-0---white); }
.section_salary.is-about { background-color: var(--_style-guide-2-0---outset-sand-tint-light); }
.salary_container { max-width: 76rem; margin: 0 auto; }
.salary_container > .breadcrumb_component,
.salary_container > nav { margin-bottom: 2rem; }
.salary_heading { margin-bottom: 1.5rem; color: var(--_style-guide-2-0---outset-soft-black); }
.salary_lead { max-width: 44rem; margin: 0 0 2.5rem; }
.salary-group { margin-top: 3rem; }
.salary-group_heading { margin: 0 0 1rem; font-family: Marrsans Web, Arial, sans-serif; font-size: 1.25rem; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.salary-note { max-width: 48rem; margin: 1.5rem 0 0; font-size: .9375rem; line-height: 1.6; color: #121216cc; }
.salary-note a, .salary-about a, .salary-sources a, .salary-method a { color: var(--_style-guide-2-0---outset-blue-tint); text-decoration: underline; text-underline-offset: 2px; }

/* ---- tables (real tables on wide screens, one card per row on phones) ---- */
.salary-table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.5; table-layout: fixed; }
/* fixed layout + a set first column: the per-category tables on the overview line up with each other */
.salary-table:not(.is-compact) th:first-child { width: 40%; }
.salary-table th, .salary-table td { padding: .875rem 1rem; border-bottom: 1px solid var(--_style-guide-2-0---outset-soft-black-tint); text-align: left; vertical-align: top; }
.salary-table thead th { padding-top: 0; font-size: .75rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: #121216b3; }
.salary-table tbody th { font-weight: 600; }
.salary-table td:nth-child(n+2) { font-variant-numeric: tabular-nums; }
.salary-table a { color: var(--_style-guide-2-0---outset-dark-blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.salary-table a:hover { color: var(--_style-guide-2-0---outset-mid-blue); }
.salary-table .is-up { color: #0a6b6e; }
.salary-table .is-down { color: var(--_style-guide-2-0---outset-red-brown); }
.salary-table tr.is-current { background-color: var(--_style-guide-2-0---outset-sand-tint-light); }
.salary-table.is-compact th, .salary-table.is-compact td { padding: .5rem .75rem; }

/* ---- trend chart ---- */
.salary-trend { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.salary-trend_tables { display: grid; gap: 2rem; }
.salary-trend_chart { display: grid; gap: 1.5rem; align-content: start; }
.salary-table_caption { caption-side: top; text-align: left; padding: 0 .75rem .5rem; font-size: .75rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: #121216b3; }
.salary-chart { display: block; width: 100%; height: auto; aspect-ratio: 640 / 240; overflow: visible; }
.salary-result .salary-chart { aspect-ratio: 640 / 260; max-width: 48rem; }
.salary-chart_grid { stroke: #1212161f; stroke-width: 1; }
.salary-chart_label { font-family: Marrsans Web, Arial, sans-serif; font-size: 13px; fill: #121216b3; }
.salary-chart_line { fill: none; stroke: var(--_style-guide-2-0---outset-blue-tint); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.salary-chart_line.is-projected { stroke: var(--_style-guide-2-0---outset-turquoise); stroke-dasharray: 8 6; }
.salary-chart_band { fill: #00b4b926; stroke: none; }
.salary-chart_dot { fill: var(--_style-guide-2-0---outset-blue-tint); }
.salary-chart_dot.is-projected { fill: var(--_style-guide-2-0---outset-turquoise); }

/* ---- training path: one bar per step, as long as its years ---- */
.salary-path { display: flex; flex-direction: column; gap: .75rem; max-width: 52rem; margin: 0 0 2.5rem; padding: 0; list-style: none; }
.salary-path_step { display: grid; grid-template-columns: minmax(0, 11rem) 10rem minmax(0, 1fr); gap: 1rem; align-items: center; margin: 0; }
.salary-path_bar { order: 2; display: block; width: calc(var(--years, 1) * 12.5%); min-width: 1rem; max-width: 100%; height: .75rem; border-radius: 2px; background-color: var(--_style-guide-2-0---outset-turquoise); }
.salary-path_step:nth-child(2n) .salary-path_bar { background-color: var(--_style-guide-2-0---outset-blue-tint); }
.salary-path_stage { order: 1; font-weight: 600; }
.salary-path_years { order: 3; font-size: .9375rem; color: #121216cc; }
.salary-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.salary-links .button { width: auto; }

/* ---- calculator teaser band (turquoise) ---- */
.section_salary-teaser { padding: 5rem 0; background-color: var(--_style-guide-2-0---outset-turquoise); color: var(--_style-guide-2-0---outset-dark-blue); }
.salary-teaser_component { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; max-width: 48rem; margin: 0 auto; text-align: center; }
.salary-teaser_component p { margin: 0; }
.salary-teaser_component .button { width: auto; }

/* ---- FAQ, related, sources ---- */
.salary-faq { max-width: 52rem; border-top: 1px solid var(--_style-guide-2-0---outset-soft-black-tint); }
.salary-faq_item { border-bottom: 1px solid var(--_style-guide-2-0---outset-soft-black-tint); }
.salary-faq_item summary {
  position: relative;
  padding: 1.25rem 3rem 1.25rem 0;
  font-family: Marrsans Web, Arial, sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.salary-faq_item summary::-webkit-details-marker { display: none; }
.salary-faq_item summary::after { content: "+"; position: absolute; right: .5rem; top: 1.1rem; font-size: 1.5rem; font-weight: 400; line-height: 1; }
.salary-faq_item[open] summary::after { content: "-"; }
.salary-faq_item summary:focus-visible { outline: 2px solid var(--_style-guide-2-0---outset-mid-blue); outline-offset: 2px; }
.salary-faq_item p { max-width: 44rem; margin: 0 0 1.5rem; line-height: 1.6; }
.salary-related { margin-top: 3rem; }
.salary-related_list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.salary-related_list li { margin: 0; }
.salary-related_list a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--_style-guide-2-0---outset-soft-black-tint);
  border-radius: 4px;
  background-color: var(--_style-guide-2-0---white);
  color: var(--_style-guide-2-0---outset-dark-blue);
  font-weight: 600;
  text-decoration: none;
}
.salary-related_list a:hover { border-color: var(--_style-guide-2-0---outset-mid-blue); }
.salary-related_list a span + span { font-weight: 500; font-variant-numeric: tabular-nums; color: #121216cc; }
.salary-sources { max-width: 52rem; margin-top: 3rem; font-size: .9375rem; line-height: 1.6; }
.salary-sources p, .salary-about p { margin: 0 0 1rem; }
.salary-about { max-width: 48rem; font-size: 1.0625rem; line-height: 1.6; }

/* ---- calculator ---- */
.salary-calc { display: grid; gap: 2rem; max-width: 52rem; margin: 0 0 2.5rem; }
.salary-calc_step { margin: 0; padding: 0; border: 0; min-width: 0; }
.salary-calc_legend { display: block; margin: 0 0 1rem; padding: 0; font-family: Marrsans Web, Arial, sans-serif; font-size: 1.25rem; font-weight: 600; line-height: 1.4; color: var(--_style-guide-2-0---outset-soft-black); }
.salary-calc_grades { display: flex; flex-wrap: wrap; gap: .5rem; }
.salary-chip { position: relative; margin: 0; cursor: pointer; }
.salary-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.salary-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .5rem 1rem;
  border: 1px solid var(--_style-guide-2-0---outset-dark-blue);
  border-radius: 2px;
  background-color: var(--_style-guide-2-0---white);
  color: var(--_style-guide-2-0---outset-dark-blue);
  font-weight: 600;
  line-height: 1.2;
}
.salary-chip:hover span { border-color: var(--_style-guide-2-0---outset-mid-blue); color: var(--_style-guide-2-0---outset-mid-blue); }
.salary-chip input:checked + span { background-color: var(--_style-guide-2-0---outset-dark-blue); color: var(--_style-guide-2-0---white); }
.salary-chip input:focus-visible + span { outline: 2px solid var(--_style-guide-2-0---outset-mid-blue); outline-offset: 2px; }
.salary-calc_select {
  width: 100%;
  max-width: 28rem;
  min-height: 3rem;
  padding: .5rem .75rem;
  border: 1px solid var(--_style-guide-2-0---outset-dark-blue);
  border-radius: 2px;
  background-color: var(--_style-guide-2-0---white);
  color: var(--_style-guide-2-0---outset-soft-black);
  font-size: 1rem;
}
.salary-calc_select:focus-visible { outline: 2px solid var(--_style-guide-2-0---outset-mid-blue); outline-offset: 2px; }
.salary-result { max-width: 52rem; }
.salary-result:empty { display: none; }
.salary-result_card { margin: 0 0 2.5rem; padding: 2rem; border-radius: 4px; background-color: var(--_style-guide-2-0---outset-dark-blue); color: var(--_style-guide-2-0---outset-off-white); }
.salary-result_eyebrow { margin: 0 0 .75rem; font-size: .75rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--_style-guide-2-0---outset-turquoise); }
.salary-result_headline { margin: 0 0 1rem; font-family: Marrsans Web, Arial, sans-serif; font-size: 1.75rem; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--_style-guide-2-0---white); }
.salary-result_headline strong { color: var(--_style-guide-2-0---outset-turquoise); font-weight: 600; }
.salary-result_sub { margin: 0; line-height: 1.6; color: var(--_style-guide-2-0---outset-off-white-tint); }
.salary-result .salary-group_heading { margin-top: 2rem; }
.salary-method { max-width: 52rem; margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--_style-guide-2-0---outset-soft-black-tint); }
.salary-method_list { margin: 0; padding-left: 1.25rem; }
.salary-method_list li { margin: 0 0 1rem; line-height: 1.6; }

/* ---- tablet ---- */
@media screen and (max-width: 991px) {
  .salary-trend { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .salary-hero_component { padding: 4.5rem 0 3rem; }
}

/* ---- phone ---- */
@media screen and (max-width: 767px) {
  .section_salary, .section_salary-teaser { padding: 3.5rem 0; }
  .salary-hero_component, .salary-hero_component.is-left { padding: 3rem 0 2.5rem; gap: 1rem; }
  .salary-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .salary-tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .salary-tile { padding: 1rem; }
  .salary-tile_figure { font-size: 1.5rem; }
  .salary-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .salary-table:not(.is-compact) tr { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--_style-guide-2-0---outset-soft-black-tint); }
  .salary-table:not(.is-compact) th, .salary-table:not(.is-compact) td { padding: 0; border: 0; }
  .salary-table:not(.is-compact) tbody th { grid-column: 1 / -1; font-size: 1.0625rem; }
  .salary-table:not(.is-compact) th:first-child { width: auto; }
  .salary-table:not(.is-compact) td::before { content: attr(data-label); display: block; font-size: .75rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: #121216b3; }
  .salary-path_step { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .salary-path_bar { order: 3; width: calc(var(--years, 1) * 12.5%); }
  .salary-path_stage { order: 1; }
  .salary-path_years { order: 2; }
  .salary-links .button, .salary-teaser_component .button { width: 100%; }
  .salary-result_card { padding: 1.5rem; }
  .salary-result_headline { font-size: 1.375rem; }
  /* the charts scale with their width: labels and marks are set in chart units so they stay legible */
  .salary-chart_label { font-size: 17px; }
}
@media screen and (max-width: 479px) {
  .salary-chart_label { font-size: 22px; }
  .salary-chart_line { stroke-width: 4.5; }
  .salary-chart_dot { r: 6px; }
  .salary-chart_dot.is-projected { r: 8px; }
}