/* AI Practitioner Path - page-scoped styles (pr-).
   Loaded via head_extra on the dedicated practitioner templates ONLY, alongside
   training-hub.css. No shared rules touched; BL-016 pattern (kickstart-precedent):
   never the dead page_css block. No cl-owner: this is a shared-controls page. */

.pr-hero-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: start; }

.pr-hero-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.pr-summary-price { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.4rem; }
.pr-summary-facts { margin: 0 0 0.8rem; padding-left: 1.1rem; }
.pr-summary-facts li { margin: 0.25rem 0; }

.pr-section { margin: 2.2rem 0; }
.pr-lead { font-size: 1.05rem; max-width: 62ch; }
.pr-list { max-width: 68ch; }
.pr-list li { margin: 0.5rem 0; }
.pr-note { color: var(--text-muted); font-size: 0.95rem; max-width: 62ch; }

.pr-steps { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; gap: 0.9rem; }
.pr-steps li { display: flex; gap: 0.9rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1rem; }
.pr-step-num { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface-2, rgba(255,255,255,0.06)); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.pr-steps h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.pr-steps p { margin: 0; }

.pr-example-label { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.4rem; }
.pr-example-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent, #f5b83d); border-radius: var(--radius); padding: 1rem 1.2rem; max-width: 72ch; }
.pr-example-context { margin: 0 0 0.8rem; }
.pr-example-rows { margin: 0 0 0.8rem; display: grid; gap: 0.55rem; }
.pr-example-rows > div { display: grid; grid-template-columns: 11.5rem 1fr; gap: 0.7rem; }
.pr-example-rows dt { font-weight: 700; font-size: 0.9rem; }
.pr-example-rows dd { margin: 0; }
.pr-example-why { margin: 0 0 0.6rem; }
.pr-example-task { margin: 0; color: var(--text-muted); }

.pr-boundary { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.2rem 0; }
.pr-boundary-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; }
.pr-boundary-col h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.pr-boundary-col ul { margin: 0; padding-left: 1.1rem; }
.pr-boundary-col li { margin: 0.35rem 0; }

.pr-trainer-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; max-width: 68ch; margin-top: 1rem; }
.pr-closing { text-align: center; }

@media (min-width: 900px) {
  .pr-hero-grid { grid-template-columns: 1.6fr 1fr; gap: 2rem; }
  .pr-boundary { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .pr-example-rows > div { grid-template-columns: 1fr; gap: 0.15rem; }
  .pr-steps li { flex-direction: column; gap: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-steps li, .pr-example-card, .pr-boundary-col { transition: none; }
}

/* --- Shared-controls integration (page-scoped, state-scoped) ---
   training-hub.css hides .mobile-cta for cl-owner pages that ship replacement
   controls (hub/kickstart). Practitioner is a SHARED page: its no-JS and
   controller-failure fallback IS the legacy bar (BL-006 arrangement). Restore it
   in exactly those states; strip states (cl-on) keep the hub hiding rule. */
@media (max-width: 768px) {
  body:not(.cl-on) .pr-page ~ .mobile-cta,
  body:not(.cl-on) .mobile-cta { display: flex !important; }
}

/* --- Large-text overflow safety (measured at 34px root) --- */
.pr-hero-grid > * { min-width: 0; }
.pr-boundary-col { min-width: 0; }
.pr-example-card { max-width: 100%; }
.pr-summary-facts, .pr-list, .pr-boundary-col ul, .pr-example-why, .pr-example-task, .pr-note, .pr-lead { overflow-wrap: break-word; }

/* --- Inline prose links (reviewer correction): accepted palette, WCAG AA.
   amber #F59E0B on --bg/--surface computes >8:1 (verified in-harness);
   persistent underline = link identification; visible keyboard focus;
   button-size floor NOT applied to inline prose links. --- */
.pr-page a:not(.btn),
.pr-page .pr-note a, .pr-page .pr-lead a, .pr-page .pr-offer-terms a {
  color: var(--amber, #F59E0B);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}
.pr-page a:not(.btn):hover,
.pr-page .pr-note a:hover, .pr-page .pr-lead a:hover, .pr-page .pr-offer-terms a:hover {
  color: var(--amber-hover, #FBBF24);
  text-decoration-thickness: 2px;
}
.pr-page a:not(.btn):visited,
.pr-page .pr-note a:visited, .pr-page .pr-lead a:visited, .pr-page .pr-offer-terms a:visited {
  color: #F5B83D;
  text-decoration-style: dotted;
}
.pr-page a:not(.btn):focus-visible,
.pr-page .pr-note a:focus-visible, .pr-page .pr-lead a:focus-visible, .pr-page .pr-offer-terms a:focus-visible {
  outline: 2px solid var(--amber-hover, #FBBF24);
  outline-offset: 2px;
  border-radius: 2px;
}