/* Styling for the MySolicitor capture form grafted into the mirrored /claims page.
 *
 * WHY NOT JUST LOAD site.css:
 * the previous build's stylesheet carries global rules (body, *, html, a, h1-h3, img,
 * :root) that would fight YourSolicitor's Tailwind bundle — different body font, different
 * heading scale, different link colour. So only the form's own classes are reproduced here,
 * every one of them scoped under #ms-claim-form so nothing can leak into the mirrored page.
 *
 * Palette matches YS exactly: navy #0a0f0d, teal #35e08a (the same pair YS passes to its
 * own Ratifi embed as primary=1e2235&button=5bbcbd).
 *
 * 🔴 .hp IS THE HONEYPOT. Without a rule hiding it the page renders a visible
 *    "Leave this empty" text box — which both confuses real users and destroys the only
 *    thing stopping scripted junk reaching the capture table. It rendered visible on the
 *    first mirror build. Never ship this file without it.
 */
#ms-claim-form {
  --ms-navy: #0a0f0d;
  --ms-teal: #35e08a;
  --ms-teal-dk: #16824e;
  --ms-line: #e3e6ea;
  --ms-muted: #6b7280;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--ms-navy);
}

/* --- honeypot: must never be visible or focusable --- */
#ms-claim-form .hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- card chrome --- */
#ms-claim-form .card__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; }
#ms-claim-form .card__eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ms-teal-dk); }
#ms-claim-form .card__step { font-size: .75rem; font-weight: 700; color: var(--ms-muted); }
#ms-claim-form .card__q { font-family: 'Outfit', sans-serif; font-size: 1.3rem; font-weight: 800; line-height: 1.25; margin: 0 0 1rem; }

#ms-claim-form .progress { height: 6px; border-radius: 999px; background: #eef1f4; overflow: hidden; margin-bottom: 1.15rem; }
#ms-claim-form .progress > * { display: block; height: 100%; background: var(--ms-teal); transition: width .3s ease; }

/* --- steps: only the active one is shown (site.js toggles .is-active) --- */
#ms-claim-form .step { display: none; }
#ms-claim-form .step.is-active { display: block; }

/* --- choices --- */
#ms-claim-form .choices { display: grid; gap: .6rem; }
#ms-claim-form .choices--two { grid-template-columns: 1fr 1fr; }
#ms-claim-form .choices--grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 420px) { #ms-claim-form .choices--two, #ms-claim-form .choices--grid { grid-template-columns: 1fr; } }
#ms-claim-form .choice {
  appearance: none; cursor: pointer; width: 100%;
  padding: .95rem 1rem; border-radius: .8rem; border: 1.5px solid var(--ms-teal);
  background: var(--ms-teal); color: #06210a; font-weight: 700; font-size: 1rem;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
#ms-claim-form .choice:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(53,224,138,.35); }
#ms-claim-form .choice--ghost { background: transparent; color: var(--ms-navy); border-color: var(--ms-line); }
#ms-claim-form .choice--ghost:hover { border-color: var(--ms-teal); box-shadow: none; }

/* --- fields --- */
#ms-claim-form .field { display: block; margin-bottom: .75rem; }
#ms-claim-form .field input {
  width: 100%; padding: .8rem .9rem; font: inherit; color: var(--ms-navy);
  border: 1.5px solid var(--ms-line); border-radius: .65rem; background: #fff;
}
#ms-claim-form .field input:focus-visible { outline: none; border-color: var(--ms-teal); box-shadow: 0 0 0 3px rgba(53,224,138,.25); }

#ms-claim-form .consent { display: flex; gap: .55rem; align-items: flex-start; font-size: .86rem; line-height: 1.45; color: var(--ms-muted); margin: .5rem 0 1rem; }
#ms-claim-form .consent input { margin-top: .2rem; flex: 0 0 auto; }

#ms-claim-form .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  cursor: pointer; border: none; border-radius: .8rem; padding: 1rem 1.2rem;
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.02rem;
}
#ms-claim-form .btn--green { background: var(--ms-teal); color: #06210a; }
#ms-claim-form .btn--green:hover { background: var(--ms-teal-dk); }
#ms-claim-form .btn--block { width: 100%; }

#ms-claim-form .link-back { background: none; border: none; cursor: pointer; padding: .55rem 0 0; font: inherit; font-size: .85rem; color: var(--ms-muted); text-decoration: underline; }
#ms-claim-form .form-note { font-size: .78rem; color: var(--ms-muted); text-align: center; margin-top: .85rem; }
#ms-claim-form .form-error { display: none; margin-top: .7rem; padding: .6rem .8rem; border-radius: .55rem; background: #fdecec; color: #8a1c1c; font-size: .86rem; }
#ms-claim-form .form-error.is-visible { display: block; }

/* 🔴 Scroll-reveal must never hide content when JavaScript does not run, when the page is
   printed, or for a reader who prefers reduced motion. YourSolicitor ships 62 homepage
   elements at opacity:0 awaiting an `in-view` class from its React IntersectionObserver;
   that bundle is stripped here. mirror.js re-adds the class, but these rules mean the copy
   is readable even if it never gets the chance to. Compliance must be able to read the
   whole page — an invisible disclaimer is not a disclaimer. */
@media print { .fade-up { opacity: 1 !important; transform: none !important; } }
@media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1 !important; transform: none !important; } }

/* ─────────────────────────────────────────────────────────────────────────────────────
   Utilities that Tailwind never compiled, because YourSolicitor never used them.

   🔴 ys.css is a PURGED build. Only the classes YS actually wrote exist in it. Inventing
   a Tailwind-looking class name therefore produces markup with NO styling at all, and it
   fails silently — the page renders, it just renders wrong. That happened twice in one
   session on 2026-08-14: `text-teal-light` made a required disclaimer near-invisible on
   the dark panel, and the two below left the comparison table with no grid template
   after the DIY column was removed at the client's request.

   Rule for this project: new markup uses INLINE styles, and anything that genuinely
   needs to be a class gets defined here first. verify-mirror.py gate 10 now fails the
   build on any class used in the HTML that is not defined in one of our stylesheets.

   These two reproduce exactly what Tailwind would have emitted for the two-column
   version of the "Why do it alone when we handle everything?" table.
   ───────────────────────────────────────────────────────────────────────────────────── */
.grid-cols-\[1fr_120px\]      { grid-template-columns: 1fr 120px; }
@media (min-width: 768px) {
  .md\:grid-cols-\[1fr_170px\] { grid-template-columns: 1fr 170px; }
}

/* The exit pop-up's disclaimer block. The client's reviewer asked for the * and **
   footnotes to be INSIDE the pop-up rather than in the page footer behind its backdrop.
   That is a lot of text in a fixed, vertically-centred modal, so it scrolls — but how
   much can be shown at once depends on the viewport, and an inline style cannot carry a
   media query. Taller screens get more of it visible without scrolling. */
.ms-popup-notes { max-height: 132px; overflow-y: auto; padding-right: 8px;
                  font-size: 10.5px; line-height: 1.5; color: #9aa4bd; }
@media (min-height: 760px)  { .ms-popup-notes { max-height: 200px; } }
@media (min-height: 900px)  { .ms-popup-notes { max-height: 280px; } }