/* ============================================================================
   Book a coaching session — the pieces this flow alone draws.

   The chrome (rail, steps, progress, the paper column, every `.sb-*` form
   control) is member-join-flow.css, which both wizards wear. What is left is
   what the prototype draws only here: the coach cards, the session lengths and
   the review card — ref/sbi-frontend-v1.3.0.html · SBI.route('book-coaching').

   Everything is scoped under `.sbi-flow`, because that is where the shared
   sheet declares the design tokens. A rule outside it would resolve every
   var() to nothing.
   ========================================================================= */

/* ---------------------------------------------------------------- coaches */
.sbi-flow .coach-list { display: grid; gap: 12px; }

.sbi-flow .coach-opt {
  position: relative; display: grid; grid-template-columns: auto 1fr auto;
  gap: 18px; align-items: center; padding: 20px;
  border-radius: var(--r-xl); border: 1.5px solid var(--line);
  text-align: left; background: var(--paper); transition: all .2s;
  width: 100%; cursor: pointer;
}
.sbi-flow .coach-opt:hover {
  transform: translateY(-3px); box-shadow: 0 14px 30px rgba(12, 30, 32, .1);
  border-color: #c9c2b0;
}
.sbi-flow .coach-opt.on,
.sbi-flow .coach-opt.selected {
  border-color: var(--baize); background: #f1f7f3;
  box-shadow: 0 0 0 4px rgba(26, 58, 61, .08);
}

.sbi-flow .co-b { display: grid; gap: 4px; min-width: 0; }
.sbi-flow .co-b b { font-family: var(--f-display); font-weight: 400; font-size: 24px; }
.sbi-flow .co-b > span:nth-child(2) { font-size: 13.5px; color: var(--ink-mute); }
.sbi-flow .co-b .chips { margin-top: 6px; gap: 6px; }

.sbi-flow .co-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 12.5px; color: var(--ink-mute);
}
.sbi-flow .co-meta span { display: inline-flex; align-items: center; gap: 5px; }
.sbi-flow .co-meta svg { width: 13px; height: 13px; }

/* The tick that says which card is chosen. The radio itself is hidden — this
   is its only visible state, so it is driven by `.on` exactly as the card is. */
.sbi-flow .o-tick {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--line); display: grid; place-items: center;
}
.sbi-flow .o-tick svg { width: 13px; height: 13px; opacity: 0; color: #fff; }
.sbi-flow .coach-opt.on .o-tick,
.sbi-flow .coach-opt.selected .o-tick { background: var(--baize); border-color: var(--baize); }
.sbi-flow .coach-opt.on .o-tick svg,
.sbi-flow .coach-opt.selected .o-tick svg { opacity: 1; }

/* Initials, or the coach's photograph where the directory holds one. */
.sbi-flow .mono-av {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-display); font-size: 18px; color: var(--on-dark);
  background: var(--baize); flex-shrink: 0; letter-spacing: -.02em;
}
.sbi-flow .mono-av.lg { width: 84px; height: 84px; font-size: 30px; }
.sbi-flow .mono-av.gold { background: var(--gold); }
.sbi-flow .mono-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------- chips */
.sbi-flow .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sbi-flow .chip {
  height: 38px; padding: 0 16px; border-radius: var(--pill);
  border: 1px solid var(--line); background: var(--paper);
  font-size: 13.5px; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; transition: all .2s;
}
.sbi-flow .chip:hover { border-color: var(--ink-soft); color: var(--ink); }
.sbi-flow .chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.sbi-flow .chip .ct { font-family: var(--f-mono); font-size: 11px; opacity: .6; }

