/* Page-only composition for applicant-detail.html.
   Shared rules live in assets/app.css, which loads first. Tokens only. */

.header-row { --od-gap: var(--s-4); flex-wrap: wrap; }
.header-text { flex: 1 1 240px; --od-gap: var(--s-4); }
.stage-aside { flex: 0 0 220px; --od-gap: var(--s-4); }
.stage-chip-wrap .chip { min-height: var(--s-8); padding: var(--s-1) var(--s-4); font-size: var(--fs-body); }

.fact-wide { flex: 1 1 260px; }

.prog-steps { display: grid; gap: var(--s-3); }
@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);
}

.note { --od-gap: var(--s-3); padding: var(--s-4); border-bottom: 1px solid var(--border); }
.note:last-child { border-bottom: 0; }
.note-cell { --od-gap: var(--s-1); }
.note-body { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink); margin-top: var(--s-1); }
.note-form { display: grid; gap: var(--s-4); }
.note-foot { --od-gap: var(--s-4); flex-wrap: wrap; }

.doc-row { --od-gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); }
.doc-row:last-child { border-bottom: 0; }
.doc-icon { color: var(--ink-muted); }
.doc-name { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }

.dialog-grid { display: grid; gap: var(--s-4); }

/* ---------------------------------------------------------------------------
   One candidate, several applications
   The page is read at two scopes: facts about the person, and facts about one
   application. The switcher names the scope; every application-scoped region
   is a [data-app-panel] and only one is ever visible.
   --------------------------------------------------------------------------- */
.app-switch { --od-gap: var(--s-2); }
.app-switch .od-cluster { --od-gap: var(--s-2); }

/* a two-line chip: role on top, reference and state under it. The pill radius
   of .chip is wrong for a two-line control, so this one takes the card radius
   and lets its label wrap instead of overflowing a narrow column. */
.app-tab {
  height: auto;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-control);
  text-align: left;
  white-space: normal;
}
.app-tab > .od-cell { --od-gap: 2px; }
.app-tab-name { font-size: var(--fs-small); font-weight: 600; }
.app-tab-meta { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--ink-muted); }
.app-tab[aria-pressed="true"] .app-tab-meta { color: var(--primary-hover); }

.app-line { margin-top: var(--s-1); }
/* each stage panel keeps the spacing the aside used to provide itself */
.stage-aside > [data-app-panel] { display: grid; gap: var(--s-4); align-content: start; }
[data-app-panel][hidden] { display: none; }