/* ═══════════════════════════════════════════════════════════════
   §L — LOGIN / AUTH SCREEN  ·  Frosted-glass over full-bleed photo
   Single unified sign-in. Built on kit tokens. The Report Kit ships
   no form-input vocabulary yet, so .yr-field / .yr-input / .yr-sso-*
   below are the new pieces — kit-promotion candidates (v1.4.1 path).
   PREVIEW: the background photo is inlined as a data: URI so the
   mockup is self-contained. In the Yii2 view, swap it for
   background-image: url('/img/loginscreen.webp');
   ═══════════════════════════════════════════════════════════════ */

/* ── Full-bleed stage: mascot photo + the card column on the left ── */
.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/loginscreen.webp');
  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-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); }

/* ── Accessibility modal: force Lexend (form controls don't inherit font) ── */
.yr-a11y-overlay, .yr-a11y-overlay * { font-family: var(--yr-font), 'Lexend Deca', sans-serif; }

/* ── Password-reset modal ── */
.yr-modal-overlay {
  position: fixed; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center; padding: 20px;
  background: rgba(16,40,67,0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.yr-modal-overlay.open { display: flex; animation: yr-overlay-in 0.2s ease; }
@keyframes yr-overlay-in { from { opacity: 0; } to { opacity: 1; } }
.yr-modal {
  width: 100%; max-width: 420px; background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.7); border-radius: 22px;
  box-shadow: 0 30px 70px -20px rgba(16,40,67,0.55); padding: 26px 26px 24px;
  animation: yr-modal-in 0.26s cubic-bezier(.2,.7,.3,1);
}
@keyframes yr-modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .yr-modal { background: #fff; }
}
.yr-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.yr-modal-head h2 { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -0.01em; color: var(--yr-text-primary); display: inline-flex; align-items: center; gap: 9px; }
.yr-modal-head h2 svg { width: auto; height: 21px; color: var(--yr-blue); }
.yr-modal-close { flex-shrink: 0; width: 34px; height: 34px; border: none; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; color: var(--yr-text-muted); transition: background 0.15s, color 0.15s; touch-action: manipulation; }
.yr-modal-close:hover { background: rgba(30,45,61,0.06); color: var(--yr-text-primary); }
.yr-modal-close svg { width: 18px; height: 18px; }
.yr-modal-sub { font-size: 13.5px; color: var(--yr-text-secondary); line-height: 1.5; margin-bottom: 18px; }
.yr-modal .yr-field { margin-top: 0; margin-bottom: 16px; }
.yr-modal .yr-btn-block {
  background: linear-gradient(180deg, #1494d0 0%, #0f80b4 100%); border: none; color: #fff; border-radius: 13px;
  font-size: 19px; font-weight: 700;
  box-shadow: 0 9px 22px -7px rgba(18,160,221,0.6); transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.yr-modal .yr-btn-block:hover { transform: translateY(-1px); filter: brightness(1.03); }
.yr-modal .yr-btn-block:active { transform: translateY(0); }
.yr-modal .yr-btn-block:disabled { transform: none; box-shadow: none; opacity: 0.85; cursor: default; filter: none; }
.yr-modal-success { display: none; align-items: flex-start; gap: 9px; padding: 14px 16px; border-radius: 13px; background: var(--yr-green-light, #edf5e8); border: 1px solid rgba(105,182,75,0.4); color: #2f6a23; font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.yr-modal-success.show { display: flex; }
.yr-modal-success svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--yr-green, #69b64b); }
@media (prefers-reduced-motion: reduce) { .yr-modal-overlay.open, .yr-modal { animation: none; } }
body.yr-reduced-motion .yr-modal-overlay.open, body.yr-reduced-motion .yr-modal { animation: none; }

/* ── Phones (narrow): center the card, narrow it, and stack the SSO buttons.
      Everything wider keeps the horizontal 4-up row. ── */
@media (max-width: 599px) {
  .yr-auth { justify-content: center; padding: 22px; background-position: 72% center; }
  .yr-auth::before { background: linear-gradient(180deg, rgba(244,249,255,0.30) 0%, rgba(244,249,255,0.10) 50%, rgba(244,249,255,0.18) 100%); }
  .yr-auth-panel { max-width: 440px; }
  .yr-sso-stack { flex-direction: column; gap: 10px; }
  .yr-sso-btn { flex: none; }
}
@media (max-width: 400px) {
  .yr-auth-card { padding: 26px 22px 22px; border-radius: 22px; }
}

/* ── Short viewports (Chromebook 1366×768, laptop landscape): fit without scroll ── */
@media (max-height: 800px) {
  .yr-auth { padding-top: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .yr-auth-card { padding: 24px 30px 20px; }
  .yr-card-head { margin-bottom: 16px; }
  .ta-wordmark { height: 27px; margin-bottom: 12px; }
  .yr-auth-title { font-size: 25px; }
  .yr-auth-sub { margin-top: 5px; }
  .yr-sso-stack { gap: 8px; }
  .yr-sso-btn { min-height: 44px; }
  .yr-or { margin: 14px 0 2px; }
  .yr-field { margin-top: 10px; }
  .yr-input { height: 44px; }
  .yr-email-note { margin-top: 10px; padding: 8px 12px; }
  .yr-check { margin-top: 12px; }
  .yr-btn-block { margin-top: 14px; }
  .yr-card-foot { margin-top: 14px; }
  .yr-auth-meta { margin-top: 12px; }
  .yr-auth-legal { margin-top: 6px; }
}

/* honor reduced-motion (kit also covers this globally) */
@media (prefers-reduced-motion: reduce) {
  .yr-reveal { animation: none; opacity: 1; transform: none; }
  .yr-auth-card { animation: none; }
}
body.yr-reduced-motion .yr-reveal { animation: none; opacity: 1; transform: none; }
body.yr-reduced-motion .yr-auth-card { animation: none; }

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY MODES — login + popups respond to the kit toggles
   (these classes are added to <body> by YR.initAccessibility)
   ═══════════════════════════════════════════════════════════════ */

/* ── High Contrast: photo stays, but card / fields / buttons / popups
      switch to solid surfaces with strong borders and dark text. ── */
body.yr-high-contrast .yr-auth::before { background: rgba(255,255,255,0.55); }
body.yr-high-contrast .yr-auth-card {
  background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 2px solid #1e2d3d; box-shadow: 0 0 0 4px rgba(255,255,255,0.55);
}
body.yr-high-contrast .yr-auth-title,
body.yr-high-contrast .yr-auth-sub { color: #1e2d3d; }
body.yr-high-contrast .yr-auth-sub svg { color: #0a5c84; }
body.yr-high-contrast .yr-sso-btn { background: #fff; border: 2px solid #1e2d3d; color: #1e2d3d; box-shadow: none; }
body.yr-high-contrast .yr-sso-btn:hover { border-color: #0a5c84; }
body.yr-high-contrast .yr-or span { color: #1e2d3d; }
body.yr-high-contrast .yr-or::before, body.yr-high-contrast .yr-or::after { background: #1e2d3d; }
body.yr-high-contrast .yr-input { background: #fff; border: 2px solid #1e2d3d; color: #1e2d3d; }
body.yr-high-contrast .yr-input::placeholder { color: #44525f; }
body.yr-high-contrast .yr-input-lead,
body.yr-high-contrast .yr-input-affix { color: #1e2d3d; }
body.yr-high-contrast .yr-input:focus { border-color: #0a5c84; box-shadow: 0 0 0 3px #0a5c84; }
body.yr-high-contrast .yr-check { color: #1e2d3d; }
body.yr-high-contrast .yr-check input { border: 2px solid #1e2d3d; background: #fff; }
body.yr-high-contrast .yr-check input:checked { background: #0a5c84; border-color: #0a5c84; }
body.yr-high-contrast .yr-auth-card .yr-btn-block,
body.yr-high-contrast .yr-modal .yr-btn-block { background: #0a5c84; border: 2px solid #052e44; color: #fff; box-shadow: none; }
body.yr-high-contrast .yr-foot-link,
body.yr-high-contrast .yr-auth-meta a,
body.yr-high-contrast .yr-auth-legal a { color: #06405e; text-decoration: underline; }
body.yr-high-contrast .yr-auth-meta,
body.yr-high-contrast .yr-auth-legal,
body.yr-high-contrast .yr-auth-legal button { color: #1e2d3d; }
body.yr-high-contrast .yr-email-note { background: #fff; border: 2px solid #06405e; color: #06405e; }
/* popups */
body.yr-high-contrast .yr-modal-overlay { background: rgba(0,0,0,0.78); }
body.yr-high-contrast .yr-modal {
  background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border: 2px solid #1e2d3d;
}
body.yr-high-contrast .yr-modal-head h2,
body.yr-high-contrast .yr-modal-sub,
body.yr-high-contrast .yr-modal-close { color: #1e2d3d; }
body.yr-high-contrast .yr-modal-head h2 svg { color: #0a5c84; }

/* ── Larger Text: scales every piece of login + popup text. Layout
      reflows (headings wrap, buttons grow); inputs keep their height. ── */
body.yr-large-text .yr-auth-title { font-size: clamp(28px, 3.4vw, 36px); }
body.yr-large-text .yr-auth-sub { font-size: 16px; }
body.yr-large-text .yr-sso-btn { font-size: 16px; }
body.yr-large-text .yr-or span { font-size: 13.5px; }
body.yr-large-text .yr-input { font-size: 18px; }
body.yr-large-text .yr-field-error,
body.yr-large-text .yr-caps,
body.yr-large-text .yr-email-note { font-size: 13.5px; }
body.yr-large-text .yr-check { font-size: 15px; }
body.yr-large-text .yr-foot-link { font-size: 14.5px; }
body.yr-large-text .yr-auth-meta,
body.yr-large-text .yr-auth-legal,
body.yr-large-text .yr-auth-legal button { font-size: 14px; }
body.yr-large-text .yr-modal-head h2 { font-size: 23px; }
body.yr-large-text .yr-modal-sub { font-size: 15px; }
body.yr-large-text .yr-btn-block { font-size: 21px; }
body.yr-large-text .yr-modal-success { font-size: 15px; }

/* ── High-contrast: push the status colors to their strongest passing shade. ── */
body.yr-high-contrast .yr-field-error { color: #a01209; }
body.yr-high-contrast .yr-caps { color: #8a3f00; }

/* ── Forced-colors / Windows High Contrast Mode: keep structure visible when
      the OS strips backgrounds, shadows, and gradients (WCAG 2.2 robustness). ── */
@media (forced-colors: active) {
  .yr-auth-card, .yr-input, .yr-sso-btn, .yr-modal,
  .yr-auth-card .yr-btn-block, .yr-modal .yr-btn-block { border: 1px solid CanvasText; }
  .yr-auth-card .yr-btn-block, .yr-modal .yr-btn-block { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .yr-check input:checked { background: Highlight; }
  .yr-input:focus,
  .yr-sso-btn:focus-visible, .yr-btn-block:focus-visible,
  .yr-foot-link:focus-visible, .yr-modal-close:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* ── Underline Links (body.yr-underline-links) — kit accessibility toggle.
      Generic anchors are covered platform-wide; these extra selectors catch
      the login's link-styled buttons (Forgot password, Accessibility) and
      the footer links so the whole set underlines together. ── */
body.yr-underline-links a,
body.yr-underline-links .yr-foot-link,
body.yr-underline-links .yr-auth-meta a,
body.yr-underline-links .yr-auth-legal a,
body.yr-underline-links .yr-auth-legal button { text-decoration: underline; text-underline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════
   §L-PORTAL — School portal variant
   On a district subdomain the same snowy scene is used but WITHOUT the
   Shiver mascot, the card centers, and the school's NAME replaces the
   "Welcome back" heading. The district bg_color / text_color / logo
   settings are intentionally NOT used here.
   ═══════════════════════════════════════════════════════════════ */
.yr-auth.is-portal {
  justify-content: center;
  background-image: url('../img/loginscreen-portal.webp');
  background-position: center;
}
/* Centered card → a uniform light lift (instead of the left-weighted one)
   keeps the dark text AA-legible over the photo. */
.yr-auth.is-portal::before {
  background: linear-gradient(180deg, rgba(244,249,255,0.34) 0%, rgba(244,249,255,0.12) 50%, rgba(244,249,255,0.30) 100%);
}
body.yr-high-contrast .yr-auth.is-portal::before { background: rgba(255,255,255,0.55); }

/* Portal-only route into the class name + picture-password flow. */
.yr-simple-signin {
  margin-top: 14px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(29, 158, 217, .28);
  border-radius: 10px;
  color: var(--yr-text-secondary);
  font-size: 12px;
  background: rgba(238, 249, 253, .7);
}
.yr-simple-signin-icon { color: var(--yr-blue); font-weight: 800; letter-spacing: 1px; }
.yr-simple-signin strong { display: block; color: var(--yr-text-primary); }
.yr-simple-signin a { color: var(--yr-blue-dark); font-weight: 700; }
body.yr-high-contrast .yr-simple-signin {
  border: 2px solid #06405e;
  color: #1e2d3d;
  background: #fff;
}