/* =============================================================
   Signed-in account area — sidebar shell, cards, forms.
   Layers on brand.css tokens so light/dark come for free.
   ============================================================= */

/* Account shell. Sits INSIDE .container so the sidebar's left edge matches the header logo and
   the footer columns — it used to be a full-bleed panel pinned to the viewport edge. */
.acct-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
  padding-block: var(--space-6) var(--space-7);
}
@media (min-width: 1000px) {
  .acct-shell { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-7); }
}

/* ---- Sidebar ---- */
.acct-side {
  display: none;
  flex-direction: column;
  gap: var(--space-5);
  position: sticky;
  top: var(--site-sticky-top);
}
@media (min-width: 1000px) { .acct-side { display: flex; } }

.acct-nav { display: grid; gap: 0.15rem; }

/* Mobile rail: the same links as a horizontally scrollable strip, since the sidebar is hidden
   below 1000px and there was otherwise no account navigation at all on a phone. */
.acct-nav--rail {
  display: flex; gap: var(--space-2); overflow-x: auto;
  margin-bottom: var(--space-5); padding-bottom: 2px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.acct-nav--rail::-webkit-scrollbar { display: none; }
.acct-nav--rail a {
  flex: 0 0 auto; white-space: nowrap;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 0.45rem 0.9rem;
}
@media (min-width: 1000px) { .acct-nav--rail { display: none; } }
.acct-nav a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0.6rem 0.75rem; border-radius: var(--radius);
  color: var(--text); font-weight: 500; text-decoration: none;
}
.acct-nav a:hover { background: var(--surface-alt); color: var(--text-strong); text-decoration: none; }
.acct-nav a.active { background: var(--surface-alt); color: var(--text-strong); font-weight: 700; }
.acct-nav a.active .acct-nav__icon { color: var(--brand-accent); }
.acct-nav__icon { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; color: var(--text-muted); }

/* Profile-strength card in the sidebar */
.acct-strength {
  margin-top: auto;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
}
.acct-strength h4 { font-size: var(--fnt-small); color: var(--text-muted); margin: 0 0 var(--space-3); font-weight: 600; }

/* ---- Header controls ----
   The account area no longer has its own top bar — it uses SiteHeader like every other page.
   These two classes stay because SiteHeader itself uses them for the icon buttons and avatar. */
.acct-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface-alt);
  color: var(--text-strong); cursor: pointer; position: relative;
}
.acct-icon-btn:hover { border-color: var(--brand-accent); color: var(--brand-accent); text-decoration: none; }
.acct-avatar {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.25rem 0.5rem 0.25rem 0.25rem; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface-alt); color: var(--text-strong);
}
.acct-avatar:hover { text-decoration: none; border-color: var(--brand-accent); }
.acct-avatar__badge {
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--brand-gradient); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fnt-small);
}

/* ---- Main ---- */
/* No padding of its own: the shell's .container supplies the gutters now.
   container-type makes this column a QUERY CONTAINER: the grids inside need to respond to how
   much room this column actually has, not to the viewport. Since the shell moved inside
   .container the column is ~250px narrower than the window suggests, so viewport breakpoints
   were firing a 4-across layout into a space that only fits two. */
.acct-main { min-width: 0; container-type: inline-size; container-name: acct; }
.acct-main > .container { padding-inline: 0; max-width: none; }
.acct-head { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.acct-head h1 { margin: 0; }
.acct-head p { margin: 0.35rem 0 0; color: var(--text-muted); }

.acct-grid { display: grid; gap: var(--space-4); }
.acct-grid--dash { grid-template-columns: 1fr; }
.acct-grid--split { grid-template-columns: 1fr; }

/* Job cards that fit as many columns as there is genuine room for, rather than a fixed three.
   Used on the dashboard's "Recommended" panel and the Saved jobs list. */
.rec-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

/* All measured against .acct-main (see container-name: acct), NOT the viewport — what matters is
   how wide this column actually is, and it's ~250px narrower than the window. */
@container acct (min-width: 34rem) {
  /* Stats three-up, with the Career DNA card keeping the full row above them. It used to be one
     of four columns, which left the radar chart about 180px wide and unreadable — and forced
     "The Customiser" and "View applications →" to wrap. It's the headline of the page; it earns
     the width. */
  .acct-grid--dash { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .acct-grid--dash > .dna-card { grid-column: 1 / -1; }
}
@container acct (min-width: 52rem) {
  .acct-grid--split { grid-template-columns: 1.7fr 1fr; }
}

/* ---- Career DNA feature card ---- */
.dna-card {
  grid-column: 1 / -1;
  background: var(--brand-gradient);
  color: #fff; border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: grid; gap: var(--space-4); align-items: center;
  grid-template-columns: 1fr;
}
/* Text left, radar right — only once the card genuinely has the room. Keyed to the column, not
   the viewport, for the same reason as the grids above. */
@container acct (min-width: 34rem) { .dna-card { grid-template-columns: 1fr auto; } }
.dna-card__label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fnt-small); opacity: .85; }
.dna-card__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fnt-h2); margin: 0.2rem 0; }
.dna-card__score { font-size: 2.4rem; font-weight: 700; line-height: 1; font-family: var(--font-display); }
.dna-card__chip {
  display: inline-block; padding: 0.15rem 0.6rem; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.22); font-size: var(--fnt-small); font-weight: 600;
}

