/* ============================================================================
 * academy-interactions.css — styles for window.AcademyWidgets (.ax-*)
 * Token-driven so it inherits the light (deck) / dark (academy-chat) remap that
 * academyWidgetClasses.css applies to `.ac-widget` via the --pt-* custom props.
 * No hard-coded brand hex; WCAG 2.2 AA focus + contrast; reduced-motion safe.
 * ========================================================================== */

.ax-widget {
  --ax-radius: var(--radius-md, 10px);
  --ax-gap: var(--sp-3, 12px);
  color: var(--pt-text, #243240);
  font-size: var(--fs-body, 0.95rem);
  line-height: 1.55;
}
.ax-widget * { box-sizing: border-box; }

.ax-head { margin-bottom: var(--sp-3, 12px); }
.ax-title {
  font-weight: var(--fw-bold, 700);
  font-size: var(--fs-h3, 1.15rem);
  color: var(--pt-text, #243240);
  margin-bottom: 4px;
}
.ax-intro { margin: 0; color: var(--pt-muted, #6c757d); }
.ax-body { display: block; }

/* ---- callout ---- */
.ax-callout {
  margin-top: var(--sp-4, 16px);
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  border-left: 3px solid var(--pt-orange, #fd7e14);
  background: var(--pt-orange-soft, #fff5e9);
  border-radius: 0 var(--ax-radius) var(--ax-radius) 0;
}
.ax-callout-title {
  font-weight: var(--fw-bold, 700);
  font-size: var(--fs-sm, 0.82rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pt-orange, #fd7e14);
  margin-bottom: 2px;
}
.ax-callout p { margin: 0; }

/* ---- buttons ---- */
.ax-actions { display: flex; gap: var(--sp-2, 8px); flex-wrap: wrap; margin-top: var(--sp-3, 12px); }
.ax-btn {
  font: inherit;
  font-weight: var(--fw-semibold, 600);
  border-radius: var(--radius-pill, 999px);
  padding: 8px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ax-btn-primary { background: var(--pt-orange, #fd7e14); color: #fff; }
.ax-btn-primary:hover { background: var(--pt-orange-hover, #e06b00); }
.ax-btn-ghost {
  background: transparent;
  color: var(--pt-text, #243240);
  border-color: var(--pt-line, #e9ecef);
}
.ax-btn-ghost:hover { border-color: var(--pt-orange, #fd7e14); color: var(--pt-orange, #fd7e14); }

/* ---- shared focus-visible (AA) ---- */
.ax-widget :focus-visible {
  outline: 3px solid var(--pt-orange, #fd7e14);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- feedback ---- */
.ax-feedback {
  margin-top: var(--sp-3, 12px);
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  border-radius: var(--ax-radius);
  border: 1px solid var(--pt-line, #e9ecef);
}
.ax-feedback.is-ok { border-color: var(--pt-green, #28a745); background: rgba(40, 167, 69, 0.08); }
.ax-feedback.is-no { border-color: var(--pt-red, #b04632); background: rgba(176, 70, 50, 0.08); }

/* ============================ reveal ============================ */
.ax-reveal-list { display: flex; flex-direction: column; gap: var(--sp-2, 8px); }
.ax-reveal-item {
  border: 1px solid var(--pt-line, #e9ecef);
  border-radius: var(--ax-radius);
  overflow: hidden;
  background: var(--pt-card, #ffffff);
}
.ax-reveal-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3, 12px);
  background: transparent;
  border: none;
  font: inherit;
  font-weight: var(--fw-semibold, 600);
  color: var(--pt-text, #243240);
  text-align: left;
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  cursor: pointer;
}
.ax-reveal-btn[aria-expanded="true"] { color: var(--pt-orange, #fd7e14); }
.ax-reveal-chev {
  flex: none;
  width: 22px; height: 22px; line-height: 20px; text-align: center;
  border-radius: 50%;
  border: 1px solid var(--pt-line, #e9ecef);
  font-weight: 700;
}
.ax-reveal-panel { padding: 0 var(--sp-4, 16px) var(--sp-3, 12px); color: var(--pt-muted, #6c757d); }
.ax-reveal-panel p { margin: 0 0 6px; }

/* ============================ checks (mrq) ============================ */
.ax-mrq-set, .ax-pick { border: none; margin: 0; padding: 0; min-inline-size: 0; }
.ax-mrq-q, .ax-pick-legend {
  font-weight: var(--fw-semibold, 600);
  color: var(--pt-text, #243240);
  margin-bottom: var(--sp-2, 8px);
  padding: 0;
}
.ax-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--pt-line, #e9ecef);
  border-radius: var(--ax-radius);
  margin-bottom: var(--sp-2, 8px);
  cursor: pointer;
  background: var(--pt-card, #ffffff);
}
.ax-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ax-check-box {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  border: 2px solid var(--pt-muted, #6c757d);
  border-radius: 5px;
  position: relative;
}
.ax-check input:checked + .ax-check-box { background: var(--pt-orange, #fd7e14); border-color: var(--pt-orange, #fd7e14); }
.ax-check input:checked + .ax-check-box::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.ax-check input:focus-visible + .ax-check-box { outline: 3px solid var(--pt-orange, #fd7e14); outline-offset: 2px; }
.ax-check-text { color: var(--pt-text, #243240); }
.ax-check.is-correct { border-color: var(--pt-green, #28a745); background: rgba(40, 167, 69, 0.08); }
.ax-check.is-wrong   { border-color: var(--pt-red, #b04632);   background: rgba(176, 70, 50, 0.08); }
.ax-check.is-missed  { border-color: var(--pt-orange, #fd7e14); background: var(--pt-orange-soft, #fff5e9); }

/* ============================ decision tool ============================ */
.ax-scenario {
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  border: 1px solid var(--pt-line, #e9ecef);
  border-left: 3px solid var(--pt-orange, #fd7e14);
  border-radius: var(--ax-radius);
  background: var(--pt-card, #ffffff);
  margin-bottom: var(--sp-3, 12px);
}
.ax-scenario-tag {
  display: inline-block;
  font-size: var(--fs-xs, 0.74rem); text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 700; color: var(--pt-orange, #fd7e14); margin-bottom: 4px;
}
.ax-scenario p { margin: 0; }
.ax-pickchips { display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px); }
.ax-pickchip { position: relative; cursor: pointer; }
.ax-pickchip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ax-pickchip-face {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--pt-line, #e9ecef);
  border-radius: var(--radius-pill, 999px);
  font-weight: var(--fw-semibold, 600);
  color: var(--pt-text, #243240);
  background: var(--pt-card, #ffffff);
}
.ax-pickchip-tick { opacity: 0; font-size: 0.8em; }
.ax-pickchip input:checked + .ax-pickchip-face {
  background: var(--pt-orange, #fd7e14); border-color: var(--pt-orange, #fd7e14); color: #fff;
}
.ax-pickchip input:checked + .ax-pickchip-face .ax-pickchip-tick { opacity: 1; }
.ax-pickchip input:focus-visible + .ax-pickchip-face { outline: 3px solid var(--pt-orange, #fd7e14); outline-offset: 2px; }
.ax-pickchip.is-correct .ax-pickchip-face { box-shadow: inset 0 0 0 2px var(--pt-green, #28a745); }
.ax-pickchip.is-wrong   .ax-pickchip-face { box-shadow: inset 0 0 0 2px var(--pt-red, #b04632); }
.ax-pickchip.is-missed  .ax-pickchip-face { box-shadow: inset 0 0 0 2px var(--pt-orange, #fd7e14); }

/* ============================ bias simulator ============================ */
.ax-bias-controls { margin-bottom: var(--sp-4, 16px); }
.ax-slider-label { display: block; font-weight: var(--fw-semibold, 600); margin-bottom: 6px; }
.ax-slider-row { display: flex; align-items: center; gap: var(--sp-3, 12px); }
.ax-slider { flex: 1; accent-color: var(--pt-orange, #fd7e14); height: 26px; }
.ax-slider-out {
  flex: none; min-width: 3.2em; text-align: right;
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pt-orange, #fd7e14);
}
.ax-bias-bars { display: flex; flex-direction: column; gap: 10px; }
.ax-bias-row { display: grid; grid-template-columns: minmax(120px, 38%) 1fr auto; align-items: center; gap: var(--sp-3, 12px); }
.ax-bias-name { font-size: var(--fs-sm, 0.82rem); color: var(--pt-muted, #6c757d); }
.ax-bias-track {
  height: 18px; border-radius: var(--radius-pill, 999px);
  background: var(--pt-line, #e9ecef); overflow: hidden;
}
.ax-bias-fill { display: block; height: 100%; border-radius: var(--radius-pill, 999px); }
.ax-animated .ax-bias-fill { transition: width 0.22s ease; }
.ax-fill-a { background: var(--pt-navy-light, #1a4775); }
.ax-fill-b { background: var(--pt-orange, #fd7e14); }
.ax-bias-val { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3em; text-align: right; }
.ax-bias-verdict {
  margin-top: var(--sp-4, 16px);
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  border-radius: var(--ax-radius);
  border: 1px solid var(--pt-line, #e9ecef);
  font-size: var(--fs-sm, 0.82rem);
}
.ax-bias-verdict.is-ok { border-color: var(--pt-green, #28a745); background: rgba(40, 167, 69, 0.08); }
.ax-bias-verdict.is-breach { border-color: var(--pt-red, #b04632); background: rgba(176, 70, 50, 0.10); }
.ax-bias-ratio { font-weight: 700; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .ax-animated .ax-bias-fill { transition: none; }
  .ax-btn { transition: none; }
}

@media (max-width: 560px) {
  .ax-bias-row { grid-template-columns: 1fr; gap: 4px; }
  .ax-bias-val { text-align: left; }
}

/* ============================ hotspots (hub) ============================ */
.ax-hub-map { text-align: center; margin-bottom: var(--sp-4, 16px); }
.ax-hub-centre {
  display: inline-block; margin-bottom: 14px;
  padding: 10px 22px; border-radius: var(--radius-pill, 999px);
  background: var(--pt-navy, #0a2540); color: #fff; font-weight: 700;
}
.ax-hub-nodes { display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px); justify-content: center; }
.ax-hub-node {
  font: inherit; font-weight: var(--fw-semibold, 600);
  padding: 9px 16px; border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--pt-line, #e9ecef); background: var(--pt-card, #fff);
  color: var(--pt-text, #243240); cursor: pointer; transition: border-color .15s, background .15s;
}
.ax-hub-node:hover { border-color: var(--pt-orange, #fd7e14); }
.ax-hub-node.is-active { background: var(--pt-orange, #fd7e14); border-color: var(--pt-orange, #fd7e14); color: #fff; }
.ax-hub-detail {
  padding: var(--sp-3, 12px) var(--sp-4, 16px); border: 1px solid var(--pt-line, #e9ecef);
  border-radius: var(--ax-radius); min-height: 64px; background: var(--pt-card, #fff);
}
.ax-hub-hint { margin: 0; color: var(--pt-muted, #6c757d); }
.ax-hub-detail-title { font-weight: 700; color: var(--pt-orange, #fd7e14); margin-bottom: 4px; }
.ax-hub-detail p { margin: 0; }

/* ============================ ATRS explorer ============================ */
.ax-atrs-card { border: 1px solid var(--pt-line, #e9ecef); border-radius: var(--ax-radius); overflow: hidden; background: var(--pt-card, #fff); }
.ax-atrs-card-head { padding: var(--sp-3, 12px) var(--sp-4, 16px); border-bottom: 1px solid var(--pt-line, #e9ecef); }
.ax-atrs-badge {
  display: inline-block; font-size: var(--fs-xs, 0.74rem); text-transform: uppercase; letter-spacing: .05em;
  font-weight: 800; color: #fff; background: var(--pt-navy, #0a2540); padding: 2px 8px; border-radius: 4px;
}
.ax-atrs-name { font-weight: 700; font-size: var(--fs-h3, 1.15rem); color: var(--pt-text, #243240); margin-top: 6px; }
.ax-atrs-owner { font-size: var(--fs-sm, 0.82rem); color: var(--pt-muted, #6c757d); }
.ax-atrs-sec { border-top: 1px solid var(--pt-line, #e9ecef); }
.ax-atrs-sec:first-of-type { border-top: none; }
.ax-atrs-sec-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: transparent; border: none; font: inherit; font-weight: var(--fw-semibold, 600);
  color: var(--pt-text, #243240); text-align: left; padding: 12px 16px; cursor: pointer;
}
.ax-atrs-sec-btn[aria-expanded="true"] { color: var(--pt-orange, #fd7e14); }
.ax-atrs-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm, 0.86rem); }
.ax-atrs-table th, .ax-atrs-table td { text-align: left; vertical-align: top; padding: 7px 16px; border-top: 1px solid var(--pt-line, #e9ecef); }
.ax-atrs-table th { width: 38%; color: var(--pt-muted, #6c757d); font-weight: 600; }
.ax-atrs-table td { color: var(--pt-text, #243240); }
.ax-atrs-note {
  margin: 4px 16px 14px; padding: 9px 12px; font-size: var(--fs-sm, 0.82rem);
  border-left: 3px solid var(--pt-orange, #fd7e14); background: var(--pt-orange-soft, #fff5e9); border-radius: 0 6px 6px 0;
}

/* ============================ sjBranch ============================ */
.ax-sj-role {
  font-size: var(--fs-sm, 0.82rem); color: var(--pt-muted, #6c757d);
  padding: 8px 12px; border-radius: 6px; background: var(--pt-line, #e9ecef); margin-bottom: 10px;
}
.ax-sj-progress { font-size: var(--fs-xs, 0.74rem); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--pt-orange, #fd7e14); margin-bottom: 6px; }
.ax-sj-scenario { padding: var(--sp-3, 12px) var(--sp-4, 16px); border: 1px solid var(--pt-line, #e9ecef); border-radius: var(--ax-radius); background: var(--pt-card, #fff); margin-bottom: 12px; }
.ax-sj-scenario p { margin: 0; }
.ax-sj-choices { display: flex; flex-direction: column; gap: var(--sp-2, 8px); }
.ax-sj-choice {
  font: inherit; text-align: left; padding: 12px 16px; border-radius: var(--ax-radius);
  border: 1px solid var(--pt-line, #e9ecef); background: var(--pt-card, #fff); color: var(--pt-text, #243240); cursor: pointer;
}
.ax-sj-choice:hover:not(:disabled) { border-color: var(--pt-orange, #fd7e14); }
.ax-sj-choice:disabled { cursor: default; opacity: 0.9; }
.ax-sj-choice.is-good { border-color: var(--pt-green, #28a745); background: rgba(40,167,69,.10); }
.ax-sj-choice.is-bad { border-color: var(--pt-red, #b04632); background: rgba(176,70,50,.10); }
.ax-sj-feedback { margin-top: 12px; padding: var(--sp-3, 12px) var(--sp-4, 16px); border-radius: var(--ax-radius); border: 1px solid var(--pt-line, #e9ecef); }
.ax-sj-feedback.is-ok { border-color: var(--pt-green, #28a745); background: rgba(40,167,69,.07); }
.ax-sj-feedback.is-no { border-color: var(--pt-red, #b04632); background: rgba(176,70,50,.07); }
.ax-sj-feedback p { margin: 0 0 10px; }
.ax-sj-summary { text-align: center; padding: var(--sp-4, 16px); border: 1px solid var(--pt-line, #e9ecef); border-radius: var(--ax-radius); background: var(--pt-card, #fff); }
.ax-sj-score { font-size: 1.4rem; font-weight: 800; color: var(--pt-orange, #fd7e14); margin-bottom: 6px; }

/* ============================ liveVerify ============================ */
.ax-live-chat { display: flex; gap: 10px; align-items: flex-start; margin-bottom: var(--sp-3, 12px); }
.ax-live-avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pt-navy, #0a2540); color: #fff; font-size: 1.1rem;
}
.ax-live-bubble { flex: 1; border: 1px solid var(--pt-line, #e9ecef); border-radius: 4px 14px 14px 14px; padding: 12px 16px; background: var(--pt-card, #fff); }
.ax-live-q { font-size: var(--fs-sm, 0.86rem); color: var(--pt-muted, #6c757d); margin-bottom: 6px; }
.ax-live-a { font-weight: 700; color: var(--pt-text, #243240); }
.ax-live-confident { font-weight: 400; font-size: var(--fs-sm, 0.82rem); color: var(--pt-muted, #6c757d); }
.ax-live-result { margin-top: var(--sp-3, 12px); padding: var(--sp-3, 12px) var(--sp-4, 16px); border-radius: var(--ax-radius); border: 1px solid var(--pt-line, #e9ecef); }
.ax-live-result.is-live { border-color: var(--pt-green, #28a745); background: rgba(40,167,69,.07); }
.ax-live-result.is-warn { border-color: var(--pt-orange, #fd7e14); background: var(--pt-orange-soft, #fff5e9); }
.ax-live-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ax-live-tag { font-size: var(--fs-xs, 0.72rem); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 4px; color: #fff; }
.ax-tag-ai { background: var(--pt-muted, #6c757d); }
.ax-tag-live { background: var(--pt-green, #28a745); }
.ax-live-result p { margin: 8px 0 0; font-size: var(--fs-sm, 0.86rem); }

/* ============================ match ============================ */
.ax-match-grid { display: flex; flex-direction: column; gap: var(--sp-2, 8px); }
.ax-match-row {
  display: grid; grid-template-columns: 1fr auto 24px; align-items: center; gap: var(--sp-3, 12px);
  padding: 8px 12px; border: 1px solid var(--pt-line, #e9ecef); border-radius: var(--ax-radius); background: var(--pt-card, #fff);
}
.ax-match-left { font-weight: var(--fw-semibold, 600); color: var(--pt-text, #243240); }
.ax-match-sel {
  font: inherit; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--pt-line, #e9ecef);
  background: var(--pt-card, #fff); color: var(--pt-text, #243240); min-width: 160px;
}
.ax-match-mark { font-weight: 800; text-align: center; }
.ax-match-row.is-correct { border-color: var(--pt-green, #28a745); }
.ax-match-row.is-correct .ax-match-mark { color: var(--pt-green, #28a745); }
.ax-match-row.is-wrong { border-color: var(--pt-red, #b04632); }
.ax-match-row.is-wrong .ax-match-mark { color: var(--pt-red, #b04632); }

@media (max-width: 560px) {
  .ax-match-row { grid-template-columns: 1fr 24px; }
  .ax-match-sel { grid-column: 1 / 2; min-width: 0; width: 100%; }
}