.jobs-page {
  max-width: 44rem;
  margin: 2rem auto;
  padding: 0 1rem;
  font-family: system-ui, sans-serif;
  color: #1f2937;
}

.jobs-page__header h1 {
  margin-bottom: 0.25rem;
}

.jobs-page__header p {
  color: #6b7280;
  margin-top: 0;
}

.jobs-page__refresh {
  display: inline-block;
  padding: 0.4rem 1rem;
  border: 1px solid #2563eb;
  border-radius: 0.375rem;
  color: #2563eb;
  text-decoration: none;
  font-size: 0.9rem;
}

.jobs-page__refresh:hover {
  background: #eff6ff;
}

/* Turbo marks the frame busy while (re)loading. */
turbo-frame#jobs {
  display: block;
  margin-top: 1.5rem;
  transition: opacity 0.15s;
}

turbo-frame#jobs[busy] {
  opacity: 0.4;
}

.jobs-page__loading,
.jobs-list__empty,
.jobs-list__meta {
  color: #6b7280;
}

/* The filter row, mobile-first, in three tiers — and each tier is stated
   rather than left to emerge from how a wrapping flexbox happens to break.
   That was the bug in job-feed-ew1: flex places items at their flex-basis and
   only shrinks them *after* deciding to wrap, so two 11rem text fields plus
   the select, the checkbox and the button overflowed .jobs-page's 44rem cap
   and sent Filter to a line of its own while the fields still had room to
   shrink — and the labels above three differently-sized controls sat at three
   different heights.

   Narrowest: one field per line. Half-width text boxes on a phone are worse
   than tall ones, and the submit button is easier to hit at full width. This
   is the layout job-feed-u9n settled and it is unchanged. */
.jobs-filter {
  /* Every control is this tall, which is what makes the alignment stated
     rather than emergent: left alone an input is 31px, a select 33px and the
     submit 31px, and any bottom-aligned row of them prints its labels at three
     different heights. */
  --jobs-control-height: 2.25rem;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.jobs-filter__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

/* The checkbox carries its label inline, so the stacked layout the text fields
   need would leave an empty label row above it. One control tall and centred,
   which is what lands it on the same line as the controls beside it instead of
   floating between them and their labels; and never stretched, because a
   full-width row for a checkbox and two words is a wider target rather than a
   more hittable one. */
.jobs-filter__field--remote {
  flex-direction: row;
  align-items: center;
  align-self: flex-start;
  height: var(--jobs-control-height);
}

.jobs-filter__checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: #374151;
  white-space: nowrap;
  cursor: pointer;
}

.jobs-filter__checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: #2563eb;
  cursor: pointer;
}

.jobs-filter__checkbox:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}

.jobs-filter__label {
  font-size: 0.9rem;
  color: #374151;
}

.jobs-filter__input,
.jobs-filter__select {
  width: 100%;
  min-width: 0;
  height: var(--jobs-control-height);
  box-sizing: border-box;
  padding: 0 0.6rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.9rem;
}

.jobs-filter__select {
  background: #fff;
}

.jobs-filter__input:focus,
.jobs-filter__select:focus {
  outline: 2px solid #2563eb;
  outline-offset: -1px;
}

.jobs-filter__submit {
  width: 100%;
  height: var(--jobs-control-height);
  box-sizing: border-box;
  margin-top: 0.25rem;
  padding: 0 1rem;
  border: 1px solid #2563eb;
  border-radius: 0.375rem;
  background: #2563eb;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
}

.jobs-filter__submit:hover {
  background: #1d4ed8;
}

.jobs-filter__clear {
  font-size: 0.9rem;
  color: #6b7280;
  text-align: center;
}

/* Two fields per line once there is room for two text boxes that are still
   worth typing into: Search beside Location, Role beside Remote only, then the
   buttons. A grid rather than a wrapping flex row because the pairing is the
   point — flex would keep re-deciding it as the fields grow. */
@media (min-width: 30rem) {
  .jobs-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }

  .jobs-filter__field--remote {
    align-self: end;
  }

  .jobs-filter__submit {
    width: auto;
    margin-top: 0;
    justify-self: start;
  }

  .jobs-filter__clear {
    text-align: left;
    padding-bottom: 0.5rem;
  }
}

