/* OCULITH sign-in — the homepage's system (static/home.css: tokens, fonts,
   the monolith, smoke and buttons) arranged as a two-panel screen: the scene
   on the left, the card on the right; on phones the scene is a band above the
   card. Only layout and the form controls live here. */

body.lg-body{min-height:100vh; min-height:100dvh;}
.lg{display:grid; grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr); min-height:100vh; min-height:100dvh;}

/* ---------- the scene ---------- */
.lg-scene.hx{padding:0; overflow:hidden; border-right:1px solid var(--line);}
.lg-scene .hx-sky{inset:0;}
.lg-scene .hx-grid{-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 10%,transparent 78%);
                          mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 10%,transparent 78%);}
/* the stage ends at the horizon; the slab stands on it (home.js reads the eye
   position from the slab's box, so it must sit bottom-centre in the stage) */
.lg-stage.hx-stage{position:absolute; left:0; right:0; top:9%; bottom:30%; width:auto; margin:0; aspect-ratio:auto;}
.lg-stage .hx-mono,.lg-stage .hx-reflect{height:100%;}
.lg-stage .hx-marks{inset:4% 12% 0;}
.lg-stage .hx-reflect{opacity:.13;}

.lg-copy{position:absolute; z-index:5; left:clamp(24px,5vw,64px); right:clamp(24px,5vw,64px); bottom:clamp(28px,6vh,64px);}
.lg-eyebrow{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-hi); margin-bottom:12px;}
.lg-head{font-size:clamp(1.9rem,3.2vw,2.9rem); font-weight:600; line-height:1.04; letter-spacing:-.04em; max-width:15ch;}
.lg-sub{margin-top:12px; color:var(--ink2); font-size:.98rem; max-width:44ch;}
.lg-datum.hx-datum{left:auto; right:clamp(24px,5vw,64px); bottom:auto; top:clamp(20px,3.5vh,32px);}

/* ---------- the card ---------- */
.lg-panel{display:flex; align-items:center; justify-content:center; padding:clamp(28px,6vh,72px) clamp(20px,5vw,56px);
  background:linear-gradient(180deg,var(--s1),var(--bg));}
.lg-card{width:100%; max-width:380px;}
.lg-brand{display:inline-flex; align-items:center; gap:10px; margin-bottom:34px; font-weight:700; letter-spacing:.14em; font-size:.86rem;}
.lg-brand img{width:32px; height:32px;}
.lg-card h1{font-size:1.9rem; letter-spacing:-.04em;}
.lg-lead{margin-top:8px; color:var(--ink2); font-size:.94rem;}
.lg-note,.lg-alert{margin-top:18px; padding:10px 12px; border-radius:9px; font-size:.85rem; line-height:1.45;
  background:var(--surface-ui); border:1px solid var(--line-ui); color:var(--ink2);}
.lg-note code{font-family:var(--mono); font-size:.8rem; color:var(--ink); word-break:break-all;}
.lg-alert{border-color:rgba(239,68,68,.45); background:rgba(239,68,68,.1); color:#ffb4b4;}

.lg-form{margin-top:24px; display:grid; gap:16px;}
.lg-field{display:grid; gap:6px;}
.lg-field label{font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); font-family:var(--mono);}
.lg-input{width:100%; height:42px; padding:0 12px; border-radius:9px; border:1px solid var(--line-ui); background:var(--surface-ui);
  color:var(--ink); font:inherit; font-size:.95rem; transition:border-color .12s, box-shadow .12s; appearance:none; -webkit-appearance:none;}
.lg-input:hover{border-color:color-mix(in srgb,var(--line-ui) 45%,var(--accent) 55%);}
.lg-input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,122,0,.35);}
select.lg-input{padding-right:34px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23a6a6ae' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;}
.lg-err{font-size:.8rem; color:#ff9d9d;}
.lg-submit{width:100%; justify-content:center; margin-top:6px;}
.lg-foot{margin-top:22px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.85rem;}
.lg-foot a{color:var(--ink2); transition:color .12s;}
.lg-foot a:hover{color:var(--accent-hi);}

/* ---------- phones and narrow tablets: the scene becomes a band ---------- */
@media (max-width:860px){
  .lg{grid-template-columns:1fr; grid-template-rows:auto 1fr;}
  .lg-scene.hx{height:clamp(230px,34vh,300px); border-right:0; border-bottom:1px solid var(--line);}
  .lg-stage.hx-stage{top:10%; bottom:16%;}
  .lg-copy{display:none;}
  .lg-datum.hx-datum{top:auto; bottom:10px; left:16px; right:auto;}
  .lg-panel{align-items:flex-start; padding:28px 16px 40px;}
  .lg-brand{margin-bottom:22px;}
}
@media (prefers-reduced-motion:reduce){ .lg-input{transition:none;} }

/* password help text (Django renders a list) */
.lg-help{font-size:.78rem; color:var(--ink3); line-height:1.5;}
.lg-help ul{margin:4px 0 0; padding-left:1.1em; list-style:disc;}