/* ============================================================================
   HR FLOW - the funnel the team configures for itself.

   ONE RULE SHAPES EVERYTHING BELOW: a step is a line in a sequence, not a card
   in a grid. Cards imply the items are independent and interchangeable, and
   these are neither; they are the order a hiring process happens in. So the
   steps are a list with a rule down the left, read top to bottom, and the
   chrome stays quiet enough that the eye follows the labels rather than the
   boxes.

   THE PROBLEM LINES ARE THE EXCEPTION TO THAT QUIET. A step that will mail
   somebody a message full of blanks has to be visible without being hunted
   for, because nothing else in the product will ever mention it.
   ========================================================================= */

/* ---------------------------------------------------------------- the tabs */

.hf-tabs {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-top: var(--s-5);
  border-bottom: var(--bw) solid var(--c-border);
}
.hf-tab {
  background: transparent; border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: var(--s-3) var(--s-4);
  min-height: 44px;
  font-weight: var(--t-semibold);
  color: var(--c-text-2);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.hf-tab:hover { color: var(--c-text); background: var(--c-hover); }
.hf-tab[data-on="yes"] { color: var(--c-text); border-bottom-color: var(--c-accent); }

.hf-count {
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  padding: 0 var(--s-2);
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  color: var(--c-text-2);
}

.hf-body { margin-top: var(--s-5); display: grid; gap: var(--s-5); }

.hf-blurb { color: var(--c-text-2); max-width: 74ch; }

/* A statement of fact about the setup, not a warning. Quiet border, no colour
   from the danger scale, because it is true even when everything is correct. */
.hf-note {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4);
  border-left: 3px solid var(--c-border-strong);
  background: var(--c-surface-2);
  border-radius: var(--r-sm);
  color: var(--c-text-2);
  font-size: var(--t-sm); line-height: var(--t-body);
  max-width: 82ch;
}
.hf-note code {
  font-family: var(--t-mono);
  background: var(--c-bg);
  padding: 0 var(--s-1);
  border-radius: var(--r-xs);
}

.hf-mini { width: 16px; height: 16px; flex: none; }

.hf-error { border-left: 3px solid var(--c-danger); }

/* ------------------------------------------------------------- the journeys */

.hf-journeys { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hf-journey {
  background: var(--c-surface);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4);
  min-height: 36px;
  font-size: var(--t-sm);
  color: var(--c-text-2);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.hf-journey:hover { background: var(--c-hover); color: var(--c-text); }
.hf-journey[data-on="yes"] {
  background: var(--c-text);
  border-color: var(--c-text);
  color: var(--c-bg);
}
.hf-journey[data-on="yes"] .hf-count { background: transparent; color: var(--c-bg); }

/* ---------------------------------------------------------------- the steps */

.hf-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
  border-left: var(--bw-strong) solid var(--c-border);
  padding-left: var(--s-5);
}
.hf-step {
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-4) var(--s-3);
  border-bottom: var(--bw) solid var(--c-border);
  position: relative;
}
.hf-step:last-child { border-bottom: 0; }
.hf-step:hover { background: var(--c-hover); }

/* The marker on the rule. A step is a moment in a sequence and the dot is what
   says so; without it the left rule is decoration. */
.hf-step::before {
  content: "";
  position: absolute;
  left: calc(var(--s-5) * -1 - var(--bw-strong));
  top: calc(var(--s-4) + 0.55em);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c-border-strong);
  transform: translateX(-50%);
}
.hf-step[data-off="yes"] { opacity: 0.6; }
.hf-step[data-off="yes"]::before { background: var(--c-border); }

.hf-step-main { flex: 1; min-width: 0; display: grid; gap: var(--s-2); }
.hf-step-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.hf-step-label {
  font-family: var(--t-display);
  font-size: var(--t-base);
  font-weight: var(--t-semibold);
  letter-spacing: var(--t-track-tight);
}

/* --c-text-2 throughout, never the quietest tier. At this size --c-text-3
   measures 4.27:1 against the 4.5:1 floor, and these lines carry what the step
   actually does. The directives board learned this the same way. */
.hf-step-when, .hf-step-says, .hf-step-doc {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-text-2);
  min-width: 0;
}
.hf-step-says span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-plain { font-family: var(--t-mono); font-size: var(--t-xs); }

.hf-problem {
  display: flex; align-items: flex-start; gap: var(--s-2);
  font-size: var(--t-sm); line-height: var(--t-snug);
  color: var(--c-text-2);
  max-width: 76ch;
}

.hf-step-actions { display: flex; gap: var(--s-2); flex: none; }

.hf-add { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ------------------------------------------------------------- the messages */

.hf-messages { display: grid; gap: var(--s-1); }
.hf-message {
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-4);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
}
.hf-message:hover { background: var(--c-hover); }
/* Wording the organisation has not written is the mail system's, which is a
   legitimate state and not a fault. Quieter, not marked. */
.hf-message[data-on="no"] { background: transparent; }

.hf-message-main { flex: 1; min-width: 0; display: grid; gap: var(--s-2); }
.hf-message-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.hf-message-slug {
  font-family: var(--t-mono);
  font-size: var(--t-sm);
  font-weight: var(--t-semibold);
}
.hf-message-subject {
  font-size: var(--t-sm);
  color: var(--c-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hf-message-when { font-size: var(--t-xs); color: var(--c-text-2); }
.hf-message-actions { display: flex; gap: var(--s-2); flex: none; }

.hf-preview { display: grid; gap: var(--s-3); }
.hf-preview-subject { font-weight: var(--t-semibold); }
.hf-preview-body {
  margin: 0;
  padding: var(--s-4);
  background: var(--c-surface-2);
  border-radius: var(--r-sm);
  border: var(--bw) solid var(--c-border);
  font-family: var(--t-mono);
  font-size: var(--t-xs);
  line-height: var(--t-body);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 46vh;
  overflow: auto;
}
.hf-preview-tags { font-size: var(--t-xs); color: var(--c-text-2); }

/* ------------------------------------------------------------ the documents */

.hf-kits { display: grid; gap: var(--s-1); }
.hf-kit {
  display: flex; align-items: flex-start; gap: var(--s-4);
  padding: var(--s-4);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-sm);
}
.hf-kit:hover { background: var(--c-hover); }
.hf-kit[data-on="no"] { opacity: 0.86; }

.hf-kit-main { flex: 1; min-width: 0; display: grid; gap: var(--s-2); }
.hf-kit-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.hf-kit-label { font-weight: var(--t-semibold); }
.hf-kit-file {
  font-size: var(--t-sm); color: var(--c-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hf-kit-tags {
  font-size: var(--t-xs); color: var(--c-text-2);
  word-break: break-word;
}
.hf-kit-actions { flex: none; }

/* ------------------------------------------------------------------ narrow */

@media (max-width: 720px) {
  .hf-step, .hf-message, .hf-kit { flex-direction: column; }
  .hf-step-actions, .hf-message-actions { width: 100%; }
  .hf-step-says span, .hf-message-subject, .hf-kit-file {
    white-space: normal;
    overflow-wrap: break-word;
  }
}