/* ---- Stat tiles ---- */
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.stat-card__top { display: flex; align-items: center; justify-content: space-between; color: var(--text-muted); }
.stat-card__value { font-size: 2rem; font-weight: 700; font-family: var(--font-display); color: var(--text-strong); line-height: 1; }
.stat-card__label { color: var(--text-muted); font-size: var(--fnt-small); }
.stat-card__link { margin-top: auto; font-size: var(--fnt-small); font-weight: 600; }

/* ---- Panels ---- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.panel__head h2 { margin: 0; font-size: var(--fnt-h3); }

/* ---- Job cards ---- */
.job-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); background: var(--surface); display: grid; gap: var(--space-2); }
.job-card__title { font-weight: 700; color: var(--text-strong); }
.job-card__meta { display: grid; gap: 0.3rem; color: var(--text-muted); font-size: var(--fnt-small); }
.job-card__meta span { display: flex; align-items: center; gap: var(--space-2); }

/* ---- Activity feed ---- */
.activity { display: grid; gap: var(--space-4); }
.activity__row { display: flex; gap: var(--space-3); align-items: flex-start; }
.activity__dot { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--surface-alt); color: var(--brand-accent); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.activity__when { color: var(--text-muted); font-size: var(--fnt-small); margin-left: auto; white-space: nowrap; }

/* ---- Profile section list ---- */
.sec-list { display: grid; gap: var(--space-3); }
.sec-row {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4); border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--surface); text-decoration: none;
}
.sec-row:hover { border-color: var(--brand-accent); text-decoration: none; }
.sec-row__name { font-weight: 700; color: var(--text-strong); }
.sec-row__hint { color: var(--text-muted); font-size: var(--fnt-small); }
.sec-row__status { margin-left: auto; flex: 0 0 auto; }
.status-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.7rem; border-radius: var(--radius-pill); font-size: var(--fnt-small); font-weight: 600; }
.status-chip--done { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.status-chip--todo { background: var(--surface-alt); color: var(--text-muted); }

/* ---- Grouped forms ---- */
.fieldset { border: 0; padding: 0; margin: 0 0 var(--space-6); }
.fieldset > legend { font-size: var(--fnt-small); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; padding: 0; margin-bottom: var(--space-3); }
.field-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .field-grid { grid-template-columns: repeat(3, 1fr); } }
.field-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .field-grid--2 { grid-template-columns: repeat(2, 1fr); } }
.field label { display: block; font-size: var(--fnt-small); color: var(--text-muted); font-weight: 600; margin-bottom: 0.35rem; }
.field__note { font-size: var(--fnt-small); color: var(--text-muted); margin: 0.35rem 0 0; }

/* ---- Career DNA results ---- */
.dna-hero {
  background: var(--brand-gradient); color: #fff;
  border-radius: var(--radius-lg); padding: var(--space-6);
  display: grid; gap: var(--space-5); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .dna-hero { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-7); } }
