.yr-auth {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 28px clamp(20px, 6vw, 96px);
  background-image: url('../img/mountain.webp?v=2');
  background-size: cover;
  background-position: center right;   /* keep the mascot in frame on the right */
  background-repeat: no-repeat;
}
/* gentle light lift behind the card so dark text stays AA-legible
   without killing the bright, snowy feel of the photo */
.yr-auth::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(244,249,255,0.34) 0%, rgba(244,249,255,0.12) 40%, rgba(244,249,255,0) 62%);
}
.yr-auth > * { position: relative; z-index: 1; }

.yr-auth-panel { width: 100%; max-width: 680px; }

/* ── The frosted login card ── */
.yr-auth-card {
  position: relative;
  background: rgba(255,255,255,0.58);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 26px;
  padding: 34px 34px 26px;
  box-shadow:
    0 22px 55px -16px rgba(16,40,67,0.40),
    inset 0 1px 0 rgba(255,255,255,0.75);
  animation: yr-card-in 0.6s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes yr-card-in { from { opacity: 0; transform: translateY(16px) scale(.99); } to { opacity: 1; transform: none; } }
/* graceful fallback where backdrop-filter is unsupported */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .yr-auth-card { background: rgba(255,255,255,0.93); }
}

/* ── Card header: wordmark + welcome ── */
.yr-card-head { text-align: center; margin-bottom: 22px; }
.ta-wordmark { display: block; width: auto; height: 30px; margin: 0 auto 16px; }
.ta-wordmark .ta-blue  { fill: #1d9ed9; }
.ta-wordmark .ta-green { fill: #69b54a; }
.yr-auth-title {
  font-family: 'Nunito', 'Lexend Deca', sans-serif; font-weight: 800;
  font-size: clamp(26px, 3vw, 32px); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--yr-text-primary);
}
.yr-auth-sub {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.5px; color: var(--yr-text-secondary); margin-top: 7px;
}
.yr-auth-sub svg { width: 15px; height: 15px; color: var(--yr-blue); }

/* staggered entrance for inner blocks */
.yr-reveal { opacity: 0; transform: translateY(9px); animation: yr-rise 0.5s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes yr-rise { to { opacity: 1; transform: translateY(0); } }

/* ── SSO buttons (stacked, full width) ── */
/* Horizontal 4-up row by default; collapses to a stack only on narrow
   (phone) widths — see the (max-width: 599px) block below. */
.yr-sso-stack { display: flex; flex-direction: row; gap: 9px; }
.yr-sso-btn {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 11px 10px;
  background: #fff; border: 1px solid rgba(120,140,160,0.28);
  border-radius: 14px; cursor: pointer;
  font-family: var(--yr-font); font-size: 14.5px; font-weight: 600; color: var(--yr-text-primary);
  box-shadow: 0 2px 8px rgba(16,40,67,0.10);
  transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap; touch-action: manipulation;
}
.yr-sso-btn .yr-sso-ico { flex-shrink: 0; width: 22px; height: 22px; object-fit: contain; transition: transform 0.18s ease; }
.yr-sso-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16,40,67,0.16); background: #fff; }
.yr-sso-btn:hover .yr-sso-ico { transform: scale(1.08); }
.yr-sso-btn:active { transform: translateY(0); }
.yr-sso-btn[data-provider="google"]:hover    { border-color: #4285F4; }
.yr-sso-btn[data-provider="microsoft"]:hover  { border-color: #7a7a7a; }
.yr-sso-btn[data-provider="clever"]:hover     { border-color: #436CF7; }
.yr-sso-btn[data-provider="classlink"]:hover  { border-color: #ED7000; }

/* ── OR divider ── */
.yr-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 6px; }
.yr-or::before, .yr-or::after { content: ""; flex: 1; height: 1px; background: rgba(30,45,61,0.18); }
.yr-or span { font-size: 12px; font-weight: 600; color: var(--yr-text-secondary); }

/* ── Form fields (icon-led, frosted inputs) ── */
.yr-field { margin-top: 12px; }
.yr-input-wrap { position: relative; }
.yr-input-lead {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: auto; height: 19px; color: var(--yr-text-muted); pointer-events: none;
}
.yr-input {
  width: 100%; height: 50px; padding: 12px 14px 12px 44px;
  font-family: var(--yr-font); font-size: 16px; color: var(--yr-text-primary);
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(120,140,160,0.34); border-radius: 13px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; -webkit-appearance: none; appearance: none;
}
.yr-input::placeholder { color: #6a7c8c; }
.yr-input:hover { border-color: rgba(120,140,160,0.55); }
.yr-input:focus { outline: none; background: #fff; border-color: var(--yr-blue); box-shadow: 0 0 0 3.5px var(--yr-blue-light); }
.yr-input:focus + .yr-input-lead,
.yr-input-wrap:focus-within .yr-input-lead { color: var(--yr-blue); }
.yr-input.has-affix { padding-right: 46px; }
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .yr-input { background: rgba(255,255,255,0.95); }
}

/* password reveal / affix */
.yr-input-affix {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 40px; height: 40px; border: none; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: 9px;
  color: var(--yr-text-muted); transition: color 0.15s, background 0.15s; touch-action: manipulation;
}
.yr-input-affix:hover { color: var(--yr-text-primary); background: rgba(30,45,61,0.06); }
.yr-input-affix svg { width: 19px; height: 19px; }
.yr-input-affix .yr-eye-off { display: none; }
.yr-input-affix[aria-pressed="true"] .yr-eye-on { display: none; }
.yr-input-affix[aria-pressed="true"] .yr-eye-off { display: block; }

/* errors + caps-lock */
.yr-field-error { display: none; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--yr-danger); margin-top: 7px; }
.yr-field-error svg { width: 14px; height: 14px; flex-shrink: 0; }
.yr-field.has-error .yr-input { border-color: var(--yr-danger); box-shadow: 0 0 0 3.5px var(--yr-danger-bg); }
.yr-field.has-error .yr-field-error { display: flex; }
.yr-caps { display: none; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #9a4a00; margin-top: 7px; }
.yr-caps.show { display: flex; }
.yr-caps svg { width: 14px; height: 14px; flex-shrink: 0; }

/* collapsible domain field (auto-hides when username is an email) */
.yr-collapse { overflow: hidden; max-height: 160px; opacity: 1; padding: 0 5px 5px; margin: 0 -5px; transition: max-height 0.3s ease, opacity 0.22s ease 0.04s, margin-top 0.3s ease; }
.yr-collapse.collapsed { max-height: 0; opacity: 0; margin-top: 0; pointer-events: none; }
.yr-email-note { display: none; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 13px; border-radius: 12px; background: rgba(231,243,252,0.85); border: 1px solid rgba(18,160,221,0.35); color: #0a5c84; font-size: 12.5px; font-weight: 600; }
.yr-email-note.show { display: flex; }
.yr-email-note svg { width: 15px; height: 15px; flex-shrink: 0; }

/* keep-signed-in */
.yr-check { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--yr-text-secondary); cursor: pointer; user-select: none; min-height: 24px; margin-top: 16px; }
.yr-check input {
  appearance: none; -webkit-appearance: none; position: relative; flex-shrink: 0;
  width: 18px; height: 18px; margin: 0; border: 1.5px solid rgba(120,140,160,0.6);
  border-radius: 5px; background: rgba(255,255,255,0.7); cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.yr-check input:checked { background: var(--yr-blue); border-color: var(--yr-blue); }
.yr-check input:checked::after {
  content: ""; position: absolute; left: 5px; top: 2px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.yr-check input:focus-visible { outline: 2px solid var(--yr-focus-ring); outline-offset: 2px; }

/* ── Submit (brand-blue gradient, full width) ── */
.yr-btn-block { width: 100%; justify-content: center; margin-top: 16px; }
.yr-auth-card .yr-btn-block {
  background: linear-gradient(180deg, #1494d0 0%, #0f80b4 100%);
  border: none; color: #fff; border-radius: 13px;
  font-size: 19px; font-weight: 700;   /* large text (≥18.66px bold) → 3:1 contrast bar lets the brighter blue pass AA */
  box-shadow: 0 9px 22px -7px rgba(18,160,221,0.65);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.yr-auth-card .yr-btn-block:hover { transform: translateY(-1px); box-shadow: 0 13px 26px -8px rgba(18,160,221,0.7); filter: brightness(1.03); }
.yr-auth-card .yr-btn-block:active { transform: translateY(0); }
.yr-auth-card .yr-btn-block:disabled { transform: none; box-shadow: none; opacity: 0.85; cursor: default; filter: none; }

/* ── Card footer: forgot · need help ── */
.yr-security-entry { margin-top: 12px; text-align: center; }
.yr-security-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; max-width: 100%; border: 1px solid rgba(10,92,132,.35); border-radius: 10px; color: #06405e; font-size: 14px; font-weight: 700; line-height: 1.4; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.yr-security-link:hover { background: rgba(255,255,255,.7); color: #032d43; }
.yr-setup-audience { margin-top: 8px; color: var(--yr-text-secondary); font-size: 13px; }
body.ya-high-contrast .yr-security-link { background: #fff; color: #111; border-color: #111; }
.yr-card-foot { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; }
.yr-foot-link {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: none; padding: 0;
  font-family: var(--yr-font); font-size: 13px; font-weight: 600; color: #0a5c84; text-decoration: none; cursor: pointer; touch-action: manipulation;
}
.yr-foot-link svg { width: auto; height: 15px; }
.yr-foot-link:hover { text-decoration: underline; }

/* ── Meta line: sign-up · legal row: privacy / terms / accessibility ── */
.yr-auth-meta, .yr-auth-legal { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; color: var(--yr-text-secondary); }
.yr-auth-meta { margin-top: 16px; }
.yr-auth-legal { margin-top: 8px; }
.yr-auth-meta a, .yr-auth-legal a { color: #0a5c84; font-weight: 700; text-decoration: none; }
.yr-auth-meta a:hover, .yr-auth-legal a:hover { text-decoration: underline; }
.yr-auth-legal button {
  color: var(--yr-text-secondary); font-family: var(--yr-font); font-size: 12.5px; font-weight: 500;
  background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 4px; border-radius: 6px; touch-action: manipulation;
}
.yr-auth-legal button:hover { color: #0a5c84; }
.yr-auth-legal button svg { width: auto; height: 16px; }
.yr-auth-meta .yr-dot, .yr-auth-legal .yr-dot { color: rgba(30,45,61,0.3); }


.yr-yeti-logo{width:150px;max-width:100%;height:auto;margin:0 auto 18px;display:block}
.yr-auth-title{overflow-wrap:anywhere}.yr-auth-card{background:rgba(255,255,255,.58)}
.yr-field label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.yr-input{padding-left:44px}.yr-input-affix{width:40px}.yr-input.has-affix{padding-right:46px} #domain{padding-left:16px}
.yr-auth-card .yr-btn-block{min-height:50px;margin-top:22px}
.yr-error{margin:16px 0;padding:12px;border:1px solid #a01209;border-radius:10px;background:#fff1f0;color:#8b160d;overflow-wrap:anywhere}
.yr-portal-logo{max-width:180px;max-height:60px;margin:0 auto 12px;display:block}
.yr-auth.is-portal{background-image:linear-gradient(135deg,#d7effb,#eff8ff 50%,#dcf0db);justify-content:center}
.yr-skip-link{position:absolute;top:8px;left:8px;z-index:10;transform:translateY(-200%);padding:12px;background:#fff;color:#06405e}
.yr-skip-link:focus{transform:none}
.yr-auth a:focus-visible,.yr-auth button:focus-visible{outline:3px solid #06405e;outline-offset:3px}
@media(max-width:900px){.yr-auth{padding:24px}.yr-auth-panel{max-width:580px}}
@media(max-width:599px){.yr-auth{padding:16px;background-position:70% center}.yr-auth-card{padding:24px 18px;border-radius:20px}.yr-sso-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.yr-auth-panel{max-width:none}.yr-auth-sub{font-size:14px}}
@media(prefers-reduced-motion:reduce){.yr-auth-card,.yr-reveal{animation:none;opacity:1;transform:none}.yr-auth *{transition:none}}
body.ya-high-contrast .yr-auth-card{background:#fff;border:2px solid #111;backdrop-filter:none}
body.ya-high-contrast .yr-input,body.ya-high-contrast .yr-sso-btn{background:#fff;color:#111;border:2px solid #111}
body.ya-high-contrast .yr-auth-card .yr-btn-block{background:#06405e;color:#fff}
body.ya-reduce-motion .yr-auth-card{animation:none}
@media(forced-colors:active){.yr-auth-card,.yr-input,.yr-sso-btn,.yr-btn-block{border:2px solid CanvasText}}

.yr-field label.yr-sr-only {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.yr-snowflake {color:#009fda;font-size:20px}
.yr-auth-meta + .yr-auth-meta {margin-top:10px}
.ya-launcher {display:none!important}
.yr-card-foot {flex-wrap:wrap}
body.ya-reduce-motion .yr-collapse {transition:none}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))) {.yr-auth-card{background:rgba(255,255,255,.95)}}