/* @gwdapps/design-system — shared GWD SSO sign-in button
   Served at https://sso.gwd.app/theme/v1/signin-button.css and shipped as a
   byte copy inside client apps as a local fallback. Standalone: it does NOT
   need a brand bundle.

   It is the GWD SSO button, not a brand button: the WHOLE button is GWD orange
   for every brand (#f68a1f, hover #ff9b3d, active #d9740f) with ink text, like
   .gwd-btn-primary in gwd.css. data-brand only tunes the focus ring.

   Canonical markup (INTEGRATIONS.md §4.6):
     <a class="gwd-signin-btn" data-brand="csca" href="/auth/sso/start"
        aria-label="Sign in with your Graphic Web Design account">
       <span class="gwd-signin-btn__label">Sign in</span>
       <span class="gwd-signin-btn__strap" aria-hidden="true">
         <img class="gwd-signin-btn__mark" src="…/gwd-mark.svg" alt="" width="12" height="12">
         <span class="gwd-signin-btn__caption">Graphic Web Design<sup>&reg;</sup> SSO</span>
       </span>
     </a>
   <button type="submit" class="gwd-signin-btn"> is the form variant.
   .gwd-signin-btn--on-dark: white focus ring for buttons on dark surfaces.

   Contrast (WCAG 2.x): ink #1a1a1a on #f68a1f = 7.1:1 (white would be 2.45:1),
   on hover #ff9b3d = 8.3:1, on active #d9740f = 5.4:1; the strap is
   rgba(0,0,0,.14) over the orange (= #d4771b) and ink on it = 5.4:1 — all AA. */

.gwd-signin-btn {
  --gwd-signin-bg: #f68a1f;
  --gwd-signin-bg-hover: #ff9b3d;
  --gwd-signin-bg-active: #d9740f;
  --gwd-signin-fg: #1a1a1a;
  --gwd-signin-strap-bg: rgba(0, 0, 0, 0.14);
  --gwd-signin-strap-fg: #1a1a1a;
  --gwd-signin-focus: #ff9b3d;
  --gwd-signin-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--gwd-signin-bg);
  color: var(--gwd-signin-fg);
  border: 0;
  border-radius: var(--gwd-signin-radius);
  font: inherit;
  font-family: var(--gwd-font-stack, inherit);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.gwd-signin-btn:hover { background: var(--gwd-signin-bg-hover); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); text-decoration: none; }
