/**
 * Noustiq V10 component styles.
 *
 * Additive only. This file introduces the components V10 adds and never
 * redefines an existing selector, so removing it degrades the new pages to
 * unstyled-but-readable rather than breaking anything already shipped.
 *
 * Colours are declared as local custom properties with literal fallbacks, so
 * the file does not depend on tokens from the base stylesheet that may be named
 * differently. Both light and dark are handled explicitly.
 */

:root {
  --nq-critical: #b42318;
  --nq-critical-bg: #fef3f2;
  --nq-critical-border: #fecdca;
  --nq-review: #b54708;
  --nq-review-bg: #fffaeb;
  --nq-review-border: #fedf89;
  --nq-clear: #027a48;
  --nq-clear-bg: #ecfdf3;
  --nq-clear-border: #a6f4c5;
  --nq-info: #175cd3;
  --nq-info-bg: #eff8ff;
  --nq-info-border: #b2ddff;
  --nq-neutral-bg: #f8f9fb;
  --nq-neutral-border: #e4e7ec;
  --nq-muted: #667085;
  --nq-code-bg: #f2f4f7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --nq-critical: #fda29b;
    --nq-critical-bg: #2b1412;
    --nq-critical-border: #7a271a;
    --nq-review: #fec84b;
    --nq-review-bg: #2a1e0a;
    --nq-review-border: #7a4d0a;
    --nq-clear: #6ce9a6;
    --nq-clear-bg: #0a2318;
    --nq-clear-border: #085d3a;
    --nq-info: #84caff;
    --nq-info-bg: #0b1b2e;
    --nq-info-border: #175cd3;
    --nq-neutral-bg: #101828;
    --nq-neutral-border: #1d2939;
    --nq-muted: #98a2b3;
    --nq-code-bg: #1d2939;
  }
}

/* ---- verdict banner ---------------------------------------------------- */

.nq-verdict {
  border-left: 4px solid var(--nq-neutral-border);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  background: var(--nq-neutral-bg);
}
.nq-verdict h2 { margin-top: .25rem; }
.nq-verdict-critical { border-left-color: var(--nq-critical); background: var(--nq-critical-bg); }
.nq-verdict-critical h2 { color: var(--nq-critical); }
.nq-verdict-review,
.nq-verdict-weak { border-left-color: var(--nq-review); background: var(--nq-review-bg); }
.nq-verdict-review h2,
.nq-verdict-weak h2 { color: var(--nq-review); }
.nq-verdict-fail { border-left-color: var(--nq-critical); background: var(--nq-critical-bg); }
.nq-verdict-fail h2 { color: var(--nq-critical); }
.nq-verdict-clear,
.nq-verdict-good { border-left-color: var(--nq-clear); background: var(--nq-clear-bg); }
.nq-verdict-clear h2,
.nq-verdict-good h2 { color: var(--nq-clear); }
.nq-verdict-ok { border-left-color: var(--nq-info); background: var(--nq-info-bg); }
.nq-verdict-short { border-left-color: var(--nq-neutral-border); }

/* ---- findings ---------------------------------------------------------- */

.finding.nq-sev-critical { border-left: 3px solid var(--nq-critical); padding-left: 1rem; }
.finding.nq-sev-review   { border-left: 3px solid var(--nq-review);   padding-left: 1rem; }
.finding.nq-sev-info     { border-left: 3px solid var(--nq-info);     padding-left: 1rem; }

.priority-critical { background: var(--nq-critical-bg); color: var(--nq-critical); border: 1px solid var(--nq-critical-border); }
.priority-review   { background: var(--nq-review-bg);   color: var(--nq-review);   border: 1px solid var(--nq-review-border); }
.priority-info     { background: var(--nq-info-bg);     color: var(--nq-info);     border: 1px solid var(--nq-info-border); }

/* Evidence-language badge: Observed / Inferred / Unknown / Ask. */
.nq-grade {
  margin-left: auto;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nq-muted);
  border: 1px solid var(--nq-neutral-border);
  border-radius: 999px;
  padding: .15rem .6rem;
  white-space: nowrap;
}

.nq-evidence code {
  background: var(--nq-code-bg);
  border-radius: 4px;
  padding: .15rem .4rem;
  font-size: .85em;
  word-break: break-all;
}

/* ---- featured tool card ------------------------------------------------ */

.card.is-featured { border: 2px solid var(--nq-info); position: relative; }

/* ---- opportunity board ------------------------------------------------- */

.nq-opp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}
.nq-opp {
  border: 1px solid var(--nq-neutral-border);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  background: var(--nq-neutral-bg);
}
.nq-opp-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.nq-opp-head h3 { margin: 0; font-size: 1.02rem; }
.nq-opp-scores { display: flex; gap: 1.1rem; margin: .75rem 0; flex-wrap: wrap; }
.nq-opp-score { display: flex; flex-direction: column; }
.nq-opp-score strong { font-size: 1.4rem; line-height: 1.1; }
.nq-opp-score span { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--nq-muted); }

