/* =========================================================================
   QALadder — "How would you test X" hub  (loads AFTER theme.css + article.css)

   The framework block is the page's centrepiece visual. It is HTML and inline
   SVG rather than one wide diagram image because this audience reads on
   phones: a fixed-width diagram scales its text to unreadable, an HTML grid
   reflows. Zero extra requests, zero layout shift, and it follows the theme.
   ========================================================================= */

/* ---- the three-step strip ---------------------------------------------- */
.fw{
  background:var(--grad-brand-soft);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:22px 22px 18px;margin:22px 0 28px;
}
.fw-steps{
  list-style:none;margin:0 0 20px;padding:0;
  display:grid;gap:14px;grid-template-columns:repeat(3,1fr);
}
.fw-steps li{
  display:flex;flex-direction:column;gap:4px;margin:0;
  padding-left:14px;border-left:2px solid var(--accent);
}
.fw-n{
  font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:700;
  color:var(--accent-deep);letter-spacing:.08em;
}
.fw-steps b{font-family:var(--font-display);font-size:var(--fs-md);line-height:1.25;}
.fw-d{font-size:15px;line-height:1.6;color:var(--text-soft);}

/* ---- the seven axes ----------------------------------------------------- */
.ax-grid{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.ax{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:12px 14px;
  display:flex;flex-direction:column;gap:5px;
}
.ax-h{display:flex;align-items:center;gap:8px;}
.ax-h b{font-family:var(--font-display);font-size:var(--fs-base);}
/* Fixed box so the icon can never resize the row as fonts settle. */
.ax-i{width:18px;height:18px;flex:0 0 18px;color:var(--accent);}
.ax-d{font-size:15px;line-height:1.6;color:var(--text-soft);}

/* ---- the axes applied inside each object card --------------------------- */
.article .ax-applied{margin:0 0 12px;}
.article .ax-applied dt{
  font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--accent-deep);
  margin-top:12px;
}
.article .ax-applied dt:first-child{margin-top:0;}
.article .ax-applied dd{margin:4px 0 0;font-size:16.5px;line-height:1.75;color:var(--text);}

@media(max-width:640px){
  .fw{padding:16px 16px 14px;}
  .fw-steps{grid-template-columns:1fr;gap:12px;}
}