/* The public careers page. Follows the app's styles (frontend/src/index.css)
   with only what these pages use. Fonts come from ../brand, beside static (see Dockerfile). */
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 400;
  font-display: swap;
  src: url("../brand/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-weight: 600;
  font-display: swap;
  src: url("../brand/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --charcoal: #24282d;
  --charcoal-hover: #3a4047;
  --tan: #7d7562;
  --tan-light: #a29b87;
  --tan-surface: #efede7;
  --light-gray: #f3f4f5;
  --white: #ffffff;
  --border: #e3e5e8;
  --border-strong: #cfd3d8;
  --muted: #5c636b;
  --danger: #8a1f17;
  --danger-surface: #fbefee;
  --danger-border: #eccac6;
  /* A field with a problem: the brick red of the text, softened for a border */
  --danger-edge: #b8675d;
  /* The HIRE pipeline's sweep, from its first step (Applied) to its last (Client interview) */
  --progress: linear-gradient(90deg, #aaa38e, #346f45);
  --radius: 6px;
  --shadow: 0 1px 2px rgba(36, 40, 45, 0.05);
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--charcoal);
  background: var(--light-gray);
  -webkit-font-smoothing: antialiased;
}

body { margin: 0; }
/* Elements styled with a display value still hide */
[hidden] { display: none !important; }

h1, h2, p { margin: 0; }
h1 { font-size: 1.5rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
h2 { font-size: 1rem; font-weight: 600; line-height: 1.4; }
a { color: inherit; text-decoration-color: var(--tan-light); }
a:hover { text-decoration-color: var(--charcoal); }
:focus-visible { outline: 2px solid var(--tan); outline-offset: 2px; }

.topbar {
  display: flex;
  align-items: center;
  min-height: 4rem;
  padding: 0 1.5rem;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; }
/* The outline lockup's on-screen minimum is 300px wide; the file carries its own padding */
.brand-logo { display: block; width: 300px; height: auto; margin-left: -9px; }
.brand-product {
  margin-left: 0.75rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--border-strong);
}
/* Matches the app's HIRE: the logo mark's tan gradient, top to bottom */
.brand-product-text {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(#a29b87, #686150);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.page { max-width: 48rem; margin: 0 auto; padding: 1.5rem 1.5rem 2.5rem; }
.page > * + * { margin-top: 1rem; }
.page > h1 { margin-bottom: 1rem; }
.page-footer { padding: 0 1.5rem 1.5rem; text-align: center; font-size: 0.75rem; color: var(--muted); }

.page-header p { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted); }
/* The count follows the title on the same line while there is room */
/* Over the list while it's filtered: how many show, and the way back to all of them */
.list-status { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 0.875rem; color: var(--muted); }
.list-status .text-button { font-size: inherit; white-space: nowrap; }
.crumbs a { font-weight: 400; color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--charcoal); text-decoration: underline; }
.crumb-sep { margin: 0 0.5rem; font-weight: 400; color: var(--border-strong); }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-narrow { max-width: 32rem; margin-left: auto; margin-right: auto; }
.card-header { padding: 0.625rem 1rem; border-bottom: 1px solid var(--border); }
.card-body { padding: 1rem; }
.card-body > * + * { margin-top: 0.75rem; }
.empty { color: var(--muted); font-size: 0.875rem; }

/* After applying: centered, with a check like the app's open/accepted green */
.status-message { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 2rem 1.5rem; text-align: center; }
.card-body.status-message > * + * { margin-top: 0; }
.status-message p { max-width: 26rem; color: var(--muted); }
.status-message .button { margin-top: 0.5rem; }
.status-mark path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Done: the app's open/accepted green. Anything else (try again later, not open): its on-hold amber */
.status-mark-done circle { fill: #e9f3ec; }
.status-mark-done path { stroke: #22603a; }
.status-mark-notice circle { fill: #fbf2df; }
.status-mark-notice path { stroke: #7a5410; }

/* Matching a resume: a headline over the filters that opens the form. Tinted tan,
   with the logo mark's gradient on its icon, so it stands out from the list */
.match-card, .match-result { overflow: hidden; border-color: var(--tan-light); background: var(--tan-surface); }
.match-card h2 { font-size: inherit; }
.match-toggle, .match-toggle:hover {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  padding: 0.875rem 1rem;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--charcoal);
  font-weight: 600;
  text-align: left;
  white-space: normal;
}
.match-toggle:hover { background: #e8e5dc; }
.match-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(#a29b87, #686150);
}
.match-icon svg { fill: var(--white); }
.match-toggle-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.match-toggle-title { font-size: 1.0625rem; }
.match-toggle-caption { font-size: 0.875rem; font-weight: 400; color: var(--muted); }
.match-toggle .caret { margin: 0 0.25rem 0 0; }
.match-toggle[aria-expanded="true"] .caret { transform: translateY(-2px) rotate(45deg); }
.match-form { border-top: 1px solid var(--tan-light); background: var(--white); }
.match-intro p { font-size: 0.875rem; color: var(--muted); }
.drop-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 1.75rem 1rem;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--light-gray);
  text-align: center;
  transition: border-color 0.15s, background-color 0.15s;
}
.drop-zone input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.drop-zone:hover, .drop-zone.dragging { border-color: var(--tan-light); background: var(--tan-surface); }
.drop-zone:has(input:focus-visible) { outline: 2px solid var(--tan); outline-offset: 2px; }
.drop-zone:has(input:disabled) { opacity: 0.6; }
.drop-zone:has(input:disabled) input { cursor: default; }
.invalid .drop-zone { border-color: var(--danger-edge); }
.drop-icon { margin-bottom: 0.375rem; fill: none; stroke: var(--tan); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.drop-title { font-weight: 600; overflow-wrap: anywhere; }
.drop-action { font-size: 0.875rem; color: var(--muted); }
.drop-hint { margin-top: 0.375rem; font-size: 0.75rem; color: var(--muted); }
.match-clearance { max-width: 20rem; }
.match-actions { display: flex; justify-content: flex-end; }
.match-progress { display: grid; gap: 0.375rem; font-size: 0.875rem; color: var(--muted); }
.match-progress > * + * { margin-top: 0; }
.match-progress-bar {
  appearance: none;
  width: 100%;
  height: 0.375rem;
  border: 0;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.match-progress-bar::-webkit-progress-bar { background: var(--border); }
.match-progress-bar::-webkit-progress-value { background: var(--progress); transition: width 0.2s linear; }
.match-progress-bar::-moz-progress-bar { background: var(--progress); }
.match-result { display: flex; align-items: flex-start; gap: 0.875rem; padding: 0.875rem 1rem; }
.match-result:focus { outline: none; }
.match-result-body { flex: 1; min-width: 0; }
.match-result-title { font-size: 1.0625rem; font-weight: 600; }
.match-result-text { font-size: 0.875rem; color: var(--muted); }
.match-result-actions { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: 0.5rem; font-size: 0.875rem; }
.match-result-actions .text-button { font-size: inherit; }
.filters { display: flex; flex-direction: column; gap: 0.75rem; }
.filter-row { display: flex; align-items: center; gap: 0.75rem; }
.filter-keyword { flex: 1; }
.advanced-filters { display: flex; flex-direction: column; gap: 0.75rem; }
.filter-toggle, .filter-toggle:hover {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-color: var(--border-strong);
  background: var(--white);
  color: var(--charcoal);
}
.filter-toggle:hover { border-color: var(--tan-light); background: var(--light-gray); }
.filter-toggle .caret { margin: 0 0 0 0.125rem; transform: translateY(-2px) rotate(45deg); }
.filter-toggle[aria-expanded="true"] .caret { transform: translateY(2px) rotate(-135deg); }
.filter-location { flex: none; width: 14rem; max-width: 40%; }
.filter-telework { flex: none; align-items: center; white-space: nowrap; }
.filter-telework input { margin-top: 0; }
.role-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.role-chip, .role-chip:hover {
  padding: 0.1875rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--white);
  color: var(--charcoal);
  font-size: 0.8125rem;
  font-weight: 400;
}
.role-chip:hover { border-color: var(--tan-light); background: var(--light-gray); }
.role-chip[aria-pressed="true"] { border-color: var(--charcoal); background: var(--charcoal); color: var(--white); }
.role-chip:disabled { border-color: var(--border); background: var(--white); color: var(--muted); opacity: 0.6; }
.role-count { margin-left: 0.25rem; font-size: 0.75rem; color: var(--muted); }
.role-chip[aria-pressed="true"] .role-count { color: rgba(255, 255, 255, 0.75); }

.openings { margin-bottom: 0; padding: 0; list-style: none; }
/* A line between the items shown, whichever the filters hide */
.openings > li:not([hidden]) ~ li:not([hidden]) { border-top: 1px solid var(--border); }
/* Each position opens in place. Its heading and Select checkbox share one grid
   cell, the checkbox over the heading's right end, and both stay in view while
   that position's description scrolls by. */
.openings > li { display: grid; }
.openings > li > * { grid-area: 1 / 1; }
.openings summary {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 6.5rem 0.75rem 1rem;
  background: var(--white);
  list-style: none;
  cursor: pointer;
}
.openings details[open] > summary { border-bottom: 1px solid var(--border); }
/* An open position lifts out of the list as its own card, a little wider than the
   list, its shadow over the rows around it (below the Apply bar) */
.openings > li:has(> details[open]) {
  position: relative;
  z-index: 2;
  margin: 0 -0.375rem;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--tan);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 4px 14px rgba(36, 40, 45, 0.1);
}
.openings > li:has(> details[open]) summary { border-radius: var(--radius) var(--radius) 0 0; background: var(--light-gray); }
.openings summary::-webkit-details-marker { display: none; }
.openings summary:hover { background: #fafafb; }
.opening-heading { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; overflow-wrap: anywhere; }
.opening-title { font-weight: 600; }
.opening-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.opening-tag {
  display: inline-block;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--tan-surface);
  color: var(--charcoal);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25rem;
  white-space: nowrap;
}
.opening-tag-new { background: #e9f3ec; color: #22603a; }
/* From matching a resume */
.opening-tag-strong { background: #e9f3ec; color: #22603a; }
.opening-tag-good { background: #fbf2df; color: #7a5410; }
.opening-tag-skill { background: white; box-shadow: inset 0 0 0 1px var(--border); font-weight: 500; }
.opening-summary .opening-tag { margin-left: 0.5rem; vertical-align: 1px; }
.similar { margin: 0; padding: 0; list-style: none; }
.similar li { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.75rem 1rem; }
.similar li + li { border-top: 1px solid var(--border); }
.openings summary:hover .opening-title { text-decoration: underline; text-decoration-color: var(--tan-light); }
.opening-pick {
  position: relative;
  z-index: 2;
  align-self: start;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin: 0.75rem 1rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
/* Fixed to the bottom of the window (or the iframe), its content lined up with the
   page's column; the body leaves room for it so nothing ends up underneath */
.apply-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem max(1.5rem, calc((100% - 45rem) / 2));
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 8px rgba(36, 40, 45, 0.08);
}
body:has(.apply-bar:not([hidden])) { padding-bottom: 4rem; }
.apply-bar-text { flex: 1; min-width: 0; font-size: 0.875rem; font-weight: 600; }
.opening-body { padding: 1rem 1rem 1rem 2.25rem; }
/* Points right when closed, down when open */
.caret {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  /* Lined up with the title's first line */
  margin-top: 0.5rem;
  transform: rotate(-45deg);
  transition: transform 0.15s;
}
details[open] .caret { transform: rotate(45deg); }
.meta { font-size: 0.875rem; color: var(--muted); }

.prose { font-size: 0.9375rem; overflow-wrap: anywhere; }
.prose > :first-child, .prose > div:first-child > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { font-size: 1rem; font-weight: 600; line-height: 1.4; margin: 1rem 0 0.375rem; }
.prose p { margin: 0 0 0.75rem; }
.prose ul, .prose ol { margin: 0 0 0.75rem; padding-left: 1.25rem; }
/* Not the list styles of the positions list they sit in */
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: 0.25rem 0; }
.prose li p { margin: 0; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 1.25rem 0; }

.form > * + * { margin-top: 1rem; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.choices { display: flex; gap: 1.5rem; margin-top: 0.375rem; }
.checkbox { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; }
/* Lined up with the first line of its label */
.checkbox input { flex: none; margin-top: 0.0625rem; }
input[type="radio"] { width: 1.125rem; height: 1.125rem; margin: 0; padding: 0; accent-color: var(--charcoal); cursor: pointer; }
legend { padding: 0; }
/* The positions on the apply page */
.picked { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); }
.picked li + li { border-top: 1px solid var(--border); }
.picked label { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.625rem 0.75rem; cursor: pointer; }
.picked input { margin-top: 0.1875rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem 1rem; }
.form-field { display: flex; flex-direction: column; gap: 0.375rem; }
.label { font-size: 0.8125rem; font-weight: 600; }
.optional { margin-left: 0.25rem; font-weight: 400; color: var(--muted); }
.hint { font-size: 0.75rem; color: var(--muted); }
.error { font-size: 0.75rem; color: var(--danger); }
.form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }

input, textarea, select {
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--charcoal);
  min-width: 0;
}
textarea { resize: vertical; line-height: 1.5; }
input[type="file"] { padding: 0.375rem; color: var(--muted); }
input[type="checkbox"] { width: 1.125rem; height: 1.125rem; margin: 0; padding: 0; accent-color: var(--charcoal); cursor: pointer; }
input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--white);
  font: inherit;
  font-weight: 600;
  color: var(--charcoal);
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover, .button:hover { background: var(--light-gray); }
select { cursor: pointer; }
input:hover, textarea:hover, select:hover { border-color: var(--tan-light); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--tan); box-shadow: 0 0 0 3px var(--tan-surface); }
.invalid input, .invalid textarea, .invalid select, .invalid .picked { border-color: var(--danger-edge); }
.invalid input:focus, .invalid textarea:focus, .invalid select:focus { border-color: var(--danger-edge); box-shadow: 0 0 0 3px var(--danger-surface); }
/* Checkboxes keep their own look; the list around them carries the border */
.invalid input[type="checkbox"], .invalid input[type="radio"] { border-color: initial; }

button, .button {
  display: inline-block;
  text-decoration: none;
  white-space: nowrap;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  padding: 0.4375rem 0.875rem;
  border-radius: var(--radius);
  border: 1px solid var(--charcoal);
  background: var(--charcoal);
  color: var(--white);
  cursor: pointer;
}
button:hover, .button:hover { background: var(--charcoal-hover); border-color: var(--charcoal-hover); }
/* Every word of a label capitalized, as in the app ("Find Matches"); not a sentence inside one */
button, .button { text-transform: capitalize; }
.match-toggle-caption { text-transform: none; }
button:disabled { background: var(--border-strong); border-color: var(--border-strong); cursor: default; }
/* Quiet actions: a button that looks like a link */
.text-button, .text-button:hover { padding: 0; border: 0; background: none; color: var(--charcoal); font-weight: 400; text-decoration: underline; text-decoration-color: var(--tan-light); }
.text-button:hover { text-decoration-color: var(--charcoal); }
.button.secondary { background: var(--white); color: var(--charcoal); border-color: var(--border-strong); }
.button.secondary:hover { background: var(--light-gray); }

.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  border: 1px solid var(--danger-border);
  background: var(--danger-surface);
  color: var(--danger);
}

/* The field only bots fill in: off screen, not display: none, which some bots skip */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Phones, and narrow iframes on other sites */
@media (max-width: 640px) {
  .topbar { padding: 0 1rem; }
  .brand-product { display: none; }
  .page { padding: 1rem 1rem 2rem; }
  .form-grid { grid-template-columns: 1fr; }
  .filter-row { flex-direction: column; align-items: stretch; }
  .match-clearance { max-width: none; }
  .match-actions button { flex: 1; }
  .filter-location { width: auto; max-width: none; }
  .filter-toggle { justify-content: space-between; }
  /* One row that scrolls sideways, so the roles don't push the list down */
  .role-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -1rem; padding: 0 1rem 0.25rem; scrollbar-width: none; }
  .role-chip { flex: none; }
  .openings summary { padding-left: 0.75rem; }
  .opening-body { padding-left: 0.75rem; padding-right: 0.75rem; }
  .opening-pick { margin-right: 0.75rem; }
  .apply-bar { padding-left: 1rem; padding-right: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .caret, .drop-zone { transition: none; }
  /* Separate: a browser without this pseudo-element drops every selector listed with it */
  .match-progress-bar::-webkit-progress-value { transition: none; }
}