/* ==========================================================================
   SecurityPilot — preflight check
   Only loaded on /check/. Depends on the tokens in site.css.
   ========================================================================== */

.panel{
  background:var(--plum);border:1px solid var(--line);border-radius:10px;
  padding:clamp(22px,4vw,36px);max-width:760px;
}

.q-block{margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid var(--line-2)}
.q-block:last-of-type{border-bottom:none;padding-bottom:0}
.q-head{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.q-code{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--sage);flex:none}
.q-title{font-weight:600;font-size:15.5px;color:var(--bone)}
.q-hint{font-size:13px;color:var(--fg2);margin:0 0 12px}

.opt{
  display:block;width:100%;text-align:left;padding:12px 15px;margin-bottom:8px;
  border:1px solid var(--line);border-radius:6px;
  background:var(--night-100);color:var(--bone);
  font-family:var(--f-body);font-size:15px;
  transition:border-color .12s var(--ease),background .12s var(--ease),box-shadow .12s var(--ease);
}
.opt:hover{border-color:var(--line-strong);background:var(--plum-200)}
.opt.active{background:var(--plum-300);border-color:var(--sage);box-shadow:inset 3px 0 0 var(--sage)}
select.opt{
  appearance:none;padding-right:40px;
  background-image:var(--select-chevron);
  background-repeat:no-repeat;background-position:right 14px center;
}
.tri{display:flex;gap:8px}
.tri .opt{text-align:center;font-weight:600;font-size:14px;padding:11px 0;margin-bottom:0}

.cta-btn{
  display:inline-block;text-decoration:none;border:none;border-radius:6px;
  padding:13px 26px;background:var(--sage);color:var(--night);
  font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:.03em;
  transition:box-shadow .12s var(--ease);
}
.cta-btn:hover:not(:disabled){box-shadow:var(--glow-sage)}
.cta-btn:disabled{background:var(--night-100);color:var(--fg3);border:1px solid var(--line);cursor:not-allowed}
.fine{font-size:12.5px;color:var(--fg3);margin-top:14px}

/* Result readout */
.board{background:var(--night);border:1px solid var(--line);border-radius:10px;padding:24px;margin-bottom:16px}
.board-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.board .status{
  font-family:var(--f-display);font-weight:700;font-size:clamp(20px,3.4vw,27px);
  line-height:1.15;color:var(--bone);max-width:70%;
}
.board .pct{
  font-family:var(--f-display);font-weight:700;font-size:34px;color:var(--sage);
  font-variant-numeric:tabular-nums;line-height:1;text-align:right;
}
.board .pct small{
  display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg3);font-weight:400;margin-top:4px;
}
.bar{height:8px;background:var(--night-100);border:1px solid var(--line-2);border-radius:4px;overflow:hidden}
.bar>div{height:100%;background:var(--sage);transition:width .6s var(--ease)}

.verdict{
  background:var(--plum);border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:8px;padding:20px;margin-bottom:16px;
}
.verdict h3{font-family:var(--f-body);font-size:17px;font-weight:600;margin-bottom:8px}
.verdict p{color:var(--fg2);font-size:14.5px}

.gaps{background:var(--plum);border:1px solid var(--line);border-radius:8px;padding:20px;margin-bottom:16px}
.gaps h3{font-family:var(--f-body);font-size:15px;font-weight:600;margin-bottom:14px}
.gap-row{display:flex;gap:12px;align-items:baseline;margin-bottom:11px;font-size:14px;color:var(--fg2)}
.gap-row:last-child{margin-bottom:0}
.gtag{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;
  padding:2px 7px;border-radius:3px;white-space:nowrap;flex:none;
}
.gtag.nee{color:var(--rust);border:1px solid var(--rust-line)}
.gtag.deels{color:var(--amber);border:1px solid var(--amber-line)}
.gtag.gereed{color:var(--signal);border:1px solid var(--line-strong)}

.cta-box{background:var(--plum-200);border:1px solid var(--line-strong);border-radius:8px;padding:24px}
.cta-box h3{font-family:var(--f-body);font-size:18px;font-weight:600;margin:10px 0 8px}
.cta-box p{font-size:14.5px;color:var(--fg2)}
.cta-box input{
  width:100%;padding:12px 14px;margin:14px 0 10px;
  border:1px solid var(--line);border-radius:6px;
  background:var(--night-100);color:var(--bone);
  font-family:var(--f-body);font-size:15px;
}
.cta-box input::placeholder{color:var(--fg3)}
.cta-box .fine a{color:var(--sage)}

.linkish{
  background:none;border:none;color:var(--fg3);font-size:13px;
  text-decoration:underline;margin-top:18px;font-family:var(--f-body);
}
.linkish:hover{color:var(--sage)}