/* ============================================================================
   LIGHTWORKS INSTITUTIONAL — access layer
   Deliberately spare: a crest, a statement, a rule, and the credential form.
   No invented telemetry, no filler copy. Hierarchy is carried by type, space
   and one champagne accent.
   ========================================================================= */

/* ------------------------------------------------------------- masthead -- */
.masthead{
  position:relative;z-index:3;display:flex;align-items:center;
  height:58px;padding:0 clamp(22px,3.2vw,48px);
  border-bottom:1px solid var(--hair);background:rgba(9,13,19,.75);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.mast-brand{display:flex;align-items:center;gap:12px}
.mast-glyph{width:26px;height:26px;color:var(--gold)}
.mast-glyph svg{width:26px;height:26px}
.mast-name{font-family:var(--serif);font-style:italic;font-size:26px;letter-spacing:-.01em;color:var(--tx)}

/* ------------------------------------------------------------------ gate -- */
.gate{
  position:relative;z-index:2;height:calc(100vh - 58px);height:calc(100dvh - 58px);
  min-height:calc(100vh - 58px);
  display:flex;flex-direction:column;overflow:hidden;
  animation:gateIn .8s var(--ease) both;
}
@keyframes gateIn{from{opacity:0}to{opacity:1}}
/* The row is locked to the viewport: each column scrolls on its own, so a
   taller form can never push the editorial panel or skew the composition. */
.gate-grid{
  flex:1;min-height:0;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.14fr) minmax(400px,.86fr);
}

