/* ============================================================================
   Editorial AUTH — PLATFORM THEME (owner-approved Login.dc.html / Register.dc.html)
   Login  : glass card centered on a forest-aurora band.
   Register: light aurora hero + paper form card + forest perks card.
   Both pages render inside the public shell (website.layouts.app → market
   ticker, glass masthead, forest footer). Tokens, the shared @keyframes
   catalog (edRise/edFloat/edFloatUp/edRotate/edLogo/edNudge/edSheen/edGrad/
   edCtaGlow/edPulse…) and JS hooks ([data-mag], [data-dust], .reveal,
   .ea-submit ripple) come from assets/website/css|js/editorial.css|js.
   Scope: everything here lives under .ed-authpg.
   PERF GUARDRAILS (site froze before — do not regress):
   - no background-attachment: fixed
   - aurora/conic glows ship STATIC (no infinite animation of large painted areas)
   - clipped-text gradients ship STATIC (never animate background-position there)
   - every animation/keyframe sits inside prefers-reduced-motion: no-preference
   ==========================================================================*/

/* ---------------------------------------------------------------- shared -- */
.ed-authpg .ath-field { margin-bottom: 16px; text-align: start; }
.ed-authpg .ath-lbl { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: 8px; }
[dir="rtl"] .ed-authpg .ath-lbl { letter-spacing: .04em; }
.ed-authpg .ath-in { width: 100%; box-sizing: border-box; border-radius: 9px; padding: 13px 16px;
  font-size: 14px; font-family: inherit; outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color .25s ease, box-shadow .25s ease; }
