/*
  Facilities Tech job page + application (facilities.html). Loads after site.css.
  Design read: job page and application for LA tradespeople reading on a phone, same dark
  studio-at-night language as work.therecording.club, leaning practical work order.
  Tokens: site.css only (bg-deep #07070C, bg #0A0908, ink #EEEEEE, ink-mid #A5A5A5, gold #D4A843,
  red #F03222; Geologica display, Karla body). Layout: one column, job above, form below.
  Signature: the duties as a work-order punch list with gold tick boxes.
*/

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 80; background: var(--bg); color: var(--ink); padding: 10px 14px; }
.skip:focus { left: 12px; top: 12px; }

/* ---------- hero ---------- */
.fac-hero { min-height: min(82vh, 820px); }
.fac-hero .hero-bg img { object-position: 50% 45%; }
.fac-hero h1 { max-width: 11em; margin: 20px 0 18px; }
.fac-hero h1 .sub {
  display: block; font-weight: 400; color: var(--ink-mid);
  font-size: 0.42em; letter-spacing: 0; margin-top: 14px; line-height: 1.2;
}
.facts {
  display: flex; flex-wrap: wrap; gap: 0; margin-top: 4px;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  max-width: 760px;
}
.fact { padding: 14px 26px 14px 0; margin-right: 26px; border-right: 1px solid var(--hairline-soft); }
.fact:last-child { border-right: 0; margin-right: 0; }
.fact .k {
  display: block; font-family: var(--display); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-low);
}
.fact .v {
  display: block; font-family: var(--display); font-weight: 600; font-size: clamp(19px, 1.6vw, 24px);
  margin-top: 4px; font-variant-numeric: tabular-nums;
}
.fact.pay .v { color: var(--gold); }

/* ---------- job body ---------- */
.job { max-width: 980px; }
.job-block { padding-top: clamp(48px, 6vw, 88px); }
.job-block h2 {
  font-family: var(--display); font-weight: 700; font-size: var(--t-title);
  line-height: 1.08; letter-spacing: -0.01em;
}
.job-block .lead { margin-top: 14px; color: var(--ink-mid); font-size: var(--t-sub); max-width: 34em; }

/* the punch list */
.punch { list-style: none; margin-top: 28px; border-top: 1px solid var(--hairline); }
.punch li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 16px 0; border-bottom: 1px solid var(--hairline-soft);
  font-size: var(--t-sub); line-height: 1.45;
}
.punch li::before {
  content: ""; width: 20px; height: 20px; margin-top: 2px;
  border: 1.5px solid var(--gold); border-radius: 3px;
  background:
    linear-gradient(45deg, transparent 46%, var(--gold) 46%, var(--gold) 58%, transparent 58%) 3px 6px / 6px 8px no-repeat,
    linear-gradient(-45deg, transparent 44%, var(--gold) 44%, var(--gold) 56%, transparent 56%) 7px 2px / 9px 13px no-repeat;
}
.punch li b { font-weight: 700; color: var(--ink); }
.punch li span { color: var(--ink-mid); }
.punch.fit li::before { background: none; border-color: var(--ink-low); border-radius: 50%; width: 12px; height: 12px; margin: 8px 0 0 4px; }
.punch .plus { color: var(--gold); font-family: var(--display); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }

/* how hiring works: one track, four stops */
.track { list-style: none; margin-top: 30px; position: relative; padding-left: 34px; }
.track::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 2px; background: var(--hairline); }
.track li { position: relative; padding: 0 0 26px; }
.track li:last-child { padding-bottom: 0; }
.track li::before {
  content: ""; position: absolute; left: -31px; top: 5px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--bg-deep); border: 2px solid var(--ink-low);
}
.track li.here::before { border-color: var(--gold); background: var(--gold); }
.track h3 { font-family: var(--display); font-weight: 600; font-size: 19px; }
.track p { color: var(--ink-mid); font-size: var(--t-body); margin-top: 4px; max-width: 34em; }

