.page-report main{
padding-block:var(--sp5) var(--sp6);
}
.report{
display:flex;
flex-direction:column;
gap:var(--sp6);
}
.verdict{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:var(--sp3);
}
.sample-tag{
margin-bottom:var(--sp1);
}
.verdict-chip{
margin-block:var(--sp2);
padding:var(--sp2) var(--sp3);
font-size:clamp(28px,6vw,52px);
letter-spacing:var(--ls3);
}
.verdict-summary{
font-size:var(--fh3);
line-height:var(--lh3);
letter-spacing:var(--ls1);
}
.report-part{
display:flex;
flex-direction:column;
gap:var(--sp3);
}
.report-part h2{
font-size:var(--fh3);
}
.facts,.hook-facts{
display:flex;
flex-direction:column;
gap:var(--sp3);
}
.fact{
display:grid;
gap:var(--sp1);
}
.fact dt{
color:var(--tx2);
font-size:var(--fz2);
}
.fact dd{
margin:0;
overflow-wrap:anywhere;
}
.hook{
display:flex;
flex-direction:column;
gap:var(--sp3);
}
.hook-title{
font-size:var(--fh4);
line-height:var(--lh3);
overflow-wrap:anywhere;
}
.hook-bad .hook-title{
color:var(--bd1);
}
.hook-warn .hook-title{
color:var(--wn1);
}
.flags{
display:flex;
flex-direction:column;
gap:var(--sp1);
padding:0;
list-style:none;
}
.flag{
display:flex;
gap:var(--sp2);
align-items:baseline;
}
.flag-word{
flex:none;
padding:2px var(--sp1);
font-family:var(--ff3);
font-size:var(--fz2);
font-weight:800;
color:var(--tx3);
background:var(--tx2);
}
.flag-critical .flag-word,.flag-hard .flag-word{
background:var(--bd1);
}
.flag-warn .flag-word{
background:var(--wn1);
}
.shots{
display:flex;
gap:var(--sp3);
align-items:flex-start;
}
.shot{
display:flex;
flex-direction:column;
gap:var(--sp1);
color:var(--tx2);
font-size:var(--fz2);
text-decoration:none;
}
.shot-view{
max-width:calc(100vw - var(--sp4));
max-height:calc(100vh - var(--sp4));
padding:0;
border:0;
border-radius:var(--br0);
background:var(--bg1);
box-shadow:var(--box);
cursor:zoom-out;
}
.shot-view::backdrop{
background:rgba(0,0,0,.85);
}
.shot-view img{
display:block;
max-width:calc(100vw - var(--sp4));
max-height:calc(100vh - var(--sp4));
}
.shot img{
display:block;
width:100%;
height:auto;
background:var(--bg2);
}
.shot-desktop{
flex:3 1 0;
min-width:0;
}
.shot-phone{
flex:1 1 0;
min-width:0;
max-width:160px;
}
.shot:hover .shot-label,.shot:focus-visible .shot-label{
text-decoration:underline;
text-decoration-thickness:var(--ul1);
}
.hops-title{
color:var(--tx2);
font-size:var(--fz2);
}
.tech{
padding:0;
}
.tech summary{
cursor:pointer;
font-weight:700;
min-height:var(--bh1);
padding:var(--gp1) var(--gp3);
display:flex;
align-items:center;
}
.hop-list{
list-style:decimal;
display:flex;
flex-direction:column;
gap:var(--sp1);
padding-left:var(--sp4);
font-size:var(--fz2);
overflow-wrap:anywhere;
color:var(--tx2);
}
.hop-url,.hop-how{
display:block;
}
.hop-url{
color:var(--tx1);
}
.hop-how{
font-family:var(--ff1);
}
.catch{
font-size:var(--fz3);
}
.steps{
list-style:decimal;
display:flex;
flex-direction:column;
gap:var(--sp2);
padding-left:var(--sp4);
font-size:var(--fz3);
}
.steps li::marker{
color:var(--ac1);
font-weight:700;
}
.clicked-title{
margin-top:var(--sp3);
font-size:var(--fh4);
color:var(--bd1);
}
.report-notes{
list-style:disc;
display:flex;
flex-direction:column;
gap:var(--sp1);
padding-left:var(--sp4);
}
.tech-body{
display:flex;
flex-direction:column;
gap:var(--sp3);
padding:0 var(--gp3) var(--gp3);
}
.tech-body h3{
font-size:var(--fz3);
}
.tech-list{
display:flex;
flex-direction:column;
gap:var(--sp1);
padding:0;
list-style:none;
font-size:var(--fz2);
color:var(--tx2);
overflow-wrap:anywhere;
}
.tech-list div{
display:grid;
gap:2px;
}
.tech-list dt{
color:var(--tx1);
}
.tech-list dd{
margin:0;
}
.honest{
color:var(--tx2);
}
.report-expiry{
margin-top:var(--sp4);
}
.empty{
color:var(--tx2);
}
@media (max-width:599px){
.shots{
flex-direction:column;
}
.shot-phone{
max-width:200px;
}
}
.sample-intro{
margin-bottom:var(--sp5);
}