/* ============ SYMPTOM MAP APP ============ */

body.app{background:var(--paper-2)}

/* top bar */
.app-bar{
  position:sticky; top:0; z-index:50; background:rgba(251,249,246,.92);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line);
}
.app-bar-in{display:flex; align-items:center; justify-content:space-between; gap:1rem; height:64px}
.app-bar .wordmark{text-decoration:none}
.app-bar .exit{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-decoration:none}
.app-bar .exit:hover{color:var(--clay)}

/* progress */
.prog{height:2px; background:var(--paper-3); position:sticky; top:64px; z-index:49}
.prog i{display:block; height:100%; width:0; background:var(--clay); transition:width .6s var(--ease)}

/* shell */
.app-main{padding:clamp(30px,6vw,64px) 0 clamp(60px,10vw,120px)}
.screen{display:none; animation:fade .55s var(--ease)}
.screen.active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

.card{
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  padding:clamp(1.6rem,4vw,3rem);
}

/* ---- intro ---- */
.intro h1{font-size:clamp(2.6rem,7vw,4.6rem)}
.intro h1 em{font-style:italic; color:var(--clay)}
.intro-facts{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:2.6rem 0}
.intro-facts div{background:var(--paper); padding:1.4rem 1.2rem; text-align:center}
.intro-facts b{display:block; font-family:var(--serif); font-size:1.7rem; color:var(--clay); line-height:1}
.intro-facts span{display:block; margin-top:.5rem; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.resume-note{
  margin-top:1.6rem; padding:1rem 1.2rem; background:var(--sage-wash);
  border-left:2px solid var(--sage); font-size:.9rem; display:flex; flex-wrap:wrap; gap:.8rem; align-items:center;
}

/* ---- question screens ---- */
.q-head{margin-bottom:2.2rem}
.q-step{font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--clay); font-weight:500; margin-bottom:1rem; display:block}
.q-head h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
.q-head p{margin-top:.9rem; color:var(--ink-soft); font-size:.98rem; max-width:56ch}

.qs{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.q{background:var(--paper); padding:clamp(1.15rem,2.4vw,1.5rem); display:grid; grid-template-columns:1fr auto; gap:1rem 1.6rem; align-items:center; transition:background .35s}
.q.answered{background:#FDFCFA}
.q .label{font-size:1rem; line-height:1.5; color:var(--ink)}
.scale{display:flex; gap:.4rem; flex:none}
.scale button{
  border:1px solid var(--line-strong); background:var(--paper); border-radius:var(--radius);
  padding:.62rem .8rem; min-width:62px; cursor:pointer;
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
  transition:all .28s var(--ease);
}
.scale button:hover{border-color:var(--clay-soft); color:var(--clay); background:var(--clay-wash)}
.scale button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.scale button[aria-pressed="true"][data-v="0"]{background:var(--sage); border-color:var(--sage)}
.scale button[aria-pressed="true"][data-v="2"],
.scale button[aria-pressed="true"][data-v="3"]{background:var(--clay); border-color:var(--clay)}
@media(max-width:720px){
  .q{grid-template-columns:1fr}
  .scale{width:100%}
  /* four across on a narrow phone: shrink the label so "Sometimes" fits */
  .scale button{
    flex:1 1 0; min-width:0; padding:.7rem .25rem;
    font-size:.58rem; letter-spacing:.02em; line-height:1.25; white-space:normal;
  }
}

/* Under ~480px four across can't hold "Sometimes" — go 2x2, which also
   gives a much bigger tap target. */
@media(max-width:480px){
  .scale{display:grid; grid-template-columns:1fr 1fr; gap:.45rem}
  .scale button{padding:.85rem .4rem; font-size:.64rem; letter-spacing:.06em}
}

/* choice chips (context questions) */
.chips{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem}
.chips button{
  border:1px solid var(--line-strong); background:var(--paper); padding:.8rem 1.2rem;
  border-radius:100px; cursor:pointer; font-size:.86rem; color:var(--ink-soft); transition:all .28s var(--ease);
}
.chips button:hover{border-color:var(--clay-soft); color:var(--clay)}
.chips button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}

.ctx-block + .ctx-block{margin-top:2.4rem; padding-top:2.4rem; border-top:1px solid var(--line)}
.ctx-block h3{font-size:1.3rem}

/* nav */
.q-nav{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:2.2rem}
.q-nav .back{background:none; border:0; cursor:pointer; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:.6rem 0}
.q-nav .back:hover{color:var(--ink)}
.q-nav .hint{font-size:.78rem; color:var(--muted)}

/* ---- results ---- */
.result-head{text-align:center; margin-bottom:2.6rem}
.result-head .patt{font-size:clamp(2.4rem,6vw,4rem); font-family:var(--serif); line-height:1; margin:.8rem 0}
.result-head .patt em{font-style:italic; color:var(--clay)}

.map-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(24px,4vw,52px); align-items:center}
@media(max-width:840px){ .map-grid{grid-template-columns:1fr} }

