/* personality-profile.css — Personality profile tool only.
   Uses the site tokens from /assets/css/style.css. Mobile-first. */

.pp-privacy-banner {
  background:    var(--color-primary-light);
  border-left:   4px solid var(--color-primary);
  border-radius: var(--radius);
  padding:       var(--sp-3) var(--sp-4);
  font-size:     var(--text-sm);
  color:         #1e3a8a;
  margin-bottom: var(--sp-5);
  max-width:     72ch;
}

.pp-panel,
.pp-card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--sp-5) var(--sp-4);
  margin-bottom: var(--sp-5);
}

@media (min-width: 480px) {
  .pp-panel, .pp-card { padding: var(--sp-6); }
}

.pp-panel h2, .pp-card h3 { margin-top: 0; }
.pp-card h4 { font-size: var(--text-md); margin: var(--sp-5) 0 var(--sp-2); }
.pp-card h5 { font-size: var(--text-base); margin: var(--sp-3) 0 var(--sp-1); }

.pp-facts { padding-left: var(--sp-5); margin-bottom: var(--sp-4); }
.pp-facts li { margin-bottom: var(--sp-2); }

.pp-disclaimer,
.pp-note {
  font-size: var(--text-sm);
  color:     var(--color-text-muted);
}

.pp-actions {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--sp-3);
  margin-top: var(--sp-4);
}

.pp-status:empty { display: none; }
.pp-status { margin-top: var(--sp-3); font-size: var(--text-sm); color: var(--color-text-muted); }

/* Questionnaire */
.pp-progress { margin-bottom: var(--sp-4); }
.pp-progress__label { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--sp-1); }

.pp-progress progress {
  width:              100%;
  height:             10px;
  appearance:         none;
  border:             0;
  border-radius:      5px;
  background:         var(--color-border);
  overflow:           hidden;
}
.pp-progress progress::-webkit-progress-bar   { background: var(--color-border); border-radius: 5px; }
.pp-progress progress::-webkit-progress-value { background: var(--color-primary); border-radius: 5px; }
.pp-progress progress::-moz-progress-bar      { background: var(--color-primary); border-radius: 5px; }

.pp-section-title { font-size: var(--text-lg); margin-bottom: var(--sp-2); }
.pp-instructions  { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--sp-4); max-width: 72ch; }

.pp-q {
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  padding:       var(--sp-3) var(--sp-3) var(--sp-4);
  margin:        0 0 var(--sp-3);
  min-width:     0;
}

.pp-q legend {
  font-weight: 600;
  padding:     0 var(--sp-1);
  line-height: 1.4;
}

.pp-q__num { color: var(--color-text-muted); font-weight: 500; }

.pp-q--missing {
  border-color: #dc2626;
  background:   #fef2f2;
}

.pp-scale {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--sp-2);
  margin-top:            var(--sp-2);
}

@media (min-width: 768px) {
  .pp-scale--5 { grid-template-columns: repeat(5, 1fr); }
  .pp-scale--6 { grid-template-columns: repeat(6, 1fr); }
}

.pp-option {
  display:       flex;
  align-items:   center;
  gap:           var(--sp-2);
  min-height:    44px;
  padding:       var(--sp-2) var(--sp-3);
  border:        1.5px solid var(--color-border-strong);
  border-radius: var(--radius);
  font-size:     var(--text-sm);
  cursor:        pointer;
  line-height:   1.3;
}

.pp-option:has(input:checked) {
  border-color: var(--color-primary);
  background:   var(--color-primary-light);
  font-weight:  600;
}

.pp-option input {
  width:        1.125rem;
  height:       1.125rem;
  accent-color: var(--color-primary);
  flex-shrink:  0;
}

.pp-error {
  background:    #fef2f2;
  border-left:   4px solid #dc2626;
  border-radius: var(--radius);
  color:         #7f1d1d;
  padding:       var(--sp-3) var(--sp-4);
  font-size:     var(--text-sm);
}

.pp-nav {
  display:         flex;
  justify-content: space-between;
  gap:             var(--sp-3);
  margin-top:      var(--sp-4);
}

.pp-nav .btn:disabled { opacity: 0.45; cursor: not-allowed; }

.pp-secondary {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--sp-4);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border);
}

.pp-link-button {
  background:      none;
  border:          0;
  padding:         var(--sp-2) 0;
  min-height:      44px;
  color:           var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size:       var(--text-sm);
}

/* Results */
.pp-results__head { margin: var(--sp-6) 0 var(--sp-4); }
.pp-results__head h2 { margin-bottom: var(--sp-2); }
.pp-results__sub { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 72ch; }

.pp-archetype { display: grid; gap: var(--sp-5); }

