/* ============================================================================
   Coaching shell — chrome that wraps every coaching sub-surface.
   ============================================================================
   Token-driven; no hex outside translucent backdrop-blur cards (which intentionally
   layer with arbitrary alpha values that aren't worth promoting to tokens).

   Class prefix: `c-coaching-` for shell-owned classes. Component-library classes
   (c-tap, c-focusable, hidden-sm) are inherited from the global system.
   ========================================================================= */

.c-coaching-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  color: var(--color-text);
  font-family: var(--font-body);
  z-index: var(--z-base);
}

/* ----------------------------------------------------------------------------
   Top bar — breadcrumbs + page title.
   --------------------------------------------------------------------------- */

/* The topbar carries only the breadcrumb (the H1 title is already
 * visually-hidden below) and the breadcrumb itself is redundant with
 * the global nav (which highlights COACHING) plus the sub-nav active
 * tab (which highlights the current sub-page). Three stacked bars
 * felt heavy; we keep the breadcrumb in the DOM so screen readers
 * still announce the page hierarchy, but apply the visually-hidden
 * pattern so the bar takes zero visual space. */
.c-coaching-shell__topbar {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.c-coaching-shell__breadcrumbs {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: none;
}

.c-coaching-shell__crumbs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.c-coaching-shell__crumb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.c-coaching-shell__crumb-link {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.c-coaching-shell__crumb-link:hover,
.c-coaching-shell__crumb-link:focus-visible {
  color: var(--color-link);
  outline: none;
}

.c-coaching-shell__crumb-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.c-coaching-shell__crumb-current {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.c-coaching-shell__crumb-sep {
  color: var(--color-text-subtle);
  margin-left: var(--space-1);
  opacity: 0.5;
}

/* The big centred page title was the dominant chrome before the redesign;
 * now the breadcrumb above the sub-nav carries the same information in a
 * smaller, mono-caps form (matching the design artboard). Hide the title
 * to avoid the duplication. Kept in the DOM so :focus-visible / aria-flow
 * work for screen readers. */
.c-coaching-shell__title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------------------------
   Sub-nav (tab strip) — sticks visually under the top bar with a soft
   shadow separator. Scrolls horizontally on overflow (mobile).
   --------------------------------------------------------------------------- */

.c-coaching-shell__subnav-wrap {
  position: relative;
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  background: var(--color-bg);
}

/* Right-edge fade hints at scrollable overflow when the subnav has more
 * tabs than fit on screen — replaces the native scrollbar which spawned
 * a chunky desktop bar that competed with the active-tab underline. */
.c-coaching-shell__subnav-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 1px;
  width: 28px;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    var(--color-bg)
  );
  pointer-events: none;
  opacity: 0.9;
}

.c-coaching-shell__subnav {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--space-1);
  padding: 0 var(--space-4);
  max-width: var(--container-xl);
  width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  /* Hide the scrollbar entirely. With many tabs (Hub / AI Coach / Lessons
   * / Builds / Coaches / Courses / Library / Sessions / Lobbies / Friends
   * / Inbox / Coach Mode) the native bar on Windows/desktop is chunky
   * and competes with the active-tab underline. Scrolling still works
   * via wheel / trackpad / touch; the gradient fade on -wrap::after
   * tells the user there's more content. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.c-coaching-shell__subnav::-webkit-scrollbar {
  display: none;
}

/* Tabs match the JSX artboard: display font, uppercase, letter-spaced,
 * tight padding. Active tab gets the cyan accent + a 2px underline that
 * GLOWS (not just a solid bar) to read as a hot-cathode hit. The
 * underline sits on the bottom edge of the tab block, NOT on the
 * subnav-wrap's border, so it visually overlaps and brightens the line. */
.c-coaching-shell__tab {
  position: relative;
  flex: 0 0 auto;
  padding: 14px 16px;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}

.c-coaching-shell__tab:hover {
  color: var(--color-text);
}

.c-coaching-shell__tab:focus-visible {
  outline: none;
  color: var(--color-text);
  background: var(--color-accent-soft);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.c-coaching-shell__tab.is-active {
  color: var(--color-accent);
}

.c-coaching-shell__tab.is-active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;  /* sit on top of the subnav-wrap's bottom border */
  height: 2px;
  background: var(--color-accent);
  box-shadow: 0 0 12px var(--color-accent);
  pointer-events: none;
}

.c-coaching-shell__tab.is-active:hover {
  color: var(--color-accent-hover);
}

@media (prefers-reduced-motion: reduce) {
  .c-coaching-shell__tab.is-active::after {
    box-shadow: none;
  }
}

/* ----------------------------------------------------------------------------
   Body — content area + optional right rail.
   --------------------------------------------------------------------------- */

.c-coaching-shell__body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  /* Tab strip already provides visual chrome; the body needs only a
   * small breathing gap (was 28px which combined with the global header
   * margin-bottom and old breadcrumb bar to push content unusually low). */
  padding: 12px 40px 56px;
  max-width: var(--container-xl);
  width: 100%;
  margin: 0 auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* When a sub-surface unhides the right rail, the layout splits into 2 cols.
   Sub-surfaces opt in by adding the .has-right-rail class to the body when
   they unhide the rail; we also use :has() as a progressive enhancement so
   simply unhiding the rail (without the class) works on modern browsers. */
.c-coaching-shell__body.has-right-rail {
  grid-template-columns: minmax(0, 1fr) 320px;
}

@supports selector(:has(*)) {
  .c-coaching-shell__body:has(.c-coaching-shell__right-rail:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

.c-coaching-shell__content {
  min-width: 0;
  min-height: 0;
}

.c-coaching-shell__content.is-busy {
  pointer-events: none;
  user-select: none;
}

.c-coaching-shell__right-rail {
  min-width: 0;
}

/* ----------------------------------------------------------------------------
   Busy overlay — sits inside the content slot, not over the whole shell,
   so the sub-nav remains interactive while a route handler is loading.
   --------------------------------------------------------------------------- */

.c-coaching-shell__busy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: rgba(10, 13, 20, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-lg);
  pointer-events: auto;
  z-index: var(--z-raised);
}

.c-coaching-shell__busy[hidden] {
  display: none;
}

.c-coaching-shell__busy-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--color-border-strong);
  border-top-color: var(--color-accent);
  border-radius: var(--radius-circle);
  animation: c-coaching-spin var(--duration-deliberate) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .c-coaching-shell__busy-spinner {
    animation-duration: 0ms;
  }
}

