/* WE-IT research workbench. Observed website brand tokens; app additions are documented in docs/WEIT_THEME.md.
   Local CSS only: no CDN, external fonts, JavaScript framework or Node build. */

:root {
  color-scheme: light;
  --color-brand: #05143c;
  --color-brand-strong: #05143c;
  --color-accent: #fa6b00;
  --color-secondary: #45aadd;
  --color-link: #234057;
  --color-action-text: #05143c;
  --color-accent-soft: #fff1e6;
  --color-page: #f9f9f9;
  --color-surface: #ffffff;
  --color-text: #111111;
  --color-muted: #526572; /* Darker app text than the website muted token. */
  --color-line: #e5e7eb;
  --color-success: #166534;
  --color-success-soft: #eef8f0;
  --color-warning: #805b08;
  --color-warning-soft: #fff8e6;
  --color-danger: #a12626;
  --color-danger-soft: #fff0f0;
  --color-ai: #65438c;
  --color-ai-soft: #f2edf9;
  --color-focus: #9b4e00;
  --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius: .65rem;
  --radius-small: .35rem;
  --shadow-card: 0 2px 8px rgb(23 61 80 / .04);
  --content-width: 80rem;
}

* { box-sizing: border-box; }
html { font-size: 16px; scroll-padding-top: 1rem; }
body { margin: 0; background: var(--color-page); color: var(--color-text); font: 1rem/1.55 var(--font-body); }
img, svg { max-width: 100%; height: auto; }
a { color: var(--color-link); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; }
button, summary { cursor: pointer; }
button:disabled { opacity: .6; cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
h1, h2, h3, h4 { line-height: 1.2; color: var(--color-brand); }
h1 { font-size: clamp(1.65rem, 3vw, 2.35rem); margin: 0 0 var(--space-3); letter-spacing: -.025em; }
h2 { font-size: 1.35rem; margin: 0 0 var(--space-3); }
h3 { font-size: 1.08rem; margin: 0 0 var(--space-2); }
p { margin: 0 0 var(--space-4); }
ul, ol { padding-left: 1.3rem; }
small, .text-sm { font-size: .875rem; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; }
code { overflow-wrap: anywhere; }
pre { overflow-x: auto; padding: var(--space-4); background: var(--color-page); border: 1px solid var(--color-line); border-radius: var(--radius-small); }

.layout { min-height: 100vh; display: flex; flex-direction: column; }
.container { width: min(calc(100% - 2.5rem), var(--content-width)); margin-inline: auto; }
main.container { flex: 1; padding-block: var(--space-8); }
.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.site-header .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); }
.brand { display: flex; align-items: center; gap: var(--space-3); color: var(--color-brand); font-weight: 750; text-decoration: none; line-height: 1.25; }
.brand strong { font-size: 1.4rem; letter-spacing: -.03em; }
.brand small { display: block; font-weight: 450; color: var(--color-muted); font-size: .8rem; }
.brand-mark { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: var(--radius-small); background: var(--color-brand); color: white; font-weight: 750; }
.nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.nav a { padding: .55rem .7rem; color: var(--color-text); border-radius: var(--radius-small); text-decoration: none; font-size: .925rem; }
.nav a:hover, .nav a[aria-current="page"], .nav .active { background: var(--color-accent-soft); color: var(--color-link); }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-6); }
.page-header p { max-width: 65ch; color: var(--color-muted); margin-bottom: 0; }
.footer { margin-top: var(--space-8); padding-block: var(--space-6); border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: .875rem; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-4); }
.split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(19rem, 1fr); gap: var(--space-6); align-items: start; }
.card { min-width: 0; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); padding: var(--space-6); box-shadow: var(--shadow-card); }
.card > :last-child { margin-bottom: 0; }
.card + .card { margin-top: var(--space-4); }
.grid > .card + .card, .split > .card + .card { margin-top: 0; }
.stat { display: block; font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 750; color: var(--color-brand); line-height: 1.2; margin-bottom: var(--space-2); }
.stat small { display: block; color: var(--color-muted); font-size: .875rem; font-weight: 450; margin-top: var(--space-2); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.actions form { margin: 0; }
.btn { display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2); min-height: 2.6rem; padding: .6rem 1rem; border: 1px solid var(--color-line); border-radius: var(--radius-small); background: white; color: var(--color-brand); font-weight: 650; text-decoration: none; line-height: 1.3; }
.btn:hover { background: var(--color-page); text-decoration: none; }
.btn-primary { background: var(--color-accent); color: var(--color-action-text); border-color: var(--color-accent); }
.btn-primary:hover { background: #e96000; border-color: #e96000; }
.btn-secondary { background: white; color: var(--color-brand); border-color: #a5b8c3; }
.btn.small { min-height: 2.1rem; padding: .4rem .7rem; font-size: .875rem; }

.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius-small); background: white; }
table, .table { width: 100%; border-collapse: collapse; text-align: left; font-size: .925rem; }
th, td { padding: .8rem 1rem; border-bottom: 1px solid var(--color-line); vertical-align: top; }
th { background: #edf3f6; color: var(--color-brand); font-size: .825rem; font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafcfd; }
caption { text-align: left; padding: var(--space-3) var(--space-4); color: var(--color-muted); }
td .btn { white-space: nowrap; }
td .evidence { font-size: .875rem; }

.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .55rem; background: #edf2f5; color: #425b6a; border: 1px solid #d5e0e6; border-radius: 999px; font-size: .775rem; line-height: 1.5; font-weight: 650; white-space: nowrap; }
.badge.data, .badge.info { color: var(--color-link); background: #eaf5fc; border-color: #bbdceb; }
.badge.ai { color: var(--color-ai); background: var(--color-ai-soft); border-color: #d9cbea; }
.badge.success, .badge.reviewed, .badge.published, .badge.current_fit, .badge.current-fit { color: var(--color-success); background: var(--color-success-soft); border-color: #b6d9bf; }
.badge.warning, .badge.draft, .badge.unassessed, .badge.follow_up, .badge.follow-up { color: var(--color-warning); background: var(--color-warning-soft); border-color: #e9d392; }
.badge.development { color: var(--color-ai); background: var(--color-ai-soft); border-color: #d9cbea; }
.badge.danger, .badge.failed, .badge.conflict { color: var(--color-danger); background: var(--color-danger-soft); border-color: #ecc6c6; }

.field { margin-bottom: var(--space-4); }
.field > label, .field > legend { display: block; font-weight: 650; margin-bottom: var(--space-2); color: var(--color-brand); }
.field small, .field .hint { display: block; color: var(--color-muted); margin-top: var(--space-2); font-size: .85rem; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { width: 100%; min-height: 2.6rem; border: 1px solid #9bb0bd; border-radius: var(--radius-small); background: white; color: var(--color-text); padding: .6rem .7rem; }
textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-accent); width: 1.05rem; height: 1.05rem; vertical-align: -.15rem; margin-right: .35rem; }
fieldset { border: 0; padding: 0; margin: 0 0 var(--space-4); min-width: 0; }
.choice { display: flex; align-items: flex-start; gap: var(--space-2); padding: .55rem .65rem; margin-bottom: var(--space-2); background: var(--color-page); border: 1px solid var(--color-line); border-radius: var(--radius-small); }
.choice input { flex-shrink: 0; margin-top: .25rem; }
.choice label { cursor: pointer; }

.notice { padding: var(--space-4); margin-bottom: var(--space-4); border: 1px solid #bfd5df; border-left: 4px solid var(--color-accent); border-radius: var(--radius-small); background: #edf6f9; color: var(--color-brand); }
.notice > :last-child { margin-bottom: 0; }
.notice.warning { background: var(--color-warning-soft); color: #674b0d; border-color: #e9d392; border-left-color: var(--color-warning); }
.notice.success { background: var(--color-success-soft); color: var(--color-success); border-color: #b6d9bf; border-left-color: var(--color-success); }
.notice.danger, .notice.error { background: var(--color-danger-soft); color: var(--color-danger); border-color: #ecc6c6; border-left-color: var(--color-danger); }
.tabs { display: flex; gap: var(--space-2); overflow-x: auto; border-bottom: 1px solid var(--color-line); margin: 0 0 var(--space-6); padding-bottom: var(--space-2); }
.tabs a { flex-shrink: 0; padding: .5rem .75rem; border-radius: var(--radius-small); text-decoration: none; color: var(--color-muted); }
.tabs a:hover, .tabs a[aria-current="page"], .tabs a.active { color: var(--color-link); background: var(--color-accent-soft); }
.muted { color: var(--color-muted); }
.evidence { white-space: pre-wrap; overflow-wrap: anywhere; border-left: 3px solid #bed2de; padding-left: var(--space-3); line-height: 1.6; }
.evidence mark { background: #fff0b9; color: var(--color-text); }
.pipeline { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: stretch; padding: 0; list-style: none; margin: var(--space-6) 0; }
.pipeline > * { flex: 1 1 10rem; padding: var(--space-4); border: 1px solid var(--color-line); border-radius: var(--radius-small); background: white; }
.pipeline strong { display: block; color: var(--color-link); margin-bottom: var(--space-2); }
.pipeline p { font-size: .875rem; margin-bottom: 0; color: var(--color-muted); }
details { border: 1px solid var(--color-line); border-radius: var(--radius-small); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); background: white; }
summary { color: var(--color-brand); font-weight: 600; }
details[open] summary { margin-bottom: var(--space-3); }

/* A small utility vocabulary keeps Jinja templates compact without a compiler. */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.w-full { width: 100%; }
.font-bold { font-weight: 700; }
.text-right { text-align: right; }
.bg-white { background: white; }
.rounded-lg { border-radius: var(--radius); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -5rem; z-index: 5; padding: var(--space-3); background: white; color: var(--color-brand); border: 2px solid var(--color-focus); }
.skip-link:focus { top: var(--space-2); }

/* Vacancy classifier */
.search-form { display: flex; align-items: end; gap: var(--space-3); }
.search-form .field { flex: 1; margin-bottom: 0; }
.classifier-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.classifier-methods > .card { min-width: 0; }
.result-link { border-left: 3px solid #bed2de; padding: var(--space-2) var(--space-3); margin-block: var(--space-3); }
[data-classification-batch] progress { display: block; width: 100%; height: 1rem; accent-color: var(--color-accent); }
[data-classifier-form] button:disabled { opacity: .7; cursor: wait; }

@media (max-width: 50rem) {
  .classifier-methods { grid-template-columns: 1fr; }
  .search-form { align-items: stretch; flex-direction: column; }
  .split { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; gap: var(--space-4); }
  .site-header .container { align-items: flex-start; }
  .nav { width: 100%; }
  .nav a { padding: .5rem .6rem; }
}
@media (max-width: 35rem) {
  .container { width: calc(100% - 1.5rem); }
  main.container { padding-block: var(--space-6); }
  .card { padding: var(--space-4); }
  th, td { padding: .65rem .75rem; }
  .page-header .actions, .page-header .btn { width: 100%; }
  .nav { gap: var(--space-1); }
  .brand strong { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
@media print {
  body { background: white; color: black; font-size: 10pt; }
  .container { width: 100%; }
  .nav, .btn, .skip-link, .no-print { display: none !important; }
  .site-header, .footer { border-color: #bbb; }
  .card { box-shadow: none; break-inside: avoid; }
  .table-wrap { overflow: visible; }
  th, td { padding: .4rem; font-size: 9pt; }
  .split { grid-template-columns: 1fr; }
}

.cv-start-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cv-preview-text { min-height: 24rem; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.cv-redacted-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 24rem; overflow: auto; padding: var(--space-4); background: var(--color-page); border: 1px solid var(--color-line); border-radius: var(--radius-small); }
.cv-metadata { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); }
.cv-metadata dt { font-weight: 650; }
.cv-metadata dd { margin: 0; }
.cv-redaction-list { margin: 0; padding-left: 1.25rem; }
.cv-skill { align-items: flex-start; }
.cv-skill label { display: grid; gap: var(--space-2); }
.cv-skill .evidence { display: block; font-weight: 400; }
.cv-skill small { color: var(--color-muted); }
@media (max-width: 50rem) { .cv-start-grid { grid-template-columns: 1fr; } }

/* Small public result cues. */
.match-label { display: inline-flex; align-items: center; border-radius: 999px; padding: .25rem .65rem; font-size: .875rem; font-weight: 700; }
.match-green { color: #14532d; background: #dcfce7; }
.match-blue { color: #1e3a8a; background: #dbeafe; }
.match-yellow { color: #713f12; background: #fef3c7; }
.coverage { color: var(--color-brand); font-weight: 700; }

.language-switch { display: flex; gap: .35rem; white-space: nowrap; }
.language-switch a { padding: .35rem .5rem; border: 1px solid var(--color-line); border-radius: var(--radius-small); text-decoration: none; font-size: .85rem; }
.language-switch a[aria-current="page"] { background: var(--color-brand); color: white; }

/* Accessible public matching results carousel and submission feedback. */
.match-carousel { min-width: 0; }
.carousel-heading p { margin-bottom: var(--space-3); }
.carousel-controls { display: none; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.match-carousel.is-enhanced .carousel-controls { display: flex; }
.carousel-count { min-width: 4rem; color: var(--color-muted); font-size: .875rem; text-align: center; font-variant-numeric: tabular-nums; }
.carousel-track { display: flex; gap: var(--space-4); width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scroll-padding-inline: .2rem; padding: .2rem .2rem var(--space-3); }
.match-slide { flex: 0 0 min(100%, 44rem); min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.match-slide > .card { height: 100%; margin: 0; }
.followup-prompt { margin-block: var(--space-4); padding: var(--space-4); border: 1px solid #e9d392; border-left: 4px solid var(--color-accent); border-radius: var(--radius-small); background: var(--color-warning-soft); }
.followup-prompt a { font-weight: 700; }
.followup-prompt-after { margin-top: calc(-1 * var(--space-3)); }
#followup-questions { scroll-margin-top: var(--space-6); }
#followup-questions:focus { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.matching-loading { position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(calc(100% - 2rem), 25rem); margin: 0; padding: var(--space-8); border: 0; border-radius: var(--radius); background: var(--color-surface); color: var(--color-brand); box-shadow: 0 1rem 4rem rgb(5 20 60 / .25); text-align: center; }
.matching-loading::backdrop { background: rgb(5 20 60 / .62); }
.matching-loading p { margin: var(--space-4) 0 0; font-size: 1.1rem; font-weight: 700; }
.matching-loading-spinner { display: block; width: 2.5rem; height: 2.5rem; margin-inline: auto; border: .25rem solid #d5e0e6; border-top-color: var(--color-accent); border-radius: 50%; animation: matching-spin .8s linear infinite; }
.matching-loading-fallback { display: block; z-index: 1000; }
@keyframes matching-spin { to { transform: rotate(360deg); } }
@media (max-width: 35rem) {
  .match-slide { flex-basis: 100%; }
  .carousel-controls .btn { min-width: 5.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .matching-loading-spinner { animation-duration: 1.8s; }
  .carousel-track { scroll-behavior: auto; }
}
@media print {
  .carousel-controls, .followup-prompt { display: none !important; }
  .carousel-track { display: block; overflow: visible; }
  .match-slide { width: 100%; margin-bottom: 1rem; break-inside: avoid; }
}