/**
 * tracker.css
 *
 * Public client-facing Project Tracker page.
 *
 * Two distinct states:
 *   STATE A — Landing  (#trk-state-landing)
 *     Full-page hero with search form + "How it works" cards.
 *     Shown before any Track ID is submitted.
 *
 *   STATE B — Results  (#trk-state-results)
 *     Compact sticky search bar + full project detail panels.
 *     Shown only after a successful Firestore lookup.
 *
 * Design tokens mirror the portfolio site for visual cohesion.
 */

/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  --bg:             hsl(0, 0%, 7%);
  --bg-card:        hsl(240, 2%, 12%);
  --bg-card-alt:    hsl(240, 2%, 13%);
  --bg-input:       hsl(240, 1%, 17%);

  --border:         hsl(0, 0%, 22%);
  --border-focus:   hsl(45, 100%, 72%);

  --text-primary:   hsl(0, 0%, 98%);
  --text-secondary: hsl(0, 0%, 84%);
  --text-muted:     hsla(0, 0%, 84%, .6);

  --accent:         hsl(45, 100%, 72%);
  --accent-dim:     hsl(45, 54%, 58%);
  --danger:         hsl(0, 43%, 51%);
  --success:        hsl(142, 50%, 45%);

  --gradient-accent: linear-gradient(135deg, hsl(45,100%,72%) 0%, hsl(35,100%,60%) 100%);
  --gradient-hero:   linear-gradient(160deg, hsl(240,2%,10%) 0%, hsl(0,0%,7%) 60%);

  --shadow-sm:  -4px 8px 24px hsla(0,0%,0%,.25);
  --shadow-md:  0 16px 32px hsla(0,0%,0%,.3);
  --shadow-lg:  0 24px 64px hsla(0,0%,0%,.4);

  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;

  --t: .25s ease;

  --content-max: 880px;
  --header-h:    64px;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
a               { text-decoration: none; color: inherit; }
li              { list-style: none; }
button          { font: inherit; background: none; border: none; cursor: pointer; }
input           { font: inherit; display: block; width: 100%; }
img             { display: block; max-width: 100%; }

/* Ensure [hidden] always wins — prevents display:flex / inline-block overrides */
[hidden]        { display: none !important; }

::selection     { background: var(--accent); color: hsl(0,0%,7%); }
:focus-visible  { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

html {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text-secondary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-card); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

/* ── State visibility ──────────────────────────────────────────────────────── */
.trk-state          { flex: 1; display: flex; flex-direction: column; }
.trk-state[hidden]  { display: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

.trk-header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--header-h);
  /* Solid fallback for devices that can't run backdrop-filter without dropping
     frames (common on low-end 2G mobile hardware). */
  background: hsla(240,2%,10%,.96);
  border-bottom: 1px solid var(--border);
}

@supports (backdrop-filter: blur(12px)) {
  .trk-header {
    background: hsla(240,2%,10%,.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

.trk-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 28px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.trk-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.trk-brand-mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--gradient-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.trk-brand-mark ion-icon { font-size: 19px; color: hsl(0,0%,7%); display: block; }

.trk-brand-text  { display: flex; flex-direction: column; min-width: 0; }

.trk-brand-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trk-brand-sub {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: .3px;
}

.trk-back-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: color var(--t), border-color var(--t), background var(--t);
  flex-shrink: 0;
  white-space: nowrap;
}

.trk-back-link ion-icon { font-size: 15px; display: block; }
.trk-back-link:hover {
  color: var(--text-primary);
  border-color: var(--accent-dim);
  background: hsla(45,100%,72%,.05);
}


/* ═══════════════════════════════════════════════════════════════════════════
   STATE A — HERO / LANDING
   ═══════════════════════════════════════════════════════════════════════════ */

.trk-hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px 60px;
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden;
}

/* Decorative radial orbs */
.trk-hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
}

.trk-hero-orb-1 {
  width: 500px;
  height: 500px;
  top: -180px;
  left: 50%;
  transform: translateX(-30%);
  background: radial-gradient(circle, hsla(45,100%,72%,.06) 0%, transparent 70%);
}

