/* /studio-website-scorecard. Extends atelier.css. */
.hero{padding-block:clamp(36px,6vw,88px) clamp(20px,3vw,40px)}
.hero .wrap{display:grid;gap:18px}
.hero .display{max-width:15ch}
.sc{padding-top:clamp(12px,2vw,24px)}
.sc .wrap{display:grid;gap:32px;align-items:start}
@media (min-width:900px){.sc .wrap{grid-template-columns:1fr 360px;gap:56px}}

/* questions */
.form{display:grid;gap:36px}
fieldset{border:0;margin:0;padding:0;min-width:0}
.group{display:grid;gap:0;border-top:1px solid var(--ink)}
.group>legend{padding:14px 0 6px;float:left;width:100%}
.q{display:grid;gap:10px;padding:18px 0;border-bottom:1px solid var(--line)}
.q>legend{float:left;width:100%;font:400 clamp(21px,2vw,25px)/1.2 var(--display);padding:0}
.qhint{margin:0;font-size:15px;color:var(--soft);line-height:1.5}
.seg{position:relative;display:flex;gap:4px;padding:4px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);background:var(--raised);max-width:420px}
.seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg label{flex:1;display:grid;place-items:center;min-height:44px;padding:0 12px;border-radius:999px;font-size:16px;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.seg input:checked+label{background:var(--ink);color:var(--paper)}
.seg input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .seg label{transition:opacity 160ms var(--ease)}
  .seg input:not(:checked)+label:hover{opacity:.7}
}

/* live score card: same skeleton before and after the last answer */
.card{background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);padding:24px;display:grid;gap:8px}
@media (min-width:900px){.card{position:sticky;top:24px}}
.big{margin:6px 0 0;font:400 88px/1 var(--display);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px;letter-spacing:-.02em}
.big .of{font-size:32px;color:var(--soft);letter-spacing:0}
.sub{margin:0;font-size:14.5px;color:var(--soft)}
.band{margin:10px 0 0;font:400 22px/1.25 var(--display);min-height:2.5em}
.bar{height:2px;background:var(--line);margin:6px 0 10px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(0);transition:transform 220ms var(--ease)}

/* result */
.result{border-top:1px solid var(--hair)}
.cols{display:grid;gap:40px}
@media (min-width:900px){.cols{grid-template-columns:repeat(3,1fr);gap:40px}}
.col{display:grid;gap:14px;align-content:start}
.col ol{margin:0;padding:0;list-style:none;counter-reset:n;border-top:1px solid var(--line)}
.col li{counter-increment:n;display:grid;grid-template-columns:2.2em 1fr;gap:2px 8px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5}
.col li::before{content:counter(n,decimal-leading-zero);font-size:12px;letter-spacing:.1em;color:var(--soft);padding-top:3px;font-variant-numeric:tabular-nums}
.col li b{font-weight:500}
.col li span,.col li b{grid-column:2}
.col li span{color:var(--soft)}
.gaps li .pts{grid-column:2;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:500}
.empty{margin:0;color:var(--soft);font-size:15.5px}
.empty[hidden]{display:none}
.brief{display:grid;gap:20px;margin-top:clamp(48px,6vw,80px);padding-top:28px;border-top:1px solid var(--ink)}
@media (min-width:900px){.brief{grid-template-columns:.8fr 1.2fr;gap:48px}}
.brief .lede{margin-top:10px}
.brief-box{display:grid;gap:14px}
.brief textarea{width:100%;font:400 16px/1.55 var(--text);color:var(--ink);background:var(--raised);border:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:0;padding:16px;resize:vertical;min-height:300px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.copied{font-size:14.5px;color:var(--soft);min-height:1.5em}
@media (prefers-reduced-motion:reduce){.bar i{transition:transform 120ms var(--ease)}}