/*
 * Onboarding and catalog: the /welcome steps, the Studio checklist, genre chips / tiles / pages, the premiere
 * countdown page and the premiere chat. Neutral colours (inherit + translucent greys), so it reads in the
 * Skitzly theme and in the default theme, light and dark.
 */

/* ---------------------------------------------------------------- Welcome */
.skz-ob { max-width: 60rem; }
.skz-ob__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.skz-ob__progress { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .85rem; opacity: .85; }
.skz-ob__dot { width: 2rem; height: .3rem; border-radius: 999px; background: rgba(128, 128, 128, .35); }
.skz-ob__dot.is-done { background: currentColor; }
.skz-ob__count { margin-left: .4rem; }
.skz-ob__skip-all { margin: 0; }
.skz-ob__title { font-size: 1.6rem; font-weight: 800; margin: 0 0 .35rem; }
.skz-ob__lead { opacity: .85; margin-bottom: 1.25rem; }
.skz-ob__genres { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .75rem; }
.skz-ob__genre, .skz-ob__creator { position: relative; margin: 0; cursor: pointer; display: block; }
.skz-ob__genre input, .skz-ob__creator input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.skz-genre-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: .25rem; aspect-ratio: 16 / 10; padding: .7rem; border-radius: 14px; overflow: hidden; color: #fff; border: 3px solid transparent; transition: transform .12s ease, border-color .12s ease; }
.skz-genre-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.skz-genre-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 60%); }
.skz-genre-tile .ion-icon-wrapper { position: absolute; top: .6rem; left: .6rem; z-index: 1; color: #fff; opacity: .95; }
.skz-genre-tile .ion-icon-wrapper svg { fill: currentColor; stroke: currentColor; }
.skz-genre-tile strong { position: relative; z-index: 1; font-size: .95rem; line-height: 1.2; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.skz-genre-tile__check { position: absolute; top: .45rem; right: .45rem; z-index: 2; display: none; }
.skz-genre-tile__check .ion-icon-wrapper { position: static; }
.skz-ob__genre input:checked + .skz-genre-tile { border-color: #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, .6); transform: scale(.97); }
.skz-ob__genre input:checked + .skz-genre-tile .skz-genre-tile__check { display: block; }
.skz-ob__genre input:focus-visible + .skz-genre-tile, .skz-ob__creator input:focus-visible + .skz-ob__creator-card { outline: 3px solid #3b82f6; outline-offset: 2px; }
.skz-ob__actions { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: 1.5rem; }
.skz-ob__hint { opacity: .8; font-size: .9rem; }
.skz-ob__creators { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .75rem; }
.skz-ob__creator-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; padding: 1rem .75rem; border-radius: 14px; border: 1px solid rgba(128, 128, 128, .35); background: rgba(128, 128, 128, .08); height: 100%; }
.skz-ob__creator-card img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: .35rem; }
.skz-ob__creator-card strong { overflow-wrap: anywhere; }
.skz-ob__creator-card small { opacity: .75; overflow-wrap: anywhere; }
.skz-ob__match { font-weight: 600; opacity: 1 !important; }
.skz-ob__follow { margin-top: .5rem; padding: .25rem .9rem; border-radius: 999px; border: 1px solid currentColor; font-size: .85rem; font-weight: 600; }
.skz-ob__creator input:checked + .skz-ob__creator-card { border-color: currentColor; background: rgba(128, 128, 128, .2); }
.skz-ob__creator input:checked + .skz-ob__creator-card .skz-ob__follow { background: currentColor; }
.skz-ob__creator input:checked + .skz-ob__creator-card .skz-ob__follow { color: inherit; background: rgba(128, 128, 128, .45); }
.skz-ob__notify { padding: 1.25rem; border-radius: 14px; border: 1px solid rgba(128, 128, 128, .35); background: rgba(128, 128, 128, .08); }

/* ---------------------------------------------------------------- Studio checklist */
.skz-cl { padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid rgba(128, 128, 128, .3); background: rgba(128, 128, 128, .08); }
.skz-cl__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.skz-cl__title { font-size: 1.1rem; font-weight: 800; margin: 0; }
.skz-cl__count { margin: .15rem 0 0; opacity: .8; font-size: .9rem; }
.skz-cl__bar { height: .5rem; border-radius: 999px; background: rgba(128, 128, 128, .3); overflow: hidden; margin: .75rem 0; }
.skz-cl__bar span { display: block; height: 100%; border-radius: 999px; background: #22c55e; }
.skz-cl__reward-note { font-size: .9rem; margin-bottom: .5rem; }
.skz-cl__steps, .skz-cl__titles { list-style: none; margin: 0; padding: 0; }
.skz-cl__step { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-top: 1px solid rgba(128, 128, 128, .2); }
.skz-cl__step:first-child { border-top: 0; }
.skz-cl__tick { flex: 0 0 auto; opacity: .55; }
.skz-cl__step.is-done .skz-cl__tick { opacity: 1; color: #22c55e; }
.skz-cl__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.skz-cl__text small { opacity: .75; }
.skz-cl__step.is-done .skz-cl__text strong { text-decoration: line-through; opacity: .75; }
.skz-cl__done { font-size: .85rem; opacity: .75; }
.skz-cl__reward { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid rgba(128, 128, 128, .25); }
.skz-cl__reward > div { display: flex; flex-direction: column; flex: 1 1 16rem; min-width: 0; }
.skz-cl__reward small { opacity: .8; }
.skz-cl__reward-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.skz-cl__reward-form select { max-width: 18rem; }
.skz-cl__titles { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.skz-cl__titles a { display: inline-block; padding: .2rem .7rem; border-radius: 999px; border: 1px solid rgba(128, 128, 128, .4); color: inherit; font-size: .85rem; }
.skz-cl + .skz-cl { margin-top: .75rem; }

/* ---------------------------------------------------------------- Genres */
.skz-genre-chips { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem 0 .75rem; margin: 0 0 .5rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.skz-genre-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 999px; border: 1px solid rgba(128, 128, 128, .4); color: inherit; font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap; background: rgba(128, 128, 128, .08); }
.skz-genre-chip:hover { color: inherit; text-decoration: none; background: rgba(128, 128, 128, .2); }
.skz-genre-chip.is-active { border-color: currentColor; background: rgba(128, 128, 128, .28); }
.skz-genre-chip__dot { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; }
.skz-browse .skz-genre-chips, .skz-watch .skz-genre-chips, .skz-genre-page .skz-genre-chips { padding-left: var(--skz-page-gutter, 0); padding-right: var(--skz-page-gutter, 0); }
.skz-genre-hero { position: relative; display: flex; align-items: flex-end; gap: .75rem; min-height: 9rem; padding: 1.25rem; margin-bottom: 1rem; border-radius: 16px; overflow: hidden; color: #fff; }
.skz-genre-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.skz-genre-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 70%); }
.skz-genre-hero h1 { position: relative; z-index: 1; margin: 0; font-size: 1.8rem; font-weight: 800; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.skz-genre-hero .ion-icon-wrapper { position: relative; z-index: 1; color: #fff; }
.skz-genre-hero .ion-icon-wrapper svg { fill: currentColor; stroke: currentColor; }
.skz-genre-field__list { display: flex; flex-wrap: wrap; gap: .4rem; }
.skz-genre-pick { position: relative; margin: 0; cursor: pointer; }
.skz-genre-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.skz-genre-pick span { display: inline-block; padding: .25rem .75rem; border-radius: 999px; border: 1px solid rgba(128, 128, 128, .45); font-size: .85rem; }
.skz-genre-pick input:checked + span { border-color: currentColor; background: rgba(128, 128, 128, .3); font-weight: 600; }
.skz-genre-pick input:disabled + span { opacity: .45; cursor: not-allowed; }
.skz-genre-pick input:focus-visible + span { outline: 2px solid #3b82f6; outline-offset: 2px; }
.skz-watch-genres { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.skz-mcard__chip--live, .skz-live-badge { background: #dc2626 !important; color: #fff !important; }
.skz-live-badge { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .02em; }

/* ---------------------------------------------------------------- Season headings on the guest series page */
.skz-public__season { font-size: 1rem; font-weight: 700; margin: 1.25rem 0 .6rem; opacity: .9; }

/* ---------------------------------------------------------------- Premiere page */
.skz-premiere__cover { background: rgba(0, 0, 0, .45); font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; }
.skz-premiere__badge { display: inline-block; margin: 1rem 0 0; padding: .15rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: #dc2626; color: #fff; }
.skz-premiere__badge + .skz-public__title { margin-top: .5rem; }
.skz-premiere__box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; margin-bottom: 1rem; border-radius: 12px; border: 1px solid rgba(128, 128, 128, .3); background: rgba(128, 128, 128, .1); }
.skz-premiere__box > div:first-child { display: flex; flex-direction: column; }
.skz-premiere__countdown { font-size: 1.25rem; }
.skz-premiere__date { opacity: .8; font-size: .9rem; }
.skz-premiere__actions { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.skz-premiere__actions small { opacity: .8; }

/* ---------------------------------------------------------------- Premiere chat */
.skz-premiere-live { margin: 1rem 0; }
.skz-premiere-live__title { font-size: 1rem; margin: 0 0 .5rem; }
.skz-pchat { border: 1px solid rgba(128, 128, 128, .3); border-radius: 12px; padding: .75rem; background: rgba(128, 128, 128, .08); }
.skz-pchat__title { font-size: .95rem; font-weight: 700; margin: 0 0 .5rem; }
.skz-pchat__list { height: 16rem; overflow-y: auto; display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; }
.skz-pchat__empty, .skz-pchat__note { opacity: .75; font-size: .85rem; margin: .25rem 0 0; }
.skz-pchat__line { display: flex; align-items: baseline; gap: .25rem; overflow-wrap: anywhere; }
.skz-pchat__user { font-weight: 700; flex: 0 0 auto; }
.skz-pchat__user.is-owner { color: #22c55e; }
.skz-pchat__line .chat-message-content { flex: 1; min-width: 0; }
.skz-pchat__delete { flex: 0 0 auto; border: 0; background: transparent; color: inherit; opacity: .5; padding: 0 .35rem; cursor: pointer; }
.skz-pchat__delete:hover { opacity: 1; }
.skz-pchat__form { display: flex; gap: .5rem; margin-top: .5rem; align-items: flex-end; }
.skz-pchat__form textarea { flex: 1; min-width: 0; resize: none; }
/* Account setup: creator or fan, username, "Complete your account" */
.skz-ob__roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.skz-ob__role { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 1.5rem 1rem; border-radius: 14px; border: 2px solid rgba(128, 128, 128, .35); background: rgba(128, 128, 128, .08); color: inherit; cursor: pointer; transition: border-color .12s ease, transform .12s ease; }
.skz-ob__role:hover, .skz-ob__role:focus-visible, .skz-ob__role.is-current { border-color: currentColor; }
.skz-ob__role:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }
.skz-ob__role:active { transform: scale(.98); }
.skz-ob__role strong { font-size: 1.1rem; }
.skz-ob__role small { opacity: .8; line-height: 1.3; }
.skz-ob__username { max-width: 32rem; }
.skz-ob__username .input-group-text { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.skz-ob__username-status { min-height: 1.4rem; margin: .4rem 0 0; font-size: .9rem; opacity: .9; }
.skz-ob__username-status.is-ok { color: #16a34a; opacity: 1; }
.skz-ob__username-status.is-bad { color: #dc2626; opacity: 1; }
.skz-ac--card { margin: .75rem; }
.skz-ac__pending { font-size: .8rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; background: rgba(234, 179, 8, .2); border: 1px solid rgba(234, 179, 8, .6); white-space: nowrap; }
.skz-ac-choice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1rem; margin-bottom: 1rem; border-radius: 12px; border: 1px solid rgba(128, 128, 128, .3); background: rgba(128, 128, 128, .08); }
.skz-ac-choice p { margin: 0; flex: 1 1 14rem; }
.skz-ac-choice form { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 480px) { .skz-ob__roles { grid-template-columns: 1fr; } }