/* Skeleton loaders for content that is inserted after first paint. */

@keyframes sk-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.sk-line,.sk-option,.sk-cell,.sk-chip,.sk-avatar{
  background-color:#E7EEEE;
  background-image:linear-gradient(90deg,#E7EEEE 0%,#F4F9F9 46%,#E7EEEE 92%);
  background-size:220% 100%;
  animation:sk-shimmer 1.35s linear infinite;
}

.sk-line{display:block;height:12px;border-radius:3px}
.sk-line.is-title{height:26px;border-radius:4px}
.sk-line.is-short{height:10px}

/* Question 1 placeholder before questionnaire.js renders into #quizBody. */
.q-skeleton{display:flex;flex-direction:column;gap:12px;padding:2px 0;min-height:270px}
.q-skeleton .sk-title{width:min(72%,540px)}
.q-skeleton .sk-hint{width:min(48%,360px);height:12px}
.q-skeleton-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}
.q-skeleton .sk-option{height:48px;border:1px solid #E3EAEC;border-radius:4px}

/* Cal.com calendar placeholder, shown after the questionnaire is submitted. */
.cal-stage{position:relative}
.cal-stage.is-loading{min-height:540px}
.cal-stage #calLoading{position:absolute;inset:0;z-index:2;min-height:0;height:100%;margin:0;overflow:hidden}
.cal-skeleton{padding:18px;border:1px solid var(--line);border-radius:4px;background:var(--surface);min-height:540px}
.cal-skeleton-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:14px;border-bottom:1px solid var(--line2)}
.cal-skeleton-head .sk-title{width:170px}
.cal-skeleton-head .sk-sub{width:110px;height:10px}
.cal-skeleton-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:16px}
.cal-skeleton-week span{height:10px;border-radius:3px}
.cal-skeleton-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:12px}
.cal-skeleton-grid .sk-cell{height:54px;border-radius:3px}
.cal-skeleton-foot{display:flex;gap:8px;margin-top:16px}
.cal-skeleton-foot .sk-chip{width:86px;height:28px;border-radius:999px}

/* Images reserve a shimmering surface until the file has decoded. */
img.sk-img{background-color:#E7EEEE;background-image:linear-gradient(90deg,#E7EEEE 0%,#F4F9F9 46%,#E7EEEE 92%);background-size:220% 100%;animation:sk-shimmer 1.35s linear infinite}
img.sk-img.sk-loaded{animation:none;background-image:none;background-color:transparent}
.btn:disabled{opacity:.55;cursor:not-allowed}

@media(prefers-reduced-motion:reduce){
  .sk-line,.sk-option,.sk-cell,.sk-chip,.sk-avatar,img.sk-img{animation:none}
}
@media(max-width:680px){
  .cal-skeleton{min-height:480px;padding:14px}
  .cal-stage.is-loading{min-height:480px}
  .cal-skeleton-grid .sk-cell{height:44px}
  .q-skeleton{min-height:440px}
  .q-skeleton-options{grid-template-columns:1fr;gap:8px}
}