.nq-badge {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 999px;
  padding: .18rem .65rem;
  white-space: nowrap;
}
.nq-badge-priority { background: var(--nq-clear-bg);    color: var(--nq-clear);    border: 1px solid var(--nq-clear-border); }
.nq-badge-publish  { background: var(--nq-info-bg);     color: var(--nq-info);     border: 1px solid var(--nq-info-border); }
.nq-badge-backlog  { background: var(--nq-neutral-bg);  color: var(--nq-muted);    border: 1px solid var(--nq-neutral-border); }
.nq-badge-research { background: var(--nq-review-bg);   color: var(--nq-review);   border: 1px solid var(--nq-review-border); }
.nq-badge-reject   { background: var(--nq-neutral-bg);  color: var(--nq-muted);    border: 1px solid var(--nq-neutral-border); }
.nq-badge-blocked  { background: var(--nq-critical-bg); color: var(--nq-critical); border: 1px solid var(--nq-critical-border); }

.nq-blockers {
  border-left: 3px solid var(--nq-critical);
  background: var(--nq-critical-bg);
  padding: .6rem .9rem;
  margin-top: .75rem;
  border-radius: 0 6px 6px 0;
  font-size: .87rem;
}

/* ---- funnel ------------------------------------------------------------ */

.nq-funnel { display: grid; gap: .5rem; margin-top: 1rem; }
.nq-funnel-row { display: grid; grid-template-columns: 8.5rem 1fr auto; align-items: center; gap: .75rem; }
.nq-funnel-row > span:first-child { font-size: .82rem; color: var(--nq-muted); text-transform: uppercase; letter-spacing: .04em; }
.nq-funnel-bar { background: var(--nq-neutral-bg); border-radius: 999px; height: 1.5rem; overflow: hidden; border: 1px solid var(--nq-neutral-border); }
.nq-funnel-bar > span { display: block; height: 100%; background: var(--nq-info); min-width: 2px; }
.nq-funnel-row > strong { font-variant-numeric: tabular-nums; }

.nq-weights { width: 100%; border-collapse: collapse; font-size: .88rem; }
.nq-weights th, .nq-weights td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--nq-neutral-border); }
.nq-weights td:last-child, .nq-weights th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- responsive -------------------------------------------------------- */

@media (max-width: 640px) {
  .nq-funnel-row { grid-template-columns: 1fr auto; }
  .nq-funnel-row > span:first-child { grid-column: 1 / -1; }
  .nq-opp-grid { grid-template-columns: 1fr; }
  .nq-verdict { padding: 1.15rem 1.15rem; }
}

/* Wide content must scroll inside its own container, never the page body. */
.nq-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- V10.2 conversion diagnostics ------------------------------------- */
.nq-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.nq-result-card { border:1px solid var(--nq-neutral-border); border-radius:12px; padding:1.5rem; background:var(--nq-neutral-bg); }
.nq-result-top { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.nq-result-hero { display:flex; align-items:baseline; gap:.6rem; margin:.35rem 0 1rem; }
.nq-result-hero strong { font-size:clamp(2rem,6vw,4rem); line-height:1; letter-spacing:-.04em; }
.nq-result-hero span { color:var(--nq-muted); font-size:.9rem; }
.nq-result-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
.nq-result-grid > div { border:1px solid var(--nq-neutral-border); border-radius:9px; padding:.9rem; background:var(--nq-code-bg); }
.nq-result-grid strong { display:block; font-size:1.35rem; }
.nq-result-grid span { display:block; color:var(--nq-muted); font-size:.78rem; margin-top:.25rem; }
.nq-priority-list { display:grid; gap:.8rem; padding-left:1.25rem; }
.nq-priority-list li { padding:.9rem 1rem; border:1px solid var(--nq-neutral-border); border-radius:9px; background:var(--nq-code-bg); }
.nq-priority-list strong, .nq-priority-list span { display:block; }
.nq-priority-list span { color:var(--nq-muted); margin-top:.35rem; }
.nq-workflow { display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; }
.nq-workflow-step { display:flex; align-items:center; gap:.45rem; border:1px solid var(--nq-neutral-border); border-radius:999px; padding:.45rem .7rem; background:var(--nq-code-bg); }
.nq-workflow-step span { width:1.35rem; height:1.35rem; display:inline-grid; place-items:center; border-radius:50%; background:var(--nq-info-bg); color:var(--nq-info); font-size:.72rem; font-weight:700; }
.nq-workflow-step strong { font-size:.83rem; }
@media (max-width:760px){ .nq-form-grid{grid-template-columns:1fr;} .nq-result-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:440px){ .nq-result-grid{grid-template-columns:1fr;} }