/* detail page — Direction 3: white paper page, hairlines, softly tinted panels,
   no colour bands, no shadows, 2px corners. Loaded after styles.css and app-d3.css.
   Every button, link, handler and state stays exactly as it was. */

/* ---- Header: back link, company, role, chips — straight on the white page ---- */
.hj-detail-page .hj-back{margin-bottom:14px;font-weight:600}
.hj-detail__company{font-size:17px;font-weight:700;color:var(--hj-hi)}
.hj-detail__title{margin-top:4px;font-size:40px;line-height:1.1}
.hj-detail__head .hj-chiprow{margin-top:14px}
/* Chips and the stage pill are flat tags, not pills. */
.hj-detail-page .hj-chip{border-radius:2px}
.hj-detail-page .hj-chiprow .hj-chip--outline{height:28px;padding:0 10px;border-radius:2px}
.hj-detail-page .hj-stage{border-radius:2px}

/* ---- Layout: body + rail, hairline-free columns on the white page ---- */
.hj-detail{column-gap:40px;row-gap:24px}
.hj-detail__rail{gap:16px}
.hj-detail__body{gap:24px}

/* ---- Fit panel: the score as a big display number, then the lists ---- */
.hj-fitcard{grid-template-columns:190px minmax(0,1fr);gap:28px;padding:26px 28px}
.hj-fitcard__score{min-width:0}
.hj-fitcard__fit{margin-top:6px}
.hj-fit__num--lg{font-size:56px;font-weight:700;line-height:1;font-variant-numeric:lining-nums proportional-nums;color:var(--hj-hi)}
/* Colour roles: gold for a strong fit (3.5+), teal for the middle band (2.5–3.4). */
.hj-fit--high{color:var(--hj-gold)}
.hj-fit--mid{color:var(--hj-teal)}
.hj-fit--low{color:var(--hj-body)}
.hj-fitcard__fit .hj-fit__of{font:500 15px var(--hj-font-body);color:var(--hj-muted)}
.hj-fitcard__meter{margin-top:14px}
.hj-meter__seg{width:28px;height:4px;border-radius:2px;background:var(--hj-edge)}
.hj-meter__fill{background:var(--hj-teal)}
.hj-fitcard__label{margin-bottom:8px;font-size:13px;font-weight:700;color:var(--hj-muted)}
.hj-fitcard__summary{font-size:16px}
.hj-fitcard__lists{margin-top:20px;gap:24px}
/* Bring/gap labels keep their meaning colours; the chips stay flat tags. */
.hj-fitcard .hj-why--bring{color:var(--hj-teal);font-weight:700}
.hj-fitcard .hj-why--gap{color:var(--hj-warn);font-weight:700}
.hj-fitcard .hj-chiprow{row-gap:8px}
.hj-fitcard .hj-chip{height:auto;min-height:26px;padding:4px 10px;border-radius:2px;white-space:normal;overflow-wrap:anywhere;text-align:left}

/* ---- Apply kit rail: a D3 panel; each step gets a square number box ---- */
.hj-kit{padding:24px;gap:18px}
.hj-kit__head{gap:12px}
.hj-kit__head .hj-h2{font-size:22px}
.hj-kit__steps{gap:18px}
.hj-kit__step{grid-template-columns:28px minmax(0,1fr);gap:14px}
.hj-kit__num{
  width:28px;height:28px;box-sizing:border-box;border:0;border-radius:2px;
  background:var(--hj-gold-soft);color:var(--hj-gold);
  font-family:var(--hj-font-display);font-size:14px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;font-variant-numeric:lining-nums;
}
/* Done keeps the positive teal so a finished step still reads as finished. */
.hj-kit__step.is-done .hj-kit__num{background:var(--hj-teal);color:var(--hj-on-ink)}
.hj-kit__title{font-size:16px;font-weight:700;line-height:28px;color:var(--hj-hi)}
.hj-kit__actions{margin-top:10px}
.hj-kit__notice{margin-top:10px;border-radius:2px}
.hj-kit__foot{padding-top:16px;border-top:1px solid var(--hj-hair)}

/* ---- Warm introductions panel ---- */
.hj-intros{padding:22px 24px}
.hj-intros__title{font-size:20px}
.hj-intros__list{margin-top:10px}
.hj-intro{border-top:1px solid var(--hj-hair)}

/* ---- Section titles: About the role etc. read as .hj-h2 on the white page ---- */
.hj-detail__body .hj-h2{font-family:var(--hj-font-display);font-weight:700;font-size:22px;line-height:1.2}
.hj-posting__head{padding-bottom:12px;margin-bottom:18px;border-bottom:1px solid var(--hj-fg)}
.hj-posting .hj-link{font-weight:700}
.hj-posting__tags{margin-top:16px}
.hj-editor,.hj-letter{padding:24px;gap:16px}
.hj-editor__preview{border:1px solid var(--hj-hair);border-radius:2px;background:var(--hj-card)}

/* ---- Mobile: stacked, still flat ---- */
@media (max-width: 760px) {
  .hj-detail__title{font-size:32px}
  .hj-fitcard{grid-template-columns:minmax(0,1fr);gap:14px;padding:18px}
  .hj-fit__num--lg{font-size:44px}
  .hj-fitcard__lists{grid-template-columns:minmax(0,1fr)}
  .hj-kit{padding:18px}
  .hj-editor__text,.hj-editor__preview{height:50vh;min-height:240px}
}

/* Apply kit: optional note for the AI on the tailor step */
.hj-kit__note{margin-top:14px}
.hj-kit__note-label{display:block;margin-bottom:6px;font-size:14px;font-weight:700;color:var(--hj-hi)}
.hj-kit__note-input{width:100%;min-height:96px;resize:vertical;font-size:15px;line-height:1.45}
.hj-kit__body .hj-kit__note .hj-help{margin-top:6px}
.hj-kit__note + .hj-kit__actions{margin-top:12px}