/* Skill trainers (partials/landing_trainers.html). Halo world: one chromatic
   family — iris #5D51B4, aubergine #2B2644, lavender #C9C2E8, panel #EFEDF6 —
   plus black and white. No signal colours, no uppercase. */
.tr-grid { display: grid; gap: 1rem; }
@media (min-width: 1024px) { .tr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tr-card { display: flex; flex-direction: column; min-width: 0; padding: 1.5rem; border-radius: 1.25rem; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); }
.tr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.tr-head h3 { color: #000; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
.tr-badge { flex: none; padding: 0.2rem 0.65rem; border-radius: 999px; background: #c9c2e8; color: #2b2644; font-size: 0.75rem; font-weight: 500; }
.tr-stage { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 17rem; margin-top: 1.1rem; padding: 1.25rem; border-radius: 1rem; background: #efedf6; overflow: hidden; }
.tr-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.tr-say { min-height: 2.9em; color: rgba(0, 0, 0, 0.66); font-size: 0.9375rem; line-height: 1.45; }
.tr-link { flex: none; padding: 0.35rem 0; color: #5d51b4; font-size: 0.875rem; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(93, 81, 180, 0.35); cursor: pointer; }
.tr-link:hover { text-decoration-color: #5d51b4; }
.tr-card :focus-visible { outline: 2px solid #5d51b4; outline-offset: 2px; }

.tr-controls { display: grid; gap: 0.75rem; margin-top: 1rem; }
.tr-range { display: grid; gap: 0.35rem; font-size: 0.875rem; color: rgba(0, 0, 0, 0.6); }
.tr-range b { color: #000; font-weight: 600; font-variant-numeric: tabular-nums; }
.tr-range input { width: 100%; accent-color: #5d51b4; }
.tr-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tr-chip { min-height: 2.1rem; padding: 0 0.85rem; border: 1px solid rgba(43, 38, 68, 0.14); border-radius: 999px; background: #fff; color: #000; font-size: 0.8125rem; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
.tr-chip:hover { border-color: rgba(93, 81, 180, 0.5); }
.tr-chip[aria-pressed="true"] { border-color: #2b2644; background: #2b2644; color: #fff; }
.tr-toggle { display: inline-flex; flex: none; align-items: center; gap: 0.45rem; color: rgba(0, 0, 0, 0.6); font-size: 0.8125rem; cursor: pointer; }
.tr-toggle input { accent-color: #5d51b4; }

/* CPR */
.tr-cpr { align-items: center; justify-content: space-between; gap: 0.9rem; }
.tr-cpr-meter { width: 100%; }
.tr-cpr-scale { position: relative; height: 0.5rem; border-radius: 999px; background: #fff; }
.tr-cpr-band { position: absolute; top: 0; bottom: 0; left: 40%; width: 20%; border-radius: 999px; background: #c9c2e8; }
.tr-cpr-needle { position: absolute; top: -0.35rem; left: 0; width: 0.25rem; height: 1.2rem; margin-left: -0.125rem; border-radius: 2px; background: #2b2644; opacity: 0; transition: left 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 200ms; }
.tr-cpr-needle.is-on { opacity: 1; }
.tr-cpr-ticks { position: relative; height: 1.1rem; margin-top: 0.35rem; color: rgba(0, 0, 0, 0.45); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.tr-cpr-ticks span { position: absolute; transform: translateX(-50%); }
.tr-cpr-ticks span:nth-child(1) { left: 0; transform: none; }
.tr-cpr-ticks span:nth-child(2) { left: 40%; }
.tr-cpr-ticks span:nth-child(3) { left: 60%; }
.tr-cpr-ticks span:nth-child(4) { right: 0; transform: none; }
.tr-cpr-read { text-align: center; }
.tr-cpr-read b { display: block; color: #000; font-size: 2.25rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.tr-cpr-read span { color: rgba(0, 0, 0, 0.5); font-size: 0.8125rem; }
.tr-cpr-pad { position: relative; display: grid; place-items: center; width: 7.5rem; height: 7.5rem; border-radius: 50%; background: #2b2644; color: #fff; font-size: 0.8125rem; font-weight: 500; line-height: 1.2; text-align: center; cursor: pointer; touch-action: manipulation; user-select: none; box-shadow: 0 10px 28px -12px rgba(43, 38, 68, 0.6); }
.tr-cpr-label { max-width: 5.5rem; }
.tr-cpr-pad.is-hit { animation: tr-press 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.tr-cpr-ring { position: absolute; inset: -0.5rem; border: 2px solid #8f84c9; border-radius: 50%; opacity: 0; pointer-events: none; }
.tr-cpr-ring.is-hit { animation: tr-ring 420ms ease-out; }
@keyframes tr-press { 40% { transform: scale(0.93); } }
@keyframes tr-ring { 0% { opacity: 0.9; transform: scale(0.94); } 100% { opacity: 0; transform: scale(1.08); } }
.tr-cpr-count { color: rgba(0, 0, 0, 0.55); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.tr-cpr-count span { color: #000; font-weight: 600; }

/* Stopping distance */
.tr-brake { justify-content: center; gap: 1rem; }
.tr-road { width: 100%; height: auto; overflow: visible; }
.tr-road-bed { fill: #2b2644; }
.tr-road-mid { stroke: #8f84c9; stroke-width: 2; stroke-dasharray: 14 12; }
.tr-zebra rect { fill: #efedf6; }
.tr-seg-react { fill: #c9c2e8; }
.tr-seg-stop { fill: #5d51b4; }
.tr-ruler line { stroke: rgba(0, 0, 0, 0.3); stroke-width: 1; }
.tr-ruler text { fill: rgba(0, 0, 0, 0.5); font-size: 13px; font-variant-numeric: tabular-nums; }
.tr-car { fill: #fff; }
.tr-car-glass { fill: #c9c2e8; }
.tr-brake-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.tr-brake-sum span { padding: 0.55rem 0.7rem; border-radius: 0.65rem; background: #fff; color: rgba(0, 0, 0, 0.55); font-size: 0.75rem; }
.tr-brake-sum b { display: block; color: #000; font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tr-brake-sum span:nth-child(3) b { color: #5d51b4; }
.is-short .tr-brake-sum span:nth-child(3) { background: #2b2644; color: rgba(255, 255, 255, 0.65); }
.is-short .tr-brake-sum span:nth-child(3) b { color: #fff; }

/* FEFO shelf */
.tr-fefo { gap: 0.9rem; }
.tr-fefo-task { display: flex; justify-content: space-between; gap: 1rem; color: rgba(0, 0, 0, 0.6); font-size: 0.875rem; }
.tr-fefo-task b { color: #000; font-weight: 600; }
.tr-shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem 0.5rem; padding: 0.75rem 0.6rem 0.5rem; border-bottom: 6px solid #2b2644; background: linear-gradient(#efedf6 calc(50% - 3px), #2b2644 calc(50% - 3px), #2b2644 calc(50% + 3px), #efedf6 calc(50% + 3px)); }
.tr-pack { display: flex; flex-direction: column; align-items: center; padding: 0; cursor: pointer; transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 200ms; }
.tr-pack:hover:not(:disabled) { transform: translateY(-3px); }
.tr-pack-cap { width: 58%; height: 0.75rem; background: #fff; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.tr-pack-body { display: flex; flex-direction: column; justify-content: space-between; width: 58%; min-width: 2.6rem; height: 3.6rem; padding: 0.35rem 0 0.3rem; border-radius: 0.2rem; background: #fff; box-shadow: inset 0 0 0 1px rgba(43, 38, 68, 0.12); }
.tr-pack-band { height: 0.45rem; background: #c9c2e8; }
.tr-pack-date { color: #2b2644; font-size: 0.6875rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: center; }
.tr-pack.is-picked { opacity: 0; transform: translateY(-1rem); }
.tr-pack.is-removed { opacity: 0.22; transform: translateY(0.3rem); }
.tr-pack.is-hint .tr-pack-body { animation: tr-hint 900ms ease-out; }
@keyframes tr-hint { 0%, 60% { box-shadow: inset 0 0 0 2px #5d51b4, 0 0 0 4px rgba(93, 81, 180, 0.25); } 100% { box-shadow: inset 0 0 0 1px rgba(43, 38, 68, 0.12); } }
.tr-fefo-basket { color: rgba(0, 0, 0, 0.55); font-size: 0.875rem; }
.tr-fefo-basket span { color: #000; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Sales talk */
.tr-talk { gap: 0.75rem; }
.tr-trust { display: flex; align-items: center; gap: 0.75rem; color: rgba(0, 0, 0, 0.55); font-size: 0.8125rem; }
.tr-trust-bar { flex: 1; height: 0.45rem; border-radius: 999px; background: #fff; overflow: hidden; }
.tr-trust-bar i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: 999px; background: #5d51b4; transition: width 500ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.tr-log { display: flex; flex: 1 1 0; flex-direction: column; gap: 0.5rem; min-height: 9.5rem; overflow-y: auto; scrollbar-width: thin; }
.tr-msg { max-width: 85%; padding: 0.5rem 0.75rem; border-radius: 0.9rem; font-size: 0.875rem; line-height: 1.4; animation: tr-in 300ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.tr-msg.is-client { align-self: flex-start; border-bottom-left-radius: 0.25rem; background: #fff; color: #000; }
.tr-msg.is-me { align-self: flex-end; border-bottom-right-radius: 0.25rem; background: #2b2644; color: #fff; }
@keyframes tr-in { from { opacity: 0; transform: translateY(0.4rem); } }
.tr-replies { display: grid; gap: 0.4rem; margin-top: auto; }
.tr-reply { padding: 0.5rem 0.75rem; border: 1px solid rgba(43, 38, 68, 0.14); border-radius: 0.75rem; background: rgba(255, 255, 255, 0.7); color: #000; font-size: 0.8125rem; line-height: 1.35; text-align: left; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease; }
.tr-reply:hover { border-color: #5d51b4; background: #fff; }

@media (max-width: 560px) {
  .tr-card { padding: 1.1rem; }
  .tr-stage { padding: 1rem; }
  .tr-foot { flex-direction: column; gap: 0.5rem; }
  .tr-brake-sum b { font-size: 1rem; }
  .tr-stage.tr-brake { min-height: 0; }
  .tr-ruler text { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-cpr-pad.is-hit, .tr-cpr-ring.is-hit, .tr-msg, .tr-pack.is-hint .tr-pack-body { animation: none; }
  .tr-cpr-needle, .tr-trust-bar i, .tr-pack, .tr-chip, .tr-reply { transition: none; }
}