/* ==============================================
   Brokk application form – [brokk_application_form]
   ==============================================
   Built on the light sales-form fields (.bcsf--light, form.css): labels,
   inputs, selects, the submit button and the error line come from there.
   This file adds the career design's layout (Claude Design "Karriär",
   2026-10-07): checklist column + three sections, role cards, area chips,
   file drop zones, consent, confirmation. ACSS tokens only. */

.bapp__layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-xl);
  align-items: start;
}
.bapp__layout[hidden] { display: none; }

@media (max-width: 991px) {
  .bapp__layout { grid-template-columns: minmax(0, 1fr); }
}

/* Bricks' base `label { color: var(--bricks-text-light); margin-bottom: 5px }` greys out
   and spaces every clickable card below, so they take the text colour back. */
.bapp__role,
.bapp__chip,
.bapp__drop,
.bapp__consent { color: var(--text-dark); margin-bottom: 0; }

/* ── Checklist column ─────────────────────────────── */
.bapp__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  position: sticky;
  top: var(--space-xl);
}
@media (max-width: 991px) { .bapp__aside { position: static; } }

.bapp__title { margin: 0; }
.bapp__intro p { margin: 0; color: var(--text-dark-muted); }
.bapp__intro p + p { margin-top: var(--space-xs); }

.bapp__steps {
  margin: var(--space-xs) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--neutral-light);
}
.bapp__step {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--neutral-light);
  font-size: var(--text-s);
  font-weight: 500;
}
.bapp__step-dot {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1.5px solid var(--base-semi-light);
  border-radius: 50%;
  background: var(--white);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-dark);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.bapp__step.is-done .bapp__step-dot { background: var(--primary); border-color: var(--primary); }
.bapp__step.is-done .bapp__step-dot::after { content: "✓"; }

.bapp__note { margin: 0; font-size: var(--text-xs); color: var(--text-dark-muted); }

/* ── Sections ─────────────────────────────────────── */
.bapp__form { display: flex; flex-direction: column; gap: var(--space-xl); }

.bapp__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.bapp__section-title {
  width: 100%;
  margin: 0 0 var(--space-xs);
  padding: 0 0 var(--space-xs);
  border-bottom: 1px solid var(--neutral-light);
  font-family: var(--font-condensed);
  font-size: var(--h4);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}
.bapp__group { display: flex; flex-direction: column; }
.bapp__group[hidden] { display: none; }
.bapp__optional { font-weight: 400; color: var(--text-dark-muted); }

/* Role cards: the radio is the real control, the card its label. */
.bapp__roles { display: flex; flex-direction: column; gap: .6rem; }
.bapp__role {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xs);
  min-height: 5.2rem;
  padding: .8rem var(--space-s);
  background: var(--white);
  border: 1px solid var(--neutral-light);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.bapp__role input { width: 1.8rem; height: 1.8rem; margin: 0; accent-color: var(--text-dark); }
.bapp__role-title { font-weight: 500; }
.bapp__role-meta { font-size: var(--text-xs); color: var(--text-dark-muted); text-align: right; }
.bapp__role:has(input:checked) { border: 2px solid var(--text-dark); }
.bapp__role:has(input:checked) .bapp__role-title { font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .bapp__role:hover { border-color: var(--base-semi-light); } }
@media (max-width: 640px) {
  .bapp__role { grid-template-columns: auto minmax(0, 1fr); }
  .bapp__role-meta { grid-column: 2; text-align: left; }
}

/* Area chips: checkbox kept for keyboard and screen readers, drawn as a chip. */
.bapp__chips { display: flex; flex-wrap: wrap; gap: .8rem; }
.bapp__chip { position: relative; }
.bapp__chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bapp__chip span {
  display: inline-flex;
  align-items: center;
  min-height: 4.4rem;
  padding: 0 1.4rem;
  background: var(--white);
  border: 1px solid var(--neutral-light);
  border-radius: var(--radius-xs);
  font-size: var(--text-s);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.bapp__chip input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--primary-ultra-dark); }
.bapp__chip input:focus-visible + span { outline: 2px solid var(--text-dark); outline-offset: 2px; }

