/* CV Mojo admin: one member's customer journey (Admin > Users > Journey, app-admin-journey.js), 2026-10-28.
   Shared pieces (ap-card, btn, ap-av) restyled by app-v3.css, plus the journey's own parts in the v3 tokens.
   Loaded before app-v3.css, so rules that must win are scoped under .adj. */

.adj { --aj-navy: var(--navy, #1E2A5A); --aj-paper: var(--paper, #FFFDF8); --aj-cream: var(--cream, #FFF6E0); --aj-mist: var(--mist, #F7EEDA);
  --aj-line: var(--line, #EDE4CB); --aj-muted: var(--muted, #5D5869); --aj-text: var(--text, #1D1A26); --aj-teal: var(--teal, #1F9E89); --aj-teal-t: var(--teal-t, #13705F);
  display: grid; gap: 18px; }
.adj > * { min-width: 0; }
.adj .ap-card { padding: 22px 24px; }
.adj .btn.btn-sm { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.adj .btn.btn-sm:is(.btn-primary, .btn-outline) { padding: 8px 16px 6px; font-size: 18px; }
.adj-back { margin: 0; }
.adj-back-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; font: inherit; font-size: 14.5px; font-weight: 800; color: var(--aj-navy); background: none; border: 0; cursor: pointer; }
.adj-back-btn:hover { text-decoration: underline; text-decoration-color: var(--sun, #FFC93C); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.adj-back-btn:focus-visible { outline: 3px solid var(--aj-navy); outline-offset: 3px; border-radius: 6px; }

/* Who */
.adj-head { display: grid; gap: 14px; }
.adj-who { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.adj .adj-av { flex: none; width: 56px; height: 56px; font-size: 22px; }
.adj-who-t { flex: 1 1 260px; min-width: 0; }
.adj-name { margin: 0; font-family: var(--v-body, inherit); font-size: 22px !important; font-weight: 900; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--aj-navy); overflow-wrap: anywhere; }
.adj-name:focus { outline: none; }
.adj-email { margin: 2px 0 0; font-size: 14.5px; color: var(--aj-text); overflow-wrap: anywhere; }
.adj-meta { margin: 4px 0 0; font-size: 13.5px; color: var(--aj-muted); }
.adj-who-acts { display: flex; gap: 8px; }
.adj-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adj-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; font-size: 13px; font-weight: 800; color: var(--aj-navy); background: var(--aj-mist); border-radius: 999px; }
.adj-chip svg { flex: none; }
.adj-chip--paid { background: var(--mint, #CDEDE4); }
.adj-chip--free { background: #FFF0C2; }

/* Cards */
.adj-top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.adj-top > :only-child { grid-column: 1 / -1; }
.adj-card { display: grid; gap: 14px; }
.adj-card-h { display: grid; gap: 3px; }
.adj-card-h h3 { margin: 0; font-family: var(--v-body, inherit); font-size: 17.5px !important; font-weight: 900; line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--aj-navy); }
.adj-card-h p { margin: 0; font-size: 14px; color: var(--aj-muted); }
.adj-card-h b { color: var(--aj-text); }
.adj-note { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--aj-muted); }
.adj-note svg { flex: none; margin-top: 2px; }

/* Stages on the way to paying */
.adj-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.adj-stage { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 10px 12px; background: var(--aj-cream); border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--aj-line); }
.adj-stage.is-done { background: #E6F5EF; box-shadow: none; }
.adj-stage.is-next { box-shadow: inset 0 0 0 2px var(--aj-navy); }
.adj-stage-dot { display: grid; flex: none; place-items: center; width: 22px; height: 22px; font-size: 11.5px; font-weight: 900; color: var(--aj-muted); background: var(--aj-paper); border-radius: 50%; box-shadow: inset 0 0 0 1.5px #D9CDAE; }
.adj-stage.is-done .adj-stage-dot { color: #fff; background: var(--aj-teal); box-shadow: none; }
.adj-stage-t { display: grid; min-width: 0; }
.adj-stage-t b { font-size: 13.5px; font-weight: 800; line-height: 1.3; color: var(--aj-navy); }
.adj-stage-t span { font-size: 12.5px; color: var(--aj-muted); }

/* Hints */
.adj-hints { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.adj-hint { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; font-size: 14px; line-height: 1.45; color: var(--aj-text); background: var(--aj-cream); border-radius: 12px; }
.adj-hint svg { flex: none; margin-top: 2px; color: var(--aj-navy); }
.adj-hint--warn { background: #FFF0C2; }
.adj-hint--ok { background: #E6F5EF; }
.adj-hint--ok svg { color: var(--aj-teal-t); }
.adj-hint a { font-weight: 800; color: var(--aj-navy); }

/* Totals */
.adj-counts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.adj-count { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 14px 16px; background: var(--aj-paper); border-radius: 18px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(30, 42, 90, .06)); }
.adj-count b { font-size: 26px; font-weight: 900; line-height: 1.1; color: var(--aj-navy); }
.adj-count span { font-size: 13px; font-weight: 700; color: var(--aj-text); }
.adj-count i { font-size: 12.5px; font-style: normal; color: var(--aj-muted); }

/* Timeline */
.adj-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.adj-filter { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 13px; font: inherit; font-size: 13.5px; font-weight: 800; color: var(--aj-navy); background: var(--aj-paper); border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--aj-line); cursor: pointer; }
.adj-filter span { padding: 0 6px; font-size: 12px; color: var(--aj-muted); background: var(--aj-mist); border-radius: 999px; }
.adj-filter[aria-pressed="true"] { color: var(--aj-cream); background: var(--aj-navy); box-shadow: none; }
.adj-filter[aria-pressed="true"] span { color: var(--aj-navy); background: var(--sun, #FFC93C); }
.adj-filter:focus-visible { outline: 3px solid var(--aj-navy); outline-offset: 2px; }
.adj-days, .adj-items { margin: 0; padding: 0; list-style: none; }
.adj-days { display: grid; gap: 16px; }
.adj-day h4 { position: sticky; top: 0; z-index: 1; margin: 0 0 6px; padding: 4px 0; font-family: var(--v-slab, Georgia, serif); font-size: 13.5px; font-weight: 400; letter-spacing: .04em; color: var(--tang-t, #B34A00); background: var(--aj-paper); }
.adj-item { display: grid; grid-template-columns: 44px 28px minmax(0, 1fr); align-items: start; gap: 10px; padding: 8px 0; border-top: 1.5px solid var(--aj-line); }
.adj-items .adj-item:first-child { border-top: 0; }
.adj-item:focus { outline: none; }
.adj-item time { padding-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--aj-muted); font-variant-numeric: tabular-nums; }
.adj-ic { display: grid; place-items: center; width: 28px; height: 28px; color: var(--aj-navy); background: var(--aj-mist); border-radius: 50%; }
.adj-item--money .adj-ic { background: #FFF0C2; }
.adj-item--reviews .adj-ic { background: var(--mint, #CDEDE4); }
.adj-item--jobs .adj-ic { background: var(--sky, #CFE8F6); }
.adj-item--emails .adj-ic { background: #FFD9BF; }
.adj-item.is-paid .adj-ic { color: #fff; background: var(--aj-teal); }
.adj-item-t { min-width: 0; padding-top: 4px; font-size: 14px; line-height: 1.45; color: var(--aj-text); overflow-wrap: anywhere; }
.adj-item-t > b { font-weight: 800; color: var(--aj-navy); }
.adj-item.is-paid .adj-item-t { font-weight: 800; color: var(--aj-teal-t); }
.adj-times { padding: 0 6px; font-size: 12px; font-weight: 900; color: var(--aj-navy); background: var(--aj-mist); border-radius: 999px; }
.adj-cv { font-size: 13px; font-weight: 800; color: var(--aj-navy); text-decoration: underline; text-decoration-color: var(--sun, #FFC93C); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.adj-path { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 3px 0 0; }
.adj-step { padding: 1px 8px; font-size: 12.5px; font-weight: 700; color: var(--aj-text); background: var(--aj-cream); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--aj-line); }
.adj-step.is-money { font-weight: 900; color: var(--aj-navy); background: #FFE59A; box-shadow: none; }
.adj-arrow { display: inline-flex; color: #B5AA8C; }
.adj-none { margin: 0; font-size: 14px; color: var(--aj-muted); }
.adj-more { justify-self: start; margin-top: 6px; }

@media (max-width: 1100px) {
  .adj-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .adj-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .adj-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .adj .ap-card { padding: 18px; }
  .adj-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adj-stages { grid-template-columns: minmax(0, 1fr); }
  .adj-item { grid-template-columns: 28px minmax(0, 1fr); }
  .adj-item time { grid-column: 2; grid-row: 2; padding-top: 0; }
  .adj-ic { grid-row: 1; }
}