/* PTQUEST: the mascot's black and white, with existing layout and artwork intact. */
:root {
  color-scheme: light;
  --paper: #faf9f6;
  --lavender: #80659d;
  --lavender-soft: #f0ebf6;
  --butter: #f2d990;
  --surface: #fff;
  --surface-muted: #efefef;
  --ink: #111;
  --night: #111;
  --night-raised: #262626;
  --green: #111;
  --blue: #111;
  --accent: #111;
  /* Existing light accent surfaces also contain dark labels. */
  --lime: #e6e6e6;
  --muted: #626262;
  --line: #dedede;
  --focus-ring: 2px solid var(--ink);
}
::selection { background: var(--ink); color: var(--surface); }

/* Set both sides of the primary contrast pair, including late login/rest rules. */
.primary, .start-btn, .main .primary, dialog .primary,
.workout-head > .primary, .running-launch .primary,
.beta-entry .beta-signin, .entry #auth-form > .primary,
.compact-rest > .rest-start, .rest-panel .rest-controls .rest-start {
  background: var(--ink); color: var(--surface); border-color: var(--ink);
}
.primary:hover, .start-btn:hover, .main .primary:hover, dialog .primary:hover,
.beta-entry .beta-signin:hover, .entry #auth-form > .primary:hover,
.compact-rest > .rest-start:hover, .rest-panel .rest-controls .rest-start:hover {
  background: var(--night-raised); color: var(--surface); border-color: var(--night-raised);
}
.primary:disabled, .main .primary:disabled, dialog .primary:disabled {
  background: var(--surface-muted); color: var(--muted); border-color: var(--line);
}
.check.checked, .tour-set-row button[aria-pressed=true],
.weekly-goal-progress > .is-achieved {
  background: var(--ink); color: var(--surface); border-color: var(--ink);
}
.day.done b, .weekly-goal-dates .is-complete i,
.weekly-goal-day input:checked + span, .calendar-day.is-selected small {
  color: var(--surface);
}
.weekly-goal-progress > span { background: var(--surface-muted); color: var(--muted); }
.weekly-goal-dates > button, .weekly-goal-copy { color: var(--muted); }
.weekly-goal-dates i, .weekly-goal-day span { color: var(--ink); border-color: var(--line); }
.weekly-goal-dates .is-today:not(.is-complete) i { outline-color: var(--ink); }
.nav button.active::after { background: var(--ink); }
.day-body-tabs button[aria-pressed=true] { background: var(--ink)!important; color: var(--surface)!important; }
.day-body-tabs button[aria-pressed=false] { background: var(--surface); color: var(--muted); }
.day-picker #day-options [aria-pressed=true], .day-recommendation-list [aria-pressed=true],
.beta-experience input:checked + span, .beta-pick:has(input:checked) {
  background: var(--surface-muted); border-color: var(--ink); color: var(--ink);
}
.day-recommendation-list [aria-pressed=true] { box-shadow: inset 3px 0 var(--ink); }
.day-recommendation-list [aria-pressed=true] .suggestion-state { color: var(--ink); }
.day-exercise[aria-pressed=true] .day-check { background: var(--ink); border-color: var(--ink); color: var(--surface); }

/* Finished sets remain visibly checked while their values stay readable. */
.main[data-page=workout] .workout-set.done { background: var(--surface-muted); }
.set-grid input:disabled { background: var(--surface-muted); color: var(--muted); }
.exercise.is-dragging, .workout-set.is-set-dragging { background: var(--surface-muted); outline-color: var(--ink); }
.workout-reward .modal-actions { background: var(--surface); border-color: var(--line); }
.timer.rest-panel.compact-rest { background: var(--surface); color: var(--ink); }
.compact-rest .rest-readout svg { color: var(--ink); }

