/* =====================================================================
   Sign-in page.

   A branded panel beside the form, animated entirely in CSS and SVG so it
   costs no extra request and nothing for the content security policy to
   block. The motif is drifting flax fibre, which is what MAK Overseas
   actually ships -- an abstract shape here would have been decoration; this
   is the company.

   The panel is a dark brand surface in BOTH themes, so its colours are fixed
   rather than taken from the theme tokens. Building it from --ink would flip
   it to a pale panel in light mode while its text stayed white.
   ===================================================================== */

.bare{min-height:100vh; background:var(--surface)}

.auth{
  min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr;
}

/* --------------------------------------------------------- brand panel */

.auth-hero{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  padding:44px 52px; color:#FFF;
  background:
    radial-gradient(900px 620px at 18% 8%, #12314A 0%, transparent 62%),
    radial-gradient(760px 560px at 88% 92%, #0B3D57 0%, transparent 58%),
    linear-gradient(155deg, #0A1B29 0%, #0B2436 48%, #0A1B29 100%);
}

/* The drifting fibre field. Three layers at different speeds gives depth
   without a single image file. */
.fibres{position:absolute; inset:-10%; opacity:.5; pointer-events:none}
.fibres path{fill:none; stroke-linecap:round}
.fibres .f1{stroke:#00AEEF; stroke-width:1.1; opacity:.55; animation:drift 26s ease-in-out infinite}
.fibres .f2{stroke:#7FD9F7; stroke-width:.8;  opacity:.34; animation:drift 34s ease-in-out infinite reverse}
.fibres .f3{stroke:#E31F25; stroke-width:.9;  opacity:.22; animation:drift 44s ease-in-out infinite}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  33%    {transform:translate3d(-2.2%,1.6%,0) rotate(.7deg)}
  66%    {transform:translate3d(1.8%,-1.3%,0) rotate(-.5deg)}
}

/* A slow sweep of light across the panel, like sun moving over a field. */
.auth-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 34%, rgba(255,255,255,.055) 50%, transparent 66%);
  background-size:280% 100%;
  animation:sweep 13s linear infinite;
}
@keyframes sweep{ from{background-position:180% 0} to{background-position:-80% 0} }

.hero-top{position:relative; z-index:2; display:flex; align-items:center; gap:13px}
.hero-top .brand-mark{filter:drop-shadow(0 4px 14px rgba(0,0,0,.4))}
.hero-name{display:flex; flex-direction:column; line-height:1.25}
.hero-name strong{font-size:1.06rem; letter-spacing:.01em}
.hero-name small{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#7FD9F7}

.hero-mid{position:relative; z-index:2; margin-top:auto; margin-bottom:auto; max-width:30rem}
.hero-mid h2{
  font-family:var(--f-display); color:#FFF; font-size:clamp(1.9rem,3.3vw,2.7rem);
  line-height:1.16; margin:0 0 .5em; letter-spacing:-.015em;
}
.hero-mid h2 em{font-style:normal; color:#38C0F0}
.hero-mid p{color:#B9CEDB; font-size:1.02rem; line-height:1.65; margin:0}

.hero-points{position:relative; z-index:2; display:flex; flex-direction:column; gap:11px;
  margin-top:30px}
.hero-point{display:flex; align-items:center; gap:11px; color:#D6E5EE; font-size:.92rem}
.hero-point .ico{color:#38C0F0; flex:none}

.hero-foot{position:relative; z-index:2; margin-top:auto; padding-top:28px;
  color:#7E9BAC; font-size:.78rem; display:flex; align-items:center; gap:10px; flex-wrap:wrap}

/* ------------------------------------------------------------ the form */

.auth-form{
  display:flex; align-items:center; justify-content:center; padding:40px 28px;
  background:var(--surface); position:relative;
}
.auth-tools{position:absolute; top:18px; inset-inline-end:20px; display:flex; gap:6px}

.auth-card{width:100%; max-width:392px}
.auth-card > header{margin-bottom:26px}
.auth-card h1{font-size:1.75rem; margin-bottom:.25em}
.auth-card > header p{color:var(--muted); margin:0}

.auth-card .field{margin-bottom:15px}
.auth-card .field input{padding:12px 14px; font-size:.98rem}

/* The lift on focus is the whole "interactive" affordance: it tells you
   which field is live without a border colour people may not perceive. */
.input-wrap{position:relative; transition:transform .18s cubic-bezier(.2,.8,.3,1)}
.input-wrap:focus-within{transform:translateY(-1px)}
.input-wrap .lead{position:absolute; inset-inline-start:13px; top:50%; transform:translateY(-50%);
  color:var(--muted); pointer-events:none; transition:color .18s}
.input-wrap:focus-within .lead{color:var(--brand)}
.input-wrap input{padding-inline-start:42px !important}
.reveal{position:absolute; inset-inline-end:8px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--muted); cursor:pointer; padding:6px; border-radius:8px}
.reveal:hover{color:var(--ink); background:var(--surface)}

.auth-card .btn{padding:12px 20px; font-size:.98rem}
.caps-warn{display:flex; align-items:center; gap:7px; margin-top:8px; font-size:.82rem;
  color:var(--warn)}

/* Two-step verification: one wide, generously spaced field. Six digits
   read back to a person far better than a cramped box. */
.code-input{
  text-align:center; font-family:var(--f-mono); font-size:1.7rem !important;
  letter-spacing:.5em; text-indent:.5em; padding:14px !important; direction:ltr;
}

.auth-foot{margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
  color:var(--muted); font-size:.82rem; display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* --------------------------------------------------------- responsive */

@media (max-width:960px){
  .auth{grid-template-columns:1fr}
  .auth-hero{padding:26px 24px; min-height:230px}
  .hero-mid{margin:18px 0}
  .hero-mid h2{font-size:1.6rem}
  .hero-points,.hero-foot{display:none}
  .auth-form{padding:28px 20px 46px}
}

@media (prefers-reduced-motion: reduce){
  .fibres path,.auth-hero::after{animation:none}
  .input-wrap{transition:none}
}