/* Overview, cognition, personality, philosophy + political alignments */

.overview-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.oh-stat {
  padding: 18px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: center;
}

.oh-big {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  color: var(--white);
  letter-spacing: 0.06em;
  line-height: 1;
}

.oh-lbl {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

.overview-tagline {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--muted2);
  line-height: 1.8;
  margin: 0;
}

.overview-trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.overview-story-card {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.overview-story-card.shadow-card {
  border-color: rgba(120, 80, 140, 0.35);
}

.overview-story-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 10px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--surface2);
}

.values-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.value-pill {
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted2);
}

/* Cognition */
.cog-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.fn-wheel-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 12px auto;
}

.fn-wheel-ring {
  position: absolute;
  inset: 0;
}

.fn-wheel-spoke {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 72px;
  margin-left: -2px;
  margin-top: -72px;
  transform-origin: 50% 100%;
  transform: rotate(var(--spoke-angle));
}

.fn-wheel-bar {
  width: 100%;
  height: var(--spoke-val, 0%);
  background: linear-gradient(to top, var(--gold2), var(--gold));
  border-radius: 2px;
  opacity: 0.85;
}

.fn-wheel-label {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 600;
  color: var(--muted2);
}

.fn-wheel-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--gold2);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.fn-wheel-dom {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: var(--gold);
  line-height: 1;
}

.fn-wheel-sub {
  font-size: 7px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

.stack-ladder {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stack-rung {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.stack-rank {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.stack-fn {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  letter-spacing: 0.05em;
}

.stack-score {
  font-size: 14px;
  color: var(--gold);
}

.b5-pentagon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}

.b5-cell {
  text-align: center;
  padding: 12px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.b5-letter {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  color: var(--gold);
}

.b5-track {
  height: 4px;
  background: var(--border);
  margin: 8px 0 6px;
}

.b5-fill {
  height: 100%;
  background: var(--gold);
  width: 0;
  transition: width 0.6s ease;
}

.b5-name {
  font-size: 9px;
  color: var(--muted);
  line-height: 1.3;
}

.b5-val {
  font-size: 12px;
  color: var(--text);
  margin-top: 4px;
}

.cog-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.type-badge-lg {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.tb-label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.type-badge-lg strong {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 0.05em;
}

.fn-bar-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fn-bar-row {
  display: grid;
  grid-template-columns: 36px 1fr 32px;
  gap: 10px;
  align-items: center;
}

.fn-bar-name {
  font-weight: 600;
  font-size: 12px;
}

.fn-bar-track {
  height: 6px;
  background: var(--border);
}

.fn-bar-fill {
  height: 100%;
  width: 0;
  transition: width 0.5s ease;
}

.fn-bar-num {
  font-size: 12px;
  color: var(--gold);
  text-align: right;
}

.fn-bar-tip {
  grid-column: 2 / -1;
  font-size: 10px;
  color: var(--muted);
  margin-top: -4px;
}

/* Personality */
.enn-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  margin-bottom: 14px;
}

.enn-hero-big {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 72px;
  color: var(--gold);
  line-height: 1;
}

.enn-hero-wing {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  color: var(--muted2);
  margin-left: 4px;
}

.enn-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.enn-hero-meta .meta-lbl {
  display: block;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.pers-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.enn-ring-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.enn-ring-cell {
  padding: 10px 8px;
  text-align: center;
  border: 1px solid var(--border);
  background: var(--bg);
}

.enn-ring-core {
  border-color: var(--gold2);
  box-shadow: 0 0 0 1px rgba(200, 169, 110, 0.25);
}

.enn-ring-wing {
  border-color: var(--muted2);
}

.enn-ring-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: var(--text);
}

.enn-ring-bar {
  height: 3px;
  background: var(--border);
  margin-top: 6px;
}

.enn-ring-fill {
  height: 100%;
  background: var(--gold);
  width: 0;
}

.tmp-visual .tmp-row,
.phi-bars .phi-bar-row,
.eth-bars .eth-row {
  display: grid;
  grid-template-columns: 110px 1fr 36px;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.tmp-track,
.phi-track,
.eth-track {
  height: 5px;
  background: var(--border);
}

.tmp-fill,
.phi-fill,
.eth-fill {
  height: 100%;
  background: var(--gold);
  width: 0;
}

/* Philosophy */
.phi-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.phi-radar-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}

.phi-radar-svg {
  width: 100%;
  max-width: 220px;
  height: auto;
}

.phi-dominant {
  text-align: center;
  font-size: 12px;
  color: var(--muted2);
  margin-top: 8px;
}

.phi-dominant strong {
  color: var(--gold);
}

.mf-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.mf-mini span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 6px;
}

.mf-mini-track {
  height: 4px;
  background: var(--border);
}

.mf-mini-fill {
  height: 100%;
  background: var(--gold2);
  width: 0;
}

/* Political alignments */
.pol-align-wrap {
  margin-top: 8px;
}

.pol-align-lead {
  margin-bottom: 18px;
}

.pol-align-sub {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
  margin: -4px 0 14px;
}

.pol-align-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.pol-align-card {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  transition: border-color 0.2s, transform 0.2s;
  animation: polCardIn 0.35s ease backwards;
  animation-delay: var(--pol-card-delay, 0ms);
}

@keyframes polCardIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.pol-align-card:hover {
  border-color: var(--gold2);
  transform: translateY(-2px);
}

.pol-align-flag {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.pol-align-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-style: italic;
  color: var(--gold);
  background: var(--surface2);
}

.pol-align-icon-party {
  font-family: 'Bebas Neue', sans-serif;
  font-style: normal;
  font-size: 20px;
}

.pol-align-icon-thinker {
  border-color: rgba(90, 120, 160, 0.5);
}

.pol-align-icon-person {
  border-color: rgba(200, 169, 110, 0.4);
}

.pol-align-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 4px;
}

.pol-align-meta {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold2);
  font-weight: 400;
}

.pol-align-reason {
  font-size: 11px;
  color: var(--muted2);
  line-height: 1.65;
  margin: 0;
}

.pol-align-country .pol-align-card {
  border-left: 3px solid rgba(90, 130, 180, 0.45);
}

.pol-align-party .pol-align-card {
  border-left: 3px solid rgba(200, 169, 110, 0.5);
}

.pol-align-person .pol-align-card {
  border-left: 3px solid rgba(160, 90, 90, 0.45);
}

.pol-align-thinker .pol-align-card {
  border-left: 3px solid rgba(90, 120, 160, 0.45);
}

@media (max-width: 720px) {
  .cog-layout,
  .pers-layout,
  .phi-layout,
  .overview-hero-stats {
    grid-template-columns: 1fr;
  }
  .pol-align-grid {
    grid-template-columns: 1fr;
  }
}