/* =====================================================================
   LAUNCH OPERATIONS - STYLES  (Module #2)
   ---------------------------------------------------------------------
   Built on the design system + shared .mc-* / .cw-* components. Adds only
   launch-specific patterns: portfolio, campaign library, wizard, and the
   phase timeline. Class prefix: .lo
   ===================================================================== */

.lo { display: flex; flex-direction: column; gap: var(--sp-6); max-width: 1480px; }
.lo-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.lo-head__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ---- Filters ---- */
.lo-filters { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--ds-overlay); border: 1px solid var(--ds-hairline); align-self: flex-start; }
.lo-filter { border: none; background: transparent; cursor: pointer; padding: 6px 16px; border-radius: var(--r-pill); font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 500; color: var(--ds-text-lo); }
.lo-filter:hover { color: var(--ds-text-hi); }
.lo-filter.is-active { color: var(--ds-text-hi); background: var(--ds-surface-2); box-shadow: var(--el-1); }

/* ---- Portfolio ---- */
.lo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-4); }
.lo-grid--tpl { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.lo-card { display: flex; flex-direction: column; gap: var(--sp-3); text-align: left; background: var(--ds-surface-2); border: 1px solid var(--ds-hairline); border-radius: var(--r-lg); padding: var(--sp-5); cursor: pointer; box-shadow: var(--el-1); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.lo-card:hover { transform: translateY(-3px); border-color: var(--ds-hairline-strong); box-shadow: var(--el-2), var(--el-glow); }
.lo-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.lo-card__title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: var(--ds-text-hi); }
.lo-card__sub { font-size: var(--fs-sm); color: var(--ds-text-lo); margin-top: -6px; }
.lo-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.lo-card__signal { font-size: var(--fs-xs); color: var(--ds-text-lo); }

/* ---- Templates ---- */
.lo-tpl { display: flex; flex-direction: column; gap: var(--sp-3); background: var(--ds-surface-2); border: 1px solid var(--ds-hairline); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--el-1); }
.lo-tpl__name { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: var(--ds-text-hi); }
.lo-tpl__desc { margin: 0; font-size: var(--fs-sm); color: var(--ds-text-lo); line-height: var(--lh-normal); }
.lo-tpl__phases { display: flex; flex-wrap: wrap; gap: 6px; }
.lo-tpl__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-2); }

/* ---- Wizard ---- */
.lo-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.lo-mode { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: var(--sp-5); border-radius: var(--r-lg); border: 1px solid var(--ds-hairline); background: var(--ds-surface-2); cursor: pointer; transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.lo-mode:hover { transform: translateY(-2px); border-color: var(--ds-hairline-strong); box-shadow: var(--el-2); }
.lo-mode.is-active { border-color: var(--ds-gold-500); box-shadow: var(--el-glow); }
.lo-mode__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--ds-text-hi); }
.lo-mode__desc { font-size: var(--fs-sm); color: var(--ds-text-lo); line-height: var(--lh-snug); }
.lo-form { display: grid; gap: var(--sp-4); max-width: 560px; }
.lo-form__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }

/* ---- Timeline (stepper) ---- */
.lo-timeline { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.lo-step { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 110px; padding: var(--sp-3); border-radius: var(--r-md); background: var(--ds-surface-1); border: 1px solid var(--ds-hairline); position: relative; }
.lo-step__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ds-hairline-strong); }
.lo-step--done .lo-step__dot { background: var(--ds-positive); }
.lo-step--active .lo-step__dot { background: var(--ds-gold-500); box-shadow: 0 0 8px var(--ds-glow-strong); }
.lo-step--active { border-color: var(--ds-hairline-strong); }
.lo-step__name { font-size: var(--fs-sm); font-weight: 600; color: var(--ds-text-hi); }
.lo-step__meta { font-size: var(--fs-xs); color: var(--ds-text-lo); }

/* ---- Phases & tasks ---- */
.lo-phases { display: grid; gap: var(--sp-4); }
.lo-phase { padding: var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--ds-hairline); background: var(--ds-surface-1); }
.lo-phase--active { border-color: var(--ds-hairline-strong); }
.lo-phase__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.lo-phase__name { flex: 1; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--ds-text-hi); }
.lo-phase__empty { margin: 0; font-size: var(--fs-sm); color: var(--ds-text-mute); }
.lo-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lo-task { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2); border-radius: var(--r-sm); }
.lo-task:hover { background: var(--ds-overlay); }
.lo-task .mc-check { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--ds-hairline-strong); display: grid; place-items: center; font-size: 12px; color: var(--ds-on-gold); flex: none; }
.lo-task.is-done .mc-check { background: var(--ds-gold-500); border-color: var(--ds-gold-500); }
.lo-task.is-done .lo-task__title { text-decoration: line-through; color: var(--ds-text-mute); }
.lo-task__text { display: flex; flex-direction: column; }
.lo-task__title { font-size: var(--fs-base); color: var(--ds-text-hi); }
.lo-task__owner { font-size: var(--fs-xs); color: var(--ds-text-lo); }

/* ---- Integration hint ---- */
.lo-hint { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px dashed var(--ds-hairline-strong); background: var(--ds-overlay); font-size: var(--fs-sm); color: var(--ds-text-lo); }
.lo-hint--ok { border-style: solid; color: var(--ds-positive); background: var(--ds-positive-soft); border-color: color-mix(in srgb, var(--ds-positive) 26%, transparent); }