/* ============================================================================
   VELORA · LOGIN VIEW SKIN · v117 "Split-screen sign in"
   ----------------------------------------------------------------------------
   Loaded by views/login.php AFTER assets/velora.css — all design tokens
   (light + dark) come from velora.css sections [1] and [11]; this file only
   adds the lg-* login layout. Decoration is pure CSS (radial gradients, dot
   grid, rings) — no images, no external resources, strict-CSP safe.
   Dark counterparts for every literal color live in the appendix at the end.
   ========================================================================== */

/* ── Layout ──────────────────────────────────────────────────────────────── */
.lg-split{min-height:100vh;display:grid;grid-template-columns:minmax(400px,46%) minmax(0,1fr);}

/* ── Brand panel (left) — deep indigo from the --accent family ───────────── */
.lg-brand{
  position:relative;overflow:hidden;display:flex;
  padding:clamp(28px,5vw,64px);
  background:
    radial-gradient(720px 540px at 86% -10%, rgba(115,128,255,.42), transparent 62%),
    radial-gradient(560px 480px at -12% 106%, rgba(16,20,80,.55), transparent 70%),
    linear-gradient(158deg, var(--accent) 0%, #3a43cf 44%, #20266f 100%);
}
/* Decorative dot grid + faint concentric rings — pure CSS, no assets. */
.lg-brand::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.45px),
    repeating-radial-gradient(circle at 84% 92%, rgba(255,255,255,.07) 0 1px, transparent 1px 84px);
  background-size:22px 22px, auto;
  -webkit-mask-image:radial-gradient(900px 760px at 30% 18%, rgba(0,0,0,.9), transparent 78%);
  mask-image:radial-gradient(900px 760px at 30% 18%, rgba(0,0,0,.9), transparent 78%);
}
.lg-brand::after{
  content:"";position:absolute;right:-170px;bottom:-190px;width:540px;height:540px;
  border-radius:999px;pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,255,255,.10), rgba(255,255,255,.025) 58%, transparent 74%);
}
.lg-brand-inner{position:relative;z-index:1;margin:auto 0;width:100%;max-width:480px;display:grid;gap:18px;}
.lg-brand-top{display:flex;align-items:center;gap:16px;}
.lg-brand-id{min-width:0;}
.lg-brand-mark{
  width:56px;height:56px;border-radius:18px;display:grid;place-items:center;color:#fff;flex:0 0 auto;
  background:linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 12px 32px rgba(13,16,60,.35);
}
.lg-brand-mark .vicon{width:30px;height:30px;}
.lg-brand-eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.66);}
.lg-wordmark{
  margin-top:4px;font-family:var(--font-display);font-weight:800;letter-spacing:-.05em;line-height:.95;
  font-size:clamp(40px,5.4vw,62px);color:#fff;
}
.lg-tagline{margin:0;font-size:15px;line-height:1.7;color:rgba(255,255,255,.82);max-width:42ch;}
.lg-points{list-style:none;margin:8px 0 0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.18);display:grid;gap:11px;}
.lg-points li{display:flex;align-items:center;gap:11px;font-size:13px;font-weight:700;color:rgba(255,255,255,.85);}
.lg-points .vicon{width:16px;height:16px;flex:none;color:rgba(255,255,255,.9);}

/* ── Form side (right) ───────────────────────────────────────────────────── */
.lg-side{display:grid;place-items:center;padding:clamp(20px,4vw,56px);}
.lg-card{
  width:min(440px,100%);
  border:1px solid var(--line);border-radius:22px;background:var(--surface);
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 12px 32px rgba(15,23,42,.06);
  padding:30px 28px 24px;
}
.lg-eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);}
.lg-headline{margin:10px 0 0;font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:-.04em;color:var(--text);}
.lg-subline{margin:8px 0 0;font-size:13.5px;line-height:1.65;color:var(--muted);}

/* Flash / error chips — soft red + amber washes from the semantic tokens */
.lg-flash{
  margin-top:18px;display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;border-radius:16px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--muted);font-size:13px;font-weight:700;line-height:1.5;
}
.lg-flash .vicon{flex:none;width:17px;height:17px;margin-top:1px;}
.lg-flash-bad{background:var(--bad-soft);border-color:var(--bad-line);color:#9c2b44;}
.lg-flash-warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn);}

