/*
 * The employer dashboard skin. Loaded after shared.css on every /hire/ page, so
 * it only adds what the review surface needs on top of the shared tokens — the
 * nav, the job and applicant rows, the score ring, the transcript, the grouped
 * sections. No new colours: everything is a shared token.
 *
 * The dashboard is wider than the auth/apply pages — it lists things — so .wrap
 * gets a roomier max-width here and reads top-down, never centred.
 */

.wrap.hire { max-width: 680px; justify-content: flex-start; gap: var(--section); }

/* ── nav in the masthead ── */
.nav { display: flex; gap: var(--group); margin-left: auto; }
.nav a {
  font-size: 15px; line-height: 20px; font-weight: 600; color: var(--text-muted);
  text-decoration: none; padding: 4px 2px; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--text); }
.nav a.on { color: var(--text); border-bottom-color: var(--accent); }

/* ── the "what needs you" hero ── */
.hero {
  display: flex; align-items: baseline; gap: var(--group); flex-wrap: wrap;
}
.hero b { font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hero span { font-size: 15px; line-height: 20px; color: var(--text-muted); }

/* ── a list of things (jobs, applicants, interviews) ── */
.list { display: flex; flex-direction: column; gap: var(--group); }
.grouphead {
  margin: var(--group) 0 0; font-size: 13px; line-height: 16px; font-weight: 600;
  letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted);
}
.empty { color: var(--text-muted); font-size: 15px; line-height: 22px; margin: 0; }

/* A row is a card you can act on. Some rows are links (jobs), some expand
   (applicants), some carry buttons (interviews). */
.row {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--gutter); display: flex; flex-direction: column; gap: var(--group);
}
.row.link { cursor: pointer; text-decoration: none; color: inherit; }
.row.link:hover { border-color: var(--accent); }
.rowtop { display: flex; align-items: flex-start; gap: var(--group); }
.rowtop .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rowtitle { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.rowmeta { font-size: 14px; line-height: 20px; color: var(--text-muted); margin: 0;
  display: flex; flex-wrap: wrap; gap: 4px var(--group); }
.rowmeta .dot::before { content: "·"; margin-right: var(--group); color: var(--line); }
.rowmeta .dot:first-child::before { content: none; }

/* ── status pills (extends shared .pill) ── */
.pill.warn { color: var(--warn); }
.pill.neutral { color: var(--text-muted); }
.pill.live { color: var(--good); }

/* ── the score ring ── */
.ring { position: relative; width: 46px; height: 46px; flex: 0 0 auto; }
.ring svg { display: block; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── applicant expand ── */
.appl .grow { cursor: pointer; }
.detail { display: flex; flex-direction: column; gap: var(--group);
  border-top: 1px solid var(--line-soft); padding-top: var(--group); }
.detail h4 { margin: 0 0 6px; font-size: 13px; line-height: 16px; font-weight: 600;
  letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); }
.detail p.summary { margin: 0; font-size: 15px; line-height: 22px; color: var(--text); }
ul.bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
ul.bullets li { font-size: 14px; line-height: 20px; padding-left: 18px; position: relative; color: var(--text); }
ul.bullets li::before { position: absolute; left: 0; top: 0; }
ul.bullets.good li::before { content: "+"; color: var(--good); font-weight: 700; }
ul.bullets.warn li::before { content: "–"; color: var(--warn); font-weight: 700; }

/* transcript — reuses the .said/.turn look from shared.css, restated for /hire/ */
.script { display: flex; flex-direction: column; gap: var(--group); }
.script .turn { display: flex; flex-direction: column; gap: 4px; padding-left: var(--group);
  border-left: 2px solid var(--line-soft); }
.script .turn .who { font-size: 12px; line-height: 16px; letter-spacing: .4px;
  text-transform: uppercase; color: var(--text-muted); }
.script .turn p { margin: 0; font-size: 14px; line-height: 20px; color: var(--text); }

/* ── inline action buttons on a row ── */
.actions { display: flex; flex-wrap: wrap; gap: var(--tight); }
.actions .btn, .actions button { width: auto; margin: 0; padding: 9px 16px; font-size: 15px; }
.actions a.btn { display: inline-block; }

/* the inline cancel confirm */
.confirm { display: flex; flex-direction: column; gap: var(--tight);
  border-top: 1px solid var(--line-soft); padding-top: var(--group); }
.confirm input { font-size: 15px; }
.confirm .actions { margin-top: 2px; }

/* a full-page status line while the dashboard loads or fails */
.loading { color: var(--text-muted); font-size: 15px; line-height: 22px; }

/* the share link box already exists as .linkbox in shared.css — reused as-is */