/* ------------------------------------------------------------- editorial -- */
.editorial{
  --padl:clamp(28px,4.2vw,80px);
  position:relative;overflow:hidden;min-height:0;
  display:flex;align-items:center;
  border-right:1px solid var(--hair);
  background:
    radial-gradient(62% 50% at 32% 44%,rgba(198,164,81,.06),transparent 72%),
    linear-gradient(155deg,rgba(9,14,22,.26),rgba(6,10,16,.50) 74%);
}
.editorial-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(232,237,243,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(232,237,243,.02) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(78% 74% at 34% 48%,#000,transparent 88%);
}
.editorial-inner{
  position:relative;width:100%;height:100%;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:clamp(24px,3.6vh,44px) var(--padl) clamp(24px,3.6vh,44px) calc(var(--padl) + 16px);
}
/* instrument ruler down the far edge — texture, not content */
.editorial::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:44%;pointer-events:none;
  background:linear-gradient(0deg,rgba(198,164,81,.055),transparent 78%);
}
.editorial::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:20px;pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,rgba(198,164,81,.20) 0 1px,transparent 1px 15px),
    linear-gradient(90deg,rgba(198,164,81,.05),transparent 85%);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);
}
/* closing marker, bottom left — a hairline and a gold lozenge */
.editorial-inner::after{
  content:"";position:absolute;left:var(--padl);bottom:clamp(24px,3.6vh,44px);
  width:72px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);
}
.editorial-inner::before{
  content:"";position:absolute;left:calc(var(--padl) + 80px);bottom:calc(clamp(24px,3.6vh,44px) - 2px);
  width:5px;height:5px;background:var(--gold);transform:rotate(45deg);
}
.editorial-head{position:relative;z-index:1;margin:auto 0;padding-top:clamp(18px,3.4vh,34px)}
.crest{
  position:relative;z-index:1;display:block;width:60px;height:60px;flex:0 0 auto;
  filter:drop-shadow(0 0 18px rgba(198,164,81,.18));
}
.crest svg{width:100%;height:100%;animation:crestSpin 40s linear infinite}
@keyframes crestSpin{to{transform:rotate(360deg)}}
.editorial-title{
  font-family:var(--serif);font-weight:400;opacity:1;
  font-size:clamp(48px,5.8vw,94px);line-height:1.03;letter-spacing:-.03em;
  color:#F2F6FB;text-shadow:0 2px 46px rgba(232,237,243,.10);
  text-wrap:balance;font-feature-settings:"kern" 1,"liga" 1;
}
.editorial-title em{
  font-style:italic;color:#D9C285;
  background:linear-gradient(100deg,#A98A3F 0%,#D9C285 28%,#F4E7BD 46%,#D9C285 64%,#A98A3F 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:sheen 11s var(--ease) infinite;
}
@keyframes sheen{0%{background-position:180% 0}100%{background-position:-80% 0}}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .editorial-title em{background:none;-webkit-text-fill-color:#D9C285}
}
.gold-rule{display:flex;align-items:center;gap:10px;margin-top:clamp(22px,3.6vh,38px)}
.gold-rule::after{content:"";flex:0 0 78px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.gold-rule i{width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}

/* ------------------------------------------------------- access console -- */
.access{
  position:relative;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:clamp(24px,3.6vh,46px) clamp(30px,4vw,72px);
  /* frosted depth, but no gradient band across the heading */
  background:rgba(16,22,32,.72);
  backdrop-filter:blur(22px) saturate(120%);
  -webkit-backdrop-filter:blur(22px) saturate(120%);
  box-shadow:-1px 0 46px rgba(198,164,81,.05);
}
.access::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold-line) 32%,transparent 72%);
}
.corner{position:absolute;width:15px;height:15px;border-color:var(--gold-line);border-style:solid;opacity:.75}
.corner.tl{top:16px;left:16px;border-width:1px 0 0 1px}
.corner.tr{top:16px;right:16px;border-width:1px 1px 0 0}
.corner.bl{bottom:16px;left:16px;border-width:0 0 1px 1px}
.corner.br{bottom:16px;right:16px;border-width:0 1px 1px 0}
.access-inner{
  position:relative;width:100%;max-width:364px;flex:0 0 auto;margin:0 auto;
  animation:rise .9s var(--ease) backwards;
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.access-head{margin-bottom:clamp(18px,2.8vh,28px)}
.access-head h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,3vw,40px);line-height:1.08;letter-spacing:-.02em;color:var(--tx);
  text-wrap:balance;
}
.access-head p{margin-top:10px;color:#8F9CAB;font-size:13px;line-height:1.6}

.tabs{position:relative;display:flex;gap:30px;border-bottom:1px solid var(--hair);margin-bottom:clamp(18px,2.6vh,26px)}
.tab{
  position:relative;padding:0 0 13px;color:var(--dim);font-size:11.5px;font-weight:500;
  letter-spacing:.06em;transition:color .2s var(--ease);
}
.tab:hover{color:var(--tx-2)}
.tab.is-active{color:var(--tx)}
.tab-ink{
  position:absolute;bottom:-1px;left:0;width:0;height:1px;background:var(--gold);
  box-shadow:0 0 10px rgba(198,164,81,.45);
  transition:width .38s var(--ease),transform .38s var(--ease);
}
.tabs.is-reset .tab-ink{opacity:.25}

/* ---------------------------------------------------------------- fields -- */
.form{display:flex;flex-direction:column;gap:clamp(9px,1.5vh,15px);animation:fade .35s var(--ease) backwards}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.field{position:relative;border-bottom:1px solid var(--hair-2);transition:border-color .22s var(--ease)}
.field:focus-within{border-bottom-color:var(--gold)}
.field input{
  width:100%;height:clamp(42px,5.2vh,48px);padding:18px 2px 4px;
  border:0;border-radius:0;background:transparent;color:var(--tx);
  font-size:14px;outline:none;
}
.field.has-action input{padding-right:56px}
.field label{
  position:absolute;left:2px;top:16px;color:#8B98A8;font-size:13px;
  pointer-events:none;transform-origin:left top;
  transition:transform .22s var(--ease),color .22s var(--ease);
}
.field input:focus+label,.field input:not(:placeholder-shown)+label{
  transform:translateY(-13px) scale(.76);color:var(--gold);
}
.field input:-webkit-autofill{-webkit-text-fill-color:var(--tx);-webkit-box-shadow:0 0 0 1000px var(--panel) inset}
.field.is-invalid{border-bottom-color:rgba(228,91,102,.6)}
.field.is-invalid label{color:var(--red)}
.field.is-invalid input{color:#F4D9DC}
.field-error{position:absolute;left:2px;bottom:-16px;display:none;color:var(--red);font-size:10px;white-space:nowrap}
.field.is-invalid .field-error{display:block}
.eye{position:absolute;right:0;top:17px;padding:5px 2px;color:var(--dim-2);font-size:8px;letter-spacing:.14em;transition:color .2s var(--ease)}
.eye:hover{color:var(--gold)}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
.check{display:flex;align-items:center;gap:9px;color:var(--dim);font-size:11.5px;cursor:pointer;user-select:none}
.check input{position:absolute;opacity:0;width:0;height:0}
.check-box{flex:0 0 14px;width:14px;height:14px;border:1px solid var(--hair-3);position:relative;transition:all .2s var(--ease)}
.check input:checked+.check-box{background:var(--gold);border-color:var(--gold)}
.check input:checked+.check-box::after{
  content:"";position:absolute;left:4px;top:1px;width:3px;height:7px;
  border:solid var(--gold-ink);border-width:0 1.5px 1.5px 0;transform:rotate(42deg);
}
.check input:focus-visible+.check-box{outline:1px solid var(--gold);outline-offset:2px}
.check.is-invalid .check-box{border-color:var(--red)}
.terms{align-items:flex-start;margin-top:0}
.terms .check-box{margin-top:2px}
.link{color:var(--gold);font-size:11.5px;transition:color .2s var(--ease)}
.link:hover{color:var(--gold-2);text-decoration:underline;text-underline-offset:3px}
.back-link{align-self:center;margin-top:2px}
.form-error{padding:10px 12px;border-left:2px solid var(--red);background:rgba(228,91,102,.06);color:#f2b6bc;font-size:11.5px;line-height:1.5}
.form-note{color:#8F9CAB;font-size:11.5px;line-height:1.7;padding-bottom:4px}
.strength{display:flex;align-items:center;gap:12px;margin-top:-4px}
.strength-bars{display:flex;gap:4px;flex:1}
.strength-bars i{height:2px;flex:1;background:var(--hair-2);transition:background .3s var(--ease)}
.strength span{font-size:8px;letter-spacing:.14em;color:var(--dim-2);min-width:66px;text-align:right}
.strength[data-s="1"] i:nth-child(-n+1){background:var(--red)}
.strength[data-s="2"] i:nth-child(-n+2){background:var(--gold-3)}
.strength[data-s="3"] i:nth-child(-n+3){background:var(--gold)}
.strength[data-s="4"] i{background:var(--grn)}
.strength[data-s="1"] span{color:var(--red)}
.strength[data-s="4"] span{color:var(--grn)}

/* --------------------------------------------------------------- buttons -- */
.btn{
  position:relative;display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;height:clamp(46px,5.6vh,52px);border-radius:0;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.22em;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.btn.primary{margin-top:8px;background:var(--gold);color:var(--gold-ink);box-shadow:0 10px 30px rgba(198,164,81,.13)}
.btn.primary:hover{background:var(--gold-2);transform:translateY(-2px)}
.btn.primary:active{transform:none}
.btn-arrow{position:absolute;right:18px;font-size:14px;font-family:var(--sans);transition:transform .25s var(--ease)}
.btn.primary:hover .btn-arrow{transform:translateX(4px)}
.btn.ghost{margin-top:10px;border:1px solid var(--hair-2);color:var(--tx-2);letter-spacing:.14em}
.btn.ghost:hover{border-color:var(--gold-line);color:var(--tx)}
.btn-spin{display:none;width:14px;height:14px;border-radius:50%;border:2px solid rgba(11,15,20,.25);border-top-color:var(--gold-ink);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.is-busy{pointer-events:none}
.btn.is-busy .btn-spin{display:block}
.btn.is-busy .btn-arrow{display:none}
.btn.is-busy .btn-label{opacity:.75}

.divider{display:flex;align-items:center;gap:14px;margin:clamp(16px,2.4vh,24px) 0 clamp(11px,1.8vh,16px);color:var(--dim);font-size:7.5px;letter-spacing:.24em}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--hair)}
.sso{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sso-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  height:clamp(40px,5.2vh,44px);border:1px solid var(--hair-2);
  color:var(--tx-2);font-size:11.5px;transition:border-color .2s var(--ease),color .2s var(--ease);
}
.sso-btn svg{width:15px;height:15px;color:var(--tx)}
.sso-btn:hover{border-color:var(--gold-line);color:var(--tx)}
.legal{margin-top:clamp(11px,1.8vh,16px);color:var(--dim-2);font-size:10px;line-height:1.7;text-align:center}
.access-foot{
  width:100%;margin-top:auto;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;height:48px;
  border-top:1px solid var(--hair);
  background:linear-gradient(180deg,rgba(9,13,19,0),rgba(9,13,19,.55));
  color:var(--dim-2);font-size:7.5px;letter-spacing:.22em;
}

/* ------------------------------------------------------------ authed UI -- */
.authed{position:relative;z-index:2;min-height:calc(100vh - 58px);min-height:calc(100dvh - 58px);display:grid;place-items:center;padding:40px 20px;animation:gateIn .8s var(--ease) both}
.authed-card{position:relative;width:100%;max-width:420px;padding:clamp(28px,4vh,42px);border:1px solid var(--hair-2);background:var(--panel);text-align:center}
.authed-card::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-line),transparent)}
.avatar{
  width:62px;height:62px;margin:0 auto 24px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--serif);font-style:italic;font-size:22px;color:var(--gold-2);
  border:1px solid var(--gold-line);background:var(--gold-soft);
}
.authed-card h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.2vw,38px);letter-spacing:-.02em}
.authed-sub{margin-top:9px;color:var(--dim);font-size:12.5px}
.kv{margin:28px 0 26px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);text-align:left}
.kv>div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 2px}
.kv>div+div{border-top:1px solid var(--hair)}
.kv .k{color:var(--dim-2);font-size:8px;letter-spacing:.18em}
.kv b{font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--tx-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.authed-note{margin-top:18px;color:var(--dim-2);font-size:10px;line-height:1.7}
.authed-mode{margin-top:14px;color:var(--dim-2);font-size:7.5px;letter-spacing:.24em}

/* ---------------------------------------------------------------- toasts -- */
.toasts{position:fixed;z-index:300;right:22px;bottom:22px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:10px;max-width:330px;padding:12px 16px;
  border:1px solid var(--hair-2);background:var(--panel-2);color:var(--tx-2);
  font-size:11.5px;line-height:1.45;box-shadow:0 14px 40px rgba(0,0,0,.4);
  animation:toastIn .3s var(--ease) both;
}
.toast.is-out{animation:toastOut .3s var(--ease) forwards}
.toast{border-left:2px solid var(--gold);padding-left:14px}
.toast i{display:none}
.toast.ok{border-left-color:var(--grn)}
.toast.warn{border-left-color:var(--gold-3)}
.toast.err{border-left-color:var(--red)}
@keyframes toastIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(16px)}}