.ed-authpg .ath-err { display: block; margin-top: .5rem; font-size: .8rem; font-weight: 600; color: #C0392B; }
.ed-authpg .ath-alert { border: 1px solid rgba(216,193,130,.55); background: rgba(235,216,164,.14);
  color: inherit; border-radius: 9px; padding: .8rem 1rem; font-size: .85rem; margin-bottom: 1.1rem; text-align: start; }

/* password wrap + eye toggle */
.ed-authpg .ath-pw { position: relative; }
.ed-authpg .ath-pw .ath-in { padding-inline-end: 46px; }
.ed-authpg .ath-eye { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 8px;
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 0; background: none; padding: 0; cursor: pointer; opacity: .75; transition: opacity .18s ease; }
.ed-authpg .ath-eye:hover { opacity: 1; }
.ed-authpg .ath-eye .i-hide { display: none; }
.ed-authpg .ath-eye.on .i-show { display: none; }
.ed-authpg .ath-eye.on .i-hide { display: block; }

/* gold-gradient submit (ripple + overflow come from editorial.css .ea-submit hook) */
.ed-authpg .ea-submit { position: relative; overflow: hidden; display: inline-flex; align-items: center;
  justify-content: center; border: 0; cursor: pointer;
  background: linear-gradient(100deg,#B08D45,#E4CB90,#B08C3F,#D3B871); background-size: 260% 100%;
  color: #241A05; font-family: var(--ed-sans); font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; padding: 15px 30px; border-radius: var(--r-cta, 9px);
  box-shadow: 0 12px 26px rgba(166,125,46,.32); transition: filter .2s ease; }
.ed-authpg .ea-submit:hover, .ed-authpg .ea-submit:focus { filter: brightness(1.07); color: #241A05; }
[dir="rtl"] .ed-authpg .ea-submit { letter-spacing: .04em; font-size: .85rem; }
.ed-authpg .ath-arrow { display: inline-block; margin-inline-start: 10px; }
[dir="rtl"] .ed-authpg .ath-arrow { transform: scaleX(-1); }
.ed-authpg .ea-sheen { position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  transform: translateX(-160%);
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent); pointer-events: none; }

/* floating serif currency glyphs (small, decorative) */
.ed-authpg .flup { position: absolute; bottom: -40px; font-family: var(--ed-serif); pointer-events: none; opacity: 0; }
.ed-authpg .fl1 { inset-inline-start: 16%; font-size: 34px; }
.ed-authpg .fl2 { inset-inline-start: 28%; font-size: 32px; }
.ed-authpg .fl3 { inset-inline-end: 30%; font-size: 36px; }
.ed-authpg .fl4 { inset-inline-end: 20%; font-size: 30px; }

/* ------------------------------------------------- LOGIN — glass on forest -- */
.ath-login { position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(64px, 9vw, 92px) 24px clamp(72px, 10vw, 104px);
  background:
    radial-gradient(70% 120% at 90% 8%, rgba(203,170,99,.2) 0%, transparent 60%),
    linear-gradient(135deg, #16241B 0%, #1C2A20 50%, #22352A 100%); }
.ed-dark .ath-login { background:
    radial-gradient(70% 120% at 90% 8%, rgba(203,170,99,.16) 0%, transparent 60%),
    linear-gradient(135deg, #0D1710 0%, #111C14 50%, #16261B 100%); }
.ath-login .grid { position: absolute; inset: -2px; pointer-events: none;
  background-image:
    linear-gradient(rgba(216,193,130,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,193,130,.09) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(110% 100% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(110% 100% at 50% 0%, #000 0%, transparent 78%); }
/* aurora glow — STATIC by design (perf guardrail: no big-area infinite anims) */
.ath-login .aur { position: absolute; left: 50%; top: 40%; width: 600px; height: 600px;
  margin: -300px 0 0 -300px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(203,170,99,0), rgba(203,170,99,.22), rgba(62,90,69,.14), rgba(203,170,99,0));
  filter: blur(48px); }
.ath-login canvas[data-dust] { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ath-login .ring { position: absolute; inset-inline-start: 12%; top: 18%; width: 150px; height: 150px; pointer-events: none; }
.ath-login .ring i { display: block; width: 100%; height: 100%; border: 1px dashed rgba(228,203,144,.4); border-radius: 50%; }
.ath-login .flup { color: rgba(216,193,130,.28); }
.ath-login .co { position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #E3CE96, #B08C3F); }
.ath-login .co1 { inset-inline-end: 10%; top: 16%; width: 28px; height: 28px; opacity: .5; }
.ath-login .co2 { inset-inline-start: 9%; bottom: 20%; width: 16px; height: 16px; opacity: .4; }
.ath-login .co3 { inset-inline-end: 14%; bottom: 30%; width: 32px; height: 32px; opacity: .6;
  background: radial-gradient(circle at 35% 30%, #E9D9A8, #C9A758 55%, #8F6D2A);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 10px 22px rgba(0,0,0,.35); }

/* glass card (no infinite bob: transform anims force backdrop-filter re-blur) */
.ath-card { position: relative; z-index: 1; max-width: 430px; margin: 0 auto; text-align: center;
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(216,193,130,.35); border-radius: 18px; padding: 38px 34px;
  box-shadow: 0 30px 70px rgba(0,0,0,.4); }
.ath-card .ath-logo img { height: 52px; width: auto; filter: drop-shadow(0 4px 12px rgba(203,170,99,.4)); }
/* (0,2,0) — must outrank `.ed :is(h1..h6){color:inherit}` (0,1,1) in editorial.css,
   which was winning and repainting this heading in --ink on the dark forest panel.
   Kept before the [dir="rtl"] rule below so the Arabic override still applies. */
.ed .ath-hi,
.ath-hi { margin: 18px 0 0; font-family: var(--ed-serif); font-weight: 400; font-size: 32px;
  letter-spacing: -.01em; color: #F5F2E8; }
[dir="rtl"] .ath-hi { font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: 0; }
/* display-gold emphasis — STATIC clipped gradient (perf guardrail) */
.ath-hi .ea-em { font-style: italic;
  background: var(--gold-grad-shine, linear-gradient(110deg,#B08D45 0%,#E4CB90 30%,#CBAA63 55%,#F0DFAE 75%,#B08D45 100%));
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }
[dir="rtl"] .ath-hi .ea-em { font-style: normal; }
/* On the dark forest panel this ran at 70% opacity and 13.5px — technically
   present, practically unreadable. Brighter, larger, and the field labels lifted
   with it: this is the first screen a paying student sees. */
/* White, and specific enough to keep it.
   The login page renders inside .ed, and brand-almostasmer.css carries
   `.ed p { color: inherit }` — a type selector, so it outranks a single class and the
   paragraph fell back to the card's dark ink on a dark forest panel. Raising the
   specificity here is the fix; .ath-sub alone loses that fight every time. */
.ed .ath-sub,
.ath-card .ath-sub,
.ath-sub { margin: 10px 0 26px; font-size: 15px; line-height: 1.75; color: #FFFFFF !important; }

.ath-login .ath-lbl { color: #E7D29A; font-size: 11.5px; font-weight: 700; }
.ath-login .ath-in { background: rgba(255,255,255,.08); border: 1px solid rgba(216,193,130,.35); color: #F3EFE3; }
.ath-login .ath-in:focus { border-color: #E4CB90; box-shadow: 0 0 0 3px rgba(203,170,99,.22); }
/* rgba(243,239,227,.45) composited to #888C83 on the dark card ground #313B34 —
   3.39:1 in dark and 3.10:1 in light, because this card is dark in BOTH themes.
   The hint telling someone what to type was the least legible thing on the form.
   --on-forest-mut is the palette's muted-on-forest token, resolves to #C9BF9F in
   both themes, and measures 6.33:1 dark / 5.30:1 light; the typed value stays at
   10.17:1 so the two do not read alike. */
.ath-login .ath-in::placeholder { color: var(--on-forest-mut, #C9BF9F); }
.ath-login .ath-in:-webkit-autofill { -webkit-text-fill-color: #F3EFE3; caret-color: #F3EFE3;
  -webkit-box-shadow: 0 0 0 1000px #24352A inset; }
.ath-login .ath-eye { color: rgba(216,193,130,.85); }
.ath-login .ath-err { color: #F2A48F; }
.ath-login .ath-alert { color: #F3EFE3; }

.ath-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 2px 0 22px; font-size: 13px; }
.ath-remember { display: inline-flex; align-items: center; gap: .5rem; color: rgba(243,239,227,.75);
  cursor: pointer; margin: 0; font-weight: 400; }
.ath-remember input { width: 15px; height: 15px; accent-color: #CBAA63; cursor: pointer; margin: 0; }
.ath-row a { color: #EBD8A4; text-decoration: none; }
.ath-row a:hover { color: #F5F2E8; }

.ath-login .ea-submit { width: 100%; }
.ath-login .ath-alt { margin: 22px 0 0; font-size: 13px; color: rgba(243,239,227,.65); }
.ath-login .ath-alt a { color: #EBD8A4; text-decoration: none; border-bottom: 1px solid rgba(228,203,144,.5); }
.ath-login .ath-alt a:hover { color: #F5F2E8; }

/* --------------------------------------------- REGISTER — paper + forest -- */
.ath-reg .rg-wrap { position: relative; max-width: 1140px; margin: 0 auto; padding: 24px 24px 84px; }
.ath-reg .rg-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 900px) { .ath-reg .rg-grid { grid-template-columns: 1fr; } }
.ath-reg .ed-pill .spark { color: var(--gold, #CBAA63); }
.ath-reg .ed-hero2 .flup { color: rgba(176,140,63,.35); }

.rg-card { position: relative; overflow: hidden; border-radius: 16px; padding: 32px 30px;
  background: rgba(255,255,255,.85); border: 1px solid #E7E3D6; box-shadow: 0 12px 32px rgba(22,38,28,.07); }
.rg-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #B08D45, #E4CB90, #CBAA63); }
.rg-title { margin: 0 0 22px; font-family: var(--ed-serif); font-weight: 400; font-size: 26px; color: var(--ink, #16261C); }
[dir="rtl"] .rg-title { font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 23px; }
.rg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 480px) { .rg-two { grid-template-columns: 1fr; } }

.ath-reg .ath-lbl { color: var(--gold-text, #7A5F26); }
.ath-reg .ath-in { background: rgba(255,255,255,.9); border: 1px solid #E3D9BE; color: var(--ink, #16261C); }
.ath-reg .ath-in:focus { border-color: #CBAA63; box-shadow: 0 0 0 3px rgba(203,170,99,.18); }
.ath-reg .ath-in::placeholder { color: #A9A28D; }
.ath-reg .ath-in.is-invalid { border-color: #C0392B; }
.ath-reg .ath-eye { color: #8A6D2E; }
.ath-reg .ea-submit { margin-top: 8px; }
.ath-reg .ath-alt { margin: 22px 0 0; font-size: 13.5px; color: var(--ink-soft, #54644F); }
.ath-reg .ath-alt a { color: var(--gold-text, #7A5F26); text-decoration: none; font-weight: 600; border-bottom: 1px solid #CBAA63; }
.ath-reg .ath-alt a:hover { color: var(--ink, #16261C); }

/* forest perks card (reference "Programs" card; prices omitted — no course
   models are passed to auth views, and DB values are never hard-coded) */
.rg-side { display: flex; flex-direction: column; gap: 14px; }
.rg-forest { position: relative; overflow: hidden; border-radius: 16px; padding: 28px 26px; color: #F3EFE3;
  border: 1px solid rgba(216,193,130,.3);
  background:
    radial-gradient(70% 120% at 85% 10%, rgba(203,170,99,.22), transparent 60%),
    linear-gradient(135deg, #16241B, #22352A); }
.rg-forest .star { position: absolute; inset-inline-end: -8px; top: -24px; font-family: var(--ed-serif);
  font-size: 120px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(228,203,144,.2); pointer-events: none; }
.rg-forest .kick { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(216,193,130,.85); }
[dir="rtl"] .rg-forest .kick { letter-spacing: .06em; }
.rg-forest .rg-row { margin-top: 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  border-bottom: 1px solid rgba(216,193,130,.2); padding-bottom: 14px;
  font-family: var(--ed-serif); font-size: 19px; }
[dir="rtl"] .rg-forest .rg-row { font-family: 'Cairo', sans-serif; font-weight: 700; font-size: 16px; }
.rg-forest .rg-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.rg-forest .rg-row .dia { color: var(--gold-b, #D8C182); flex: none; align-self: center; }
.rg-chips { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.rg-chips span { border: 1px solid rgba(216,193,130,.35); border-radius: 999px; padding: 6px 13px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #EBD8A4; }
[dir="rtl"] .rg-chips span { letter-spacing: .02em; }
.rg-forest .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(216,193,130,.15); }
.rg-forest .bar i { position: absolute; inset: 0; transform: scaleX(1); transform-origin: left;
  background: linear-gradient(90deg, #B08D45, #E4CB90, #CBAA63); }
[dir="rtl"] .rg-forest .bar i { transform-origin: right; }

.rg-note { border-radius: 12px; padding: 20px 22px; font-size: 13.5px; line-height: 1.75;
  background: rgba(255,255,255,.82); border: 1px solid #E7E3D6; color: var(--gold-text, #7A5F26); }
.rg-note a { color: var(--gold-text, #7A5F26); text-decoration: none; border-bottom: 1px solid #CBAA63; }
.rg-note a:hover { color: var(--ink, #16261C); }

/* register — dark theme */
.ed-dark .rg-card { background: rgba(24,33,26,.92); border-color: #27332B; box-shadow: 0 12px 32px rgba(0,0,0,.35); }
.ed-dark .rg-title { color: #EAF0E7; }
.ed-dark .ath-reg .ath-lbl { color: #D2B36C; }
.ed-dark .ath-reg .ath-in { background: #18231C; border-color: #27332B; color: #EAF0E7; }
.ed-dark .ath-reg .ath-in:focus { border-color: #D2B36C; box-shadow: 0 0 0 3px rgba(210,179,108,.15); }
/* #6F7D6F on #18231C is 3.73:1 — both colours solid, so that is the number
   everywhere, on all six fields. --ink-soft is the token the rest of the dark
   theme uses for muted body copy (.ed-dark .ed sets it to #AEBBAC) and measures
   8.10:1 here; the typed value #EAF0E7 is 13.98:1, so the two do not read alike. */
.ed-dark .ath-reg .ath-in::placeholder { color: var(--ink-soft, #AEBBAC); }
.ed-dark .ath-reg .ath-in:-webkit-autofill { -webkit-text-fill-color: #EAF0E7; caret-color: #EAF0E7;
  -webkit-box-shadow: 0 0 0 1000px #18231C inset; }
.ed-dark .ath-reg .ath-eye { color: #D2B36C; }
.ed-dark .ath-reg .ath-err { color: #F2A48F; }
.ed-dark .ath-reg .ath-alt { color: #9FAE9F; }
.ed-dark .ath-reg .ath-alt a { color: #D2B36C; border-bottom-color: #D2B36C; }
.ed-dark .ath-reg .ath-alt a:hover { color: #E4CB90; }
.ed-dark .rg-note { background: #18231C; border-color: #27332B; color: #C9BF9F; }
.ed-dark .rg-note a { color: #D2B36C; border-bottom-color: #D2B36C; }
.ed-dark .rg-note a:hover { color: #E4CB90; }

/* ------------------------------------------------------------- motion -- */
@media (prefers-reduced-motion: no-preference) {
  /* shared keyframe names (edRotate/edFloat/edFloatUp/edLogo/edNudge/edSheen/
     edGrad/edCtaGlow/edPulse) are defined in editorial.css */
  .ath-login .ring i { animation: edRotate 32s linear infinite; }
  .ed-authpg .flup { animation: edFloatUp 12s linear infinite; }
  .ed-authpg .fl1 { animation-delay: -2s; }
  .ed-authpg .fl2 { animation-duration: 11s; animation-delay: -6s; }
  .ed-authpg .fl3 { animation-duration: 13.5s; animation-delay: -9s; }
  .ed-authpg .fl4 { animation-duration: 14s; animation-delay: -7s; }
  .ath-login .co1 { animation: edFloat 8s ease-in-out infinite; }
  .ath-login .co2 { animation: edFloat 10s ease-in-out infinite -3s; }
  .ath-login .co3 { animation: athCoinSpin 7s linear infinite; }
  @keyframes athCoinSpin { from { transform: rotateY(0) } to { transform: rotateY(360deg) } }
  .ath-card .ath-logo img { animation: edLogo 4.5s ease-in-out infinite; }
  .ath-reg .ed-pill .spark { display: inline-block; animation: edPulse 2.6s ease-in-out infinite; }
  .ed-authpg .ath-arrow { animation: edNudge 1.6s ease-in-out infinite; }
  [dir="rtl"] .ed-authpg .ath-arrow { animation-name: athNudgeR; }
  @keyframes athNudgeR { 0%,100% { transform: translateX(0) scaleX(-1) } 50% { transform: translateX(-5px) scaleX(-1) } }
  .ed-authpg .ea-sheen { animation: edSheen 3.2s ease-in-out infinite; }
  .ed-authpg .ea-submit { animation: edGrad 4.5s ease-in-out infinite, edCtaGlow 3s ease-in-out infinite; }
  .rg-forest .bar i { animation: athFill 6s ease-in-out infinite .6s; }
  @keyframes athFill { 0% { transform: scaleX(0) } 55%,100% { transform: scaleX(1) } }
}


/* Forgot-password "Back to login" link: gold on white at 2.10:1 */
/* "Back to login" measured 2.10:1 — rgb(212,175,55) on the white card. The gold
   comes from the vendor find/replace in core.css (`a` selector, specificity
   0,0,1) and the dashboard brand sheet that would have corrected it is never
   loaded on layouts/auth.blade.php. #2B4032 is --brand-green-2 from the palette,
   written literally because no token sheet is loaded here; it measures 11.16:1
   on #FFFFFF. !important because template-customizer.js re-injects core.css and
   theme-default.css after this file. */
.authentication-wrapper .card-body a,
.authentication-wrapper .card-body a:visited {
  color: #2B4032 !important;              /* --brand-green-2 — 11.16:1 on #FFFFFF */
}
.authentication-wrapper .card-body a:hover,
.authentication-wrapper .card-body a:focus {
  color: #1C2A20 !important;              /* --brand-green */
}

/* Forgot-password email/password placeholders at 2.30:1 */
/* rgb(172,170,177) on the white card is 2.30:1 at 15px — the hint telling
   someone what to type. It comes from `.form-control::placeholder` in
   vendor/css/rtl/core.css. #5B6656 is --brand-text-muted and measures 6.03:1.
   !important because template-customizer.js re-injects core.css after this file.
   The two pseudo-elements MUST stay in separate rules — a browser that does not
   recognise one selector drops the entire rule it appears in. */
.authentication-wrapper .form-control::placeholder {
  color: #5B6656 !important;              /* --brand-text-muted — 6.03:1 on #FFFFFF */
  opacity: 1;                             /* Firefox dims placeholders by default */
}
.authentication-wrapper .form-control::-webkit-input-placeholder {
  color: #5B6656 !important;
  opacity: 1;
}