/*
  Thread careers page styles. Hosted on the Cloudflare worker as a static asset (served at
  /careers/careers.css) and loaded by the tiny Shopify block. Edit here + redeploy the worker
  (npm run deploy) — no Shopify re-paste needed.

  Design tokens are lifted verbatim from the custom-order form (cloudflare-intake/public/form/
  form.css) so the two public forms read as the same site. Keep them in sync by hand if the
  storefront palette ever moves.
*/
.thread-tc {
  --t-cyan: #12a9db;
  --t-cyan-deep: #0a7297;
  --t-cyan-wash: #e9f7fb;
  --t-cyan-line: #cfe9f2;
  --t-ink: #14181c;
  --t-body: #4a545a;
  --t-muted: #79848a;
  --t-line: #e5e9eb;
  --t-soft: #f5f8f9;
  max-width: 1100px;
  margin: 0 auto;
  color: var(--t-ink);
}

.thread-tc-req { color: #b00020; }
.thread-tc-hint { font-weight: 400; opacity: .65; font-size: .9em; }
.thread-tc-hidden { display: none !important; }

/* ---------------------------------------------------------------- the role */
/* The posting itself. This half of the page is what Google indexes and what an applicant
   arriving from a QR code reads first, so it leads and the form follows. */
.tc-role { margin: 0 0 2rem; }

.tc-eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--t-cyan-deep); margin: 0 0 .6rem;
}
.tc-title { margin: 0 0 .9rem; font-size: clamp(1.8rem, 5vw, 2.6rem); letter-spacing: -.02em; line-height: 1.1; }

/* Facts row: employment type, pay, location. Chips rather than a table — there are only ever
   three and they need to survive a 360px phone. */
.tc-facts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.3rem; padding: 0; list-style: none; }
.tc-fact {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--t-cyan-wash); border: 1px solid var(--t-cyan-line);
  border-radius: 999px; padding: .35rem .85rem;
  font-size: .9rem; font-weight: 600; color: var(--t-cyan-deep);
}
.tc-fact--pay { background: #fff; border-color: var(--t-cyan); color: var(--t-cyan-deep); }

.tc-desc { font-size: 1.02rem; line-height: 1.65; color: var(--t-body); max-width: 68ch; }
.tc-desc > *:first-child { margin-top: 0; }
.tc-desc h2, .tc-desc h3 { color: var(--t-ink); font-size: 1.1rem; margin: 1.6rem 0 .5rem; }
.tc-desc ul, .tc-desc ol { padding-left: 1.3rem; }
.tc-desc li { margin: .25rem 0; }

.tc-closes { margin: 1.2rem 0 0; font-size: .9rem; color: var(--t-muted); }

/* No open role: the page still accepts general interest rather than dead-ending. */
.tc-open-call { background: var(--t-soft); border: 1px solid var(--t-line); border-radius: 14px; padding: 1.3rem 1.5rem; margin: 0 0 2rem; }
.tc-open-call p { margin: 0; color: var(--t-body); }

/* ------------------------------------------------- "how hiring works" band */
/* Mirrors .cof-hiw on the order form and .thread-hiw on the homepage: same wash, same eyebrow,
   same numbered steps with the short cyan rule. Four steps here. */
.tc-hiw {
  background: var(--t-cyan-wash); border: 1px solid var(--t-cyan-line);
  border-radius: 14px; padding: 1.5rem 1.6rem 1.7rem; margin: 0 0 2rem;
}
.tc-hiw-eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--t-cyan-deep); margin: 0 0 1.2rem;
}
.tc-hiw-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1.3rem; }
@media (min-width: 640px) { .tc-hiw-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .tc-hiw-grid { grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } }
.tc-hiw-n { display: inline-block; font-size: .85rem; font-weight: 700; color: var(--t-cyan-deep); letter-spacing: .05em; }
.tc-hiw-n::after { content: ""; display: block; width: 28px; height: 2px; background: var(--t-cyan); margin-top: 10px; opacity: .7; }
.tc-hiw-st { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; margin: .85rem 0 .3rem; }
.tc-hiw-sp { font-size: .93rem; color: var(--t-body); margin: 0; line-height: 1.5; font-weight: 400; }

/* ---------------------------------------------------------------- the form */
.tc-form-head { margin: 0 0 1.1rem; }
.tc-form-head h2 { margin: 0 0 .3rem; font-size: 1.5rem; letter-spacing: -.015em; }
.tc-form-head p { margin: 0; color: var(--t-body); }

.tc-card { border: 1px solid var(--t-line); border-radius: 14px; padding: 1.1rem 1.25rem 1.25rem; margin: 0 0 1.1rem; }
.tc-card > legend { font-weight: 700; padding: 0 .4rem; }
.tc-step > legend { display: flex; align-items: center; gap: .6rem; font-size: 1.08rem; letter-spacing: -.01em; }
.tc-stepnum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--t-cyan); color: #08252f; font-size: .8rem; font-weight: 800; flex: 0 0 auto;
}
.tc-step-sub { margin: -.2rem 0 .9rem; }

