.share-sheet {
  width: min(390px, 100vw);
  padding: 22px 16px calc(20px + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  background: #fff;
  box-shadow: 0 -8px 30px rgb(0 0 0 / 0.12);
  animation: sheet-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.share-sheet .sheet-header > div > span {
  color: var(--brand-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.share-sheet .sheet-header h2 {
  margin: 4px 0 0;
  font-size: 19px;
}

.share-sheet-intro,
.share-code > p,
.share-login > p {
  margin: 14px 0;
  color: var(--ink-secondary);
  font-size: 11px;
  line-height: 1.65;
}

.share-options {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.share-options > button {
  display: grid;
  width: 100%;
  min-height: 70px;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 0;
  background: #fff;
  color: var(--ink-primary);
  cursor: pointer;
  text-align: left;
}

.share-options > button + button { border-top: 1px solid var(--line); }
.share-options > button > span:first-child {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-primary);
}
.share-options svg { width: 18px; height: 18px; }
.share-options > button > svg { color: var(--ink-tertiary); }
.share-options strong,
.share-options small { display: block; }
.share-options strong { font-size: 13px; }
.share-options small { margin-top: 3px; color: var(--ink-tertiary); font-size: 10px; }

.share-boundary {
  display: block;
  margin-top: 14px;
  color: var(--ink-tertiary);
  font-size: 9px;
  line-height: 1.5;
  text-align: center;
}

.share-login {
  position: relative;
  padding-top: 28px;
  text-align: center;
}
.share-login > .icon-button { position: absolute; top: 18px; right: 16px; }
.share-stage-icon {
  display: grid;
  width: 52px;
  height: 52px;
  margin: 0 auto 10px;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-primary);
}
.share-stage-icon svg { width: 24px; height: 24px; }
.share-login > small { color: var(--brand-primary); font-size: 10px; font-weight: 700; }
.share-login h2 { margin: 6px 0 0; font-size: 20px; }
.share-login em { display: block; margin-top: 10px; color: var(--ink-tertiary); font-size: 9px; font-style: normal; }

.share-primary,
.share-secondary {
  width: 100%;
  min-height: 46px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.share-primary { border: 0; background: var(--brand-primary); color: #fff; }
.share-secondary { margin-top: 8px; border: 1px solid var(--line); background: #fff; color: var(--brand-primary); }

.share-code-placeholder {
  display: grid;
  width: 148px;
  height: 148px;
  margin: 18px auto 14px;
  place-content: center;
  justify-items: center;
  border: 1px dashed var(--brand-primary);
  background: repeating-linear-gradient(45deg, #f4f7f6 0 8px, #fff 8px 16px);
  color: var(--brand-primary);
}
.share-code-placeholder svg { width: 42px; height: 42px; }
.share-code-placeholder strong { margin-top: 8px; font-size: 13px; }
.share-code-placeholder small { margin-top: 2px; color: var(--ink-tertiary); font-size: 9px; }

@media (max-width: 359px) {
  .training-primary-action { grid-template-columns: 1fr; }
  .training-primary-action > p { grid-column: 1; text-align: left; }
}