.sbi-flow .badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: var(--pill); font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  background: var(--ivory); color: var(--ink-2); white-space: nowrap;
}
.sbi-flow .badge.green { background: #e3f1e8; color: var(--ok); }
.sbi-flow .badge svg { width: 12px; height: 12px; }

/* --------------------------------------------------------- session length */
.sbi-flow .dur-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
}
.sbi-flow .dur {
  display: grid; gap: 4px; padding: 18px; border-radius: var(--r-lg);
  border: 1.5px solid var(--line); text-align: left;
  background: var(--paper); transition: all .2s; cursor: pointer;
}
.sbi-flow .dur span { font-weight: 600; font-size: 15px; }
.sbi-flow .dur b { font-size: 26px; font-weight: 500; }
.sbi-flow .dur small { font-size: 12px; color: var(--ink-mute); }
.sbi-flow .dur:hover { border-color: #c9c2b0; }
.sbi-flow .dur.on,
.sbi-flow .dur.active {
  border-color: var(--baize); background: #f1f7f3;
  box-shadow: 0 0 0 4px rgba(26, 58, 61, .08);
}

/* ------------------------------------------------------------ who it is for */
.sbi-flow .me-card {
  display: flex; gap: 12px; align-items: center; margin-bottom: 22px;
  padding: 12px 14px; border-radius: 14px; background: var(--ivory);
}
.sbi-flow .me-card .mono-av { width: 42px; height: 42px; font-size: 16px; }
.sbi-flow .me-card > div { display: grid; min-width: 0; }
.sbi-flow .me-card b { font-weight: 600; }
.sbi-flow .me-card span {
  font-size: 12.5px; color: var(--ink-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ------------------------------------------------------------ review card */
.sbi-flow .rvc {
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--paper); overflow: hidden;
}
.sbi-flow .rvc-top {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px; align-items: center; padding: 14px 16px; background: var(--ivory);
}
.sbi-flow .rvc-ico {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--baize); color: #fff; display: grid; place-items: center;
}
.sbi-flow .rvc-ico svg { width: 20px; height: 20px; }
.sbi-flow .rvc-top > div { display: grid; min-width: 0; }
.sbi-flow .rvc-top b { font-size: 15.5px; font-weight: 600; }
.sbi-flow .rvc-top span { font-size: 13px; color: var(--ink-soft); }
.sbi-flow .rvc-row {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 12px 16px; border-top: 1px solid var(--line-soft); font-size: 14px;
}
.sbi-flow .rvc-row > span { color: var(--ink-mute); font-size: 13px; }
.sbi-flow .rvc-row b { font-weight: 600; text-align: right; }
.sbi-flow .rvc-row small { font-weight: 400; color: var(--ink-mute); font-size: 12px; }

.sbi-flow .lnk-btn {
  font-size: 13.5px; color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 3px;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.sbi-flow .lnk-btn:hover { color: var(--ink); }

/* -------------------------------------------------------------- sign-in gate
   The prototype opens this flow on the member's own account, so the gate is
   not a page in front of the flow — it is the flow's first screen, wearing the
   same card as everything after it. */
.sbi-flow .gate-art { display: grid; place-items: center; margin-bottom: 8px; }
.sbi-flow .gate-art svg { width: 64px; height: 64px; color: var(--baize); }

.sbi-flow .gate {
  max-width: 460px; margin: 0 auto; display: grid; gap: 18px;
}
.sbi-flow .gate .fl-title { text-align: center; justify-items: center; margin-bottom: 4px; }

/* The six one-time-code boxes. */
.sbi-flow .code-boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.sbi-flow .code-box {
  height: 60px; border-radius: var(--r); border: 1px solid var(--line);
  text-align: center; font-family: var(--f-mono); font-size: 24px;
  background: var(--paper); outline: none; width: 100%; min-width: 0;
  transition: border-color .2s, box-shadow .2s;
}
.sbi-flow .code-box:focus { border-color: var(--baize); box-shadow: 0 0 0 4px rgba(26, 58, 61, .1); }

.sbi-flow .gate-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; font-size: 13.5px;
}

/* Typing state on the identifier field: a spinner while we look, a tick when
   we know who you are. */
.sbi-flow .inp-wrap { position: relative; }
.sbi-flow .inp-wrap .sb-input { padding-right: 44px; }
.sbi-flow .field-mark, .sbi-flow .field-spin {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
}
.sbi-flow .field-mark svg { width: 18px; height: 18px; color: var(--ok); }
.sbi-flow .field-spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--baize);
  animation: flSpin .7s linear infinite;
}
@keyframes flSpin { to { transform: translateY(-50%) rotate(360deg); } }

.sbi-flow .welcome {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 14px; background: var(--ivory);
}
.sbi-flow .welcome > span:last-child { display: grid; min-width: 0; }
.sbi-flow .welcome strong { font-weight: 600; }
.sbi-flow .welcome small { font-size: 12.5px; color: var(--ink-mute); }

