/*
 * HumanProse skeletons: grey-ink bones in the shape of the content that is
 * on its way, with one soft sheet of light passing over them. The light is
 * a pseudo-element moved by transform, it passes a fixed number of times
 * (a long wait settles into still bones, nothing runs while idle) and not
 * at all under reduced motion. Bones are decorative: their container
 * carries aria-hidden, and the live status line keeps saying what is happening.
 *
 * Used by: Explain the changes (cards), the report card's tone and clarity
 * read, the template draft, the notebook's flashcards and the style profile.
 */

body.hp-ui .hp-skel {
    --hp-skel-bone: color-mix(in srgb, var(--hx-ink) 9%, transparent);
    --hp-skel-light: color-mix(in srgb, var(--hx-surface) 72%, transparent);
    position: relative;
    display: block;
    flex: none;
    width: 100%;
    height: .72em;
    overflow: hidden;
    border-radius: 6px;
    background: var(--hp-skel-bone);
}
html[data-hp-theme="dark"] body.hp-ui .hp-skel {
    --hp-skel-bone: color-mix(in srgb, var(--hx-ink) 10%, transparent);
    --hp-skel-light: color-mix(in srgb, var(--hx-ink) 9%, transparent);
}
body.hp-ui .hp-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--hp-skel-light) 50%, transparent);
    transform: translateX(-100%);
}
@media (prefers-reduced-motion: no-preference) {
    body.hp-ui .hp-skel::after { animation: hpSkelSweep 1.6s cubic-bezier(.4, 0, .2, 1) 12; }
    [dir="rtl"] body.hp-ui .hp-skel::after { animation-name: hpSkelSweepRtl; }
    body.hp-ui .hp-skel-group > :nth-child(2n) .hp-skel::after,
    body.hp-ui .hp-skel-group > .hp-skel:nth-child(2n)::after { animation-delay: .12s; }
    body.hp-ui .hp-skel-group > :nth-child(3n) .hp-skel::after,
    body.hp-ui .hp-skel-group > .hp-skel:nth-child(3n)::after { animation-delay: .24s; }
}
@keyframes hpSkelSweep { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@keyframes hpSkelSweepRtl { 0% { transform: translateX(100%); } 60%, 100% { transform: translateX(-100%); } }

/* Widths and shapes (no style attributes: the pages run a strict CSP). */
body.hp-ui .hp-skel.is-95 { width: 95%; }
body.hp-ui .hp-skel.is-88 { width: 88%; }
body.hp-ui .hp-skel.is-80 { width: 80%; }
body.hp-ui .hp-skel.is-70 { width: 70%; }
body.hp-ui .hp-skel.is-60 { width: 60%; }
body.hp-ui .hp-skel.is-50 { width: 50%; }
body.hp-ui .hp-skel.is-40 { width: 40%; }
body.hp-ui .hp-skel.is-30 { width: 30%; }
body.hp-ui .hp-skel.is-20 { width: 20%; }
body.hp-ui .hp-skel.is-title { height: 1.15em; border-radius: 8px; }
body.hp-ui .hp-skel.is-text { height: .62em; }
body.hp-ui .hp-skel.is-chip { width: 92px; height: 22px; border-radius: 999px; }
body.hp-ui .hp-skel.is-pill { width: 132px; height: 32px; border-radius: 999px; }
body.hp-ui .hp-skel.is-pill.is-short { width: 96px; }
body.hp-ui .hp-skel.is-dot { width: 22px; height: 22px; border-radius: 50%; }
body.hp-ui .hp-skel.is-meter { height: 6px; border-radius: 999px; }
body.hp-ui .hp-skel.is-brass { --hp-skel-bone: color-mix(in srgb, var(--hx-quill) 26%, transparent); }
html[data-hp-theme="dark"] body.hp-ui .hp-skel.is-brass { --hp-skel-bone: color-mix(in srgb, var(--hx-quill) 20%, transparent); }

/* ---------- Explain the changes: cards shaped like the cards to come ---------- */
body.hp-ui .hp-learn-card.is-skeleton { gap: 0; min-height: 0; }
body.hp-ui .hp-learn-card.is-skeleton .hp-learn-card-top { margin-bottom: 14px; }
body.hp-ui .hp-skel-pair { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 14px; }
body.hp-ui .hp-skel-pair .hp-skel { height: .95em; }
body.hp-ui .hp-skel-arrow { width: 18px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--hx-quill) 45%, transparent); }
body.hp-ui .hp-skel-lines { display: grid; gap: 9px; }
body.hp-ui .hp-learn-card.is-skeleton .hp-learn-card-actions { gap: 8px; padding-top: 16px; }

/* ---------- The report card: tone and clarity being read ---------- */
body.hp-ui .hp-qa-hero.is-skeleton { display: grid; gap: 10px; align-content: start; }
body.hp-ui .hp-qa-hero.is-skeleton .hp-skel.is-title { width: 58%; height: 1.5em; }

/* ---------- Template draft: a page being written ---------- */
body.hp-ui .hp-skel-page {
    display: grid;
    gap: 11px;
    width: 100%;
    padding: 22px 22px 26px;
    border: 1px solid var(--hx-line);
    border-radius: 18px;
    background: var(--hx-paper);
    text-align: start;
}
body.hp-ui .hp-skel-page .hp-skel-para { display: grid; gap: 10px; margin-top: 8px; }
body.hp-ui .hp-skel-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    color: var(--hx-royal-ink);
    font: 700 .9rem/1.4 var(--hx-f-body);
}
body.hp-ui .hp-skel-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--hx-quill);
    transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
    body.hp-ui .hp-skel-status::before { animation: hpSkelNib 1.2s ease-in-out 15 alternate; }
}
@keyframes hpSkelNib { from { opacity: .35; transform: rotate(45deg) scale(.8); } to { opacity: 1; transform: rotate(45deg) scale(1.1); } }

/* ---------- Notebook: the flashcard on its way ---------- */
body.hp-ui .hpl-card.is-skeleton { display: grid; gap: 12px; }
body.hp-ui .hpl-card.is-skeleton[hidden] { display: none; }
body.hp-ui .hpl-card.is-skeleton .hp-skel.is-title { height: 1.7em; }

/* ---------- Style profile being built ---------- */
body.hp-ui .hp-skel-profile { display: grid; gap: 12px; margin-top: 6px; }
body.hp-ui .hp-skel-profile[hidden] { display: none; }
body.hp-ui .hp-skel-profile .hp-skel-quote { display: grid; gap: 10px; padding: 16px 18px; border-inline-start: 3px solid color-mix(in srgb, var(--hx-quill) 55%, transparent); border-radius: 14px; border-start-start-radius: 4px; border-end-start-radius: 4px; background: var(--hx-surface-2); }
body.hp-ui .hpl-profile.is-building > :not(.hpl-panel-head, [data-hp-profile-skeleton]) { display: none; }
body.hp-ui .hp-skel-profile .hp-skel-group { display: grid; gap: 12px; }
body.hp-ui .hp-skel-profile .hp-skel-trait { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--hx-line); }

@media (prefers-reduced-motion: reduce) {
    body.hp-ui .hp-skel::after { display: none; }
}