/* =====================================================================
   Login26.ascx.css - the sign-in page content
   Desktop: headline and "what the club plays" on the left, the sign-in card (with the Swami skimming its top edge) on the right.
   Phone: headline, then the card, then the club strip.
   Shell, colors (--sw-* from cssPalette26.css) and the legal footer are in AuthMaster.master.css / AuthMaster.master.
   Everything is scoped to .au26-* so the older global stylesheets cannot leak in.
   ===================================================================== */

.au26-grid {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  grid-template-areas:
    "head  card"
    "links card";
  column-gap: 56px;
  row-gap: 26px;
  align-items: center;
}
.au26-head      { grid-area: head;  align-self: end; text-align: left; }
.au26-cardwrap  { grid-area: card;  align-self: center; }
.au26-links     { grid-area: links; align-self: start; text-align: left; }

/* ---------- headline ---------- */
.au26-head h1 {
  margin: 0 0 16px;
  font: 700 clamp(44px, 5.8vw, 74px)/.94 var(--sw-font-cond);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--sw-surface);
}
.au26-head h1 em { font-style: normal; color: var(--sw-gold); }
.au26-lede {
  max-width: 30em;
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--sw-on-night-soft);
}

/* ---------- what the club plays, and the public links ---------- */
.au26-links-label {
  margin: 0 0 10px;
  font: 700 12px/1 var(--sw-font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sw-on-night-faint);
}
.au26-games {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 540px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.au26-games li { margin: 0; padding: 0; }
/* each game is a link to its introduction page, which works for visitors and members alike */
.au26-games a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sw-on-night);
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .05s;
}
.au26-games a:hover,
.au26-games a:focus {
  background: color-mix(in srgb, var(--sw-gold) 14%, transparent);
  border-color: color-mix(in srgb, var(--sw-gold) 65%, transparent);
  color: var(--sw-surface);
  text-decoration: none;
}
.au26-games a:focus-visible { outline: 3px solid color-mix(in srgb, var(--sw-gold) 55%, transparent); outline-offset: 2px; }
.au26-games a:active { transform: translateY(1px); }
.au26-games svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--sw-gold);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.au26-more {
  margin: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 14px;
}
.au26-more a { color: var(--sw-on-night); font-weight: 600; text-decoration: none; }
.au26-more a:hover, .au26-more a:focus { color: var(--sw-surface); text-decoration: underline; }

/* ---------- sign-in card ---------- */
/* The Swami (official Swami_Detached art) skims along the top edge of the card. The wrapper leaves room above the card for him;
   his trailing swirl dips --sw-o onto the card. The numbers come from the 836 x 511 source image. */
.au26-cardwrap {
  --sw-w: 350px;                          /* how wide he is drawn */
  --sw-h: calc(var(--sw-w) * 0.6112);     /* 511 / 836 */
  --sw-o: 60px;                           /* how far his swirl dips onto the card */
  position: relative;
  padding-top: calc(var(--sw-h) - var(--sw-o));
}
.au26-mascot {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--sw-w);
  height: auto;
  transform: translateX(-42%);
  z-index: 2;
  pointer-events: none;                   /* never blocks a click on the card */
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45));
}

.au26-card {
  box-sizing: border-box;
  text-align: left;
  background: var(--sw-surface);
  color: var(--sw-ink);
  border-top: 4px solid var(--sw-red);
  border-radius: 16px;
  padding: calc(var(--sw-o) + 20px) 30px 24px;   /* clears the swirl that dips onto the card */
  box-shadow: 0 26px 64px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .25);
}
.au26-eyebrow {
  margin: 0 0 4px;
  font: 700 12px/1 var(--sw-font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sw-red);
}
.au26-card h2 {
  margin: 0 0 4px;
  font: 700 34px/1.05 var(--sw-font-cond);
  letter-spacing: .01em;
  color: var(--sw-navy);
}
.au26-sub { margin: 0 0 20px; font-size: 14px; color: var(--sw-muted); }

