/* =========================================================
   MySoundType — style.css (Header, Hero, Cards, Stacked Personality Tiles)
========================================================= */

/* Theme */
:root{
  --bg:#0A0F1D; --ink:#EAF1FF; --muted:#A9B7D0;
  --accent:#1ED760; --accent-2:#9B51E0;
  --card:rgba(18,24,42,.68); --glass-stroke:rgba(255,255,255,.08);
  --warn:#FFD166;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img,svg,video{max-width:100%;height:auto;display:block}

/* Background */
.aurora{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60% 60% at 20% 20%, rgba(158,82,224,.18), transparent 60%),
    radial-gradient(50% 50% at 80% 30%, rgba(30,215,96,.14), transparent 60%),
    radial-gradient(40% 40% at 40% 80%, rgba(158,82,224,.12), transparent 60%);
  filter:blur(34px) brightness(.95); opacity:.8;
  animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{to{transform:translate3d(0,-18px,0) scale(1.04)}}

/* Header bar */
.nav{
  position:sticky; top:0; z-index:5; backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 16px;
  border-bottom:1px solid var(--glass-stroke);
  background:linear-gradient(to bottom, rgba(10,15,29,.72), rgba(10,15,29,.36));
}
.brand{display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.2px}
.brand .glyph{color:var(--accent)}
.nav-status{display:flex; align-items:center; gap:10px; min-width:0; max-width:52vw}
.nav-status .muted{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:44vw; font-size:14px;
}
@media (max-width:720px){ .nav-status .muted{display:none} }
.auth .user{display:flex; align-items:center; gap:10px}
.auth .hidden{display:none}
.avatar{width:36px; height:36px; border-radius:50%; object-fit:cover; border:1px solid var(--glass-stroke)}
.user-meta{display:flex; flex-direction:column; line-height:1}

/* Hero */
.hero{ text-align:center; padding:88px 20px 40px; background:linear-gradient(to bottom, rgba(10,15,29,.85), transparent) }
.hero-inner{ max-width:720px; margin:0 auto; }
.hero-title{
  font-size:36px; font-weight:800; margin:0 0 16px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-tagline{ font-size:18px; max-width:600px; margin:0 auto 24px; }
.hero .btn{ font-size:18px; padding:12px 20px; }

/* Layout */
.container{ max-width:1100px; margin:0 auto; padding:40px 20px 120px; position:relative; z-index:1 }
.grid{ display:grid; gap:24px }
@media (min-width:980px){
  .grid{ grid-template-columns:1fr 1fr; align-items:start }
}
.row{ display:flex; gap:12px }
.row.center{ align-items:center }
.row.between{ justify-content:space-between }
.row.gap-xs{ gap:8px }

/* Cards */
.card{
  width:100%;
  background:linear-gradient(180deg, rgba(18,24,42,.78), rgba(18,24,42,.6));
  border:1px solid var(--glass-stroke);
  border-radius:20px; padding:20px 18px 22px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.title{ margin:0 0 10px; font-size:22px; font-weight:700 }

/* Buttons & pills */
.btn{
  appearance:none; cursor:pointer; border:1px solid transparent; border-radius:999px;
  padding:10px 14px; font-weight:700; line-height:1; background:#22304f; color:var(--ink);
  transition:transform .12s ease, filter .12s ease;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.07) }
.btn:active{ transform:translateY(0) }
.btn.primary{ background:linear-gradient(90deg,var(--accent-2),var(--accent)); color:#00190b; box-shadow:0 8px 20px rgba(30,215,96,.18) }
.btn.ghost{ background:transparent; border-color:var(--glass-stroke) }
.btn.subtle{ background:#161f35; border-color:var(--glass-stroke) }
.btn.warn{ background:var(--warn); color:#2b1600 }

.pill{ display:inline-block; padding:4px 10px; border-radius:999px; border:1px solid var(--glass-stroke); background:rgba(255,255,255,.05) }

/* Tabs, lists, progress */
.personality{ display:grid; gap:10px }
.tabs{ display:flex; gap:8px; margin:10px 0 2px }
.tab{
  appearance:none; cursor:pointer; border:1px solid var(--glass-stroke); border-radius:10px;
  background:rgba(255,255,255,.05); color:var(--ink); padding:8px 12px;
}
.tab.active{ background:linear-gradient(90deg,var(--accent-2),var(--accent)); color:#00190b; border-color:transparent }
.list{ margin:8px 0 0; padding:0 0 0 20px }

.progress{ display:grid; gap:8px }
.progress .bar{ position:relative; height:10px; background:#0f1a2c; border:1px solid var(--glass-stroke); border-radius:999px; overflow:hidden }
.progress .bar span{ position:absolute; inset:0 auto 0 0; width:0%; background:linear-gradient(90deg,var(--accent-2),var(--accent)); transition:width .25s ease }

/* Footer */
.foot{
  position:fixed; left:0; right:0; bottom:0; z-index:1;
  padding:10px 16px; border-top:1px solid var(--glass-stroke);
  background:linear-gradient(to top, rgba(10,15,29,.6), rgba(10,15,29,.25));
  display:flex; justify-content:center; backdrop-filter:blur(8px);
}

/* Helpers */
.muted{ color:var(--muted) }
.hidden{ display:none }
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }

/* ================= Personality: Stacked Category Tiles ================= */

/* Span full width so tiles have room */
@media (min-width:980px){
  #personalityCard { grid-column: 1 / -1; }
}

/* Roomy card + header */
#personalityCard { padding: 28px 24px; }
#personality h3 { margin: 0 0 6px; font-size: 26px; font-weight: 800; }
#personality > .lead { font-size: 16px; margin: 0 0 16px; color: var(--muted); }

/* Always stack tiles vertically (one per row) */
#personality .tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Tile look */
#personality .tile {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 16px 16px 14px;
}
#personality .tile h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
}
#personality .tile-intro {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 10px;
}

/* Bullets */
#personality .bullets { margin: 0; padding-left: 18px; }
#personality .bullets li { margin: 6px 0; }

/* Gentle scroll guard for very long content */
#personalityCard .scroll { max-height: 560px; overflow: auto; padding-right: 6px; }

/* Responsive tweaks */
@media (max-width:720px){
  .container{ padding:24px 14px 100px }
  .row{ gap:10px }
  .title{ font-size:20px }
  .btn{ padding:9px 12px }
}

/* ===== Personality Card Polish ===== */
#personality.card,
#personality {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border: 1px solid var(--glass-stroke, rgba(255,255,255,.12));
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Header */
#personality .section-head {
  display:flex; justify-content:space-between; gap:16px; align-items:flex-start;
  border-bottom: 1px dashed rgba(255,255,255,.12);
  padding-bottom: 12px; margin-bottom: 12px;
}
#personality h2 {
  margin:0 0 4px 0; letter-spacing:.2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color: transparent;
}

/* Chips */
#personality .chip {
  display:inline-block; padding:.35rem .6rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.15); font-size:.8rem; opacity:.95;
  backdrop-filter: blur(6px);
}

