/* Client launches (2026-10-08): "Your launch · next: <step> on <date>" on Harbor Home and Get connected.
   Story-mode look (play-theme.css tokens); phone first. */
.hl-slot:empty { display: none; }
.hl-slot { margin: 0 0 18px; }
.hl-launch { display: grid; gap: 14px; padding: 22px 24px; max-width: 1120px; }
.hl-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.hl-face { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--sun-soft, #fff7c2); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink, #16130a); }
.hl-copy { min-width: 0; }
.hl-copy .gc-kicker { margin-bottom: 6px; }
.hl-title { margin: 0; font-size: clamp(28px, 4.6vw, 44px); line-height: 1; overflow-wrap: anywhere; }
.hl-title-when { font-size: 0.72em; color: var(--ink, #16130a); }
.hl-sub { margin: 10px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2, rgb(22 19 10 / 72%)); }
.hl-goal { margin: 0; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 2px var(--ink, #16130a); font-size: 15px; line-height: 1.45; }
.hl-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.hl-dots { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hl-dots li { width: 22px; height: 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 2px var(--ink, #16130a); }
.hl-dots li.is-done { background: var(--ink, #16130a); }
.hl-dots li.is-next { background: var(--sun, #ffe14a); }
.hl-dots li.is-late { background: var(--hot, #ff5c8a); }
.hl-progress-text { font-size: 14px; font-weight: 750; color: var(--ink-2, rgb(22 19 10 / 72%)); }
.hl-all > summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hl-steps { display: grid; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.hl-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line, rgb(22 19 10 / 10%)); }
.hl-step.is-next { box-shadow: inset 0 0 0 2px var(--ink, #16130a); background: var(--sun-soft, #fff7c2); }
.hl-step.is-late { background: #fde3df; }
.hl-step.is-done { opacity: 0.78; }
.hl-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--ink, #16130a); font-weight: 900; font-size: 14px; }
.hl-step.is-done .hl-mark { background: var(--ink, #16130a); color: var(--sun, #ffe14a); }
.hl-step.is-late .hl-mark { background: var(--hot, #ff5c8a); color: #fff; box-shadow: none; }
.hl-step-main { display: grid; gap: 4px; min-width: 0; }
.hl-step-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.hl-step-top strong { overflow-wrap: anywhere; }
.hl-when { font-weight: 800; white-space: nowrap; }
.hl-step-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hl-who { font-size: 13px; font-weight: 750; color: var(--ink-2, rgb(22 19 10 / 72%)); }
.hl-note, .hl-detail { font-size: 14px; line-height: 1.45; color: var(--ink-2, rgb(22 19 10 / 72%)); }
.hl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-actions .btn[disabled] { opacity: 1; cursor: default; white-space: normal; text-align: left; }
@media (max-width: 560px) {
  .hl-launch { padding: 18px 16px; }
  .hl-head { grid-template-columns: 1fr; }
  .hl-face { width: 48px; height: 48px; }
}