/* Loading, shared by every public page: soft placeholders in the shape of the cards and results that are coming,
   and the Ask Pete logo with its gold ring filling while an answer page gets ready. */
.sk{display:block;border-radius:8px;background-color:#ece4d3!important;background-image:linear-gradient(100deg,rgba(247,242,231,0) 30%,rgba(247,242,231,.95) 50%,rgba(247,242,231,0) 70%)!important;background-size:300% 100%!important;color:transparent!important;pointer-events:none}
@keyframes sk-shimmer{from{background-position:100% 0}to{background-position:0 0}}
.sk-line{height:14px;max-width:100%}
.sk-line+.sk-line{margin-top:9px}
.sk-w90{width:90%}.sk-w75{width:75%}.sk-w60{width:60%}.sk-w40{width:40%}.sk-w25{width:25%}
.sk-title{height:22px}
.sk-meta{height:11px;margin-top:12px}
.sk-row{pointer-events:none}
.sk-tile{min-height:76px;border-radius:14px}

/* The logo with its gold ring filling in as the answer page downloads (the page script sets how far). */
.ring-loader{width:100px;height:100px;display:block}
.ring-loader .ring-fill{stroke-dasharray:0 100;transition:stroke-dasharray .25s ease-out}
.slow-note{margin:14px 0 0;font:14px/1.5 'Figtree',system-ui,sans-serif;color:#645d4f;text-align:center}

/* Near-instant loads show nothing: placeholders and the ring appear only once a load has taken 0.4 seconds. */
.sk{animation:sk-shimmer 1.5s linear infinite,sk-appear 0s linear .4s both}
.load-skeleton{animation:sk-appear 0s linear .4s both}
@keyframes sk-appear{from{visibility:hidden}to{visibility:visible}}
@media (prefers-reduced-motion:reduce){.sk{animation:sk-appear 0s linear .4s both}.ring-loader .ring-fill{transition:none}}

/* Answer page: while the appearance loads, the page is laid out with the same grid, heading, video and rail boxes as the
   finished page (the skeleton carries their classes), so nothing grows or shrinks when the answer appears. The video spot
   shows the ring and the question, transcript and questions rail are placeholders. */
.public-viewer #load-state{padding:0}
.load-video{background:radial-gradient(120% 90% at 30% 10%,#2f4565,#182b45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.load-video p{margin:0;font:500 15px 'Figtree',system-ui,sans-serif;letter-spacing:.02em;color:#f1eadb}
.load-title .sk-title{height:var(--t-question-title,24px)}
.load-lines{padding-top:22px}
.load-lines .sk-meta{margin:0 0 14px}
.load-lines .sk-line{height:16px}
.load-rail{grid-row:2;grid-column:2;border-left:1px solid var(--line);padding:14px 18px}
.load-rail .sk-meta{margin:0 0 18px}
.load-rail .sk-line+.sk-line{margin-top:16px}
@media(max-width:760px){.load-rail{display:none}.load-lines,.load-skeleton .slow-note{padding:22px 18px 0}.load-skeleton .slow-note{margin-top:0}}