/* Sections (Strengths / Challenges / Reflections) */
#personality .section { margin-top:16px; }
#personality .section-title {
  margin:0 0 8px 0; font-size:1.0rem; letter-spacing:.3px; display:flex; gap:8px; align-items:center;
}
#personality .section-title::after {
  content:""; flex:1; height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0));
}
#personality .traits { margin:8px 0 0; padding-left:18px; }
#personality .traits li { margin:6px 0; }

/* Legend block */
#personality .legend {
  margin-top:18px; padding:14px; border:1px solid rgba(255,255,255,.12);
  border-radius:12px; background: rgba(255,255,255,.04);
}
#personality .legend h3 { margin:0 0 10px 0; font-size:1rem; opacity:.95; }
#personality .legend-grid {
  display:grid; gap:12px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
#personality .legend-item {
  display:grid; gap:6px; grid-template-rows:auto auto auto;
  padding:10px; border:1px solid rgba(255,255,255,.10); border-radius:10px;
  background: rgba(255,255,255,.03);
}
#personality .legend-label {
  display:flex; align-items:center; gap:8px; font-weight:600;
}
#personality .legend-meter {
  width:100%; height:6px; border-radius:999px;
  background: rgba(255,255,255,.08); overflow:hidden;
}
#personality .legend-fill {
  height:100%; border-radius:999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform-origin:left center;
}
@media (max-width: 560px){
  #personality .legend-grid { grid-template-columns: 1fr; }
}

/* ===== Fun Facts card ===== */
#factsCard { padding: 24px 20px; }

.facts-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.facts-list li {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 10px 12px;
  line-height: 1.5;
}

/* two columns on larger screens, stack on mobile */
@media (min-width: 980px){
  .facts-list { grid-template-columns: 1fr 1fr; }
}

.full-width-facts { width: 100%; }

.pill-row { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 6px; }
.pill-row .pill {
  border:1px solid var(--hairline, rgba(255,255,255,0.14));
  background:transparent;
  color:inherit;
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  user-select:none;
}
.pill-row .pill.selected {
  background:var(--accent, #3a74ff);
  color:#fff;
  border-color:transparent;
}
#builderCard .progress { width:100%; }

.pill-tray{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.pill{ border:1px solid rgba(255,255,255,.12); padding:6px 10px; border-radius:999px; cursor:pointer; }
.pill.selected{ background:var(--accent); border-color:var(--accent); color:#0b0f1a; }
.genre-picker .row{ gap:8px; }

#builderCard { grid-column: 1 / -1; }