/* vgap.css - the verification-layer loop diagrams: the vgap, vg- and mk classes.
   Extracted 2026-09-18 from the inline <style> of verification-layer.html so the
   blog can render the same diagrams from the same source instead of a screenshot.
   Kept inside the page cascade layer for the same reason the inline block was:
   utilities and the type floor must still outrank these rules.
   Loaded by verification-layer.html and by blog/verify-your-hardware-wallet/.
   Edit here, not in either page. */

@layer page {



      /* ---- The verification gap (ported 2026-08-24) ----------------------
         Source page carried its own palette and two Google-Fonts CDN links;
         every value below is a site token so the section themes with the page
         and adds no third-party request. NOT banded on purpose — the
         postulates band above is --surface. */
      .vgap { border-top: 1px solid var(--border); }


      /* One card per row, each card a text column beside its diagram. Side by
         side, the two cards were 426px wide and the stage inside them 376px,
         which is why the diagram labels had to be set at 11.5px and 10.5px —
         the smallest type on the page, in the section that defines the term. */
      .vgap-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-10); }


      .vgap-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-8); display: grid; grid-template-columns: minmax(0, 1fr) 591px; gap: var(--space-10); align-items: center; }


      .vgap-label { font-family: var(--font-mono); font-size: var(--text-meta); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 var(--space-2); }


      /* --status-fail / --status-pass, not the source's own red and green:
         these are the tokens the site already uses for a refusal and a pass,
         and they are the pair that has been contrast-checked on both themes. */
      .vgap-label.bad { color: var(--status-fail); }


      .vgap-label.good { color: var(--status-pass); }


      .vgap-verdict { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 var(--space-4); }


      /* The diagrams are HTML boxes over an SVG arrow layer, not SVG <text>:
         SVG text cannot be edited in place, so every label here is a real
         <p> a human can click and retype. The SVG keeps only the arrows. */
      .vg-stage { position: relative; width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 380 / 320; }


      .vg-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }


      .vg-box { position: absolute; transform: translate(-50%, -50%); width: 200px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; text-align: center; }


      .vg-box.vg-wide { width: 210px; }


      .vg-stage.open { width: 640px; max-width: min(640px, 100%); aspect-ratio: 640 / 496; zoom: 0.924; }


      .vg-top { left: 50.0%; top: 9.7%; width: 31%; }


      .vg-right { left: 81.3%; top: 50.0%; width: 27%; }


      .vg-bottom { left: 50.0%; top: 90.3%; width: 31%; }


      .vg-left { left: 18.8%; top: 50.0%; width: 27%; }


      /* The closed loop carries FIVE boxes (2026-09-06), on an ellipse in a wider 420×320 stage so the two bottom
         boxes do not touch at the ring's foot. Arcs are elliptical (A150,118) and trimmed to each box's edge. */
      /* Both rings render at exactly one width: the arcs are trimmed to box edges that depend on text wrapping,
         so a fluid stage would leave the arrowheads short at any other size (verifier, 2026-09-06). Below 1080px
         the stage may shrink (that rule keeps its own smaller boxes); at ≤560 both become columns. */
      /* Both diagrams are authored at 640×496 and shown at 92.4% (user, 2026-09-06). `zoom` scales boxes, text and
         arrows together, so the arc trims computed at 640 stay exact; the rendered stage is 591×458. */
      .vg-stage.five { width: 640px; max-width: min(640px, 100%); aspect-ratio: 640 / 496; zoom: 0.924; }


      .vg-stage.five .vg-p1 { left: 50.0%; top: 9.7%; width: 27%; transform: translate(-50%, -50%); }


      .vg-stage.five .vg-p2 { left: 79.7%; top: 37.5%; width: 23%; transform: translate(-50%, -50%); }


      .vg-stage.five .vg-p3 { left: 68.4%; top: 82.6%; width: 23%; transform: translate(-50%, -50%); }


      .vg-stage.five .vg-p4 { left: 31.6%; top: 82.6%; width: 23%; transform: translate(-50%, -50%); }


      .vg-stage.five .vg-p5 { left: 20.3%; top: 37.5%; width: 24%; transform: translate(-50%, -50%); }


      .vg-bl { left: 25%; top: 83.5%; width: 225px; }


      .vg-br { left: 75%; top: 83.5%; width: 225px; }


      /* 13px / 12.5px: the page floors at 13px everywhere else, and a 520px
         stage has the room. */
      .vg-t { font-family: var(--font-mono); font-size: var(--text-meta); font-weight: 500; color: var(--text); margin: 0; line-height: 1.35; }


      .vg-s { font-size: 12.5px; color: var(--text-muted); margin: 3px 0 0; line-height: 1.4; text-wrap: pretty; }


      /* Red loop only (user, 2026-09-07): the five sublabels in amber, the loop's one accent; the green loop keeps muted. */
      .vg-stage.five .vg-s { color: var(--accent-link); }


      .vg-centre { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }


      .vg-centre p { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; margin: 0; line-height: 1.55; }


      /* Not vertically centred: the ring's middle row is occupied by the left
         and right boxes, which leave a 57px gap for a 105px label. This band —
         below the top box, above the side boxes — is clear. */
      .vg-centre.bad { top: 50%; }


      .vg-stage.five .vg-centre { left: 50%; top: 50%; width: 200px; }


      .vg-stage.five .vg-centre p { white-space: normal; }


      .vg-centre.bad p { color: var(--status-fail); }


      .vg-centre.good p { color: var(--status-pass); }


      .vg-centre.good { top: 50%; }


      .vgap-cap { font-size: var(--text-small); color: var(--text); line-height: 1.6; margin: 0; max-width: 480px; text-wrap: pretty; }


      .vgap-cap strong { color: var(--text); font-weight: 500; }


      /* Diagram: every fill and stroke is a token, so it inverts with the theme
         instead of staying light-mode ink on a dark card. */
      /* Both rings share one viewBox scale now (640-wide); 2.7 here paints what 1.6 painted in the old 380-wide green box. */
      .vg-edge { fill: none; stroke-width: 2.7; }


      .vg-edge.bad { stroke: var(--status-fail); }


      .vg-edge.good { stroke: var(--status-pass); }


      .mk.bad path { fill: var(--status-fail); }


      .mk.good path { fill: var(--status-pass); }

  @media (max-width: 1080px) {
        .vgap-card { grid-template-columns: 1fr; gap: var(--space-8); }
        .vgap-text { max-width: 660px; }
  }

  @media (max-width: 703px) {
        /* ≤703px: the 591px rendered stage (640 × zoom .924) no longer fits the card (vw − 48 container − 64 padding), and a SCALED ring puts
           the 640-trimmed arrowheads inside the boxes (verifier, 2026-09-06). Ring at 1:1 or column — never a scaled
           ring. Both loops read as a numbered column here: same stops, same order; the ring is implied by the last
           box's caption. */
        .vg-stage.five, .vg-stage.open { aspect-ratio: auto; max-width: none; display: grid; gap: 6px; counter-reset: vgstep; zoom: 1; width: auto; }
        .vg-stage.five .vg-arrows, .vg-stage.five .vg-centre, .vg-stage.open .vg-arrows, .vg-stage.open .vg-centre { display: none; }
        .vg-stage.five .vg-box, .vg-stage.open .vg-box { position: static; transform: none; width: auto; text-align: left; padding: 8px 10px; }
        .vg-stage.five .vg-box .vg-t::before, .vg-stage.open .vg-box .vg-t::before { content: counter(vgstep) "  "; counter-increment: vgstep; }
        .vg-stage.five .vg-box .vg-t::before { color: var(--status-fail); }
        .vg-stage.open .vg-box .vg-t::before { color: var(--status-pass); }
        .vg-stage.five .vg-p5 .vg-s::after { content: " \2192  back to the top"; color: var(--status-fail); }
        .vg-stage.open .vg-left .vg-s::after { content: " \2192  back to the user"; color: var(--status-pass); }
  }

  @media (max-width: 560px) {
        .vgap-card { padding: var(--space-6) var(--space-4); }
        .vg-box { width: 168px; padding: 6px 8px; }
        .vg-box.vg-wide { width: 176px; }
        .vg-right, .vg-left { width: 164px; }
        .vg-bl, .vg-br { width: 168px; }
  }

      /* Blog usage. The post embeds the ring alone: no .vgap-card wrapper and no
         .vgap-text column, so the diagram carries no prose of its own beside the
         post's. .vg-stage caps itself at 520px and centres, so the figure is held
         to the same reading measure as .blog-post and lines up with the prose.
         This is the only rule here that is not shared with verification-layer.html. */
      .vgap-figure { max-width: var(--measure); margin: var(--space-12) 0; }

}