.dna-hero h1 { color: #fff; margin: 0.25rem 0 0; }
.dna-hero__eyebrow { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fnt-small); opacity: .85; }
.dna-hero__tagline { font-size: var(--fnt-h4); opacity: .95; margin: var(--space-3) 0 0; max-width: 46ch; }
.dna-hero__stats { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-5); }
.dna-hero__stat b { display: block; font-family: var(--font-display); font-size: 2rem; line-height: 1; }
.dna-hero__stat span { font-size: var(--fnt-small); opacity: .85; }
.dna-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.dna-hero .btn--onbrand { background: #fff; color: var(--brand-ink); border-color: #fff; }
.dna-hero .btn--onbrand:hover { background: rgba(255,255,255,.9); }
.dna-hero .btn--onbrand-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.dna-hero .btn--onbrand-ghost:hover { border-color: #fff; }

.dna-cols { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin-top: var(--space-5); align-items: start; }
@media (min-width: 900px) { .dna-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Persona copy (strengths / growing edges) is authored HTML from the quiz engine. It embeds
   full-size icon artwork and its own headings, so everything inside is constrained here —
   otherwise the illustrations render hundreds of pixels tall and dwarf the text. */
.dna-prose { line-height: 1.7; }
.dna-prose > *:first-child { margin-top: 0; }
.dna-prose p { margin: 0 0 var(--space-3); }
.dna-prose ul { padding-left: 1.1rem; margin: var(--space-2) 0 var(--space-3); }
.dna-prose li { margin-bottom: 0.35rem; }
.dna-prose h1, .dna-prose h2, .dna-prose h3, .dna-prose h4, .dna-prose h5, .dna-prose h6 {
  font-size: var(--fnt-h4); color: var(--text-strong);
  margin: var(--space-5) 0 var(--space-2);
}

/* Traits: icon beside its heading and copy (PersonaHtml regroups the source markup, which
   otherwise leaves the icon stranded below the text). */
.trait { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.trait:first-child { border-top: 0; padding-top: var(--space-2); }
.trait:last-child { padding-bottom: 0; }
.trait__body { min-width: 0; }
.trait__body > *:first-child { margin-top: 0; }
.trait__body > *:last-child { margin-bottom: 0; }
.trait__body h1, .trait__body h2, .trait__body h3,
.trait__body h4, .trait__body h5, .trait__body h6 { margin: 0 0 var(--space-2); font-size: var(--fnt-h4); }

/* Icon artwork: fixed size on a brand plate — the source images are white line-art on
   transparent, so without the plate they vanish entirely in light theme.
   DESCENDANT selector on purpose: the artwork is sometimes wrapped (e.g. <p><img></p>), so a
   child selector silently misses it and the illustration renders full-size. */
.trait__icon { flex: 0 0 auto; display: inline-flex; }
.dna-prose img, .dna-prose svg {
  width: 2.75rem !important; height: 2.75rem !important;
  max-width: 2.75rem; max-height: 2.75rem;
  object-fit: contain; display: block;
  background: var(--brand-navy); border-radius: var(--radius); padding: 0.45rem;
}
/* A paragraph that only carries an icon shouldn't add its own vertical rhythm. */
.dna-prose p:has(> img:only-child), .dna-prose p:has(> svg:only-child) { margin: var(--space-2) 0; }
/* A broken/missing image shouldn't leave an empty plate. */
.dna-prose img:not([src]), .dna-prose img[src=""] { display: none; }

/* ---- Profile hub: progress hero + section cards ---- */
.profile-hero {
  display: grid; gap: var(--space-5); align-items: center;
  grid-template-columns: 1fr;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-5);
  margin-bottom: var(--space-5);
}
@media (min-width: 720px) { .profile-hero { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-6); } }
.profile-hero__headline { font-family: var(--font-display); font-weight: 700; font-size: var(--fnt-h2); color: var(--text-strong); margin: 0; }
.profile-hero__sub { color: var(--text-muted); margin: 0.35rem 0 0; }

/* One pip per section — a glanceable "how much is left". */
.pips { display: flex; gap: 0.3rem; margin: var(--space-4) 0; }
.pip { height: 0.45rem; flex: 1 1 0; border-radius: var(--radius-pill); background: var(--surface-alt); }
.pip--on { background: var(--brand-gradient); }

.sec-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .sec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sec-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  text-decoration: none; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sec-card:hover { border-color: var(--brand-accent); transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.sec-card:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.sec-card--done { border-color: color-mix(in srgb, var(--success) 45%, var(--line)); }
.sec-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.sec-card__icon {
  width: 2.6rem; height: 2.6rem; flex: 0 0 auto; border-radius: var(--radius);
  background: var(--surface-alt); color: var(--brand-accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.sec-card--done .sec-card__icon { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.sec-card__name { font-weight: 700; color: var(--text-strong); }
.sec-card__hint { color: var(--text-muted); font-size: var(--fnt-small); margin: 0; }
.sec-card__cta { margin-top: auto; font-size: var(--fnt-small); font-weight: 600; color: var(--brand-accent); }
@media (prefers-reduced-motion: reduce) { .sec-card { transition: none; } .sec-card:hover { transform: none; } }

/* ---- Profile section page ----
   The section list is now the horizontal rail above the form (.sectabs), so the form gets the
   full width of the shell. It previously ran down the side as a second nav column. */
.profile-layout { display: grid; gap: var(--space-5); grid-template-columns: 1fr; align-items: start; }
.profile-main { min-width: 0; }

/* ---- Section rail ---- */
.sectabs-wrap {
  display: flex; align-items: center; gap: var(--space-4);
  flex-wrap: wrap; margin-bottom: var(--space-5);
}

.sectabs {
  display: flex; align-items: center; gap: 0.25rem;
  padding: 0.3rem; border-radius: var(--radius-pill);
  background: var(--surface-alt); border: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.sectabs::-webkit-scrollbar { display: none; }

.sectab {
  display: flex; align-items: center; gap: 0.4rem; flex: 0 0 auto;
  padding: 0.5rem 0.6rem; border-radius: var(--radius-pill);
  color: var(--text-muted); text-decoration: none; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.sectab:hover { background: var(--surface); color: var(--text-strong); text-decoration: none; }
/* Focus must do everything hover does, or this is keyboard-hostile. */
.sectab:focus-visible {
  outline: 2px solid var(--brand-accent); outline-offset: 1px;
  background: var(--surface); color: var(--text-strong);
}
.sectab.is-active {
  background: var(--surface); color: var(--text-strong); font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.sectab__icon { display: inline-flex; flex: 0 0 auto; }
.sectab__icon svg { width: 1.1rem; height: 1.1rem; }
.sectab.is-active .sectab__icon { color: var(--brand-accent); }

/* The reveal. 0fr→1fr animates to the label's natural width with no magic numbers. */
.sectab__label {
  display: grid; grid-template-columns: 0fr;
  transition: grid-template-columns .22s ease;
}
.sectab__label > span { overflow: hidden; font-size: var(--fnt-small); }
.sectab:hover .sectab__label,
.sectab:focus-visible .sectab__label,
.sectab.is-active .sectab__label { grid-template-columns: 1fr; }

/* Completion mark — visible whether the label is open or closed, which is the point. */
.sectab__mark {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 0.9rem; height: 0.9rem;
}
.sectab__mark svg { width: 0.9rem; height: 0.9rem; color: var(--success); }
/* Not-yet-done sections get a dot rather than an empty gap. */
.sectab:not(.is-done) .sectab__mark::after {
  content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%;
  background: var(--text-muted); opacity: .5;
}

.sectabs__progress { margin: 0; font-size: var(--fnt-small); color: var(--text-muted); }
.sectabs__progress strong { color: var(--text-strong); }

/* Touch: there is no hover, so show every label and let the rail scroll instead. */
@media (hover: none) {
  .sectab__label { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sectab, .sectab__label { transition: none; }
}
/* Repeatable entries (addresses, qualifications, roles, languages) */
.repeat-row {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-4); background: var(--surface-alt);
  display: grid; gap: var(--space-4); margin-bottom: var(--space-4);
}
.repeat-row__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.repeat-row__title { font-weight: 700; color: var(--text-strong); font-size: var(--fnt-small); }
.btn-link {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--brand-cta); font: inherit; font-size: var(--fnt-small); font-weight: 600;
}
.btn-link:hover { text-decoration: underline; }

/* Sticky save bar at the foot of an editor */
.form-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

/* Removable chips (skills, interests) */
.chip-set { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip--removable { display: inline-flex; align-items: center; gap: 0.4rem; }
.chip--removable button { border: 0; background: none; padding: 0; cursor: pointer; color: inherit; line-height: 1; }
.chip--add { cursor: pointer; border: 1px dashed var(--line); background: transparent; color: var(--text-strong); }
.chip--add:hover { border-color: var(--brand-accent); color: var(--brand-accent); }

/* ---- Meters (DNA dimensions / sectors) ---- */
.meter { display: grid; gap: 0.3rem; margin-bottom: var(--space-3); }
.meter__top { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--fnt-small); }
.meter__name { color: var(--text-strong); font-weight: 600; }
.meter__value { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.meter__track { height: 0.5rem; border-radius: var(--radius-pill); background: var(--surface-alt); overflow: hidden; }
.meter__fill { height: 100%; border-radius: var(--radius-pill); background: var(--brand-gradient); }
.meter__fill--alt { background: linear-gradient(90deg, var(--indigo-300), var(--purple-300)); }

/* ---- Breadcrumb ---- */
.crumbs { font-size: var(--fnt-small); color: var(--text-muted); margin-bottom: var(--space-4); }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--brand-accent); }

/* ---- Application progress tracker ---------------------------------------- */

.track-wrap {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5) var(--space-4);
}

.track-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5);
}
.track-head__label { font-weight: 700; color: var(--text-strong); }
.track-head__count { font-size: var(--fnt-small); color: var(--text-muted); }

.track {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-4);
}

.track__step {
  position: relative;
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: start; gap: var(--space-3);
  padding-bottom: var(--space-4);
}
.track__step:last-child { padding-bottom: 0; }

/* Connector. Drawn from each node down to the next, so the last step has none. */
.track__step::before {
  content: ""; position: absolute;
  left: calc(0.875rem - 1px); top: 1.75rem; bottom: 0;
  width: 2px; background: var(--line);
}
.track__step:last-child::before { display: none; }
/* The line leading OUT of a completed step is itself complete. */
.track__step--done::before { background: var(--success); }

.track__node {
  grid-row: 1 / span 2;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--line); background: var(--surface);
  color: transparent; flex: 0 0 auto; position: relative; z-index: 1;
}
.track__node svg { width: 0.95rem; height: 0.95rem; }

.track__step--done .track__node {
  background: var(--success); border-color: var(--success); color: #fff;
}
.track__step--current .track__node {
  border-color: var(--brand-accent);
  background: var(--surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-accent) 22%, transparent);
}
/* A solid centre so the live stage reads as a filled target, not an empty ring. */
.track__step--current .track__node::after {
  content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--brand-accent);
}

.track__label { font-weight: 600; color: var(--text-strong); line-height: 1.3; }
.track__step--todo .track__label { color: var(--text-muted); font-weight: 500; }
.track__time {
  grid-column: 2; font-size: var(--fnt-small); color: var(--text-muted); margin-top: 0.15rem;
}

/* Live stage: a slow pulse, so the eye lands on "where am I now" without hunting. */
@media (prefers-reduced-motion: no-preference) {
  .track:not(.track--closed) .track__step--current .track__node {
    animation: track-pulse 2.4s ease-in-out infinite;
  }
}
@keyframes track-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-accent) 22%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand-accent) 6%, transparent); }
}

/* Closed application — nothing is in flight, so drop the emphasis entirely. */
.track--closed .track__node { border-color: var(--line); background: var(--surface); }
.track--closed .track__step--done .track__node {
  background: var(--text-muted); border-color: var(--text-muted); color: var(--surface);
}
.track--closed .track__step--done::before { background: var(--text-muted); }
.track--closed .track__label { color: var(--text-muted); font-weight: 500; }

/* Wide enough for a horizontal run: the stages sit side by side with the line between them,
   which reads as a journey rather than a checklist. Keyed to the account column, not the
   viewport, for the same reason as the dashboard grids. */
@container acct (min-width: 40rem) {
  .track { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
  .track__step {
    grid-template-columns: 1fr; justify-items: center; text-align: center;
    gap: var(--space-2); padding: 0 var(--space-2);
  }
  .track__node { grid-row: auto; }
  .track__step::before {
    left: -50%; right: 50%; top: calc(0.875rem - 1px); bottom: auto;
    width: auto; height: 2px;
  }
  /* Horizontally, the line sits BEFORE each node, so it belongs to the step it leads into: it
     should be filled when the step it comes FROM is done — i.e. when this step is done or live. */
  .track__step:first-child::before { display: none; }
  .track__step--done::before,
  .track__step--current::before { background: var(--success); }
  .track--closed .track__step--current::before { background: var(--line); }
  .track__time { grid-column: auto; }
}