/* ═══ CONTENT QA (content-qa) ══════════════════════════════════════════════
   Automated creative-content checks. Report rows reuse the shared .qa-row
   styling from qa.css (globally linked); this file carries the hero, intake,
   annotated preview and copy panel. */
.ccq-app{display:flex;flex-direction:column;gap:18px}
.ccq-app .panel{padding:22px}     /* shell zeroes nested section padding — re-assert */

/* ── HERO — QA-family variant: 400 band / 348 glass card at min(520px,46%).
   Shares the HTML5 QA inspector photograph (same precedent as Social QA): one
   file, one cache entry, and the QA tools read as a set. url() resolves against
   THIS stylesheet, hence the ../ hop. Re-shot art needs a NEW filename. */
.ccq-app .ccq-hero{position:relative;margin:0;padding:0 clamp(14px,3vw,40px);border-radius:24px;
  overflow:hidden;min-height:280px;display:flex;align-items:center;border:1px solid #cfdcf2;
  background:#dfe9fa url(../html5-ad-qa/img/hero-inspector.jpg) right center/cover no-repeat}
html.dark .ccq-app .ccq-hero{border-color:#232c3a;
  background:#0e131b url(../html5-ad-qa/img/hero-inspector.jpg) right center/cover no-repeat}
.ccq-app .ccq-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(238,243,252,.66) 0%,rgba(238,243,252,.50) 38%,rgba(238,243,252,.20) 58%,transparent 74%)}
html.dark .ccq-app .ccq-hero::after{background:linear-gradient(100deg,rgba(10,15,24,.80) 0%,rgba(10,15,24,.60) 38%,rgba(10,15,24,.24) 58%,transparent 74%)}
.ccq-app .ccq-hero-grid{position:relative;z-index:1;flex:1;min-width:0;display:grid;
  grid-template-columns:minmax(0,min(580px,52%));justify-content:start;align-items:center}
/* Trap: `main.app section:not(.panel){padding-block:0}` kills hero padding —
   the vertical inset comes from the card's own margin. */
.ccq-app .ccq-card.panel{margin:14px 0;min-height:200px;display:flex;flex-direction:column;gap:6px;
  padding:12px clamp(16px,2.4vw,26px);border-radius:22px;
  background:rgba(255,255,255,.44);-webkit-backdrop-filter:blur(22px) saturate(1.35);
  backdrop-filter:blur(22px) saturate(1.35);border:1px solid rgba(255,255,255,.62);
  box-shadow:0 24px 55px rgba(20,50,110,.18),inset 0 1px 0 rgba(255,255,255,.7)}
