/* ComplyClear free scanner - page-specific components. Shared header/footer/hero/panels/buttons live in cc-styles.css. */

/* ---- scan form card ---- */
.scan-wrap{max-width:760px;margin:0 auto}
.scan-card{background:var(--white);border:1px solid var(--cream-2);border-radius:var(--radius);
  box-shadow:0 18px 44px -30px rgba(15,32,56,.4);padding:1.6rem}
.scan-form{display:flex;flex-direction:column;gap:1rem}
.scan-row{display:flex;gap:.7rem;flex-wrap:wrap}
.scan-row label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#url{flex:1 1 260px;min-width:0;padding:.85rem 1rem;font:inherit;color:var(--ink);
  background:var(--white);border:1.5px solid #7d8896;border-radius:var(--radius-sm)}
#url:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--focus)}
#url::placeholder{color:#6b7480}
#scan-btn{flex:0 0 auto}
.wcag-opts{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;font-size:.92rem;color:var(--muted-2)}
.wcag-opts strong{color:var(--ink);font-weight:600;margin-right:.2rem}
.wcag-opt{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer}
.wcag-opt input{width:1.05rem;height:1.05rem;accent-color:var(--gold)}
.wcag-opt input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.scan-note{font-size:.84rem;color:var(--muted);margin:.3rem 0 0}

