/* Dashboard-specific visual enhancements — kept out of tokens.css/shell.css
   since those are meant to stay universal/page-agnostic. Matched to the
   reference screens: task cards are now a grid of status-bordered cards
   with an icon tile, pill badge, and explicit CTA button, rather than
   compact list rows. Pairs with the markup dashboard.js now renders. */

/* --- Hero header --- */
.dashboard-hero-heading {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.9rem;
  color: var(--color-text);
  margin: 0 0 0.4rem;
}
.dashboard-hero-meta {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  text-transform: capitalize;
}
.dashboard-hero-meta-mono {
  text-transform: none;
  color: var(--color-text);
  font-weight: 600;
}

/* --- Progress strip: bold percentage on the right, thick bar below —
   matches the reference's "35% Complete" treatment. --- */
.progress-strip-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.progress-strip-pct {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--color-text);
}
.progress-strip-pct-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

/* --- Phase stepper: kept, but simplified to small quiet dots since the
   reference doesn't carry an equivalent element on the main dashboard
   (its phase list lives in a page-specific onboarding sidebar instead,
   which doesn't map onto this app's persistent site-wide nav — see
   chat for why this stayed as a lightweight secondary element here). --- */
.phase-stepper {
  gap: 0.5rem;
}
.phase-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.3rem;
  background: transparent !important;
  border: none !important;
}
.phase-step-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 9999px;
  background: var(--color-border);
}
.phase-step-label {
  font-size: 0.68rem;
  text-align: center;
  color: var(--color-text-muted);
}
.phase-step.is-done .phase-step-dot { background: var(--color-accent); }
.phase-step.is-done .phase-step-label { color: var(--color-text-secondary); }
.phase-step.is-current .phase-step-dot { background: var(--color-navy); width: 0.75rem; height: 0.75rem; }
.phase-step.is-current .phase-step-label { color: var(--color-text); font-weight: 700; }

/* Only "done" phase steps are actually clickable (they open the phase
   review section) — current/locked steps have no click handler, so they
   deliberately don't get this treatment; adding a hover highlight there
   would imply an interaction that doesn't exist. */
.phase-step.is-done {
  cursor: pointer;
  border-radius: var(--radius-control) !important;
  transition: background-color 0.15s ease;
}
.phase-step.is-done:hover,
.phase-step.is-done:focus-visible {
  background: var(--color-accent-bg) !important;
}
.phase-step.is-done:hover .phase-step-label,
.phase-step.is-done:focus-visible .phase-step-label {
  color: var(--color-accent-dark);
}
.phase-step.is-done:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-accent);
}

/* --- Task grid: replaces the old compact list-row cards with the
   reference's card anatomy — icon tile, badge, title, description,
   explicit CTA button. --- */
.task-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 640px) {
  .task-grid { grid-template-columns: 1fr; }
}
.task-grid-card {
  display: flex;
  flex-direction: column;
}
.task-grid-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
  margin: 0.9rem 0 0.35rem;
}
.task-grid-desc {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  margin: 0 0 1.1rem;
  flex: 1;
}
.task-grid-card .btn {
  align-self: flex-start;
}

/* --- Upcoming phase teaser / phase review section: crisp radius from
   the shared token, and a navy CTA band styled like the reference's
   full-width dark callout. --- */
#upcoming-phase-teaser .rounded-xl,
#phase-review-section.rounded-xl {
  border-radius: var(--radius-card) !important;
}

/* Phase review task title link — previously styled to look exactly
   like plain text (no underline, inherited color), which meant it was
   a real working link with zero visual affordance telling anyone it
   was clickable. */
.phase-review-task-link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}
.phase-review-task-link:hover {
  color: var(--color-navy);
  text-decoration: underline;
}