.radar{width:100%; max-width:420px; margin:0 auto; display:block}
.radar .web{fill:none; stroke:var(--line-strong); stroke-width:1}
.radar .spoke{stroke:var(--line-strong); stroke-width:1}
.radar .shape{fill:rgba(168,98,75,.18); stroke:var(--clay); stroke-width:1.5; stroke-linejoin:round;
  transition:d 1.1s var(--ease)}
.radar .dot{fill:var(--clay)}
.radar .lbl{font-family:var(--sans); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; fill:var(--ink-soft)}

.domains{display:grid; gap:1.1rem}
.dom{display:grid; gap:.4rem}
.dom .top{display:flex; justify-content:space-between; align-items:baseline; gap:1rem}
.dom .nm{font-size:.88rem; font-weight:400}
.dom .bd{font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500}
.dom .track{height:7px; background:var(--paper-3); overflow:hidden}
.dom .track i{display:block; height:100%; width:0; transition:width 1.1s var(--ease)}
.bd-quiet{color:var(--sage)} .fill-quiet{background:var(--sage)}
.bd-emerging{color:var(--gold)} .fill-emerging{background:var(--gold)}
.bd-loud{color:var(--clay)} .fill-loud{background:var(--clay)}
.bd-dominant{color:var(--clay-deep)} .fill-dominant{background:var(--clay-deep)}