@keyframes c-coaching-spin {
  to { transform: rotate(360deg); }
}

.c-coaching-shell__busy-msg {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
}

/* ----------------------------------------------------------------------------
   Mobile (<= 768px)
   - Tighter horizontal padding
   - Smaller title
   - Right rail stacks below content (or is hidden, depending on .hidden-sm)
   - Sub-nav already scrolls horizontally — no override needed
   --------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* Topbar is visually-hidden globally; no mobile override needed. */

  .c-coaching-shell__title {
    font-size: var(--text-xl);
  }

  .c-coaching-shell__subnav {
    padding: 0 var(--space-3);
  }

  .c-coaching-shell__tab {
    /* Bumped padding (was --space-2 / --space-3) so tap targets clear the
       44px iOS HIG minimum on mobile. Combined with min-height + flex
       alignment, even short labels stay easy to hit. */
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .c-coaching-shell__body {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-3);
    padding: var(--space-3);
  }

  /* Even when a right rail is unhidden, on mobile we stack it under content. */
  .c-coaching-shell__right-rail {
    grid-row: 2;
  }
}

/* ----------------------------------------------------------------------------
   Generic placeholder — used by stub route handlers. Keeps the look
   consistent across surfaces that haven't shipped yet.
   --------------------------------------------------------------------------- */

.coaching-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  text-align: center;
}


/* ============================================================
 * Coming Soon — vespene-1.2 launch gating.
 * Tab-strip "Soon" badge + content-area banner.
 * Drop these rules on launch (TODO: vespene-1.2).
 * ============================================================ */

/* Tiny pill next to the tab label. Picks up the current text colour so
 * it inherits the active/hover/inactive treatment automatically. */
.c-coaching-shell__tab-soon {
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-accent-soft, rgba(86,194,255,0.12));
  color: var(--color-accent, #56c2ff);
  vertical-align: middle;
  line-height: 1.4;
  white-space: nowrap;
}
/* On the active tab, the label colour switches to the accent — bump the
 * badge to a contrasting fill so it doesn't disappear into the underline. */
.c-coaching-shell__tab.is-active .c-coaching-shell__tab-soon {
  background: var(--color-accent, #56c2ff);
  color: var(--color-bg, #0a0d12);
}

/* Centered banner that fills the body slot for pre-launch routes. */
.coaching-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 360px;
  padding: 56px 24px;
  text-align: center;
  border: 1px dashed var(--color-border, #2a2f36);
  border-radius: var(--radius-lg, 12px);
  background:
    radial-gradient(ellipse at top, rgba(86,194,255,0.06), transparent 60%),
    var(--color-bg-elevated, var(--color-bg, #0f1218));
}
.coaching-coming-soon__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  font-size: var(--text-xs, 11px);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent, #56c2ff);
  background: var(--color-accent-soft, rgba(86,194,255,0.12));
  border-radius: var(--radius-pill, 999px);
}
.coaching-coming-soon__eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.coaching-coming-soon__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -0.01em;
  font-weight: var(--weight-bold, 700);
  color: var(--color-text, #e6e9ef);
}
.coaching-coming-soon__body {
  margin: 0;
  max-width: 540px;
  font-size: var(--text-sm, 14px);
  line-height: 1.55;
  color: var(--color-text-muted, #9ba3ae);
}
.coaching-coming-soon__actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 720px) {
  .coaching-coming-soon { min-height: 260px; padding: 36px 16px; }
  .coaching-coming-soon__title { font-size: 22px; }
}

/* (Builds sub-tab embedding CSS removed 2026-06-10 — the SC2 guides moved to
   the Build tab's Corpus Build Library; #/coaching/builds is a redirect.) */