/* Incubate360 v3: the front door.
   Built to the client's reference design. Loaded after v2.css.

   The root class is `.lgpage`, not `.lg`. A bare `.lg` looked tidy until it collided with every
   other "large" modifier in the product: `.modal.lg` is a wide dialog and `.mtr.lg` is a tall
   progress bar, and a login rule saying `display:grid; min-height:100vh` turned both of those
   into full-screen blocks. Size modifiers belong to the design system; a page root must be
   namespaced. */

.lgpage{
  --lg-ink:#0B1B3F; --lg-violet:#5B21E8; --lg-blue:#1878F0; --lg-cyan:#00BFB3;
  min-height:100vh; display:grid; grid-template-columns:minmax(0,52fr) minmax(0,48fr); background:#F7F8FC;
}

/* ═══════════ left: what this is ═══════════ */
.lg-left{
  position:relative; overflow:hidden; color:#fff; padding:44px 0 0 56px;
  display:flex; flex-direction:column;
  background:linear-gradient(150deg,#0A1533 0%,#101E4A 30%,#241A6B 68%,#3A1E8C 100%);
}
.lg-dots{position:absolute;top:0;right:0;width:340px;height:300px;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.42) 1.1px,transparent 1.1px);
  background-size:17px 17px;
  -webkit-mask-image:radial-gradient(ellipse at 85% 10%,#000 0%,transparent 70%);
  mask-image:radial-gradient(ellipse at 85% 10%,#000 0%,transparent 70%)}
.lg-glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(10px)}
.lg-glow.one{width:460px;height:460px;top:-150px;right:-120px;background:radial-gradient(circle,rgba(91,33,232,.42),transparent 63%)}
.lg-glow.two{width:420px;height:420px;bottom:-120px;left:-150px;background:radial-gradient(circle,rgba(0,191,179,.30),transparent 65%)}
/* the line-art skyline the reference has on the right of the panel.

   F-237 · the client: "these menues on login screen is not placed properly like menu behind
   startup lifecycle management." They were right and it was measurable: at `top:150px` and 30%
   opacity this box ran through the H1, the lead paragraph AND the first two feature rows, so
   hexagon lines crossed the words. Three changes, in order of what matters:
     1. it sits ABOVE the feature list now, so the three rows the client named are clear of it
        entirely rather than merely faint;
     2. it fades out towards the LEFT as well as the bottom, so nothing bleeds into the column
        the copy lives in;
     3. and it reads as texture (14%) rather than as an object competing with the words.
   `browser-audit login` measures the overlap now: zero against a feature row, and texture
   weight only where it meets the heading. */
.lg-art{position:absolute;right:-70px;top:58px;width:360px;opacity:.14;pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%),
    linear-gradient(to right,transparent 0%,#000 42%);
  mask-image:linear-gradient(to bottom,#000 55%,transparent 100%),
    linear-gradient(to right,transparent 0%,#000 42%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.lg-art svg{width:100%;height:auto;display:block}

.lg-badge{position:relative;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:7px 16px 7px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.30);
  background:rgba(255,255,255,.07);font-size:11px;font-weight:650;letter-spacing:.13em;
  text-transform:uppercase;color:#DCE6FA}
.lg-badge svg{width:14px;height:14px;color:#7DE3FF}

.lg-mid{position:relative;z-index:1;padding-right:44px;margin-top:34px;max-width:620px}
.lg-mid h1{font-family:var(--f-head,inherit);font-size:52px;line-height:1.06;letter-spacing:-1.4px;
  font-weight:800;margin:0 0 20px}
.lg-mid p.lead{font-size:15.5px;line-height:1.65;color:#B9C8E4;margin:0;max-width:52ch}

/* F-237 · the three rows read as one list rather than three loose blocks. The gaps between
   them were 66px and 86px, because the middle and last descriptions wrap to two lines and the
   spacing was doing the same job for a one-line row and a two-line one. A minimum row height
   gives the list one rhythm whatever the copy does, and the icon lines up with the TITLE rather
   than floating at the top of a block that grew. */
.lg-feats{margin-top:32px;display:flex;flex-direction:column;gap:14px;position:relative;z-index:1;max-width:560px}
.lg-feat{display:flex;gap:15px;align-items:flex-start;min-height:58px}
.lg-fi{flex:none;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.24)}
.lg-fi.v{background:linear-gradient(140deg,#7C3AED,#5B21E8)}
.lg-fi.b{background:linear-gradient(140deg,#2E7DF6,#1859D6)}
.lg-fi.t{background:linear-gradient(140deg,#12CBBC,#079C96)}
.lg-fi svg{width:21px;height:21px}
.lg-feat b{display:block;font-size:15.5px;font-weight:700;margin-bottom:3px;letter-spacing:-.2px}
.lg-feat span{display:block;font-size:13px;line-height:1.55;color:#A6B7D6;max-width:52ch}

/* A DRAWN likeness of the product, sitting under the copy and running off the edge.
   It used to be `.lg-shot img`, a JPEG screenshot of the product signed in as the demo tenant,
   so this page carried a real institution's name and a dashboard of figures to every buyer. It
   is an inline SVG now (SVG.preview in v3-login.js) and there is no image file left on disk. */
.lg-shot{position:relative;margin-top:auto;padding-top:34px;flex:1;min-height:130px}
.lg-shot svg{position:absolute;left:0;top:34px;width:132%;height:auto;max-width:none;display:block;
  border-radius:12px 12px 0 0;border:1px solid rgba(255,255,255,.14);border-bottom:0;
  box-shadow:0 -8px 44px rgba(0,0,0,.36)}

/* ═══════════ right: the card ═══════════ */
.lg-right{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:26px 30px;min-width:0;
  background:radial-gradient(720px 460px at 76% 6%,rgba(91,33,232,.055),transparent 62%),
    radial-gradient(560px 420px at 10% 96%,rgba(0,191,179,.06),transparent 60%),#F7F8FC}
.lg-secure{position:absolute;top:22px;right:30px;display:flex;align-items:center;gap:8px;
  font-size:12.4px;color:#5C6A87}
.lg-secure svg{width:16px;height:16px;color:#5B21E8;flex:none}
.lg-holder{width:100%;max-width:452px}
.lg-card{background:#fff;border:1px solid #E8ECF5;border-radius:22px;padding:38px 40px 32px;
  box-shadow:0 22px 60px rgba(11,27,63,.10),0 2px 8px rgba(11,27,63,.05)}

.lg-brandrow{display:flex;align-items:center;justify-content:center;gap:13px;margin-bottom:24px}
.lg-brandrow img{height:56px;width:auto;display:block}
/* v3.7.8 (F-161): a centre reaching its own address puts its own mark here, and ours drops to
   small type underneath. Both stay: the university gets its name, we keep the attribution. */
.lg-brandrow.co{margin-bottom:8px}
.lg-colog{max-height:62px;max-width:220px;width:auto;height:auto;display:block;object-fit:contain}
.lg-coname{font-family:var(--f-head,inherit);font-size:21px;font-weight:800;color:var(--lg-navy,#001A44);text-align:center;line-height:1.25;max-width:300px}
.lg-poweredby{display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:22px;font-size:11px;color:#8B96AC;letter-spacing:.02em}
.lg-poweredby img{height:19px;width:auto;display:block;opacity:.85}
.lg-head{text-align:center;margin-bottom:24px;position:relative}
.lg-head h2{font-family:var(--f-head,inherit);font-size:27px;font-weight:750;letter-spacing:-.6px;
  color:var(--ink,#0E1B33);margin:0}
.lg-head p{font-size:13.4px;line-height:1.6;color:#6B788F;margin:7px 0 0}
.lg-back{position:absolute;top:2px;left:0;display:flex;align-items:center;gap:4px;background:none;border:0;
  cursor:pointer;color:#6B788F;font-size:12.4px;padding:5px 8px;border-radius:9px;font-family:inherit}
.lg-back:hover{background:#EEF1F7;color:var(--ink,#0E1B33)}
.lg-back svg{width:15px;height:15px}
.lg-head.has-back h2{padding:0 62px}

.lg-field{margin-bottom:16px}
.lg-field label{display:block;font-size:13px;font-weight:600;color:#2C3A55;margin-bottom:7px}
.lg-wrap{position:relative;display:flex;align-items:center}
.lg-wrap>.ic{position:absolute;left:15px;width:18px;height:18px;color:#93A0B8;pointer-events:none;display:flex}
.lg-wrap>.ic svg{width:18px;height:18px}
.lg-inp{width:100%;height:52px;padding:0 15px 0 45px;border:1.5px solid #E2E7F0;border-radius:12px;
  font-size:14.5px;font-family:inherit;color:var(--ink,#0E1B33);background:#fff;
  transition:border-color .15s,box-shadow .15s}
.lg-inp.bare{padding-left:15px}
.lg-inp:focus{outline:0;border-color:var(--lg-violet);box-shadow:0 0 0 4px rgba(91,33,232,.11)}
.lg-inp::placeholder{color:#A3ADC2}
/* F-236 · every SVG constant in v3-login.js is written WITHOUT width and height and relies on
   a CSS rule sizing its container: twelve containers on this screen have one and `.lg-eye` did
   not. So the closed-eye mark measured 0x0 and the button was an empty 16px square, while the
   OPEN eye came from `window.icon()`, which writes the size onto the tag, and appeared. Hence
   "not visible ... after clicking it is visible". Sized here, on the container, so the next mark
   put in this button is sized too. `browser-audit login` measures every mark on the page now. */
.lg-eye{position:absolute;right:8px;background:none;border:0;cursor:pointer;color:#93A0B8;
  padding:8px;border-radius:9px;display:flex}
.lg-eye svg{width:18px;height:18px;display:block}
.lg-eye:hover{background:#F1F4FA}
.lg-eye.on{color:var(--lg-violet)}

.lg-opts{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 22px;flex-wrap:wrap}
.lg-remember{display:flex;align-items:center;gap:9px;font-size:13.2px;color:#3B4A66;cursor:pointer;user-select:none}
.lg-remember input{width:17px;height:17px;accent-color:var(--lg-violet);cursor:pointer;margin:0}
.lg-opts a,.lg-forgot{font-size:13.2px;font-weight:600;color:var(--lg-violet);text-decoration:none;
  background:none;border:0;cursor:pointer;font-family:inherit;padding:0}
.lg-opts a:hover,.lg-forgot:hover{text-decoration:underline}

.lg-btn{width:100%;height:54px;border:0;border-radius:12px;cursor:pointer;font-size:15.5px;font-weight:650;
  color:#fff;font-family:inherit;letter-spacing:-.1px;
  background:linear-gradient(97deg,#6D28E8 0%,#5B21E8 42%,#1E7BF0 100%);
  box-shadow:0 8px 20px rgba(59,45,220,.26);transition:transform .12s,box-shadow .12s,opacity .12s}
.lg-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 26px rgba(59,45,220,.32)}
.lg-btn:active:not(:disabled){transform:translateY(0)}
.lg-btn:disabled{opacity:.7;cursor:default;box-shadow:none}

.lg-sep{display:flex;align-items:center;gap:14px;margin:24px 0 16px;color:#C3CBDA}
.lg-sep i{flex:1;height:1px;background:#E8ECF5;display:block}
.lg-sep svg{width:17px;height:17px;color:#A9B4C8}
.lg-support{text-align:center;font-size:13.2px;color:#6B788F;display:flex;align-items:center;
  justify-content:center;gap:8px;flex-wrap:wrap}
.lg-support a{color:var(--lg-violet);font-weight:600;text-decoration:none;cursor:pointer}
.lg-support a:hover{text-decoration:underline}
.lg-support svg{width:17px;height:17px;color:#93A0B8}

.lg-msg{font-size:13px;line-height:1.5;margin:0;display:none}
.lg-msg.show{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;border-radius:11px;margin:0 0 15px}
.lg-msg.bad{background:rgba(226,61,61,.08);color:#B3241F}
.lg-msg.good{background:rgba(15,169,113,.10);color:#0A7350}
.lg-msg svg{width:16px;height:16px;flex:none;margin-top:1px}

/* the six boxes */
.lg-otp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin:2px 0 13px}
.lg-otp-i{height:60px;width:100%;min-width:0;padding:0;text-align:center;font-size:25px;font-weight:700;
  font-family:inherit;color:var(--ink,#0E1B33);border:1.5px solid #E2E7F0;border-radius:13px;background:#fff;
  transition:border-color .15s,box-shadow .15s,transform .1s}
.lg-otp-i:focus{outline:0;border-color:var(--lg-violet);box-shadow:0 0 0 4px rgba(91,33,232,.11);transform:translateY(-1px)}
.lg-timer{font-size:12.6px;color:#6B788F;text-align:center;margin-bottom:15px}
.lg-timer.warn{color:#B45309}
.lg-timer.bad{color:#B3241F}
.lg-hint{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.6px;color:#3B4A66;
  background:#F3EEFE;padding:10px 13px;border-radius:11px;margin-bottom:15px}
.lg-hint svg{width:15px;height:15px;flex:none;color:var(--lg-violet)}
.lg-hint b{letter-spacing:.16em;font-size:13.4px}
.lg-link{background:none;border:0;cursor:pointer;color:var(--lg-violet);font-weight:600;font-size:13.2px;
  font-family:inherit;padding:3px 5px;border-radius:7px}
.lg-link:hover{text-decoration:underline}
.lg-link.off{color:#A3ADC2;cursor:default;text-decoration:none}
.lg-row{display:flex;justify-content:center;gap:12px;margin-top:15px;font-size:13.2px;flex-wrap:wrap}

/* password strength */
.lg-str{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:9px}
.lg-str i{height:4px;border-radius:99px;background:#EEF1F7;display:block}
.lg-str i.on.s1{background:#E23D3D}
.lg-str i.on.s2{background:#E8901A}
.lg-str i.on.s3{background:#1E6BE0}
.lg-str i.on.s4{background:#0FA971}
.lg-strn{font-size:11.8px;color:#6B788F;margin-top:7px}

/* demo logins */
.lg-demo{margin-top:18px;border:1px dashed #DDE3EE;border-radius:13px;overflow:hidden;background:#fff}
.lg-demo-h{width:100%;display:flex;align-items:center;gap:10px;padding:12px 14px;background:none;border:0;
  cursor:pointer;font-size:12.8px;font-weight:600;color:#6B788F;font-family:inherit;text-align:left}
.lg-demo-h:hover{background:#F5F7FC}
.lg-demo-h svg{width:15px;height:15px;flex:none}
.lg-demo-h .cv{margin-left:auto;transition:transform .18s}
.lg-demo-h.open .cv{transform:rotate(180deg)}
.lg-demo-list{max-height:248px;overflow:auto;border-top:1px solid #EDF1F7}
.lg-demo-row{width:100%;display:flex;align-items:center;gap:10px;padding:10px 14px;background:none;border:0;
  border-bottom:1px solid #F1F4FA;cursor:pointer;font-family:inherit;text-align:left}
.lg-demo-row:last-child{border-bottom:0}
.lg-demo-row:hover{background:#F3EEFE}
.lg-demo-row .n{font-size:12.6px;font-weight:600;color:var(--ink,#0E1B33);flex:none}
.lg-demo-row .e{font-size:11.4px;color:#6B788F;margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-demo-row .go{color:var(--lg-violet);display:flex;flex:none;opacity:0;transition:opacity .15s}
.lg-demo-row:hover .go{opacity:1}

.lg-foot{margin-top:18px;text-align:center;font-size:11.8px;color:#7A869E;
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center}
.lg-foot a{color:var(--lg-violet);font-weight:600;text-decoration:none;cursor:pointer}
.lg-foot .dot{opacity:.5}

/* ═══════════ narrower ═══════════ */
@media (max-width:1240px){
  .lg-mid h1{font-size:42px}
  .lg-left{padding:34px 0 0 38px}
  .lg-shot svg{width:150%}
}
@media (max-width:1040px){
  .lgpage{grid-template-columns:minmax(0,1fr)}
  .lg-left{padding:28px 26px 26px;gap:0}
  .lg-mid{margin-top:22px;padding-right:0}
  .lg-mid h1{font-size:31px;letter-spacing:-.8px}
  .lg-mid p.lead{font-size:14px}
  .lg-feats{margin-top:22px;gap:14px}
  .lg-feat span{display:none}
  .lg-art,.lg-shot{display:none}
  .lg-right{padding:30px 18px 44px}
  .lg-secure{position:static;justify-content:center;margin-bottom:16px}
}
@media (max-width:460px){
  .lg-card{padding:26px 22px 24px;border-radius:18px}
  .lg-brandrow img{height:44px}
  .lg-head h2{font-size:23px}
  .lg-otp{gap:6px}
  .lg-otp-i{height:50px;font-size:20px;border-radius:11px}
}

/* dark mode: the panel is dark already, the card follows the app tokens */
[data-theme="dark"] .lgpage{background:var(--canvas)}
[data-theme="dark"] .lg-right{background:var(--canvas)}
[data-theme="dark"] .lg-card{background:var(--card);border-color:var(--border);
  box-shadow:0 22px 60px rgba(0,0,0,.45)}
[data-theme="dark"] .lg-inp,[data-theme="dark"] .lg-otp-i{background:var(--card);border-color:var(--border);color:var(--ink)}
[data-theme="dark"] .lg-head h2{color:var(--ink)}
[data-theme="dark"] .lg-demo,[data-theme="dark"] .lg-demo-list{background:var(--card);border-color:var(--border)}