/* ============================================================
   Sublime LMS — Login page
   ============================================================ */
.lo-page { min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; background:var(--bg); }
.lo-main { display:flex; flex-direction:column; min-height:100vh; min-width:0; }
.lo-top { padding:26px 40px; }
.lo-brand { display:inline-flex; align-items:center; height:30px; text-decoration:none; }
.lo-brand img { height:30px; width:auto; display:block; max-width:60vw; }
.lo-center { flex:1; display:flex; align-items:flex-start; justify-content:center; padding:24px 40px 56px; min-width:0; }
/* auto margins (not align-items:center) so a card taller than the viewport —
   the paid enrollment form with billing fields — starts at the top and stays
   fully scrollable instead of having its head clipped above the scroll origin. */
.lo-card { width:100%; max-width:404px; margin:auto; min-width:0; }

/* Mobile browsers report 100vh as the toolbar-less height, so a 100vh column
   overflows the visible area on iOS Safari / Android Chrome and leaves a dead
   band under the fold. dvh tracks the toolbar as it collapses. */
@supports (min-height:100dvh) {
  .lo-page, .lo-main { min-height:100dvh; }
}
.lo-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--color-violet-700); margin-bottom:14px; }
.lo-eyebrow .dot { width:6px; height:6px; border-radius:999px; background:var(--color-violet-600); box-shadow:0 0 0 4px rgba(109,40,217,.16); }
/* Headings interpolate a course title, so they must break rather than push the
   card wider than a 320px screen. */
.lo-card h1 { font-family:var(--font-display); font-weight:800; font-size:clamp(25px,6.4vw,32px); letter-spacing:-0.025em; color:var(--fg); margin:0 0 8px; overflow-wrap:break-word; }
.lo-card .sub { font-size:15px; color:var(--fg-body); margin:0 0 28px; overflow-wrap:break-word; }
.lo-field { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.lo-label { display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:600; color:var(--fg); }
.lo-label a { font-size:12.5px; font-weight:600; color:var(--color-violet-700); text-decoration:none; }
.lo-label a:hover { text-decoration:underline; }
.lo-input-wrap { position:relative; }
.lo-input { width:100%; max-width:100%; height:48px; padding:0 14px; font-family:var(--font-sans); font-size:14px; color:var(--fg); background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); outline:none; transition:border-color .2s,box-shadow .2s; }
.lo-input.pw { padding-right:48px; }
/* Safari sizes date/time inputs from their content and ignores the box width,
   which pushed the field past the card edge; reset the native appearance so the
   declared width wins. Left padding compensates for the indicator glyph. */
.lo-input[type="date"], .lo-input[type="time"], .lo-input[type="datetime-local"] {
  -webkit-appearance:none; appearance:none; min-width:0; display:block;
}
.lo-input[type="date"]::-webkit-date-and-time-value { text-align:left; }
textarea.lo-input { height:auto; min-height:88px; line-height:1.5; }
.lo-input:hover { border-color:var(--color-slate-300); }
.lo-input:focus { border-color:var(--color-violet-500); box-shadow:var(--focus-ring); }
.lo-input.err { border-color:var(--color-rose-500); box-shadow:0 0 0 4px rgba(244,63,94,.12); }
.lo-input::placeholder { color:var(--fg-faint); }
.lo-eye { position:absolute; top:50%; right:6px; transform:translateY(-50%); width:36px; height:36px; border-radius:8px; background:transparent; border:none; color:var(--fg-muted); display:grid; place-items:center; cursor:pointer; transition:background .2s,color .2s; }
.lo-eye:hover { background:var(--color-mist); color:var(--color-violet-700); }
.lo-eye i { width:16px; height:16px; }
.lo-err-msg { font-size:12px; color:var(--color-rose-600); min-height:0; }
.lo-remember { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--fg-body); margin-bottom:20px; cursor:pointer; user-select:none; }
.lo-remember input { width:17px; height:17px; accent-color:var(--color-violet-600); cursor:pointer; }
.lo-submit { width:100%; height:50px; justify-content:center; font-size:15px; }
.lo-foot { font-size:14px; color:var(--fg-body); text-align:center; margin:24px 0 0; }
.lo-foot a { color:var(--color-violet-700); font-weight:600; text-decoration:none; }
.lo-foot a:hover { text-decoration:underline; }
.lo-legal { font-size:12px; color:var(--fg-muted); text-align:center; margin:32px 0 0; line-height:1.5; }
.lo-legal a { color:var(--fg-body); text-decoration:underline; }