.trk-hero-orb-2 {
  width: 400px;
  height: 400px;
  bottom: -100px;
  left: -100px;
  background: radial-gradient(circle, hsla(210,80%,60%,.05) 0%, transparent 70%);
}

.trk-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 680px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Badge pill */
.trk-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--accent);
  background: hsla(45,100%,72%,.1);
  border: 1px solid hsla(45,100%,72%,.22);
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 24px;
}

.trk-hero-badge ion-icon { font-size: 14px; display: block; }

/* Heading */
.trk-hero-title {
  font-size: clamp(30px, 5vw, 48px);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.18;
  letter-spacing: -.5px;
  margin-bottom: 18px;
}

.trk-hero-accent {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Sub-heading */
.trk-hero-sub {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 40px;
}

/* ── Hero search form ──────────────────────────────────────────────────────── */

.trk-hero-form { width: 100%; max-width: 580px; }

.trk-hero-input-wrap {
  display: flex;
  align-items: stretch;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: border-color var(--t), box-shadow var(--t);
}

.trk-hero-input-wrap:focus-within {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 4px hsla(45,100%,72%,.13), var(--shadow-md);
}

.trk-hero-input-wrap.trk-input-error {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px hsla(0,43%,51%,.12);
}

.trk-input-icon {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--text-muted);
  padding: 0 16px;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.trk-hero-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .8px;
  padding: 17px 8px 17px 0;
  caret-color: var(--accent);
}

.trk-hero-input:focus       { outline: none; }
.trk-hero-input::placeholder { color: var(--text-muted); font-weight: 400; letter-spacing: .2px; }

.trk-hero-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 26px;
  background: var(--gradient-accent);
  color: hsl(0,0%,7%);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .3px;
  border-left: 1px solid hsla(45,100%,72%,.3);
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity var(--t), transform var(--t);
}

.trk-hero-btn ion-icon { font-size: 16px; display: block; }
.trk-hero-btn:hover    { opacity: .9; }
.trk-hero-btn:active   { opacity: .8; transform: scale(.98); }
.trk-hero-btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* Spinner */
.trk-btn-spinner {
  display: inline-block;
  width: 17px;
  height: 17px;
  border: 2.5px solid hsla(0,0%,7%,.3);
  border-top-color: hsl(0,0%,7%);
  border-radius: 50%;
  animation: trk-spin .65s linear infinite;
  /* GPU-composited rotation — no layout impact */
  will-change: transform;
}

@keyframes trk-spin { to { transform: rotate(360deg); } }

/* Hint */
.trk-hero-hint {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
}

.trk-hero-hint strong { color: var(--text-secondary); }

/* Error message */
.trk-hero-error {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding: 12px 16px;
  background: hsla(0,43%,51%,.1);
  border: 1px solid hsla(0,43%,51%,.28);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: hsl(0,60%,65%);
  text-align: left;
  animation: trk-fade-in .25s ease;
}

.trk-hero-error ion-icon { font-size: 17px; flex-shrink: 0; }


/* ── How It Works ──────────────────────────────────────────────────────────── */

.trk-how-section {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 56px 24px;
}

.trk-how-inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

.trk-how-heading {
  text-align: center;
  margin-bottom: 36px;
}

.trk-how-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.trk-how-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--gradient-accent);
  margin: 10px auto 0;
}

.trk-how-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 14px;
}

.trk-how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.trk-how-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--t), transform var(--t);
}

.trk-how-card:hover {
  border-color: var(--accent-dim);
  transform: translateY(-3px);
  will-change: transform;
}

.trk-how-num-wrap {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: hsla(45,100%,72%,.08);
  border: 1px solid hsla(45,100%,72%,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trk-how-num {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .5px;
}

.trk-how-body h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 7px;
  line-height: 1.35;
}

.trk-how-body p {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.75;
}

.trk-how-body p strong { color: var(--text-secondary); }


/* ═══════════════════════════════════════════════════════════════════════════
   STATE B — RESULTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Compact search bar (replaces hero once results are shown) ─────────────── */

.trk-compact-bar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
}

.trk-compact-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.trk-compact-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.trk-compact-left ion-icon {
  font-size: 18px;
  color: var(--accent);
  display: block;
  flex-shrink: 0;
}

.trk-compact-id {
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  background: hsla(45,100%,72%,.1);
  border: 1px solid hsla(45,100%,72%,.22);
  border-radius: 4px;
  padding: 3px 10px;
  letter-spacing: .5px;
  white-space: nowrap;
}

.trk-compact-change-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  transition: color var(--t), border-color var(--t), background var(--t);
  white-space: nowrap;
  flex-shrink: 0;
}

.trk-compact-change-btn ion-icon { font-size: 15px; display: block; }

.trk-compact-change-btn:hover {
  color: var(--text-primary);
  border-color: var(--accent-dim);
  background: hsla(45,100%,72%,.05);
}

/* ── Skeleton loader ───────────────────────────────────────────────────────── */

.trk-skeleton-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: var(--content-max);
  width: 100%;
  margin: 32px auto 0;
  padding: 0 24px;
}

.trk-skel-hero {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 8px;
}

.trk-skel-grid4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.trk-skel-bar {
  width: 100%;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    hsl(240,2%,15%) 25%,
    hsl(240,2%,19%) 50%,
    hsl(240,2%,15%) 75%
  );
  background-size: 200% 100%;
  animation: trk-shimmer 1.4s ease-in-out infinite;
  will-change: background-position;
}

@keyframes trk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Project content wrapper ───────────────────────────────────────────────── */

.trk-project-content {
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
  padding: 28px 24px 64px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: trk-fade-in .4s ease forwards;
  /* Isolate this subtree during its entrance animation so sibling layout
     is unaffected. Released automatically when animation ends (forwards fill
     produces the final opacity:1 / translateY(0) state). */
  will-change: opacity, transform;
  contain: layout;
}

@keyframes trk-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Result header ─────────────────────────────────────────────────────────── */

.trk-result-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.trk-result-heading {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.trk-chip-track-id {
  display: inline-flex;
  align-items: center;
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--accent);
  background: hsla(45,100%,72%,.1);
  border: 1px solid hsla(45,100%,72%,.22);
  border-radius: 4px;
  padding: 2px 8px;
  width: fit-content;
}

.trk-project-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.trk-project-client {
  font-size: 12px;
  color: var(--text-muted);
}

.trk-result-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Status badge ──────────────────────────────────────────────────────────── */

.trk-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .6px;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--status-color, var(--accent)) 40%, transparent);
  color: var(--status-color, var(--accent));
  background: color-mix(in srgb, var(--status-color, var(--accent)) 12%, transparent);
}

@supports not (color: color-mix(in srgb, red, blue)) {
  .trk-status-badge { border-color: hsla(45,100%,72%,.3); color: var(--accent); background: hsla(45,100%,72%,.1); }
}

/* ── Phase badge ───────────────────────────────────────────────────────────── */

.trk-phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 20px;
  color: var(--text-secondary);
  background: var(--bg-card-alt);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.trk-phase-badge ion-icon { font-size: 13px; color: var(--accent); display: block; }

/* ── Summary stat cards ────────────────────────────────────────────────────── */

.trk-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.trk-summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.trk-sc-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: hsla(45,100%,72%,.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.trk-sc-icon ion-icon { font-size: 17px; color: var(--accent); display: block; }

.trk-sc-body { min-width: 0; }

.trk-sc-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.trk-sc-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}

/* ── Section cards ─────────────────────────────────────────────────────────── */

.trk-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 24px;
}

