/* ZackTheSadist — GenZ department. Builds on zack.css tokens. */

/* chips */
.gz-chip { display: inline-flex; cursor: pointer; }
.gz-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gz-chip span { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 12px 6px; border: 1.5px solid var(--ink); font: 400 .74rem/1.15 var(--f-type); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: transparent; transition: background .12s, color .12s; }
.gz-chip input:checked + span { background: var(--ink); color: var(--paper); }
.gz-chip input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }
.gz-modes, .gz-topics, .gz-genres, .gz-habits { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0 0 20px; }
.gz-modes legend, .gz-topics legend, .gz-genres legend, .gz-habits legend { width: 100%; }
.gz-habits { flex-direction: column; gap: 4px; }
.gz-check { text-transform: none !important; letter-spacing: 0 !important; font-family: var(--f-body) !important; font-size: 1rem !important; display: flex !important; gap: 10px; align-items: center; margin: 0 0 6px !important; }

.gz-pill { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px 7px; border: 2px solid var(--ink); background: #f8f4ea; font: 400 .76rem/1.1 var(--f-type); letter-spacing: .08em; text-transform: uppercase; color: var(--ink) !important; text-decoration: none !important; box-shadow: 3px 3px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
.gz-pill:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--red); }
.gz-pill--ghost { background: transparent; box-shadow: none; }
.gz-next { margin: 40px 0 10px; padding-top: 20px; border-top: var(--rule); }
.gz-next__row { display: flex; flex-wrap: wrap; gap: 10px; }

