/* CV Mojo app: the standard page header on older pages, and the job tracker brought into line (2026-10-28).
   With app-pagehead.js. The header itself is the shared .ap-head (app.css, restyled by app-v3.css); these rules give it
   room on pages that aren't laid out as a grid. The job tracker (index.php CVC.pages.jobTracker) is drawn with inline
   styles, so its rules are scoped by its own ids and use !important where an inline style has to give way. */

.ph-head { margin-bottom: 26px; }
.ph-trail { margin: 0 0 14px; }
.ph-trail .ap-crumbs { margin: 0; }
.ph-wrap--versions { padding: 26px 32px 4px; }

/* ── Job tracker ─────────────────────────────────────────────────────── */
/* Stat tiles: the same as the rebuilt pages' (UI.stat): big number, label, note, a colour blob in the corner */
#trackerStats.dash-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 16px !important; margin-bottom: 20px !important; }
#trackerStats .stat-card { position: relative; isolation: isolate; display: grid; align-content: start; gap: 4px; min-width: 0; overflow: hidden; padding: 24px 22px 20px !important; background: var(--paper, #FFFDF8) !important; border: 0 !important; border-radius: 26px !important; box-shadow: var(--shadow) !important; }
#trackerStats .stat-card::before { content: ''; position: absolute; right: -30px; top: -30px; z-index: -1; width: 96px; height: 96px; background: var(--jt-accent, var(--sun, #FFC93C)); -webkit-mask: var(--v-blob-a) center / 100% 100% no-repeat; mask: var(--v-blob-a) center / 100% 100% no-repeat; }
#trackerStats .stat-card:nth-child(1) { --jt-accent: var(--sun, #FFC93C); }
#trackerStats .stat-card:nth-child(2) { --jt-accent: var(--mint, #CDEDE4); }
#trackerStats .stat-card:nth-child(3) { --jt-accent: var(--sky, #CFE8F6); }
#trackerStats .stat-card:nth-child(4) { --jt-accent: #FFD9BF; }
#trackerStats .stat-card:nth-child(5) { --jt-accent: var(--sun-l, #FFE59A); }
#trackerStats .stat-value { order: 1; font-family: var(--v-display) !important; font-size: 54px !important; font-weight: 400 !important; line-height: .9 !important; letter-spacing: 0; color: var(--navy, #1E2A5A) !important; }
#trackerStats .stat-label { order: 2; margin: 0 !important; font-family: var(--v-body) !important; font-size: 14px !important; font-weight: 900 !important; letter-spacing: .02em !important; text-transform: none !important; color: var(--muted, #5D5869) !important; }
#trackerStats .stat-sub { order: 3; font-size: 13px !important; color: var(--muted, #5D5869) !important; }

/* "Waiting 2+ weeks" nudge and upcoming actions: plain cards, no coloured side stripes */
#staleAppsNudge > div { padding: 18px 22px !important; background: #FFF3CF !important; border: 0 !important; border-radius: 22px !important; box-shadow: none !important; }
#staleAppsNudge .stale-pick { border: 0 !important; box-shadow: inset 0 0 0 1.5px rgba(30, 42, 90, .14); }
#upcomingActions > .card { border-left: 0 !important; padding: 22px 24px !important; }
#upcomingActions > .card > div:first-child { margin-bottom: 8px !important; font-family: var(--v-body) !important; font-size: 18.5px !important; font-weight: 900 !important; color: var(--navy, #1E2A5A) !important; }

/* Filter tabs: the rebuilt pages' pill tabs */
#filterTabs { display: flex !important; flex-wrap: nowrap !important; gap: 4px !important; width: max-content; max-width: 100%; margin-bottom: 18px !important; padding: 4px !important; overflow-x: auto; background: var(--paper, #FFFDF8); border: 0 !important; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line, #EDE4CB); scrollbar-width: none; }
#filterTabs .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 0 !important; margin: 0; padding: 8px 16px !important; font-family: var(--v-body) !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--navy, #1E2A5A) !important; white-space: nowrap; background: none !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; -webkit-text-stroke: 0 !important; transform: none !important; }
#filterTabs .btn::before, #filterTabs .btn::after { display: none !important; }
#filterTabs .btn:not(.btn-primary):hover { background: var(--mist, #F7EEDA) !important; }
#filterTabs .btn.btn-primary { color: var(--cream, #FFFAEC) !important; background: #273D97 !important; }
#filterTabs .btn:focus-visible { outline: 3px solid var(--navy, #1E2A5A); outline-offset: 2px; }

/* The applications */
#appsList .tracker-app-card { padding: 18px 4px !important; border-bottom: 1.5px solid var(--line, #EDE4CB) !important; }
#appsList .tracker-app-card:last-child { border-bottom: 0 !important; }
#appsList .tracker-app-card > div > div:first-child > div:first-child > span:first-child { font-size: 16.5px !important; font-weight: 900 !important; color: var(--navy, #1E2A5A) !important; }

@media (max-width: 1100px) {
  #trackerStats.dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  #trackerStats.dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  #trackerStats .stat-card { padding: 20px 18px 16px !important; }
  #trackerStats .stat-value { font-size: 44px !important; }
}