/* Single-job header v2, approved on 2026-08-15.
   Theme-authored rather than ported: the supplied header is a focused update
   to templates/job-page.html, while anders-job-page.css remains generated by
   tools/port-design.js and must not be hand-edited. */

:root {
  --fs-fact-1: 18px;
  --fs-fact-2: 20.5px;
  --fs-fact-3: 23px;
  --fs-fact-label: 11.5px;
  --job-header-space-1: 6px;
  --job-header-space-2: 10px;
  --job-header-space-3: 14px;
  --job-header-space-4: 18px;
  --job-header-space-6: 26px;
}

/* Status, location and job number sit on the page ground above the card. */
.anders-design .job-meta {
  margin-top: 0;
  margin-bottom: 10px;
}

.anders-design .job-meta .pill-open {
  font-size: 11px;
}

/* The card owns the title and the assignment facts as one reading group. */
.anders-design .fact-rail {
  display: block;
  margin-top: 0;
  padding: var(--job-header-space-4);
}

.anders-design .fact-rail > h1 {
  padding-bottom: var(--job-header-space-4);
  margin-bottom: var(--job-header-space-4);
  border-bottom: 1px solid var(--action-line);
  font-size: 26px;
}

/* `.facts` exists in the shared design system. The direct-child scope and
   resets below keep this rail's grid independent without changing that API. */
.anders-design .fact-rail > .fact-rail__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.anders-design .fact-rail .fact-item {
  min-width: 0;
  padding: var(--job-header-space-2) 0;
  border: 0;
  border-bottom: 1px solid var(--action-line);
}

.anders-design .fact-rail .fact-item--pay {
  grid-column: 1 / -1;
  padding-top: 0;
}

.anders-design .fact-rail .fact-item--left {
  padding-right: var(--job-header-space-1);
}

.anders-design .fact-rail .fact-item--right {
  padding-left: var(--job-header-space-1);
  border-left: 1px solid var(--action-line);
}

.anders-design .fact-rail .fact-item--last-row {
  padding-bottom: 0;
  border-bottom: 0;
}

.anders-design .fact-rail .fact-item--span {
  grid-column: 1 / -1;
  padding-right: 0;
  border-left: 0;
}

.anders-design .fact-rail .fact-item dt {
  font-size: var(--fs-fact-label);
  margin-bottom: var(--job-header-space-1);
}

.anders-design .fact-rail .fact-item dd {
  font-size: var(--fs-fact-1);
}

.anders-design .fact-rail .fact-item--pay dd {
  font-size: var(--fs-fact-3);
}

.anders-design .fact-rail .fact-item--specialty dd {
  hyphens: none;
}

.anders-design .fact-rail :is(.fact-item--shift, .fact-item--schedule, .fact-item--duration) dd {
  white-space: nowrap;
}

/* Preserve hierarchy on the narrowest phone canvas without shrinking the
   fact values. The named container follows the usable content width, so this
   also behaves correctly when the page is embedded in a constrained shell. */
@container main (max-width: 290px) {
  .anders-design .fact-rail {
    padding: var(--job-header-space-3);
  }

  .anders-design .fact-rail > h1 {
    padding-bottom: var(--job-header-space-3);
    margin-bottom: var(--job-header-space-3);
    font-size: 24px;
  }

  .anders-design .fact-rail .fact-item--left {
    padding-right: var(--job-header-space-1);
  }

  .anders-design .fact-rail .fact-item--right {
    padding-left: var(--job-header-space-1);
  }
}

/* Let the two supporting actions share a row as soon as their labels fit.
   Flex wrapping remains in place for genuinely narrow or long-copy cases. */
@container main (max-width: 340px) {
  .anders-design .under-facts {
    column-gap: var(--job-header-space-3);
  }

  .anders-design .fact-rail .fact-item--specialty dd {
    font-size: 17px;
  }
}

/* A viewport breakpoint made the title jump to 34px even when the desktop
   apply rail left this column only 577px wide. Scale from the actual content
   width so tablet and sidebar layouts retain the same visual proportion as
   the wider standalone reference. */
@container main (min-width: 600px) {
  .anders-design .fact-rail > h1 {
    font-size: 30px;
  }
}

/* The existing named container accounts for the 368px apply rail. Five facts
   need more room than the former four-cell rail: 760px keeps long live values
   intact while still producing the approved one-row desktop composition. */
@container main (min-width: 760px) {
  .anders-design .fact-rail {
    --fs-fact-1: 20px;
    --fs-fact-2: 23px;
    --fs-fact-3: 26px;
    padding: var(--job-header-space-4) var(--job-header-space-6);
  }

  .anders-design .fact-rail > h1 {
    font-size: 32px;
  }

  .anders-design .fact-rail > .facts--details-0 {
    grid-template-columns: 1fr;
  }

  .anders-design .fact-rail > .facts--details-1 {
    grid-template-columns: 1.35fr repeat(1, minmax(0, 1fr));
  }

  .anders-design .fact-rail > .facts--details-2 {
    grid-template-columns: 1.35fr repeat(2, minmax(0, 1fr));
  }

  .anders-design .fact-rail > .facts--details-3 {
    grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
  }

  .anders-design .fact-rail > .facts--details-4 {
    grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr));
  }

  .anders-design .fact-rail .fact-item,
  .anders-design .fact-rail .fact-item--left,
  .anders-design .fact-rail .fact-item--right,
  .anders-design .fact-rail .fact-item--last-row,
  .anders-design .fact-rail .fact-item--span {
    grid-column: auto;
    padding: 0 var(--job-header-space-1);
    border-bottom: 0;
    border-left: 1px solid var(--action-line);
  }

  .anders-design .fact-rail .fact-item--pay {
    padding-left: 0;
    padding-right: var(--job-header-space-4);
    border-left: 0;
  }
}