/* ── Files ───────────────────────────────────────── */
.bapp__file { position: relative; }
.bapp__file-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bapp__drop,
.bapp__picked {
  min-height: 11.2rem;
  padding: var(--space-s);
  background: var(--white);
  border-radius: var(--radius-xs);
}
.bapp__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  border: 1.5px dashed var(--base-semi-light);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.bapp__drop[hidden], .bapp__picked[hidden] { display: none; }
.bapp__file.is-over .bapp__drop,
.bapp__drop[aria-invalid="true"] { border-color: var(--text-dark); }
@media (hover: hover) and (pointer: fine) { .bapp__drop:hover { border-color: var(--text-dark); } }
.bapp__file:has(.bapp__file-input:focus-visible) .bapp__drop { outline: 2px solid var(--text-dark); outline-offset: 2px; }
.bapp__drop-icon { rotate: 180deg; }
.bapp__drop-text { font-size: var(--text-s); font-weight: 500; }
.bapp__browse { border-bottom: 1.5px solid var(--primary); }
.bapp__drop-hint { font-size: var(--text-xs); color: var(--text-dark-muted); }

.bapp__picked {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  border: 1px solid var(--neutral-light);
}
.bapp__picked-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.bapp__picked-name { font-size: var(--text-s); font-weight: 600; overflow-wrap: anywhere; }
.bapp__picked-size { font-size: var(--text-xs); color: var(--text-dark-muted); }
.bapp__remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-dark);
  cursor: pointer;
}

/* ── Consent + send ──────────────────────────────── */
.bapp__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding-top: var(--space-m);
  border-top: 1px solid var(--neutral-light);
}
.bapp__consent {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: start;
  font-size: var(--text-s);
  line-height: 1.55;
  cursor: pointer;
}
.bapp__consent input { width: 2.2rem; height: 2.2rem; margin: 0; accent-color: var(--text-dark); }
.bapp__consent a { color: var(--text-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.bapp__send { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }
.bapp__hint { margin: 0; font-size: var(--text-xs); color: var(--text-dark-muted); }
.bapp__hint.bcsf__error { margin: 0; font-size: var(--text-xs); }

/* Send button as in the sketch: muted until CV and consent are in (still clickable – a click
   then says what is missing), arrow after the text. */
.bapp .bapp__submit { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; }
.bapp .bapp__submit:not(.is-ready) {
  background: var(--tertiary-light);
  border-color: var(--tertiary-light);
  color: var(--text-dark-muted);
}

/* Consent box as in the sketch: square, yellow with a dark tick when checked. */
.bapp__consent input {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--base-semi-light);
  border-radius: var(--radius-xs);
  background: var(--white);
  cursor: pointer;
}
.bapp__consent input::before {
  content: "";
  flex: none; /* annars krymper flexboxen bocken till 0 bredd */
  width: 1.3rem;
  height: 1.3rem;
  background: var(--text-dark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
}
.bapp__consent input:checked { background: var(--primary); border-color: var(--text-dark); }
.bapp__consent input:checked::before { opacity: 1; }
.bapp__consent input[aria-invalid="true"] { border-color: currentColor; }
.bapp__consent input:focus-visible { outline: 2px solid var(--text-dark); outline-offset: 2px; }
@media (max-width: 640px) { .bapp__send { flex-direction: column-reverse; align-items: stretch; } }

/* ── Confirmation ────────────────────────────────── */
.bapp__done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  max-width: 72rem;
  margin: 0 auto;
  outline: none;
}
.bapp__done[hidden] { display: none; }
.bapp__done-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--text-dark);
}
.bapp__done-lead { margin: 0; font-size: var(--text-m); color: var(--text-dark-muted); }
.bapp__next {
  align-self: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: bapp;
  border-top: 1px solid var(--neutral-light); /* inga svarta streck på sajten */
}
.bapp__next li {
  counter-increment: bapp;
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--neutral-light);
  font-weight: 500;
}
.bapp__next li::before { content: counter(bapp); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .bapp__step-dot, .bapp__role, .bapp__chip span, .bapp__drop { transition: none; }
}

/* ==============================================
   Vacancy list – [brokk_open_positions]
   ============================================== */
.bapp-jobs__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--neutral-light);
}
.bapp-jobs__title { margin: 0; font-size: var(--h4); }
.bapp-jobs__count { font-size: var(--text-xs); font-weight: 500; color: var(--text-dark-muted); white-space: nowrap; }
.bapp-jobs__list { margin: 0; padding: 0; list-style: none; }
.bapp-jobs__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--neutral-light);
  color: var(--text-dark);
  text-decoration: none;
}
.bapp-jobs__text { display: flex; flex-direction: column; gap: .4rem; }
.bapp-jobs__name { font-weight: 600; }
.bapp-jobs__meta { font-size: var(--text-xs); font-weight: 400; color: var(--text-dark-muted); } /* länken är 600; orten ska vara normal (Anders 2026-10-09) */
.bapp-jobs__row .brokk-icon { transition: translate var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .bapp-jobs__row:hover .brokk-icon { translate: .3rem 0; }
}
@media (prefers-reduced-motion: reduce) { .bapp-jobs__row .brokk-icon { transition: none; } }
.bapp-jobs__empty { margin: var(--space-s) 0 .6rem; color: var(--text-dark-muted); }
.bapp-jobs__note { margin: var(--space-s) 0 0; font-size: var(--text-s); color: var(--text-dark-muted); }

