/* Toolvoro v10.68 — article responsive/readability + inline-list contract.
   Loaded after historical article-local CSS and the CTA hard contract.
   Goal: preserve content/monetization while eliminating mobile card nesting,
   cramped tables, edge-to-edge copy, and redundant desktop sidebar UI. */

/* Layout-only wrappers must never become a giant callout card around other cards. */
.article-body :is(.tv-opening-verdict,.tv-verdict-section,.tv-hero,.tv-hero-section,.hero-and-hook).tv-audience-fit {
  background:transparent!important;
  border:0!important;
  border-left:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0 0 24px!important;
}

@media (max-width:768px) {
  .article-hero { padding-top:clamp(34px,8vw,48px)!important; padding-bottom:24px!important; }
  .article-hero .wrap,
  .article-shell>.wrap {
    width:calc(100% - 28px)!important;
    max-width:none!important;
    padding-inline:0!important;
    margin-inline:14px!important;
    box-sizing:border-box!important;
  }
  .article-title {
    font-size:clamp(1.9rem,8.8vw,2.5rem)!important;
    line-height:1.08!important;
    letter-spacing:-.015em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  .article-summary { font-size:1rem!important; line-height:1.62!important; }
  .article-shell { padding-top:20px!important; padding-bottom:112px!important; }
  .article-layout { display:block!important; }
  .article-body {
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    padding:20px 16px!important;
    border-radius:16px!important;
    overflow:visible!important;
  }
  .article-body h2 {
    font-size:clamp(1.36rem,6.2vw,1.78rem)!important;
    line-height:1.18!important;
    margin-top:32px!important;
    padding-top:16px!important;
    overflow-wrap:normal!important;
  }
  .article-body h3 { font-size:1.08rem!important; line-height:1.3!important; }
  .article-body p,
  .article-body li { font-size:1rem!important; line-height:1.7!important; }
  .article-body ul,
  .article-body ol { padding-left:1.25rem!important; }
  .article-body li+li { margin-top:.42rem; }
  .article-body img,
  .article-body video,
  .article-body iframe { max-width:100%!important; height:auto; }
  .article-body pre { max-width:100%!important; overflow-x:auto!important; -webkit-overflow-scrolling:touch; }
  .article-body :not(pre)>code { overflow-wrap:anywhere; }

  /* Desktop sidebar is intentionally desktop-only. Mobile has the bottom
     affiliate CTA, so repeating the quick-decision/affiliate/TOC rail below
     the article adds clutter without adding value. */
  .article-layout>.side-rail { display:none!important; }

  /* Reduce card-within-card visual density while preserving the meaning and
     all copy. Inner pricing warnings become a compact accent note. */
  .article-body :is(.tv-verdict,.tv-audience-fit,.tv-decision,.tv-method)
    :is(.pricing-warning,.tv-pricing-warning,.pricing-disclaimer) {
    background:transparent!important;
    box-shadow:none!important;
    border:0!important;
    border-left:3px solid var(--tv-accent,var(--accent,#00d084))!important;
    border-radius:0!important;
    padding:8px 0 8px 12px!important;
    margin:14px 0!important;
  }
  .article-body .tv-audience-fit .tv-audience-fit,
  .article-body .tv-verdict .tv-verdict,
  .article-body .tv-decision .tv-decision {
    box-shadow:none!important;
    margin:14px 0!important;
  }

  /* Tables remain semantic tables and scroll horizontally, but do not demand
     an unnecessarily huge canvas on phone screens. */
  .article-body .table-scroll {
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    margin:20px 0!important;
    border-radius:12px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .article-body .table-scroll>table.tv-table { width:100%!important; max-width:none!important; table-layout:auto!important; }
  .article-body .table-scroll>table.tv-table[data-tv-cols="3"] { min-width:540px!important; }
  .article-body .table-scroll>table.tv-table[data-tv-cols="4"] { min-width:680px!important; }
  .article-body .table-scroll>table.tv-table[data-tv-cols="5"],
  .article-body .table-scroll>table.tv-table[data-tv-cols="6"],
  .article-body .table-scroll>table.tv-table[data-tv-cols="7"],
  .article-body .table-scroll>table.tv-table[data-tv-cols="8"] { min-width:820px!important; }
  .article-body .table-scroll>table.tv-table th,
  .article-body .table-scroll>table.tv-table td {
    padding:10px 11px!important;
    font-size:.91rem!important;
    line-height:1.46!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }
  .article-body .table-scroll-hint { font-size:.72rem!important; padding:7px 10px!important; }

  /* Full-width body CTAs read better and are easier to tap on phones. */
  .article-body .tv-contextual-cta { margin:24px 0!important; }
  .article-body .tv-contextual-cta a.tv-cta-button { width:100%!important; max-width:100%!important; }
  .internal-grid,.related-grid { grid-template-columns:1fr!important; }

  /* Keep the bottom affiliate CTA compact and above device safe areas. */
  .sticky-article-cta {
    left:max(8px,env(safe-area-inset-left,0px))!important;
    right:max(8px,env(safe-area-inset-right,0px))!important;
    bottom:max(8px,env(safe-area-inset-bottom,0px))!important;
    width:auto!important;
    max-width:none!important;
    transform:none!important;
    box-sizing:border-box!important;
  }
}

/* When a callout is acting as a layout wrapper around a table, flatten only
   that outer surface on phones. Direct child callouts remain available to
   communicate verdict/audience-fit meaning without squeezing the table twice. */
@media (max-width:768px) {
  @supports selector(:has(*)) {
    .article-body :is(.tv-verdict,.tv-audience-fit,.tv-decision,.tv-method):has(.table-scroll) {
      background:transparent!important;
      border:0!important;
      border-left:0!important;
      border-radius:0!important;
      box-shadow:none!important;
      padding:0!important;
      margin:22px 0!important;
    }
    .article-body :is(.tv-verdict,.tv-audience-fit,.tv-decision,.tv-method):has(.table-scroll)>
      :is(.tv-verdict,.tv-audience-fit,.tv-decision,.tv-method) {
      background:rgba(0,208,132,.08)!important;
      border:1px solid rgba(0,208,132,.24)!important;
      border-left:4px solid var(--tv-accent,var(--accent,#00d084))!important;
      border-radius:13px!important;
      padding:15px 14px!important;
      margin:16px 0!important;
    }
  }
}

@media (max-width:420px) {
  .article-hero .wrap,
  .article-shell>.wrap { width:calc(100% - 20px)!important; margin-inline:10px!important; }
  .article-body { padding:18px 14px!important; }
  .article-title { font-size:clamp(1.82rem,9.4vw,2.25rem)!important; }
}


/* v10.68 — semantic inline list contract.
   Historical article markup frequently places <strong> inside a pros/cons <li>.
   A flex <li> turns each text node and <strong> into separate flex items, which
   produced the three-column word fragmentation seen on narrow iPhones. Keep
   the icon positioned independently and let the sentence use normal inline
   flow on every viewport. */
.article-body .tv-pros li,
.article-body .tv-cons li,
.article-body .tv-checklist li {
  display:block!important;
  position:relative!important;
  min-width:0!important;
  padding:11px 14px 11px 42px!important;
  box-sizing:border-box!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
}
.article-body .tv-pros li::before,
.article-body .tv-cons li::before,
.article-body .tv-checklist li::before {
  position:absolute!important;
  left:14px!important;
  top:11px!important;
  margin:0!important;
  line-height:1.55!important;
}
.article-body .tv-pros li strong,
.article-body .tv-cons li strong,
.article-body .tv-checklist li strong {
  display:inline!important;
  white-space:normal!important;
}
@media (max-width:768px) {
  .article-body .tv-pros,
  .article-body .tv-cons,
  .article-body .tv-checklist {
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .article-body .tv-pros li,
  .article-body .tv-cons li,
  .article-body .tv-checklist li {
    font-size:.98rem!important;
    line-height:1.62!important;
  }
}