/* GazeTo — detail screen redesign styles */

/* ── Header typography (AssistUK look) ──
   The header area is a flex column with gap:8px, so reset the eyebrow's
   default bottom margin and tighten its spacing to the title. */
.screen-activity-detail .detail-eyebrow {
  margin: 0;
}

.screen-activity-detail .detail-name {
  font-family: var(--f-display, 'Merriweather', Georgia, serif);
  font-weight: 900;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--c-fg1, var(--color-text, #1d1d1f));
  margin: 0;
  text-wrap: balance;
}

/* ── Stufe chip on the thumbnail (keep absolute overlay placement) ── */
.screen-activity-detail .detail-stufe-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* ── Top-bar buttons sizing — the shared pill/primary buttons are tall
   (min-height:56px); scale them down a touch for the compact toolbar. ── */
.screen-activity-detail .detail-topbar .btn-ghost-pill,
.screen-activity-detail .detail-topbar .btn-primary-blue {
  min-height: 48px;
  padding: 11px 22px;
  font-size: 16px;
}

.screen-activity-detail .detail-topbar .detail-start-btn {
  padding: 11px 28px;
}

/* ── Setting-cell title icons (Lucide) — small, inline, brand-tinted ── */
.screen-activity-detail .setting-cell__title {
  display: flex;
  align-items: center;
  gap: 7px;
}

.screen-activity-detail .setting-cell__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-primary, #4b698c);
}

.screen-activity-detail .setting-cell__icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* ── "Das wird geübt" check bullets (Lucide) ── */
.screen-activity-detail .detail-goal-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.screen-activity-detail .detail-goal-check svg {
  width: 15px;
  height: 15px;
  display: block;
  stroke-width: 3;
}