/* gate */
.gate{
  margin-top:2.4rem; background:var(--ink); color:var(--paper);
  padding:clamp(1.8rem,4vw,3rem); position:relative; overflow:hidden;
}
.gate::before{content:""; position:absolute; inset:0; background:radial-gradient(600px 380px at 88% 20%, rgba(201,143,121,.26), transparent 62%)}
.gate > *{position:relative}
.gate h3{color:var(--paper); font-size:clamp(1.6rem,3vw,2.2rem)}
.gate p{color:#C3BBB0; font-size:.95rem}
.gate-list{list-style:none; padding:0; margin:1.4rem 0 1.8rem; display:grid; gap:.6rem}
.gate-list li{display:flex; gap:.75rem; font-size:.92rem; color:#CFC7BC}
.gate-list li::before{content:"→"; color:var(--clay-soft)}
.gate-form{display:flex; gap:.7rem; flex-wrap:wrap; max-width:560px}
.gate-form input{
  flex:1 1 240px; padding:1.05rem 1.1rem; background:rgba(251,249,246,.07);
  border:1px solid rgba(251,249,246,.28); color:var(--paper); font:inherit; font-size:.95rem; border-radius:var(--radius);
}
.gate-form input::placeholder{color:#8D867C}
.gate-form input:focus{outline:none; border-color:var(--clay-soft); background:rgba(251,249,246,.11)}
.gate .err{color:#E8A08A; font-size:.82rem; margin:.7rem 0 0; display:none}
.gate .err.show{display:block}
.gate .fine{font-size:.72rem; color:#8D867C; margin:1rem 0 0}

/* Locked preview: a teaser of the written report, not the report itself.
   Removing .locked (on unlock) restores full height and clarity. */
.locked{position:relative; max-height:360px; overflow:hidden}
.locked > .report{filter:blur(4px); opacity:.5; user-select:none; pointer-events:none}
.locked .veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(244,240,234,.15) 0%, rgba(244,240,234,.75) 45%, var(--paper-2) 88%);
}

/* unlocked report */
.report{margin-top:2.4rem; display:grid; gap:1.5rem}
.rcard{background:var(--paper); border:1px solid var(--line); padding:clamp(1.5rem,3.2vw,2.4rem)}
.rcard .tag{font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--clay); font-weight:500}
.rcard h3{margin:.85rem 0 .9rem}
.rcard p{color:var(--ink-soft); font-size:.97rem}
.actions{list-style:none; padding:0; margin:0; counter-reset:a}
.actions li{
  counter-increment:a; padding:1.1rem 0 1.1rem 3.1rem; border-top:1px solid var(--line); position:relative; font-size:.97rem;
}
.actions li::before{
  content:counter(a,decimal-leading-zero); position:absolute; left:0; top:1.05rem;
  font-family:var(--serif); font-size:1.15rem; color:var(--clay-soft);
}
.actions li b{font-weight:500; display:block; margin-bottom:.2rem}
.actions li span{color:var(--ink-soft); font-size:.92rem}
.asklist{list-style:none; padding:0; margin:0; display:grid; gap:.9rem}
.asklist li{padding-left:1.5rem; position:relative; font-family:var(--serif); font-size:1.14rem; font-style:italic; line-height:1.45}
.asklist li::before{content:"“"; position:absolute; left:0; top:-.1rem; color:var(--clay-soft); font-size:1.7rem; font-family:var(--serif)}

.summary-box{background:var(--paper-2); border:1px dashed var(--line-strong); padding:1.4rem 1.6rem; margin-top:1.2rem}
.summary-box dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:.6rem 1.4rem; font-size:.92rem}
.summary-box dt{color:var(--muted); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; padding-top:.2rem}
.summary-box dd{margin:0}

/* upsell */
.upsell{
  background:var(--paper); border:1px solid var(--line-strong); box-shadow:var(--shadow-md);
  display:grid; grid-template-columns:1fr auto; gap:clamp(24px,4vw,48px); align-items:center;
  padding:clamp(1.8rem,4vw,3rem); border-top:3px solid var(--clay);
}
@media(max-width:820px){ .upsell{grid-template-columns:1fr} }
.upsell h3{font-size:clamp(1.7rem,3.4vw,2.4rem); margin-bottom:.9rem}
.upsell .matched{
  display:inline-block; background:var(--clay-wash); color:var(--clay-deep); padding:.45rem .9rem;
  font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500; margin-bottom:1.2rem;
}
.upsell-list{list-style:none; padding:0; margin:1.2rem 0 1.8rem; display:grid; gap:.6rem}
.upsell-list li{display:flex; gap:.7rem; font-size:.94rem; color:var(--ink-soft)}
.upsell-list li::before{content:"✓"; color:var(--clay); flex:none}
.upsell-price{text-align:center; flex:none}
.upsell-price .now{font-family:var(--serif); font-size:3.6rem; color:var(--clay); line-height:1; display:block}
.upsell-price .was{font-family:var(--serif); font-size:1.3rem; color:var(--muted); text-decoration:line-through}

.result-tools{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:2.4rem}

/* print */
@media print{
  .app-bar,.prog,.gate,.upsell,.result-tools,.site-footer,.no-print{display:none !important}
  body{background:#fff; font-size:11pt}
  .card,.rcard{box-shadow:none; border-color:#ccc; break-inside:avoid}
  .report{gap:.8rem}
  section{padding:0}
  .radar{max-width:300px}
}