/*
 * Train look — Trainer Pro ("trainers" group: surfaces trainers, trainer, trainer-desk). Loaded after train.css and
 * Trainer Pro's own tp.css (train-look/train-look.php). Every selector is scoped to body.sh-tr. Presentation only: no
 * token of the shared base is redefined, nothing here changes a form, a field, a route or a number.
 * Sections:
 *   1. Shared: dark bands on the track, panels, focus
 *   2. Directory: masthead lanes + counts, the filter rail, the trainer list, the trust ledger, for trainers
 *   3. Trainer profile: hero + at a glance, on-this-page bar, about, qualifications, services, contact, trust
 *   4. Dashboard: masthead, tabs, overview, panels, clients, calendar, apply
 *   5. Review desk
 *   6. Motion
 */

/* 1. Shared ------------------------------------------------------------------------------------------------------ */
/* Dark bands (directory "For trainers", profile "Contact") become the Train track: navy, lane lines, a blue glow. */
body.sh-tr.stp .sl-band--night {
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(56% 80% at 94% 0%, rgba(43, 143, 214, .3), rgba(43, 143, 214, 0) 70%),
		radial-gradient(40% 60% at 0% 100%, rgba(63, 179, 157, .14), rgba(63, 179, 157, 0) 70%),
		linear-gradient(160deg, #0b1f32 0%, #0f2c47 60%, #123b5f 100%);
}
body.sh-tr.stp .sl-band--night::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: repeating-linear-gradient(104deg, rgba(255, 255, 255, .05) 0 1px, rgba(255, 255, 255, 0) 1px 72px);
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 8%, #000 70%);
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 8%, #000 70%);
	pointer-events: none;
}
body.sh-tr.stp .sl-band--night::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #2b8fd6, #6ec4e8 60%, #3fb39d); }
body.sh-tr.stp .stp-night-lead { color: var(--tr-copy-d); }
body.sh-tr.stp .stp-can-night li { color: #e6f0f8; }
body.sh-tr.stp :is(.stp-eyebrow-night, .stp-can-night .sl-i, .stp-btn-night .sl-i) { color: var(--tr-sky); }
body.sh-tr.stp .stp-profile .sl-eyebrow.stp-eyebrow-night { color: var(--tr-sky); }

/* Panels: hairlines instead of boxed cards with heavy shadows. */
body.sh-tr.stp .stp-panel { border: 0; border-radius: var(--tr-radius); box-shadow: 0 0 0 1px var(--tr-rule), 0 20px 40px -36px rgba(12, 34, 54, .45); }
body.sh-tr.stp .stp-empty { border: 0; border-radius: var(--tr-radius); background: #fff; box-shadow: 0 0 0 1px var(--tr-rule); }
body.sh-tr.stp .stp-empty .sl-node { --sl-ns: 46px; }
body.sh-tr.stp .stp-empty .sl-h3 { font-size: 1.3rem; }
body.sh-tr.stp .stp-empty-line { margin: 6px 0 14px; color: var(--sl-muted); }

/* A short uppercase label before a fact (cards and the profile's "at a glance"). */
body.sh-tr .stp-fact-k { display: block; margin-bottom: 2px; font: 800 12px/1.3 var(--sl-text); letter-spacing: .12em; text-transform: uppercase; color: var(--sl-muted); }

/* 2. Directory (body.sh-tr-trainers) ----------------------------------------------------------------------------- */
/* Masthead: real counts under the search. */
body.sh-tr .stp-dir-stats { flex-wrap: nowrap; margin-top: 10px; }
body.sh-tr .stp-dir-stats li { align-content: start; min-width: 0; }
body.sh-tr .stp-dir-stats span { max-width: 20ch; line-height: 1.35; }
body.sh-tr .sl-mast--train .stp-dir-stats b { font-size: clamp(1.7rem, 1.3rem + 1.1vw, 2.3rem); }
@media (max-width: 479px) { body.sh-tr .stp-dir-stats li { padding-inline: 14px; } body.sh-tr .stp-dir-stats li:first-child { padding-left: 0; } }

/* Masthead stage: a staggered start, one listed trainer per lane (decorative, aria-hidden). */
body.sh-tr .stp-dir-stage { min-height: 0; padding: 8px 0; }
body.sh-tr .stp-lanes { position: relative; display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(143, 208, 255, .24); }
body.sh-tr .stp-lanes::before { content: ""; position: absolute; left: 0; top: -10px; bottom: -10px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #2b8fd6, #6ec4e8 60%, #3fb39d); }
body.sh-tr .stp-lanes li { position: relative; display: flex; align-items: center; min-height: 72px; padding-left: calc(18px + var(--d, 0) * 9%); border-bottom: 1px solid rgba(143, 208, 255, .24); }
/* the lane's own short start mark, staggered with the runner */
body.sh-tr .stp-lanes li::before { content: ""; position: absolute; left: calc(4px + var(--d, 0) * 9%); top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: rgba(143, 208, 255, .45); }
body.sh-tr .stp-lane-runner { display: inline-flex; align-items: center; gap: 12px; padding: 6px 18px 6px 6px; border-radius: 999px; background: rgba(11, 31, 50, .86); box-shadow: inset 0 0 0 1px rgba(143, 208, 255, .3), 0 14px 26px -20px rgba(0, 0, 0, .9); }
body.sh-tr .stp-avatar--lane { --stp-av: 48px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .92), 0 12px 24px -14px rgba(0, 0, 0, .8); }
body.sh-tr .stp-lane-t { display: grid; gap: 3px; }
body.sh-tr .stp-lane-t b { font: 800 16px/1.1 var(--sl-display); letter-spacing: -.01em; color: #fff; }
body.sh-tr .stp-lane-t small { font: 600 13px/1.2 var(--sl-text); color: var(--tr-copy-d); }
body.sh-tr .sl-mast--train .stp-cast-empty .sl-node { background: rgba(255, 255, 255, .08); }

/* One band for filters and results: a side rail of filters on wide screens, the list beside it. */
body.sh-tr .stp-dir-body { padding-block: clamp(28px, 4vw, 56px) clamp(48px, 6vw, 88px); background: var(--tr-chalk); border-bottom: 1px solid var(--tr-rule); }
body.sh-tr .stp-dir-layout { display: grid; gap: clamp(20px, 3vw, 36px); grid-template-columns: minmax(0, 1fr); align-items: start; }
body.sh-tr .stp-dir-main { min-width: 0; }
body.sh-tr.stp .stp-filters-band { padding: 0; }
body.sh-tr .stp-dir-rail { display: grid; gap: 14px; min-width: 0; }
body.sh-tr.stp .stp-filters { gap: 16px; padding: 18px; border: 0; border-radius: var(--tr-radius); background: #fff; box-shadow: 0 0 0 1px var(--tr-rule), 0 24px 44px -36px rgba(12, 34, 54, .55); }
body.sh-tr .stp-rail-h { display: flex; align-items: center; gap: 8px; margin: 0; padding-bottom: 12px; border-bottom: 2px solid var(--sl-ink); font: 800 12px/1.2 var(--sl-text); letter-spacing: .14em; text-transform: uppercase; color: var(--sl-ink); }
body.sh-tr .stp-rail-h .sl-i { width: 18px; height: 18px; color: var(--tr-ink); }
/* where: one segmented control */
body.sh-tr .stp-where .stp-chip-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; max-width: 440px; padding: 4px; border-radius: 999px; background: var(--tr-chalk); box-shadow: inset 0 0 0 1px var(--tr-rule); }
body.sh-tr .stp-where .sl-chip { display: flex; }
body.sh-tr .stp-where .sl-chip > span { justify-content: center; width: 100%; min-height: 44px; padding: 0 8px; border: 0; background: transparent; font-size: 14.5px; }
body.sh-tr.stp .stp-where .sl-chip input:checked + span { background: var(--tr-ink); color: #fff; box-shadow: 0 8px 16px -10px rgba(27, 111, 174, .9); }
/* selects: uppercase labels, quiet fields with a Train chevron */
body.sh-tr .stp-filters .stp-filter-grid { gap: 12px 14px; }
body.sh-tr .stp-filters .stp-field > label { font: 800 12px/1.2 var(--sl-text); letter-spacing: .12em; text-transform: uppercase; color: var(--sl-muted); }
body.sh-tr.stp .stp-filters .stp-field select {
	min-height: 46px; padding: 0 38px 0 14px; border: 1.5px solid var(--tr-rule); border-radius: 14px; color: var(--sl-ink); font: 650 15px/1.2 var(--sl-text);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231b6fae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
	-webkit-appearance: none; appearance: none;
}
body.sh-tr.stp .stp-filters .stp-field select:hover { border-color: #b9d3e6; }
body.sh-tr.stp .stp-filters .stp-field select:focus { outline: none; border-color: var(--tr-blue); box-shadow: 0 0 0 4px rgba(43, 143, 214, .18); }
body.sh-tr.stp .stp-filters .stp-field select:focus-visible { outline: 2px solid var(--sl-ink); outline-offset: 2px; }
body.sh-tr.stp .stp-filter-foot { padding-top: 14px; border-top: 1px solid var(--tr-rule); }
body.sh-tr.stp .stp-filter-foot .sl-chip input:checked + span { background: var(--sl-teal); border-color: var(--sl-teal); }
body.sh-tr .stp-dir-order { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 0 6px; font-size: 13.5px; line-height: 1.45; color: var(--sl-muted); }
body.sh-tr .stp-dir-order .sl-i { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--tr-ink); }
@media (min-width: 1024px) {
	body.sh-tr .stp-dir-layout { grid-template-columns: 296px minmax(0, 1fr); }
	body.sh-tr .stp-dir-rail { position: sticky; top: 16px; }
	body.sh-tr .stp-dir-rail .stp-where .stp-chip-row { max-width: none; }
	body.sh-tr .stp-dir-rail .stp-filter-grid { grid-template-columns: minmax(0, 1fr); }
	body.sh-tr.stp .stp-dir-rail .stp-filter-foot { display: grid; gap: 12px; justify-content: stretch; }
	body.sh-tr.stp .stp-dir-rail .stp-filter-foot .sl-chip { display: flex; width: 100%; }
	body.sh-tr.stp .stp-dir-rail .stp-filter-foot .sl-chip > span { width: 100%; white-space: normal; }
	body.sh-tr .stp-dir-rail .stp-filter-foot .sl-actions { display: grid; gap: 8px; }
	body.sh-tr .stp-dir-rail .stp-filter-foot .sl-btn { width: 100%; }
}

/* The list: a count in big numerals, "Showing" chips, then one trainer per row. */
body.sh-tr.stp .stp-results { gap: 16px; }
body.sh-tr.stp .stp-count { font-size: 15px; color: var(--sl-copy); }
body.sh-tr.stp .stp-count strong { margin-right: 2px; font: 800 1.5rem/1 var(--sl-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--sl-ink); }
body.sh-tr.stp .stp-active-chip { min-height: 44px; background: #fff; border-color: var(--tr-rule); }
body.sh-tr.stp .stp-active-chip:hover { border-color: var(--tr-ink); }
body.sh-tr.stp .stp-active-chip:focus-visible { outline: 2px solid var(--sl-ink); outline-offset: 2px; }
body.sh-tr.stp .stp-x { background: var(--tr-wash); color: var(--tr-ink); }
body.sh-tr.stp .stp-results .stp-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }

/* the card itself, everywhere it appears (directory, dashboard preview) */
body.sh-tr.stp .stp-card { border: 0; border-radius: var(--tr-radius); box-shadow: 0 0 0 1px var(--tr-rule), 0 22px 40px -36px rgba(12, 34, 54, .5); }
body.sh-tr.stp .stp-card:hover { box-shadow: 0 0 0 1px #b9d3e6, 0 26px 44px -30px rgba(12, 34, 54, .55); }
body.sh-tr.stp .stp-card-name { font-size: 1.22rem; letter-spacing: -.015em; }
body.sh-tr.stp .stp-card-biz { font-size: 12.5px; letter-spacing: .1em; }
body.sh-tr.stp .stp-card-line { font-size: 15px; }
body.sh-tr.stp .stp-card-facts li { font-size: 14.5px; color: var(--sl-copy); }
body.sh-tr .stp-unchecked { display: inline-flex; align-items: center; gap: 6px; font: 650 13px/1.3 var(--sl-text); color: var(--sl-muted); }
body.sh-tr .stp-unchecked .sl-i { width: 16px; height: 16px; color: var(--sl-muted); }
body.sh-tr .stp-card-go-t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* compact cards (phones, the dashboard preview): the fact labels are read, not shown */
body.sh-tr .stp-grid--one .stp-fact-k { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 767px) {
	body.sh-tr .stp-results .stp-fact-k { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	/* the phone card keeps where and specialities (the facts a visitor scans for first) */
	body.sh-tr.stp .stp-results .stp-grid:not(.stp-grid--one) .stp-card .stp-card-facts li.stp-fact--spec { display: grid; }
	body.sh-tr.stp .stp-results .stp-grid:not(.stp-grid--one) .stp-card { padding: 16px 16px 4px; }
	body.sh-tr.stp .stp-results .stp-card-foot { min-height: 48px; }
}
/* Wide: a row per trainer. Identity on the left (accent lane, avatar, name, business, line), the facts with labels in
   the middle, the truth labels and "View profile" along the bottom. The whole row is still one link (the name). */
@media (min-width: 768px) {
	body.sh-tr.stp .stp-results .stp-card {
		grid-template-columns: 80px minmax(0, .95fr) minmax(0, 1.1fr);
		grid-template-rows: auto auto 1fr auto;
		grid-template-areas: "av name facts" "av biz facts" "av line facts" "av foot facts";
		column-gap: 22px;
		row-gap: 0;
		padding: 22px 24px 20px 30px;
	}
	body.sh-tr.stp .stp-results .stp-card::before { inset: 0 auto 0 0; width: 6px; height: auto; }
	body.sh-tr.stp .stp-results .stp-card-top { grid-area: av; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; margin: 0; }
	body.sh-tr.stp .stp-results .stp-card-name { grid-area: name; align-self: start; }
	body.sh-tr.stp .stp-results .stp-card-biz { grid-area: biz; margin: 6px 0 0; }
	body.sh-tr.stp .stp-results .stp-card-line { grid-area: line; margin: 8px 0 0; max-width: 46ch; }
	body.sh-tr.stp .stp-results .stp-card-facts { grid-area: facts; gap: 12px; margin: 0; padding: 2px 0 4px 22px; border-left: 1px solid var(--tr-rule); align-self: start; }
	body.sh-tr.stp .stp-results .stp-card-foot { grid-area: foot; align-self: end; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--tr-rule); }
	body.sh-tr.stp .stp-results .stp-card-go { display: inline-flex; align-items: center; width: auto; height: 44px; gap: 8px; padding: 0 16px 0 18px; border-radius: 999px; font: 700 14.5px/1 var(--sl-text); white-space: nowrap; }
	body.sh-tr.stp .stp-results .stp-card-go-t { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
	body.sh-tr.stp .stp-results .stp-card-go .sl-i { width: 18px; height: 18px; }
}

/* The trust ledger: what Sneaky checked, what the trainer wrote, and what stays between you. */
body.sh-tr.stp .stp-how { background: #fff; }
body.sh-tr .stp-how-head { display: grid; gap: 12px; justify-items: start; max-width: 760px; margin-bottom: clamp(26px, 3.4vw, 44px); }
body.sh-tr .stp-ledger { display: grid; gap: 30px clamp(22px, 3vw, 44px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { body.sh-tr .stp-ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
body.sh-tr .stp-ledger-col { display: grid; align-content: start; gap: 16px; padding-top: 18px; border-top: 3px solid var(--sl-ink); }
body.sh-tr .stp-ledger-col:nth-child(1) { border-top-color: var(--sl-teal); }
body.sh-tr .stp-ledger-col:nth-child(2) { border-top-color: var(--tr-blue); }
body.sh-tr .stp-ledger-h { display: flex; align-items: center; gap: 12px; margin: 0; font: 800 1.2rem/1.2 var(--sl-display); letter-spacing: -.015em; color: var(--sl-ink); }
body.sh-tr .stp-ledger-h .sl-i { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--tr-wash); color: var(--tr-ink); }
body.sh-tr .stp-ledger-col:nth-child(1) .stp-ledger-h .sl-i { background: var(--sl-assess-wash); color: var(--sl-teal); }
body.sh-tr .stp-ledger-col:nth-child(3) .stp-ledger-h .sl-i { background: var(--tr-deep); color: var(--tr-sky); }
body.sh-tr .stp-ledger-col:nth-child(1) .sl-can .sl-i { color: var(--sl-teal); }
body.sh-tr .stp-ledger-col:nth-child(2) .sl-can .sl-i { color: var(--tr-ink); }
body.sh-tr .stp-ledger-col:nth-child(3) .sl-can .sl-i { color: var(--sl-ink); }

/* For trainers: the band's one action is the track's primary. */
body.sh-tr.stp .stp-for-trainers .stp-btn-night,
body.sh-tr.stp .stp-for-trainers .stp-btn-night:is(:hover, :focus, :visited, :active) { --sl-btn-bg: #1b6fae; --sl-btn-fg: #fff; --sl-btn-bd: transparent; --sl-btn-bg-on: #2b8fd6; --sl-btn-fg-on: #fff; --sl-btn-bd-on: transparent; --sl-btn-shadow: 0 16px 30px -18px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .22); }
body.sh-tr.stp .stp-for-trainers .stp-btn-night .sl-i { color: #fff; }
body.sh-tr.stp .stp-for-trainers .sl-can { padding: clamp(20px, 2.6vw, 28px); border-radius: var(--tr-radius); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(143, 208, 255, .2); }

/* 3. Trainer profile (body.sh-tr-trainer) ------------------------------------------------------------------------ */
body.sh-tr.stp .stp-hero { padding-bottom: clamp(28px, 3.6vw, 48px); }
/* the drawn cover's line runs in the trainer's own accent (their page, their colour) */
body.sh-tr.stp .stp-cover-line { stroke: var(--stp-a, var(--tr-blue)); stroke-opacity: .8; }
body.sh-tr.stp .stp-hero .sl-h1 { letter-spacing: -.04em; }
body.sh-tr .stp-glance { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 20px 22px; border-radius: var(--tr-radius); background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 1px var(--tr-rule), 0 24px 44px -36px rgba(12, 34, 54, .55); }
body.sh-tr .stp-glance-h { margin: 0; padding-bottom: 10px; border-bottom: 2px solid var(--stp-a, var(--tr-blue)); font: 800 12px/1.2 var(--sl-text); letter-spacing: .14em; text-transform: uppercase; color: var(--sl-ink); }
body.sh-tr .stp-glance .stp-hero-facts { gap: 0; }
body.sh-tr .stp-glance .stp-hero-facts li { padding: 10px 0; border-bottom: 1px solid var(--tr-rule); font-size: 15px; }
body.sh-tr .stp-glance .stp-hero-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
body.sh-tr .stp-glance .stp-hero-facts .sl-i { margin-top: 3px; }
body.sh-tr.stp .stp-marks .stp-checked { font-size: 14.5px; }
@media (min-width: 900px) and (max-width: 1099px) { body.sh-tr .stp-glance { grid-column: 2; } }
@media (min-width: 1100px) {
	body.sh-tr.stp .stp-hero-inner { grid-template-columns: auto minmax(0, 1fr) minmax(280px, 340px); }
	body.sh-tr .stp-glance { margin-top: 26px; }
}

/* On this page: a quiet bar that stays at the top while reading. */
body.sh-tr .stp-jump { position: sticky; top: 0; z-index: 6; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--tr-rule); }
body.sh-tr .stp-jump ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
body.sh-tr .stp-jump a { display: inline-flex; align-items: center; min-height: 52px; padding: 0 14px; color: var(--sl-copy); font: 700 15px/1 var(--sl-text); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
body.sh-tr .stp-jump a:hover { color: var(--sl-ink); border-bottom-color: var(--stp-a, var(--tr-blue)); }
body.sh-tr .stp-jump a:focus-visible { outline: 2px solid var(--sl-ink); outline-offset: -4px; border-radius: 10px; }
body.sh-tr.sh-tr-trainer :is(#about, #qualifications, #services, #contact) { scroll-margin-top: 60px; }
@media (max-width: 479px) { body.sh-tr .stp-jump ul { justify-content: space-between; gap: 0; } body.sh-tr .stp-jump a { padding: 0 8px; font-size: 14.5px; } }

/* About: the aside reads as two labelled checklists on a hairline, in the trainer's accent. */
body.sh-tr.stp .stp-about-aside { padding: 4px 0 4px clamp(18px, 2.4vw, 28px); border-radius: 0; background: none; border-left: 3px solid var(--stp-a, var(--tr-blue)); }
body.sh-tr.stp .stp-aside-block .sl-h3 { font: 800 12px/1.2 var(--sl-text); letter-spacing: .14em; text-transform: uppercase; color: var(--sl-muted); }

/* Qualifications: the key, then one row per qualification with its label on the right. */
body.sh-tr .stp-cred-key { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin: 20px 0 0; padding: 0; list-style: none; }
body.sh-tr .stp-cred-key li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px var(--tr-rule); font-size: 14.5px; line-height: 1.45; color: var(--sl-copy); }
body.sh-tr .stp-cred-key strong { display: block; margin-bottom: 2px; font: 800 15px/1.3 var(--sl-text); color: var(--sl-ink); }
body.sh-tr .stp-cred-key .stp-cred-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sl-sky-soft); color: var(--sl-muted); }
body.sh-tr .stp-cred-key .is-checked .stp-cred-icon { background: var(--sl-assess-wash); color: var(--sl-teal); }
body.sh-tr .stp-cred-key .sl-i { width: 20px; height: 20px; }
body.sh-tr.stp .stp-cred-band .stp-cred { border: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--tr-rule); padding: 18px 20px; }
body.sh-tr.stp .stp-cred-band .stp-cred.is-checked { box-shadow: 0 0 0 1.5px #9ccfc3; }
body.sh-tr.stp .stp-cred-band .stp-cred-title { font-size: 18px; }
@media (min-width: 768px) {
	body.sh-tr.stp .stp-cred-band .stp-cred > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 250px); column-gap: 24px; align-items: center; }
	body.sh-tr.stp .stp-cred-band .stp-cred-title,
	body.sh-tr.stp .stp-cred-band .stp-cred-meta { grid-column: 1; }
	body.sh-tr.stp .stp-cred-band .stp-cred-state { grid-column: 2; grid-row: 1 / span 2; margin: 0 !important; padding-left: 20px; border-left: 1px solid var(--tr-rule); line-height: 1.4; }
}

/* Services: a price list. Details on the left, the price as the trainer stored it on the right. */
body.sh-tr.sh-tr-trainer .stp-offers { grid-template-columns: minmax(0, 1fr); gap: 14px; }
body.sh-tr.stp .stp-offer { gap: 16px; border: 0; border-radius: var(--tr-radius); box-shadow: 0 0 0 1px var(--tr-rule), 0 22px 40px -36px rgba(12, 34, 54, .5); }
body.sh-tr .stp-offer-main { display: grid; gap: 12px; align-content: start; min-width: 0; }
body.sh-tr .stp-offer-side { display: grid; gap: 10px; align-content: start; min-width: 0; }
body.sh-tr .stp-offer-side .sl-btn { justify-self: start; }
body.sh-tr.stp .stp-offer-price { padding-top: 12px; }
body.sh-tr.stp .stp-price { font-size: clamp(28px, 1.4rem + 1vw, 36px); letter-spacing: -.03em; }
body.sh-tr .stp-offer-set { margin: 0; font-size: 13.5px; color: var(--sl-muted); }
@media (min-width: 900px) {
	body.sh-tr.sh-tr-trainer .stp-offer { grid-template-columns: minmax(0, 1fr) 250px; gap: 0 32px; padding: 26px 28px 26px 32px; }
	body.sh-tr.sh-tr-trainer .stp-offer::before { left: 0; right: auto; top: 22px; bottom: 22px; width: 5px; height: auto; border-radius: 0 5px 5px 0; }
	body.sh-tr.sh-tr-trainer .stp-offer-side { padding-left: 28px; border-left: 1px solid var(--tr-rule); }
	body.sh-tr.sh-tr-trainer .stp-offer-price { padding-top: 0; border-top: 0; }
}

/* Contact and the connect box sit on the track. */
body.sh-tr.stp .stp-contact .stp-soon { border-radius: var(--tr-radius); background: rgba(255, 255, 255, .06); border-color: rgba(143, 208, 255, .24); }

/* Good to know: the listing note as a short trust and privacy panel. */
body.sh-tr.stp .stp-listing-note { background: var(--tr-chalk); border-top: 1px solid var(--tr-rule); }
body.sh-tr .stp-trust { display: grid; gap: 18px clamp(24px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); padding: clamp(20px, 3vw, 32px); border-radius: var(--tr-radius); background: #fff; box-shadow: 0 0 0 1px var(--tr-rule); }
body.sh-tr .stp-trust-head { display: grid; gap: 10px; justify-items: start; align-content: start; }
body.sh-tr .stp-trust .sl-can li { color: var(--sl-copy); }
body.sh-tr .stp-trust .sl-can .sl-i { color: var(--tr-ink); }
@media (min-width: 900px) { body.sh-tr .stp-trust { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }

/* 4. Dashboard (body.sh-tr-trainer-desk) ------------------------------------------------------------------------- */
/* Masthead: the greeting and status lines read on the navy track. The dashboard and review headers have no
   .sl-mast-copy column, so the track's eyebrow and button colours are set here for them. */
body.sh-tr .stp-dash-mast .sl-h2 { color: #fff; letter-spacing: -.035em; }
body.sh-tr .stp-dash-mast .sl-eyebrow { color: var(--tr-sky); }
body.sh-tr .stp-dash-mast .sl-btn--ghost { --sl-btn-bg: rgba(255, 255, 255, .06); --sl-btn-fg: #fff; --sl-btn-bd: rgba(255, 255, 255, .42); --sl-btn-bg-on: rgba(255, 255, 255, .14); --sl-btn-fg-on: #fff; --sl-btn-bd-on: #fff; }
body.sh-tr .stp-dash-mast .sl-btn--ghost .sl-i { color: var(--tr-sky); }
@media (max-width: 560px) {
	body.sh-tr .stp-dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
	body.sh-tr .stp-dash-stats li:nth-child(odd) { padding-left: 0; border-left: 0; }
}
body.sh-tr .stp-dash-mast .stp-status-line { color: var(--tr-copy-d); }
body.sh-tr .stp-role { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--tr-muted-d); }
body.sh-tr .stp-role .sl-i { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--tr-sky); }
body.sh-tr .stp-dash-mast .stp-avatar--dash { --stp-av: 72px; }
body.sh-tr .stp-dash-mast .stp-dash-head { padding-block: clamp(26px, 3.4vw, 46px) clamp(28px, 3.4vw, 44px); }
body.sh-tr .stp-dash-stats { flex: 1 1 100%; margin-top: 2px; padding-top: 18px; border-top: 1px solid rgba(143, 208, 255, .22); }
body.sh-tr .sl-mast--train .stp-dash-stats b { font-size: clamp(1.6rem, 1.25rem + 1vw, 2.2rem); }

/* Tabs: a white rail with a Train-blue marker; badges stay readable. */
body.sh-tr.stp .stp-tabs { background: rgba(255, 255, 255, .97); border-bottom-color: var(--tr-rule); box-shadow: 0 12px 24px -24px rgba(12, 34, 54, .6); }
body.sh-tr.stp .stp-tabs a { min-height: 56px; padding: 0 16px; }
body.sh-tr.stp .stp-tabs a[aria-current="page"]::after { left: 14px; right: 14px; height: 3px; background: var(--tr-blue); }
body.sh-tr.stp .stp-tabs a:focus-visible { outline: 2px solid var(--sl-ink); outline-offset: -4px; border-radius: 10px; }

/* The body: chalk, so white panels and forms read as separate pieces. */
body.sh-tr.stp .stp-dash-body { padding-block: 28px clamp(48px, 6vw, 80px); background: var(--tr-chalk); border-bottom: 1px solid var(--tr-rule); }
body.sh-tr.stp .stp-subtabs a { border-color: var(--tr-rule); }
body.sh-tr.stp .stp-subtabs a[aria-current="page"] { background: var(--tr-ink); border-color: var(--tr-ink); }

/* Overview: the one next step as a lane-marked plate. */
body.sh-tr.stp .stp-next { position: relative; overflow: hidden; border: 0; border-radius: var(--tr-radius); background: #fff; box-shadow: 0 0 0 1px var(--tr-rule), 0 24px 44px -36px rgba(12, 34, 54, .55); padding-left: clamp(26px, 3.4vw, 38px); }
body.sh-tr.stp .stp-next::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, #2b8fd6, #6ec4e8 60%, #3fb39d); }
body.sh-tr.stp .stp-next .sl-h3 { font-size: clamp(1.35rem, 1.1rem + .7vw, 1.7rem); }
body.sh-tr.stp .stp-path-done > summary { border-radius: 14px; box-shadow: inset 0 0 0 1px #c9e3dc; }
body.sh-tr.stp .stp-path-done > summary .stp-path-show { display: inline-flex; align-items: center; min-height: 32px; }

/* Completion: the ring in Train blue, the steps as rows that lead to their tab. */
body.sh-tr.stp .stp-ring-text { font-variant-numeric: tabular-nums; }
body.sh-tr.stp .stp-steps-list li { min-height: 48px; border-bottom-color: var(--tr-rule); }
body.sh-tr.stp .stp-steps-list a { position: relative; display: flex; align-items: center; min-height: 46px; padding-right: 28px; font-weight: 700; text-decoration: none; }
body.sh-tr.stp .stp-steps-list a::after { content: ""; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px; margin-top: -5px; border-top: 2px solid var(--tr-ink); border-right: 2px solid var(--tr-ink); transform: rotate(45deg); }
body.sh-tr.stp .stp-steps-list a:hover { color: var(--tr-ink); }
body.sh-tr.stp .stp-steps-list a:focus-visible { outline: 2px solid var(--sl-ink); outline-offset: 2px; border-radius: 8px; }

/* Live parts (clients) as solid plates; parts not open yet stay in one disclosure. */
body.sh-tr.stp .stp-tile { border: 0; border-radius: var(--tr-radius); background: #fff; box-shadow: 0 0 0 1px var(--tr-rule); }
body.sh-tr.stp .stp-tile .sl-node { --sl-ns: 46px; }
body.sh-tr.stp .stp-tile-state { color: var(--tr-ink); }
body.sh-tr.stp .stp-later { border: 0; border-radius: var(--tr-radius); box-shadow: 0 0 0 1px var(--tr-rule); }
body.sh-tr.stp .stp-later > summary::after { display: inline-flex; align-items: center; min-height: 32px; }
body.sh-tr.stp .stp-preview-card .stp-grid--one { grid-template-columns: minmax(0, 420px); }

/* Editors on the chalk body: forms in one white sheet; the profile save bar matches. */
body.sh-tr.stp .stp-dash-body .stp-editor > form.stp-form,
body.sh-tr.stp .stp-dash-body .stp-editor--split > div > form.stp-form { padding: clamp(18px, 2.6vw, 30px); border-radius: var(--tr-radius); background: #fff; box-shadow: 0 0 0 1px var(--tr-rule); }
body.sh-tr.stp .stp-savebar { margin-inline: calc(-1 * clamp(18px, 2.6vw, 30px)); padding-inline: clamp(18px, 2.6vw, 30px); border-radius: 0 0 var(--tr-radius) var(--tr-radius); }
body.sh-tr.stp .stp-svc, body.sh-tr.stp .stp-content-item, body.sh-tr.stp .stp-client, body.sh-tr.stp .stp-request, body.sh-tr.stp .stp-dash-body .stp-cred { border: 0; border-radius: var(--tr-radius); box-shadow: 0 0 0 1px var(--tr-rule); }
body.sh-tr.stp .stp-table-wrap { border-color: var(--tr-rule); border-radius: var(--tr-radius); }

/* Clients: requests and clients on the left, the permissions beside them on wide screens. */
body.sh-tr .stp-clients-main { display: grid; gap: 18px; align-content: start; min-width: 0; }
body.sh-tr .stp-rules { display: grid; gap: 12px; align-content: start; min-width: 0; padding: clamp(18px, 2.4vw, 26px); border-radius: var(--tr-radius); background: #fff; box-shadow: 0 0 0 1px var(--tr-rule); }
body.sh-tr .stp-rules .sl-h3 { margin-top: 0 !important; }
body.sh-tr .stp-rules .sl-eyebrow { color: var(--tr-ink); }
body.sh-tr .stp-rules .sl-can li { font-size: 15px; color: var(--sl-copy); }
body.sh-tr .stp-rules .sl-can .sl-i { color: var(--tr-ink); }
@media (min-width: 1100px) {
	body.sh-tr.stp .stp-editor--wide:has(> .stp-rules) { max-width: none; grid-template-columns: minmax(0, 1fr) 340px; column-gap: clamp(28px, 3vw, 44px); align-items: start; }
	body.sh-tr.stp .stp-editor--wide:has(> .stp-rules) > .stp-editor-head { grid-column: 1 / -1; }
	body.sh-tr.stp .stp-editor--wide > .stp-rules { position: sticky; top: 76px; }
}
body.sh-tr.stp .stp-connect-setup .stp-panel-head .sl-h3 { font-size: 1.3rem; }
body.sh-tr.stp .stp-count-chip { background: var(--tr-deep); color: #fff; font-variant-numeric: tabular-nums; }
body.sh-tr.stp .stp-empty-act { border-radius: var(--tr-radius); background: var(--tr-wash); }
/* tap targets: the setup path's "go" links, the invite link and the apply page's two confirmations (44px / 24px) */
body.sh-tr.stp .stp-inbox-more a,
body.sh-tr.stp .stp-path-go { display: inline-flex; align-items: center; min-height: 44px; }
body.sh-tr.stp .stp-toggle input { width: 24px; height: 24px; }

/* Calendar: the trainer's own calendar, when it runs. */
body.sh-tr .stp-own-cal { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; margin-top: 14px; }
body.sh-tr .stp-own-cal > div { display: grid; gap: 6px; }
@media (max-width: 640px) { body.sh-tr .stp-own-cal { grid-template-columns: minmax(0, 1fr); } }

/* Apply (a member without a trainer profile): the steps on the track, the form in four numbered groups. */
body.sh-tr .sl-mast--train .stp-steps li { background: rgba(11, 31, 50, .82); border-color: rgba(143, 208, 255, .26); box-shadow: 0 18px 34px -26px rgba(0, 0, 0, .9); }
body.sh-tr .sl-mast--train .stp-steps strong { color: #fff; }
body.sh-tr .sl-mast--train .stp-steps span { color: var(--tr-copy-d); }
body.sh-tr .sl-mast--train .stp-steps .stp-step-n { color: var(--tr-sky); }
body.sh-tr .sl-mast--train .stp-steps--line::before { opacity: .7; }
body.sh-tr.stp .stp-apply-band { background: var(--tr-chalk); }
body.sh-tr .stp-apply { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); align-items: start; }
body.sh-tr .stp-apply-main { min-width: 0; max-width: 780px; }
body.sh-tr.stp .stp-apply-main > .stp-form { padding: clamp(18px, 2.6vw, 30px); border-radius: var(--tr-radius); background: #fff; box-shadow: 0 0 0 1px var(--tr-rule), 0 24px 44px -38px rgba(12, 34, 54, .5); }
body.sh-tr.stp .stp-apply-group { border-top-color: var(--tr-rule); }
body.sh-tr .stp-apply-group > .sl-h3 { display: flex; align-items: center; gap: 12px; }
body.sh-tr .stp-group-n { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--tr-deep); color: #fff; font: 800 14px/1 var(--sl-text); font-variant-numeric: tabular-nums; }
body.sh-tr .stp-apply-group > .stp-help { margin-top: -10px; }
body.sh-tr .stp-apply-send { padding-top: 6px; }
body.sh-tr .stp-apply-side { min-width: 0; }
body.sh-tr .stp-side-card { display: grid; gap: 12px; padding: clamp(18px, 2.4vw, 26px); border-radius: var(--tr-radius); background: #fff; box-shadow: 0 0 0 1px var(--tr-rule); }
body.sh-tr .stp-side-card .sl-eyebrow { color: var(--tr-ink); }
body.sh-tr .stp-side-card .sl-can li { color: var(--sl-copy); }
body.sh-tr .stp-side-card .sl-can .sl-i { color: var(--tr-ink); }
@media (min-width: 1024px) {
	body.sh-tr .stp-apply { grid-template-columns: minmax(0, 1fr) 340px; }
	body.sh-tr .stp-apply-side { position: sticky; top: 24px; margin-top: 108px; }
}

/* 5. Review desk (manage_options only) ----------------------------------------------------------------------------- */
body.sh-tr.stp .stp-review-body { background: var(--tr-chalk); }
body.sh-tr.stp .stp-review-body .stp-mod-section > .sl-h3 { padding-bottom: 10px; border-bottom: 2px solid var(--sl-ink); }
body.sh-tr.stp .stp-count-badge { background: var(--tr-deep); color: #fff; font-variant-numeric: tabular-nums; }

/* 6. Motion (CSS only, finite, transform/opacity; nothing moves under reduced motion) ------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	body.sh-tr .stp-lanes li { animation: stp-tr-lane .5s var(--tr-ease) both; animation-delay: calc(var(--d, 0) * 90ms + 250ms); }
	body.sh-tr.stp .stp-card { transition: box-shadow .25s var(--tr-ease), transform .25s var(--tr-ease); }
	body.sh-tr.stp .stp-card:hover { transform: translateY(-2px); }
	@keyframes stp-tr-lane { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
	body.sh-tr.stp .stp-card { transition: none; }
}