/* hub */
.gz-hub__intro { margin-bottom: 32px; max-width: 820px; }
.gz-hub__intro p { font-size: 1.08rem; }
.gz-hub__cta { margin: 18px 0 0; }
.gz-deps { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.gz-dep--locked { opacity: .62; background: repeating-linear-gradient(-45deg, #f2ecdf 0 12px, #ebe4d4 12px 24px) !important; cursor: not-allowed; box-shadow: none !important; }
.gz-dep--locked:hover { transform: none !important; }
.gz-dep__stamp { align-self: flex-start; font-size: .72rem; margin-top: 6px; }

/* Gen Z Times */
.gz-times { margin-top: 48px; border-top: 6px double var(--ink); padding-top: 22px; }
.gz-times__mast { text-align: center; border-bottom: var(--rule); padding-bottom: 14px; margin-bottom: 0; }
.gz-times__title { font-family: var(--f-black); font-weight: 400; font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: 1; margin: 6px 0; }
.gz-times__sub { font-style: italic; margin: 0; }
.gz-ticker { display: flex; align-items: stretch; background: var(--ink); color: var(--paper); overflow: hidden; margin: 0 0 22px; }
.gz-ticker__label { flex: none; background: var(--red); padding: 9px 12px 8px; font: 400 .74rem/1.2 var(--f-type); letter-spacing: .12em; white-space: nowrap; }
.gz-ticker__track { overflow: hidden; flex: 1; }
.gz-ticker__move { display: inline-flex; gap: 42px; white-space: nowrap; padding: 9px 0 8px 20px; font: 400 .8rem/1.2 var(--f-type); letter-spacing: .06em; animation: gz-tick 90s linear infinite; }
.gz-ticker__move span::after { content: " ✶"; color: var(--red-hi); padding-left: 42px; }
@keyframes gz-tick { to { transform: translateX(-50%); } }
.gz-times__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 28px; }
.gz-times__item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(20, 19, 17, .25); }
.gz-times__item p { margin: 0; font: 900 1.02rem/1.22 var(--f-head); letter-spacing: .01em; }
.gz-times__no { font: 400 .78rem/1.6 var(--f-type); color: var(--red); flex: none; }
.gz-times__item--lead { grid-column: 1 / -1; }
.gz-times__item--lead p { font-size: clamp(1.4rem, 3.4vw, 2.2rem); line-height: 1.08; }

/* quote block */
.gz-quote__punch { display: block; margin-top: .5em; color: var(--red); }

/* homepage teaser */
.gz-teaser { background: var(--ink); color: var(--paper); padding: clamp(24px, 5vw, 48px) !important; position: relative; overflow: hidden; }
.gz-teaser__in { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; max-width: var(--wrap); margin: 0 auto; }
.gz-teaser__kicker { color: var(--red-hi) !important; }
.gz-teaser__title { font: 900 clamp(2rem, 5vw, 3.6rem)/1.02 var(--f-head); margin: 0 0 14px; color: var(--paper); }
.gz-teaser__title em { color: var(--red-hi); }
.gz-teaser p { color: var(--paper); }
.gz-teaser__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.gz-teaser .zk-btn--ghost { color: var(--paper) !important; border-color: var(--paper); box-shadow: 4px 4px 0 var(--red); background: transparent; }
.gz-teaser__card { display: flex; justify-content: center; }
.gz-mini { position: relative; width: min(280px, 100%); background: var(--paper); border: 3px solid var(--paper); box-shadow: 10px 10px 0 var(--red); transform: rotate(3deg); padding: 10px 10px 14px; color: var(--ink); display: flex; flex-direction: column; gap: 4px; }
.gz-mini svg { width: 100%; height: auto; display: block; background: var(--paper-2); border: 2px solid var(--ink); }
.gz-mini__no { font: 400 .7rem/1 var(--f-type); letter-spacing: .1em; }
.gz-mini__class { font: 900 1.1rem/1.1 var(--f-head); }
.gz-mini__stamp { position: absolute; right: 8px; top: 28px; font-size: .72rem; }

/* question flow */
.gz-q { max-width: 760px; }
.gz-q__top { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.gz-q__top .zk-label { margin: 0; white-space: nowrap; }
.gz-q__bar { flex: 1; height: 8px; border: 1.5px solid var(--ink); position: relative; }
.gz-q__bar i { position: absolute; inset: 0 auto 0 0; background: var(--red); transition: width .3s ease; }
.gz-q__title { font: 900 clamp(1.5rem, 4vw, 2.3rem)/1.1 var(--f-head); margin: 6px 0 18px; }
.gz-q__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.gz-opt { text-align: left; min-height: 56px; padding: 12px 14px; border: 2px solid var(--ink); background: #fbf8f0; font: 400 1rem/1.25 var(--f-body); color: var(--ink); cursor: pointer; box-shadow: 3px 3px 0 var(--ink); transition: transform .1s, box-shadow .1s, background .1s; }
.gz-opt:hover, .gz-opt:focus-visible { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--red); outline: none; }
.gz-opt.is-on { background: var(--ink); color: var(--paper); }
.gz-q__nav { margin-top: 16px; min-height: 10px; }
.gz-q__free input { font-size: 1.15rem; }
.gz-loading { max-width: 760px; text-align: center; }
.gz-loading__line { font: 900 1.6rem/1.2 var(--f-head); }

/* the card */
.gz-card { position: relative; width: min(400px, 100%); aspect-ratio: 9 / 16; perspective: 1400px; cursor: pointer; margin: 0 auto; }
.gz-card__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--paper); border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; transition: transform .6s cubic-bezier(.2, .7, .2, 1); overflow: hidden; background-image: var(--grain); }
.gz-card__back { transform: rotateY(180deg); justify-content: center; gap: 12px; }
.gz-card.is-flipped .gz-card__front { transform: rotateY(-180deg); }
.gz-card.is-flipped .gz-card__back { transform: rotateY(0); }
.gz-card:focus-visible { outline: 3px solid var(--red); outline-offset: 6px; }
.gz-card__top { display: flex; justify-content: space-between; font: 400 .68rem/1 var(--f-type); letter-spacing: .1em; }
.gz-rarity { border: 2px solid currentColor; padding: 3px 6px 2px; transform: rotate(4deg); }
.gz-card--common .gz-rarity { color: var(--gray); }
.gz-card--rare .gz-rarity, .gz-card--glitched .gz-rarity { color: var(--red); }
.gz-card--legendary .gz-card__face { border-color: #b8860b; box-shadow: 10px 10px 0 #b8860b; }
.gz-card--legendary .gz-rarity { color: #b8860b; }
.gz-card--glitched .gz-card__front { animation: gz-glitch 2.6s steps(1) infinite; }
@keyframes gz-glitch { 0%, 92%, 100% { transform: none; filter: none; } 93% { transform: translate(3px, -2px); filter: hue-rotate(40deg); } 96% { transform: translate(-3px, 1px); } }
.gz-card__art { background: var(--paper-2); border: 2px solid var(--ink); flex: 0 0 42%; display: flex; justify-content: center; overflow: hidden; }
.gz-card__art svg { height: 100%; width: auto; display: block; }
.gz-card__name { font: 900 1.25rem/1 var(--f-head); margin: 4px 0 0; text-transform: uppercase; word-break: break-word; }
.gz-card__class { font: 400 .85rem/1.1 var(--f-type); color: var(--red); margin: 0; letter-spacing: .04em; }
.gz-card__flavour { font: italic .82rem/1.25 var(--f-body); margin: 0; }
.gz-stats { list-style: none; margin: 2px 0; padding: 0; display: grid; gap: 3px; }
.gz-stat { display: grid; grid-template-columns: 7.4em 1fr 2em; align-items: center; gap: 6px; font: 400 .66rem/1 var(--f-type); letter-spacing: .05em; text-transform: uppercase; }
.gz-stat__bar { height: 9px; border: 1.5px solid var(--ink); position: relative; }
.gz-stat__bar i { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.gz-stat.is-bad .gz-stat__bar i { background: var(--red); }
.gz-stat__v { text-align: right; }
.gz-card__row { font: .74rem/1.28 var(--f-body); margin: 0; }
.gz-card__row b { display: block; font: 400 .6rem/1.3 var(--f-type); letter-spacing: .12em; color: var(--gray); font-weight: 400; }
.gz-card__back .gz-card__row { font-size: .9rem; }
.gz-card__verdict { font: 900 1.12rem/1.2 var(--f-head); color: var(--red); margin: 6px 0 0; border: 0; padding: 0; }
.gz-card__sig { font: 600 1.3rem/1 var(--f-hand); color: var(--red); margin: 0; }
.gz-card--small { width: min(300px, 100%); }
.gz-card--small .gz-card__row { font-size: .66rem; }
.gz-flipnote { text-align: center; font: 600 1.15rem/1.2 var(--f-hand); color: var(--red); margin: 34px 0 0 !important; }

.gz-friend { margin-bottom: 36px; }
.gz-start { max-width: 760px; }
.gz-result { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 40px; align-items: start; }
.gz-result__rarity { font: 900 1.4rem/1.2 var(--f-head); margin: 0 0 18px; }
.gz-actions { flex-wrap: wrap; }
.gz-diag__head { margin-top: 26px !important; }
.gz-diags { display: grid; gap: 12px; }
.gz-diag { display: grid; gap: 4px; padding: 14px 16px; border: 2px solid var(--ink); background: #fbf8f0; text-decoration: none !important; color: var(--ink) !important; box-shadow: 4px 4px 0 var(--red); transition: transform .12s; }
.gz-diag:hover { transform: translate(-2px, -2px); }
.gz-diag__k { font: 400 .74rem/1 var(--f-type); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.gz-diag__l { font: 900 1.05rem/1.2 var(--f-head); }
.gz-diag__go { font: 400 .72rem/1 var(--f-type); letter-spacing: .08em; }

.gz-compare { margin-top: 48px; padding-top: 24px; border-top: 6px double var(--ink); }
.gz-compare__cards { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; }
.gz-compare__stamp { font-size: 1.1rem; }
.gz-compare__table { width: 100%; max-width: 520px; margin: 26px auto 0; border-collapse: collapse; font: 400 .85rem/1.2 var(--f-type); }
.gz-compare__table th, .gz-compare__table td { border-bottom: 1px solid rgba(20, 19, 17, .3); padding: 8px; text-align: left; }
.gz-compare__table .is-worse { color: var(--red); font-weight: 700; }
.gz-compare__line { text-align: center; font: 900 1.5rem/1.2 var(--f-head); margin: 18px 0 0; }

/* get schooled */
.gz-school { display: grid; gap: 16px; margin-top: 26px; max-width: 820px; }
.gz-school__q, .gz-school__z, .gz-school__a { border: 2px solid var(--ink); padding: 16px 18px; background: #fbf8f0; }
.gz-school__q p { margin: 0; font-style: italic; }
.gz-school__z { background: var(--ink); color: var(--paper); box-shadow: 6px 6px 0 var(--red); }
.gz-school__z .zk-label { color: var(--red-hi); }
.gz-school__burn { font: 900 clamp(1.25rem, 3vw, 1.75rem)/1.2 var(--f-head); margin: 0; }
.gz-school__tried { font: italic .85rem/1.35 var(--f-body); margin: 10px 0 0; opacity: .8; }
.gz-school__a { background: var(--yellow); }
.gz-school__a p { margin: 0; font: 900 1.2rem/1.25 var(--f-head); }
.gz-meter__track { height: 18px; border: 2px solid var(--ink); background: linear-gradient(90deg, #f6e9b8, #efd36a 35%, #e0574c 70%, #6b130e); position: relative; }
.gz-meter__track i { position: absolute; top: -6px; bottom: -6px; left: 0; border-right: 4px solid var(--ink); }
.gz-meter__ends { display: flex; justify-content: space-between; font: 400 .66rem/1.8 var(--f-type); letter-spacing: .1em; }
.gz-meter__lvl { margin: 4px 0 0; }

/* autopsy, court, statement */
.gz-report, .gz-court, .gz-statement { margin-top: 28px; max-width: 820px; }
.gz-report__line { margin: 0 0 10px; }
.gz-report__line b { font: 400 .74rem/1 var(--f-type); letter-spacing: .12em; color: var(--red); margin-right: 6px; font-weight: 400; }
.gz-report__verdict { font: 900 1.3rem/1.25 var(--f-head); margin: 0 0 18px; }
.gz-report__list { margin: 0 0 18px; padding-left: 1.2em; }
.gz-report__list li { margin-bottom: 6px; }
.gz-rank { color: var(--red); font-family: var(--f-type); letter-spacing: .1em; }
.gz-report__stamp { position: absolute; right: 24px; top: 24px; font-size: 1rem; }
.gz-tomb { margin: 22px auto 12px; max-width: 420px; text-align: center; background: var(--paper-2); border: 3px solid var(--ink); border-radius: 180px 180px 0 0; padding: 46px 28px 26px; }
.gz-tomb__rip { font: 900 2.4rem/1 var(--f-head); display: block; margin-bottom: 10px; }
.gz-tomb p { font-style: italic; margin: 0; }
.gz-bingo { margin-top: 48px; }
.gz-bingo__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 760px; }
.gz-bingo__cell { aspect-ratio: 1; padding: 6px; border: 2px solid var(--ink); background: #fbf8f0; font: .72rem/1.2 var(--f-body); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center; }
.gz-bingo__cell.is-on { background: var(--red); color: var(--paper); }
.gz-bingo__grid.is-won { outline: 4px solid var(--red); outline-offset: 6px; }
.gz-court__title { font: 400 1.05rem/1.2 var(--f-type); letter-spacing: .1em; color: var(--red); margin: 8px 0 18px; }
.gz-album { display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: center; margin-bottom: 18px; }
.gz-album__cover { aspect-ratio: 1; background: var(--ink); color: var(--paper); position: relative; padding: 16px; box-shadow: 6px 6px 0 var(--red); }
.gz-album__name { font: 900 1.5rem/1.02 var(--f-head); display: block; }
.gz-album__sticker { position: absolute; right: 10px; bottom: 10px; background: #fff; color: #000; border: 2px solid #000; outline: 2px solid #fff; padding: 4px 6px; font: 700 .62rem/1.05 Arial, sans-serif; text-align: center; }
.gz-album__sticker small { font-size: .45rem; }
.gz-album__tracks { list-style: none; margin: 0; padding: 0; font: 400 .9rem/1.6 var(--f-type); }
.gz-album__tracks span { color: var(--red); }
.gz-aura__items { display: grid; gap: 6px; margin-bottom: 20px; }
.gz-aura__item { display: grid !important; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1.5px solid var(--ink); background: #fbf8f0; text-transform: none !important; letter-spacing: 0 !important; font: 1rem/1.3 var(--f-body) !important; margin: 0 !important; cursor: pointer; }
.gz-aura__item:has(input:checked) { background: var(--paper-2); }
.gz-aura__amt { font: 400 .9rem/1 var(--f-type); white-space: nowrap; }
.is-neg { color: var(--red); }
.is-pos { color: #2f6b2f; }
.gz-statement__head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: var(--rule); padding-bottom: 10px; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.gz-statement__bank { font: 900 1.8rem/1 var(--f-head); }
.gz-statement__t { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: .95rem; }
.gz-statement__t th, .gz-statement__t td { text-align: left; padding: 7px 4px; border-bottom: 1px dotted rgba(20, 19, 17, .4); }
.gz-statement__t td:last-child, .gz-statement__t th:last-child { text-align: right; font-family: var(--f-type); white-space: nowrap; }
.gz-statement__t tfoot th { border-top: 3px double var(--ink); font-size: 1.1rem; }
.gz-letter { border: 2px dashed var(--ink); padding: 16px 18px; background: #fbf8f0; margin-bottom: 8px; }
.gz-letter p { margin: 0 0 8px; }
.gz-letter__sig { font: 600 1.3rem/1.1 var(--f-hand); color: var(--red); }

@media (max-width: 900px) {
	.gz-teaser__in, .gz-result { grid-template-columns: 1fr; }
	.gz-compare__cards { grid-template-columns: 1fr; justify-items: center; }
}
@media (max-width: 640px) {
	.gz-q__opts { grid-template-columns: 1fr; }
	.gz-album { grid-template-columns: 1fr; }
	.gz-album__cover { max-width: 240px; }
	.gz-bingo__cell { font-size: .58rem; padding: 3px; }
	.gz-report__stamp { position: static; display: inline-block; margin: 8px 0; }
	.gz-teaser__card { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.gz-ticker__move { animation: none; }
	.gz-card__face { transition: none; }
	.gz-card--glitched .gz-card__front { animation: none; }
}

/* card brand */
.gz-card__brand { margin: auto 0 0; padding-top: 8px; border-top: 1.5px solid var(--ink); display: flex; align-items: baseline; gap: 4px; font: 900 1.05rem/1 var(--f-head); letter-spacing: .02em; }
.gz-card__brand i { font: 600 1rem/1 var(--f-hand); color: var(--red); padding: 0 2px; }
.gz-card__brand span { font-style: italic; }
.gz-card--small .gz-card__brand { font-size: .85rem; }

/* share sheet */
.gz-sheet { position: fixed; inset: 0; z-index: 99999; background: rgba(20, 19, 17, .72); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
.gz-sheet__box { width: min(560px, 100%); background: var(--paper); border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--red); padding: 20px; max-height: 90vh; overflow: auto; animation: gz-up .2s ease-out; }
@media (min-width: 700px) { .gz-sheet { align-items: center; } }
@keyframes gz-up { from { transform: translateY(24px); opacity: 0; } }
.gz-sheet__hint { font-style: italic; font-size: .92rem; margin: 0 0 14px; }
.gz-sheet__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.gz-sheet__btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border: 2px solid var(--ink); background: #fbf8f0; font: 400 .72rem/1.15 var(--f-type); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.gz-sheet__btn:hover, .gz-sheet__btn:focus-visible { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--red); outline: none; }
.gz-sheet__ico { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 1rem/1 Arial, sans-serif; color: #fff; background: var(--ink); }
.gz-sheet__btn--wa .gz-sheet__ico { background: #25d366; }
.gz-sheet__btn--fb .gz-sheet__ico { background: #1877f2; }
.gz-sheet__btn--sc .gz-sheet__ico { background: #fffc00; color: #000; }
.gz-sheet__btn--x .gz-sheet__ico { background: #000; }
.gz-sheet__btn--tg .gz-sheet__ico { background: #229ed9; }
.gz-sheet__btn--ig .gz-sheet__ico { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.gz-sheet__btn--tt .gz-sheet__ico { background: #000; box-shadow: -2px -2px 0 #25f4ee, 2px 2px 0 #fe2c55; }
.gz-sheet__btn--sms .gz-sheet__ico, .gz-sheet__btn--link .gz-sheet__ico, .gz-sheet__btn--more .gz-sheet__ico, .gz-sheet__btn--save .gz-sheet__ico { background: var(--red); }
.gz-sheet__close { width: 100%; }
@media (max-width: 420px) { .gz-sheet__grid { grid-template-columns: repeat(2, 1fr); } }

/* gender step */
.gz-q__sub { margin: -8px 0 16px; font: 400 .95rem/1.4 var(--f-body); opacity: .75; }
.gz-opt--g b { display: block; font: 700 1.05rem/1.25 var(--f-body); }
.gz-opt--g small { display: block; margin-top: 4px; font: italic 400 .85rem/1.3 var(--f-body); opacity: .7; }
/* theme's ".zk p" margin was pushing card text (and the brand) off the card */
.zk .gz-card__face p { margin-bottom: 0; }
.zk .gz-card__face .gz-card__name { margin-top: 4px; }
.zk .gz-card__face .gz-card__verdict { margin-top: 6px; }
.zk .gz-card__face .gz-card__brand { margin-top: auto; }
.gz-card__art { flex-shrink: 1; min-height: 0; }