/* security tool styling on top of the vendored style.css: the check card, the
   grade hero, finding rows, and the soft-gate report form. Exposure colours are
   SEMANTIC (good/warn/critical), separate from the brand accent. */

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.hp { position:absolute; left:-9999px; height:0; overflow:hidden; }

.sec-hero { text-align:center; }
.sec-hero h1 { margin-bottom:14px; }

.check-card { max-width:620px; margin:26px auto 0; }
.check-row { display:flex; gap:10px; }
.check-row input {
  flex:1 1 auto; min-width:0; padding:15px 18px; font-size:16px; border-radius:10px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05); color:#fff;
}
.check-row input::placeholder { color:rgba(255,255,255,.4); }
.check-row input:focus { outline:none; border-color:#00D4FF; box-shadow:0 0 0 3px rgba(0,212,255,.18); }
.check-row .btn-primary { flex:0 0 auto; white-space:nowrap; }
.check-note { font-size:13px; color:rgba(255,255,255,.55); margin:12px 0 0; }
.btn-inline { display:inline-block; }

#result { max-width:720px; margin:30px auto 0; text-align:left; }
.msg { text-align:center; color:rgba(255,255,255,.75); font-size:15px; }
.msg.warn { color:#ffb4a8; }

/* grade hero */
.grade-card { display:flex; align-items:center; gap:22px; padding:22px 24px; border-radius:16px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); }
.grade-badge { flex:0 0 auto; width:96px; height:96px; border-radius:20px; display:grid; place-items:center;
  font-family:'Syne',sans-serif; font-weight:800; font-size:54px; line-height:1; color:#0A2540; }
.grade-copy { min-width:0; }
.grade-exposure { font-family:'Syne',sans-serif; font-weight:700; font-size:18px; margin-bottom:4px; }
.grade-headline { font-size:16px; color:#e7eef5; margin:0 0 6px; line-height:1.5; }
.grade-domain { font-family:'DM Mono',monospace; font-size:13px; color:rgba(255,255,255,.55); margin:0; }

/* grade + exposure colour ramps (semantic) */
.grade-a .grade-badge, .grade-b .grade-badge { background:linear-gradient(135deg,#34d399,#00D4FF); }
.grade-c .grade-badge { background:linear-gradient(135deg,#fbbf24,#f59e0b); }
.grade-d .grade-badge { background:linear-gradient(135deg,#fb923c,#f97316); color:#fff; }
.grade-f .grade-badge { background:linear-gradient(135deg,#f87171,#dc2626); color:#fff; }
.grade-unknown .grade-badge, .grade-question .grade-badge { background:rgba(255,255,255,.12); color:#fff; }
.grade-a, .grade-b { border-color:rgba(52,211,153,.4); }
.grade-c { border-color:rgba(251,191,36,.4); }
.grade-d { border-color:rgba(249,115,22,.45); }
.grade-f { border-color:rgba(220,38,38,.45); }
.exp-critical { color:#f87171; } .exp-high { color:#fb923c; } .exp-moderate { color:#fbbf24; } .exp-low { color:#34d399; } .exp-unknown { color:rgba(255,255,255,.7); }

/* findings */
.findings { list-style:none; margin:18px 0 0; padding:0; }
.fnd { display:flex; gap:12px; align-items:flex-start; padding:13px 0; border-bottom:1px dashed rgba(255,255,255,.09); }
.fnd:last-child { border-bottom:none; }
.fnd-mark { flex:0 0 22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; margin-top:2px; }
.fnd-pass .fnd-mark { background:rgba(52,211,153,.16); color:#34d399; }
.fnd-warn .fnd-mark { background:rgba(251,191,36,.16); color:#fbbf24; }
.fnd-fail .fnd-mark { background:rgba(248,113,113,.16); color:#f87171; }
.fnd-info .fnd-mark { background:rgba(255,255,255,.1); color:rgba(255,255,255,.6); font-style:italic; }
.fnd-body { min-width:0; }
.fnd-body b { display:block; font-size:15px; color:#fff; }
.fnd-detail { display:block; font-size:13.5px; color:rgba(255,255,255,.62); line-height:1.5; margin-top:3px; }
.fnd-area { display:inline-block; font-family:'DM Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.4); margin-top:5px; }

.residual { font-size:13.5px; color:rgba(255,255,255,.6); background:rgba(0,212,255,.06); border:1px solid rgba(0,212,255,.2); border-radius:10px; padding:12px 15px; margin:16px 0 0; line-height:1.55; }

/* shareable link box (on the main result) */
.share-box { margin:18px 0 0; padding:14px 16px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); }
.btn-ghost { display:inline-block; padding:11px 18px; border-radius:10px; font-family:'Syne',sans-serif; font-weight:600;
  font-size:14px; color:#cfe8ff; background:transparent; border:1px solid rgba(0,212,255,.4); cursor:pointer; }
.btn-ghost[hidden] { display:none; }   /* class display: inline-block would otherwise beat the [hidden] UA rule */
.btn-ghost:hover { background:rgba(0,212,255,.08); }
.btn-ghost:disabled { opacity:.6; cursor:default; }
.share-hint { display:inline-block; margin-left:12px; font-size:13px; color:rgba(255,255,255,.5); }
.share-err { font-size:14px; color:#ffb4a8; margin-top:10px; }
#share-out:not([hidden]) { margin-top:12px; }
.share-label { display:block; font-size:13px; color:rgba(255,255,255,.6); margin-bottom:9px; }
.share-box input { flex:1 1 auto; min-width:0; padding:11px 14px; font-size:14px; font-family:'DM Mono',monospace;
  border-radius:9px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.25); color:#cfe8ff; }
.share-box input:focus { outline:none; border-color:#00D4FF; }
.share-box .btn-primary { flex:0 0 auto; white-space:nowrap; }

/* shared result page (/s/<token>) */
.share-banner { text-align:center; font-size:14px; color:rgba(255,255,255,.72); background:rgba(0,212,255,.06);
  border:1px solid rgba(0,212,255,.2); border-radius:12px; padding:13px 18px; margin:0 0 22px; line-height:1.55; }
.share-banner b { color:#fff; }
.share-cta { text-align:center; margin:28px 0 0; }
.share-expired { text-align:center; margin:10px 0 0; }

/* soft-gate report form */
.gate { margin:22px 0 0; padding:22px 24px; border-radius:14px; background:linear-gradient(135deg,rgba(0,212,255,.08),rgba(124,58,237,.08)); border:1px solid rgba(0,212,255,.28); }
.gate h3 { margin:0 0 6px; font-size:19px; }
.gate > p { font-size:14.5px; color:rgba(255,255,255,.75); margin:0 0 14px; }
.gate-consent { font-size:12px; color:rgba(255,255,255,.55); margin:10px 0 0; }
.gate-ok { font-size:15px; color:#34d399; padding:6px 0; }
.gate-err { font-size:14px; color:#ffb4a8; padding:6px 0; }

/* content sections reuse .content from style.css; a couple of security extras */
.sec-list { list-style:none; margin:14px 0; padding:0; }
.sec-list li { position:relative; padding-left:22px; margin:10px 0; line-height:1.6; }
.sec-list li::before { content:""; position:absolute; left:4px; top:.7em; width:7px; height:7px; border-radius:50%; background:#00D4FF; }
.sec-cta-band { text-align:center; }

/* FAQ accordion (native <details>, no JS) */
.faq { max-width:720px; margin:16px auto 0; text-align:left; }
.faq-item { border-bottom:1px solid rgba(255,255,255,.1); }
.faq-item summary { list-style:none; cursor:pointer; padding:17px 0; display:flex; align-items:center; gap:16px;
  font-family:'Syne',sans-serif; font-weight:600; font-size:16px; color:#fff; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; margin-left:auto; flex:0 0 auto; font-size:24px; font-weight:400; line-height:1;
  color:#00D4FF; transition:transform .2s ease; }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item summary:hover { color:#00D4FF; }
.faq-item p { margin:0 0 18px; padding-right:40px; font-size:14.5px; line-height:1.65; color:rgba(255,255,255,.72); }
.faq-item p a { color:#00D4FF; }

@media (max-width:560px) {
  .check-row { flex-direction:column; }
  .check-row .btn-primary { width:100%; }
  .grade-card { flex-direction:column; text-align:center; }
  .grade-badge { width:80px; height:80px; font-size:44px; }
}