/* Careers additions. Loaded after app.css; uses only its tokens so the
   talent bank and the vendor portal stay visually identical. */

.careers-hero{background:#000;color:#fff;padding:56px 0 48px}
.careers-hero h1{font-family:var(--head);font-size:clamp(28px,5vw,46px);line-height:1.05;
  margin:0 0 14px;text-transform:uppercase;letter-spacing:.01em}
.careers-hero h1 span{color:var(--accent)}
.careers-hero p{max-width:62ch;margin:0 0 22px;font-size:17px;line-height:1.65;color:#fff}
.careers-hero .btn{background:var(--accent);border-color:var(--accent);color:#fff}
.careers-hero .btn:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.careers-hero .btn-ghost{background:transparent;border-color:#fff;color:#fff}
.careers-hero .btn-ghost:hover{background:#fff;color:#000}
.hero-note{margin:18px 0 0;font-size:14px;color:#fff}

.sec{padding:44px 0;border-bottom:1px solid var(--line)}
.sec:last-of-type{border-bottom:0}
.sec h2{font-family:var(--head);font-size:24px;text-transform:uppercase;margin:0 0 6px;letter-spacing:.01em}
.sec .lede{max-width:70ch;margin:0 0 22px;color:var(--muted);font-size:16px;line-height:1.6}
.sec-soft{background:var(--soft)}

.cols{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
/* One full-width card per row - for the Q&A, where a 3-up grid leaves an orphan. */
.cols-1{grid-template-columns:1fr}
.col-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.col-card h3{font-family:var(--head);font-size:16px;text-transform:uppercase;margin:0 0 8px}
.col-card p{margin:0;color:var(--muted);line-height:1.6;font-size:15px}

.role-groups{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.role-group h3{font-family:var(--head);font-size:14px;text-transform:uppercase;letter-spacing:.06em;
  margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid var(--accent)}
.role-group ul{list-style:none;margin:0;padding:0}
.role-group li{padding:6px 0;font-size:15px;line-height:1.45}
.role-group li b{display:block;font-weight:600}
.role-group li span{color:var(--muted);font-size:13.5px}

.steps{counter-reset:step;list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.steps li{counter-increment:step;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 16px 16px 54px;position:relative}
.steps li::before{content:counter(step);position:absolute;left:16px;top:16px;width:26px;height:26px;
  border-radius:50%;background:var(--accent);color:#fff;font-family:var(--head);font-size:14px;
  display:flex;align-items:center;justify-content:center}
/* Direct child only - a nested <b> (the 180 in "Active for 180 days") must
   stay inline, not break onto its own line. */
.steps li > b{display:block;margin-bottom:4px}
.steps li span{color:var(--muted);font-size:14px;line-height:1.55}

/* --------------------------------------------------------- form pieces */

.form-wrap{max-width:840px;margin:0 auto}
.step-bar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px;padding:0;list-style:none}
.step-bar li{flex:1 1 120px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);border-top:3px solid var(--line);padding-top:8px}
.step-bar li.on{color:var(--ink);border-top-color:var(--accent);font-weight:700}
.step-bar li.done{color:var(--ink);border-top-color:var(--ink)}

.checks{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin:0}
.check{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card);cursor:pointer;line-height:1.4;font-size:14.5px}
.check:hover{border-color:var(--ink)}
.check input{margin:2px 0 0;width:16px;height:16px;flex:0 0 auto;accent-color:var(--accent)}
.check.on{border-color:var(--accent);background:var(--accent-soft)}
.check b{display:block;font-weight:600}
/* One-line variant - the bold lead-in runs on with the sentence after it,
   instead of stacking title over sub-text like the tile checkboxes do. */
.check-inline b{display:inline}
.check span{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
/* A count sitting mid-sentence, e.g. the 180 in "Active for 180 days". The rule
   above would otherwise break it onto a line of its own. */
.check .expiry-days{display:inline;color:inherit;font-size:inherit;margin:0}
.check:focus-within{outline:2px solid var(--ink);outline-offset:2px}

/* Sections. The applicant opens the track they are actually after before any
   area is visible, which is what keeps an HQ candidate out of the barista pile. */
.sec-pick{border:1px solid var(--line);border-radius:var(--r);background:var(--card);margin:0 0 10px}
.sec-pick.on{border-color:var(--accent)}
.sec-head{display:block;width:100%;text-align:left;padding:13px 42px 13px 14px;background:none;
  border:0;cursor:pointer;font:inherit;color:inherit;position:relative}
.sec-head b{display:block;font-family:var(--head);text-transform:uppercase;font-size:14.5px;
  letter-spacing:.01em;margin-bottom:3px}
.sec-head span{display:block;color:var(--muted);font-size:12.5px;line-height:1.45}
.sec-head::after{content:'+';position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:20px;line-height:1;color:var(--muted)}
.sec-pick.on .sec-head::after{content:'\2212'}
.sec-head:hover{background:var(--accent-soft)}
.sec-head:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.sec-body{padding:0 12px 12px}
.sec-loose{margin:14px 0 0}
/* Section headings in the landing-page list of areas. */
.grp{font-family:var(--head);text-transform:uppercase;font-size:15px;letter-spacing:.01em;
  margin:26px 0 2px}
.role-groups .grp:first-child{margin-top:0}
.grp-note{color:var(--muted);font-size:13.5px;margin:0 0 12px;max-width:70ch}
/* Long option labels in a multi-choice follow-up need room to breathe. */
.fu .checks{grid-template-columns:repeat(auto-fill,minmax(255px,1fr))}

.yn{display:flex;gap:8px;flex-wrap:wrap}
.yn label{display:inline-flex;gap:7px;align-items:center;padding:8px 14px;border:1px solid var(--line);
  border-radius:var(--r);cursor:pointer;font-size:14.5px;background:var(--card)}
.yn label.on{border-color:var(--accent);background:var(--accent-soft);font-weight:600}
.yn input{accent-color:var(--accent)}
.yn:focus-within label:has(input:focus){outline:2px solid var(--ink);outline-offset:2px}

/* availability grid */
.avail{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.avail-grid{border-collapse:collapse;width:100%;min-width:470px}
table.avail-grid th,table.avail-grid td{border:1px solid var(--line);padding:0;text-align:center}
table.avail-grid thead th{background:var(--soft);font-size:12px;text-transform:uppercase;
  letter-spacing:.04em;padding:8px 6px;font-weight:700}
table.avail-grid thead th small{display:block;font-weight:400;text-transform:none;letter-spacing:0;
  color:var(--muted);font-size:11px}
table.avail-grid tbody th{background:var(--soft);font-size:13px;padding:8px 10px;text-align:left;width:64px}
.slot{display:block;width:100%;min-height:40px;border:0;background:transparent;cursor:pointer;
  font-size:13px;color:var(--muted)}
.slot:hover{background:var(--soft)}
.slot[aria-pressed="true"]{background:var(--accent);color:#fff;font-weight:700}
.slot:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.avail-tools{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0}

/* resume dropzone */
.dz{border:2px dashed var(--line);border-radius:var(--r);padding:26px 18px;text-align:center;
  background:var(--soft);cursor:pointer}
.dz:hover,.dz.over{border-color:var(--accent);background:var(--accent-soft)}
.dz b{display:block;font-size:15px;margin-bottom:4px}
.dz span{color:var(--muted);font-size:13.5px}
.dz-file{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--card)}
.dz-file .nm{font-weight:600;word-break:break-all}
.dz-file .sz{color:var(--muted);font-size:13px}

.err{color:var(--bad);font-size:13.5px;margin:5px 0 0;font-weight:600}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--bad)}
.counter{float:right;font-size:12px;color:var(--muted);font-weight:400}

.ok-page{max-width:620px;margin:0 auto;text-align:center;padding:56px 0}
.ok-page .big{font-family:var(--head);font-size:32px;text-transform:uppercase;margin:0 0 10px}
.ok-mark{width:64px;height:64px;border-radius:50%;background:var(--ok-soft);color:var(--ok);
  display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 20px;font-weight:700}
.ref{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:18px;
  background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:8px 16px;margin:6px 0 0}

/* ---------------------------------------------------- candidate portal */

.me-head{background:#000;color:#fff;padding:26px 0}
.me-head h1{font-family:var(--head);font-size:26px;text-transform:uppercase;margin:0 0 4px}
.me-head p{margin:0;color:rgba(255,255,255,.8);font-size:14.5px}
.me-meta{display:flex;gap:20px;flex-wrap:wrap;margin:16px 0 0}
.me-meta div{font-size:13px;color:rgba(255,255,255,.7)}
.me-meta div b{display:block;color:#fff;font-size:15px;font-weight:700;margin-top:2px}
.expiry-bar{height:8px;border-radius:4px;background:rgba(255,255,255,.22);overflow:hidden;margin:6px 0 0;
  width:220px;max-width:100%}
.expiry-bar i{display:block;height:100%;background:var(--accent)}

/* ----------------------------------------------------------- HR portal */

.facets{display:grid;gap:14px}
.facet{border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.facet>button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:none;border:0;padding:11px 13px;font:inherit;font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:.04em;cursor:pointer;text-align:left}
.facet>button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.facet .body{padding:0 13px 13px;display:grid;gap:6px;max-height:260px;overflow-y:auto}
.facet .body label{display:flex;gap:8px;align-items:center;font-size:14px;cursor:pointer;padding:2px 0}
.facet .body label input{accent-color:var(--accent)}
.facet .body .n{margin-left:auto;color:var(--muted);font-size:12px}

.cand-row{display:grid;gap:4px}
.cand-row .nm{font-weight:700}
.cand-row .sub{color:var(--muted);font-size:13px}
.pills{display:flex;gap:4px;flex-wrap:wrap;margin:3px 0 0}
.pill{font-size:11.5px;padding:2px 7px;border-radius:99px;background:var(--soft);border:1px solid var(--line);
  color:var(--ink)}
.pill.acc{background:var(--accent-soft);border-color:var(--accent)}

.stars{display:inline-flex;gap:2px}
.stars button{background:none;border:0;cursor:pointer;font-size:16px;line-height:1;color:var(--line);padding:1px}
.stars button.on{color:var(--accent)}
.stars button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

.scan{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700}
.scan.clean{color:var(--ok)} .scan.infected{color:var(--bad)}
.scan.pending,.scan.error{color:var(--warn)}

.split{display:grid;gap:20px;grid-template-columns:minmax(0,1fr) 300px;align-items:start}
@media(max-width:1000px){.split{grid-template-columns:1fr}}
.sticky{position:sticky;top:14px}

.bulk{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 12px;background:var(--dark);
  color:#fff;border-radius:var(--r);margin:0 0 12px}
.bulk b{font-size:14px}
.bulk select{padding:5px 8px;font-size:13px;border-radius:4px;border:1px solid var(--line)}

.answer{background:var(--soft);border-left:3px solid var(--accent);border-radius:0 var(--r) var(--r) 0;
  padding:12px 14px;margin:0 0 14px;white-space:pre-wrap;line-height:1.6;font-size:14.5px}
.answer h4{font-family:var(--head);font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  margin:0 0 6px;color:var(--muted)}

@media(max-width:640px){
  .careers-hero{padding:40px 0 34px}
  .sec{padding:32px 0}
  .checks{grid-template-columns:1fr}
}
@media print{.site-head,.site-foot,.side,.mobile-top,.btn,.facets{display:none!important}}

.timeline li > .muted{display:block;margin-top:2px}

/* ------------------------------------------------ day picker + job rows */

.daypick{display:flex;gap:6px;flex-wrap:wrap}
.daypick label{flex:1 1 78px;min-width:78px;text-align:center;border:1px solid var(--line);
  border-radius:var(--r);padding:10px 4px;cursor:pointer;background:var(--card);font-size:14px;
  user-select:none}
.daypick label:hover{border-color:var(--ink)}
.daypick label.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
/* Visually hidden but still focusable and announced - zero-sizing an input
   makes some screen readers skip it. */
.daypick input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.daypick label:focus-within{outline:2px solid var(--ink);outline-offset:2px}

.jobrow{border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:0 0 10px;
  background:var(--card)}
.jobrow .n{font-family:var(--head);font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin:0 0 10px;display:block}
.jobrow .field{margin-bottom:10px}
.jobrow .field:last-child{margin-bottom:0}

.fu{border-left:3px solid var(--accent);background:var(--soft);border-radius:0 var(--r) var(--r) 0;
  padding:12px 14px;margin:0 0 10px}
.fu > label{display:block;font-weight:600;margin:0 0 8px;font-size:14.5px}
.fu .hint{margin:0 0 8px}
.fu .yn{margin:0}

.glance{display:grid;gap:2px;font-size:13px}
.glance b{font-weight:700}
.glance .j{color:var(--muted)}

/* app.css already defines these; repeating them means careers.css is not
   silently dependent on load order or on app.css being present. */
.hidden{display:none !important}
[hidden]{display:none !important}

/* Embedded in the Blind Tiger website. app.css already hides .site-head and
   .site-foot; these drop the page chrome that is specific to the careers form,
   so the Shopify page supplies the heading and the frame holds only the form. */
body.embedded #main{padding:0 0 8px !important}
body.embedded .form-wrap > h1{display:none}
body.embedded .wrap{max-width:100%}