/* dist/the-diagnostic/diagnostic.css — quick widget styling */

.diag-page { padding-bottom: 96px; }

.diag-hero { padding: 64px 0 48px; border-bottom: 1px solid var(--rule); }
.diag-hero h1 {
  font-family: 'Source Serif 4', serif;
  font-size: var(--fs-hero); font-weight: 700; line-height: 1.05;
  letter-spacing: -0.02em; margin-bottom: 20px;
}
.diag-hero h1 em { font-style: italic; font-weight: 400; color: var(--oxblood); }
.diag-hero .lead {
  font-family: 'Source Serif 4', serif;
  font-size: var(--fs-body-lg); line-height: 1.5; color: var(--muted); max-width: 720px;
}

.diag-widget-section { padding: 64px 0; }

.q-card {
  background: var(--white); border: 1px solid var(--rule);
  padding: 56px; max-width: 760px; margin: 0 auto;
}

.q-meta { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label); color: var(--muted); letter-spacing: 0.04em; margin-bottom: 18px; }

.q-dots { display: flex; gap: 6px; margin-bottom: 28px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rule); }
.dot.completed { background: var(--ink); }
.dot.current { background: var(--oxblood); }

.q-text { font-family: 'Source Serif 4', serif; font-size: var(--fs-h2); font-weight: 600; line-height: 1.3; margin-bottom: 36px; }

.q-actions { display: flex; gap: 16px; margin-bottom: 24px; }
.q-btn {
  background: var(--ink); color: var(--paper); border: none;
  padding: 16px 32px; font: inherit; font-size: var(--fs-body); font-weight: 600;
  cursor: pointer; min-width: 120px;
}
.q-btn:hover { background: var(--oxblood-deep); }
.q-btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.q-btn-secondary:hover { background: var(--quiet); }

.q-back {
  background: none; border: none; color: var(--muted); font: inherit; cursor: pointer;
  font-size: var(--fs-body); padding: 0;
}
.q-back:hover { color: var(--oxblood); }

.q-card-result h2 { font-family: 'Source Serif 4', serif; font-size: var(--fs-h1); font-weight: 700; line-height: 1.15; }
.q-card-result h2 em { font-style: italic; font-weight: 400; color: var(--oxblood); }

/* Deeper section */
.diag-deeper { padding: 64px 0; background: var(--quiet); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.deeper-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.deeper-card { background: var(--white); border: 1px solid var(--rule); padding: 36px; }
.deeper-card h3 { font-family: 'Source Serif 4', serif; font-size: var(--fs-h3); font-weight: 600; line-height: 1.2; margin: 12px 0 14px; }
.deeper-card p { font-family: 'Source Serif 4', serif; font-size: var(--fs-body); color: var(--muted); line-height: 1.5; margin-bottom: 24px; }
.deeper-card .card-tag { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--oxblood); }

/* Reuse homepage button style (these pages don't have full homepage CSS) */
.btn-primary {
  background: var(--ink); color: var(--paper); border: none;
  padding: 16px 28px; font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer;
  text-decoration: none; display: inline-block;
}
.btn-primary:hover { background: var(--oxblood-deep); }
.secondary-link {
  color: var(--oxblood); text-decoration: none;
  border-bottom: 1px solid var(--oxblood); padding-bottom: 2px;
  font-weight: 500; font-size: var(--fs-small);
}
.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--oxblood); margin-bottom: 20px;
}
.eyebrow-muted { color: var(--muted); }
.container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

.diag-methodology-preview { padding: 64px 0; }
.diag-methodology-preview h2 { font-family: 'Source Serif 4', serif; font-size: var(--fs-h1); font-weight: 700; margin: 8px 0 16px; }
.diag-methodology-preview p { font-family: 'Source Serif 4', serif; font-size: var(--fs-body-lg); color: var(--muted); margin-bottom: 16px; }

@media (max-width: 768px) {
  .diag-hero h1 { font-size: var(--fs-h1); }
  .q-card { padding: 32px 24px; }
  .q-text { font-size: var(--fs-h3); }
  .deeper-grid { grid-template-columns: 1fr; }
}