/* right brand panel */
.lo-aside { position:relative; overflow:hidden; background:var(--gradient-dark-intel); display:flex; flex-direction:column; justify-content:center; padding:56px; isolation:isolate; }
.lo-aside::before { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 60% at 75% 18%, rgba(139,92,246,.42), transparent 65%), radial-gradient(50% 50% at 12% 92%, rgba(20,184,166,.26), transparent 62%); }
.lo-aside .badge { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:7px 13px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:12px; font-weight:600; backdrop-filter:blur(8px); margin-bottom:26px; }
.lo-aside .badge i { width:14px; height:14px; color:#A78BFA; }
.lo-aside h2 { font-family:var(--font-display); font-weight:800; font-size:clamp(28px,3vw,38px); line-height:1.15; letter-spacing:-0.025em; color:#fff; margin:0 0 16px; text-wrap:balance; }
.lo-aside h2 .g { background:linear-gradient(120deg,#C4B5FD,#5EEAD4); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lo-aside p { font-size:16px; line-height:1.6; color:rgba(255,255,255,.74); max-width:380px; margin:0 0 32px; }
.lo-aside ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.lo-aside li { display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.9); font-size:14.5px; }
.lo-aside li i { width:18px; height:18px; color:#6EE7B7; flex-shrink:0; }
/* soft drifting orbs */
.lo-orb { position:absolute; border-radius:50%; filter:blur(46px); opacity:.5; z-index:-1; }
.lo-orb.o1 { width:300px; height:300px; background:radial-gradient(circle,#A78BFA,transparent 70%); top:-60px; right:-40px; animation:lo-drift 15s ease-in-out infinite; }
.lo-orb.o2 { width:260px; height:260px; background:radial-gradient(circle,#2DD4BF,transparent 70%); bottom:-50px; left:-30px; animation:lo-drift 18s ease-in-out infinite reverse; }
@keyframes lo-drift { 0%,100%{transform:translate(0,0)} 50%{transform:translate(26px,-22px)} }

.lo-done { display:none; text-align:center; }
.lo-done.show { display:block; animation:lo-fade .5s var(--ease-out); }
@keyframes lo-fade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.lo-done .chk { width:74px; height:74px; border-radius:999px; background:var(--color-emerald-50); display:grid; place-items:center; margin:0 auto 18px; }
.lo-done .chk i { width:34px; height:34px; color:var(--color-emerald-600); }
.lo-done h2 { font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:-0.015em; color:var(--fg); margin:0 0 8px; }
.lo-done p { font-size:14.5px; color:var(--fg-body); margin:0; }

/* ------------------------------------------------------------
   Responsive
   Breakpoints target the widths the flow is supported at: 320,
   375, 390 and 430px phones, then tablets, then desktop.
   ------------------------------------------------------------ */
@media (max-width:900px){
  .lo-page { grid-template-columns:1fr; }
  .lo-aside { display:none; }
  /* The brand panel is gone below this width, so the card is the whole page —
     let it use the tablet width rather than staying pinned at the desktop 404px. */
  .lo-card { max-width:480px; }
}
@media (max-width:600px){
  .lo-top { padding:22px 22px calc(22px - 6px); }
  .lo-center { padding:12px 22px 44px; }
  .lo-legal { margin-top:24px; }
  .lo-foot { margin-top:20px; }
}

/* Sub-375px phones: trim the gutters so the fields keep their internal padding
   instead of the card being squeezed. */
@media (max-width:380px){
  .lo-top { padding:18px 16px 12px; }
  .lo-center { padding:8px 16px 36px; }
  .lo-card .sub { font-size:14.5px; margin-bottom:22px; }
  .lo-field { margin-bottom:14px; }
}

/* Touch input. Two things matter here: iOS Safari zooms the page in whenever a
   focused field is under 16px — which is what left the form horizontally
   scrollable and mis-scaled after the keyboard opened — and finger targets need
   to clear ~44px. Keyed on pointer as well as width so tablets get it too. */
@media (max-width:900px), (pointer:coarse){
  .lo-input, textarea.lo-input, select.lo-input { font-size:16px; }
  .lo-input { height:50px; }
  .lo-eye { width:44px; height:44px; right:4px; }
  .lo-eye i { width:18px; height:18px; }
  .lo-label a { padding:4px 0; }
  /* The whole row is the label, so give it the 44px target rather than relying
     on the checkbox glyph alone. */
  .lo-remember { min-height:44px; align-items:center; }
  .lo-remember input { width:24px; height:24px; flex:none; }
  .lo-submit { height:52px; }
}

/* Landscape phones / short viewports: the vertical rhythm is what overflows,
   not the width. Also covers the orientation flip mid-form. */
@media (max-height:520px) and (max-width:900px){
  .lo-top { padding:12px 22px 4px; }
  .lo-center { padding:4px 22px 28px; align-items:flex-start; }
  .lo-card h1 { font-size:24px; }
  .lo-card .sub { margin-bottom:18px; }
}

/* Notched devices in landscape put the card under the sensor housing. */
@supports (padding:max(0px)){
  .lo-top    { padding-left:max(40px,env(safe-area-inset-left)); padding-right:max(40px,env(safe-area-inset-right)); }
  .lo-center { padding-left:max(40px,env(safe-area-inset-left)); padding-right:max(40px,env(safe-area-inset-right)); padding-bottom:max(56px,env(safe-area-inset-bottom)); }
  @media (max-width:600px){
    .lo-top    { padding-left:max(22px,env(safe-area-inset-left)); padding-right:max(22px,env(safe-area-inset-right)); }
    .lo-center { padding-left:max(22px,env(safe-area-inset-left)); padding-right:max(22px,env(safe-area-inset-right)); padding-bottom:max(44px,env(safe-area-inset-bottom)); }
  }
  @media (max-width:380px){
    .lo-top    { padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); }
    .lo-center { padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); padding-bottom:max(36px,env(safe-area-inset-bottom)); }
  }
}
@media (prefers-reduced-motion:reduce){ .lo-orb { animation:none !important; } }