/* Grouped role select: the chosen role's place · type · deadline under it */
.bapp__role-note { margin: .6rem 0 0; font-size: var(--text-xs); color: var(--text-dark-muted); }

/* ==============================================
   Open positions – [brokk_all_positions]
   ============================================== */
.bapp-all__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-m);
}
.bapp-all__title { margin: 0; font-size: var(--h3); }
.bapp-all__n { font-family: inherit; font-size: var(--text-s); font-weight: 500; text-transform: none; color: var(--text-dark-muted); margin-left: .4em; vertical-align: middle; }
/* Som branschsidornas "All machines →": ikonsetets pil, ingen understrykning. */
.bapp-all__open { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--text-s); font-weight: 600; color: var(--text-dark); text-decoration: none; }
.bapp-all__open:hover { color: var(--text-dark); }
.bapp-all__open .brokk-icon { flex: none; transition: translate var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .bapp-all__open:hover .brokk-icon { translate: .3rem 0; } }

/* Filterchipsen är filter-ui:s (temat, .brk-filter__pill) – samma som case, produkter och event. */
.bapp-all__filter { padding: var(--space-s) 0; }

/* Tabellen: ram, rubrikrad, vitt radkort och raderna kommer från temats data-table.css
   (.brokk-table, plan 027). Här står bara rutnätet. */
.bapp-all__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem 16rem 11rem 10rem 2rem;
  gap: 0 var(--space-s);
  align-items: center;
  padding: 1.8rem 1.6rem;
}
.bapp-all__row[hidden] { display: none; }
.bapp-all__row--head { padding: 2.2rem 1.6rem 1.6rem; }
.bapp-all__cell { font-size: var(--text-s); font-weight: 400; color: var(--text-dark-muted); }
.bapp-all__by { font-size: var(--text-s); }

/* Narrow: one card per position, the column labels move into the cells */
@media (max-width: 991px) {
  .bapp-all__row--head { display: none; }
  .bapp-all__row { grid-template-columns: minmax(0, 1fr) auto; gap: .4rem var(--space-s); padding: 1.6rem; }
  .bapp-all__name { grid-column: 1; }
  .bapp-all__row .brokk-icon { grid-column: 2; grid-row: 1 / span 2; }
  .bapp-all__cell, .bapp-all__by { display: none; }
  .bapp-all__meta { display: block; grid-column: 1; font-size: var(--text-xs); font-weight: 400; color: var(--text-dark-muted); }
}
@media (min-width: 992px) { .bapp-all__meta { display: none; } }
@media (prefers-reduced-motion: reduce) { .bapp-all__open .brokk-icon { transition: none; } }

/* Jumps to #open-positions and to the form land below the fixed header (124 px),
   same offset as the contact hub's cards. */
.bapp-all,
.bapp { scroll-margin-top: calc(12.4rem + var(--space-s)); }

/* ── Låst läge: formuläret på jobbannonsen (plan 024) ─────────────────── */
.bapp__locked {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .6rem;
  padding: 1.6rem 1.8rem;
  background: var(--white);
  border: 1px solid var(--neutral-light);
}
.bapp__locked-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dark-muted);
}
.bapp__locked-title { font-size: var(--text-m); font-weight: 600; }
.bapp__locked-meta { font-size: var(--text-s); color: var(--text-dark-muted); }
.bapp__locked-text { margin: 0; color: var(--text-dark-muted); }
.bapp__locked-open {
  align-self: flex-start;
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--text-dark);
  text-decoration: none;
  border-bottom: 1.5px solid var(--primary);
}
.bapp__done-back { font-weight: 600; color: var(--text-dark); }

/* ── Andra lediga tjänster under annonsen ─────────────────────────────── */
.bapp-other {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bapp-other__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.8rem;
  gap: 1.2rem;
  align-items: center;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--neutral-light);
  color: var(--text-dark);
  text-decoration: none;
}
.bapp-other__text { display: flex; flex-direction: column; gap: .4rem; }
.bapp-other__name { font-weight: 600; }
.bapp-other__meta { font-size: var(--text-s); color: var(--text-dark-muted); }
@media (hover: hover) and (pointer: fine) {
  .bapp-other__item:hover .bapp-other__name { color: var(--secondary-dark); }
}
@media (max-width: 767px) {
  .bapp-other { grid-template-columns: minmax(0, 1fr); }
}