.job-cta { margin-top: 36px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.job-cta .note { color: var(--ink-low); font-size: var(--t-small); }

/* ---------- application ---------- */
.fac-apply { border-top: 1px solid var(--hairline); margin-top: clamp(64px, 8vw, 120px); background: var(--bg); }
.fac-apply .apply-wrap { padding-bottom: clamp(56px, 7vw, 96px); }
.fac-apply .apply-head { scroll-margin-top: 72px; }

.fset { border: 0; padding: 0; margin: 0; min-width: 0; padding-top: clamp(40px, 5vw, 64px); }
.fset > legend {
  float: left; width: 100%; padding: 0;
  font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15;
}
.fset > legend + * { clear: both; }
.fset .step-sub { clear: both; padding-top: 10px; color: var(--ink-mid); font-size: var(--t-body); max-width: 42em; }
.fset .step-sub strong { color: var(--ink); font-weight: 700; }
.read-this {
  clear: both; margin-top: 16px; padding: 14px 16px; border-left: 3px solid var(--gold);
  background: rgba(212, 168, 67, 0.07); color: var(--ink); font-size: var(--t-body); max-width: 42em;
}

.field .opt { font-family: var(--body); font-weight: 400; color: var(--ink-low); font-size: 14px; margin-left: 6px; }
.field input[type="number"], .field select {
  width: 100%; background: var(--bg-deep); border: 1px solid var(--hairline);
  border-radius: 3px; color: var(--ink); font-family: var(--body);
  font-size: 16px; padding: 13px 15px; line-height: 1.5; min-height: 50px;
}
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-mid) 50%), linear-gradient(135deg, var(--ink-mid) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 40px;
}
.field input[type="number"] { max-width: 160px; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid rgba(212, 168, 67, 0.45); outline-offset: 0; border-color: var(--gold); }
.fac-apply .field input[type="text"], .fac-apply .field input[type="email"], .fac-apply .field input[type="tel"], .fac-apply .field textarea {
  background: var(--bg-deep); font-size: 16px;
}
.fac-apply .field textarea { min-height: 150px; }
.fac-apply .field textarea.short { min-height: 96px; }
.field.invalid select, .field.invalid input[type="number"] { border-color: var(--red); }
.field .err { color: #FF6B5E; }
.field .count { font-size: 13px; }
.field .count.ok { color: var(--gold); }

/* chips: days, skills, yes/no, status, license */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opt { position: relative; }
.chip-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip-opt span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--hairline); border-radius: 999px; color: var(--ink-mid);
  font-family: var(--display); font-weight: 500; font-size: 14px; letter-spacing: 0.03em;
  transition: border-color 0.18s, color 0.18s, background-color 0.18s; user-select: none;
}
.chip-opt:hover span { border-color: var(--ink-low); color: var(--ink); }
.chip-opt input:checked + span { border-color: var(--gold); color: var(--gold); background: rgba(212, 168, 67, 0.09); }
.chip-opt input:checked + span::before { content: "\2713"; margin-right: 8px; font-size: 13px; }
.chip-opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.chips.days .chip-opt span { min-width: 58px; justify-content: center; padding: 10px 12px; }
.chips.stack { flex-direction: column; align-items: stretch; }
.chips.stack .chip-opt span { border-radius: 4px; width: 100%; }
.field.invalid .chip-opt span { border-color: rgba(240, 50, 34, 0.55); }

.q-field label { line-height: 1.35; }
.q-field .count.need { color: var(--ink-low); }

.submit-row { margin-top: 40px; }
.submit-row .btn { width: 100%; min-height: 56px; font-size: 15px; }
.submit-row .btn[disabled] { opacity: 0.6; cursor: progress; }
.submit-note { font-size: var(--t-small); color: var(--ink-low); margin-top: 14px; }
.submit-err { margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--red); background: rgba(240, 50, 34, 0.08); color: #FFC0B6; font-size: var(--t-small); }

/* success */
.fac-done { padding: clamp(56px, 8vw, 110px) 0 clamp(40px, 6vw, 80px); }
.fac-done:focus { outline: none; }
.fac-done h2 { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; margin-top: 18px; }
.fac-done .ref { margin-top: 12px; color: var(--ink-low); font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.fac-done .track { margin-top: 30px; }
.fac-done .after { margin-top: 30px; color: var(--ink-mid); font-size: var(--t-body); }
.fac-done .after a { color: var(--gold); border-bottom: 1px solid rgba(212, 168, 67, 0.4); }

.nav .btn { min-height: 44px; }

@media (max-width: 640px) {
  .fac-hero { min-height: 0; }
  .fac-hero .hero-content { padding-top: 160px; }
  .fac-hero h1 { font-size: clamp(40px, 11vw, 56px); }
  .fact { padding: 12px 18px 12px 0; margin-right: 18px; }
  .fact:nth-child(3) { border-right: 0; }
  .hero-ctas .btn { width: 100%; min-height: 52px; }
  .punch li { gap: 12px; grid-template-columns: 22px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .chip-opt span { transition: none; }
}
.field .glabel { font-family: var(--display); font-weight: 600; font-size: 16px; margin-bottom: 8px; }
.fac-hero .hero-bg img { object-position: 40% 50%; }
.fset > legend { padding-bottom: 6px; }
.fset > .field:first-of-type { margin-top: 18px; }
.nav .brand { min-height: 44px; }
.footer-line a { display: inline-block; padding: 6px 0; }
@media (max-width: 640px) {
  .facts { display: grid; grid-template-columns: 1fr 1fr; }
  .fact, .fact:nth-child(3) { border-right: 0; margin-right: 0; padding-right: 12px; }
  .fact:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid var(--hairline-soft); }
}