.thread-tc label { display: block; margin-bottom: .9rem; font-weight: 600; }
.thread-tc input[type="text"], .thread-tc input[type="email"], .thread-tc input[type="tel"],
.thread-tc select, .thread-tc textarea {
  display: block; width: 100%; margin-top: .35rem; padding: .55rem .7rem;
  font: inherit; font-weight: 400; border: 1px solid #ccc; border-radius: 8px; box-sizing: border-box;
}
.thread-tc textarea { resize: vertical; }
.thread-tc input:focus-visible, .thread-tc select:focus-visible, .thread-tc textarea:focus-visible,
.thread-tc button:focus-visible, .tc-file-btn:focus-within {
  outline: 2px solid var(--t-cyan-deep); outline-offset: 1px;
}
.thread-tc-inline { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; margin: 0 1.2rem .5rem 0; }
.thread-tc-inline input { width: auto; margin: 0; }
.tc-two-up { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 720px) { .tc-two-up { grid-template-columns: 1fr 1fr; } }
.tc-half { max-width: 22rem; }

/* Availability checkboxes: a wrapping row of pill toggles reads faster on a phone than a
   stacked checkbox list, and this is the question most applicants answer standing up. */
.tc-avail { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .9rem; }
/* min-height is the 44px touch target — measured, not guessed. Most people answer this
   question with a thumb, outside the shop. Don't shrink it.
   box-sizing matters here: these labels would otherwise be content-box, so min-height would
   sit ON TOP of the padding and the pills would come out 62px instead of 44px. */
.tc-avail label {
  box-sizing: border-box;
  margin: 0; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px;
  border: 1px solid #ccc; border-radius: 999px; padding: .5rem .95rem;
  font-weight: 600; font-size: .93rem; cursor: pointer; background: #fff;
  /* Each pill stays on one line and the ROW wraps instead — without this the longer labels
     break in half on a narrow phone and the pills come out lumpy and 62px tall. */
  white-space: nowrap;
}
.tc-avail label:hover { border-color: var(--t-cyan); }
.tc-avail input { width: auto; margin: 0; accent-color: var(--t-cyan-deep); }
.tc-avail label:has(input:checked) { background: var(--t-cyan-wash); border-color: var(--t-cyan); color: var(--t-cyan-deep); }

/* Resume upload. Hidden native input behind a real button, matching .cof-file on the order form. */
.tc-file { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin: .2rem 0 .6rem; font-weight: 400; }
.tc-file input[type="file"] { display: none; }
.tc-file-btn {
  box-sizing: border-box;
  background: #f3f4f6; border: 1px solid #ccc; border-radius: 8px; padding: .6rem 1rem;
  min-height: 44px; display: inline-flex; align-items: center;
  font-weight: 600; font-size: .93rem; white-space: nowrap; cursor: pointer; color: var(--t-ink);
}
.tc-file-btn:hover { background: #e9eaee; }
.tc-file-name { font-size: .88rem; color: var(--t-body); word-break: break-all; }
.tc-file-clear { background: transparent; border: 0; color: #b00020; font-weight: 600; font-size: .88rem; cursor: pointer; padding: 0; }

/* Eligibility: plain checkboxes, stacked, no styling games. */
.tc-eligibility { display: flex; flex-direction: column; gap: .5rem; }
.tc-eligibility label { margin: 0; font-weight: 400; display: flex; align-items: flex-start; gap: .5rem; }
.tc-eligibility input { width: auto; margin: .25rem 0 0; flex: 0 0 auto; }

/* ------------------------------------------------------- submit and status */
.thread-tc button { font: inherit; cursor: pointer; }
.thread-tc button[type="submit"] {
  padding: .85rem 1.8rem; font-size: 1.02rem; font-weight: 700; border: 0; border-radius: 10px;
  background: var(--t-cyan); color: #08252f;
}
.thread-tc button[type="submit"]:hover { background: #0f97c4; }
.thread-tc button[type="submit"]:disabled { opacity: .6; cursor: default; }
.tc-submit-note { margin: .9rem 0 .5rem; font-size: .82rem; opacity: .82; line-height: 1.5; max-width: 60ch; }

.thread-tc-status { margin-top: 1rem; font-weight: 600; font-size: 1.05rem; }
.thread-tc-ok { color: #137333; }
.thread-tc-err { color: #b00020; }

/* The thank-you that replaces the form on success. */
.tc-thanks { background: var(--t-cyan-wash); border: 1px solid var(--t-cyan-line); border-radius: 14px; padding: 1.5rem 1.6rem; margin-top: 1rem; }
.tc-thanks h2 { margin: 0 0 .5rem; font-size: 1.3rem; }
.tc-thanks p { margin: 0; color: var(--t-body); }

@media (prefers-reduced-motion: reduce) {
  .thread-tc * { transition: none !important; animation: none !important; }
}