/* First-action choices use standard white surfaces; only the activity hero
   uses the existing operation surface tokens. */
.onboarding-page, .activity-page { max-width: 920px; margin: 0 auto; padding-bottom: var(--space-40); }
.onboarding-hero, .activity-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-28);
  margin-bottom: var(--space-20);
  border-radius: var(--web-surface-radius);
  background: var(--card);
  box-shadow: var(--web-surface-shadow);
}
.onboarding-hero { padding: var(--space-24) 0; border-bottom: var(--border-width) solid var(--line); }
.onboarding-hero h1, .activity-hero h1 { margin-top: var(--space-8); font-size: var(--font-size-hero-mobile); line-height: 1.4; }
.onboarding-hero p, .activity-hero p { max-width: 650px; margin-top: var(--space-10); color: var(--ink-2); font-size: var(--font-size-body); }
.onboarding-choice-panel { margin-bottom: var(--space-20); }
#onboardingError:empty { display: none; }
.onboarding-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
.onboarding-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-10);
  min-height: calc(var(--space-96) + var(--space-16));
  padding: var(--space-16);
  text-align: left;
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  transition: border-color var(--motion-duration) var(--motion-easing), background var(--motion-duration) var(--motion-easing);
}
.onboarding-choice:hover, .onboarding-choice.is-selected { border-color: var(--brand); background: var(--brand-soft); }
.onboarding-choice:active { background: var(--bg); }
.onboarding-choice:disabled { cursor: wait; opacity: .6; }
.onboarding-choice:focus-visible, .activity-page a:focus-visible, .onboarding-page a:focus-visible { outline: var(--focus-width) solid var(--brand); outline-offset: var(--focus-offset); }
.onboarding-choice > span:nth-child(2) { min-width: 0; flex: 1; }
.onboarding-choice-icon { font-size: var(--font-size-hero-mobile); line-height: 1.2; }
.onboarding-choice b { display: block; font-size: var(--font-size-card-title); }
.onboarding-choice small { display: block; margin-top: var(--space-6); color: var(--ink-2); font-size: var(--font-size-small); line-height: var(--line-height-body); }
.onboarding-choice-mark { margin-left: auto; color: var(--brand); font-size: var(--font-size-section-title); }
.onboarding-choice-actions, .onboarding-plan-actions { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; margin-top: var(--space-20); }
.onboarding-saved-state, .onboarding-progress-label, .activity-member-state { color: var(--ink-muted-readable); font-size: var(--font-size-small); }
.onboarding-plan { padding: var(--space-22) 0; border-bottom: var(--border-width) solid var(--line); border-radius: var(--web-surface-radius); background: var(--card); }
.onboarding-plan-compact { margin-top: var(--space-16); }
.onboarding-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-16); }
.onboarding-plan h2 { margin-top: var(--space-6); font-size: var(--font-size-section-title); }
.onboarding-steps { list-style: none; margin-top: var(--space-18); padding: 0; }
.onboarding-step { display: flex; align-items: flex-start; gap: var(--space-12); padding: var(--space-14) 0; border-bottom: var(--border-width) solid var(--line); }
.onboarding-step:last-child { border-bottom: 0; }
.onboarding-step-copy { min-width: 0; flex: 1; }
.onboarding-step-number { display: grid; place-items: center; flex: 0 0 var(--space-28); height: var(--space-28); border-radius: var(--radius-pill); background: var(--bg); color: var(--ink-2); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); }
.onboarding-step.is-done .onboarding-step-number { background: var(--brand-soft); color: var(--brand); }
.onboarding-step b { font-size: var(--font-size-body); }
.onboarding-step p { margin-top: var(--space-4); color: var(--ink-2); font-size: var(--font-size-small); }
.onboarding-step > a { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4); min-width: var(--touch-target-min); min-height: var(--touch-target-min); margin-left: auto; flex: 0 0 auto; align-self: center; font-size: var(--font-size-small); }
.onboarding-step-state { color: var(--green-ink); }
.onboarding-empty-note { padding: var(--space-22); border: var(--border-width) dashed var(--line); border-radius: var(--web-surface-radius); color: var(--ink-muted-readable); text-align: center; }
.onboarding-page .page-back, .activity-page .page-back, .onboarding-plan-actions > a { display: inline-flex; align-items: center; min-height: var(--touch-target-min); min-width: var(--touch-target-min); }
.onboarding-hero .operation-eyebrow, .activity-hero .operation-eyebrow, .onboarding-plan .operation-eyebrow { color: var(--brand); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); }
.activity-hero { background: var(--operation-bg-indigo); }
.activity-hero > div:first-child { min-width: 0; flex: 1; }
.activity-hero-art { width: calc(var(--space-80) * 2); flex: 0 0 calc(var(--space-80) * 2); }
.activity-hero-art .medal-art { width: 100%; height: auto; }
.activity-launch-note { display: block; margin-top: var(--space-14); color: var(--ink-muted-readable); font-size: var(--font-size-small); }
.activity-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: var(--space-24); }
.activity-grid .panel { margin-bottom: 0; min-width: 0; }
.activity-page .sec-h { flex-wrap: wrap; align-items: flex-start; }
.activity-state { padding: var(--space-6) var(--space-10); border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--brand); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); }
.activity-state-filled, .activity-state-disabled, .activity-state-demo { background: var(--bg); color: var(--ink-muted-readable); }
.activity-state-preview, .activity-state-scheduled { background: var(--amber-soft); color: var(--amber); }
.activity-tier-list { margin-top: var(--space-18); }
.activity-tier { display: grid; grid-template-columns: minmax(0, 1fr) var(--space-80) var(--space-60); align-items: center; gap: var(--space-12); padding: var(--space-14) 0; border-bottom: var(--border-width) solid var(--line); }
.activity-tier-copy b, .activity-tier-copy span { display: block; }
.activity-tier-copy b { font-size: var(--font-size-body); }
.activity-tier-copy span { margin-top: var(--space-4); color: var(--ink-muted-readable); font-size: var(--font-size-caption); }
.activity-tier-track { height: var(--space-8); overflow: hidden; border-radius: var(--radius-pill); background: var(--bg); }
.activity-tier-track span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.activity-tier > strong { text-align: right; font-size: var(--font-size-small); }
.activity-tier > strong small { font-weight: var(--font-weight-regular); color: var(--ink-muted-readable); }
.activity-member-state { margin-left: auto; }
.activity-rank { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: var(--space-16) 0; border-bottom: var(--border-width) solid var(--line); }
.activity-rank span { color: var(--ink-muted-readable); font-size: var(--font-size-small); }
.activity-rank strong { color: var(--brand); font-size: var(--font-size-card-title); line-height: var(--line-height-body); }
.activity-member-note { padding: var(--space-18) 0; color: var(--ink-2); font-size: var(--font-size-small); }
.activity-source { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-12) 0; min-height: var(--touch-target-min); border-bottom: var(--border-width) solid var(--line); font-size: var(--font-size-small); }
.activity-source span { color: var(--ink-muted-readable); flex-shrink: 0; }
.activity-source b { min-width: 0; overflow-wrap: anywhere; }
.activity-source .ui-icon { flex-shrink: 0; }
.activity-badges { margin-top: var(--space-14); }
.activity-badge { display: flex; align-items: center; gap: var(--space-10); padding: var(--space-12) 0; border-bottom: var(--border-width) solid var(--line); }
.activity-badge .medal-art { width: var(--space-36); height: var(--space-36); flex-shrink: 0; }
.activity-badge > span { min-width: 0; }
.activity-badge b, .activity-badge small { display: block; }
.activity-badge b { font-size: var(--font-size-small); }
.activity-badge small { margin-top: var(--space-2); color: var(--ink-muted-readable); font-size: var(--font-size-caption); }
.activity-badge.unlocked small { color: var(--green-ink); }
.activity-note { margin-top: var(--space-16); }
.activity-note ul { margin: var(--space-12) 0 0 var(--space-20); color: var(--ink-2); font-size: var(--font-size-small); }
.activity-note li + li { margin-top: var(--space-8); }
.publication-next { padding: var(--space-18) 0; margin-bottom: var(--space-20); border-bottom: var(--border-width) solid var(--line); }
.publication-next h2 { font-size: var(--font-size-section-title); }
.publication-next p { color: var(--ink-2); font-size: var(--font-size-small); margin-top: var(--space-6); }
.publication-next .text-link { display: inline-flex; align-items: center; min-height: var(--touch-target-min); }
@media (max-width: 900px) {
  .onboarding-choice-grid { grid-template-columns: 1fr; }
  .onboarding-choice { min-height: 0; }
  .activity-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .onboarding-page, .activity-page { padding-bottom: var(--space-24); }
  .onboarding-hero { padding: var(--space-18) 0; }
  .activity-hero { padding: var(--space-20); flex-wrap: wrap; }
  .activity-hero > div:first-child { flex-basis: 100%; }
  .activity-hero-art { width: var(--space-80); flex-basis: var(--space-80); margin-left: auto; }
  .onboarding-plan-head { flex-wrap: wrap; }
  .onboarding-step { flex-wrap: wrap; }
  .onboarding-step > a { margin-left: var(--space-40); flex-basis: calc(100% - var(--space-40)); justify-content: flex-start; }
  .activity-tier { grid-template-columns: minmax(0, 1fr) var(--space-60); gap: var(--space-8); }
  .activity-tier-track { grid-column: 1 / -1; grid-row: 2; }
  .activity-tier > strong { grid-column: 2; grid-row: 1; }
  .activity-member-state { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .onboarding-choice { transition: none; } }