.gwd-signin-btn:active { background: var(--gwd-signin-bg-active); transform: translateY(1px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.gwd-signin-btn:focus { outline: none; }
.gwd-signin-btn:focus-visible { outline: 3px solid var(--gwd-signin-focus); outline-offset: 2px; }
.gwd-signin-btn:disabled,
.gwd-signin-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* Label row: the 44px touch target. Colour is set here (not inherited) so a
   host page's `a { color }` rules cannot recolour the button text. */
.gwd-signin-btn__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  color: var(--gwd-signin-fg);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
}

/* Strap: the "Graphic Web Design ® SSO" row inside the button — the whole
   point, people learn that their login is a GWD account. Same orange,
   darkened by a translucent overlay so it reads as a distinct row. */
.gwd-signin-btn__strap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 20px;
  padding: 3px 10px 4px;
  background: var(--gwd-signin-strap-bg);
  color: var(--gwd-signin-strap-fg);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
/* The caption is ONE flex item (mark + caption are the only two), so the flex
   gap never splits "Design" from its ®: the ® sits directly after the "n". */
.gwd-signin-btn__caption { display: inline; letter-spacing: 0; }
.gwd-signin-btn__caption sup { margin: 0; padding: 0 0 0 .05em; font-size: .7em; line-height: 0; vertical-align: super; }
/* The mark is an orange tile with a white G; the SVG carries its own 1px ring
   so it stays visible on the orange strap (the box-shadow backs that up for
   the PNG fallbacks). */
.gwd-signin-btn__mark { display: block; flex: none; width: 12px; height: 12px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }

/* Brand hooks tune ONLY the focus ring (the button itself is always GWD
   orange). Dark brand pages: the brand highlight; csca's light page: navy
   (the brand teal #5CB6C7 is only 2.3:1 on white). */
.gwd-signin-btn[data-brand="gwd"]        { --gwd-signin-focus: #ff9b3d; }
.gwd-signin-btn[data-brand="webconex"]   { --gwd-signin-focus: #7dd3fc; }
.gwd-signin-btn[data-brand="melody-ave"] { --gwd-signin-focus: #d8b4fe; }
.gwd-signin-btn[data-brand="peach"]      { --gwd-signin-focus: #ff9a33; }
.gwd-signin-btn[data-brand="csca"]       { --gwd-signin-focus: #14334C; }
/* treasure-health: their headline teal #159f9c is 3.25:1 on white, which
   clears the 3:1 bar for a focus ring but leaves no margin; #0b8f8c is
   3.95:1 and still unmistakably theirs. */
.gwd-signin-btn[data-brand="treasure-health"] { --gwd-signin-focus: #0b8f8c; }

/* On a dark surface a coloured ring can vanish; use white.

   Listed twice on purpose. The per-brand rules above are (0,2,0) — a class
   plus an attribute — so a lone .gwd-signin-btn--on-dark at (0,1,0) LOSES to
   them, and every canonical button carries data-brand. The result was that
   --on-dark silently never changed the ring on any real button; only its
   box-shadow applied. The [data-brand] arm matches that specificity and wins
   on source order; the bare arm still covers a brandless button, which the
   qualified selector cannot match. */
.gwd-signin-btn--on-dark,
.gwd-signin-btn--on-dark[data-brand] { --gwd-signin-focus: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }

@media (prefers-reduced-motion: reduce) {
  .gwd-signin-btn { transition: none; }
  .gwd-signin-btn:active { transform: none; }
}
@media (forced-colors: active) {
  .gwd-signin-btn { border: 1px solid ButtonText; }
  .gwd-signin-btn__strap { border-top: 1px solid ButtonText; }
}

/* ── Footnote under the button ─────────────────────────────────────────
   "Not registered yet? Get Started." Ships with the button rather than in
   each app, because four consumers had already invented four incompatible
   treatments of this line (gwd-sso .small-link, duplicated across eight
   views; gwd-up .login-hint, which is only styled under the csca tenant so
   every other tenant renders it bare; csca-aquarium a Tailwind <p>;
   gwd-chat-ios a native style). A fifth reinvention is not defensible now
   that the link is a permanent part of every sign-in surface.

   NAME: deliberately NOT containing the substring "gwd-signin-btn".
   csca-aquarium's LoginPageTest asserts assertDontSee('gwd-signin-btn')
   when SSO is switched off; a BEM-style gwd-signin-btn__note would fail
   that test the moment the footnote rendered in the flag-off branch.

   Colours are set explicitly so a host page's `a { color: … }` cannot
   recolour the link — the same reasoning as the button's own label. */
.gwd-signin-note {
  --gwd-signin-note-fg: #6b7280;
  --gwd-signin-note-link: #b45309;
  --gwd-signin-note-focus: var(--gwd-signin-focus, #ff9b3d);
  /* 20, not 12: the button's bottom strap is a filled band, so the note needs
     more clearance than it would under a plain button or it reads as part of
     the button's own chrome. */
  margin: 20px 0 0;
  font-family: var(--gwd-font-stack, inherit);
  font-size: 12.5px;
  line-height: 1.5;
  /* Centred on the element itself, not inherited: host pages left-align their
     card text, and this line belongs to the button, not to the card's copy. */
  text-align: center;
  color: var(--gwd-signin-note-fg);
}
.gwd-signin-note a {
  color: var(--gwd-signin-note-link);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: 3px;
}
.gwd-signin-note a:hover { color: #92400e; }
.gwd-signin-note a:focus { outline: none; }
.gwd-signin-note a:focus-visible {
  outline: 3px solid var(--gwd-signin-note-focus);
  outline-offset: 2px;
}

/* Dark surfaces: #6b7280 on near-black is about 3.9:1, under AA for body
   text. These are measured on the #1e1e23 card the dark brands use. */
.gwd-signin-note--on-dark {
  --gwd-signin-note-fg: rgba(255, 255, 255, 0.62);
  --gwd-signin-note-link: #ffb262;
  --gwd-signin-note-focus: #ffffff;
}
.gwd-signin-note--on-dark a:hover { color: #ffd0a0; }

@media (forced-colors: active) {
  .gwd-signin-note a { text-decoration: underline; }
}