/**
 * The recruitment Worker's stylesheet. No Tailwind here (this app has no
 * build step for it) — one hand-written file importing the generated
 * tokens.css, then base rules, controls, forms and layout, in that order.
 *
 * House rules carried over from the marketing site's CLAUDE.md, because the
 * accessibility gate enforces the same thresholds here: 18px body text, 16px
 * reserved for control labels only, pills/inputs at a 52-56px floor, a 2px
 * (never 1.5px) border on form fields, visible focus rings on every
 * background this app uses.
 */

@import url('/static/tokens.css');
/* Self-hosted Comfortaa is follow-up work (PR2+): copying the woff2 files
   from node_modules/@fontsource/comfortaa into public/static/fonts/ and
   writing the @font-face rules here, so the CSP can stay font-src 'self'
   with no Google Fonts request. Until then --t2-font falls back to
   system-ui, which is a visual difference from the marketing site but
   not a CSP or accessibility issue. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--t2-white);
  color: var(--t2-charcoal);
  font: var(--t2-body);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--t2-font);
  color: var(--t2-ink);
}

a {
  color: var(--t2-purple);
}

:focus-visible {
  outline: 3px solid var(--t2-purple);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

/* -------------------------------------------------------------------- */
/* Skip link                                                            */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--t2-ink);
  color: var(--t2-white);
  padding: 16px 24px;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
}

/* -------------------------------------------------------------------- */
/* Header / footer                                                      */

.t2r-header {
  border-bottom: 1px solid var(--t2-mist);
}

.t2r-header-inner {
  max-width: var(--t2-container);
  margin: 0 auto;
  padding: 20px var(--t2-section-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.t2r-wordmark {
  font-family: var(--t2-font);
  font-weight: 700;
  font-size: 20px;
  color: var(--t2-purple);
  text-decoration: none;
}

.t2r-footer {
  border-top: 1px solid var(--t2-mist);
  padding: var(--t2-section-y) var(--t2-section-x);
  text-align: center;
  color: var(--t2-charcoal-soft);
  font-size: 14px;
}

.t2r-footer a {
  color: inherit;
}

/* -------------------------------------------------------------------- */
/* Ink hero band                                                        */

.t2r-hero {
  background: var(--t2-ink);
  color: var(--t2-white);
  padding: var(--t2-section-y) var(--t2-section-x);
}

.t2r-hero-inner {
  max-width: var(--t2-container);
  margin: 0 auto;
}

.t2r-hero-eyebrow {
  font-family: var(--t2-font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t2-disability-lime);
  margin: 0 0 16px;
}

.t2r-hero h1 {
  color: var(--t2-white);
  font-weight: 300;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.1;
  margin: 0 0 16px;
}

.t2r-hero-lead {
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  max-width: 640px;
  margin: 0;
}

/* -------------------------------------------------------------------- */
/* Sections and container                                               */

.t2r-section {
  padding: var(--t2-section-y) var(--t2-section-x);
}

.t2r-container {
  max-width: var(--t2-container);
  margin: 0 auto;
}

/* -------------------------------------------------------------------- */
/* Pills (52px floor, matching the marketing site's uniform control size) */

.t2-pill,
.t2-pill-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 9999px;
  font-family: var(--t2-font);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
}

.t2-pill {
  background: var(--t2-purple);
  color: var(--t2-white);
}

.t2-pill:hover {
  opacity: 0.9;
}

.t2-pill-outline {
  background: transparent;
  border-color: currentColor;
  color: var(--t2-purple);
}

.t2-pill-outline.on-ink {
  color: var(--t2-white);
}

button.t2-pill,
button.t2-pill-outline {
  font: inherit;
}

/* -------------------------------------------------------------------- */
/* Role cards                                                           */

.t2r-roles {
  display: grid;
  /* min(320px, 100%), not a bare 320px floor: minmax()'s minimum is a hard
     floor honoured even when it does not fit, and at exactly a 320px
     viewport — WCAG 2.2 1.4.10's own required test width — no positive side
     padding on the page can coexist with a card that insists on the full
     320px. Confirmed live at 320px before and after: without min(), the card
     overflowed by exactly one side's padding; with it, no page-level scroll
     and the card fills the available width instead of stopping at 320. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 24px;
  margin-top: 32px;
}

.t2r-role-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--t2-white);
  border: 1px solid var(--t2-mist);
  border-radius: 24px;
  padding: 32px;
}

.t2r-role-tag {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  padding-left: 12px;
  border-left: 3px solid var(--t2-purple);
}

.t2r-role-card h3 {
  margin: 12px 0 8px;
  font-size: 24px;
}

.t2r-role-meta {
  font-size: 14px;
  color: var(--t2-charcoal-soft);
  margin: 0 0 12px;
}

.t2r-empty {
  background: var(--t2-mist);
  border-radius: 24px;
  padding: 48px;
  text-align: center;
}

/* -------------------------------------------------------------------- */
/* Job detail body (rendered markdown)                                  */

.t2r-job-body {
  max-width: 720px;
}

.t2r-job-body h2 {
  font-size: 24px;
  margin: 40px 0 16px;
}

.t2r-job-body p,
.t2r-job-body li {
  font-size: 18px;
  line-height: 1.7;
}

.t2r-job-body ul {
  padding-left: 24px;
}

/* -------------------------------------------------------------------- */
/* Form fields — copied from the marketing site's contact form           */
/* (2px charcoal-soft border, never the design's 1.5px, which fails      */
/* WCAG 1.4.11 at ~1.3:1)                                                 */

.t2r-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.t2r-label {
  font-family: var(--t2-font);
  font-weight: 500;
  font-size: 18px;
  color: var(--t2-ink);
}

.t2r-required {
  font-weight: 400;
  color: var(--t2-charcoal-soft);
}

.t2r-input {
  font-family: var(--t2-font);
  font-size: 18px;
  line-height: 1.5;
  color: var(--t2-charcoal);
  background: var(--t2-white);
  border: 2px solid var(--t2-charcoal-soft);
  border-radius: 14px;
  padding: 14px 16px;
  min-height: 56px;
  width: 100%;
}

.t2r-input:focus-visible {
  border-color: var(--t2-purple);
}

.t2r-input--error {
  border-color: var(--t2-aged-pink);
}

.t2r-error {
  font-size: 16px;
  color: var(--t2-aged-pink);
  margin: 0;
}

.t2r-field--checkbox {
  gap: 0;
}

.t2r-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--t2-font);
  font-size: 17px;
  line-height: 1.5;
  color: var(--t2-ink);
}

