/* =====================================================================
   THRUBITS — auth pages
   Layers on top of thrubits.css, which supplies the tokens and buttons.
   Ported verbatim from the approved auth preview.
   ===================================================================== */

body{min-height:100vh;display:flex;flex-direction:column}
.auth{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:0;position:relative}

/* ---- left: brand panel ---- */
.aside{position:relative;padding:clamp(44px,6vw,74px);display:flex;flex-direction:column;justify-content:space-between;
  border-inline-end:1px solid var(--line);overflow:hidden;background:var(--bg-2)}
.aside::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 380px at 22% 24%,rgba(116,66,160,.32),transparent 66%),
             radial-gradient(460px 340px at 78% 78%,rgba(0,232,211,.16),transparent 68%)}
.aside::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(ellipse 76% 62% at 40% 44%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 76% 62% at 40% 44%,#000,transparent 76%)}
.aside>*{position:relative;z-index:2}
.aside h2{font-size:clamp(1.7rem,2.8vw,2.35rem);margin:20px 0 14px;max-width:15ch}
.aside p{color:var(--muted);font-size:.95rem;max-width:44ch}
.a-list{display:grid;gap:16px;margin-top:38px}
.a-item{display:flex;gap:14px;align-items:flex-start}
.a-item .ic{width:34px;height:34px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;
  background:rgba(0,232,211,.09);border:1px solid rgba(0,232,211,.25);color:var(--accent)}
.a-item .ic svg{width:16px;height:16px}
.a-item b{display:block;font-family:var(--display);font-size:.94rem;margin-bottom:2px}
.a-item span{font-size:.83rem;color:var(--muted);line-height:1.5}
.a-foot{display:flex;align-items:center;gap:14px;font-size:.79rem;color:var(--muted-2);flex-wrap:wrap}
.a-foot .sep{width:4px;height:4px;border-radius:50%;background:var(--muted-2)}

/* ---- right: form panel ---- */
.pane{padding:clamp(40px,5vw,68px) clamp(24px,4vw,64px);display:flex;align-items:center;justify-content:center}
.card{width:100%;max-width:430px}
.tabs{display:flex;gap:4px;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:100px;margin-bottom:30px}
.tabs button{flex:1;font-family:var(--display);font-weight:600;font-size:.88rem;padding:10px;border-radius:100px;
  border:none;background:none;color:var(--muted);cursor:pointer;transition:.22s}
.tabs button.on{background:var(--accent);color:var(--on-accent)}
.card h1{font-size:1.7rem;margin-bottom:8px}
.card .sub{color:var(--muted);font-size:.9rem;margin-bottom:28px}

.field{margin-bottom:16px}
.field label{display:block;font-family:var(--display);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:7px;font-weight:600}
.inp{position:relative;display:flex;align-items:center}
.inp input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;color:var(--ink);font-family:var(--body);font-size:.93rem;transition:.2s}
.inp.has-ic input{padding-inline-start:42px}
.inp .lic{position:absolute;inset-inline-start:14px;width:17px;height:17px;color:var(--muted-2);pointer-events:none;transition:.2s}
.inp input:focus{outline:none;border-color:rgba(0,232,211,.55);box-shadow:0 0 0 3px rgba(0,232,211,.10)}
.inp input:focus~.lic{color:var(--accent)}
.inp .eye{position:absolute;inset-inline-end:12px;background:none;border:none;color:var(--muted-2);cursor:pointer;
  padding:5px;display:grid;place-items:center;border-radius:6px;transition:.2s}
