/* Study Route — Educational assessment.
   A worksheet a parent fills in: a bordered chart with an offset shadow,
   printed-form field boxes, and three routes out of the same complaint. */

.ax-header { padding: 18px 0; border-bottom: 0; background: transparent; }
.ax-logo { color: var(--accent); }
.ax-hero { padding: 42px 0 52px; }
.ax-hero-grid { grid-template-columns: .9fr 1.1fr; }
.ax-eyebrow { color: var(--accent-2, var(--accent)); }
.ax-h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.1; letter-spacing: -.05em; }

.ax-sheet {
  position: relative;
  padding: 24px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 12px 12px 0 var(--accent-soft, #eaf0fb);
}
.ax-sheet > b { font-size: 13px; }
.ax-sheet::before {
  content: "STUDENT CHART";
  position: absolute;
  right: 17px;
  top: 14px;
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--muted);
}
.ax-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 20px; }
.ax-field-box { padding: 13px; border: 1px solid var(--border); background: var(--surface-alt); }
.ax-field-box small { display: block; font-size: 9px; color: var(--muted); }
.ax-field-box b { font-size: 13px; }
.ax-result { margin-top: 14px; padding: 15px; border: 2px solid var(--accent); }
.ax-result small { font-size: 9px; letter-spacing: .1em; color: var(--muted); }
.ax-result strong { display: block; margin-top: 4px; font-size: 17px; }
.ax-result p { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); }
.ax-sheet .ax-button { margin-top: 13px; border-radius: 0; font-weight: 800; }

.ax-routes { padding: 52px 0; background: var(--accent-soft, var(--surface-alt)); }
.ax-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.ax-route { padding: 20px; border: 1px solid var(--border); background: var(--surface); }
.ax-route .ax-n { font-size: 30px; font-weight: 900; color: var(--border); }
.ax-route h3 { margin: 5px 0; font-size: 19px; }
.ax-route p { margin: 0 0 12px; font-size: 11.5px; color: var(--muted); }
.ax-route a { font-size: 10.5px; font-weight: 800; color: var(--accent); }

.ax-matrix { border-top: 2px solid var(--text); }
.ax-badge { background: var(--accent-soft, var(--surface-alt)); color: var(--accent-ink, var(--accent)); }

.ax-option, .assess-q, .assess-card { border-radius: 0; }

@media (max-width: 900px) { .ax-cards { grid-template-columns: 1fr; } }