.t2r-checkbox-label input[type='checkbox'] {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.t2r-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 40px;
}

.t2r-fieldset legend {
  font-family: var(--t2-font);
  font-weight: 700;
  font-size: 22px;
  color: var(--t2-ink);
  padding: 0 0 16px;
  width: 100%;
  border-bottom: 2px solid var(--t2-purple);
  margin-bottom: 24px;
}

.t2r-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .t2r-field-row {
    grid-template-columns: 1fr;
  }
}

.t2r-alert {
  font-size: 18px;
  border-radius: 14px;
  padding: 16px 20px;
  margin: 0 0 24px;
}

.t2r-alert--notice {
  background: var(--t2-purple-tint);
  color: var(--t2-ink);
}

.t2r-alert--error {
  background: var(--t2-rose-tint);
  color: var(--t2-ink);
}

@media (max-width: 640px) {
  .t2r-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* -------------------------------------------------------------------- */
/* /manage — the staff area                                             */
/*                                                                      */
/* Plainer than the public pages on purpose: this is a working tool for  */
/* one HR lead and a finance person, not a shopfront. Same tokens and    */
/* the same 52px/56px control floor, so it passes the same gate.         */

.t2r-manage-header {
  background: var(--t2-ink);
  color: var(--t2-white);
  padding: 16px var(--t2-section-x);
}

.t2r-manage-header-inner {
  max-width: var(--t2-container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.t2r-manage-header .t2r-wordmark {
  color: var(--t2-white);
}

/* `flex-wrap` is load-bearing, not tidiness. Without it these eleven links sat
   on one line and pushed every /manage page into a horizontal scroll at around
   600px, which is a WCAG 2.2 1.4.10 Reflow failure. The accessibility gate did
   not catch it because it measures contrast and axe rules, not overflow — so
   the gate now asserts no horizontal scroll per route as well. */
.t2r-manage-nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 8px;
  flex: 1;
  min-width: 0;
}

.t2r-manage-nav a {
  color: var(--t2-white);
  font-size: 16px;
  text-decoration: underline;
}

.t2r-manage-who {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

/* Ends the Cloudflare Access session by clearing its CF_Authorization cookie.
   Cloudflare serves /cdn-cgi/access/logout at the edge, so there is deliberately
   no route for it in this Worker. Full white rather than the 85% the surrounding
   text uses: this is an interactive control, so it carries the same contrast bar
   as the nav links beside it. */
.t2r-signout {
  color: var(--t2-white);
  text-decoration: underline;
  white-space: nowrap;
}

.t2r-breadcrumb {
  margin: 0 0 16px;
  font-size: 16px;
}

.t2r-hint {
  font-size: 16px;
  color: var(--t2-charcoal);
  margin: 0;
}

.t2r-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin: 32px 0 0;
}

.t2r-textarea {
  min-height: 240px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  line-height: 1.6;
  resize: vertical;
}

.t2r-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 24px;
}

.t2r-table th,
.t2r-table td {
  text-align: left;
  vertical-align: top;
  padding: 16px 12px;
  border-bottom: 1px solid var(--t2-mist);
  font-weight: 400;
}

.t2r-table thead th {
  font-weight: 700;
  font-size: 16px;
  border-bottom: 2px solid var(--t2-charcoal-soft);
}

.t2r-table-meta {
  display: block;
  font-size: 14px;
  color: var(--t2-charcoal);
}

.t2r-inline-form {
  display: inline;
}

.t2r-card {
  border: 2px solid var(--t2-purple);
  border-radius: 14px;
  padding: 20px;
  margin: 0 0 24px;
}

.t2r-filter-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0 0 24px;
}

