/* EBCS Platform — public registration + status styles.
   Reuses the theme's .form-group / .btn / .alert language and adds the
   wizard-specific pieces. */

.ebcs-reg, .ebcs-status { max-width: 640px; margin: 40px auto; padding: 0 16px; }
.ebcs-reg__card, .ebcs-status {
	background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 28px;
}
.ebcs-reg__title { color: #132a60; font-size: 1.6rem; margin: 0 0 20px; }

/* Step indicator */
.ebcs-steps { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0 0 24px; padding: 0; flex-wrap: wrap; }
.ebcs-steps li { display: flex; align-items: center; gap: 8px; color: #9aa0a6; font-weight: 600; font-size: .9rem; }
.ebcs-steps li span {
	width: 26px; height: 26px; border-radius: 50%; background: #e0e0e0; color: #fff;
	display: inline-flex; align-items: center; justify-content: center; font-size: .85rem;
}
.ebcs-steps li.is-active { color: #132a60; }
.ebcs-steps li.is-active span { background: #132a60; }
.ebcs-steps li.is-done span { background: #93c5c6; }

.ebcs-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 480px) { .ebcs-grid-2 { grid-template-columns: 1fr; } }
.ebcs-opt { color: #9aa0a6; font-weight: 400; font-size: .8rem; }

.ebcs-reg__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.ebcs-reg__signin { text-align: center; color: #666; margin-top: 18px; font-size: .9rem; }
.ebcs-reg__signin a { color: var(--accent-dark, #437576); font-weight: 600; }

/* Postcode + club */
.ebcs-postcode-row { display: flex; gap: 8px; }
.ebcs-postcode-row input { flex: 1; }
.ebcs-club { position: relative; }
.ebcs-club__list {
	list-style: none; margin: 4px 0 0; padding: 0; position: absolute; z-index: 5; left: 0; right: 0;
	background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.08);
	max-height: 220px; overflow: auto; display: none;
}
.ebcs-club__list li { padding: 9px 12px; cursor: pointer; font-size: .92rem; }
.ebcs-club__list li:hover { background: #f4f7fb; }
.ebcs-club__list li small { color: #9aa0a6; }

/* Scrollable Terms & Conditions */
.ebcs-terms {
	max-height: 180px; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 6px;
	padding: 14px 16px; background: #fafbfd; font-size: .85rem; line-height: 1.65; color: #444;
}
.ebcs-terms p { margin: 0 0 12px; }
.ebcs-terms p:last-child { margin-bottom: 0; }

/* Summary */
.ebcs-summary { background: #f4f7fb; border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.ebcs-summary h3 { margin: 0 0 10px; color: #132a60; }
.ebcs-summary__row { display: flex; justify-content: space-between; font-size: 1.05rem; }
.ebcs-prepaid { display: block; margin: 14px 0; }

/* Success */
.ebcs-reg__success { text-align: center; padding: 16px; }
.ebcs-reg__tick {
	width: 64px; height: 64px; border-radius: 50%; background: #132a60; color: #fff;
	font-size: 34px; line-height: 64px; margin: 0 auto 16px;
}
.ebcs-reg__success h2 { color: #132a60; margin: 0 0 10px; }
.ebcs-reg__number { font-size: 1.05rem; }

/* Status pills */
.ebcs-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 600; font-size: .85rem; }
.ebcs-pill--green { background: #dcfce7; color: #15803d; }
.ebcs-pill--amber { background: #fff4e0; color: #b8860b; }
.ebcs-pill--red   { background: #fce9e9; color: #c0392b; }
/* EBCS_Applications::status_tone() also emits `blue` (a stage in progress) and
   `grey` (dormant). Without these the pill renders as bare bold text. Neither
   is a traffic-light state, so they sit outside the semantic green/amber/red —
   see the Status pills note in CLAUDE.md. */
.ebcs-pill--blue  { background: #e8eefb; color: #1e3d85; }
.ebcs-pill--grey  { background: #f0f1f4; color: #5d667d; }

/* Button + alert variants the theme doesn't already define */
.btn--teal  { background: #93c5c6; color: #fff; }
.btn--ghost { background: #fff; color: #132a60; border: 1px solid #132a60; }
.alert--teal  { background: #f0f8f8; border: 1px solid #93c5c6; color: #3c6f70; padding: 10px 12px; border-radius: 6px; margin: 10px 0; }
.alert--amber { background: #fff8e1; border: 1px solid #ffd23f; color: #8a6d00; padding: 10px 12px; border-radius: 6px; margin: 10px 0; }

/* Login remember-me warning */
.ebcs-remember-note { font-size: .78rem; color: #b8860b; margin: -8px 0 14px; }

/* Wizard intro copy */
.ebcs-reg__lede { color: #666; font-size: .92rem; margin: -12px 0 20px; line-height: 1.6; }
.ebcs-reg__lede a { color: var(--accent-dark, #437576); font-weight: 600; }
.ebcs-step__intro { color: #666; font-size: .92rem; margin: 0 0 18px; line-height: 1.6; }

/* Indoor / outdoor club pair */
.ebcs-clubs { border: 1px solid #e0e0e0; border-radius: 8px; padding: 16px; margin: 0 0 16px; }
.ebcs-clubs legend { color: #132a60; font-weight: 700; padding: 0 6px; font-size: .95rem; }
.ebcs-clubs .form-group:last-of-type { margin-bottom: 8px; }

/* Card form — the demonstration warning has to be impossible to miss, since
   people will otherwise type a real card number out of habit. */
.ebcs-warn {
	background: #fff8e1; border: 1px solid #ffd23f; color: #8a6d00;
	padding: 10px 12px; border-radius: 6px; margin: 12px 0 0; font-size: .85rem; line-height: 1.55;
}

/* Processing state on the pay button */
.btn.is-processing { opacity: .75; cursor: progress; }
.btn.is-processing::before {
	content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 9px;
	vertical-align: -1px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
	border-radius: 50%; animation: ebcs-spin .7s linear infinite;
}
@keyframes ebcs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-processing::before { animation: none; } }

/* ════════════════════════════════════════════════════════════════════════════
   Phase 9 — the new-coach application, and the Trainer / Assessor portals.

   Both reuse the registration wizard's card, steps and card-form styling, so a
   visitor moving between "apply to become a coach" and "register as a coach"
   sees one system rather than two.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── The application form ────────────────────────────────────────────────── */

.ebcs-apply { max-width: 720px; margin: 0 auto 60px; }

.ebcs-apply__card {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	padding: 34px 34px 38px;
}

.ebcs-apply__title { margin: 0 0 8px; font-size: 1.75rem; color: #132a60; }

.ebcs-apply__lede { margin: 0 0 24px; color: #64748b; line-height: 1.6; }

/* Only the active step is in the document; the rest are removed outright so a
   hidden step's required fields can never block the form. */
.ebcs-apply__step { display: none; }
.ebcs-apply__step.is-active { display: block; }

.ebcs-apply__terms {
	max-height: 340px;
	overflow-y: auto;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 18px 22px;
	margin-bottom: 18px;
	background: #fcfdff;
}

.ebcs-apply__terms h3 {
	margin: 18px 0 8px;
	font-size: .875rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #132a60;
}
.ebcs-apply__terms h3:first-child { margin-top: 0; }

.ebcs-apply__list { margin: 0; padding-left: 20px; }
.ebcs-apply__list li { margin-bottom: 8px; line-height: 1.55; font-size: .9375rem; }

.ebcs-apply__nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
}

.ebcs-apply__done { text-align: center; }

.ebcs-apply__refbox {
	display: block;
	margin: 22px auto;
	padding: 18px 24px;
	max-width: 340px;
	border: 2px solid #132a60;
	border-radius: 8px;
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #64748b;
}

.ebcs-apply__refbox strong {
	display: block;
	margin-top: 6px;
	font-size: 1.5rem;
	letter-spacing: .1em;
	text-transform: none;
	color: #132a60;
}

/* ── The portals ─────────────────────────────────────────────────────────── */

.ebcs-portal { max-width: 560px; margin: 0 auto 60px; }
.ebcs-portal--open { max-width: 860px; }

.ebcs-portal__card {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	padding: 34px;
}

.ebcs-portal__card--wide { padding: 30px 34px 34px; }

.ebcs-portal__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 18px;
	margin-bottom: 18px;
}

.ebcs-portal__title { margin: 0 0 6px; font-size: 1.625rem; color: #132a60; }
.ebcs-portal__lede { margin: 0 0 22px; color: #64748b; line-height: 1.6; }
.ebcs-portal__head .ebcs-portal__lede { margin-bottom: 0; }

.ebcs-portal__h2 {
	margin: 26px 0 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid #e0e0e0;
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #132a60;
}

/* The reference and the code are both read off an email and typed in, so they
   are set wide and monospaced — a mistyped character is the single most likely
   thing to go wrong here. */
.ebcs-portal__ref,
.ebcs-portal__code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ebcs-portal__code {
	font-size: 1.5rem;
	letter-spacing: .4em;
	text-align: center;
	height: 56px;
}

.ebcs-portal__form .form-group { margin-bottom: 18px; }

.ebcs-portal__help {
	margin: 22px 0 0;
	padding-top: 16px;
	border-top: 1px solid #e0e0e0;
	font-size: .875rem;
	color: #64748b;
}

.ebcs-portal__dl {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2px 24px;
	margin: 0;
}

.ebcs-portal__dl > div {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 8px 0;
	border-bottom: 1px solid #f1f5f9;
}

.ebcs-portal__dl dt { margin: 0; color: #64748b; font-size: .875rem; }
.ebcs-portal__dl dd { margin: 0; font-weight: 600; text-align: right; font-size: .875rem; }

.ebcs-portal__files { display: flex; flex-direction: column; gap: 12px; }

.ebcs-portal__file {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 16px 18px;
}

.ebcs-portal__file h3 { margin: 0 0 4px; font-size: 1rem; color: #132a60; }
.ebcs-portal__file p { margin: 0; font-size: .875rem; color: #64748b; line-height: 1.5; }

@media (max-width: 640px) {
	.ebcs-apply__card,
	.ebcs-portal__card { padding: 24px 20px 28px; }
	.ebcs-portal__head { flex-direction: column; }
	.ebcs-portal__dl { grid-template-columns: 1fr; }
	.ebcs-portal__file { flex-direction: column; align-items: stretch; }
	.ebcs-apply__nav { flex-direction: column-reverse; }
}

/* ── Phase 10: assessment result + trainer's report ─────────────────────────
   Both live on the plain public template and reuse .ebcs-portal for their
   shell, so only the parts unique to a form are defined here. */

.ebcs-result__outcome,
.ebcs-rating__q {
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 16px 18px;
	margin: 0 0 18px;
}

.ebcs-result__outcome legend,
.ebcs-rating__q legend {
	font-weight: 700;
	color: var(--navy, #132a60);
	padding: 0 6px;
}

/* The two outcomes are a deliberate, consequential choice — big targets,
   readable apart at a glance, and never pre-selected. */
.ebcs-result__choice {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 16px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	margin-top: 10px;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}

.ebcs-result__choice:hover { border-color: #b3c2dd; background: #f8fafd; }
.ebcs-result__choice input { margin-top: 3px; flex: none; }
.ebcs-result__choice span { display: block; }
/* The theme sets `label { font-weight: 600 }` for form labels, and these
   choices are labels — so the descriptive line inherits bold and reads as a
   second heading unless the weight is reset explicitly. */
.ebcs-result__choice strong { display: block; font-size: 16px; color: var(--navy, #132a60); }
.ebcs-result__choice em {
	display: block;
	font-style: normal;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.45;
	color: #666;
	margin-top: 3px;
}

.ebcs-result__choice--pass:has(input:checked) { border-color: #15803d; background: #f2fbf5; }
.ebcs-result__choice--fail:has(input:checked) { border-color: #b45309; background: #fffaf2; }

/* 1-10 scale. A row of radios, styled as touchable chips — on a phone at the
   side of a green this has to work with one thumb. */
/* Ten fixed columns, not flex-wrap. With `flex: 1 1 auto` the tenth chip drops
   to its own row inside the portal card and then grows to fill it, so the scale
   reads as "1-9, and separately 10". A grid cannot do that. */
.ebcs-rating__scale {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 6px;
	margin-top: 10px;
}

.ebcs-rating__scale label { cursor: pointer; font-weight: 400; min-width: 0; }
.ebcs-rating__scale input { position: absolute; opacity: 0; width: 0; height: 0; }

.ebcs-rating__scale span {
	display: block;
	text-align: center;
	padding: 10px 0;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	font-weight: 600;
	color: #444;
	transition: background .12s, border-color .12s, color .12s;
}

.ebcs-rating__scale label:hover span { border-color: #b3c2dd; background: #f8fafd; }

.ebcs-rating__scale input:checked + span {
	background: var(--navy, #132a60);
	border-color: var(--navy, #132a60);
	color: #fff;
}

/* Keyboard users need to see where they are; :focus-visible keeps it off
   mouse clicks. */
.ebcs-rating__scale input:focus-visible + span {
	outline: 2px solid var(--accent-dark, #437576);
	outline-offset: 2px;
}

/* Two rows of five beats ten chips too narrow to hit with a thumb. */
@media (max-width: 560px) {
	.ebcs-rating__scale { grid-template-columns: repeat(5, 1fr); }
}

/* ── The Overall Coaching Assessment Guide on the trainer's report (Sep 2026) ──
   Each score is chosen by the guide's own words for it, so the five levels
   are rows with the description beside the number, not bare numbers. They
   stack at every width: the report card is narrow and the guide's sentences
   are long. The radio is visually hidden but stays in the tab order; the row
   shows focus and choice. */
.ebcs-guide {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 10px;
}
.ebcs-guide__level { position: relative; display: block; cursor: pointer; font-weight: 400; margin: 0; }
.ebcs-guide__level input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ebcs-guide__card {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 9px 12px;
  border: 1.5px solid #d6deea;
  border-radius: 8px;
  background: #fff;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ebcs-guide__score { flex: 0 0 104px; font-weight: 700; color: #132a60; font-size: 1.05rem; line-height: 1.2; }
.ebcs-guide__score em { font-style: normal; font-weight: 600; font-size: .72rem; margin-left: 4px;
  letter-spacing: .06em; text-transform: uppercase; color: #5c6478; }
.ebcs-guide__words { flex: 1; font-size: .86rem; line-height: 1.45; color: #3a4459; }
.ebcs-guide__level:hover .ebcs-guide__card { border-color: #b3c2dd; background: #f8fafd; }
.ebcs-guide__level input:checked + .ebcs-guide__card {
  border-color: #132a60; background: #eef2fa; box-shadow: 0 0 0 1px #132a60 inset;
}
.ebcs-guide__level input:checked + .ebcs-guide__card .ebcs-guide__score em { color: #132a60; }
.ebcs-guide__level input:focus-visible + .ebcs-guide__card { outline: 2px solid #2d7d84; outline-offset: 2px; }
.ebcs-guide__evidence { display: block; margin-top: 10px; font-weight: 400; }
.ebcs-guide__evidence textarea { width: 100%; margin-top: 4px; }
@media (max-width: 480px) {
  .ebcs-guide__card { flex-direction: column; gap: 2px; }
  .ebcs-guide__score { flex-basis: auto; }
}