/* thin, quiet scrollbars — only visible when a form genuinely overflows */
.editorial,.access{scrollbar-width:thin;scrollbar-color:rgba(232,237,243,.10) transparent}
.access::-webkit-scrollbar{width:6px}
.access::-webkit-scrollbar-track{background:transparent}
.access::-webkit-scrollbar-thumb{background:rgba(232,237,243,.10);border-radius:3px}
.access::-webkit-scrollbar-thumb:hover{background:rgba(198,164,81,.30)}


/* ============================================================================
   REFINEMENTS — depth, texture and real interaction
   ========================================================================= */

/* caps-lock warning: absolutely positioned, so it never changes layout */
.caps{
  position:absolute;right:0;bottom:-16px;
  font-family:var(--mono);font-size:8px;letter-spacing:.16em;
  color:var(--amb);text-transform:uppercase;
}

/* a quiet champagne sheen across the primary action */
.btn.primary{overflow:hidden}
.btn.primary::before{
  content:"";position:absolute;top:-45%;left:-45%;width:26%;height:190%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);transition:left .75s var(--ease);
}
.btn.primary:hover::before{left:118%}

/* tab label: a touch more air */
.tab{letter-spacing:.08em}

/* the rule under the headline picks up a soft bloom */
.gold-rule i{box-shadow:0 0 10px rgba(198,164,81,.55)}