/* -------------------------------------------------------------- utilities */
.sbi-flow .bl-hidden { display: none !important; }
.sbi-flow .fl-note {
  display: flex; gap: 10px; padding: 14px 16px; border-radius: 14px;
  background: var(--gold-soft); color: #7a5a06; font-size: 13.5px; line-height: 1.5;
}
.sbi-flow .fl-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

/* The rail's live summary is the prototype's `.fs-rows`, which the shared
   sheet already styles; only the empty dash needs saying. */
.sbi-flow .fs-rows b:empty::after { content: "—"; }

@media (max-width: 900px) {
  .sbi-flow .coach-opt { grid-template-columns: auto 1fr; row-gap: 12px; }
  .sbi-flow .coach-opt .o-tick { position: absolute; top: 16px; right: 16px; }
}

/* The close button sits at the end of the top bar, beside the progress line. */
.sbi-flow .fl-x { flex-shrink: 0; }

/* --------------------------------------------------------------- the gate
   `.fl-card` is padding and a border; it says nothing about how what is
   inside it stacks. The wizard's own steps space themselves, but the two
   gate forms are a run of bare form groups, a welcome line and a button, none
   of which carries a margin — so they butted together. */
.sbi-flow .gate .fl-card { display: grid; gap: 18px; }

/* The code block and the password block are alternatives, and whichever is
   showing wants the same air around it as a field. */
.sbi-flow .gate .gate-row { margin-top: -6px; }

/* Chrome paints a saved email yellow, which lands in the middle of a paper
   card looking like a validation warning. Keep the field's own colours; the
   long inset shadow is the only way to beat the user-agent background. */
.sbi-flow input:-webkit-autofill,
.sbi-flow input:-webkit-autofill:hover,
.sbi-flow input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 40px var(--paper) inset;
  box-shadow: 0 0 0 40px var(--paper) inset;
  caret-color: var(--ink);
}

/* The field turns baize once the lookup recognises the address — the same
   "we know you" state the old member-login card had, which is what the tick
   beside it is confirming. */
.sbi-flow .mlog-field.is-known .sb-input {
  border-color: var(--baize);
  background: #f1f7f3;
}
.sbi-flow .mlog-field.is-known input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px #f1f7f3 inset;
  box-shadow: 0 0 0 40px #f1f7f3 inset;
}

/* ------------------------------------------------------------- step 2 · time

   The diary. Days down the page, each with its free start times in a row that
   wraps — rather than a month grid, because what is being chosen is a slot and
   a coach who works four days a week has nothing to say about the other three.
   Empty days never reach the browser (App\Support\CoachingSlots drops them),
   so there is no "unavailable" state to style here.                          */

.sbi-flow .bl-duration { margin-top: 26px; }

.sbi-flow .bl-slots { display: grid; gap: 22px; margin-top: 4px; }

.sbi-flow .bl-slots-loading,
.sbi-flow .bl-slots-empty {
  padding: 22px; border-radius: var(--r-lg); border: 1px dashed #c9c2b0;
  background: var(--ivory); color: var(--ink-soft); font-size: 14px;
}
.sbi-flow .bl-slots-empty { display: grid; gap: 4px; }
.sbi-flow .bl-slots-empty b { font-size: 15px; color: var(--ink); }

.sbi-flow .bl-slot-day { display: grid; gap: 10px; }
.sbi-flow .bl-slot-day h4 {
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-mute); margin: 0;
}

.sbi-flow .bl-slot-times {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px;
}

/* Sized and spaced like .dur above, so the two choices either side of this
   step read as the same kind of control. */
.sbi-flow .bl-slot {
  display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-lg);
  border: 1.5px solid var(--line); background: var(--paper);
  text-align: left; cursor: pointer; transition: all .2s;
}
.sbi-flow .bl-slot b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sbi-flow .bl-slot span { font-size: 12px; color: var(--ink-mute); }
.sbi-flow .bl-slot:hover { border-color: #c9c2b0; }
.sbi-flow .bl-slot.on {
  border-color: var(--baize); background: #f1f7f3;
  box-shadow: 0 0 0 4px rgba(26, 58, 61, .08);
}
/* Keyboard users get the same ring the mouse gets, and a visible one. */
.sbi-flow .bl-slot:focus-visible { outline: 2px solid var(--baize); outline-offset: 2px; }

@media (max-width: 560px) {
  .sbi-flow .bl-slot-times { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}