@media (min-width: 768px) {
  .pp-archetype { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
}

.pp-archetype__img {
  width:         100%;
  height:        auto;
  border-radius: var(--radius);
  border:        1px solid var(--color-border);
}

.pp-kicker { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.pp-archetype__name { font-size: var(--text-2xl); color: var(--color-primary-dark); margin: 0 0 var(--sp-2); }

.pp-keywords {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--sp-2);
  list-style: none;
  padding:    0;
  margin:     var(--sp-3) 0;
}

.pp-keywords li {
  background:    var(--color-primary-light);
  color:         var(--color-primary-dark);
  border-radius: 999px;
  padding:       var(--sp-1) var(--sp-3);
  font-size:     var(--text-sm);
  font-weight:   600;
}

.pp-gauge { padding: var(--sp-4) 0; border-top: 1px solid var(--color-border); }
.pp-gauge:first-of-type { border-top: 0; }
.pp-gauge p { margin: var(--sp-1) 0; }

.pp-gauge__head {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--sp-3);
}

.pp-gauge__head h4 { margin: 0; font-size: var(--text-md); }

.pp-badge {
  font-size:     var(--text-sm);
  font-weight:   700;
  border-radius: 999px;
  padding:       2px var(--sp-3);
  border:        1.5px solid currentColor;
}
.pp-badge--high    { color: var(--color-primary-dark); }
.pp-badge--average { color: var(--color-text-muted); }
.pp-badge--low     { color: #7c2d12; }

.pp-gauge__track {
  position:      relative;
  height:        14px;
  margin:        var(--sp-3) 0 var(--sp-2);
  background:    var(--color-border);
  border-radius: 7px;
}

.pp-gauge__fill {
  position:      absolute;
  inset:         0 auto 0 0;
  background:    #86b6ef;
  border-radius: 7px;
}

.pp-gauge__avg {
  position:   absolute;
  top:        -5px;
  bottom:     -5px;
  width:      3px;
  margin-left: -1.5px;
  background: var(--color-text-muted);
}

.pp-gauge__marker,
.pp-continuum__marker {
  position:      absolute;
  top:           50%;
  width:         20px;
  height:        20px;
  margin:        -10px 0 0 -10px;
  border-radius: 50%;
  background:    var(--color-primary);
  border:        3px solid #fff;
  box-shadow:    0 0 0 1px var(--color-primary);
}

.pp-gauge__score { font-weight: 600; font-size: var(--text-sm); }

.pp-continuum { margin: var(--sp-4) 0; }
.pp-continuum__labels { display: flex; justify-content: space-between; font-weight: 600; font-size: var(--text-sm); }
.pp-continuum__track {
  position:      relative;
  height:        14px;
  margin:        var(--sp-2) 10px;
  border-radius: 7px;
  background:    linear-gradient(90deg, #cde2fb, var(--color-border) 50%, #fde2cf);
}

.pp-3d-controls {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--sp-2) var(--sp-3);
  margin:      var(--sp-3) 0;
}

.pp-3d-controls label { font-weight: 600; font-size: var(--text-sm); }

.pp-3d-controls select {
  padding:       var(--sp-2) var(--sp-3);
  border:        1.5px solid var(--color-border-strong);
  border-radius: var(--radius);
  font:          inherit;
  min-height:    44px;
}

.pp-small { padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); min-height: 44px; }

.pp-3d svg { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }

.pp-3d-legend { font-size: var(--text-sm); padding-left: var(--sp-5); margin: var(--sp-2) 0; }

.pp-try li { margin-bottom: var(--sp-3); }
.pp-refs { font-size: var(--text-sm); color: var(--color-text-muted); }

.pp-details {
  border-top: 1px solid var(--color-border);
  padding:    var(--sp-2) 0;
}

.pp-details summary {
  cursor:      pointer;
  font-weight: 600;
  color:       var(--color-primary);
  min-height:  44px;
  display:     flex;
  align-items: center;
}

.pp-reflist { font-size: var(--text-sm); padding-left: var(--sp-5); }
.pp-reflist li { margin-bottom: var(--sp-2); overflow-wrap: anywhere; }

.pp-name { max-width: 24rem; margin-bottom: var(--sp-2); }

.pp-check {
  display:     inline-flex;
  align-items: center;
  gap:         var(--sp-2);
  min-height:  44px;
  font-size:   var(--text-sm);
}

.pp-check input { width: 1.125rem; height: 1.125rem; accent-color: var(--color-primary); }

.pp-about { margin-top: var(--sp-8); max-width: 72ch; font-size: var(--text-sm); }
.pp-about h2 { font-size: var(--text-lg); }