.au26-field { margin: 0 0 16px; }
.au26-label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--sw-ink-soft); }
a.au26-link { font-size: 13px; font-weight: 600; color: var(--sw-navy); text-decoration: none; }
a.au26-link:hover, a.au26-link:focus { text-decoration: underline; }
/* "Forgot password?" comes after the password field in the page (so Tab goes user name -> password) but sits in the label row */
.au26-field-pw { position: relative; }
a.au26-forgot { position: absolute; top: 0; right: 0; line-height: 1.5; }

.au26-card input.au26-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 14px;
  font: 400 16px var(--sw-font-sans);   /* 16px keeps phones from zooming in on focus */
  color: var(--sw-ink);
  background: var(--sw-surface);
  border: 1px solid var(--sw-line-strong);
  border-radius: 10px;
  box-shadow: none;
  outline: 0;
  transition: border-color .15s, box-shadow .15s;
}
.au26-card input.au26-input:focus {
  border-color: var(--sw-theme);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sw-theme) 18%, transparent);
}

.au26-pw { position: relative; }
.au26-pw input.au26-input { padding-right: 70px; }
.au26-reveal {
  position: absolute;
  top: 6px;
  right: 6px;
  height: 36px;
  padding: 0 12px;
  font: 600 13px var(--sw-font-sans);
  color: var(--sw-navy);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.au26-reveal:hover { background: var(--sw-panel); }
.au26-reveal:focus-visible { outline: 3px solid color-mix(in srgb, var(--sw-theme) 40%, transparent); }

.au26-hint { display: none; margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--sw-warning); }
.au26-hint.is-on { display: block; }

.au26-check {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0 20px;
  font-size: 14px;
  color: var(--sw-ink-soft);
  cursor: pointer;
}
.au26-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--sw-red); }

/* buttons: the submit input and the "create an account" link share one look */
.au26-card .au26-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0 18px;
  font: 700 16px var(--sw-font-sans);
  text-decoration: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .05s;
}
.au26-card .au26-btn:active { transform: translateY(1px); }
.au26-card .au26-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--sw-theme) 45%, transparent); outline-offset: 2px; }

.au26-card .au26-btn-primary {
  color: var(--sw-surface);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sw-red) 92%, white), color-mix(in srgb, var(--sw-red) 82%, black));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--sw-red) 35%, transparent);
}
.au26-card .au26-btn-primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--sw-red) 82%, white), var(--sw-red)); }
.au26-card .au26-btn-primary.is-busy { opacity: .7; cursor: progress; }

.au26-card .au26-btn-ghost {
  color: var(--sw-navy);
  background: var(--sw-surface);
  border: 1.5px solid var(--sw-line-strong);
}
.au26-card a.au26-btn-ghost:hover,
.au26-card a.au26-btn-ghost:focus { color: var(--sw-navy); background: var(--sw-panel); text-decoration: none; }

.au26-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 12px;
  font-size: 13px;
  color: var(--sw-faint);
}
.au26-or::before, .au26-or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--sw-line); }

.au26-small { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--sw-muted); }
.au26-small a { font-weight: 600; color: var(--sw-navy); }

/* error message above the fields */
.au26-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--sw-danger);
  background: var(--sw-danger-bg);
  border: 1px solid color-mix(in srgb, var(--sw-danger) 35%, transparent);
  border-radius: 10px;
}
.au26-alert::before {
  content: "!";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  font: 700 13px/20px var(--sw-font-sans);
  text-align: center;
  color: var(--sw-surface);
  background: var(--sw-danger);
  border-radius: 50%;
}

/* ---------- narrower screens ---------- */
@media (max-width: 900px) {
  .au26-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "card"
      "links";
    row-gap: 22px;
    max-width: 540px;
    margin: 0 auto;
  }
  .au26-head, .au26-links { text-align: center; }
  .au26-lede { margin-left: auto; margin-right: auto; }
  .au26-games { margin: 0 auto; }
  .au26-more { justify-content: center; }
}
@media (max-width: 640px) {
  .au26-head h1 { margin-bottom: 8px; font-size: 40px; }
  .au26-lede { font-size: 16px; }
  .au26-cardwrap { --sw-w: 290px; --sw-o: 50px; }
  .au26-card { padding: calc(var(--sw-o) + 18px) 20px 22px; border-radius: 14px; }
  .au26-card h2 { font-size: 30px; }
}