/* ==========================================================================
   dashboard-rescue.html-only rules. Everything else (header, footer,
   buttons, cards, hero shell, related-links, pricing, FAQ, CTA, back-to-top,
   global typography, dark-mode colors) comes from css/*.css and must not be
   redefined here.
   Requires the full shared foundation to be loaded first.
   ========================================================================== */

/* ---- hero summary card ----
   Uses the shared .hero-card--icon family (hero.css) - no page-specific
   rules needed here. */

/* ---- "what's included": 6-card icon grid ----
   Reuses the shared .card-base.icon-card.included-card shell. */

.dr-included-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 1100px) {
  .dr-included-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .dr-included-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ---- "illustrative example": accessible before/after tabs ----
   Progressive enhancement: both panels ship visible in the HTML with no
   [hidden] attribute, and the tablist ships hidden. dashboard-example-
   toggle.js adds .js-dr-example-ready to .dr-example once it initializes
   (revealing the tablist) and sets the native [hidden] attribute on the
   inactive panel. Without JS, the tablist never appears and both panels
   stay visible, stacked, each still readable with its own caption and
   explanation panel. Selected-tab state is signaled by border, background,
   and font-weight together - not by color alone.

   Width system for this section: .section-heading (heading + intro copy,
   which now also carries the closing "goal" statement as its final
   paragraph) stays at a comfortable reading width; the tabs, dashboard
   image, caption row, and comparison panel all use the section's full
   container width (up to --max-width, 1160px) so the dashboard reads as
   the focal point. */

#illustrative-example .section-heading {
  max-width: 740px;
}

.dr-example-tablist {
  display: none;
  gap: 6px;
  justify-content: center;
  width: max-content;
  margin: 0 auto 32px;
  padding: 6px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--surface-bg);
  box-shadow: var(--shadow-card);
}

.js-dr-example-ready .dr-example-tablist {
  display: flex;
}

.dr-example-tab {
  min-height: 48px;
  padding: 0 36px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.dr-example-tab:hover {
  border-color: var(--accent-hover-border);
}

.dr-example-tab[aria-selected="true"] {
  border-color: var(--accent-color);
  background: var(--nav-link-active-bg);
  color: var(--heading-color);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--accent-color);
}

/* No-JS fallback only: both panels sit in normal flow and need visual
   separation. Once JS is ready, [hidden] removes the inactive panel from
   flow, so the visible panel should sit directly under the tablist with no
   extra margin - otherwise the After panel (second in DOM) would carry this
   margin even when it's the only panel shown, shifting everything below the
   tabbed area depending on which tab is selected. */
.dr-example-panel + .dr-example-panel {
  margin-top: 40px;
}

.js-dr-example-ready .dr-example-panel + .dr-example-panel {
  margin-top: 0;
}

.dr-example-figure {
  margin: 0;
}

.dr-example-frame {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-panel);
  background: var(--surface-bg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.dr-example-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.dr-example-caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 14px;
}

.dr-example-caption-label {
  color: var(--text-secondary);
  font-size: var(--fs-note);
  font-weight: 600;
}

.dr-example-fullsize {
  color: var(--link-color);
  font-size: var(--fs-note);
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}

.dr-example-fullsize:hover {
  color: var(--accent-color);
}

/* ---- comparison panel: always-visible issue/fix pairs ----
   Sits below the tabbed Before/After dashboard (independent of which tab is
   selected) so the diagnosis and the fix are visible together without
   switching tabs. One outer .card-base panel, not a card per pair - each
   pair is a row inside .dr-compare-rows, separated by an inset divider.
   Deliberately compact: four consolidated pairs (not one row per bullet
   from the old before/after lists), tight row padding, and no per-row
   Issue/Fix pills or decorative markers - the two sides are differentiated
   only by the column headers and position, both styled identically.
   grid-template-columns (1fr / 32px / 1fr) is shared by the column-heading
   row and every pair row, and the column-heading spans carry the same
   left/right padding as their row cells, so the issue/divider/fix edges
   line up. At tablet and mobile widths the grid collapses to one column per
   row (issue text directly above its fix text, in source order) and the
   divider column - just a vertical rule - is hidden, since there's no
   second column left to divide. */

.dr-compare-heading {
  margin: 32px auto 48px;
  text-align: center;
}

.dr-compare-heading h3 {
  margin: 4px 0 0;
  color: var(--heading-color);
  font-size: 1.3rem;
  line-height: 1.25;
  font-weight: 700;
}

.dr-compare {
  padding: 18px 26px;
}

.dr-compare-col-headings {
  display: grid;
  grid-template-columns: 1fr 32px 1fr;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.dr-compare-col-heading {
  color: var(--heading-color);
  font-size: var(--fs-note);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.dr-compare-col-heading--issue {
  padding-right: 18px;
}

.dr-compare-col-heading--fix {
  padding-left: 18px;
}

.dr-compare-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 32px 1fr;
  align-items: center;
  padding: 10px 0;
}

.dr-compare-row:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 0;
  left: 8px;
  height: 1px;
  background: var(--border-color);
}

.dr-compare-cell--issue {
  padding-right: 18px;
}

.dr-compare-cell--fix {
  padding-left: 18px;
}

.dr-compare-cell p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-secondary);
  line-height: 1.5;
}

.dr-compare-divider {
  position: relative;
}

.dr-compare-divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--border-color);
}

@media (min-width: 901px) {
  .dr-compare {
    padding: 20px 36px;
  }
}

@media (max-width: 900px) {
  .dr-compare-col-headings {
    display: none;
  }

  .dr-compare-row {
    grid-template-columns: 1fr;
    row-gap: 6px;
    padding: 14px 0;
  }

  .dr-compare-divider {
    display: none;
  }

  .dr-compare-cell--issue,
  .dr-compare-cell--fix {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  .dr-example-caption {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

@media (max-width: 640px) {
  .dr-example-tab {
    padding: 0 22px;
  }
}

/* ---- "is this the right fit" ----
   Fully covered by the shared .trio-grid family (cards.css) - no
   page-specific rules needed here. */