/* ============================================================
   HONEST AUDIT WIDGET — shared styles
   Used on both /console/scanner-honest.html (standalone landing)
   and /console/index.html (inline in hero).
   Page-specific margin/positioning is set by the host page.
   ============================================================ */

@keyframes auditPulse { 50% { opacity: .4; } }
@keyframes auditRowIn { to { opacity: 1; transform: translateY(0); } }

.audit{
  max-width: 820px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* HEAD ------------------------------------------------------- */
.audit-head{
  display:flex; justify-content:space-between; align-items:center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  font-family:'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
}
.audit-head .dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cool); display: inline-block; margin-right: 8px;
  box-shadow: 0 0 0 4px rgba(139,233,193,.16);
  transition: background .2s, box-shadow .2s;
}
.audit.scanning .audit-head .dot{
  background: var(--warn); box-shadow: 0 0 0 4px rgba(245,196,81,.20);
  animation: auditPulse 1s ease-in-out infinite;
}
.audit.done .audit-head .dot{
  background: var(--cool); box-shadow: 0 0 0 4px rgba(139,233,193,.16);
}
.audit-head a{
  color: var(--text-3); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.audit-head a:hover{ color: var(--text); border-color: var(--line-2); }

/* INPUT ----------------------------------------------------- */
.audit-input{
  display:flex; gap: 10px; padding: 14px;
  transition: opacity .25s, max-height .3s;
}
.audit-input input{
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--text);
  font-family:'JetBrains Mono', monospace;
  font-size: 15px;
  padding: 14px 16px;
  border-radius: 7px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.audit-input input::placeholder{ color: var(--text-3); }
.audit-input input:focus{
  border-color: var(--hot); box-shadow: 0 0 0 3px rgba(255,107,61,.14);
}
.audit-input button{
  font-family:'Inter Tight'; font-weight: 600;
  font-size: 15px; letter-spacing: -0.005em;
  background: var(--hot); color: #fff; border: 0;
  padding: 0 22px; border-radius: 7px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform .12s, background .15s;
}
.audit-input button:hover{ transform: translateY(-1px); background: #ff7d54; }
.audit-input button span{ font-family:'JetBrains Mono', monospace; font-weight: 700; }
.audit-input button:disabled{ opacity: .5; cursor: not-allowed; transform: none; }

/* FOOT ----------------------------------------------------- */
.audit-foot{
  padding: 12px 20px 14px;
  border-top: 1px solid var(--line);
  font-family:'Inter Tight';
  font-size: 12px; line-height: 1.5;
  color: var(--text-3);
}

/* RESULTS -------------------------------------------------- */
.audit-results{ display: none; }
.audit.scanning .audit-results,
.audit.done .audit-results{ display: block; }
.audit.scanning .audit-input,
.audit.done .audit-input{ display: none; }

.audit-results-head{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "dom grade"
    "meta grade";
  gap: 6px 24px;
  padding: 20px 24px 22px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.audit-domain{
  grid-area: dom;
  font-family:'JetBrains Mono', monospace;
  font-size: 18px; font-weight: 600; color: var(--text);
  letter-spacing: -0.005em;
}
.audit-meta{
  grid-area: meta;
  font-family:'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
}
.audit-grade{
  grid-area: grade;
  display: flex; align-items: center; gap: 14px;
}
.grade-letter{
  font-family:'Inter Tight'; font-weight: 700;
  font-size: 44px; line-height: 1; letter-spacing: -0.04em;
  min-width: 64px; text-align: right;
  color: var(--warn);
  transition: color .2s;
}
.grade-letter.g-A{ color: var(--cool); }
.grade-letter.g-B{ color: #b8e88a; }
.grade-letter.g-C{ color: var(--warn); }
.grade-letter.g-D{ color: #ff9b6a; }
.grade-letter.g-F{ color: var(--hot); }
.grade-num{
  font-family:'JetBrains Mono', monospace;
  font-size: 11px; color: var(--text-3);
  letter-spacing: .1em; text-transform: uppercase;
}

/* CHECKS LIST --------------------------------------------- */
.audit-checks{
  list-style: none; margin: 0; padding: 0;
}
.audit-checks li{
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(4px);
  animation: auditRowIn .35s ease forwards;
  cursor: pointer;
  transition: background .12s;
}
.audit-checks li:hover{ background: var(--bg-3); }
.audit-checks li:last-child{ border-bottom: 0; }

.check-status{
  display: flex; align-items: center; gap: 8px;
  font-family:'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
}
.check-status .marker{
  width: 9px; height: 9px; border-radius: 2px; display: inline-block;
}
.check-status.s-pass{ color: var(--cool); }
.check-status.s-pass .marker{ background: var(--cool); }
.check-status.s-warn{ color: var(--warn); }
.check-status.s-warn .marker{ background: var(--warn); }
.check-status.s-fail{ color: var(--hot); }
.check-status.s-fail .marker{ background: var(--hot); }

.check-body{
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.check-name{
  font-family:'Inter Tight'; font-weight: 600;
  font-size: 14px; color: var(--text);
  letter-spacing: -0.005em;
}
.check-finding{
  font-family:'JetBrains Mono', monospace;
  font-size: 12.5px; line-height: 1.45;
  color: var(--text-2);
  overflow-wrap: break-word;
}
.check-tag{
  align-self: center;
  font-family:'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 9px; border-radius: 4px;
  white-space: nowrap;
  border: 1px solid var(--line-2);
}
.check-tag.t-critical{ color: var(--hot); border-color: rgba(255,107,61,.4); background: rgba(255,107,61,.08); }
.check-tag.t-important{ color: var(--warn); border-color: rgba(245,196,81,.35); background: rgba(245,196,81,.06); }
.check-tag.t-low{ color: var(--text-2); }
.check-tag.t-info{ color: var(--text-3); }

.check-fix{
  display: none;
  grid-column: 1 / -1;
  margin-top: 12px; padding: 14px 16px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 7px;
  font-family:'JetBrains Mono', monospace;
  font-size: 12.5px; line-height: 1.55;
  color: var(--text-2);
}
.check-fix b{ color: var(--text); font-weight: 600; }
.audit-checks li.open .check-fix{ display: block; }
.check-toggle{
  font-family:'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); margin-top: 6px;
}
.audit-checks li.open .check-toggle::before{ content: "▾ HIDE DETAILS"; }
.audit-checks li:not(.open) .check-toggle::before{ content: "▸ SHOW DETAILS"; }
.audit-checks li:hover .check-toggle{ color: var(--text-2); }

.check-fix-module{
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
}
.check-fix-module-label{
  color: var(--text-3); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
}
.check-fix-module a{
  color: var(--hot); text-decoration: none;
  font-family: 'Inter Tight'; font-weight: 600; font-size: 13px;
}
.check-fix-module a:hover{ text-decoration: underline; }

/* SUMMARY -------------------------------------------------- */
.audit-summary{
  padding: 22px 24px;
  border-top: 1px solid var(--line);
  background: var(--bg-3);
}
.audit-summary-stats{
  display: flex; flex-wrap: wrap; gap: 24px;
  margin-bottom: 18px;
  font-family:'Inter Tight'; font-size: 14px;
  color: var(--text-2);
}
.audit-summary-stats span{ display: inline-flex; align-items: baseline; gap: 8px; }
.audit-summary-stats b{
  font-family:'Inter Tight'; font-weight: 700;
  font-size: 22px; color: var(--text);
}
.audit-summary-stats .sum-critical{ color: var(--hot); }
.audit-summary-stats .sum-warn{ color: var(--warn); }
.audit-summary-stats .sum-pass{ color: var(--cool); }

.audit-summary-actions{
  display: flex; flex-wrap: wrap; gap: 10px;
}
.audit-summary-actions a{
  font-family:'Inter Tight'; font-weight: 500;
  font-size: 13px; text-decoration: none;
  padding: 9px 14px; border-radius: 6px;
  border: 1px solid var(--line-2);
  color: var(--text-2);
  transition: all .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.audit-summary-actions a:hover{ color: var(--text); border-color: var(--text-3); }
.audit-summary-actions a.primary{
  background: var(--text); color: var(--ink); border-color: var(--text);
  font-weight: 600;
}
.audit-summary-actions a.primary:hover{ background: #fff; border-color: #fff; }
.audit-summary-actions a span{ font-family:'JetBrains Mono', monospace; font-weight: 700; }

/* MOBILE --------------------------------------------------- */
@media (max-width: 640px){
  .audit-checks li{ grid-template-columns: 1fr; gap: 8px; }
  .check-tag{ justify-self: start; }
  .audit-results-head{ grid-template-columns: 1fr; grid-template-areas: "dom" "meta" "grade"; }
  .audit-grade{ justify-content: flex-start; }
}

/* ============================================================
   STATE MESSAGES — error / rate-limited
   Shown in place of results; input stays visible so the user
   can retry. Toggled by .audit.error / .audit.limited + the
   #audit-state-msg [hidden] attribute (see audit.js).
   ============================================================ */
.audit.error  .audit-head .dot{ background: var(--hot);  box-shadow: 0 0 0 4px rgba(255,107,61,.20); }
.audit.limited .audit-head .dot{ background: var(--warn); box-shadow: 0 0 0 4px rgba(245,196,81,.20); }
.audit.error .audit-results,
.audit.limited .audit-results{ display: none; }

.audit-state-msg{
  display: flex; align-items: flex-start; gap: 14px;
  margin: 0 14px 14px; padding: 16px 18px;
  border: 1px solid var(--line-2); border-radius: 9px;
  background: var(--bg);
}
.audit-state-msg[hidden]{ display: none; }
.audit-state-msg .msg-icon{
  width: 10px; height: 10px; border-radius: 50%;
  margin-top: 5px; flex-shrink: 0; background: var(--hot);
}
.audit-state-msg.s-limited .msg-icon{ background: var(--warn); }
.audit-state-msg .msg-body{ display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.audit-state-msg .msg-title{
  font-family:'Inter Tight'; font-weight: 600; font-size: 15px; color: var(--text);
}
.audit-state-msg .msg-text{
  font-family:'Inter Tight'; font-size: 13.5px; line-height: 1.5; color: var(--text-2);
}
.audit-state-msg .msg-cta{
  font-family:'Inter Tight'; font-weight: 600; font-size: 13px; white-space: nowrap;
  color: var(--ink); background: var(--text); border-radius: 7px;
  padding: 9px 14px; text-decoration: none; align-self: center;
}
.audit-state-msg .msg-cta:hover{ background: #fff; }

/* ============================================================
   EMAIL-CAPTURE MODAL — gates the full PDF report
   Injected into <body> once by audit.js.
   ============================================================ */
.ci-modal{
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.ci-modal[hidden]{ display: none; }
.ci-modal-backdrop{
  position: absolute; inset: 0;
  background: rgba(6,7,10,.82);
}
.ci-modal-card{
  position: relative; z-index: 1; width: min(440px, 100%);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 16px;
  padding: 30px 30px 24px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.8);
}
.ci-modal-x{
  position: absolute; top: 12px; right: 16px;
  background: none; border: 0; color: var(--text-3);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.ci-modal-x:hover{ color: var(--text); }
.ci-modal-eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--hot); margin-bottom: 10px;
}
.ci-modal-card h3{
  font-family:'Inter Tight'; font-weight: 600;
  font-size: 24px; letter-spacing: -0.02em; line-height: 1.1;
  margin: 0 0 10px; color: var(--text);
}
.ci-modal-card p{
  font-family:'Inter Tight'; font-size: 14px; line-height: 1.55;
  color: var(--text-2); margin: 0 0 18px;
}
.ci-modal-card p b{ color: var(--text); }
#ci-email-form{ display: flex; flex-direction: column; gap: 10px; }
#ci-email-input{
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
  font-family:'JetBrains Mono', monospace; font-size: 15px; color: var(--text);
  padding: 14px 16px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
#ci-email-input::placeholder{ color: var(--text-3); }
#ci-email-input:focus{ border-color: var(--hot); box-shadow: 0 0 0 3px rgba(255,107,61,.14); }
#ci-email-form button{
  font-family:'Inter Tight'; font-weight: 600; font-size: 15px;
  background: var(--hot); color: #fff; border: 0; border-radius: 9px;
  padding: 13px; cursor: pointer;
  display: inline-flex; gap: 8px; align-items: center; justify-content: center;
  transition: transform .12s, background .15s;
}
#ci-email-form button:hover{ transform: translateY(-1px); background: #ff7d54; }
#ci-email-form button span{ font-family:'JetBrains Mono', monospace; font-weight: 700; }
.ci-modal-foot{
  font-family:'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .06em; color: var(--text-3);
  margin-top: 14px; text-align: center;
}

/* ============================================================
   PDF REPORT — full-screen overlay holding a print-ready,
   paper-styled audit document. The "Download PDF" button calls
   window.print(); the @media print block isolates the document.
   In production the server emails this same report as a PDF.
   ============================================================ */
.ci-report{
  position: fixed; inset: 0; z-index: 1001;
  overflow: auto; background: rgba(6,7,10,.85);
}
.ci-report[hidden]{ display: none; }
.ci-report-bar{
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; background: var(--bg-2); border-bottom: 1px solid var(--line);
  font-family:'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3);
}
.ci-report-bar-r{ display: flex; gap: 10px; }
.ci-report-bar button{
  font-family:'Inter Tight'; font-weight: 600; font-size: 13px; cursor: pointer;
  border-radius: 7px; padding: 9px 16px; border: 1px solid var(--line-2);
  background: transparent; color: var(--text-2);
}
.ci-report-bar button:hover{ color: var(--text); border-color: var(--text-3); }
.ci-report-bar #ci-report-print{ background: var(--hot); color: #fff; border-color: var(--hot); }
.ci-report-bar #ci-report-print:hover{ background: #ff7d54; }

.ci-report-doc{
  max-width: 820px; margin: 34px auto;
  background: var(--paper); color: #14140f;
  border-radius: 8px; padding: 48px 52px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.6);
  font-family:'Inter Tight';
}
.ci-report-doc .rh{
  display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: nowrap;
  border-bottom: 2px solid #14140f; padding-bottom: 14px;
}
.ci-report-doc .rh-brand{ flex: 0 0 auto; font-family:'Inter Tight'; font-weight: 800; font-size: 22px; letter-spacing: -0.02em; white-space: nowrap; }
.ci-report-doc .rh-meta{
  font-family:'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: #6a6256;
  text-align: right; line-height: 1.7;
}
.ci-report-doc .rh-domain{
  font-family:'JetBrains Mono', monospace; font-size: 14px;
  color: #6a6256; letter-spacing: .04em; margin: 16px 0 0;
}
.ci-report-doc .rg{
  display: flex; gap: 28px; align-items: center;
  padding: 18px 0 24px; border-bottom: 1px solid rgba(20,20,15,.15);
}
.ci-report-doc .rg-grade{
  font-family:'Inter Tight'; font-weight: 800;
  font-size: 96px; line-height: .8; letter-spacing: -0.05em;
}
.ci-report-doc .rg-grade.g-A{ color: #1f8a5b; }
.ci-report-doc .rg-grade.g-B{ color: #5a8a2b; }
.ci-report-doc .rg-grade.g-C{ color: #b8860b; }
.ci-report-doc .rg-grade.g-D{ color: #c2671d; }
.ci-report-doc .rg-grade.g-F{ color: #c83a17; }
.ci-report-doc .rg-score{ font-family:'Inter Tight'; font-weight: 700; font-size: 30px; letter-spacing: -0.02em; }
.ci-report-doc .rg-lab{
  font-family:'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: #6a6256; margin-top: 4px;
}
.ci-report-doc .rg-counts{ font-family:'JetBrains Mono', monospace; font-size: 12px; color: #3a362c; margin-top: 10px; }
.ci-report-doc .rg-counts b{ font-weight: 700; }
.ci-report-doc .rg-counts .c-f{ color: #c83a17; }
.ci-report-doc .rg-counts .c-w{ color: #b8860b; }
.ci-report-doc .rg-counts .c-p{ color: #1f8a5b; }
.ci-report-doc .rt{ width: 100%; border-collapse: collapse; margin-top: 8px; }
.ci-report-doc .rt .rr td{
  border-bottom: 1px solid rgba(20,20,15,.14);
  padding: 16px 0; vertical-align: top;
}
.ci-report-doc .rr-st{
  width: 64px; padding-right: 14px !important;
  font-family:'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .08em;
}
.ci-report-doc .rr.r-pass .rr-st{ color: #1f8a5b; }
.ci-report-doc .rr.r-warn .rr-st{ color: #b8860b; }
.ci-report-doc .rr.r-fail .rr-st{ color: #c83a17; }
.ci-report-doc .rr-name{ font-family:'Inter Tight'; font-weight: 700; font-size: 15px; }
.ci-report-doc .rr-sev{
  font-family:'JetBrains Mono', monospace; font-weight: 500; font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; color: #6a6256; margin-left: 8px;
}
.ci-report-doc .rr-find{
  font-family:'JetBrains Mono', monospace; font-size: 12px; color: #3a362c;
  margin-top: 4px; line-height: 1.45;
}
.ci-report-doc .rr-risk{
  font-family:'Inter Tight'; font-size: 13px; color: #524d40;
  margin-top: 8px; line-height: 1.5; max-width: 64ch;
}
.ci-report-doc .rr-fix{ font-family:'JetBrains Mono', monospace; font-size: 11.5px; color: #c2410c; margin-top: 8px; }
.ci-report-doc .rr-fix b{ color: #14140f; }
.ci-report-doc .rf{ margin-top: 24px; padding-top: 18px; border-top: 2px solid #14140f; }
.ci-report-doc .rf p{
  font-family:'JetBrains Mono', monospace; font-size: 10.5px;
  line-height: 1.6; color: #6a6256; margin: 0 0 8px;
}
.ci-report-doc .rf .rf-cta{ color: #c2410c; font-weight: 700; }

@media print{
  body > *:not(#ci-report){ display: none !important; }
  #ci-report{ position: static !important; overflow: visible !important; background: #fff !important; }
  .ci-report-bar{ display: none !important; }
  .ci-report-doc{
    box-shadow: none !important; margin: 0 auto !important;
    padding: 0 !important; max-width: none !important;
  }
  .ci-report-doc .rr td{ break-inside: avoid; }
  @page{ margin: 16mm; }
}