/* ============================================================
   auth.css — sign-in and set-password (prefix au-).
   The one bold moment in Robotack OS: a company-yellow panel carrying
   the Robotack logo. Everything else stays quiet.
   Dark mode swaps the panel to deep ink (full yellow glares on a dark UI).
   ============================================================ */
.au-body{ margin:0; min-height:100vh; background:var(--card-bg); }
.au-split{ min-height:100vh; display:grid; grid-template-columns:minmax(380px, 44%) minmax(0, 1fr); }

.au-panel{
  --au-bg:var(--brand); --au-fg:var(--brand-ink); --au-lede:#4A3A00; --au-foot:#5E4700;
  --au-dots:rgba(42,32,0,.12); --au-glow:rgba(255,255,255,.42);
  position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between;
  padding:32px 44px 30px; color:var(--au-fg); background-color:var(--au-bg);
  /* A quiet dot field: the grid the team builds on. */
  background-image:radial-gradient(var(--au-dots) 1px, transparent 1.2px);
  background-size:22px 22px; background-position:-11px -11px;
}
html.dark .au-panel{
  --au-bg:var(--ink-strong); --au-fg:#FFFFFF; --au-lede:#C9C6E2; --au-foot:#9C98BD;
  --au-dots:rgba(255,255,255,.09); --au-glow:rgba(250,190,17,.22);
}
.au-panel::after{
  content:""; position:absolute; inset:auto -20% -35% auto; width:70%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(closest-side, var(--au-glow), transparent); pointer-events:none;
}
[dir="rtl"] .au-panel::after{ inset:auto auto -35% -20%; }
.au-panel-top{ display:flex; align-items:center; gap:10px; position:relative; z-index:1; }
.au-wordmark{ font-family:var(--font-disp); font-weight:700; font-size:18px; letter-spacing:-.02em; }
.au-wordmark span{ font-weight:500; opacity:.62; }
.au-panel-mid{ position:relative; z-index:1; max-width:440px; }
.au-bot{ width:132px; height:132px; display:block; margin-bottom:28px; object-fit:contain; user-select:none;
  filter:drop-shadow(0 10px 18px rgba(42,32,0,.22)); }
/* The logo's outline is dark ink; on the dark panel a light halo keeps the antenna and tail visible. */
html.dark .au-bot{ filter:drop-shadow(0 0 1.5px rgba(255,255,255,.75)) drop-shadow(0 0 1.5px rgba(255,255,255,.75)) drop-shadow(0 10px 24px rgba(250,190,17,.18)); }
.au-greeting{ font-family:var(--font-disp); font-weight:600; font-size:clamp(32px, 3.4vw, 46px); line-height:1.05; letter-spacing:-.03em; color:var(--au-fg); }
.au-lede{ margin-top:14px; font-size:15.5px; line-height:1.55; color:var(--au-lede); max-width:40ch; }
.au-panel-foot{ position:relative; z-index:1; font-size:12.5px; color:var(--au-foot); }

.au-main{ position:relative; display:flex; align-items:center; justify-content:center; padding:48px 24px; }
.au-lang{ position:absolute; top:22px; inset-inline-end:28px; }
.au-lang a{ color:var(--text-muted); text-decoration:none; font-size:13.5px; font-weight:600; padding:6px 10px; border-radius:var(--r-sm); }
.au-lang a:hover{ background:var(--paper-2); color:var(--text-main); }
.au-form-wrap{ width:100%; max-width:380px; }
.au-mobile-brand{ display:none; align-items:center; gap:10px; margin-bottom:28px; color:var(--text-main); }
.au-form{ display:flex; flex-direction:column; gap:18px; }
.au-title{ font-family:var(--font-disp); font-weight:650; font-size:28px; letter-spacing:-.025em; }
.au-sub{ margin-top:-12px; color:var(--text-muted); }
.au-form .os-input{ height:44px; font-size:15px; }

.au-alert{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--r-md);
  background:var(--danger-soft); color:var(--text-main); font-size:13.5px; animation:au-shake .32s var(--ease); }
.au-alert svg{ width:18px; height:18px; color:var(--danger); flex:none; margin-top:1px; }
.au-alert strong{ display:block; font-weight:650; }
.au-alert span{ color:var(--text-muted); }
.au-alert.info{ background:var(--success-soft); animation:none; }
.au-alert.info svg{ color:var(--success); }
@keyframes au-shake{ 0%,100%{ transform:none; } 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }

.au-password{ position:relative; }
.au-password .os-input{ padding-inline-end:46px; }
.au-reveal{ position:absolute; top:4px; inset-inline-end:4px; width:36px; height:36px; display:grid; place-items:center;
  border:0; border-radius:var(--r-sm); background:none; color:var(--text-subtle); cursor:pointer; }
.au-reveal:hover{ background:var(--paper-2); color:var(--text-main); }
.au-reveal svg{ width:18px; height:18px; }
.au-caps{ color:var(--warning); font-size:12.5px; font-weight:600; }
.au-submit{ width:100%; margin-top:4px; }
/* The sign-in action wears the brand yellow to match the panel (dark ink on yellow, 9.6:1). */
.btn.primary.au-submit{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); box-shadow:0 1px 2px rgba(42,32,0,.2); }
.btn.primary.au-submit:hover{ background:#EDB00A; border-color:#EDB00A; color:var(--brand-ink); }
.btn.primary.au-submit:active{ background:#DCA200; border-color:#DCA200; }
.btn.primary.au-submit:focus-visible{ outline-color:rgba(250,190,17,.45); }
.btn.primary.au-submit:disabled, .btn.primary.au-submit[disabled]{ background:var(--disabled-bg); border-color:var(--border); color:var(--disabled-text); box-shadow:none; }
.au-help{ color:var(--text-subtle); font-size:13px; line-height:1.5; }
.au-signout{ margin-top:14px; text-align:center; }

.au-meter{ height:4px; border-radius:4px; background:var(--paper-2); overflow:hidden; margin-top:2px; }
.au-meter span{ display:block; height:100%; width:0; border-radius:4px; background:var(--danger); transition:width .2s var(--ease), background .2s; }
.au-rules{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--text-subtle); }
.au-rules li{ display:flex; align-items:center; gap:8px; }
.au-rules li::before{ content:""; width:14px; height:14px; border-radius:50%; border:1.5px solid var(--border); flex:none; }
.au-rules li.ok{ color:var(--success); }
.au-rules li.ok::before{ border-color:var(--success); background:var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat; }

@media (max-width: 900px){
  .au-split{ grid-template-columns:1fr; }
  .au-panel{ display:none; }
  .au-mobile-brand{ display:flex; }
  .au-main{ align-items:flex-start; padding-top:72px; }
}