/* ServiceTitan Quick Check — extends the Forge Your Next styles. */
:root{--st-solid:#235f9c;--st-shaky:#c08a1e;--st-problem:#c9233e;--st-unsure:#7b8a9c}

.st-hero-forge{max-height:380px}
.st-disclaimer{max-width:1320px;margin:0 auto 40px;padding:0 5vw}

/* Statement cards with four tappable answers */
.st-cards{display:grid;gap:18px;margin-top:8px}
.st-card{border:1px solid #d4e0ec;border-left:5px solid #d4e0ec;border-radius:16px;padding:20px 22px;background:#fff;box-shadow:0 4px 14px #17395e0a;transition:border-color .2s}
.st-card.answered.solid{border-left-color:var(--st-solid)}
.st-card.answered.shaky{border-left-color:var(--st-shaky)}
.st-card.answered.problem{border-left-color:var(--st-problem)}
.st-card.answered.unsure{border-left-color:var(--st-unsure)}
.st-statement{font-size:19px;line-height:1.45;color:#17395e;font-weight:600;margin:8px 0 16px}
.st-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.st-choice{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:12px 13px;border-radius:12px;border:1px solid #cfdcea;background:#f6f9fd;color:#17395e;cursor:pointer;font:inherit;transition:transform .15s,border-color .15s,background .15s}
.st-choice b{font-size:15px}
.st-choice small{font-size:12px;line-height:1.35;color:#60748c}
.st-choice:hover{transform:translateY(-2px);border-color:#9fb6cf}
.st-choice:focus-visible{outline:3px solid #235f9c55;outline-offset:2px}
.st-choice.selected{color:#fff}
.st-choice.selected small{color:#ffffffd9}
.st-choice.solid.selected{background:var(--st-solid);border-color:var(--st-solid)}
.st-choice.shaky.selected{background:var(--st-shaky);border-color:var(--st-shaky)}
.st-choice.problem.selected{background:var(--st-problem);border-color:var(--st-problem)}
.st-choice.unsure.selected{background:var(--st-unsure);border-color:var(--st-unsure)}
.st-choice.selected{animation:st-pop .25s ease-out}
@keyframes st-pop{from{transform:scale(.96)}to{transform:scale(1)}}

/* Forge's running commentary */
.st-forge{display:flex;gap:16px;align-items:center;margin-top:22px;padding:16px 18px;border-radius:16px;background:#fff5f7;border:1px solid #f1cdd5}
.st-forge img{width:92px;height:92px;object-fit:contain;flex-shrink:0}
.st-forge p{margin:6px 0 0;color:#17395e;line-height:1.5}

/* The live color map */
.st-heat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:14px 0 8px}
.st-heat.big{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
.st-tile{border-radius:10px;padding:9px 10px;background:#eef3f9;border:1px dashed #c6d4e3;color:#17395e;transition:background .3s,border-color .3s}
.st-tile span{display:block;font-size:12px;font-weight:600;line-height:1.3}
.st-tile small{display:block;font-size:10px;margin-top:3px;opacity:.85}
.st-heat.big .st-tile{padding:16px 14px}
.st-heat.big .st-tile span{font-size:15px}
.st-heat.big .st-tile small{font-size:12px}
.st-tile.solid{background:var(--st-solid);border:1px solid var(--st-solid);color:#fff}
.st-tile.shaky{background:#f7e7c4;border:1px solid var(--st-shaky)}
.st-tile.problem{background:var(--st-problem);border:1px solid var(--st-problem);color:#fff}
.st-tile.unsure{background:#e3e8ee;border:1px solid var(--st-unsure)}
.st-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:#60748c;margin-bottom:14px}
.st-key::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.st-key.solid::before{background:var(--st-solid)}
.st-key.shaky::before{background:#f7e7c4;border:1px solid var(--st-shaky)}
.st-key.problem::before{background:var(--st-problem)}
.st-key.unsure::before{background:#e3e8ee;border:1px solid var(--st-unsure)}
.st-shop{display:block;font-size:12px;color:#60748c;margin-top:4px}

/* Pick your top three */
.st-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:8px 0 22px}
.st-pick-item{display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;border-radius:12px;border:1px solid #cfdcea;border-left:5px solid #cfdcea;background:#fff;color:#17395e;cursor:pointer;font:inherit}
.st-pick-item.solid{border-left-color:var(--st-solid)}
.st-pick-item.shaky{border-left-color:var(--st-shaky)}
.st-pick-item.problem{border-left-color:var(--st-problem)}
.st-pick-item.unsure{border-left-color:var(--st-unsure)}
.st-pick-item small{display:block;font-size:12px;color:#60748c}
.st-pick-item.selected{border-color:#c9233e;background:#fff5f7;box-shadow:0 0 0 2px #c9233e33}
.st-rank{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700;background:#eef3f9;color:#17395e}
.st-pick-item.selected .st-rank{background:#c9233e;color:#fff}

/* Results */
.st-counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.st-count{border-radius:14px;padding:14px;text-align:center;background:#f6f9fd;border:1px solid #d4e0ec}
.st-count b{display:block;font:600 34px 'Barlow Condensed',sans-serif;line-height:1}
.st-count span{font-size:13px;color:#60748c}
.st-count.solid b{color:var(--st-solid)}
.st-count.shaky b{color:var(--st-shaky)}
.st-count.problem b{color:var(--st-problem)}
.st-count.unsure b{color:var(--st-unsure)}
.st-said{color:#60748c;font-style:italic}

@media(max-width:720px){
  .st-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-pick{grid-template-columns:1fr}
  .st-heat.big{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-counts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-statement{font-size:17px}
  .st-forge img{width:70px;height:70px}
}
body.calm .st-choice,body.calm .st-tile,body.calm .st-choice.selected{transition:none;animation:none}
@media(prefers-reduced-motion:reduce){.st-choice,.st-tile{transition:none}.st-choice.selected{animation:none}}
@media print{.no-print,.topbar,.footer{display:none}}
@media(max-width:1100px){.rail .fine{display:none}}

/* Speech bubble sits in its own space above Forge so it never covers him. */
.character-stage{padding-top:105px}
.character-stage .stage-bubble{top:0}
@media(max-width:720px){.character-stage{padding-top:90px}.character-stage .stage-bubble{top:0}}
.character-stage .spark-one{right:auto;left:6%;top:60px}

/* Forge reacts on the card when an answer is picked */
.st-card{position:relative}
.st-react{position:absolute;top:-18px;right:14px;display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;background:#fff;border:1px solid #d4e0ec;border-radius:999px;box-shadow:0 6px 18px #17395e1f;pointer-events:none;z-index:3;animation:st-react-in .3s cubic-bezier(.2,1.4,.4,1) both;transition:opacity .45s ease,transform .45s ease}
.st-react img{width:46px;height:46px;object-fit:contain;border-radius:50%;background:#f3f7fc;transform-origin:50% 90%}
.st-react span{font-size:13px;font-weight:600;color:#17395e;white-space:nowrap}
.st-react.leaving{opacity:0;transform:translateY(-6px)}
.st-react.wag img{animation:st-wag .32s ease-in-out .25s 4}
.st-react.tilt img{animation:st-tilt .9s ease-in-out .2s 1 both}
.st-react.perk img{animation:st-perk .5s ease-out .2s 2}
.st-react.party{background:#fff8e6;border-color:#e7c98a}
.st-react.party img{animation:st-party .45s ease-in-out .2s 4}
@keyframes st-react-in{from{opacity:0;transform:translateY(8px) scale(.85)}to{opacity:1;transform:none}}
@keyframes st-wag{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
@keyframes st-tilt{0%{transform:rotate(0)}35%,80%{transform:rotate(-16deg)}100%{transform:rotate(-10deg)}}
@keyframes st-perk{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-7px) scale(1.08)}}
@keyframes st-party{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-9px) rotate(-10deg)}60%{transform:translateY(0) rotate(10deg)}}
@media(max-width:720px){.st-react{right:8px;top:-20px}.st-react span{font-size:12px;white-space:normal;max-width:180px}.st-react img{width:38px;height:38px}}
body.calm .st-react,body.calm .st-react img{animation:none!important}
@media(prefers-reduced-motion:reduce){.st-react,.st-react img{animation:none!important}}