/* Hiring system. The flow is a horizontal process map on wide screens and a
   numbered vertical path on narrow ones; configuration stays below the map. */

.hs-head { align-items: flex-end; }
.hs-guardrails {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3);
  margin: 0 0 var(--s-7);
}
.hs-rule {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3);
  padding: var(--s-5); border: var(--bw) solid var(--c-border); border-radius: var(--r-lg);
  background: var(--c-surface); min-width: 0;
}
.hs-rule-n {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-full);
  background: var(--c-accent-quiet); color: var(--c-accent); font: var(--t-semibold) var(--t-xs)/1 var(--font-mono);
}
.hs-rule strong { display: block; margin: var(--s-1) 0 var(--s-2); font-size: var(--t-sm); }
.hs-rule p { margin: 0; color: var(--c-text-2); font-size: var(--t-2xs); line-height: var(--t-snug); }

.hs-flow-section { overflow: hidden; }
.hs-flow {
  display: flex; align-items: stretch; overflow-x: auto; padding: var(--s-2) 0 var(--s-4);
  scrollbar-width: thin;
}
.hs-step-link { flex: 0 0 220px; color: inherit; text-decoration: none; min-width: 0; }
.hs-step-link:hover { text-decoration: none; }
.hs-step {
  height: 100%; min-height: 168px; display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5); border: var(--bw) solid var(--c-border); border-radius: var(--r-lg);
  background: var(--c-surface); transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.hs-step-link:hover .hs-step { border-color: var(--c-accent); transform: translateY(-2px); }
.hs-step[data-ready="0"] { border-color: color-mix(in srgb, var(--c-warn) 45%, var(--c-border)); }
.hs-step-top { display: flex; align-items: center; gap: var(--s-3); }
.hs-step-n { color: var(--c-text-3); font: var(--t-semibold) var(--t-2xs)/1 var(--font-mono); letter-spacing: .08em; }
.hs-step-top .chip { margin-left: auto; }
.hs-step h3 { margin: var(--s-2) 0 0; font-size: var(--t-sm); }
.hs-step-owner { margin: 0; color: var(--c-text-2); font-size: var(--t-2xs); font-weight: var(--t-semibold); }
.hs-step-detail { margin: auto 0 0; color: var(--c-text-2); font-size: var(--t-2xs); line-height: var(--t-snug); }
.hs-flow-arrow { flex: 0 0 32px; display: grid; place-items: center; color: var(--c-text-3); font-size: var(--t-lg); }

.hs-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, .75fr); gap: var(--s-7); align-items: start; }
.hs-main, .hs-side { min-width: 0; display: grid; gap: var(--s-6); }
.hs-side { position: sticky; top: var(--s-5); }
.hs-side-card { margin: 0; }

