/* ============================================================
   HIRE PAGE  ·  reactive intake bot + project form
   Builds on base/layout/components/animations tokens.
   ============================================================ */

.hire-wrap {
  position: relative; z-index: 3;
  max-width: 1180px; margin-inline: auto;
  padding: clamp(90px, 12vh, 140px) var(--gutter) var(--s-9);
}

.hire-back {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--f-mono); font-size: var(--t-xs);
  color: var(--txt-3); margin-bottom: var(--s-6);
  transition: color var(--d-fast), gap var(--d-fast) var(--e-out);
}
.hire-back:hover { color: var(--acc); gap: var(--s-3); }

.hire-grid {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: var(--s-6); align-items: start;
}

/* ---------- BOT PANEL ---------- */
.bot-panel {
  position: sticky; top: 96px;
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background:
    radial-gradient(130% 80% at 50% 0%, var(--acc-glow), transparent 60%),
    var(--ink-850);
  padding: var(--s-6);
  overflow: hidden;
}
.bot-panel__bar {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--txt-3);
  padding-bottom: var(--s-4); margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--line-soft);
}
.bot-panel__bar .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); }

.bot-stage { display: grid; place-items: center; padding: var(--s-4) 0 var(--s-5); }
.bot {
  width: min(230px, 60vw); height: auto;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.5));
}
.bot .bot-eye { transition: transform .12s var(--e-out), height .25s var(--e-out); transform-box: fill-box; transform-origin: center; }
.bot .bot-mouth { transition: d .3s var(--e-out); }
.bot .bot-antenna-light { transition: fill .5s, filter .5s; }
.bot.is-blink .bot-eye { transform: scaleY(.1); }

.bot-mood {
  margin-top: var(--s-3);
}
.bot-mood__label {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--txt-3); margin-bottom: 6px;
}
.bot-mood__label b { color: var(--acc); font-weight: 500; }
.bot-mood__bar { height: 6px; border-radius: 99px; background: var(--ink-600); overflow: hidden; }
.bot-mood__fill {
  height: 100%; width: 12%; border-radius: 99px;
  background: linear-gradient(90deg, var(--azure), var(--acc) 55%, var(--amber));
  transition: width .5s var(--e-out);
}

.bot-speech {
  position: relative; margin-top: var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--ink-900); padding: var(--s-4) var(--s-4) var(--s-4);
  min-height: 92px;
  font-family: var(--f-mono); font-size: var(--t-sm); line-height: 1.65; color: var(--txt-1);
}
.bot-speech::before {
  content: ""; position: absolute; top: -7px; left: 32px;
  width: 12px; height: 12px; background: var(--ink-900);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.bot-speech .caret { display: inline-block; width: 8px; height: 1.05em; background: var(--acc); vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(2) infinite; }
.bot-facts { margin-top: var(--s-4); display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-md); overflow: hidden; }
.bot-facts div { background: var(--ink-900); padding: 8px var(--s-4); display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: var(--t-xs); }
.bot-facts .k { color: var(--txt-3); }
.bot-facts .v { color: var(--txt-1); }
.bot-facts .v.ok { color: var(--acc); }

/* ---------- FORM PANEL ---------- */
.form-panel {
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--ink-850); overflow: hidden;
}
.form-head {
  padding: var(--s-6) var(--s-6) var(--s-5);
  border-bottom: 1px solid var(--line);
  background: var(--ink-800);
}
.form-head h1 {
  font-family: var(--f-display); font-size: var(--t-2xl); font-weight: 600;
  letter-spacing: -.04em; margin-bottom: 6px;
}
.form-head p { color: var(--txt-2); font-size: var(--t-sm); max-width: 52ch; }
.form-progress { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.form-progress__bar { flex: 1; height: 4px; border-radius: 99px; background: var(--ink-600); overflow: hidden; }
.form-progress__fill { height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--acc), var(--azure)); transition: width .4s var(--e-out); }
.form-progress__pct { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--txt-3); }

.form-body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-5); }
.fg { display: flex; flex-direction: column; gap: 8px; }
.fg > label {
  font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--txt-3);
  display: flex; align-items: center; gap: var(--s-2);
}
.fg > label .req { color: var(--acc); }
.fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }

.hire-input, .hire-area, .hire-select {
  width: 100%; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--ink-900); color: var(--txt-1);
  font-family: var(--f-body); font-size: var(--t-md);
  transition: border-color var(--d-fast), box-shadow var(--d-fast);
}
.hire-input:focus, .hire-area:focus, .hire-select:focus {
  border-color: var(--acc-dim); box-shadow: 0 0 0 3px var(--acc-glow); outline: none;
}
.hire-area { resize: vertical; min-height: 130px; line-height: 1.6; font-family: var(--f-body); }
.hire-select { appearance: none; cursor: pointer; padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--txt-3) 50%), linear-gradient(135deg, var(--txt-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.hire-count { font-family: var(--f-mono); font-size: 11px; color: var(--txt-4); text-align: right; }

.chip-select { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opt {
  padding: 9px 15px; border: 1px solid var(--line); border-radius: 99px;
  font-family: var(--f-mono); font-size: var(--t-xs); color: var(--txt-2);
  background: var(--ink-900); cursor: pointer;
  transition: all var(--d-fast) var(--e-out); user-select: none;
}
.chip-opt:hover { border-color: var(--line-strong); color: var(--txt-1); transform: translateY(-1px); }
.chip-opt.is-on { background: var(--acc); color: var(--ink-900); border-color: var(--acc); font-weight: 600; }
[data-theme="light"] .chip-opt.is-on { color: #fff; }

.form-foot {
  padding: var(--s-5) var(--s-6);
  border-top: 1px solid var(--line); background: var(--ink-800);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
}
.form-foot .note { font-family: var(--f-mono); font-size: 11px; color: var(--txt-4); max-width: 40ch; }
.hire-submit { padding: 14px 26px; font-size: var(--t-sm); }
.hire-submit svg { width: 16px; height: 16px; }

.form-error {
  font-family: var(--f-mono); font-size: var(--t-xs); color: var(--danger);
  padding: 0 var(--s-6) var(--s-4);
}

/* success overlay */
.hire-done {
  display: none; text-align: center; padding: var(--s-9) var(--s-6);
}
.hire-done.is-on { display: block; animation: paneIn .5s var(--e-out); }
.hire-done__ico {
  width: 76px; height: 76px; margin: 0 auto var(--s-5);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--acc-glow); border: 1px solid var(--acc-dim); color: var(--acc);
}
.hire-done__ico svg { width: 38px; height: 38px; }
.hire-done h2 { font-family: var(--f-display); font-size: var(--t-2xl); font-weight: 600; letter-spacing: -.03em; margin-bottom: var(--s-3); }
.hire-done p { color: var(--txt-2); max-width: 46ch; margin: 0 auto var(--s-5); }

canvas.confetti { position: fixed; inset: 0; z-index: 980; pointer-events: none; }

@media (max-width: 940px) {
  .hire-grid { grid-template-columns: 1fr; }
  .bot-panel { position: static; }
  .bot-stage { padding-top: 0; }
  .bot { width: 170px; }
}
@media (max-width: 560px) {
  .fg-row { grid-template-columns: 1fr; }
  .form-foot { flex-direction: column; align-items: stretch; }
  .hire-submit { justify-content: center; }
}