/* ===========================================================================
   Talentloop candidate tracker — one application's detail.
   Loaded alongside careers.css (shared header/footer) and app.css (card,
   chip, timeline, breadcrumb primitives). The app-summary/prog-steps pattern
   here used to live on tracker-dashboard.css when the dashboard switched
   between applications in place; it moved here when that switcher became a
   real link to this page.
   =========================================================================== */
:root {
  --primary: #4338CA;
  --primary-hover: #3730A3;
  --primary-soft: #E7E5FB;
}

.app-detail-inner {
  --od-gap: var(--s-4);
  max-width: 1240px;
  margin-inline: auto;
  padding: var(--s-6) var(--s-4) var(--s-12);
  display: flex;
  flex-direction: column;
}

/* every application's three cards are pre-rendered; assets/tracker-application-
   detail.js toggles [hidden] on the one matching ?app= and hides the rest.
   [data-app-panel] sets its own display, which otherwise outranks the UA
   [hidden] default (same specificity, author beats user-agent) and leaves
   every panel visible regardless of ?app= — so [hidden] is restated here. */
[data-app-panel] { --od-gap: var(--s-6); display: flex; flex-direction: column; }
[data-app-panel][hidden] { display: none; }

/* ---------- application card header --------------------------------------- */
.app-summary-row { --od-gap: var(--s-4); flex-wrap: wrap; }
.app-summary-text { --od-gap: var(--s-1); }
.app-role-title { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 700; letter-spacing: -.01em; }

/* ---------- progress steps: one track per application ----------------------- */
.prog-steps { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .prog-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .prog-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.prog-step {
  --od-gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--surface);
}
.prog-step.is-done { border-color: var(--primary); background: var(--primary-soft); }
.prog-name { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.prog-date { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.prog-terminal {
  --od-gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}

/* ---------- next-step note -------------------------------------------------- */
.next-step-body { --od-gap: var(--s-2); }