.hs-slot-list { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.hs-slot {
  display: grid; grid-template-columns: minmax(160px, .8fr) minmax(200px, 1.2fr) auto auto;
  gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5);
  border: var(--bw) solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg);
}
.hs-slot[data-state="cancelled"] { opacity: .62; background: var(--c-surface-2); }
.hs-slot-time, .hs-slot-who { min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.hs-slot-time strong, .hs-slot-who strong { overflow-wrap: anywhere; font-size: var(--t-xs); }

.hs-form-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--s-4); }
.hs-form-card {
  display: flex; flex-direction: column; gap: var(--s-3); min-width: 0;
  padding: var(--s-5); border: var(--bw) solid var(--c-border); border-radius: var(--r-lg); background: var(--c-bg);
}
.hs-form-card-top { display: flex; align-items: flex-start; gap: var(--s-3); }
.hs-form-card-top > div { min-width: 0; flex: 1; }
.hs-form-card h3 { margin: 0; font-size: var(--t-sm); overflow-wrap: anywhere; }
.hs-form-card code { color: var(--c-text-3); font-size: var(--t-2xs); }
.hs-form-card p { margin: 0; font-size: var(--t-xs); color: var(--c-text-2); }
.hs-question-preview { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hs-question-preview span { padding: var(--s-1) var(--s-3); border-radius: var(--r-full); background: var(--c-surface-3); font-size: var(--t-2xs); }
.hs-form-card > button { align-self: flex-start; margin-top: auto; }

.hs-builder-head { display: flex; gap: var(--s-4); align-items: center; margin: var(--s-6) 0 var(--s-3); }
.hs-builder-head > div { flex: 1; min-width: 0; }
.hs-builder-head h3, .hs-builder-head p { margin: 0; }
.hs-builder-list { display: grid; gap: var(--s-3); max-height: min(46vh, 520px); overflow-y: auto; padding-right: var(--s-2); }
.hs-builder-row {
  display: grid; grid-template-columns: auto minmax(180px, 1.3fr) minmax(150px, .8fr) auto auto;
  gap: var(--s-3); align-items: end; padding: var(--s-4); border: var(--bw) solid var(--c-border);
  border-radius: var(--r-md); background: var(--c-surface-2);
}
.hs-builder-row .field { margin: 0; }
.hs-drag { align-self: center; color: var(--c-text-3); font: var(--t-medium) var(--t-2xs)/1 var(--font-mono); }
.hs-required { align-self: center; white-space: nowrap; }
.hs-options { grid-column: 2 / -1; }
.hs-builder-actions { display: flex; align-items: center; gap: var(--s-1); }
.hs-builder-actions .icon { width: 30px; height: 30px; }
.hs-builder-actions svg { width: 14px; height: 14px; }

.hs-automation { display: grid; gap: var(--s-2); }
.hs-automation-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-4); align-items: center;
  padding: var(--s-4); border-radius: var(--r-md); color: inherit; text-decoration: none;
}
.hs-automation-row:hover { background: var(--c-hover); text-decoration: none; }
.hs-auto-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--c-accent-quiet); color: var(--c-accent); }
.hs-auto-icon svg, .hs-automation-row > svg { width: 15px; height: 15px; }
.hs-automation-row span:nth-child(2) { display: flex; flex-direction: column; gap: var(--s-1); }
.hs-automation-row strong { font-size: var(--t-xs); }
.hs-automation-row small { color: var(--c-text-2); line-height: var(--t-snug); }

.hs-template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--s-3); }
.hs-template-card {
  min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4);
  border: var(--bw) solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg);
}
.hs-template-card-top { display: flex; align-items: flex-start; gap: var(--s-3); }
.hs-template-card-top > div { flex: 1; min-width: 0; }
.hs-template-card h3, .hs-template-card p { margin: 0; }
.hs-template-card h3 { font-size: var(--t-xs); }
.hs-template-card > button { align-self: flex-start; margin-top: auto; }

.hs-owners { display: grid; gap: var(--s-3); margin: 0; }
.hs-owners dt { margin: 0; color: var(--c-text); font-size: var(--t-xs); font-weight: var(--t-semibold); }
.hs-owners dd { margin: calc(-1 * var(--s-2)) 0 0; padding-bottom: var(--s-3); border-bottom: var(--bw) solid var(--c-border); color: var(--c-text-2); font-size: var(--t-2xs); line-height: var(--t-snug); }
.hs-owners dd:last-child { border: 0; padding-bottom: 0; }
.hs-readiness { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.hs-readiness li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); }
.hs-readiness a { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-width: 0; min-height: 32px; font-size: var(--t-xs); }
.hs-side-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-2); margin-top: var(--s-5); }
.hs-side-actions .rc-linkbtn { justify-content: center; }

@media (max-width: 1080px) {
  .hs-guardrails { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-grid { grid-template-columns: 1fr; }
  .hs-side { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
}

@media (max-width: 720px) {
  .hs-guardrails, .hs-side { grid-template-columns: 1fr; }
  .hs-flow { flex-direction: column; overflow: visible; padding-bottom: 0; }
  .hs-step-link { flex-basis: auto; }
  .hs-step { min-height: 0; }
  .hs-flow-arrow { min-height: 28px; transform: rotate(90deg); }
  .hs-slot { grid-template-columns: 1fr auto; }
  .hs-slot-who { grid-column: 1 / -1; grid-row: 2; }
  .hs-slot button { grid-column: 1 / -1; width: 100%; }
  .hs-builder-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; }
  .hs-builder-row > .field:nth-of-type(1), .hs-builder-row > .field:nth-of-type(2) { grid-column: 2 / -1; }
  .hs-required { grid-column: 2; }
  .hs-options { grid-column: 2 / -1; }
}