html.dark .ccq-app .ccq-card.panel{background:rgba(16,22,32,.62);border-color:rgba(120,160,230,.22);
  box-shadow:0 24px 55px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
.ccq-app .ccq-head{margin:0;padding:0;border:none}
.ccq-app .ccq-logo{font-size:1.6rem;font-weight:800;color:#101725;letter-spacing:-.01em;line-height:1.1;margin:0}
html.dark .ccq-app .ccq-logo{color:#eef1f6}
.ccq-hero-sub{font-size:.85rem;color:#4c5468;margin:0;line-height:1.4}
html.dark .ccq-hero-sub{color:#9aa4b4}
.ccq-hero-pts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ccq-hero-pts li{display:grid;grid-template-columns:24px 1fr;grid-template-rows:auto auto;
  column-gap:9px;align-items:center;font-size:.8rem;color:#475067}
.ccq-hero-pts li i{grid-column:1;grid-row:1/3}
.ccq-hero-pts li b{grid-column:2;grid-row:1}
.ccq-hero-pts li span{grid-column:2;grid-row:2}
.ccq-hero-pts b{font-weight:700;color:#1f2733;display:block;line-height:1.25}
.ccq-hero-pts span{display:block;font-size:.7rem;color:#8a93a5;font-weight:500}
.ccq-hero-pts i{width:24px;height:24px;color:#0d5fe8;border-radius:8px;background:rgba(234,241,254,.92);
  display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;flex:none}
html.dark .ccq-hero-pts b{color:#e8ebf2}
html.dark .ccq-hero-pts i{background:#16233a;color:#6ea0ff}
.ccq-hero-trust{margin-top:auto;display:flex;align-items:center;gap:5px 12px;flex-wrap:wrap;
  font-size:10.5px;color:#5b6478}
.ccq-hero-trust i{color:#16a34a;margin-right:4px}
html.dark .ccq-hero-trust{color:#8b93a5}
@media (max-width:760px){
  .ccq-app .ccq-hero{min-height:0;padding:0 12px}
  .ccq-app .ccq-hero-grid{grid-template-columns:1fr}
  .ccq-app .ccq-card.panel{margin:16px 0;min-height:0}
}

/* ── intake ── */
.ccq-zone{border:2px dashed #c9d6ef;border-radius:16px;background:linear-gradient(180deg,#f8fbff,#fff);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;
  padding:30px 22px;cursor:pointer;transition:.16s}
.ccq-zone:hover,.ccq-zone.drag{border-color:#0d5fe8;background:#f4f8ff}
.ccq-zone-ico{font-size:26px;color:#0d5fe8}
.ccq-zone-title{font-size:15px;font-weight:800;color:#16233a}
.ccq-zone-mini{font-size:11.5px;color:#68738a;font-weight:600}
.ccq-choose{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13px;font-weight:800;
  color:#fff;background:#1159da;border:none;border-radius:11px;padding:10px 20px;cursor:pointer}
.ccq-choose:hover{background:#0d4fc4}
.ccq-intake-foot{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;margin-top:12px;font-size:11.5px;color:#5b6478}
.ccq-intake-foot i{color:#16a34a;margin-right:4px}
/* .ccq-sample-btn removed 2026-07-30 — the sample is the shared .dl-demo switch
   in the hero now, so this rule had no markup left to style. */
.ccq-quota{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;font-size:11px;
  font-weight:700;color:#1d4ed8;background:#e8f0ff;border:1px solid #cfe0fb}
.ccq-quota i{color:#0d5fe8}
.ccq-quota.low{color:#9a5b06;background:#fff7e8;border-color:#f3ddb4}
.ccq-quota.out{color:#a3372c;background:#fdf1f0;border-color:#f2cdc8}
html.dark .ccq-zone{border-color:#2b384c;background:#131a24}
html.dark .ccq-zone:hover,html.dark .ccq-zone.drag{border-color:#2a63d8;background:#16202e}
html.dark .ccq-zone-title{color:#dbe3ef}
html.dark .ccq-intake-foot{color:#8b93a5}
.ccq-status{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:#1d4ed8;
  background:#eef4ff;border:1px solid #cfe0fb;border-radius:12px;padding:12px 16px}
.ccq-status[hidden]{display:none}   /* display:flex would defeat the hidden attribute */
.ccq-status::before{content:"";width:15px;height:15px;border-radius:50%;flex:none;
  border:2.5px solid #bcd2f7;border-top-color:#1159da;animation:ccqspin .8s linear infinite}
@keyframes ccqspin{to{transform:rotate(360deg)}}
html.dark .ccq-status{color:#9cc2ff;background:#141b28;border-color:#274063}

/* ── results ── */
.ccq-results{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1000px){.ccq-results{grid-template-columns:1fr}}
.ccq-head-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.ccq-head-row h3{margin:0;font-size:15px;font-weight:800;color:#16233a}
html.dark .ccq-head-row h3{color:#dbe3ef}
.ccq-file-line{font-size:11.5px;color:#68738a;margin:0 0 10px}
.ccq-tally{display:flex;gap:8px;flex-wrap:wrap}
.ccq-t{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;border-radius:20px;padding:3px 10px}
.ccq-t b{font-weight:800}
.ccq-t.fail{color:#a3372c;background:#fdf1f0;border:1px solid #f2cdc8}
.ccq-t.warn{color:#9a5b06;background:#fff7e8;border:1px solid #f3ddb4}
.ccq-t.pass{color:#15794a;background:#e9f7ef;border:1px solid #bfe6cd}
.ccq-group{border:1px solid var(--line,#e6e8f1);border-radius:12px;overflow:hidden;margin-bottom:12px;background:var(--panel,#fff)}
.ccq-group-h{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#5b6678;
  background:#f6f8fc;padding:8px 14px;border-bottom:1px solid var(--line,#e6e8f1)}
.ccq-group-h i{margin-right:6px;color:#0d5fe8}
html.dark .ccq-group-h{background:#151b25;color:#93a0b4}
/* deliberate no-score note */
.ccq-noscore{font-size:11px;color:#8a93a5;line-height:1.5;margin:4px 0 0}

/* annotated preview */
.ccq-stage{background:
  conic-gradient(#e9edf4 0 25%,#f7f9fc 0 50%,#e9edf4 0 75%,#f7f9fc 0) 0 0/22px 22px;
  border:1px solid var(--line,#e6e8f1);border-radius:14px;padding:14px;display:grid;place-items:center}
html.dark .ccq-stage{background:conic-gradient(#1a212c 0 25%,#12181f 0 50%,#1a212c 0 75%,#12181f 0) 0 0/22px 22px;border-color:#242c38}
.ccq-stage canvas{max-width:100%;height:auto;border-radius:8px;box-shadow:0 10px 30px rgba(16,24,40,.18)}
.ccq-legend{display:flex;gap:8px 16px;flex-wrap:wrap;font-size:11px;color:#5b6478;margin-top:10px;align-items:center}
.ccq-legend b{display:inline-block;width:12px;height:12px;border-radius:3px;border:2px solid;margin-right:5px;vertical-align:-2px}
.ccq-legend .lp{border-color:#db2777}.ccq-legend .lc{border-color:#dc2626}.ccq-legend .lt{border-color:#d97706}.ccq-legend .le{border-color:#7c3aed}
html.dark .ccq-legend{color:#8b93a5}
.ccq-prev-tools{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-top:12px}
.ccq-overlay-lbl{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#3a4456;cursor:pointer}
html.dark .ccq-overlay-lbl{color:#aab2c0}
.ccq-btn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12px;font-weight:700;
  color:#0d5fe8;background:#fff;border:1px solid #b9cdf0;border-radius:9px;padding:7px 12px;cursor:pointer}
.ccq-btn:hover{background:#eef4ff}
html.dark .ccq-btn{color:#9cc2ff;background:#161d27;border-color:#274063}

/* extracted copy panel */
.ccq-copy-list{list-style:none;margin:8px 0 0;padding:0;max-height:280px;overflow:auto;border:1px solid var(--line,#e6e8f1);border-radius:10px}
.ccq-copy-list li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 12px;
  border-top:1px solid var(--line,#e6e8f1);font-size:12.5px;color:#26314a}
.ccq-copy-list li:first-child{border-top:none}
.ccq-copy-list li em{font-style:normal;font-size:10px;font-weight:700;color:#8a93a5;flex:none}
.ccq-copy-list li.low span{color:#9aa3b5}
.ccq-copy-list li.low em{color:#c47d0a}
html.dark .ccq-copy-list li{color:#c3ccda}
.ccq-copy-note{font-size:11px;color:#8a93a5;line-height:1.5;margin:8px 0 0}
.ccq-reset{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12px;font-weight:700;
  color:#5b6478;background:none;border:1px solid var(--line,#dbe3ef);border-radius:9px;padding:7px 12px;cursor:pointer}
.ccq-reset:hover{color:#a3372c;border-color:#f2cdc8}

/* ── Full view overlay: the annotated preview large, with the finding-box
     toggle + download + replace alongside. z 150 = above the page, BELOW
     toasts (200) and the login modal (300) so gate messages show over it. ── */
.ccq-fullview{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;background:#fff}
.ccq-fullview-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 16px;background:#10131a;color:#cbd5e1;flex:none}
.ccq-fullview-hint{font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccq-fullview-hint i{color:#818cf8}
.ccq-fullview-close{border:1px solid #394150;background:#1b212e;color:#e2e8f0;font:inherit;font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.15s;flex:none}
.ccq-fullview-close:hover{background:#232a3a;border-color:#4f5a6e}
.ccq-fullview-body{flex:1;display:flex;min-height:0}
.ccq-fullview-side{width:224px;flex:none;overflow:auto;padding:16px 14px;background:var(--bg2,#f4f6f9);border-right:1px solid var(--line,#e6e8ec);display:flex;flex-direction:column;gap:8px}
.ccq-fullview-lbl{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#94a3b8)}
.ccq-fullview-toolshost .ccq-prev-tools{flex-direction:column;align-items:stretch;gap:9px;margin:0}
.ccq-fullview-toolshost .ccq-btn{justify-content:center}
.ccq-fullview-replace{justify-content:center}
.ccq-fullview-note{font-size:11px;line-height:1.45;color:var(--muted,#94a3b8)}
.ccq-fullview-stagewrap{flex:1;min-width:0;display:flex}
.ccq-fullview-stagewrap .ccq-stage{flex:1;min-height:0;max-height:none;overflow:auto;display:grid;place-items:center;border-radius:0;border:0;padding:24px}
html.dark .ccq-fullview{background:#12151c}
html.dark .ccq-fullview-side{background:#171b22;border-color:#2a3038}
@media (max-width:820px){
  .ccq-fullview-body{flex-direction:column}
  .ccq-fullview-side{width:auto;border-right:0;border-bottom:1px solid var(--line,#e6e8ec)}
}

/* ── "Not a typo" chips (spelling) ─────────────────────────────────────────
   Sits under the Copy group. Brand and place names are the main thing this
   check flags, and they repeat per client — one tap teaches each permanently. */
[data-tool="content-qa"] .ccq-spell-ok {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 2px 14px 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--ccq-line, #e4e7ec);
}
[data-tool="content-qa"] .ccq-spell-ok > span {
  font-size: 11px;
  font-weight: 700;
  color: var(--ccq-mut, #667085);
  letter-spacing: .02em;
}
[data-tool="content-qa"] .ccq-okword {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--ccq-line, #e4e7ec);
  border-radius: 999px;
  background: #fff;
  color: var(--ccq-ink, #101828);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
[data-tool="content-qa"] .ccq-okword:hover {
  background: #f0f6ff;
  border-color: #1159da;
}
[data-tool="content-qa"] .ccq-okword i { font-size: 9px; opacity: .6; }