/* ------------------------------------------------------------ responsive -- */
@media (max-width:1180px){
  .gate-grid{grid-template-columns:minmax(0,1fr) minmax(360px,.95fr)}
  .editorial-inner{padding-left:clamp(22px,3vw,40px);padding-right:clamp(22px,3vw,40px)}
  .editorial-title{font-size:clamp(42px,5vw,64px)}
}
@media (max-height:820px){
  .editorial-title{font-size:clamp(40px,4.6vw,60px)}
  .gold-rule{margin-top:20px}
  .crest{margin-bottom:18px}
  .access{padding-top:20px;padding-bottom:20px}
  .access-head{margin-bottom:16px}
  .tabs{margin-bottom:16px}
  .divider{margin:14px 0 10px}
  .legal{margin-top:10px}
}
@media (max-height:660px){
  .editorial-title{font-size:clamp(30px,3.4vw,44px)}
  .crest{display:none}
  .gold-rule{margin-top:14px}
  .field input{height:40px;padding-top:16px}
  .field label{top:11px}
  .eye{top:12px}
  .btn{height:40px}
  .divider{margin:10px 0 8px}
  .sso-btn{height:34px}
  .legal{display:none}
  .access-foot{display:none}
}
@media (max-width:900px){
  .gate{height:auto;min-height:calc(100dvh - 58px);overflow:visible}
  .gate-grid{overflow:visible;grid-template-columns:1fr}
  .editorial{overflow:visible;border-right:0;border-bottom:1px solid var(--hair)}
  .access{overflow:visible;place-items:start center;padding:26px 22px 40px}
  .editorial-inner{height:auto;padding:24px 24px 20px}
  .editorial-title{font-size:clamp(30px,6vw,44px);line-height:1.08}
  .editorial-title br{display:none}
  .editorial-title em{display:block}
  .corner{display:none}
}
@media (max-width:480px){
  .masthead{height:52px;padding:0 16px}
  .mast-name{font-size:22px}
  .editorial-inner{padding:18px 16px 14px}
  .editorial-title{font-size:30px}
  .crest{width:42px;height:42px;margin-bottom:14px}
  .access{padding:22px 18px 32px}
  .access-head h2{font-size:27px}
  .tabs{gap:20px}
  .sso{grid-template-columns:1fr}
  .authed-card{padding:24px 20px}
}