/* Test Strategy, Test Plan, Test Scenarios and Test Case guides. Base typography comes from sdlc-process.css;
   step cards and buttons come from the shared block in qa-handbook.css. */
.qg-guide { overflow-wrap: anywhere; }
/* Tables scroll sideways instead of splitting words letter by letter. */
.qg-guide :is(th, td) { overflow-wrap: normal; }
.qg-guide a { color: var(--home-accent); }
.qg-guide :is(section, details) { scroll-margin-top: calc(var(--home-header-height) + 20px); }
.qg-guide :is(h2, h3, h4) { font-weight: 700; line-height: 1.4; letter-spacing: -.3px; }
.qg-guide h2 { font-size: 23px; margin-bottom: 10px; }
.qg-guide h4 { font-size: 14px; margin-bottom: 10px; }
.qg-eyebrow { color: var(--home-accent); font: 500 11px/1.6 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .4px; }
.qg-guide .qg-small { color: var(--home-muted); font-size: 12px; }

.qg-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0 20px; }
.qg-overview > div { padding: 16px 20px; border: 1px solid var(--home-line); border-radius: 8px; background: var(--home-surface); }
.qg-overview span, .qg-overview strong, .qg-overview small { display: block; }
.qg-overview span { color: var(--home-muted); font-size: 12px; }
.qg-overview strong { margin: 4px 0; font-size: 18px; }
.qg-overview small { color: var(--home-muted); font-size: 12px; }

.qg-steps { margin-top: 28px; }
.qg-section-heading p { color: var(--home-muted); }
.qg-static-nav { font-size: 13px; margin: 14px 0; }
.qg-interactive .qg-static-nav { display: none; }
.qg-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 18px 0 16px; padding: 4px; }

.qg-step { padding: 24px; border: 1px solid var(--home-line); border-radius: 12px; background: var(--home-surface); }
.qg-step + .qg-step { margin-top: 20px; }
.qg-step__header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.qg-step__position { color: var(--home-accent); font: 500 12px/1.5 'IBM Plex Mono', monospace; }
.qg-guide .qg-step__header h3 { flex-basis: 100%; font-size: 23px; margin: 6px 0 4px; }
.qg-step__purpose { font-size: 15px; max-width: 1000px; }
.qg-step__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--home-line); }
.qg-step__body ul { padding-left: 18px; margin-bottom: 0; }
.qg-step__body li + li { margin-top: 8px; }
.qg-step__qa > h4 { color: var(--home-accent); }
.qg-example { margin-top: 22px; padding: 16px 18px; border-radius: 10px; background: var(--home-tint); }
.qg-example > h4 { color: var(--home-accent); }
.qg-example .sdlc-artifact:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.qg-example .sdlc-table-wrap { background: var(--home-surface); }
.qg-example > :last-child, .qg-example p:last-child { margin-bottom: 0; }
.qg-guide .qg-mistake { margin: 18px 0 0; padding: 10px 14px; border-left: 3px solid #d97706; border-radius: 4px; background: var(--home-tint); font-size: 13px; }
.qg-mistake strong { margin-right: 6px; color: #d97706; }
.qg-step__pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--home-line); font-size: 13px; font-weight: 700; }

.qg-facts { margin: 0; }
.qg-facts > div { display: grid; grid-template-columns: minmax(120px, .25fr) minmax(0, 1fr); gap: 4px 20px; padding: 8px 0; border-bottom: 1px solid var(--home-line); }
.qg-facts > div:last-child { border-bottom: 0; }
.qg-facts dt { color: var(--home-muted); font-size: 12px; }
.qg-facts dd { margin: 0; }

.qg-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.qg-compare > div { padding: 12px 14px; border: 1px solid var(--home-line); border-radius: 8px; background: var(--home-surface); }
.qg-compare strong { display: block; margin-bottom: 4px; font-size: 12px; }
.qg-compare__bad strong { color: #d97706; }
.qg-compare__good strong { color: #16a34a; }
.qg-compare p { margin: 0; }

.qg-pyramid { display: grid; justify-items: center; gap: 6px; list-style: none; padding: 0; margin: 0 0 12px; }
.qg-pyramid li { width: 100%; padding: 10px 14px; border-radius: 6px; background: var(--home-surface); border: 1px solid var(--home-line); text-align: center; }
.qg-pyramid li:nth-child(1) { width: 50%; }
.qg-pyramid li:nth-child(2) { width: 75%; }
.qg-pyramid strong, .qg-pyramid span { display: block; }
.qg-pyramid span { color: var(--home-muted); font-size: 12px; }

.qg-extra { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--home-line); }
.qg-test-case { padding: 18px; border: 1px solid var(--home-line); border-radius: 10px; background: var(--home-surface); }
.qg-guide .qg-test-case h3 { font-size: 17px; margin-bottom: 12px; }
.qg-test-case h4 { color: var(--home-muted); font-size: 12px; margin: 14px 0 6px; }
.qg-test-case ol { padding-left: 20px; }
.qg-resources { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--home-line); font-size: 13px; }

@media (max-width: 1000px) {
  .qg-tabs { display: flex; overflow-x: auto; padding-bottom: 12px; }
  .qg-tabs .qa-step-tab { flex: 0 0 160px; }
}
@media (max-width: 760px) {
  .qg-overview, .qg-step__body, .qg-compare { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .qg-step { padding: 18px 16px; }
  .qg-guide .qg-step__header h3 { font-size: 20px; }
  .qg-facts > div { grid-template-columns: minmax(0, 1fr); }
  .qg-pyramid li:nth-child(1), .qg-pyramid li:nth-child(2) { width: 100%; }
}