/* Reuse the intentional green/white brand hierarchy without recolouring body
   copy or adding ornamental heading bars. Narrow screens keep actions in flow. */
.career-kind { color: var(--pev-brand, #67e8a6); }
.career-card h2, #career-detail h2 { color: var(--pev-text, #edf5f8); }
.career-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.career-actions .apply-btn { margin: 0; }
.career-copy { white-space: pre-line; overflow-wrap: anywhere; }
#career-detail section { margin-block: 2rem; }
#career-detail li { margin-block: .5rem; overflow-wrap: anywhere; }
#careers-list > label { display: block; margin-block: 1rem .4rem; }
#career-kind-filter { max-width: 100%; padding: .65rem .9rem; color: var(--text); background: var(--bg); border: 1px solid var(--stroke); border-radius: .4rem; }
.career-filters { display: flex; flex-wrap: wrap; gap: 1rem; }
.career-filters > div { display: flex; flex: 1 1 12rem; flex-direction: column; gap: .4rem; min-width: 0; }
.career-filters input, .career-filters select { width: 100%; box-sizing: border-box; padding: .65rem .9rem; color: var(--text); background: var(--bg); border: 1px solid var(--stroke); border-radius: .4rem; }
.career-pagination { display: flex; justify-content: center; gap: 1rem; margin-block: 1.5rem; }
.career-pagination[hidden] { display: none; }
.career-pagination .apply-btn { margin: 0; }
.career-pagination button:disabled { opacity: .55; cursor: default; }
.career-contact-link { display: inline-block; margin: 1rem; text-decoration: underline; }
@media (max-width: 680px) { .career-card { display: block; } .career-actions { margin-top: 1rem; } }

/* Opportunity descriptions are reading pages, not full-screen landing heroes.
   The ID-scoped layout wins over retained .pev-refined hero rules, while the
   shared header, focus treatment and other page families stay unchanged. */
body.pev-refined .job-hero#main-content {
  box-sizing: border-box;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  margin-top: 0;
  justify-content: flex-start;
  padding: 138px var(--page-gutter) 28px;
  align-items: flex-start;
  text-align: left;
  background-image: none;
}
/* The old shared media layer adds an illustrative workshop image on mobile.
   This title-only reading header has no image plane to reserve space for. */
body.pev-refined .job-hero#main-content::before { display: none; }
body.pev-refined .job-hero#main-content h1 {
  margin: 0;
  max-width: none;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  opacity: 1;
  transform: none;
  animation: none;
  overflow-wrap: anywhere;
}
body.pev-refined .job-hero#main-content .breadcrumb {
  margin-top: 1rem; opacity: 1; transform: none; animation: none;
}
body #career-detail {
  box-sizing: border-box;
  width: calc(100% - 2 * var(--page-gutter));
  max-width: none;
  margin: 0 auto;
  padding: 1.5rem 0 4rem;
  line-height: 1.75;
}
body #career-detail > .tags { margin-block: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem; }
body #career-detail .career-kind,
body #career-detail section > h2 { color: var(--pev-brand, #67e8a6) !important; }
body #career-detail section > h2 { font-size: clamp(1.3rem, 3vw, 1.65rem); line-height: 1.3; }
body #career-detail ul { padding-left: 1.35rem; }
body #career-detail > .apply-btn { display: inline-flex; margin-top: 1.25rem; }
@media (max-width: 680px) {
  body.pev-refined .job-hero#main-content { padding: 118px 20px 24px; }
  body #career-detail { width: calc(100% - 40px); padding-bottom: 3rem; }
}

/* The vacancy form is part of the reading flow. At narrow widths fields stack;
   minimum-width:0 and bounded file controls prevent native input overflow. */
body #career-detail .career-application { scroll-margin-top: 100px; border-top: 1px solid #50616c; padding-top: 1.5rem; }
body #career-detail .career-application[hidden],
body #career-detail .career-application [hidden] { display: none !important; }
body #career-detail .career-application form { display: grid; grid-template-columns: minmax(0,1fr); gap: 1.15rem; padding: 0; width: 100%; max-width: 100%; }
body #career-detail .career-application .form-group { min-width: 0; margin: 0; }
body #career-detail .career-application label { display: block; margin-bottom: .45rem; color: #edf5f8; font-size: 1rem; }
body #career-detail .career-application :is(input:not([type=checkbox]):not([type=hidden]),textarea,select) { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; min-height: 44px; padding: .7rem; border: 1px solid #738896; border-radius: .5rem; background: #111b23; color: #edf5f8; font: inherit; font-size: 1rem; }
body #career-detail .career-application textarea { min-height: 8rem; resize: vertical; }
body #career-detail .career-application .form-group p { font-size: .9rem; color: #b9c8d1; margin: .45rem 0 0; }
body #career-detail .career-application a { color: #67e8a6; text-decoration: underline; }
body #career-detail .career-application :is(.submit-btn,.career-description-back,.contact-copy-button) { min-height: 44px; padding: .7rem 1.1rem; border-radius: .5rem; font: inherit; cursor: pointer; }
body #career-detail .career-application .submit-btn { background: #1674b3; color: white; border: 1px solid #5cc4ff; }
body #career-detail .career-application :is(.career-description-back,.contact-copy-button) { background: transparent; color: #67e8a6; border: 1px solid #738896; }
body #career-detail .career-application .career-description-back { margin-top: 1rem; }
body #career-detail .career-application :is(input,textarea,select,button,a):focus-visible { outline: 3px solid #67e8a6; outline-offset: 3px; }
body #career-detail .career-application .status-message { margin-top: .8rem; white-space: pre-line; overflow-wrap: anywhere; }
body #career-detail .career-application .status-error { color: #ffb4b4; }
body #career-detail .career-application .status-success { color: #67e8a6; }
@media (min-width: 640px) {
  body #career-detail .career-application form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body #career-detail .career-application .form-group:nth-of-type(n+4),
  body #career-detail .career-application .submit-section { grid-column: 1 / -1; }
}

/* The legacy detail template animates .form-group from opacity:0 only at boot.
   This form is mounted after the catalogue read, so it must be immediately
   visible when Apply opens it; it never depends on an unrelated reveal hook. */
body #career-detail .career-application .form-group {
  opacity: 1;
  visibility: visible;
  transform: none;
  animation: none;
}

/* A typo hint asks for an explicit choice; it never silently rewrites email.
   Buttons wrap naturally in the narrow dedicated application and Contact. */
.email-address-suggestion { margin-top:.75rem; padding:.75rem; border:1px solid #67e8a6; border-radius:.6rem; color:#f5f7fa; background:#10221b; overflow-wrap:anywhere; }
.email-address-suggestion p { margin:0 0 .5rem; }
.email-address-suggestion button { min-height:44px; max-width:100%; margin:.2rem .4rem .2rem 0; padding:.55rem .75rem; border:1px solid #67e8a6; border-radius:.4rem; color:#67e8a6; background:#10221b; font:inherit; cursor:pointer; }
.email-address-suggestion button:focus-visible { outline:2px solid #8cc8ff; outline-offset:3px; }