/* State is communicated by existing text, icons and borders as well as tone. */
.beta-form-error, .reward-save[data-state=error], .local-save-inline { color: var(--ink)!important; }
.beta-save-alert, .local-save-alert, .reward-save[data-state=error],
.network-alert, .save-alert, .birth-alert {
  background: var(--surface-muted); border-color: var(--ink); color: var(--ink);
}
.beta-save-alert p, .local-save-alert p { color: var(--ink); }
.beta-form-error:not(:empty) { border-left: 3px solid var(--ink); padding-left: 12px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, .beta-data-help a:focus-visible, .pwa-install-link:focus-visible,
.pwa-install-dialog button:focus-visible, .compact-rest button:focus-visible { outline-color: var(--ink); }
.check, .beta-password-form input, #beta-register input[name=nickname],
:is(.main,dialog) .field :is(input:not([type=radio]):not([type=checkbox]),select,textarea) {
  border-color: #8a8a8a;
}
.beta-entry .beta-password-form input { color: var(--ink); border-color: #8a8a8a; }
.beta-entry .beta-password-form input:focus { border-color: var(--ink); }
.beta-brand { color: var(--ink); }
:is(.main,dialog) .field :is(input,select,textarea):focus { border-color: var(--ink); }
dialog::backdrop { background: #0008; }
#rest-time-dialog::backdrop { background: #0006; }

/* Shared reward and memory surfaces formerly used green, blue or gold. */
.reward-companion-moment, .reward-companion-fallback, .record-shortcut,
.relationship-current, .relationship-discoveries > .relationship-empty,
.relationship-timeline .relationship-empty, .personality-preview {
  background: var(--surface-muted); border-color: var(--line); color: var(--ink);
}
.reward-companion-scene { background: var(--surface-muted); }
.pet-scene::after { background: #0002; }
.pet-head .eyebrow { color: var(--muted); }
.pet-speech { background: var(--surface); color: var(--ink); border-color: var(--ink); box-shadow: 0 4px 0 #0002; }
.speech { color: var(--surface); }
.mascot-hello img { image-rendering: auto; }
.reward-exp { color: var(--ink); text-shadow: 1px 1px var(--surface), -1px -1px var(--surface); }
.reward-exp-echo, .reward-exp-spark, .reward-companion-copy small,
.reward-companion-fallback small, .reward-companion-copy p,
.reward-companion-fallback p, .personality-preview-label,
.relationship-current, .relationship-empty b, .relationship-progress span {
  color: var(--muted);
}
.reward-companion-copy h3, .reward-companion-fallback h3, .reward-comparison small,
.personal-records p, .pr-stars { color: var(--ink); }
.reward-share-action { background: var(--surface); color: var(--ink); border-color: var(--line); }
.pet-relationship, .pet-relationship[data-relationship-personality] {
  --relationship-accent: var(--ink); --relationship-soft: var(--surface-muted);
}
.relationship-discovery.is-locked, .relationship-discovery.is-locked::after,
.relationship-discovery.is-locked .relationship-day, .relationship-discovery.is-locked p {
  color: var(--muted); background-color: var(--surface);
}
.relationship-progress.is-complete { border-left-color: var(--ink); }
.relationship-discovery blockquote { border-color: var(--line); }
.level-fireworks i { background: var(--ink); }
.level-fireworks i:nth-child(3n) { background: #aaa; }
.level-fireworks i:nth-child(3n+1) { background: #666; }

/* Form previews, onboarding and tool surfaces keep their existing geometry. */
.onboarding-speech, .onboarding-tour-example, .onboarding-preview-note,
.onboarding-mascot, .mascot-bubble, .mascot-bubble::before, .ptmon-speech,
.ptmon-speech::before, .first-run-guide, .tour-practice, .birth-preview,
.birth-policy, .reveal-stage, .sprite-preview-stage, .sprite-family-preview > div,
.exercise-library, .exercise-group-help, .preview-options button, .preview-label,
.recovery-source, .personality-hints span, .item-pixel, .potion {
  background: var(--surface-muted); color: var(--ink); border-color: var(--line);
}
.workout-group-banner { background: var(--surface-muted); color: var(--ink); border-color: var(--line); }
.workout-group-follow { color: var(--muted); }
.onboarding-guide-label, .tour-practice-label, .tour-set-head,
.tour-practice-feedback, .onboarding-progress li, .onboarding-tour-example,
.onboarding-name-warning, .birth-preview > p, .birth-notes, .birth-policy,
.generation-state p, .memory-row p, .memory-row small, .life-timeline span,
.shop-item p, .preview-options span, .preview-note, .preview-label,
.exercise-recent-label, .exercise-group-arrow, .exercise-library-empty {
  color: var(--muted);
}
.mascot-bubble p { color: var(--ink)!important; }
.entry-world .mascot-bubble p { color: var(--muted)!important; }
.tour-demo-recommend, .tour-ready, .tour-demo-tabs button[aria-pressed=true],
.memory-symbol { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.tour-demo-recommend small { color: var(--surface); }
.tour-demo-recommend p { color: #ddd; }
.memory-row h3, .birth-reveal .reveal-letter, .egg-crack, .reveal-spark,
.loading-pixels { color: var(--ink); }
.onboarding-progress li[aria-current=step], .onboarding-progress li.is-past { border-color: var(--ink); color: var(--ink); }
.onboarding-card, .onboarding-day, .onboarding-progress li, .ptmon-choices label,
.ptmon-family-choices label, .exercise-group-preset, .exercise-group-types label,
.exercise-group-creator .exercise-group-save-actions { border-color: var(--line); }
.tour-set-row input, .tour-set-row button, .tour-demo-tabs button { border-color: #8a8a8a; }
.tour-set-row input { background: var(--surface); color: var(--ink); }
.ptmon-picker-field legend { color: var(--ink); }
.mascot-hello:focus-visible, .ptmon-choices label:focus-within,
.ptmon-family-choices label:focus-within, .ptmon-color-group label:focus-within,
.first-run-target { outline-color: var(--ink); }
.first-run-guide { box-shadow: 0 12px 28px #0001; }
.ptmon-choices label:has(:checked), .ptmon-family-choices label:has(:checked),
.ptmon-color-group label:has(:checked), .trait-chip input:checked + span,
.choice-picker-options label:hover, .choice-picker-options label:has(:checked) {
  background: var(--surface-muted); border-color: var(--ink); color: var(--ink);
}
.ptmon-choices input, .ptmon-family-choices input, .ptmon-color-group input,
.choice-picker-options input, .lifecycle-consent input { accent-color: var(--ink); }
.trait-chip input:focus-visible + span, .body-split-groups input:focus-visible + span,
.choice-picker-menu summary:focus-visible, .choice-picker-options label:focus-within {
  outline-color: var(--ink);
}
.body-split-day, .body-split-groups label > span, .choice-picker-menu,
.choice-picker-options { background: var(--surface); color: var(--ink); border-color: var(--line); }
.body-split-day legend b { color: var(--ink); }
.body-split-day legend small, .body-split-help { color: var(--muted); }
.body-split-groups input:checked + span {
  background: var(--ink); color: var(--surface); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink);
}
.choice-picker-menu[open] { border-color: var(--ink); box-shadow: 0 8px 20px #0001; }
.exercise-group-type, .user-exercise-badge { background: var(--surface-muted); color: var(--ink)!important; }
.user-exercise { border-color: var(--ink)!important; background: var(--surface)!important; }
.preview-options button:hover { background: var(--surface-muted); border-color: var(--ink); }
.life-critical, .life-dead { background: var(--surface-muted); border-color: var(--ink); }

.pwa-install-dialog { color: var(--ink); border-color: var(--line); }
.pwa-install-heading button, .pwa-install-copy { background: var(--surface-muted); color: var(--ink); border-color: var(--line); }
.pwa-install-dialog .pwa-install-note { color: var(--muted); }

/* Neutral scene surfaces; original character, exercise and ornament images keep their colors. */
.decoration-backdrop { background: #eee; }
.decoration-backdrop::before { background: #eee; }
.decoration-backdrop::after { background: #333; }
.decoration-stage[data-decoration=meteor] .decoration-backdrop { background: linear-gradient(#333, #666 45%, transparent 90%); }
.decoration-world:has([data-decoration=orb][data-sky=day]) > :is(.pet-touch,.sprite-wrap) { filter: brightness(1.08) drop-shadow(0 0 13px #fff); }
.decoration-world:has([data-decoration=orb][data-sky=night]) > :is(.pet-touch,.sprite-wrap) { filter: brightness(.78) drop-shadow(0 0 6px #ddd); }
.decoration-emitter { background: #fff; box-shadow: 0 0 10px 3px #fff9; }
.decoration-beam { background: linear-gradient(#fffb, #ddd8 50%, #ddd2); }
.decoration-beam::after { background: #fff5; }
.decoration-beam i, .decoration-sky-star { background: #eee; }
.decoration-ground-glow { background: #ddd; border-color: #aaa; }
.decoration-prop-shadow { background: #0003; }
.decoration-stage :is(.decoration-sun,.decoration-moon) { filter: drop-shadow(0 0 9px #fff); }
.decoration-stage[data-sky=night] .decoration-moon { filter: drop-shadow(0 0 12px #eee); }
.decoration-falling-star i { background: #fff; box-shadow: 0 0 8px #fff; }
.decoration-falling-star::before { background: linear-gradient(transparent, #ddd 80%, #fff); }

.topbar, .profile, .pwa-install-link, .bottom-note, .growth-rules { color: var(--muted); }
.topbar .mobile-title, .program-card, .program-card strong { color: var(--ink); }
.growth-stage { border-color: var(--line); }
.session-launch::after { border-color: #00000014; }

@media (forced-colors: active) {
  button:focus-visible, input:focus-visible, select:focus-visible,
  textarea:focus-visible, summary:focus-visible, .trait-chip input:focus-visible + span,
  .body-split-groups input:focus-visible + span { outline-color: Highlight; }
}

/* Approved mascot-and-wordmark lockup. */
.ptquest-logo{display:block;width:120px;max-width:100%;height:auto;object-fit:contain}
.beta-brand .ptquest-logo{width:220px;mix-blend-mode:normal}
.sidebar .brand .ptquest-logo{width:160px}
.mobile-title .ptquest-logo{width:104px}
.beta-entry:not(.beta-entry--register)>.beta-friend{display:none}

/* Quiet training surfaces; color marks companionship, choices and rewards. */
.beta-friend, .character-home .partner-arena::before,
.main[data-page="pet"] .pet-scene, .reward-companion-scene { background: var(--lavender-soft); }
.home-growth-strip .progress span, .main[data-page="pet"] .pet-foot .progress span,
.reward-clean .reward-growth .progress span { background: var(--lavender); }
.reward-clean .reward-progress-summary, .relationship-discovery.is-unlocked,
.relationship-progress { background: var(--lavender-soft); }
.reward-clean .earned-xp, .home-partner-head .badge { color: var(--lavender); }
.beta-experience input:checked + span, .beta-pick:has(input:checked),
.ptmon-choices label:has(:checked), .ptmon-family-choices label:has(:checked),
.choice-picker-options label:has(:checked) {
  background: var(--lavender-soft); border-color: var(--lavender); color: var(--ink);
}
.day-recommendation-list [aria-pressed=true] {
  background: var(--lavender-soft); border-color: var(--lavender); box-shadow: inset 3px 0 var(--lavender);
}
.decoration-grid progress { accent-color: var(--lavender); }
.weekly-goal-progress > .is-achieved,
.reward-clean .reward-growth.level-up [data-xp-level] { background: var(--butter); color: var(--ink); }
.reward-clean .pr-celebration { background: color-mix(in srgb, var(--butter) 24%, var(--surface)); border-color: var(--butter); }
.level-fireworks i { background: var(--butter); }
.level-fireworks i:nth-child(3n) { background: var(--lavender); }
.level-fireworks i:nth-child(3n+1) { background: #cbbcdf; }

.strength-picker{display:flex;gap:4px;padding:4px;background:var(--paper);border:1px solid var(--line);border-radius:14px;margin:18px 0}
.strength-picker button{flex:1;min-width:0;min-height:46px;padding:10px 4px;border-radius:10px;font-size:13px;font-weight:600;color:var(--muted)}
.strength-picker button[aria-pressed="true"]{background:var(--lavender-soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--lavender)}
.strength-chart{display:block;width:100%;height:auto;overflow:visible}
.strength-chart text{font-size:10px;fill:var(--muted);font-variant-numeric:tabular-nums}
.strength-grid{stroke:var(--line);stroke-dasharray:3 4}
.strength-line{fill:none;stroke:var(--lavender);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.strength-dot{fill:var(--surface);stroke:var(--lavender);stroke-width:2.5}
.weight-trend .chart-scroll{margin:18px 0;max-width:100%;overflow-x:auto}

.strength-picker{flex-wrap:wrap}.strength-picker button{flex:1 0 28%;overflow-wrap:anywhere}
.trend-controls{display:flex;justify-content:space-between;gap:12px}.trend-controls button{min-height:44px}
.trend-results{max-height:40vh;overflow-y:auto}.trend-results button{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;min-height:58px;padding:12px;border-bottom:1px solid var(--line);gap:16px}.trend-results button:hover,.trend-results button:focus-visible{background:var(--lavender-soft)}.trend-results small{display:block;color:var(--muted);margin-top:4px}

.coach-coming{min-height:50vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:32px 12px}.coach-coming h2{font-size:20px}.coach-symbol{display:grid;place-items:center;width:72px;height:72px;border-radius:24px;background:var(--lavender-soft);color:var(--lavender)}.coach-symbol svg{width:32px;height:32px}.coach-coming .eyebrow{color:var(--lavender);letter-spacing:.15em}
@media(max-width:760px){.nav button{flex:1;min-width:0;padding-left:3px;padding-right:3px;white-space:nowrap}}
@media(max-width:760px){.nav{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}.nav button{font-size:10px}}

.nav .moong-nav-icon,.nav .active .moong-nav-icon{width:30px;height:30px;stroke-width:1.5;color:var(--ink)}
.moong-nav-icon .moong-face,.moong-nav-icon .moong-prop{fill:var(--paper)}
.nav .active .moong-face{fill:var(--lavender-soft)}
@media(max-width:760px){.nav button{gap:3px;padding-top:4px;padding-bottom:4px}}
/* UI UX Pro Max pass: retain PTQUEST tokens; improve hierarchy and touch input. */
.main{line-height:1.55}
.main h1,.main h2,.main h3,dialog h2{word-break:keep-all;overflow-wrap:anywhere;letter-spacing:-.035em}
.main .intro p,.friend-response,.touch-hint,.chart-note,.character-home .session-launch p{font-size:14px;line-height:1.65}
.main .card,.main .routine,.character-home .session-launch,.main[data-page="workout"] .exercise{border-radius:20px;border-color:var(--line);box-shadow:0 2px 8px #11111103}
.main .section-head{gap:12px}
.main .textbtn{min-height:44px;padding:8px 4px;text-underline-offset:4px}
.main .primary,.main .start-btn,dialog .primary{border-radius:14px;font-weight:700}
.main .secondary,dialog .secondary{border-radius:12px}
.main :is(button,input,select,textarea,summary),dialog :is(button,input,select,textarea,summary){scroll-margin-block:100px}
.main :is(input,select,textarea):focus-visible,dialog :is(input,select,textarea):focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.main .empty{padding:28px 16px;font-size:14px;line-height:1.7}
.main .empty strong{display:block;color:var(--ink);margin-bottom:8px;font-size:15px}
.character-home .home-partner-head .badge{background:var(--lavender-soft);min-height:44px}
.character-home .session-launch{padding:24px}
.character-home .session-launch h2{margin:10px 0;font-size:25px;line-height:1.35}
.character-home .session-meta{font-size:12px;gap:8px;margin:14px 0 18px}
.character-home .session-launch .eyebrow{font-weight:700;color:var(--ink)}
.home-growth-strip{padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--surface);font-size:13px}
.home-growth-strip .progress{height:6px}
.main[data-page="history"] .stat small{font-size:12px}
.main[data-page="history"] .stat strong{font-variant-numeric:tabular-nums}
.trend-summary strong{letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.strength-picker{gap:8px;background:var(--surface-muted);border:0;padding:6px}
.strength-picker button{font-size:13px;min-height:48px}
.strength-picker button[aria-pressed="true"]{background:var(--surface);box-shadow:0 1px 4px #11111110,inset 0 0 0 1px var(--lavender)}
.chart-data summary{min-height:44px;padding-block:12px}
.main[data-page="workout"] .workout-companion{background:var(--lavender-soft);border:0;border-radius:16px}
.main[data-page="workout"] .exercise>.section-head{padding-bottom:12px;border-bottom:1px solid var(--line)}
.main[data-page="workout"] .workout-order-controls{gap:8px;align-items:center}
.main[data-page="workout"] .workout-order-controls .textbtn{min-width:44px;min-height:44px;border-radius:10px;background:var(--surface-muted);text-decoration:none}
.main[data-page="workout"] .workout-order-controls button:disabled{background:transparent}
.main[data-page="workout"] .set-grid{gap:8px}
.main[data-page="workout"] .set-grid input{background:var(--surface);border:1px solid #8a8a8a;border-radius:12px;font-variant-numeric:tabular-nums;height:50px}
.main[data-page="workout"] .set-grid input:disabled{background:var(--lavender-soft);border-color:var(--line);color:var(--ink)}
.main[data-page="workout"] .check{border-radius:12px;width:46px;height:46px}
.main[data-page="workout"] .exercise-tools{gap:8px;padding-top:12px}
.main[data-page="workout"] .exercise-tools .textbtn{font-size:13px;min-height:44px}
.main[data-page="workout"] .exercise-jump{gap:8px}
.main[data-page="workout"] .exercise-jump button{min-height:44px;font-size:12px}
.main[data-page="workout"] .exercise-jump button.active{background:var(--lavender-soft)}
@media(max-width:760px){
 .main{padding-inline:20px}
 .main .intro{padding-top:0;margin-bottom:20px}
 .main .intro h1{font-size:27px}
 .main .intro p{font-size:14px}
 .character-home .home-partner-head{margin-bottom:8px}
 .character-home h1{font-size:26px}
 .character-home .partner-arena{height:180px}
 .character-home .partner-arena .sample-pet,.character-home .partner-arena .pixel-sprite{width:180px;height:180px}
 .character-home .partner-arena::before{width:150px;height:150px}
 .character-home .touch-hint{font-size:12px}
 .character-home .session-launch{padding:20px}
 .character-home .training-overview{gap:20px}
 .main[data-page="workout"] .exercise{padding:16px}
 .main[data-page="workout"] .set-grid{grid-template-columns:24px minmax(0,1fr) minmax(0,1fr) 46px}
 .main[data-page="workout"] .workout-order-controls{flex-basis:100%;justify-content:flex-end}
 .main[data-page="workout"] .exercise h2{font-size:18px}
 .nav button{font-size:11px;min-height:56px}
 .nav button.active{background:var(--lavender-soft)}
 .nav button.active::after{background:var(--lavender)}
 dialog .field :is(input:not([type=radio]):not([type=checkbox]),select,textarea){font-size:16px;min-height:48px}
}
@media(max-width:359px){.main{padding-inline:14px}.nav button{font-size:10px}.character-home h1{font-size:24px}.character-home .session-launch{padding:18px}}

.character-home .session-launch p,.friend-response{word-break:keep-all;overflow-wrap:anywhere}