.t2r-filter-nav a {
  color: var(--t2-purple);
  font-size: 16px;
  text-decoration: underline;
}

.t2r-filter-nav a[aria-current='page'] {
  color: var(--t2-ink);
  font-weight: 700;
  text-decoration: none;
}

.t2r-search {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin: 0 0 24px;
}

.t2r-search .t2r-input {
  flex: 1 1 240px;
  width: auto;
}

.t2r-stat-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 16px 0 24px;
}

.t2r-stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 2px solid var(--t2-purple);
  border-radius: 14px;
  padding: 16px 24px;
  min-width: 140px;
  text-decoration: none;
  color: inherit;
}

a.t2r-stat-card:hover {
  border-color: var(--t2-ink);
}

.t2r-stat-value {
  font: var(--t2-h2);
  color: var(--t2-ink);
}

.t2r-stat-label {
  font-size: 16px;
  color: var(--t2-charcoal);
}

/* The bulk-move toolbar and its selection column (views/components/data.tsx's
   DataTable with `bulk`, ADR-0010 N3). The toolbar is a plain form of labelled
   controls; the checkboxes are plain checkboxes. app.js adds a select-all and
   a live count but nothing here depends on it. */
.t2r-bulk-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  margin: 24px 0 0;
  padding: 20px;
  border: 2px solid var(--t2-purple);
  border-radius: 14px;
}

/* Inside the toolbar the fields sit in a row, not stacked with 24px gaps, and
   size to their content rather than the full width the base rule gives them. */
.t2r-bulk-toolbar .t2r-field {
  margin-bottom: 0;
  flex: 1 1 220px;
}

.t2r-bulk-toolbar .t2r-input {
  width: 100%;
}

.t2r-select-col {
  width: 56px;
  text-align: center;
}

.t2r-row-select {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

/* Built entirely by app.js (see its own comment) — a [data-tabs] container
   with no JS, or below 1024px, has no .t2r-tablist in it at all, so these
   rules never apply and the sections underneath render as plain stacked
   content with ordinary <h2> headings. */
.t2r-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 24px;
}

.t2r-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 9999px;
  font-family: var(--t2-font);
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  border: 2px solid var(--t2-purple);
  background: transparent;
  color: var(--t2-purple);
}

