/* ============================================================
   VerityLoft — BRIDGE  (vl-bridge.css)

   Makes the articles you have already published adopt the Layer 3
   look WITHOUT editing a single one of them.

   Enqueue AFTER vl-base.css and vl-article.css. It is a separate
   file on purpose: delete it and every old article snaps back to
   exactly how it looks today. Nothing else depends on it.

   HOW IT WORKS. Your published reviews are wrapped in
   .vl-article and use vla- class names. This file re-styles those
   names in the Layer 3 visual language, scoped under .vl-article
   so it can reach nothing else. Every rule scores 0,2,0 against
   the 0,1,0 of the originals in vl-base.css sections 8 and 9, so
   it wins without needing !important and without you deleting
   anything.

   WHAT IT CANNOT DO. It restyles what already exists. It cannot
   invent the comp line, the invisible-tax ledger, the floor and
   ceiling, or the exit route, because those are measurements, not
   markup. Old articles gain the look. They gain the substance
   only when you sit down and write those sections.

   No angle brackets anywhere, so the save will not be rejected.
   ============================================================ */

/* --- 0. Tokens -------------------------------------------------
   The same palette vl-article.css declares on .vl-review, so both
   families of class name resolve identically. */
.vl-article {
  --vlr-navy:    var(--vl-blue,      #1E293B);
  --vlr-gold:    var(--vl-gold,      #DDB849);
  --vlr-goldink: var(--vl-gold-ink,  #7A5F1A);
  --vlr-wash:    var(--vl-gold-wash, #FBF3DC);
  --vlr-rule:    var(--vl-rule,      #D8D3C8);
  --vlr-muted:   var(--vl-muted,     #5C6472);
  --vlr-ink:     var(--vl-graphite,  #333333);
  --vlr-pass:    #2F6F52;
  --vlr-fail:    #9A4B3F;
  --vlr-partial: #8A6512;

  container-type: inline-size;
}


/* --- 1. Masthead ----------------------------------------------- */
.vl-article .vla-eyebrow {
  display: block;
  margin-bottom: .4rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vlr-goldink);
}

.vl-article .vla-dateline {
  margin: 0 0 1.2rem;
  font-size: .82rem;
  color: var(--vlr-muted);
}

.vl-article .vla-disclosure {
  margin: 0 0 1.6rem;
  padding: .7rem 1rem;
  background: var(--vlr-wash);
  border: 1px solid rgba(122, 95, 26, .22);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--vlr-navy);
  text-indent: 0;
}

.vl-article .vla-disclosure a {
  color: var(--vlr-goldink);
}


/* --- 2. Verdict card ------------------------------------------
   Same shape as .vl-review__verdict: dial on the left, argument
   on the right, gold rule across the top. */
.vl-article .vla-verdict {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.2rem 1.6rem;
  align-items: start;
  margin: 1.8rem 0 2rem;
  padding: 1.4rem 1.5rem;
  background: #fff;
  border: 1px solid var(--vlr-rule);
  border-top: 3px solid var(--vlr-gold);
  border-radius: 10px;
}

.vl-article .vla-product {
  display: grid;
  justify-items: center;
  gap: .7rem;
}

.vl-article .vla-dial {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
}

.vl-article .vla-dial svg {
  transform: rotate(-90deg);
}

.vl-article .vla-track {
  fill: none;
  stroke: rgba(30, 41, 59, .12);
  stroke-width: 9;
}

/* NOTE ON THE MATHS. Your dial uses r=56, the new one uses r=54,
   so the circumference differs and the two cannot share a number.
   At r=56 it is 2 times pi times 56, which is 351.858. The new
   layer uses 339.292 for r=54. Do not copy one into the other. */
.vl-article .vla-arc {
  fill: none;
  stroke: var(--vlr-gold);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: calc(var(--vla-score, 0) / 5 * 351.858) 351.858;
}

.vl-article .vla-dial__value {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1.05;
}

.vl-article .vla-dial__num {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--vlr-navy);
  font-variant-numeric: tabular-nums;
}

.vl-article .vla-dial__den {
  margin-top: .15rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vlr-muted);
}

.vl-article .vla-pill {
  display: inline-block;
  padding: .25rem .7rem;
  background: var(--vlr-wash);
  border: 1px solid rgba(122, 95, 26, .3);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--vlr-goldink);
  text-align: center;
}


/* --- 3. The four-point summary --------------------------------
   Your vla-points list is the closest thing the old articles have
   to the new key-facts block, so it gets the same treatment: one
   fact per row, the lead-in set apart, rules between. */
.vl-article .vla-points {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--vlr-rule);
}

.vl-article .vla-points li {
  padding: .6rem 0;
  border-bottom: 1px solid var(--vlr-rule);
  font-size: .92rem;
  line-height: 1.55;
  text-indent: 0;
}

.vl-article .vla-points strong {
  display: block;
  margin-bottom: .1rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vlr-muted);
}