.trk-card-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.trk-card-title ion-icon { font-size: 17px; color: var(--accent); display: block; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE TIMELINE
   ═══════════════════════════════════════════════════════════════════════════ */

.trk-phase-timeline {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.trk-phase-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  width: 110px;
}

.trk-phase-node {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid var(--border);
  background: var(--bg-card-alt);
  color: var(--text-muted);
  flex-shrink: 0;
  position: relative;
  transition: background var(--t), border-color var(--t), color var(--t);
}

.trk-phase-node ion-icon { font-size: 17px; display: block; }

.trk-phase-step.done .trk-phase-node {
  background: hsla(142,50%,45%,.15);
  border-color: hsl(142,50%,45%);
  color: hsl(142,60%,55%);
}

.trk-phase-step.active .trk-phase-node {
  background: hsla(45,100%,72%,.15);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 5px hsla(45,100%,72%,.1);
}

/* Pulse ring on active step */
.trk-phase-step.active .trk-phase-node::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid hsla(45,100%,72%,.3);
  animation: trk-pulse 2s ease-in-out infinite;
  /* opacity+transform only — both composited, zero reflow cost */
  will-change: opacity, transform;
}

@keyframes trk-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0; transform: scale(1.3); }
}

.trk-phase-connector {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin-top: 19px;
  min-width: 14px;
  align-self: flex-start;
  flex-shrink: 0;
  transition: background var(--t);
}

.trk-phase-connector.done { background: hsl(142,50%,45%); }

.trk-phase-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
  padding: 0 4px;
}

.trk-phase-step.done .trk-phase-name   { color: hsl(142,60%,55%); }
.trk-phase-step.active .trk-phase-name { color: var(--accent); font-weight: 600; }

.trk-phase-current-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--accent);
  background: hsla(45,100%,72%,.12);
  border-radius: 3px;
  padding: 2px 5px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUDGET & PAYMENT
   ═══════════════════════════════════════════════════════════════════════════ */

.trk-budget-body { display: flex; flex-direction: column; gap: 16px; }

.trk-budget-numbers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

.trk-bnum { display: flex; flex-direction: column; gap: 3px; }

.trk-bnum-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
}

.trk-bnum-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.trk-bnum-paid { color: hsl(142,60%,55%); }
.trk-bnum-owed { color: hsl(38,100%,65%); }

.trk-budget-bar {
  width: 100%;
  height: 10px;
  background: var(--bg-input);
  border-radius: 5px;
  overflow: hidden;
}

.trk-budget-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(to right, hsl(142,50%,40%), hsl(142,70%,55%));
  transition: width .7s ease;
}

/* Payment status pills */
.trk-pay-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  width: fit-content;
}

.trk-pay-unpaid       { background: hsla(0,43%,51%,.14); color: hsl(0,60%,65%); border: 1px solid hsla(0,43%,51%,.28); }
.trk-pay-deposit-paid { background: hsla(38,100%,58%,.14); color: hsl(38,100%,65%); border: 1px solid hsla(38,100%,58%,.28); }
.trk-pay-partial      { background: hsla(210,80%,60%,.14); color: hsl(210,80%,70%); border: 1px solid hsla(210,80%,60%,.28); }
.trk-pay-paid-in-full { background: hsla(142,50%,45%,.14); color: hsl(142,60%,55%); border: 1px solid hsla(142,50%,45%,.28); }
.trk-pay-overdue      { background: hsla(0,70%,45%,.18); color: hsl(0,70%,65%); border: 1px solid hsla(0,70%,45%,.35); }

.trk-payment-note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.65;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPRINTS & MILESTONES
   ═══════════════════════════════════════════════════════════════════════════ */

.trk-sprints-body { display: flex; flex-direction: column; }

.trk-sprint-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.trk-sprint-item:last-child { border-bottom: none; }

.trk-sprint-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
  background: var(--border);
  transition: background var(--t);
}

.trk-sprint-item.sprint-completed   .trk-sprint-dot { background: hsl(142,60%,55%); }
.trk-sprint-item.sprint-in-progress .trk-sprint-dot { background: var(--accent); box-shadow: 0 0 0 3px hsla(45,100%,72%,.15); }
.trk-sprint-item.sprint-blocked     .trk-sprint-dot { background: hsl(0,60%,55%); }

.trk-sprint-content { flex: 1; min-width: 0; }

.trk-sprint-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.trk-sprint-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.trk-sprint-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.trk-sprint-status-planned     { background: hsla(0,0%,50%,.1); color: var(--text-muted); border: 1px solid var(--border); }
.trk-sprint-status-in-progress { background: hsla(45,100%,72%,.1); color: var(--accent); border: 1px solid hsla(45,100%,72%,.22); }
.trk-sprint-status-completed   { background: hsla(142,50%,45%,.1); color: hsl(142,60%,55%); border: 1px solid hsla(142,50%,45%,.22); }
.trk-sprint-status-blocked     { background: hsla(0,43%,51%,.1); color: hsl(0,60%,65%); border: 1px solid hsla(0,43%,51%,.22); }

.trk-sprint-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 6px;
}

.trk-sprint-dates {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--text-muted);
  align-items: center;
  flex-wrap: wrap;
}

.trk-sprint-dates ion-icon { font-size: 12px; vertical-align: -1px; }

.trk-sprint-deliverables {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Description & Tech ────────────────────────────────────────────────────── */

.trk-desc-body {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.85;
  white-space: pre-wrap;
  word-break: break-word;
}

.trk-tech-body { display: flex; flex-direction: column; gap: 12px; }

.trk-tech-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}

.trk-tech-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 90px;
}

.trk-tech-value {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── Contact card ──────────────────────────────────────────────────────────── */

.trk-contact-card {
  border-color: hsla(45,100%,72%,.15);
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-card-alt) 100%);
}

.trk-contact-text {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 18px;
  line-height: 1.65;
}

.trk-contact-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.trk-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: all var(--t);
}

.trk-contact-btn ion-icon { font-size: 17px; display: block; }

.trk-wa-btn {
  background: hsla(142,60%,35%,.15);
  border-color: hsla(142,60%,45%,.3);
  color: hsl(142,60%,55%);
}
.trk-wa-btn:hover { background: hsla(142,60%,35%,.25); border-color: hsl(142,60%,45%); }

.trk-email-btn { background: var(--bg-input); color: var(--text-secondary); }
.trk-email-btn:hover { background: var(--bg-card-alt); border-color: var(--accent-dim); color: var(--text-primary); }


/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.trk-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-card);
  margin-top: auto;
}

.trk-footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.trk-footer-inner p  { font-size: 12px; color: var(--text-muted); line-height: 1.6; }
.trk-footer-inner a  { color: var(--text-secondary); transition: color var(--t); }
.trk-footer-inner a:hover { color: var(--accent); }
.trk-footer-sub { font-size: 11px; opacity: .65; }


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .trk-how-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .trk-hero { padding: 60px 20px 48px; }

  .trk-summary-grid  { grid-template-columns: repeat(2, 1fr); }
  .trk-skel-grid4    { grid-template-columns: repeat(2, 1fr); }

  .trk-result-header  { flex-direction: column; }
  .trk-result-badges  { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }

  .trk-phase-step     { width: 82px; }

  .trk-project-content { padding: 20px 16px 48px; }
  .trk-skeleton-wrap   { padding: 0 16px; }
}

@media (max-width: 560px) {
  .trk-how-grid       { grid-template-columns: 1fr; }
  .trk-how-section    { padding: 40px 20px; }
}

@media (max-width: 480px) {
  .trk-header-inner  { padding: 0 16px; }
  .trk-brand-sub     { display: none; }
  .trk-back-link span { display: none; }
  .trk-back-link     { padding: 8px 10px; }

  .trk-hero-title    { font-size: 26px; }
  .trk-hero-sub      { font-size: 13px; }
  .trk-hero-btn      { padding: 0 18px; font-size: 13px; }

  .trk-summary-grid  { grid-template-columns: 1fr 1fr; gap: 10px; }
  .trk-summary-card  { padding: 12px; }

  .trk-card          { padding: 16px; }
  .trk-project-name  { font-size: 17px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAYMENT SCHEDULE — Public client view
   ═══════════════════════════════════════════════════════════════════════════ */

.trk-payments-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Financial summary bar ───────────────────────────────────────────────── */

.trk-pay-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 22px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.trk-pay-summary-nums {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}

/* ── Payment timeline (vertical step list) ───────────────────────────────── */

.trk-pay-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 8px;
}

/* ── Single payment item ─────────────────────────────────────────────────── */

.trk-pay-item {
  display: flex;
  gap: 0;
  align-items: stretch;
  padding: 4px 0;
}

/* Step node column */
.trk-pay-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 44px;
  padding-top: 2px;
}