/* One row. The threshold is 48rem rather than .jobs-page's own 44rem cap
   because the cap is not the whole story: the page's 1rem of side padding
   comes out of it, and at a 44rem viewport the single row leaves the search
   box 137px wide — narrow enough to hide most of what is typed into it. At
   48rem it is 165px and stops growing at 168px, so this is where the row
   stops costing the fields anything.

   The two declared columns take the leftover width and everything after them
   gets an auto column — auto rather than a fixed six-column template because
   the child count varies: Clear exists only when a filter is in force. */
@media (min-width: 48rem) {
  .jobs-filter {
    grid-auto-flow: column;
    grid-auto-columns: auto;
  }

  /* Sized to their own content rather than sharing the text fields' 1fr: the
     widest option is "Customer Support", and letting either grow with the row
     would squeeze the search box for a control that has no use for the width. */
  .jobs-filter__field--role,
  .jobs-filter__field--remote {
    width: max-content;
  }
}

.jobs-list__error {
  border: 1px solid #fca5a5;
  background: #fef2f2;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  color: #991b1b;
}

.jobs-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.jobs-list__item {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.jobs-list__title {
  font-size: 1.05rem;
  margin: 0 0 0.15rem;
}

.jobs-list__title a {
  color: #1d4ed8;
  text-decoration: none;
}

.jobs-list__title a:hover {
  text-decoration: underline;
}

.jobs-list__company {
  font-weight: 400;
  color: #4b5563;
}

.jobs-list__details {
  margin: 0 0 0.25rem;
  color: #4b5563;
  font-size: 0.95rem;
}

.jobs-list__posted {
  margin: 0 0 0.5rem;
  color: #9ca3af;
  font-size: 0.85rem;
}

.jobs-list__apply {
  font-size: 0.9rem;
  color: #2563eb;
}

.jobs-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.jobs-pagination__link {
  padding: 0.4rem 1rem;
  border: 1px solid #2563eb;
  border-radius: 0.375rem;
  color: #2563eb;
  text-decoration: none;
  font-size: 0.9rem;
}

.jobs-pagination__link:hover {
  background: #eff6ff;
}

.jobs-pagination__link--disabled {
  border-color: #e5e7eb;
  color: #9ca3af;
  cursor: default;
}

.jobs-pagination__link--disabled:hover {
  background: none;
}

.jobs-pagination__page {
  color: #6b7280;
  font-size: 0.9rem;
}

.jobs-detail__back {
  font-size: 0.9rem;
  margin: 0 0 1rem;
}

.jobs-detail__back a {
  color: #2563eb;
  text-decoration: none;
}

.jobs-detail__back a:hover {
  text-decoration: underline;
}

.jobs-detail__title {
  margin: 0 0 0.25rem;
}

.jobs-detail__company {
  font-weight: 600;
  margin: 0 0 1.25rem;
}

.jobs-detail__facts {
  margin: 0 0 1.5rem;
}

.jobs-detail__facts > div {
  display: flex;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid #f3f4f6;
}

.jobs-detail__facts dt {
  flex: 0 0 9rem;
  color: #6b7280;
  font-size: 0.9rem;
}

.jobs-detail__facts dd {
  margin: 0;
  color: #1f2937;
}

.jobs-detail__description {
  color: #1f2937;
  margin: 0 0 1.5rem;
}

.jobs-detail__description p {
  margin: 0 0 0.75rem;
}

.jobs-detail__description p:last-child {
  margin-bottom: 0;
}

.jobs-detail__excerpt-note {
  font-size: 0.9rem;
}

.jobs-detail__payload {
  margin-top: 1.5rem;
  border-top: 1px solid #f3f4f6;
  padding-top: 1rem;
}

.jobs-detail__payload summary {
  color: #6b7280;
  cursor: pointer;
  font-size: 0.9rem;
}

.jobs-detail__payload pre {
  background: #f9fafb;
  border-radius: 6px;
  color: #1f2937;
  font-size: 0.8rem;
  margin: 0.75rem 0 0;
  overflow-x: auto;
  padding: 0.75rem;
}