/* Texas Property Protest look for the sign-up portal's /tpp face (lib/tpp-theme.ts is the other half).
   The theme sets colours, type, borders and shadows inline; this file holds what an inline style cannot say:
   the fonts, hover, press, focus, placeholder, the disabled look and the phone breakpoints.
   Linked by src/components/SkinHead.tsx for the /tpp face only, so no other face loads it. Everything sits
   under .tpp-skin, the class the page wrapper carries, and reads the CSS variables the theme sets on that wrapper.
   Same system as texaspropertyprotest.com: 2px ink borders, hard offset shadows, red pills, sun yellow for
   the row or card in use. */

/* The three faces, the same files the site serves (public/fonts/tpp, SIL OFL, see LICENSE.txt there). */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/tpp/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/tpp/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/tpp/dm-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.tpp-skin {
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Keyboard focus: the site's navy ring. */
.tpp-skin a:focus-visible,
.tpp-skin button:focus-visible,
.tpp-skin input:focus-visible,
.tpp-skin summary:focus-visible {
  outline: 3px solid var(--skin-navy-2);
  outline-offset: 3px;
}

/* The red pill. Hover lifts it and darkens the red; press pushes it into its shadow.
   The theme paints the pill inline (so it is right before this file loads), hence the !important on the states. */
.tpp-skin .tpp-btn,
.tpp-skin .tpp-btn-ink,
.tpp-skin .tpp-btn-outline {
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .15s cubic-bezier(.16, 1, .3, 1), box-shadow .15s cubic-bezier(.16, 1, .3, 1), background-color .15s;
}
.tpp-skin .tpp-btn:not(:disabled):hover {
  background: var(--skin-red-d) !important;
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--skin-ink) !important;
}
.tpp-skin .tpp-btn:not(:disabled):active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--skin-ink) !important;
}
/* Disabled and busy: the site's own look (its .cta-submit:disabled), the same pill, border and shadow at opacity .75. The fill is the
   dark red because white text on the plain red at .75 over white is 3.9:1 and on the dark red it is 4.6:1 (the theme says the same inline). */
.tpp-skin .tpp-btn:disabled {
  opacity: .75;
  cursor: not-allowed;
  background: var(--skin-red-d) !important;
  color: #fff !important;
}
/* The site's pills carry no arrow, so the chevron BrandButton draws after the label is not shown here (the spinner is not that svg). */
.tpp-skin button.tpp-btn > svg:last-child:not(.animate-spin) {
  display: none;
}
/* Phones: a slightly smaller pill with less side padding, so "Continue (0 properties)" stays on one line at 390 wide and a label
   that must wrap breaks evenly (the two lines are the same length, not one long and one short). */
@media (max-width: 479px) {
  .tpp-skin .tpp-btn {
    font-size: .9375rem !important;
    letter-spacing: .02em !important;
    line-height: 1.12 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    text-wrap: balance;
  }
  /* The two links on the page after signing are pills too, with a longer label and an icon each: smaller, and the icons keep their size. */
  .tpp-skin a.tpp-btn,
  .tpp-skin a.tpp-btn-ink {
    font-size: .8125rem !important;
    letter-spacing: .01em !important;
    line-height: 1.15 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: .5rem !important;
    text-wrap: balance;
  }
  .tpp-skin a.tpp-btn > svg,
  .tpp-skin a.tpp-btn-ink > svg {
    flex: none;
  }
}
/* The ink button with the red shadow (the site's .cta-submit): it lifts and presses, and keeps its colours. */
.tpp-skin .tpp-btn-ink:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--skin-red) !important;
}
.tpp-skin .tpp-btn-ink:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--skin-red) !important;
}
.tpp-skin .tpp-btn-outline:not(:disabled):hover {
  background: var(--skin-sky-2) !important;
}
.tpp-skin .tpp-btn-outline:not(:disabled):active {
  background: var(--skin-sun) !important;
}

/* Links that are buttons ("Add a property", "Back", "Have a discount code?", the phone number): underline in the site's weight, and a
   tap area of 44px or more that is a transparent layer over the link (not padding), so the layout does not move and the focus ring
   hugs the text instead of a box 30px taller than it. */
