/* Passport, shop, streak, quests, challenge, settings */

.sub-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.sub-page h2 { font-size: var(--step-1); margin: 0 0 var(--s-2); }
.page-head { display: flex; align-items: center; gap: var(--s-3); }
.page-head .page-title { margin: 0; }
.page-head p { margin: 0; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--surface-2); font-weight: 800; font-size: .9rem; white-space: nowrap; }
.pill--gold { background: var(--reward); color: var(--reward-ink); }
.pill--green { background: color-mix(in oklab, var(--cactus) 18%, var(--surface)); color: color-mix(in oklab, var(--cactus) var(--tint), var(--text)); margin: 0; }
.banner-title { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); padding-left: 12px; border-left: 5px solid var(--c); }
.banner-title h2 { margin: 0; font-size: var(--step-2); }
.banner-title span { font-family: var(--font-display); font-weight: 800; color: color-mix(in oklab, var(--c) var(--tint), var(--text)); }

/* ---------- Passport ---------- */
.passport { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.passport__side, .passport__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-content: start; }
@media (min-width: 1180px) {
  .passport { grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); }
  .passport__side { position: sticky; top: 76px; }
}

.rank-card {
  display: grid; gap: var(--s-2);
  padding: var(--s-5); border-radius: var(--r-lg);
  background: linear-gradient(140deg, color-mix(in oklab, var(--sunny) 22%, var(--surface)), var(--surface) 70%);
  border: 2px solid color-mix(in oklab, var(--sunny) 45%, var(--border-light));
  box-shadow: 0 var(--lip) 0 color-mix(in oklab, var(--sunny) 40%, var(--border));
  color: var(--text);
}
.rank-card__top { display: flex; align-items: center; gap: var(--s-3); }
.rank-card__emoji { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-md); background: color-mix(in oklab, var(--sunny) 28%, var(--surface)); font-size: 1.9rem; flex: none; }
.rank-card__name { flex: 1; min-width: 0; }
.rank-card__name h2 { margin: 0; font-size: var(--step-1); }
.rank-card__name p { margin: 0; color: var(--text-2); font-size: .85rem; }
.rank-card__bar { height: 18px; background: var(--surface-2); }
.rank-card__to { margin: 0; font-size: .85rem; color: var(--text-2); }
.rank-card__bottom { display: flex; justify-content: space-between; align-items: center; }

.stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-3); }
.stamp {
  position: relative;
  display: grid; justify-items: center; text-align: center; gap: 4px;
  padding: var(--s-4) var(--s-3);
  border-radius: var(--r-md);
  border: 2px solid var(--border-light);
  background: var(--surface);
}
.stamp.is-on { background: color-mix(in oklab, var(--c) 8%, var(--surface)); border-color: color-mix(in oklab, var(--c) 35%, transparent); }
.stamp__ring {
  display: grid; place-items: center;
  width: 76px; height: 76px; border-radius: 50%;
  border: 3px dashed var(--border);
}
.stamp.is-on .stamp__ring { border-color: var(--c); transform: rotate(-6deg); background: color-mix(in oklab, var(--c) 12%, var(--surface)); }
.stamp__flag { font-size: 2.3rem; }
.stamp:not(.is-on) .stamp__flag { font-size: 1.4rem; opacity: .55; }
.stamp strong { font-family: var(--font-display); }
.stamp__hint { font-size: .78rem; color: var(--text-muted); font-weight: 600; }
.stamp.is-on .stamp__hint { color: color-mix(in oklab, var(--c) var(--tint), var(--text)); font-weight: 800; }
.stamp__pro { position: absolute; top: 8px; right: 8px; }
.stamp.is-new .stamp__ring { animation: slam 700ms var(--ease-bounce); }
@keyframes slam { 0% { transform: scale(2.2) rotate(-25deg); opacity: 0; } 60% { transform: scale(.92) rotate(-4deg); opacity: 1; } 100% { transform: rotate(-6deg); } }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s-3); }
.stat-grid .stat { position: relative; }
.stat-grid .stat__badge { position: absolute; top: 8px; right: 8px; }

