.personality-page { color: #0f172a; text-align: left; min-width: 0; container: personality / inline-size; }
.personality-heading, .personality-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.personality-heading h2 { margin: 0; }
.personality-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.personality-logo { width: 44px; height: 44px; object-fit: contain; flex: 0 0 44px; }
.personality-horizon { margin-top: 16px; }
.personality-horizon h3 { margin: 0; font-size: 1.05rem; }
.personality-horizon .profile-mode-switch button { min-height: 44px; }
.personality-view-switch { margin: 16px 0; }
.ticker-profile-kinds { margin: 8px 0 4px; }
.ticker-profile-kinds button { min-height: 44px; flex: 1; padding-inline: 8px; }
.personality-view-switch button { min-height: 44px; flex: 1; }
#personality-details > .ticker-pages-home { padding: 0; }
#personality-details #overall-profile > .profile-focus-header .profile-mode-switch,
#personality-details #profile-title { display: none; }
.personality-eyebrow { color: #475569; font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; margin: 0 0 6px; }
.personality-toolbar { justify-content: flex-start; align-items: flex-end; margin-top: 16px; }
.personality-toolbar label { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; font-size: .875rem; }
.personality-toolbar :is(select, button) { height: 44px; min-height: 44px; box-sizing: border-box; margin: 0; }
.personality-toolbar select { padding: 8px 12px; border: 1px solid #94a3b8; border-radius: 6px; background: white; color: #0f172a; font: inherit; }
.personality-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.personality-traits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#personality-status { font-size: .8125rem; line-height: 1.5; margin: 12px 0; }
.personality-card, .personality-method { background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; padding: 16px; min-width: 0; }
.personality-card h3 { margin: 0 0 12px; font-size: 1.05rem; }
.personality-card p, .personality-method p, .personality-method li { font-size: .875rem; line-height: 1.55; overflow-wrap: anywhere; }
.personality-card small { color: #475569; line-height: 1.5; display: block; }
.personality-wide { grid-column: 1 / -1; }
.personality-chart { overflow-x: auto; margin: 8px 0; }
.personality-chart svg { display: block; width: 100%; min-width: 620px; height: auto; }
.personality-chart:focus-visible { outline: 2px solid #2563eb; }
.personality-volume { margin: 16px 0; }
.personality-volume-values { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.personality-volume-values > div { display: grid; gap: 4px; }
.personality-volume-values span, .personality-volume-scale { color: #475569; font-size: .8125rem; }
.personality-volume-values strong { font-variant-numeric: tabular-nums; }
.personality-volume-meter { position: relative; height: 12px; margin: 16px 0 6px; background: #e2e8f0; border-radius: 8px; }
.personality-volume-meter i { display: block; height: 100%; background: #2563eb; border-radius: inherit; }
.personality-volume-meter b { position: absolute; top: -4px; height: 20px; border-left: 2px solid #475569; }
.personality-volume-scale { position: relative; display: flex; justify-content: space-between; padding-bottom: 20px; }
.personality-volume-scale span:nth-child(2) { position: absolute; transform: translateX(-50%); }
.personality-metric { border-top: 1px solid #e2e8f0; padding: 12px 0; }
.personality-metric > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.personality-traits .personality-metric > div:first-child { min-height: 42px; line-height: 1.5; }
.personality-metric strong { font-variant-numeric: tabular-nums; }
.personality-track { position: relative; height: 10px; background: #f1f5f9; border-radius: 8px; margin: 10px 6px; }
.personality-band { position: absolute; top: 0; height: 10px; background: #94a3b8; border-radius: 8px; }
.personality-marker { position: absolute; top: 50%; width: 12px; height: 12px; background: #2563eb; border: 2px solid white; border-radius: 50%; transform: translate(-50%, -50%); }
.personality-median { background: #0f172a; }
.personality-method { margin-bottom: 16px; background: #f8fafc; }
.personality-card details { margin-top: 12px; }
.personality-card summary, .personality-method summary { cursor: pointer; font-size: .875rem; padding: 8px 0; }
.personality-table { overflow-x: auto; }
.personality-table table { width: 100%; border-collapse: collapse; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.personality-table :is(th, td) { padding: 8px; text-align: left; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.personality-environment[data-current="true"] { border-left: 4px solid #2563eb; padding-left: 12px; background: #eff6ff; }
.personality-error { color: #b91c1c; }
.personality-page [hidden] { display: none !important; }
@container personality (max-width: 620px) {
    .personality-grid, .personality-traits { grid-template-columns: minmax(0, 1fr); }
    .personality-traits .personality-metric > div:first-child { min-height: 0; }
    .personality-toolbar { align-items: stretch; }
    .personality-toolbar > * { flex: 1 1 100%; }
    .personality-heading { padding-right: 28px; }
    .personality-horizon .profile-mode-switch { width: 100%; }
    .personality-horizon .profile-mode-switch button { flex: 1; padding-inline: 8px; }
}
@media (max-width: 650px) {
    .personality-grid, .personality-traits { grid-template-columns: minmax(0, 1fr); }
    .personality-traits .personality-metric > div:first-child { min-height: 0; }
    .personality-toolbar > * { flex: 1 1 100%; }
}