.inp .eye:hover{color:var(--ink)}
.inp .eye svg{width:17px;height:17px}
.err{color:#FF6B6B;font-size:.75rem;margin-top:6px;display:none}
.field.bad .inp input{border-color:rgba(255,107,107,.6)}
.field.bad .err{display:block}

.meter{display:flex;gap:4px;margin-top:9px}
.meter i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.10);transition:.3s}
.meter.s1 i:nth-child(1){background:#FF6B6B}
.meter.s2 i:nth-child(-n+2){background:#FFC53D}
.meter.s3 i:nth-child(-n+3){background:#2090E4}
.meter.s4 i{background:var(--accent)}
.meter-lbl{font-size:.72rem;color:var(--muted-2);margin-top:6px}

.row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:6px 0 22px;flex-wrap:wrap}
.check{display:flex;align-items:flex-start;gap:9px;font-size:.83rem;color:var(--muted);cursor:pointer;line-height:1.5}
.check input{appearance:none;width:17px;height:17px;flex:0 0 auto;margin-top:2px;border:1px solid var(--line-strong);
  border-radius:5px;background:var(--bg);cursor:pointer;transition:.18s;position:relative}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{content:"";position:absolute;inset:0;background:no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23042B26' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.check a{color:var(--accent)}
.link{font-size:.83rem;color:var(--accent)}
.link:hover{text-decoration:underline}
.submit{width:100%;margin-bottom:18px}
.alt{text-align:center;font-size:.86rem;color:var(--muted)}
.alt a{color:var(--accent);font-weight:600}
.note{margin-top:26px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);
  font-size:.78rem;color:var(--muted);display:flex;gap:10px;align-items:flex-start;line-height:1.55}
.note svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;color:var(--accent)}
.hide{display:none}

@media(max-width:900px){
  .auth{grid-template-columns:1fr}
  .aside{border-inline-end:none;border-bottom:1px solid var(--line);padding-bottom:44px}
  .a-list{display:none}
}

/* ---------------------------------------------------------------------
   Added for the live build: states the preview faked with a script.
   --------------------------------------------------------------------- */
.field.good .inp { border-color: rgba(52, 211, 153, .45); }
.field.bad  .inp { border-color: rgba(248, 113, 113, .55); }
.field.bad  .err { display: block; }

.form-msg { margin-top: 14px; font-size: .87rem; border-radius: 10px; padding: 11px 14px; border: 1px solid; }
.form-msg.ok  { color: #6EE7B7; background: rgba(52, 211, 153, .08); border-color: rgba(52, 211, 153, .32); }
.form-msg.bad { color: #FCA5A5; background: rgba(248, 113, 113, .08); border-color: rgba(248, 113, 113, .35); }

.check.bad span { color: #FCA5A5; }
.eye.on { color: var(--link); }

/* ---------------------------------------------------------------------
   Field icons and focus, corrected for the current palette.
   The stylesheet was written when the brand still had a cyan; it does not,
   so those references now resolve to --accent. An undefined custom property
   is not an error — it just renders as nothing, which is why the active tab
   looked empty and the focus ring never appeared.
   --------------------------------------------------------------------- */
.inp .lic { position: absolute; inset-inline-start: 14px; width: 17px; height: 17px; flex: 0 0 17px; }
.inp svg  { width: 17px; height: 17px; }
.inp .eye svg { width: 17px; height: 17px; }

.inp input:focus { border-color: rgba(168,85,247,.55); box-shadow: 0 0 0 3px rgba(168,85,247,.12); }
.inp input:focus ~ .lic { color: var(--purple-lift); }

.tabs button.on { background: var(--brand-grad); color: #fff; }

/* Chrome paints autofilled inputs a hard white. Match the field instead. */
.inp input:-webkit-autofill,
.inp input:-webkit-autofill:hover,
.inp input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 40px var(--bg) inset;
  caret-color: var(--ink);
  transition: background-color 9999s ease-out;
}

/* =====================================================================
   MOBILE
   The site header hides .nav-cta .btn-ghost below 820px because those
   buttons move into the burger menu. The auth header has no burger and
   no nav links — its only ghost button is "Back to site", so the rule
   made the single way back disappear.
   ===================================================================== */
@media (max-width: 820px) {
  .nav-cta .btn-ghost { display: inline-flex; }
  .nav-in { gap: 10px; }
  .nav-cta { gap: 8px; }
  .lang-btn span { display: none; }          /* the globe is enough */
  .lang-btn { padding: 9px 11px; }
}

@media (max-width: 700px) {
  .auth { grid-template-columns: 1fr; }

  /* The form is why someone is here. On a phone the brand panel would put
     three paragraphs between them and the password field, so it moves below. */
  .aside { order: 2; border-bottom: none; border-top: 1px solid var(--line); padding: 38px 22px 44px; }
  .pane  { order: 1; padding: 26px 18px 34px; }

  .aside h2 { font-size: 1.45rem; }
  .a-foot { flex-wrap: wrap; gap: 8px; font-size: .78rem; }
  .a-foot .sep { display: none; }

  .card { padding: 24px 20px; border-radius: 16px; }
  .card h1 { font-size: 1.45rem; }
  .tabs { margin-bottom: 22px; }
  .row { flex-wrap: wrap; gap: 10px; }
}

@media (max-width: 420px) {
  .pane { padding: 20px 14px 30px; }
  .card { padding: 20px 16px; }
  .tabs button { font-size: .82rem; padding: 9px 6px; }
}