.collection { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sticker {
  display: grid; justify-items: center; gap: 2px; width: 92px;
  padding: var(--s-2); border-radius: var(--r-md);
  background: var(--surface); border: 2px solid var(--border-light);
  font-size: 2rem; transform: rotate(-3deg);
}
.sticker:nth-child(even) { transform: rotate(3deg); }
.sticker small { font-size: .7rem; font-weight: 700; color: var(--text-2); text-align: center; line-height: 1.2; }
.sticker--badge { background: color-mix(in oklab, var(--c) 14%, var(--surface)); border-color: color-mix(in oklab, var(--c) 40%, transparent); }

.ach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.ach {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3); border-radius: var(--r-md);
  background: var(--surface); border: 2px solid var(--border-light);
}
.ach.is-on { border-color: color-mix(in oklab, var(--c) 50%, transparent); background: color-mix(in oklab, var(--c) 8%, var(--surface)); }
.ach__icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-sm); background: var(--locked-fill); font-size: 1.5rem; }
.ach.is-on .ach__icon { background: var(--c); box-shadow: 0 3px 0 color-mix(in oklab, var(--c) 70%, black); }
.ach__text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ach__text > span { color: var(--text-2); font-size: .88rem; }
.ach__tier { margin: 0; font-size: .72rem; font-weight: 800; color: color-mix(in oklab, var(--c) var(--tint), var(--text)); }
.ach__bar { display: flex; align-items: center; gap: var(--s-2); }
.ach__bar .progress { flex: 1; margin: 0; }
.ach__bar small { color: var(--text-muted); font-weight: 700; }
.ach__check { font-size: 1.3rem; font-weight: 900; color: var(--cactus-ink); }

/* ---------- Shop ---------- */
.shop { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: var(--s-3); }
.shop-item {
  position: relative;
  display: grid; justify-items: center; align-content: start; text-align: center; gap: 4px;
  padding: var(--s-4) var(--s-3);
  border-radius: var(--r-md); border: 2px solid var(--border-light);
  background: var(--surface);
}
.shop-item.is-owned { border-color: color-mix(in oklab, var(--cactus) 35%, transparent); }
.shop-item.is-wearing { border-color: var(--cactus); background: color-mix(in oklab, var(--cactus) 8%, var(--surface)); }
.shop-item__emoji {
  display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 4px;
  border-radius: var(--r-md); background: color-mix(in oklab, var(--c) 18%, var(--surface));
  font-size: 2.4rem;
}
.shop-item__taco { margin: -6px 0 -2px; }
.shop-item strong { font-family: var(--font-display); font-size: 1.05rem; }
.shop-item__desc { font-size: .82rem; color: var(--text-2); min-height: 2.4em; }
.shop-item .btn, .shop-item .pill { margin-top: var(--s-2); }
.shop-item__on { position: absolute; top: 8px; right: 8px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--cactus); color: var(--on-cactus); font-size: .72rem; font-weight: 800; }

/* ---------- Streak ---------- */
.streak-hero {
  display: grid; justify-items: center; text-align: center;
  padding: var(--s-5); border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--coral), var(--papaya));
  color: #fff;
  box-shadow: 0 var(--lip) 0 color-mix(in oklab, var(--coral) 72%, black);
}
.streak-hero__num { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 3.6rem; line-height: 1; }
.streak-hero h1 { margin: 0; font-size: var(--step-1); color: #fff; opacity: .92; }
.streak-hero__chips { display: flex; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; justify-content: center; }
.streak-hero__chips span { padding: 3px 12px; border-radius: var(--r-pill); background: rgb(255 255 255 / .2); font-weight: 700; font-size: .85rem; }

.tinted {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: color-mix(in oklab, var(--c) 12%, var(--surface));
  border: 2px solid color-mix(in oklab, var(--c) 35%, transparent);
}
.tinted p { margin: 0; }
.tinted__icon { font-size: 1.6rem; }

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal__head { text-align: center; font-size: .75rem; font-weight: 800; color: var(--text-muted); }
.cal__day {
  display: grid; place-items: center; aspect-ratio: 1; max-height: 52px;
  border-radius: 10px; background: var(--surface-2);
  font-weight: 700; font-size: .85rem; color: var(--text-2);
}
.cal__day.is-active { background: var(--coral); color: #fff; }
.cal__day.is-today { box-shadow: inset 0 0 0 2px var(--coral); }
.cal__day.is-today.is-active { box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--coral) 60%, black); }
.cal__day.is-future { background: transparent; border: 2px dashed var(--border); color: var(--text-muted); }

