/* =====================================================================
   cares.net — base.css
   Shared tokens and components. Link this FIRST, before any page stylesheet:

     <link rel="stylesheet" href="https://www.cares.net/css/base.css">
     <link rel="stylesheet" href="https://www.cares.net/css/qr.css">

   Migration is additive: link base.css everywhere first and nothing changes,
   because each page's own CSS still redefines these and comes later. Then
   delete the duplicated blocks from each page one at a time and the shared
   values take over.
   ===================================================================== */

:root {
  --navy:      #0e2555;
  --blue:      #3d63d4;   /* the site value — qr.css currently says #2f6bf3 */
  --blue-deep: #1746c4;
  --blue-soft: #dbe6ff;
  --blue-wash: #f2f6ff;
  --muted:     #6b7280;
  --line:      #e5e9f0;
  --warn-bg:   #fdf0d5;
  --warn-ink:  #8a5a00;

  --hexclip: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}


/* ---------------------------------------------------------------------
   reset + page
   --------------------------------------------------------------------- */

* { box-sizing: border-box; }
html, body { margin: 0; }

html { scroll-behavior: smooth; }

body {
  color: var(--navy);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* One place for it, rather than four. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .btn-ghost, .submit, .assign-submit,
  .icon-btn, .field input, .toast { transition: none; }
}


/* ---------------------------------------------------------------------
   layout
   --------------------------------------------------------------------- */

/* the site measure — homepage and sign in */
.wrap {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}


/* ---------------------------------------------------------------------
   type
   --------------------------------------------------------------------- */

/* Blue caps means LABEL. Grey means value. Used sparingly so it keeps
   meaning — see the card page for the rule in practice. */
.label,
.kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blue);
}

/* the wordmark, wherever it appears at size */
.mark {
  font-weight: 800;
  letter-spacing: -.025em;
}
.mark span { color: var(--blue); }


/* ---------------------------------------------------------------------
   corner artwork
   Three names for one thing across the pages. Unified here so the
   treatment can only be changed in one place; new pages should use .deco.
   --------------------------------------------------------------------- */

.deco,
.hero-deco,
.page-deco {
  position: absolute;
  top: -10px;
  right: 0;
  width: min(420px, 44%);
  height: auto;
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}


/* ---------------------------------------------------------------------
   hexagon badges — the mechanism only.
   Sizes and fills are per page, because the card, the wallet and the
   homepage all use different ones.

   Two things that are easy to get wrong and are fixed here:
     - clip-path is NOT inherited, so both layers set it explicitly
     - the shadow must sit on an UNCLIPPED wrapper. Rendering order is
       filter then clip-path, so a drop-shadow on the clipped element is
       clipped away and never paints.
   --------------------------------------------------------------------- */

.hex,
.hex-fill {
  display: grid;
  place-items: center;
  clip-path: var(--hexclip);
}
.hex { flex: none; }

.hex-shadow {
  flex: none;
  display: inline-grid;
  filter: drop-shadow(0 0 1px rgba(23,70,196,.22))
          drop-shadow(0 3px 8px rgba(23,70,196,.16));
}


/* ---------------------------------------------------------------------
   buttons
   --------------------------------------------------------------------- */

.btn,
.submit,
.assign-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 18px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(150deg, #4a86f8, var(--blue-deep));
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 7px rgba(23,70,196,.26);
  transition: filter .15s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover, .submit:hover, .assign-submit:hover { filter: brightness(1.06); }
.btn:active, .submit:active, .assign-submit:active { transform: translateY(1px); }
.btn svg, .submit svg { width: 20px; height: 20px; }

/* full width — the form and card-page treatment */
.submit,
.assign-submit,
.btn-block { width: 100%; padding: 14px 18px; font-size: 17px; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border: 1px solid #cbd7ea;
  border-radius: 11px;
  background: #fff;
  color: #3d4a5c;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }

/* quiet text action */
.btn-link {
  display: block;
  margin-top: 11px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
}


/* ---------------------------------------------------------------------
   form fields
   Used by the assign form, the PIN screen and sign in.
   --------------------------------------------------------------------- */

.fields { display: grid; gap: 14px; margin-top: 16px; }

.field { display: flex; flex-direction: column; }

.field label {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #4b5563;
}

.field input {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid #cbd7ea;
  border-radius: 11px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-size: 17px;              /* 16px+ stops iOS zooming the page on focus */
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder { color: #9aa5b4; }
.field input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(61,99,212,.16);
}

/* keyboard focus, everywhere */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}