.tpp-skin .tpp-link {
  position: relative;
  cursor: pointer;
  touch-action: manipulation;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.tpp-skin .tpp-link::after {
  content: "";
  position: absolute;
  inset: -15px -6px;
}
.tpp-skin .tpp-link:focus-visible {
  border-radius: 6px;
}
.tpp-skin .tpp-link:disabled {
  cursor: not-allowed;
}
.tpp-skin .tpp-link:not(:disabled):hover {
  text-decoration-thickness: 3px;
}

/* Fields: the site's ring on focus (3px navy, 1px off the border) and a placeholder that reads (5.5:1). */
.tpp-skin .tpp-input {
  background-color: #fff;
  text-overflow: ellipsis;
}
.tpp-skin .tpp-input::placeholder {
  color: #5b6985;
  opacity: 1;
}
.tpp-skin .tpp-input:focus {
  outline: 3px solid var(--skin-navy-2);
  outline-offset: 1px;
  box-shadow: none;
}

/* The card form's three short boxes (expiry, security code, ZIP): bottom-aligned, so "Security code" wrapping to two lines on a phone
   does not drop its box below the other two. */
.tpp-skin .tpp-row3 {
  align-items: end;
}

/* The checkbox: ink border, navy when ticked. */
.tpp-skin .tpp-check {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  margin: 0;
  background: #fff center / 16px no-repeat;
  border: 2px solid var(--skin-ink);
  border-radius: 7px;
  cursor: pointer;
  transition: background-color .12s;
}
.tpp-skin .tpp-check:checked {
  background-color: var(--skin-navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 8.4l3.2 3.1 6.4-7'/%3E%3C/svg%3E");
}

/* Address suggestions: rows divided by the site's hairline, sun yellow for the row in use (the theme paints that one). */
.tpp-skin .tpp-opt {
  border-color: var(--skin-rule);
  touch-action: manipulation;
}
.tpp-skin .tpp-opt:hover {
  background-color: var(--skin-sky-2);
}

/* Plan cards: the site's picker. The chosen one sits a pixel up and left of its shadow. */
.tpp-skin .tpp-plan {
  touch-action: manipulation;
  transition: transform .15s cubic-bezier(.16, 1, .3, 1), box-shadow .15s cubic-bezier(.16, 1, .3, 1);
}
.tpp-skin .tpp-plan:not(:disabled):hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--skin-ink) !important;
}
.tpp-skin .tpp-plan[aria-pressed="true"] {
  transform: translate(-1px, -1px);
}

/* The house in the cowboy hat, bottom right of the copy column, beside the steps. It only shows where there is room
   for it next to a 440px steps list: not on a phone, and not in the two-column layout until the column is wide enough. */
.tpp-skin .tpp-art {
  display: none;
  position: absolute;
  right: 0;
  bottom: 4px;
  height: auto;
  pointer-events: none;
  user-select: none;
}
@media (min-width: 700px) and (max-width: 1023px) {
  .tpp-skin .tpp-art { display: block; width: 190px; }
}
@media (min-width: 1188px) {
  .tpp-skin .tpp-art { display: block; width: min(230px, calc(100% - 456px)); }
}

/* Phones: less air above the headline, and the form comes right after it, ahead of the lede and the four steps, so the first field
   is on the first screen. The two wrappers around the copy stop being boxes, which makes the headline, the lede, the steps and the card
   rows of the hero's own grid, and `order` puts the card second. The grid gap replaces the margins. Under 640px only: the picture is
   hidden there, and from 640px the copy keeps its place beside or above the card as before. */
@media (max-width: 639px) {
  .tpp-skin .tpp-hero {
    padding-top: 28px;
    padding-bottom: 40px;
    gap: 28px;
  }
  .tpp-skin .tpp-hero-left,
  .tpp-skin .tpp-hero-copy {
    display: contents;
  }
  .tpp-skin .tpp-hero-copy > h1 {
    order: 0;
    margin-bottom: 0 !important;
  }
  .tpp-skin .tpp-hero-card {
    order: 1;
  }
  .tpp-skin .tpp-hero-copy > p {
    order: 2;
    margin-bottom: 0 !important;
  }
  .tpp-skin .tpp-hero-copy > div {
    order: 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tpp-skin * {
    transition: none !important;
  }
  .tpp-skin .tpp-btn:not(:disabled):hover,
  .tpp-skin .tpp-btn:not(:disabled):active,
  .tpp-skin .tpp-btn-ink:hover,
  .tpp-skin .tpp-btn-ink:active,
  .tpp-skin .tpp-plan:not(:disabled):hover {
    transform: none;
  }
}