/* Clear Note — modern reading layout for article + review pages (all authors: users, admin, editorial).
   Loaded only on pages whose body has cn-article-page / cn-review-page. */

/* ---- Light scrolling: no live blur, softer shadows, cheaper paint ---- */
.cn-article-page .cn-glass, .cn-review-page .cn-glass, .cn-article-page .cn-glass-sm, .cn-review-page .cn-glass-sm {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.10) !important;
}

/* ---- Reading progress bar (top of screen) ---- */
.cn-progress { top: 0 !important; height: 3px !important; z-index: 9500 !important; width: 100% !important; background: var(--nv-g, #22c55e) !important; transform-origin: 0 50%; pointer-events: none; }

/* ---- Header block: left-aligned, calm ---- */
.cn-rd-head { text-align: left !important; max-width: 52rem; margin-left: auto !important; margin-right: auto !important; margin-bottom: 1.5rem !important; }
.cn-rd-head > div { justify-content: flex-start !important; }
.cn-rd-head h1 { margin-left: 0 !important; margin-right: 0 !important; font-size: clamp(1.9rem, 6vw, 2.9rem) !important; line-height: 1.1 !important; letter-spacing: -.02em; text-wrap: balance; }
.cn-rd-head > p { margin-left: 0 !important; margin-right: 0 !important; font-size: 1.05rem !important; line-height: 1.6 !important; }
.cn-rd-head .cn-pill { text-transform: none !important; letter-spacing: 0 !important; font-size: .8rem !important; font-weight: 700; }

/* Writer card keeps its content; only aligned to the new column */
.cn-rd-writer { max-width: none !important; margin: 1.1rem 0 0 !important; text-align: left; border-radius: 1.1rem !important; }

/* ---- Cover image: a rounded card ---- */
.cn-rd-cover { border-radius: 1.5rem !important; box-shadow: 0 8px 24px rgba(0,0,0,.18) !important; max-width: 52rem; margin: 0 auto; }
.cn-rd-cover img { max-height: 26rem !important; }
.cn-article-page main > section:has(> .cn-rd-cover) { max-width: 52rem; margin-left: auto; margin-right: auto; }

/* ---- Body copy: flat, no big card ---- */
.cn-rd-body {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  padding: 0 !important; border-radius: 0 !important; margin-top: 1.5rem !important;
}
.cn-prose-read { font-size: 1.08rem; line-height: 1.85; max-width: 42rem; }
.cn-prose-read p, .cn-prose-read li { margin-bottom: 1.15em; overflow-wrap: anywhere; }
.cn-prose-read h2 { font-size: 1.5rem; line-height: 1.2; margin: 1.8em 0 .5em; letter-spacing: -.01em; }
.cn-prose-read h3 { font-size: 1.2rem; margin: 1.5em 0 .4em; }
.cn-prose-read img, .cn-prose-read video, .cn-prose-read iframe { max-width: 100%; height: auto; border-radius: 1rem; }
.cn-prose-read blockquote { border-left: 4px solid var(--nv-g, #22c55e); margin: 1.6em 0; padding: .2em 0 .2em 1.1em; font-style: italic; font-size: 1.15em; background: none; }
.cn-prose-read table { display: block; overflow-x: auto; max-width: 100%; }
.cn-prose-read pre { overflow-x: auto; }

/* ---- Content cards (verdict, pricing, etc.) ---- */
.cn-article-page main > section.cn-glass, .cn-review-page main > section.cn-glass { max-width: 52rem; margin-left: auto; margin-right: auto; border-radius: 1.1rem !important; }

@media (min-width: 768px) {
  .cn-rd-head, .cn-rd-cover, .cn-rd-body { margin-left: auto !important; margin-right: auto !important; }
}
@media (prefers-reduced-motion: reduce) { .cn-progress { transition: none; } }

/* =====================================================================
   v3 — match the approved preview (smaller text, flat body, simple cards)
   Extra specificity so theme / glass rules cannot win.
   ===================================================================== */
html body.cn-article-page .cn-prose.cn-prose-read,
html body.cn-review-page .cn-prose.cn-prose-read { font-size: 15px !important; line-height: 1.7 !important; max-width: 40rem; }
html body .cn-prose-read p, html body .cn-prose-read li { font-size: inherit !important; line-height: inherit !important; margin: 0 0 1.1em !important; }
html body .cn-prose-read h2 { font-size: 1.35rem !important; line-height: 1.25 !important; margin: 1.6em 0 .5em !important; }
html body .cn-prose-read h3 { font-size: 1.12rem !important; line-height: 1.3 !important; }
html body .cn-glass.cn-rd-body {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  padding: 0 !important; border-radius: 0 !important; max-width: 52rem; margin: 1.25rem auto 0 !important;
}
html body .cn-glass.cn-rd-body::before, html body .cn-glass.cn-rd-body::after { display: none !important; }

/* "In short": simple rounded card, no left border */
.cn-rd-take {
  background: var(--nv-tint, rgba(34,197,94,.10)); border: 1px solid var(--nv-ln, rgba(34,197,94,.18));
  border-radius: 14px; padding: 14px 16px; margin: 0 0 1.5rem; font-size: 14px; line-height: 1.55;
  max-width: 40rem; box-shadow: none;
}
.cn-rd-take strong { display: block; margin-bottom: 6px; color: var(--nv-gt, #16a34a); font-size: 13px; }
.cn-rd-take ul { margin: 0; padding-left: 18px; }
.cn-rd-take li { margin: 3px 0; }

/* ================= v4: lighter, smaller, consistent ================= */
html body .cn-rd-head h1 { font-size: clamp(1.55rem, 6.4vw, 2.25rem) !important; line-height: 1.15 !important; font-weight: 800 !important; }
html body .cn-rd-head > p { font-size: 14.5px !important; line-height: 1.55 !important; }
html body.cn-article-page .cn-prose.cn-prose-read, html body.cn-review-page .cn-prose.cn-prose-read { font-size: 14.5px !important; line-height: 1.7 !important; }
html body .cn-prose-read h2 { font-size: 1.2rem !important; }
html body .cn-prose-read h3 { font-size: 1.05rem !important; }

/* all remaining cards: compact, 16px radius, hairline, no shadow */
html body.cn-article-page main .cn-glass:not(.cn-rd-body), html body.cn-review-page main .cn-glass {
  border-radius: 16px !important; box-shadow: none !important; padding: 14px 16px !important;
  border: 1px solid var(--nv-ln, rgba(255,255,255,.12)) !important;
}
html body.cn-article-page main .cn-glass:not(.cn-rd-body) h2, html body.cn-review-page main .cn-glass h2 { font-size: 1.05rem !important; margin: 0 0 .5rem !important; }
html body.cn-article-page main .cn-glass:not(.cn-rd-body) h3, html body.cn-review-page main .cn-glass h3 { font-size: .95rem !important; }
html body.cn-article-page main .cn-glass:not(.cn-rd-body) p { font-size: 13px !important; line-height: 1.55 !important; }

/* review pages: flat sections instead of a card per section */
html body.cn-review-page main section.cn-glass[id]:not(#quick-verdict):not(#score-summary):not(#pricing) {
  background: transparent !important; border: 0 !important; border-top: 1px solid var(--nv-ln, rgba(255,255,255,.12)) !important;
  border-radius: 0 !important; padding: 18px 0 6px !important; margin-bottom: 0 !important;
}
html body.cn-review-page #quick-verdict { background: var(--nv-tint, rgba(34,197,94,.1)) !important; }
/* table of contents → one swipeable row of chips */
html body.cn-review-page .cn-rv-toc { padding: 0 !important; background: transparent !important; border: 0 !important; }
html body.cn-review-page .cn-rv-toc > div { display: block !important; }
html body.cn-review-page .cn-rv-toc > div > div:last-child { display: none !important; }
html body.cn-review-page .cn-rv-toc p { display: none !important; }
html body.cn-review-page .cn-rv-toc > div > div > div { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 8px !important; margin: 0 -2px !important; padding: 2px 2px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
html body.cn-review-page .cn-rv-toc a { flex: 0 0 auto; white-space: nowrap; padding: 7px 14px; border-radius: 99px; background: var(--nv-tint, rgba(34,197,94,.12)); color: var(--nv-gt, #16a34a) !important; font-size: 12px !important; font-weight: 600; }

/* ---------------- FAQ accordion cards (self-contained colours) ---------------- */
.cn-faq { --fq-bg:#0f1512; --fq-ink:#f3f6f4; --fq-mu:#a7b4ac; --fq-ln:#22302a; --fq-tint:#14261b; --fq-g:#4ade80; margin: 1.75rem auto 0; max-width: 52rem; }
body.cn-light-theme .cn-faq, html[data-cn-theme="light"] .cn-faq { --fq-bg:#fff; --fq-ink:#101828; --fq-mu:#475467; --fq-ln:#dfe7e2; --fq-tint:#ecf7ef; --fq-g:#16a34a; }
.cn-rd-faqwrap { max-width: 52rem; margin: 1.5rem auto 0; }
.cn-faq .cn-faq-h { font-size: 1.15rem; font-weight: 800; margin: 0 0 .75rem; color: var(--fq-ink); }
.cn-faq .cn-faq-i { background: var(--fq-bg) !important; border: 1px solid var(--fq-ln) !important; border-radius: 14px; margin: 0 0 10px; padding: 0 !important; overflow: visible; }
.cn-faq .cn-faq-i summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px !important; min-height: 48px; font-weight: 700; font-size: 14px; line-height: 1.4; color: var(--fq-ink) !important; background: none !important; border: 0 !important; -webkit-tap-highlight-color: transparent; }
.cn-faq .cn-faq-i summary::-webkit-details-marker { display: none; }
.cn-faq .cn-faq-ic { position: relative; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--fq-tint); }
.cn-faq .cn-faq-ic::before, .cn-faq .cn-faq-ic::after { content: ""; position: absolute; left: 6px; top: 11px; width: 12px; height: 2px; border-radius: 2px; background: var(--fq-g); transition: transform .2s; }
.cn-faq .cn-faq-ic::after { transform: rotate(90deg); }
.cn-faq .cn-faq-i[open] .cn-faq-ic::after { transform: none; }
.cn-faq .cn-faq-a { display: block; height: auto; max-height: none; overflow: visible; padding: 0 16px 14px !important; font-size: 13.5px; line-height: 1.65; color: var(--fq-mu) !important; background: none !important; border: 0 !important; }
.cn-faq .cn-faq-a p, .cn-faq .cn-faq-a li { color: var(--fq-mu) !important; font-size: inherit; margin: 0 0 .7em; }
.cn-faq .cn-faq-a ul { margin: 0 0 .7em; padding-left: 18px; }
.cn-faq .cn-faq-a strong { color: var(--fq-ink); }

/* broken-image fallbacks */
.cn-av-fb { display: inline-grid; place-items: center; border-radius: 50%; background: var(--nv-tint, #ecf7ef); color: var(--nv-gt, #15803d); font-weight: 800; border: 2px solid var(--nv-g, #16a34a); }
.cn-img-fallback { background: linear-gradient(135deg, #14532d, #16a34a 60%, #86efac); min-height: 200px; }

/* ================= v5: approved article + review header ================= */
html body.cn-article-page .cn-breadcrumb, html body.cn-review-page .cn-breadcrumb {
  display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 6px !important;
  font-size: 12px !important; line-height: 1.3; margin: 6px 0 14px !important; overflow: hidden; white-space: nowrap; max-width: 52rem; margin-left: auto !important; margin-right: auto !important;
}
html body.cn-article-page .cn-breadcrumb i, html body.cn-article-page .cn-breadcrumb svg, html body.cn-review-page .cn-breadcrumb i, html body.cn-review-page .cn-breadcrumb svg { width: 12px !important; height: 12px !important; flex: none; }
html body.cn-article-page .cn-breadcrumb .current { min-width: 0; max-width: none !important; overflow: hidden; text-overflow: ellipsis; font-weight: 500 !important; color: var(--nv-mu) !important; }
html body.cn-review-page .cn-breadcrumb .current, html body.cn-review-page .cn-breadcrumb .current + *, html body.cn-review-page .cn-breadcrumb i:last-of-type, html body.cn-review-page .cn-breadcrumb svg:last-of-type { display: none !important; }

.cn-pill-n { background: var(--nv-card, #111) !important; border: 1px solid var(--nv-ln, #222) !important; color: var(--nv-mu, #9ca3af) !important; font-weight: 500 !important; font-size: .78rem !important; text-transform: none !important; letter-spacing: 0 !important; }

/* writer card: slim single row */
html body.cn-article-page .cn-rd-writer { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px !important; max-width: none !important; }
html body.cn-article-page .cn-rd-writer > div { margin: 0 !important; padding: 0 !important; border: 0 !important; justify-content: flex-end !important; flex: none; }

/* review header: rating card, dates, reviewed-by */
.cn-rv-rate { display: flex; align-items: center; gap: 16px; padding: 16px; margin: 6px 0 12px; text-align: left; border-radius: 18px; background: var(--nv-card, #111); border: 1px solid var(--nv-ln, #222); }
.cn-rv-ring { flex: 0 0 84px; height: 84px; border-radius: 50%; background: conic-gradient(var(--nv-g, #16a34a) var(--p, 80%), var(--nv-ln, #222) 0); display: grid; place-items: center; }
.cn-rv-ring > div { width: 66px; height: 66px; border-radius: 50%; background: var(--nv-card, #111); display: grid; place-items: center; align-content: center; text-align: center; line-height: 1; }
.cn-rv-ring b { font-size: 22.5px; font-weight: 800; color: var(--nv-ink); }
.cn-rv-ring small { font-size: 10px; color: var(--nv-mu); margin-top: 2px; font-weight: 600; }
.cn-rv-rt p { margin: 4px 0 0 !important; font-size: 12px !important; line-height: 1.4 !important; color: var(--nv-mu) !important; }
.cn-rv-dates { display: flex; gap: 8px; margin: 0 0 12px; text-align: left; }
.cn-rv-dates span { flex: 1; padding: 10px 12px; border-radius: 12px; background: var(--nv-card, #111); border: 1px solid var(--nv-ln, #222); color: var(--nv-mu); font-size: 12px; }
.cn-rv-dates b { display: block; margin-top: 2px; color: var(--nv-ink); font-size: 13px; font-weight: 700; }
.cn-rv-by { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; border-radius: 16px; background: var(--nv-card, #111); border: 1px solid var(--nv-ln, #222); color: inherit; text-decoration: none; }
.cn-rv-av { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #14532d, #16a34a); color: #fff; font-weight: 800; border: 2px solid var(--nv-g, #16a34a); }
.cn-rv-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cn-rv-bt small { display: block; font-size: 12px; color: var(--nv-mu); }
.cn-rv-bt b { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--nv-ink); }
.cn-rv-view { margin-left: auto; padding: 8px 14px; border-radius: 99px; background: var(--nv-tint); color: var(--nv-gt); font-size: 12px; font-weight: 700; white-space: nowrap; }

/* numbered lists in articles: green number circles */
.cn-prose-read ol:not(ol ol) { list-style: none; counter-reset: cnn; padding: 0 !important; margin: 0 0 1.2em; }
.cn-prose-read ol:not(ol ol) > li { counter-increment: cnn; position: relative; padding-left: 40px; margin: 0 0 14px; }
.cn-prose-read ol:not(ol ol) > li::before { content: counter(cnn); position: absolute; left: 0; top: 1px; width: 28px; height: 28px; border-radius: 50%; background: var(--nv-tint); color: var(--nv-gt); font-weight: 800; font-size: 13px; line-height: 28px; text-align: center; }

/* ================= v6: page margins + bottom reviewer card ================= */
html body.cn-article-page main, html body.cn-review-page main { padding-left: 18px !important; padding-right: 18px !important; }
html body .cn-rd-cover-wrap { margin-left: 0 !important; margin-right: 0 !important; }
html body.cn-review-page #editor { padding: 18px 0 6px !important; }
.cn-rv-by--sec { margin-bottom: 0; }
.cn-rv-note { margin: 12px 0 0 !important; font-size: 13px !important; line-height: 1.6 !important; color: var(--nv-mu) !important; }
.cn-rv-cred { display: block; margin-top: 2px; font-size: 12.5px; color: var(--nv-mu); font-weight: 500; }
@media (min-width: 768px) { html body.cn-article-page main, html body.cn-review-page main { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } }