/*
  ChoreBoy's 🎨 Customize view (web/customize.js): your character, big, in a header card; filters;
  a grid of every character (locked ones are grey silhouettes with what unlocks them and a bar);
  a "How unlocking works" note. Also, page-wide: the account chip's picture (#account .acct-pic,
  set by ChoreCustomizeView.applyIdentity) and the "New character" cheer (.cheer.character). It uses
  choreboy.css's tokens and components (panel, chip, seg, empty-state), so light and dark follow the
  device. Every class here starts with cz- (except those two page-wide hooks). Pixel art is drawn
  crisp (image-rendering: pixelated). The characters are transparent PNGs, so none sits on a tile of
  its own: the card, chip or cheer around it is the only box. Responsive from 320 px; no movement
  under reduced motion.
*/

/* ---------- the account chip's picture and the cheer (page-wide) ---------- */

#account .acct-pic { width: 1.3rem; height: 1.3rem; margin: -.15rem 0 -.15rem -.25rem; flex-shrink: 0; image-rendering: pixelated; background: none; }
.cheer.character { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.cheer.character .cheer-ico { background: none; }
.cheer.character .cheer-ico img { width: 1.75rem; height: 1.75rem; image-rendering: pixelated; }

/* ---------- the page ---------- */

.cz-page { max-width: 1180px; margin: 0 auto; }
.cz-body { display: flex; flex-direction: column; gap: 1rem; }
.cz-view img { image-rendering: pixelated; -webkit-user-drag: none; user-select: none; }
.cz-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cz-nopic { font-size: 1.6rem; line-height: 1; opacity: .5; }

/* ---------- the header: your character ---------- */

.cz-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'pic main' 'pic foot'; gap: .5rem 1.6rem; align-items: center; padding: 1.4rem 1.5rem; background: linear-gradient(135deg, var(--accent-soft), var(--surface) 62%); box-shadow: var(--shadow-md); }
.cz-hero-pic { grid-area: pic; width: 9rem; height: 9rem; display: grid; place-items: center; }
.cz-hero-pic img { width: 7.25rem; height: 7.25rem; filter: drop-shadow(0 6px 8px rgba(16, 24, 40, .18)); }
.cz-hero-pic.pop img { animation: cz-pop .5s cubic-bezier(.2, 1.4, .4, 1); }
.cz-hero-main { grid-area: main; align-self: end; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.cz-hero-foot { grid-area: foot; align-self: start; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.cz-eyebrow { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.cz-hero-name { margin: 0; font-size: clamp(1.45rem, 3.4vw, 1.9rem); font-weight: 780; letter-spacing: -.025em; line-height: 1.12; overflow-wrap: anywhere; }
.cz-hero-blurb { margin: 0; color: var(--text-2); font-size: .98rem; max-width: 40rem; }
.cz-hero-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.cz-hero-chips:empty { display: none; }
.cz-hero-chips .chip { white-space: normal; text-align: left; }
.cz-where { margin: 0; font-size: .84rem; color: var(--text-3); }
.cz-msg { margin: .1rem 0 0; font-size: .88rem; font-weight: 600; }
.cz-msg.ok { color: var(--good); }
.cz-msg.bad { color: var(--bad); }

/* "12 of 51 unlocked" over a bar, then the locked one you're closest to. */
.cz-tally { margin-top: .2rem; max-width: 30rem; display: flex; flex-direction: column; gap: .3rem; }
.cz-tally-top { display: flex; justify-content: space-between; gap: .6rem; font-size: .86rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cz-tally-top b { color: var(--text); font-weight: 700; }
.cz-tally-pct { color: var(--text-3); }
.cz-next { display: flex; align-items: center; gap: .65rem; max-width: 30rem; margin-top: .35rem; padding: .5rem .7rem; border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); }
.cz-next.done { display: block; margin: .35rem 0 0; font-size: .9rem; font-weight: 600; color: var(--accent-text); background: var(--accent-soft); border-color: transparent; }
.cz-next-pic { flex-shrink: 0; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; }
.cz-next-pic img { width: 2.1rem; height: 2.1rem; }
.cz-next-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.cz-next-what { font-size: .84rem; color: var(--text-2); line-height: 1.3; overflow-wrap: anywhere; }
.cz-next-what b { color: var(--text); font-weight: 650; }
.cz-next-prog { display: flex; align-items: center; gap: .5rem; }
.cz-next-prog .cz-bar { flex: 1; }

/* Progress bars (a card's, the next one's, the tally's). */
.cz-bar { display: block; width: 100%; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.cz-bar.big { height: 8px; }
.cz-bar > span { display: block; height: 100%; min-width: 0; border-radius: inherit; background: var(--accent); transition: width .5s ease; }
.cz-of { flex-shrink: 0; font-size: .74rem; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- filters and the note ---------- */

.cz-tools { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; }
.cz-n { color: var(--text-3); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: .15rem; }
.seg button.active .cz-n { color: var(--text-2); }
.cz-how { min-width: 0; }
.cz-how > summary { cursor: pointer; list-style: none; font-size: .86rem; font-weight: 600; color: var(--text-2); padding: .35rem .7rem; border-radius: 999px; }
.cz-how > summary::-webkit-details-marker { display: none; }
.cz-how > summary:hover { color: var(--text); background: var(--surface-2); }
.cz-how[open] { flex-basis: 100%; order: 3; }
.cz-how[open] > summary { display: inline-block; color: var(--text); }
.cz-how-body { margin-top: .4rem; padding: .75rem .95rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); font-size: .88rem; color: var(--text-2); max-width: 52rem; }
.cz-how-body p { margin: 0; }
.cz-how-body p + p { margin-top: .45rem; }

/* ---------- the grid ---------- */

.cz-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.25rem), 1fr)); gap: .7rem; }
.cz-item { display: flex; min-width: 0; }
.cz-card { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .9rem .6rem .75rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); font: inherit; text-align: center; }
button.cz-card { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; -webkit-tap-highlight-color: transparent; }
button.cz-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
button.cz-card:active { transform: scale(.97); }
button.cz-card[aria-disabled="true"] { cursor: progress; }
.cz-card.on { border-color: var(--accent); background: linear-gradient(180deg, var(--accent-soft), var(--surface) 75%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), var(--shadow-sm); }
.cz-card.busy { opacity: .75; }
.cz-card.pop .cz-pic img { animation: cz-pop .45s cubic-bezier(.2, 1.4, .4, 1); }
.cz-pic { width: 4.6rem; height: 4.6rem; display: grid; place-items: center; }
.cz-pic img { width: 4rem; height: 4rem; }
.cz-name { font-weight: 650; font-size: .9rem; line-height: 1.25; overflow-wrap: anywhere; }
.cz-sub { font-size: .76rem; color: var(--text-3); }
.cz-card.on .cz-sub { color: var(--accent-text); font-weight: 650; }
.cz-check { position: absolute; top: .45rem; right: .45rem; width: 1.45rem; height: 1.45rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); font: 800 .78rem/1 var(--font); box-shadow: var(--shadow-sm); }
.cz-card.pop .cz-check { animation: cz-check .3s ease-out; }