/* --- 4. Call to action ----------------------------------------- */
.vl-article .vla-cta {
  display: inline-block;
  min-height: 44px;
  margin-top: 1.1rem;
  padding: .7rem 1.4rem;
  background: var(--vlr-gold);
  color: var(--vlr-navy);
  border-radius: 6px;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
  transition: background .15s ease;
}

.vl-article .vla-cta:hover {
  background: #C9A63B;
}

.vl-article .vla-cta:focus-visible {
  outline: 2px solid var(--vlr-navy);
  outline-offset: 2px;
}

/* Inside the verdict card the button is the third grid child, so
   it lands under the dial in column one with a stack of empty
   space above it. Put it under the argument instead, where the
   reader's eye already is. */
.vl-article .vla-verdict .vla-cta {
  grid-column: 2;
  justify-self: start;
  margin-top: .2rem;
}


/* --- 5. Score line and notices --------------------------------- */
.vl-article .vla-score-line {
  margin: 0 0 .8rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vlr-goldink);
  text-indent: 0;
}

.vl-article .vla-notice {
  margin: 1.5rem 0;
  padding: .9rem 1.1rem;
  background: #fff;
  border: 1px solid var(--vlr-rule);
  border-left: 4px solid var(--vlr-partial);
  border-radius: 0 6px 6px 0;
}

.vl-article .vla-notice p {
  margin: 0;
  font-size: .92rem;
  text-indent: 0;
}


/* --- 6. Tables -------------------------------------------------
   Matched to .vl-claims: navy rule under the head, hairlines
   between rows, no vertical lines, figures on tabular numerals so
   columns of prices line up. */
.vl-article .vla-table-wrap {
  margin: 1.6rem 0;
  overflow-x: auto;
}

.vl-article .vla-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.vl-article .vla-table-wrap th,
.vl-article .vla-table-wrap td {
  padding: .6rem .7rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--vlr-rule);
}

.vl-article .vla-table-wrap thead th {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vlr-muted);
  border-bottom: 1px solid var(--vlr-navy);
  white-space: nowrap;
}

.vl-article .vla-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vl-article .vla-winner {
  font-weight: 700;
  color: var(--vlr-pass);
}


/* --- 7. Pros and cons ------------------------------------------
   The old panels become the new buy-it-if and skip-it-if columns:
   same grid, same green and red top rules, same uppercase heads.
   This is the one place where an old article ends up looking
   identical to a new one. */
.vl-article .vla-proscons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.8rem 0;
}

.vl-article .vla-panel {
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px solid var(--vlr-rule);
  border-radius: 8px;
}

.vl-article .vla-panel.is-pro { border-top: 3px solid var(--vlr-pass); }
.vl-article .vla-panel.is-con { border-top: 3px solid var(--vlr-fail); }

.vl-article .vla-panel h3 {
  margin: 0 0 .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.vl-article .vla-panel.is-pro h3 { color: var(--vlr-pass); }
.vl-article .vla-panel.is-con h3 { color: var(--vlr-fail); }

.vl-article .vla-panel ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: .92rem;
}

.vl-article .vla-panel li {
  margin-bottom: .35rem;
}


/* --- 8. Inline code -------------------------------------------- */
.vl-article code {
  padding: .1em .35em;
  background: rgba(30, 41, 59, .06);
  border-radius: 3px;
  font-size: .88em;
}


/* --- 9. Narrow widths -----------------------------------------
   Container queries, matching vl-article.css, so the old articles
   reflow inside the block editor iframe as well as on a phone. */
@container (max-width: 640px) {
  /* Stack the card, centre the dial and the chip, and leave the
     prose alone. Centring a four-item list of full sentences is
     the classic mobile mistake: it looks tidy in a mockup and is
     genuinely harder to read line by line. */
  .vl-article .vla-verdict {
    grid-template-columns: 1fr;
  }
  .vl-article .vla-product {
    justify-self: center;
  }
  .vl-article .vla-points {
    text-align: left;
  }
  .vl-article .vla-verdict .vla-cta {
    grid-column: 1;
    justify-self: center;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 640px) {
    .vl-article .vla-verdict { grid-template-columns: 1fr; }
    .vl-article .vla-product { justify-self: center; }
    .vl-article .vla-verdict .vla-cta { grid-column: 1; justify-self: center; }
  }
}


/* ============================================================
   ONE THING TO FIX IN THE MARKUP, WHEN YOU HAVE A MINUTE

   Your affiliate links carry no rel attribute:

       a class="vla-cta" href="https://tidd.ly/46g59eN"

   vl-base.js adds sponsored, nofollow and noopener at runtime, so
   this is handled for Googlebot, which renders JavaScript. It is
   NOT handled for the language-model crawlers, which do not, and
   it is not handled for anyone auditing your page source during
   an affiliate application. Write it into the markup:

       rel="sponsored nofollow noopener"

   Ten links, five minutes, and it stops being a question anyone
   can raise. Leave vl-base.js doing its job as the safety net for
   links you forget.
   ============================================================ */