.trk-pay-step-node {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid var(--border);
  background: var(--bg-card-alt);
  color: var(--text-muted);
  transition: background var(--t), border-color var(--t), color var(--t);
  position: relative;
}

.trk-pay-step-node ion-icon { font-size: 15px; display: block; }

/* Node states */
.trk-pay-node-paid {
  background: hsla(142,50%,45%,.15);
  border-color: hsl(142,50%,45%);
  color: hsl(142,60%,55%);
}

.trk-pay-node-scheduled {
  background: hsla(210,80%,60%,.1);
  border-color: hsl(210,80%,60%);
  color: hsl(210,80%,65%);
}

.trk-pay-node-overdue {
  background: hsla(38,100%,58%,.1);
  border-color: hsl(38,100%,58%);
  color: hsl(38,100%,65%);
}

.trk-pay-node-waived {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
  opacity: .6;
}

/* Vertical connector line between steps */
.trk-pay-step-line {
  flex: 1;
  width: 2px;
  border-radius: 1px;
  margin: 4px 0;
  min-height: 20px;
  background: var(--border);
  transition: background var(--t);
}

.trk-pay-line-paid    { background: hsl(142,50%,40%); }
.trk-pay-line-pending { background: var(--border); }

/* Content column */
.trk-pay-content {
  flex: 1;
  min-width: 0;
  padding: 2px 0 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Last item — remove bottom padding */
.trk-pay-item:last-child .trk-pay-content { padding-bottom: 4px; }

.trk-pay-row-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.trk-pay-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.trk-pay-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.trk-pay-amount {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

/* Item-level tint */
.trk-pay-item-paid    .trk-pay-amount { color: hsl(142,60%,55%); }
.trk-pay-item-overdue .trk-pay-amount { color: hsl(38,100%,65%); }
.trk-pay-item-waived                  { opacity: .55; }

/* ── Entry status badge ──────────────────────────────────────────────────── */

.trk-pay-entry-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.trk-pay-entry-badge ion-icon { font-size: 13px; display: block; }

.trk-pay-badge-paid {
  background: hsla(142,50%,45%,.12);
  color: hsl(142,60%,55%);
  border: 1px solid hsla(142,50%,45%,.25);
}

.trk-pay-badge-scheduled {
  background: hsla(210,80%,60%,.1);
  color: hsl(210,80%,68%);
  border: 1px solid hsla(210,80%,60%,.22);
}

.trk-pay-badge-overdue {
  background: hsla(38,100%,58%,.12);
  color: hsl(38,100%,65%);
  border: 1px solid hsla(38,100%,58%,.25);
}

.trk-pay-badge-waived {
  background: hsla(0,0%,50%,.08);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* ── Meta row (dates, method) ────────────────────────────────────────────── */

.trk-pay-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.trk-pay-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
}

.trk-pay-meta-item ion-icon { font-size: 13px; display: block; }

.trk-pay-meta-paid { color: hsl(142,55%,50%); }

.trk-pay-past-due {
  color: hsl(38,100%,65%);
  font-weight: 700;
}

/* ── Optional notes text ─────────────────────────────────────────────────── */

.trk-pay-notes-text {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.65;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .trk-pay-summary-nums { grid-template-columns: 1fr 1fr; }

  .trk-pay-step  { width: 36px; }

  .trk-pay-step-node {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .trk-pay-step-node ion-icon { font-size: 13px; }

  .trk-pay-amount { font-size: 16px; }
}