:root {
  --green: #242424;
  --green-dark: #111111;
  --accent: #c62828;
  --brand-yellow: #f1cf00;
  --brand-yellow-dark: #d7b900;
  --ink: #242424;
  --muted: #5a5a5a;
  --line: #dedede;
  --paper: #ffffff;
  --canvas: #fbfbfa;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: Arial, Helvetica, sans-serif; }
button, input { font: inherit; }
button, label { -webkit-tap-highlight-color: transparent; }
.topbar { height: 73px; display: flex; align-items: center; justify-content: space-between; max-width: 1000px; margin: auto; padding: 0 28px; }
.wordmark { display: inline-flex; gap: 11px; align-items: center; color: var(--green); text-decoration: none; }
.wordmark-logo { display: block; width: 43px; height: 30px; flex: 0 0 43px; object-fit: contain; background: white; }
.wordmark strong, .wordmark small { display: block; }.wordmark strong { font-size: 14px; letter-spacing: -.02em; }.wordmark small { margin-top: 3px; color: var(--muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.language-note { color: var(--muted); font-size: 12px; }
.app-shell { width: min(100% - 32px, 670px); min-height: calc(100vh - 125px); margin: 0 auto; padding: 40px 0 65px; }
.progress-wrap { margin-bottom: 49px; }.progress-label { display: flex; justify-content: space-between; margin-bottom: 10px; color: var(--muted); font-size: 11px; }.progress-label span:first-child { color: var(--green); font-weight: 700; }.progress-track, .question-progress { height: 3px; overflow: hidden; background: #e1e7e3; }.progress-track span, .question-progress span { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }
.autosave-status { margin: -34px 0 28px; color: var(--muted); font-size: 11px; text-align: right; }
.autosave-status[data-tone="success"] { color: #3f715f; }
.autosave-status[data-tone="error"] { color: #b74b42; }
.screen { animation: enter .25s ease; }.screen[hidden] { display: none; }@keyframes enter { from { opacity: .3; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.screen-heading { margin-bottom: 30px; }.screen-heading.compact { margin-bottom: 25px; }.kicker { margin: 0 0 11px; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }.screen-heading h1, .confirmation h1 { margin: 0 0 12px; color: var(--green); font: 600 35px/1.1 Georgia, serif; letter-spacing: -.035em; }.screen-heading p:not(.kicker), .confirmation > p:last-child { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.job-list { display: grid; gap: 12px; margin-bottom: 24px; }.job-option { display: flex; min-height: 86px; align-items: center; gap: 17px; padding: 17px 20px; border: 1px solid var(--line); border-radius: 2px; background: var(--paper); box-shadow: 0 2px 7px rgba(30, 58, 52, .035); transition: border-color .2s, box-shadow .2s, transform .2s, background .2s; }.job-option:hover { border-color: #a9c1b4; background: #fcfdfc; box-shadow: 0 9px 22px rgba(30, 58, 52, .1); transform: translateY(-2px); }.job-option:has(input:focus-visible) { outline: 3px solid rgba(196, 166, 107, .35); outline-offset: 2px; }.job-option:has(input:checked) { border-color: var(--green); background: #f7faf7; box-shadow: 0 7px 19px rgba(30, 58, 52, .11); }.job-option input, .answer-option input { position: absolute; opacity: 0; }.job-category-icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border: 1px solid #d5e2d9; border-radius: 50%; color: var(--green); background: #eef5ef; transition: color .2s, background .2s, border-color .2s, transform .2s; }.job-category-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }.job-option:hover .job-category-icon { border-color: #b9cfbf; color: var(--green-dark); background: #e5f0e7; transform: scale(1.05); }.job-option:has(input:checked) .job-category-icon { border-color: var(--accent); color: var(--green); background: #f3ead9; }.job-copy { flex: 1; }.job-copy strong { display: block; color: var(--green); font-size: 14px; font-weight: 600; line-height: 1.35; }.job-copy small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }.job-arrow { color: var(--accent); font-size: 19px; }
.button { min-height: 46px; padding: 0 18px; border: 0; cursor: pointer; font-size: 12px; font-weight: 700; transition: background .2s, transform .2s; }.button:disabled { cursor: not-allowed; opacity: .45; }.button-primary { color: white; background: var(--green); }.button-primary:hover:not(:disabled) { background: var(--green-dark); transform: translateY(-1px); }.button-primary span { margin-left: 16px; color: var(--accent); font-size: 18px; }.button-secondary { color: var(--green); border: 1px solid var(--line); background: white; }.next-button { min-width: 180px; }
.form-error { margin: 10px 0 15px; color: #b74b42; font-size: 12px; }.back-button { margin: 0 0 28px; padding: 0; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 12px; }.back-button:hover { color: var(--green); }
.candidate-hero { position: relative; display: flex; min-height: 190px; align-items: center; justify-content: space-between; gap: 24px; overflow: hidden; padding: 30px 34px; margin-bottom: 36px; color: white; background: var(--green); }
.candidate-hero-copy { position: relative; z-index: 1; max-width: 470px; }
.candidate-hero .kicker { color: var(--accent); }
.candidate-hero h1 { margin: 0 0 12px; font: 600 34px/1.1 Georgia, serif; letter-spacing: -.035em; }
.candidate-hero-copy > p:last-child { max-width: 430px; margin: 0; color: #d9e5de; font-size: 13px; line-height: 1.55; }
.candidate-hero-logo-wrap { position: relative; z-index: 1; display: grid; width: 82px; height: 64px; flex: 0 0 82px; place-items: center; padding: 4px; overflow: hidden; border: 1px solid rgba(196, 166, 107, .55); border-radius: 3px; background: white; }
.candidate-hero-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
.screen-heading h2 { margin: 0 0 12px; color: var(--green); font: 600 29px/1.1 Georgia, serif; letter-spacing: -.03em; }
.job-openings-count { margin: -10px 0 16px; color: var(--green); font-size: 12px; font-weight: 700; }
.job-meta { color: var(--muted); font-size: 11px; font-weight: 500; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 15px; margin-bottom: 28px; }.form-grid .full { grid-column: 1 / -1; }.form-grid label, #submit-form > label:not(.check-row) { display: flex; flex-direction: column; gap: 7px; color: var(--green); font-size: 12px; font-weight: 700; }.form-grid label span, #submit-form label span { color: var(--accent); }.form-grid input, #submit-form input[type="text"], #submit-form input:not([type]) { width: 100%; height: 43px; padding: 0 12px; border: 1px solid var(--line); outline-color: var(--green); color: var(--ink); background: white; font-size: 13px; }.availability { padding: 20px; margin: 0 0 25px; border: 1px solid var(--line); background: white; }.availability legend { padding: 0 8px; color: var(--green); font: 600 18px Georgia, serif; }.availability > p { margin: -1px 0 15px; color: var(--muted); font-size: 11px; }.availability-row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid #edf1ee; color: var(--ink); font-size: 12px; line-height: 1.4; }.availability-row label { color: var(--green); cursor: pointer; font-size: 11px; white-space: nowrap; }.availability-row input { accent-color: var(--green); }
.form-grid .nested-grid { grid-column: 1 / -1; margin: 0; padding: 15px; border: 1px solid #e6e6e6; background: #fbfbfa; }
.field-note { align-self: center; margin: 0; color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.45; }
.postal-same { margin: 0; }
.postal-same input { width: auto; height: auto; }
.conditional-panel[hidden] { display: none; }
.nested-grid.is-same input[readonly] { color: #666; background: #f0f0ed; }
.upload-status { min-height: 14px; color: #3f715f !important; font-size: 10px; font-weight: 400; }
.employment-current { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; color: var(--muted) !important; font-size: 11px; font-weight: 400; }
.employment-current input { width: auto; height: auto; }
.form-section { padding: 20px; margin: 0 0 20px; border: 1px solid var(--line); background: white; }.form-section legend { padding: 0 8px; color: var(--green); font: 600 18px Georgia, serif; }.section-help { margin: -1px 0 15px; color: var(--muted); font-size: 11px; line-height: 1.45; }.form-section select { width: 100%; height: 43px; padding: 0 10px; border: 1px solid var(--line); outline-color: var(--green); color: var(--ink); background: white; font-size: 13px; }.form-section textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line); outline-color: var(--green); color: var(--ink); background: white; font: 13px Arial, sans-serif; resize: vertical; }.repeat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; padding: 16px 0; border-top: 1px solid #edf1ee; }.repeat-row label, .file-grid label { display: flex; flex-direction: column; gap: 7px; color: var(--green); font-size: 12px; font-weight: 700; }.repeat-row .wide { grid-column: 1 / -1; }.repeat-row input { width: 100%; height: 39px; padding: 0 10px; border: 1px solid var(--line); outline-color: var(--green); color: var(--ink); background: white; font-size: 12px; }.text-button, .remove-row { margin-top: 4px; padding: 0; border: 0; color: var(--green); background: none; cursor: pointer; font-size: 11px; font-weight: 700; }.remove-row { grid-column: 1 / -1; justify-self: start; color: #b74b42; }.file-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.file-grid input { width: 100%; padding: 9px; border: 1px dashed #b9c8bf; color: var(--muted); background: #fbfcfb; font-size: 10px; }
.checkbox-field { display: grid; gap: 8px; }.checkbox-field-label { color: var(--green); font-size: 12px; font-weight: 700; }.checkbox-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 12px; }.checkbox-grid label { display: flex; flex-direction: row; gap: 7px; align-items: center; min-height: 34px; color: var(--ink); font-size: 11px; font-weight: 500; }.checkbox-grid input { width: auto; height: auto; margin: 0; accent-color: var(--green); }
.exam-header { display: flex; gap: 20px; align-items: start; }.exam-header .back-button { flex: 0 0 auto; }.exam-meta { flex: 1; display: flex; align-items: start; justify-content: space-between; gap: 15px; }.exam-meta span { color: var(--muted); font-size: 11px; line-height: 1.35; }.exam-meta strong { color: var(--green); font-size: 12px; white-space: nowrap; }.question-progress { margin: -7px 0 42px; }.question-section { margin: 0 0 12px; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.question-title { margin: 0 0 28px; color: var(--green); font: 600 27px/1.2 Georgia, serif; letter-spacing: -.02em; }.option-list { display: grid; gap: 10px; }.answer-option { position: relative; display: flex; gap: 13px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); color: var(--ink); background: white; cursor: pointer; font-size: 13px; line-height: 1.5; transition: border-color .2s, background .2s; }.answer-option:hover { border-color: #b9cbbf; }.answer-option:has(input:checked) { border-color: var(--green); background: #f1f5f1; }.answer-letter { width: 20px; height: 20px; flex: 0 0 20px; border: 1px solid #aabbb2; border-radius: 50%; }.answer-option:has(input:checked) .answer-letter { border: 6px solid var(--green); }.exam-actions { display: flex; justify-content: space-between; gap: 14px; margin-top: 29px; }.exam-actions .button-primary { margin-left: auto; }
.review-box { position: relative; margin-bottom: 26px; padding: 4px 18px; border: 1px solid var(--line); background: white; }.review-box div { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid #edf1ee; font-size: 12px; }.review-box div:last-of-type { border-bottom: 0; }.review-box span { color: var(--muted); }.review-box strong { color: var(--green); text-align: right; }.edit-review { margin: 0 0 15px; padding: 0; border: 0; color: var(--green); background: none; cursor: pointer; font-size: 11px; font-weight: 700; }.check-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 20px; color: var(--muted); font-size: 12px; font-weight: 400 !important; line-height: 1.5; }.check-row input { margin-top: 2px; accent-color: var(--green); }.confirmation { max-width: 550px; padding: 45px 0; text-align: center; }.confirmation .kicker { margin-top: 25px; }.success-mark { display: grid; width: 58px; height: 58px; margin: auto; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: 27px; }.confirmation h1 { font-size: 33px; }.footer { padding: 0 20px 25px; color: #99a49f; text-align: center; font-size: 10px; }
@media (max-width: 560px) { .topbar { height: 65px; padding: 0 16px; }.app-shell { width: min(100% - 32px, 670px); padding-top: 28px; }.progress-wrap { margin-bottom: 35px; }.screen-heading h1, .confirmation h1 { font-size: 30px; }.form-grid { grid-template-columns: 1fr; gap: 15px; }.form-grid .full { grid-column: auto; }.form-section, .availability { padding: 15px; }.repeat-row { grid-template-columns: 1fr; gap: 13px; }.repeat-row .wide { grid-column: auto; }.file-grid { grid-template-columns: 1fr; gap: 14px; }.checkbox-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.availability-row { grid-template-columns: 1fr auto auto; gap: 7px; font-size: 11px; }.question-title { font-size: 24px; }.answer-option { padding: 14px 12px; }.exam-header { display: block; }.exam-header .back-button { margin-bottom: 13px; }.exam-meta { margin-bottom: 16px; }.question-progress { margin-top: 0; }.review-box div { display: block; }.review-box strong { display: block; margin-top: 6px; text-align: left; } }
.repeat-row .employment-current input { width: auto; height: auto; min-width: 13px; min-height: 13px; padding: 0; border: 0; }
.detail-total-duration { display: flex; justify-content: space-between; gap: 20px; padding: 16px 18px; border-top: 2px solid var(--accent); color: var(--green); background: #fff9cf; font-size: 12px; }
.detail-total-duration strong { text-align: right; }
.selected-job-list { display: grid; }
.selected-job-summary { display: grid; grid-template-columns: 105px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px; border-bottom: 1px solid var(--line); }
.selected-job-copy { min-width: 0; }
.selected-job-copy strong { display: block; color: var(--green); font: 600 17px Georgia, serif; line-height: 1.25; }
.selected-job-copy p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.selected-job-number { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.remove-job-button { padding: 7px 0 7px 10px; border: 0; color: #b74b42; background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; }
.job-choice { display: flex; flex: 1; align-items: center; gap: 14px; cursor: pointer; }
.job-detail-button { padding: 7px 0 7px 10px; border: 0; color: var(--green); background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; white-space: nowrap; }
.job-detail-button:disabled { cursor: not-allowed; opacity: .35; }
.job-detail-button span { margin-left: 4px; color: var(--accent); font-size: 16px; }
.job-option { cursor: default; }
.job-detail-card { margin-bottom: 25px; border: 1px solid var(--line); background: white; }
.detail-facts { display: grid; grid-template-columns: repeat(3, 1fr); }
.selected-job-detail { border-bottom: 1px solid var(--line); }
.selected-job-detail:last-child { border-bottom: 0; }
.selected-job-detail > h2 { margin: 0; padding: 18px; color: var(--green); background: #fff9cf; font: 600 17px Georgia, serif; }
.selected-job-detail .detail-facts { border-top: 1px solid var(--line); }
.detail-fact { min-height: 86px; padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.detail-fact:nth-child(3n) { border-right: 0; }
.detail-fact span, .detail-fact strong { display: block; }
.detail-fact span { margin-bottom: 7px; color: var(--muted); font-size: 10px; }
.detail-fact strong { color: var(--green); font-size: 14px; line-height: 1.35; }
.detail-note { padding: 19px; }
.detail-note strong { color: var(--green); font: 600 16px Georgia, serif; }
.detail-note p { max-width: 520px; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
@media (max-width: 560px) {
  .job-option { align-items: flex-start; flex-direction: column; gap: 7px; }
  .job-detail-button { align-self: flex-end; padding-top: 0; }
  .job-choice { width: 100%; }
  .detail-facts { grid-template-columns: 1fr; }
  .detail-fact, .detail-fact:nth-child(3n) { border-right: 0; }
  .detail-fact:last-child { border-bottom: 0; }
  .selected-job-summary { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .selected-job-copy { grid-column: 1 / -1; grid-row: 1; }
  .selected-job-number { grid-column: 1; grid-row: 2; }
  .remove-job-button { grid-column: 2; grid-row: 2; }
}
.review-box { padding: 0; }
.review-section { padding: 20px; border-bottom: 1px solid #edf1ee; }
.review-section:last-of-type { border-bottom: 0; }
.review-section h2 { margin: 0 0 14px; color: var(--green); font: 600 17px Georgia, serif; }
.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.review-row { display: flex; justify-content: space-between; gap: 15px; padding: 11px 0; border-top: 1px solid #edf1ee; font-size: 12px; }
.review-row span { color: var(--muted); }
.review-row strong { max-width: 68%; color: var(--green); text-align: right; font-weight: 600; line-height: 1.45; }
.review-grid .review-row:first-child, .review-grid .review-row:nth-child(2) { border-top: 0; }
.review-wide { grid-column: 1 / -1; }
.review-empty { color: var(--muted); font-size: 11px; font-weight: 400; }
.review-entry { padding: 13px 0; border-top: 1px solid #edf1ee; font-size: 12px; line-height: 1.5; }
.review-entry strong { color: var(--green); }
.review-entry p { margin: 4px 0 0; color: var(--muted); }
.review-answer { padding: 14px 0; border-top: 1px solid #edf1ee; }
.review-answer > span { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.review-answer strong { display: block; margin-top: 5px; color: var(--green); font-size: 12px; line-height: 1.45; }
.review-answer p { margin: 7px 0 0; color: var(--ink); font-size: 12px; line-height: 1.45; }
.review-exam-title { margin: 18px 0 0; color: var(--green); font: 600 15px Georgia, serif; }
.review-actions { display: flex; gap: 20px; padding: 5px 20px 20px; }
.field-error { display: block; width: 100%; margin-top: 1px; color: #b74b42; font-size: 11px; font-weight: 400; line-height: 1.35; }
.field-error[hidden] { display: none; }
.has-error > input, .has-error > textarea, .has-error > select { border-color: #c96a61; }
.availability-row.has-error { background: #fff9f8; }
.availability-row > .field-error { grid-column: 1 / -1; margin-top: -3px; }
.option-list > .field-error { margin-top: 2px; }
.text-answer-label { display: grid; gap: 8px; color: var(--green); font-size: 12px; font-weight: 700; }
.text-answer-label input, .text-answer-label textarea { width: 100%; padding: 12px; border: 1px solid var(--line); outline-color: var(--green); color: var(--ink); background: white; font: 13px/1.5 Arial, sans-serif; }
.text-answer-label input { height: 45px; }
.text-answer-label textarea { resize: vertical; }
.check-row.has-error { color: var(--muted); }
.check-row .field-error { flex-basis: 100%; }
.incomplete-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.error-action { padding: 7px 10px; border: 1px solid #b74b42; color: #b74b42; background: white; cursor: pointer; font-size: 11px; font-weight: 700; }
.error-action:hover { color: white; background: #b74b42; }
.application-declaration { margin: 0 0 15px; padding: 20px; border: 1px solid var(--line); background: white; }
.application-declaration h2 { margin: 0 0 14px; color: var(--green); font: 600 18px Georgia, serif; }
.application-declaration p { margin: 0 0 12px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.application-declaration p:last-child { margin-bottom: 0; }
.legal-acknowledgement { flex-wrap: wrap; padding: 14px; border: 1px solid var(--brand-yellow-dark); background: #fff9cf; }
.legal-acknowledgement.has-error { border-color: #c96a61; background: #fff4f3; }
@media (max-width: 560px) {
  .review-section { padding: 17px 15px; }
  .review-grid { display: block; }
  .review-grid .review-row:first-child, .review-grid .review-row:nth-child(2) { border-top: 1px solid #edf1ee; }
  .review-row strong { max-width: 60%; }
  .review-actions { padding: 4px 15px 17px; flex-wrap: wrap; }
  .check-row { flex-wrap: wrap; }
}
.not-found-screen { max-width: 570px; padding: 75px 0; }
.not-found-screen h1 { margin: 0 0 14px; color: var(--green); font: 600 37px/1.1 Georgia, serif; letter-spacing: -.035em; }
.not-found-screen p:not(.kicker) { margin: 0 0 27px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.not-found-button { display: inline-flex; align-items: center; text-decoration: none; }
.resume-card { margin: -8px 0 22px; padding: 17px 18px; border: 1px solid #c9d8cf; background: #f0f5f1; }
.resume-card > strong { display: block; color: var(--green); font-size: 12px; }
.resume-card > p { margin: 7px 0 12px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.resume-link-row { display: flex; gap: 12px; align-items: center; }
.resume-link-row a { min-width: 0; overflow: hidden; color: var(--green); font-size: 10px; text-decoration: underline; text-overflow: ellipsis; white-space: nowrap; }
.resume-link-row .text-button { flex: 0 0 auto; margin: 0; }
@media (max-width: 560px) {
  .not-found-screen { padding: 45px 0; }
  .not-found-screen h1 { font-size: 30px; }
  .autosave-status { margin-top: -23px; text-align: left; }
  .resume-link-row { align-items: flex-start; flex-direction: column; }
}
.job-category-icon, .job-category-icon svg, .job-category-icon img { pointer-events: none; }
.job-category-image { display: block; width: 29px; height: 29px; object-fit: contain; }

/* Twin's brand palette: gold as the primary surface, charcoal for readable
   text and controls, and red reserved for emphasis and interaction states. */
.candidate-hero {
  color: var(--ink);
  background: var(--brand-yellow);
}
.candidate-hero .kicker {
  color: var(--ink);
}
.candidate-hero-copy > p:last-child {
  color: #3a3500;
}
.candidate-hero-logo-wrap {
  border-color: rgba(36, 36, 36, .28);
}
.progress-track,
.question-progress {
  background: #e7e7e7;
}
.progress-track span,
.question-progress span {
  background: var(--ink);
}
.button-primary {
  color: var(--ink);
  background: var(--brand-yellow);
}
.button-primary:hover:not(:disabled) {
  color: white;
  background: var(--accent);
}
.button-primary span {
  color: var(--ink);
}
.button-primary:hover:not(:disabled) span {
  color: white;
}
.job-option:hover {
  border-color: #bdbdbd;
  background: #fffdf0;
  box-shadow: 0 9px 22px rgba(0, 0, 0, .1);
}
.job-option:has(input:focus-visible) {
  outline-color: rgba(198, 40, 40, .55);
}
.job-option:has(input:checked) {
  border-color: var(--ink);
  background: #fff9cf;
  box-shadow: 0 7px 19px rgba(0, 0, 0, .11);
}
.job-category-icon {
  border-color: #e2c82a;
  color: var(--ink);
  background: #fff8c7;
}
.job-option:hover .job-category-icon {
  border-color: var(--brand-yellow-dark);
  color: var(--ink);
  background: #ffef8c;
}
.job-option:has(input:checked) .job-category-icon {
  border-color: var(--accent);
  color: var(--ink);
  background: #ffe875;
}
.answer-option:hover {
  border-color: #bdbdbd;
}
.answer-option:has(input:checked) {
  border-color: var(--ink);
  background: #fff9cf;
}
.availability-row input,
.check-row input {
  accent-color: var(--accent);
}
.success-mark {
  color: var(--ink);
  background: var(--brand-yellow);
}
.resume-card {
  border-color: #e2c82a;
  background: #fff9cf;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  justify-content: center;
}
.footer-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  justify-content: center;
}
.footer a {
  color: #68756f;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer a:hover {
  color: var(--green);
}
.footer-credit {
  flex-basis: 100%;
}

.topbar-tools {
  display: flex;
  gap: 18px;
  align-items: center;
}
.admin-login-link {
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
}
.admin-login-link:hover {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ui-icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  vertical-align: middle;
}
.button-primary span {
  display: inline-flex;
}
.button-primary span .ui-icon {
  width: 1em;
  height: 1em;
}
.back-button .ui-icon {
  width: 14px;
  height: 14px;
  margin-right: 5px;
}
.job-detail-button .ui-icon {
  width: 16px;
  height: 16px;
  margin-left: 4px;
  color: var(--accent);
}
.text-button .ui-icon {
  width: 13px;
  height: 13px;
  margin-right: 4px;
  vertical-align: -2px;
}
.success-mark .ui-icon {
  width: 30px;
  height: 30px;
  stroke-width: 2.2;
}
@media (max-width: 560px) {
  .topbar-tools {
    gap: 12px;
  }
  .admin-login-link,
  .language-note {
    font-size: 11px;
  }
}

/* Responsive safeguards for long job titles, questions, and form labels. */
body {
  overflow-x: hidden;
}

.topbar,
.app-shell,
.job-choice,
.job-copy,
.selected-job-copy,
.detail-fact,
.detail-note,
.exam-meta,
.answer-option {
  min-width: 0;
}

.job-copy strong,
.selected-job-copy strong,
.detail-fact strong,
.detail-note p,
.exam-meta span,
.question-section,
.question-title,
.answer-option,
.review-row strong,
.review-answer strong,
.check-row > span:not(.field-error) {
  overflow-wrap: anywhere;
}

.job-detail-button,
.button {
  max-width: 100%;
}

.detail-total-duration {
  flex-wrap: wrap;
  align-items: flex-start;
}

.detail-total-duration > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .candidate-hero {
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
    padding: 24px;
  }

  .candidate-hero-logo-wrap {
    align-self: flex-end;
    margin-top: 2px;
  }

  .exam-meta {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .exam-actions {
    align-items: stretch;
  }

  .exam-actions .button {
    flex: 1 1 140px;
  }

  .detail-total-duration {
    flex-direction: column;
    gap: 6px;
  }

  .detail-total-duration strong {
    text-align: left;
  }

  .check-row > span:not(.field-error) {
    flex: 1 1 0;
  }
}

@media (max-width: 380px) {
  .topbar {
    align-items: flex-start;
    height: auto;
    min-height: 65px;
    padding-top: 15px;
    padding-bottom: 12px;
  }

  .topbar-tools {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 9px;
  }

  .wordmark {
    gap: 8px;
  }

  .wordmark-logo {
    width: 38px;
    height: 28px;
    flex-basis: 38px;
  }

  .wordmark strong {
    font-size: 13px;
  }

  .wordmark small {
    font-size: 8px;
    letter-spacing: .06em;
  }

  .app-shell {
    width: min(100% - 24px, 670px);
  }

  .candidate-hero {
    padding: 20px;
  }

  .screen-heading h1,
  .confirmation h1 {
    font-size: 28px;
  }
}

/* The detail screen contains full-width sections, not three side-by-side facts. */
#detail-facts {
  display: block;
}

#detail-facts .selected-job-summary {
  grid-template-columns: 105px minmax(0, 1fr) auto;
}

#detail-facts .detail-total-duration {
  display: flex;
}

@media (max-width: 560px) {
  #detail-facts .selected-job-summary {
    grid-template-columns: 1fr auto;
  }

  #detail-facts .detail-total-duration {
    flex-direction: column;
  }
}

/* Keep every form control and review value inside its responsive container. */
.form-section,
.form-section > *,
.form-grid > *,
.form-grid label,
.repeat-row > *,
.file-grid > *,
.checkbox-field,
.review-section,
#submit-form > label:not(.check-row) {
  min-width: 0;
}

.form-grid input,
.form-grid select,
.form-grid textarea,
.repeat-row input,
.file-grid input,
#submit-form input,
#submit-form textarea {
  min-width: 0;
  max-width: 100%;
}

.file-grid input[type="file"] {
  overflow: hidden;
}

.form-section legend,
.section-help,
.field-note,
.checkbox-field-label,
.review-section h2,
.review-row > span,
.review-entry,
.review-entry p {
  overflow-wrap: anywhere;
}

.review-row > span {
  min-width: 0;
}

@media (max-width: 560px) {
  .form-section legend {
    max-width: 100%;
  }

  .file-grid input[type="file"] {
    font-size: 11px;
  }

  #submit-form > label:not(.check-row) {
    width: 100%;
  }

  .review-row {
    gap: 6px;
  }
}