/* ---- loading / error ---- */
#loading{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(11,23,40,.80);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#loading[hidden],#error[hidden],#results[hidden]{display:none}
.scan-overlay-card{background:#fff;border-radius:12px;padding:clamp(24px,4vw,36px);width:100%;max-width:520px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);animation:cc-pop .35s ease both}
.spin{width:22px;height:22px;border:3px solid var(--cream-2);border-top-color:var(--gold);
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
#error{max-width:760px;margin:1.2rem auto 0;background:#fdecea;border:1px solid #f3b7b1;
  color:#8a231a;border-radius:var(--radius-sm);padding:1rem 1.2rem;font-weight:600}
#error:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* ---- results (full-width, two columns) ---- */
.results-wrap{padding:0 clamp(28px,5vw,72px)}
#results{margin:1.8rem 0 0;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.18fr);
  gap:clamp(1.4rem,2.6vw,2.2rem);align-items:start}
#results:focus{outline:none}
.results-col{min-width:0}
@media(max-width:960px){
  #results{grid-template-columns:1fr;gap:1.4rem}
}
.result-card{background:#fff;border:1px solid var(--card-bd);border-radius:var(--radius);
  padding:clamp(1.1rem,2.4vw,1.7rem);box-shadow:0 22px 54px -34px rgba(15,32,56,.45)}

/* screenshot frame */
.result-shot{margin:0 0 1.3rem;border:1px solid var(--navy-bd);border-radius:8px;overflow:hidden;background:var(--navy-900)}
.shot-bar{display:flex;align-items:center;gap:7px;padding:9px 13px;background:var(--navy-850)}
.shot-bar i{width:9px;height:9px;border-radius:50%;flex:none}
.shot-bar i.r{background:#E4695E}.shot-bar i.y{background:#E8B84B}.shot-bar i.g{background:#5FBF8A}
.shot-bar span{margin-left:6px;font-size:12.5px;color:#8FA1BC;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot-img-wrap{position:relative;aspect-ratio:16/9;background:#0B1728;overflow:hidden}
.shot-img-wrap img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.shot-img-wrap.loading img{opacity:0}
.shot-img-wrap.loading::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,#0B1728 30%,#17293F 50%,#0B1728 70%);background-size:220% 100%;
  animation:cc-flow 1.4s linear infinite}
.shot-img-wrap.loading::after{content:"Capturing your page… this can take a few seconds";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;color:#8FA1BC;font-size:.9rem;font-weight:600}
.shot-img-wrap.failed img{display:none}
.shot-img-wrap.failed::after{content:"Live preview unavailable for this page";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;color:#8FA1BC;font-size:.9rem;font-weight:600;text-align:center;padding:1rem}

/* summary row: meta + gauge */
/* The rings are a container query context, not a viewport one. PB-FINAL-R2-01:
   keying the ring grid off the viewport was wrong because #results becomes a two
   column grid above 960px, so the left column NARROWS exactly where the viewport
   says there is more room. Four 104px rings then overlapped between 961 and
   1100px. What matters is the width the rings actually get, so that is what is
   measured. */
.result-main{display:flex;gap:1.6rem;align-items:center;justify-content:space-between;flex-wrap:wrap;container-type:inline-size}
.result-meta{flex:1 1 300px;min-width:0}
#r-url{font-weight:700;color:var(--ink);word-break:break-all;font-size:1.05rem}
#r-title{color:var(--muted);font-size:.92rem;margin:.25rem 0 0}
.result-counts{display:flex;gap:1.4rem;margin:.9rem 0 0;flex-wrap:wrap;font-size:.9rem}
.result-counts b{font-family:'Bricolage Grotesque',sans-serif;font-size:1.15rem;display:block}
.rc-err b{color:#c0392b}.rc-warn b{color:#8A5E0F}.rc-std b{color:var(--ink)}
.result-counts span{color:var(--muted)}

/* gauge */
/* M-01: four rings, one per classification, sized to read as ranked rather
   than as four competing numbers. Wraps on narrow screens instead of shrinking
   below a legible size. */
/* A GRID, not a wrapping flex row. Flex wrapped 3-then-1 at common widths, which
   reads as a layout bug. A grid can only ever produce 4 across or 2 by 2, so the
   block stays symmetrical at every width. */
/* The rings take their own full-width row rather than sharing one with the URL
   and meta block. Sharing is what left them a sliver of an already narrow
   column. It is also better as design: four rings are the headline number, not
   a sidebar to the address. */
.gauges{flex:1 1 100%;display:grid;justify-items:center;align-items:start;gap:1.1rem .6rem;
  /* SAFE DEFAULT is 2x2. Four across is an upgrade applied only when the
     container is measurably wide enough, so an unsupported or unmatched query
     degrades to the layout that always fits, never to the one that overlaps. */
  grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:520px){.gauges{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Fallback where container queries are unavailable: approximate with viewport
   widths that account for the two-column results layout. Only four across when
   the left column is genuinely wide (>=1200px) or the layout has collapsed to a
   single full-width column (<=960px). */
@supports not (container-type:inline-size){
  .gauges{grid-template-columns:repeat(2,minmax(0,1fr))}
  @media (min-width:1200px){.gauges{grid-template-columns:repeat(4,minmax(0,1fr))}}
  @media (max-width:960px) and (min-width:641px){.gauges{grid-template-columns:repeat(4,minmax(0,1fr))}}
}
.gauge{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.35rem;max-width:11rem}
.gauge-ring{position:relative}
.score-ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring-track{stroke:var(--cream-2)}
/* The arc is presence, not proportion: these categories are not parts of a
   whole. No transition on dasharray, so a full ring never animates through
   intermediate values that would read as a percentage. */
.score-ring .ring-fill{stroke:var(--muted)}
.score-ring.tone-poor .ring-fill{stroke:#c0392b}
.score-ring.tone-ok .ring-fill{stroke:var(--gold)}
.score-ring.tone-neutral .ring-fill{stroke:var(--muted)}
.gauge-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ring-num{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.5rem}
.score-about{font-size:.7rem;color:var(--muted);line-height:1.3;text-align:center}
.score-cap{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;text-align:center}

/* verdict (urgency) */
.verdict{margin:1.35rem 0 0;padding:1rem 1.2rem;border-radius:var(--radius-sm);
  font-size:.98rem;line-height:1.55;border-left:4px solid}
.verdict strong{display:block;font-size:1.06rem;margin-bottom:.15rem}
.v-poor{background:#FBE9E7;border-color:#C0392B;color:#7A1D14}
.v-ok{background:#FBF3E1;border-color:#E29E29;color:#6A4E0C}
.v-good{background:#E9F5EE;border-color:#2E8B57;color:#195234}
/* T-20: suggestions only. Not amber, because nothing is wrong; not green,
   because the scan covers part of WCAG and this is not a conformance claim. */
.v-neutral{background:#F1F2F4;border-color:#8C939B;color:#3C4147}

/* category bars */
.cats{margin:1.35rem 0 0}
.cats-head{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.75rem}
/* T-10: what the bars do NOT cover. Sits under the heading so it is read
   before the bars, not treated as a footnote to them. */
.cats-note{font-size:.78rem;line-height:1.45;color:var(--muted);margin:-.35rem 0 .85rem}
.cat{display:flex;align-items:center;gap:.9rem;margin-bottom:.6rem}
.cat-name{flex:0 0 42%;max-width:220px;font-size:.92rem;font-weight:600;color:var(--ink-2)}
.cat-track{flex:1;height:13px;border-radius:7px;background:var(--cream-2);overflow:hidden}
.cat-fill{display:block;height:100%;border-radius:7px;width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-lt));transition:width .9s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){.cat-fill{transition:none}}
.cat-num{flex:0 0 auto;min-width:1.6rem;text-align:right;font-weight:700;color:var(--ink);font-size:.9rem}

/* actions */
.result-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.5rem 0 0}
@media(max-width:560px){.cat-name{flex-basis:52%}.result-actions .btn{flex:1 1 100%;justify-content:center}}

#disclaimer{max-width:none;margin:.9rem 0 0;font-size:.84rem;color:var(--muted);
  background:var(--cool);border:1px solid #dbe3f0;border-radius:var(--radius-sm);padding:.8rem 1rem}

/* ---- issue cards (dark) ---- */
.issues{display:flex;flex-direction:column;gap:.9rem;margin:0}
.issue{background:#23262D;border:1px solid #363B44;border-left:4px solid var(--gold);
  border-radius:var(--radius-sm);padding:1.15rem 1.3rem;color:var(--ink-lt);
  box-shadow:0 14px 40px -30px rgba(0,0,0,.6);animation:cc-rise .4s ease both}
.issue.is-error{border-left-color:#E4695E}
.issue:nth-child(1){animation-delay:.04s}.issue:nth-child(2){animation-delay:.1s}
.issue:nth-child(3){animation-delay:.16s}.issue:nth-child(4){animation-delay:.22s}
.issue:nth-child(5){animation-delay:.28s}.issue:nth-child(6){animation-delay:.34s}
.issue:nth-child(7){animation-delay:.4s}.issue:nth-child(n+8){animation-delay:.46s}
.issue-top{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:0 0 .7rem}
.badge{display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;padding:.36rem .66rem;border-radius:999px;line-height:1}
.badge-error{background:#4A2420;color:#F3B0A8}
.badge-warning{background:#3A2F12;color:#F2B441}
.badge-level{background:rgba(255,255,255,.09);color:var(--muted-lt2)}
.badge-crit{background:#15304C;color:#82B6EE;text-decoration:none}
.badge-crit:hover{background:#1D3E61;color:#A6CDF6}
.badge-crit:focus-visible{outline:3px solid #82B6EE;outline-offset:2px}
.issue-msg{color:var(--ink-lt);font-weight:600;line-height:1.5}
.issue-fix{color:var(--muted-lt);font-size:.92rem;margin:.5rem 0 0;line-height:1.55}
.issue-snippet{display:block;margin:.75rem 0 0;padding:.75rem .9rem;background:#15171C;
  color:#dbe6f5;border:1px solid var(--navy-bd);border-radius:6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.82rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.all-clear{background:#12331F;border:1px solid #1F6B3D;color:#8FE3AC;font-weight:700;
  border-radius:var(--radius-sm);padding:1.1rem 1.2rem}

/* ---- manual checks list ---- */
.manual-list{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.manual-list li{position:relative;padding:.9rem 1rem .9rem 2.4rem;background:var(--white);
  border:1px solid var(--cream-2);border-radius:var(--radius-sm);color:var(--muted-2);font-size:.94rem}
.manual-list li strong{display:block;color:var(--ink);margin:0 0 .15rem}
.manual-list li::before{content:"";position:absolute;left:1rem;top:1.15rem;width:9px;height:9px;
  border-radius:50%;background:var(--gold)}


/* ---- "don't take our word for it" tools ---- */
.tools-grid{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.tool{display:block;text-decoration:none;background:var(--white);border:1px solid var(--card-bd);
  border-radius:var(--radius-sm);padding:1.1rem 1.2rem;transition:border-color .15s,transform .15s,box-shadow .15s}
.tool:hover{border-color:#C9D6E8;transform:translateY(-2px);box-shadow:0 16px 40px -28px rgba(15,32,56,.5)}
.tool:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tool-name{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-weight:700;font-size:16px;color:var(--ink)}
.tool-name svg{width:15px;height:15px;flex:none;color:var(--gold-tx)}
.tool p{margin:.35rem 0 0;font-size:13.5px;color:var(--muted);line-height:1.5}

/* ---- flashy scanning animation (booth draw) ---- */
.scan-anim{display:flex;justify-content:center;width:100%}
.scan-doc{position:relative;width:min(440px,92%);height:158px;background:#fff;border:1px solid var(--card-bd);
  border-radius:8px;padding:22px 22px 0;overflow:hidden;box-shadow:0 18px 46px -26px rgba(15,32,56,.45)}
.sd-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sd-bar{display:block;height:12px;border-radius:6px;background:var(--cream-2)}
.sd-chip{width:26px;height:26px;border-radius:7px;background:var(--cool);flex:none}
.sd-bar.w1{width:62%}.sd-bar.w2{width:84%}.sd-bar.w3{width:48%}
.sd-bar.w4{width:73%}.sd-bar.w5{width:38%}.sd-bar.w6{width:56%}
.scan-beam{position:absolute;left:0;right:0;height:60px;top:-60px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(226,158,41,.16) 42%,rgba(226,158,41,.55) 50%,rgba(226,158,41,.16) 58%,transparent);
  box-shadow:0 0 22px rgba(226,158,41,.45);animation:cc-beam 1.9s ease-in-out infinite}
.scan-beam::after{content:"";position:absolute;left:0;right:0;top:29px;height:2px;background:var(--gold-lt);
  box-shadow:0 0 10px 2px rgba(242,180,65,.7)}
@keyframes cc-beam{0%{transform:translateY(0)}100%{transform:translateY(220px)}}
.scan-status{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:1.1rem;text-align:center}
.scan-status-title{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.02rem;color:var(--ink)}
.scan-steps{position:relative;height:22px;width:280px;max-width:80vw;margin-top:2px}
.scan-steps span{position:absolute;inset:0;opacity:0;font-size:.9rem;font-weight:600;color:var(--gold-tx);
  animation:cc-step 6s linear infinite}
.scan-steps span:nth-child(1){animation-delay:0s}
.scan-steps span:nth-child(2){animation-delay:1.2s}
.scan-steps span:nth-child(3){animation-delay:2.4s}
.scan-steps span:nth-child(4){animation-delay:3.6s}
.scan-steps span:nth-child(5){animation-delay:4.8s}
@keyframes cc-step{0%{opacity:0;transform:translateY(7px)}5%{opacity:1;transform:none}17%{opacity:1;transform:none}22%{opacity:0;transform:translateY(-7px)}100%{opacity:0}}

/* ---- results reveal (pop) ---- */
#results:not([hidden]) .result-card{animation:cc-rise .45s ease both}
#results:not([hidden]) .gauge{animation:cc-pop .6s .12s ease both}
@keyframes cc-pop{0%{transform:scale(.55);opacity:0}62%{transform:scale(1.09)}100%{transform:scale(1);opacity:1}}
/* Glow follows the panel tone now that #ring-fill is gone; the tone class moved
   from the single ring onto #results. */
.score-good .ring-fill{filter:drop-shadow(0 0 4px rgba(46,139,87,.45))}
.score-ok .ring-fill{filter:drop-shadow(0 0 4px rgba(226,158,41,.5))}
.score-poor .tone-poor .ring-fill{filter:drop-shadow(0 0 4px rgba(192,57,43,.45))}
/* T-20: `neutral` means nothing was found and no claim is being made. No glow:
   it is deliberately quieter than both the alarm states and the pass state. */
.score-neutral .ring-fill{filter:none}
@media(prefers-reduced-motion:reduce){.scan-beam,.scan-steps span,.issue,#results *{animation:none!important}}

/* ---- platform / builder badge ---- */
.platform{margin:.85rem 0 0}
.platform[hidden]{display:none}
.platform-badge{display:inline-flex;align-items:center;gap:.42rem;background:var(--cool);border:1px solid #d7e0ee;
  color:var(--navy-600);font-weight:600;font-size:.82rem;padding:.3rem .62rem;border-radius:6px}
.platform-badge .pf-ico svg{width:15px;height:15px;display:block}
.platform-note{margin:.5rem 0 0;color:var(--muted);font-size:.86rem;line-height:1.55;max-width:52ch}
.platform-note a{color:var(--gold-tx);font-weight:600}
.platform-note a:hover{color:var(--ink)}

/* ---- email-me-the-report lead card (soft, appears after a scan) ---- */
.lead-card{margin:1.2rem 0 0;background:var(--cream-2);border:1px solid var(--cream-bd);
  border-radius:var(--radius-sm);padding:1.1rem 1.2rem}
.lead-card.sent{background:#E9F5EE;border-color:#8FD3AC}
.lead-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.05rem;color:var(--ink);margin:0}
.lead-copy{color:var(--muted-2);font-size:.9rem;line-height:1.5;margin:.35rem 0 .8rem}
.lead-row{display:flex;gap:.6rem;flex-wrap:wrap}
.lead-row input[type=email]{flex:1 1 200px;min-width:0;font:inherit;font-size:15px;padding:.7rem .9rem;
  border:1.5px solid #C9C2B4;border-radius:var(--radius-sm);background:#fff;color:var(--ink)}
.lead-row input[type=email]:focus-visible{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.lead-row .btn{flex:0 0 auto}
.lead-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.lead-turnstile,#lead-turnstile{margin:.7rem 0 0}
.lead-status{margin:.6rem 0 0;font-size:.86rem;font-weight:600;min-height:1em}
.lead-status.err{color:#B0231A}
.lead-status.ok{color:#1B7A44}
.lead-card.sent .lead-title,.lead-card.sent .lead-copy{text-align:center}


/* ── 1.0.6 classification (RC1-UI-03) ─────────────────────────────────────────
   Every finding states its classification in words. These colours reinforce the
   label; they never carry it alone, so the four classes stay distinguishable
   without colour vision and to a screen reader. `manual` and `advisory` are not
   failures and are deliberately low-alarm. */
.badge-notice { background: #eef1f5; color: #46505e; }

.issue.cls-confirmed { border-left-color: #c0392b; }
.issue.cls-potential { border-left-color: #c68012; }
.issue.cls-manual,
.issue.cls-advisory  { border-left-color: #8a94a4; }
/* A contract violation, not a category — conspicuous rather than blended in. */
.issue.cls-unclassified { border-left-color: #3858e9; border-left-style: dashed; }

.class-counts { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 .25rem; }
.class-count {
  font-size: .8125rem; font-weight: 600; padding: .15rem .55rem;
  border-radius: 999px; background: #eef1f5; color: #46505e;
}
.class-count.cls-confirmed { background: #fbe9e7; color: #8a2018; }
.class-count.cls-potential { background: #fbf3e1; color: #6a4e0c; }
.class-count.cls-unclassified { background: #e8ecfd; color: #24308a; }