/* Account UI: the tier popup and the character creator sheet. Sits on the
 * app's tokens; the sheet base classes come from overlays.css. */

/* ---- tier popup ---- */
.tier-sheet .tier-lead { color: var(--text-2); font-size: 15px; line-height: 1.55; margin: 6px 0 12px; }
.tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 12px; }
@media (max-width: 480px) { .tier-grid { grid-template-columns: 1fr; } }
.tier-card { border: var(--hairline-w) solid var(--hairline); border-radius: 12px; padding: 12px; }
.tier-name { font-weight: 700; color: var(--text-1); }
.tier-price { color: var(--accent); font-weight: 700; margin: 2px 0 6px; }
.tier-price span { color: var(--text-3); font-weight: 500; font-size: 12px; }
.tier-card ul { margin: 0; padding-left: 16px; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.tier-note { color: var(--text-3); font-size: 12px; margin: 0 0 12px; }
.tier-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-bottom: 6px; }
.tier-cta {
  display: inline-block; background: var(--accent); color: var(--on-accent, #1a120c);
  font-weight: 700; text-decoration: none; padding: 11px 18px; border-radius: 999px; font-size: 14px;
}
.tier-cta:hover { filter: brightness(1.05); }

/* ---- creator sheet ---- */
.creator-sheet { max-height: 92dvh; }
@media (min-width: 900px) {
  .creator-sheet { width: min(940px, 94vw); max-height: 88vh; }
}
.creator-body { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px) {
  .creator-body { grid-template-columns: 5fr 6fr; align-items: start; }
}
.creator-stage {
  position: relative; background: var(--stage, #1a1d22); border-radius: 12px; overflow: hidden;
  aspect-ratio: 3 / 4; max-height: 42dvh;
}
@media (min-width: 900px) {
  .creator-stage { max-height: 72vh; position: sticky; top: 0; }
}
.creator-canvas { width: 100%; height: 100%; display: block; }
.creator-progress {
  position: absolute; inset: auto 12px 12px 12px; background: rgba(0,0,0,.55); border-radius: 10px;
  padding: 8px 10px; font-size: 12px; color: var(--text-2);
}
.creator-progress .bar { height: 3px; width: 0; background: var(--accent); border-radius: 2px; margin-bottom: 6px; transition: width .2s; }
.creator-progress.done { display: none; }
.creator-panel { min-width: 0; }
.creator-field { display: block; margin: 4px 0 6px; }
.creator-field span { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 4px; }
.creator-name {
  width: 100%; font: inherit; color: var(--text-1); background: var(--bg); border: var(--hairline-w) solid var(--hairline);
  border-radius: 10px; padding: 9px 12px; outline: none;
}
.creator-name:focus { border-color: var(--accent); }
.creator-plan { color: var(--text-3); font-weight: 500; text-transform: none; letter-spacing: 0; }
.creator-sliders { position: relative; }
.creator-sliders.is-locked .p-row { opacity: .5; }
.creator-group { margin-top: 10px; }
.creator-group-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 6px 0 2px; }
.creator-lock {
  position: sticky; top: 4px; z-index: 2; width: 100%; display: flex; gap: 8px; align-items: center; justify-content: center;
  font: inherit; font-size: 13px; color: var(--text-1); background: var(--surface-2, #1f242b);
  border: var(--hairline-w) solid var(--accent); border-radius: 999px; padding: 9px 12px; cursor: pointer; margin: 4px 0 6px;
}
.creator-lock b { color: var(--accent); }
.creator-lock .icon { width: 16px; height: 16px; }
.creator-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.creator-save {
  font: inherit; font-weight: 700; color: var(--on-accent, #1a120c); background: var(--accent); border: 0;
  border-radius: 999px; padding: 11px 18px; cursor: pointer;
}
.creator-save[disabled] { opacity: .5; cursor: default; }
.creator-status { min-height: 1.2em; margin-top: 8px; }

/* ---- settings sheet: account + wardrobe bits ---- */
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; }
.acct-row .pill { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); border: var(--hairline-w) solid var(--accent-dim, var(--hairline)); border-radius: 999px; padding: 2px 8px; }
.acct-row a.preset-chip { text-decoration: none; }
.wardrobe-row .preset-chip.locked { opacity: .5; }
.wardrobe-row .preset-chip.locked::after { content: " 🔒"; }