/* ================= TEAM INSIGHTS — THE LAUNCH CARD'S OWN SHEET =================
   Every selector is prefixed `ti-launch-`, so css-class-collision-check.py has nothing to catch;
   tokens only, no new palette — every colour is one of alt-tokens.css's roles, so both themes
   and a team's custom accent come free. */

/* `.ti-launch-card` supplies only the internal rhythm (one flex gap) — the outer frame (border,
   background, padding) is `.stg-sec`/`.stg-sec-body`'s, supplied once per card on the pane. The
   head block (icon, title, subtitle) moved into the section header; `.ti-launch-head` and its
   siblings are retired — nothing in the runtime JS emits them any more. */

.alt-app .ti-launch-card{
  display:flex; flex-direction:column; gap:var(--a-4);
}

/* One hairline where there used to be two — see team-insights-launch.js's tiLaunchRule(). Built
   as a div (not <hr>), so its colour is the token line, not the user agent's default border. */
.alt-app .ti-launch-rule{
  height:1px;
  background:var(--a-line-soft);
}

.alt-app .ti-launch-desc{
  margin:0;
  /* 13px, the scale's own step, not 12.5px — matches .ti-launch-benefit-text below it; both are
     body-level explanatory copy. */
  font-size:13px; line-height:1.55;
  color:var(--a-dim);
}

.alt-app .ti-launch-benefits{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--a-3);
}

.alt-app .ti-launch-benefit{
  display:flex; align-items:center; gap:var(--a-3);
}

.alt-app .ti-launch-benefit-icon{
  flex:0 0 auto;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--a-r-sm);
  background:var(--a-blue-soft);
  color:var(--a-blue-text);
}
.alt-app .ti-launch-benefit-icon svg{ width:15px; height:15px; }

.alt-app .ti-launch-benefit-text{
  font-size:13px; line-height:1.4;
  color:var(--a-text);
}

/* Its own class, not `.btn.primary` — that shared rule fixes a 32px control height, and this
   button is taller, full width, with its glyph and chevron at opposite edges. Colour still comes
   from the same two primary-action roles (`--a-blue-fill` fill, `--a-blue` border, white text). */
.alt-app .ti-launch-cta{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  height:var(--a-ctl-lg);
  padding:0 var(--a-4);
  border:1px solid var(--a-blue);
  border-radius:var(--a-r);
  background:var(--a-blue-fill);
  color:#fff;
  font:600 14px/1 var(--a-body);
  cursor:pointer;
}
.alt-app .ti-launch-cta:hover:not(:disabled){ filter:brightness(1.06); }
.alt-app .ti-launch-cta:focus-visible{ outline:2px solid var(--a-ring); outline-offset:2px; }
.alt-app .ti-launch-cta:disabled{ opacity:.5; cursor:not-allowed; }

.alt-app .ti-launch-cta-left{
  display:inline-flex; align-items:center; gap:8px;
  min-width:0;
}
.alt-app .ti-launch-cta-icon svg,
.alt-app .ti-launch-cta-chevron svg{ width:16px; height:16px; }
.alt-app .ti-launch-cta-icon{ flex:0 0 auto; display:flex; }
.alt-app .ti-launch-cta-chevron{ flex:0 0 auto; display:flex; }

.alt-app .ti-launch-cta-label{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* THE DISABLED-SHELL NOTE. Only present when JS/features/team-insights-shell.js has not loaded
   (see the JS file's shellReady guard) — never shown beside a working button. */
.alt-app .ti-launch-unavailable{
  margin:0;
  font-size:12px; line-height:1.4;
  color:var(--a-faint);
}

/* ---------- phone ---------- */
@media (max-width:639px){
  /* No `.ti-launch-card` padding rule here any more — `.stg-sec-body` supplies the card's outer
     padding now, and CSS/alt/alt-settings-stride.css owns that breakpoint for every card on the
     pane, this one included. Only this class's OWN internal gap narrows here. */
  .alt-app .ti-launch-card{ gap:var(--a-3); }
  .alt-app .ti-launch-cta{ padding:0 var(--a-3); }
}