/* Form */
.lg-form{margin-top:22px;display:grid;gap:16px;}
.lg-field label{display:block;font-size:12.5px;font-weight:800;color:var(--muted);margin-bottom:8px;}
.lg-control{position:relative;}
.lg-control > .vicon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted-2);pointer-events:none;}
.lg-input{
  width:100%;padding:13px 15px 13px 42px;border-radius:14px;border:1px solid var(--line);
  background:var(--surface);color:var(--text);font:inherit;font-size:14.5px;outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.lg-input::placeholder{color:var(--muted-2);}
.lg-input:focus{border-color:var(--line-accent);box-shadow:0 0 0 4px rgba(85,99,255,.10);}
.lg-input-peek{padding-right:50px;}
.lg-code{letter-spacing:.45em;font-size:19px;font-weight:800;text-align:center;}

/* Show/hide password toggle */
.lg-peek{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border:0;border-radius:11px;cursor:pointer;
  display:grid;place-items:center;background:transparent;color:var(--muted-2);
  transition:background .15s ease, color .15s ease;
}
.lg-peek:hover{background:var(--surface-3);color:var(--text);}
.lg-peek:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.lg-peek .vicon{width:17px;height:17px;}
.lg-peek .lg-peek-hide{display:none;}
.lg-peek.is-on .lg-peek-show{display:none;}
.lg-peek.is-on .lg-peek-hide{display:block;}

/* Checkbox row (2FA "trust this device") */
.lg-check{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);font-weight:700;cursor:pointer;}
.lg-check input{width:16px;height:16px;accent-color:var(--accent);}

/* Submit */
.lg-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:13px 16px;border:0;border-radius:14px;cursor:pointer;
  background:linear-gradient(135deg, var(--accent), var(--accent-up));color:#fff;
  font:inherit;font-weight:800;font-size:14.5px;
  box-shadow:0 10px 26px rgba(85,99,255,.22);
  transition:transform .15s ease, box-shadow .15s ease;
}
.lg-submit:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(85,99,255,.28);}
.lg-submit:active{transform:translateY(0);}
.lg-submit:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.lg-submit .vicon{width:17px;height:17px;}
.lg-submit.is-loading{position:relative;color:transparent !important;pointer-events:none;}
.lg-submit.is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border:2px solid #fff;border-right-color:transparent;border-radius:50%;animation:lgSpin .7s linear infinite;}
@keyframes lgSpin{to{transform:rotate(360deg)}}

/* Recovery + secondary 2FA actions */
.lg-recovery summary{cursor:pointer;font-size:12.5px;color:var(--muted-2);font-weight:700;}
.lg-recovery summary:hover{color:var(--muted);}
.lg-recovery .lg-control{margin-top:10px;}
.lg-alt-row{margin-top:14px;display:flex;align-items:center;gap:16px;}
.lg-linkbtn{background:none;border:0;cursor:pointer;font:inherit;font-size:12.5px;color:var(--accent);font-weight:800;padding:0;}
.lg-linkbtn:hover{text-decoration:underline;}
.lg-mutelink{font-size:12.5px;color:var(--muted-2);font-weight:700;text-decoration:none;}
.lg-mutelink:hover{color:var(--muted);text-decoration:underline;}

/* Trust footer pills */
.lg-foot{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:center;
}
.lg-dot{width:7px;height:7px;border-radius:999px;background:var(--ok);box-shadow:0 0 0 4px rgba(34,163,90,.13);}
.lg-foot-pill{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--muted);
  font-size:11px;font-weight:800;white-space:nowrap;
}
.lg-foot-pill .vicon{width:13px;height:13px;}