/* Locked: a grey silhouette, what unlocks it, and how close you are. */
.cz-card.locked { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); border-style: dashed; border-color: var(--border-strong); box-shadow: none; }
.cz-card.locked .cz-pic img, .cz-next-pic.locked img { filter: brightness(0); opacity: .2; }
.cz-card.locked .cz-name { color: var(--text-2); }
.cz-lock { font-size: .76rem; line-height: 1.3; color: var(--text-2); overflow-wrap: anywhere; }
.cz-prog { margin-top: auto; padding-top: .25rem; width: 100%; display: flex; align-items: center; gap: .45rem; }
.cz-prog .cz-bar { flex: 1; }

@keyframes cz-pop { 0% { opacity: 0; transform: scale(.55) rotate(-8deg); } 60% { opacity: 1; transform: scale(1.12) rotate(2deg); } 100% { transform: none; } }
@keyframes cz-check { 0% { transform: scale(.4); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }

@media (prefers-color-scheme: dark) {
  .cz-card.locked .cz-pic img, .cz-next-pic.locked img { filter: brightness(0) invert(1); opacity: .2; }
  .cz-hero-pic img { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
}

/* ---------- small screens ---------- */

@media (max-width: 600px) {
  .cz-hero { grid-template-areas: 'pic main' 'foot foot'; gap: .8rem 1rem; padding: 1.1rem 1rem 1rem; }
  .cz-hero-pic { align-self: start; width: 5.5rem; height: 5.5rem; }
  .cz-hero-pic img { width: 4.5rem; height: 4.5rem; }
  .cz-hero-main { align-self: start; gap: .25rem; }
  .cz-hero-blurb { font-size: .92rem; }
  .cz-where { display: none; }
  .cz-tally, .cz-next { max-width: none; }
  .cz-tools .seg { display: flex; width: 100%; }
  .cz-tools .seg button { flex: 1 1 auto; padding-left: .4rem; padding-right: .4rem; }
  .cz-how > summary { padding-left: .2rem; }
  .cz-grid { gap: .55rem; }
  .cz-card { padding: .8rem .5rem .65rem; }
}
@media (max-width: 380px) {
  .cz-pic { width: 4rem; height: 4rem; }
  .cz-pic img { width: 3.4rem; height: 3.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  button.cz-card, .cz-bar > span { transition: none; }
  button.cz-card:hover, button.cz-card:active { transform: none; }
  .cz-hero-pic.pop img, .cz-card.pop .cz-pic img, .cz-card.pop .cz-check { animation: none; }
}