/* ============================================================================
   PassGMC landing ports (§92.5.11, E109): where the app's global CSS still
   reaches into a design build, put the browser's own behaviour back.

   The design's stylesheets are unlayered, so they already beat Tailwind's
   preflight and app/globals.css (both in cascade layers) wherever they set a
   property. These resets sit in the SAME `base` layer as those app rules: they
   win over them on specificity, and every unlayered design rule still wins over
   them. Never edit globals.css for a port.
   ========================================================================== */

@layer base {
  /* The app draws its focus ring as a box-shadow; the design draws its own outline
     (themed per ground). Without this a focused control shows both. */
  [data-lp-variant] :focus-visible {
    box-shadow: none;
  }

  /* Preflight zeroes every input's padding and makes form controls inherit the
     body's letter-spacing; the build has the browser defaults (1px 2px, normal).
     A design rule that sets either still wins (.btn sets its own tracking). */
  [data-lp-variant] input {
    padding: revert;
  }
  [data-lp-variant] :is(input, button, select, textarea) {
    letter-spacing: revert;
  }

  /* Preflight strips every list's markers; the build keeps the browser's (B's
     numbered fix steps, FOUND BY E110's harness). A design that sets list-style
     on a list still wins. */
  [data-lp-variant] :is(ol, ul, menu) {
    list-style: revert;
  }

  /* Preflight makes the tap highlight transparent; the build keeps the default. */
  [data-lp-variant] {
    -webkit-tap-highlight-color: initial;
  }

  /* A — the testimonial initials, for a card with no avatar: the card's own 56 px
     circle (night-shift.css, .tcard figcaption img), as the homepage draws it. */
  [data-lp-variant="a"] .lp-initials {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--line-200);
    border-radius: 50%;
    background: var(--fill-100);
    color: var(--slate-500);
    font: 600 13px/1 var(--sc-font-mono);
  }

  /* B — the same monogram in B's review circle (live-report.css, .review__who img),
     in B's own mono font. */
  [data-lp-variant="b"] .lp-initials {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--line-200);
    border-radius: 50%;
    background: var(--fill-100);
    color: var(--slate-500);
    font: 600 13px/1 var(--font-mono);
  }

  /* B — the two pack buttons are links here (§92.5.15.4, a full page load to
     /signin). The build's <button> had the browser's letter-spacing (normal); a
     link inherits the body's tracking. */
  [data-lp-variant="b"] .tier a.btn--primary {
    letter-spacing: normal;
  }

  /* C — preflight sets `vertical-align: middle` on every image and svg; the build has
     the browser's baseline. It shows where C draws an image inline: the phone
     layout's logo capsule (.brand img, inline-block) stood 7.8 px shorter (FOUND BY
     E111's audit). */
  [data-lp-variant="c"] :is(img, svg, video, canvas, audio, iframe, embed, object) {
    vertical-align: revert;
  }

  /* C — the same monogram in C's 56 px avatar circle (c.css, .avatar: its 1 px
     ring is a box-shadow), in C's mono font. */
  [data-lp-variant="c"] .lp-initials {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--line-200);
    background: var(--fill-100);
    color: var(--slate-500);
    font: 600 13px/1 var(--sc-font-mono);
  }
}

/* Tailwind scans the design files too, so a design class that is also a utility
   name gets the utility. C's beat-6 panel is `.collapse`, and Tailwind's `collapse`
   (visibility: collapse) hid it (FOUND BY E111's tests). Utilities sit in a later
   layer than base, so this reset sits in that layer; C's unlayered CSS still wins. */
@layer utilities {
  [data-lp-variant="c"] .collapse {
    visibility: revert;
  }
}

/* §92.6.5 (E112) — A's and B's pages: the root layout's "Skip to content"
   (<body>'s direct child) stays invisible when focused there, because the designs'
   unlayered .sr-only beats Tailwind's layered focus:not-sr-only. Each design has
   its own visible skip link as its first stop (A → #hero-url, B → #main-content,
   inside the variant div), so the app's duplicate goes, on those pages only. C has
   no skip link and keeps the app's. A browser without :has() keeps today's page.
   Unlayered, unlike the resets above: no layered app rule can bring the link back. */
body:has([data-lp-variant="a"], [data-lp-variant="b"]) > a[href="#main-content"] {
  display: none;
}