.t2r-tab[aria-selected='true'] {
  background: var(--t2-purple);
  color: var(--t2-white);
  /* Matching .t2-pill's own filled state: a border the same colour as the
     fill it sits on is a 1:1 "invisible border" — the a11y gate's WCAG
     2.2 1.4.11 non-text contrast check caught exactly this the first time
     this rule shipped. Transparent needs no border of its own precisely
     because the purple/white fill already carries the contrast. */
  border-color: transparent;
}

/* Deep variants under white text: the plain arm colours fail 4.5:1 there,
   which is the defect that shipped site-wide once already. */
.t2r-badge {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 9999px;
  background: var(--t2-charcoal);
  color: var(--t2-white);
}

/* Tone, not table. Every badge used to be the same charcoal pill, so a list of
   applications gave a manager nothing to scan: "Screening" and "Action needed"
   looked identical. The tone says what the colour means regardless of which
   column the value came from (src/views/status.ts). */

/* In flight. Nobody has to act right now. */
.t2r-badge--tone-waiting {
  background: var(--t2-purple);
}

/* Someone has to do something, and it is probably the person reading. */
.t2r-badge--tone-action {
  background: var(--t2-aged-coral-deep);
}

/* Done, healthy, or confirmed. */
.t2r-badge--tone-good {
  background: var(--t2-disability-green-deep);
}

/* Finished without succeeding. Deliberately not red: "Unsuccessful" is what an
   applicant reads about their own application on /home, and an alarm colour
   there would be unkind as well as wrong. */
.t2r-badge--tone-ended {
  background: var(--t2-charcoal-soft);
}

/* Something is wrong and will not resolve itself. */
.t2r-badge--tone-bad {
  background: var(--t2-rose-deep);
}

.t2r-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .t2r-manage-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .t2r-table thead {
    display: none;
  }

  .t2r-table th,
  .t2r-table td {
    display: block;
    border-bottom: none;
    padding: 4px 0;
  }

  .t2r-table tr {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid var(--t2-mist);
  }
}

/* -------------------------------------------------------------------- */
/* Auth pages (sign-in, check-email, verify) — a narrow, centred column  */

.t2r-container--narrow {
  max-width: 520px;
}

/**
 * Honeypot: a real applicant never sees or fills this. `position: absolute`
 * takes it out of the normal document flow entirely, so it also never
 * reserves layout space the way `visibility: hidden` or `opacity: 0` would.
 * Real content, never `display: none` — some bots skip fields display:none
 * hides, exactly because it is the obvious way to fake a honeypot.
 */
.t2r-honeypot {
  position: absolute;
  left: -9999px;
}

.t2r-code-input {
  letter-spacing: 8px;
  font-size: 24px;
  max-width: 200px;
}

/* -------------------------------------------------------------------- */
/* Offer document — merged, HR-authored HTML embedded on /offer/:id.     */
/* Its own visual "paper", distinct from the surrounding page chrome, so  */
/* an applicant can tell where the legal document ends and our own       */
/* accept/decline controls begin.                                       */

.t2r-offer-document {
  border: 2px solid var(--t2-charcoal-soft);
  border-radius: 14px;
  padding: 32px;
  margin: 24px 0;
  background: var(--t2-white);
  line-height: 1.6;
  /* This container renders an offer template's merged body — HR-authored
     rich text once real templates replace the placeholder, so a heading or
     paragraph can contain a word this layout was never tuned for. Measured
     at 320px: the placeholder heading "[PLACEHOLDER CONTRACT — NOT
     HR-APPROVED TEXT]" overflowed the page by 10px with no single element's
     own box exceeding the viewport — a long inline run bleeding out of an
     overflow:visible heading rather than growing its box, so nothing in
     scripts/a11y/audit.mjs's element-by-element scan named the true cause.
     break-word is the defensive fix for arbitrary merged content generally,
     not a workaround for this one placeholder string. */
  overflow-wrap: break-word;
}

.t2r-offer-document h1,
.t2r-offer-document h2,
.t2r-offer-document h3 {
  font-family: var(--t2-font);
  color: var(--t2-ink);
}

.t2r-offer-document p {
  margin: 0 0 16px;
}

.t2r-offer-document table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px;
}

.t2r-offer-document table th,
.t2r-offer-document table td {
  text-align: left;
  vertical-align: top;
  padding: 8px 12px;
  border-bottom: 1px solid var(--t2-mist);
}