.row-card { display: flex; align-items: center; gap: var(--s-3); }
.row-card h2 { margin: 0; }
.row-card p { margin: 4px 0 0; }
.row-card__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-sm); background: color-mix(in oklab, var(--c) 18%, var(--surface)); font-size: 1.5rem; }
.stepper { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin: var(--s-3) 0; }
.stepper output { min-width: 6ch; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); }
.stepper .icon-btn { font-size: 1.4rem; font-weight: 800; }

/* ---------- Quests ---------- */
.quest-list, .task-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.quest {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); border-radius: var(--r-md);
  background: var(--surface); border: 2px solid var(--border-light);
}
.quest.is-done { border-color: color-mix(in oklab, var(--cactus) 40%, transparent); background: color-mix(in oklab, var(--cactus) 7%, var(--surface)); }
.quest__icon { font-size: 1.8rem; }
.quest__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.quest__text > span:not(.quest__bar) { color: var(--text-2); font-size: .9rem; }
.quest__bar { display: flex; align-items: center; gap: var(--s-2); margin-top: 4px; }
.quest__bar .progress { flex: 1; }
.quest__bar small { font-weight: 800; color: var(--text-muted); white-space: nowrap; }
.quest__reward { text-align: right; font-weight: 800; color: color-mix(in oklab, var(--sunny) var(--tint), var(--text)); }
.chest {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); border-radius: var(--r-md);
  border: 2px dashed color-mix(in oklab, var(--sunny) 60%, var(--border));
  background: color-mix(in oklab, var(--sunny) 8%, var(--surface));
}
.chest h2 { margin: 0; }
.chest p { margin: 2px 0 0; }
.chest > div { flex: 1; }
.chest__icon { font-size: 2.4rem; }
.chest.is-open { border-style: solid; }

/* ---------- Challenge ---------- */
.ch-hero {
  position: relative; overflow: hidden;
  display: grid; justify-items: center; text-align: center;
  padding: var(--s-7) var(--s-5) var(--s-5);
  border-radius: var(--r-lg); background: color-mix(in oklab, var(--c) 72%, black); color: #fff;
  box-shadow: 0 var(--lip) 0 color-mix(in oklab, var(--c) 55%, black);
}
.ch-hero__flags { position: absolute; inset: 0 0 auto 0; background: rgb(255 255 255 / .5); }
.ch-hero__emoji { font-size: 3.4rem; }
.ch-hero h1 { margin: 0; font-size: var(--step-4); color: #fff; }
.ch-hero p { margin: 0; font-weight: 600; }
.ch-hero__left { margin-top: var(--s-3); padding: 3px 14px; border-radius: var(--r-pill); background: rgb(0 0 0 / .22); font-weight: 800; font-size: .85rem; }
.task-list li { display: flex; gap: var(--s-3); align-items: flex-start; }
.task-list li > div { flex: 1; display: grid; }
.task-list li.is-done strong { color: var(--text-muted); }
.reward-card { display: grid; gap: var(--s-3); }
.reward-card p { margin: 0; }

/* ---------- Settings ---------- */
.settings .card { display: grid; gap: var(--s-3); }
.settings .card h2 { margin: 0; }
.settings .card p { margin: 0; }
.form__row { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.toggle { display: flex; align-items: center; gap: var(--s-3); cursor: pointer; }
.toggle > span:first-child { flex: 1; display: grid; }
.toggle > span:first-child span { color: var(--text-2); font-size: .88rem; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle__track { flex: none; position: relative; width: 52px; height: 32px; border-radius: var(--r-pill); background: var(--locked-fill); transition: background var(--dur); }
.toggle__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform var(--dur) var(--ease-out); }
.toggle input:checked + .toggle__track { background: var(--cactus); }
.toggle input:checked + .toggle__track::after { transform: translateX(20px); }
.toggle input:focus-visible + .toggle__track { outline: 3px solid var(--focus); outline-offset: 2px; }
.field select { min-height: 50px; padding: 0 12px; border-radius: var(--r-sm); border: 2px solid var(--border); background: var(--surface); color: var(--text); }
.seg--inline { margin: 0; }
.seg--inline .seg__item { border: 0; background: none; }
.seg--inline .seg__item[aria-checked="true"] { background: var(--surface); color: var(--coral-ink); box-shadow: 0 2px 0 var(--border); }
.settings__reset { justify-self: start; color: var(--coral-ink); }
.more-rank { text-align: center; margin-top: var(--s-4); }