/* ── Mobile: brand panel collapses to a compact top banner ──────────────── */
@media (max-width:880px){
  .lg-split{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
  .lg-brand{padding:16px 20px;}
  .lg-brand-inner{margin:0;max-width:none;gap:0;}
  .lg-brand-top{gap:12px;}
  .lg-brand-mark{width:42px;height:42px;border-radius:14px;}
  .lg-brand-mark .vicon{width:24px;height:24px;}
  .lg-brand-eyebrow{font-size:10px;}
  .lg-wordmark{margin-top:2px;font-size:24px;line-height:1;}
  .lg-tagline,.lg-points{display:none;}
  .lg-side{padding:18px 16px 26px;align-items:start;}
  .lg-card{padding:24px 20px 20px;border-radius:20px;}
}
@media (max-width:400px){
  .lg-card{padding:20px 16px 18px;}
}

/* ── Reduced motion: drop the transforms/transitions introduced above ───── */
@media (prefers-reduced-motion: reduce){
  .lg-input,.lg-peek,.lg-submit{transition:none;}
  .lg-submit:hover,.lg-submit:active{transform:none;}
}

/* ── Dark appendix — html[data-theme=dark] counterpart for every literal ──
   Tokens flip automatically via velora.css [11.1]; the rules below cover the
   literal colors used in this file. The brand panel stays indigo in both
   themes by design (accent unchanged in dark — see velora.css [11.1]); its
   gradient is deepened and the white ink alphas nudged for the darker base. */
html[data-theme=dark] .lg-brand{
  background:
    radial-gradient(720px 540px at 86% -10%, rgba(115,128,255,.30), transparent 62%),
    radial-gradient(560px 480px at -12% 106%, rgba(7,9,38,.62), transparent 70%),
    linear-gradient(158deg, #424dd6 0%, #2f37ab 44%, #161b54 100%);
}
html[data-theme=dark] .lg-brand::before{
  background-image:
    radial-gradient(rgba(255,255,255,.11) 1px, transparent 1.45px),
    repeating-radial-gradient(circle at 84% 92%, rgba(255,255,255,.05) 0 1px, transparent 1px 84px);
}
html[data-theme=dark] .lg-brand::after{
  background:radial-gradient(closest-side, rgba(255,255,255,.07), rgba(255,255,255,.015) 58%, transparent 74%);
}
html[data-theme=dark] .lg-brand-mark{
  background:linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
  border-color:rgba(255,255,255,.22);
  box-shadow:0 12px 32px rgba(0,0,0,.45);
}
html[data-theme=dark] .lg-brand-eyebrow{color:rgba(255,255,255,.60);}
html[data-theme=dark] .lg-tagline{color:rgba(255,255,255,.78);}
html[data-theme=dark] .lg-points{border-top-color:rgba(255,255,255,.14);}
html[data-theme=dark] .lg-points li{color:rgba(255,255,255,.82);}
html[data-theme=dark] .lg-points .vicon{color:rgba(255,255,255,.85);}

html[data-theme=dark] .lg-card{box-shadow:0 1px 2px rgba(0,0,0,.30), 0 12px 32px rgba(0,0,0,.34);}
html[data-theme=dark] .lg-flash-bad{color:#f0a3b6;}
html[data-theme=dark] .lg-flash-warn{color:#e3a35c;}
html[data-theme=dark] .lg-input:focus{box-shadow:0 0 0 4px rgba(85,99,255,.18);}
html[data-theme=dark] .lg-submit{box-shadow:0 10px 26px rgba(85,99,255,.30);}
html[data-theme=dark] .lg-submit:hover{box-shadow:0 14px 32px rgba(85,99,255,.38);}
html[data-theme=dark] .lg-dot{box-shadow:0 0 0 4px rgba(34,163,90,.22);}

/* ── v206 OS21 login ─────────────────────────────────────────────────────────
   Emerald "Velora OS 2.1" alignment pass — appended LAST so it cascade-wins
   over the v117 skin above AND over components.css (this file loads after
   theme.css on the login page, so the v203 emerald login intents there were
   being overridden by the v117 rules; restored here). CSS-only + the new
   decorative .lg-illu; zero form / field / flow changes.
   Covers: brand panel onto the emerald DNA (was indigo literals), card ring +
   shadow on the OS tokens, emerald focus ring + --v-grad submit, the desk
   illustration under the card. Dark counterparts at the end. */
.lg-brand{
  background:
    radial-gradient(720px 540px at 86% -10%, rgba(52,211,153,.32), transparent 62%),
    radial-gradient(560px 480px at -12% 106%, rgba(3,42,30,.55), transparent 70%),
    linear-gradient(158deg, #059669 0%, #047857 44%, #064e3b 100%);
}
.lg-brand-mark{box-shadow:0 12px 32px rgba(4,48,36,.35);}
.lg-card{
  border-color:rgba(5,150,105,.18);
  border-radius:var(--os-window-radius,18px);
  box-shadow:0 18px 60px -18px rgba(6,78,59,.28), var(--v-shadow-sm);
}
.lg-headline{letter-spacing:-.045em;}
.lg-input{border-radius:var(--v-radius,14px);}
.lg-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.lg-submit{
  border-radius:var(--v-radius,14px);
  background:var(--v-grad);
  box-shadow:0 10px 26px rgba(5,150,105,.24);
}
.lg-submit:hover{box-shadow:0 14px 32px rgba(5,150,105,.30);}
.lg-foot-pill .vicon{color:var(--accent);}
/* decorative desk illustration below the card (aria-hidden in the view) —
   never competes with the form: hidden on narrow or short viewports. */
.lg-illu{width:210px;margin:26px auto 0;opacity:.92;}
.lg-illu .villu{width:100%;height:auto;}
@media (max-width:880px), (max-height:760px){ .lg-illu{display:none;} }

/* dark counterparts — html[data-theme=dark] */
html[data-theme=dark] .lg-brand{
  background:
    radial-gradient(720px 540px at 86% -10%, rgba(52,211,153,.20), transparent 62%),
    radial-gradient(560px 480px at -12% 106%, rgba(2,20,14,.62), transparent 70%),
    linear-gradient(158deg, #047857 0%, #065f46 44%, #04231a 100%);
}
html[data-theme=dark] .lg-card{
  border-color:rgba(16,185,129,.22);
  box-shadow:0 18px 60px -18px rgba(0,0,0,.55), var(--v-shadow-sm);
}
html[data-theme=dark] .lg-input:focus{box-shadow:0 0 0 3px var(--accent-soft);}
html[data-theme=dark] .lg-submit{box-shadow:0 10px 26px rgba(16,185,129,.20);}
html[data-theme=dark] .lg-submit:hover{box-shadow:0 14px 32px rgba(16,185,129,.26);}
html[data-theme=dark] .lg-illu{opacity:.55;}