/*
 * Auth (login / register / forgot / reset) styles.
 * Loaded via templates/layout/auth.twig. Scoped under .auth-shell.
 * Design tokens (--rh-*) come from ravenhub-tokens.css.
 */

.auth-shell{font-family:var(--rh-font-body);color:var(--rh-fg);line-height:1.55;min-height:100vh;background:var(--rh-bg)}
.auth-shell a{color:var(--rh-purple-glow);text-decoration:none}
.auth-shell a:hover{text-decoration:underline}

.auth-shell .layout{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}

/* ------ brand panel (left) ------ */
.auth-shell .brand-panel{padding:48px;background:radial-gradient(900px 700px at 0% 0%,rgba(101,0,205,.36),transparent 65%),var(--rh-bg-deepest);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-shell .brand-panel.variant-register{background:radial-gradient(900px 700px at 100% 0%,rgba(247,118,65,.32),transparent 65%),var(--rh-bg-deepest)}
.auth-shell .brand-panel::after{content:"";position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(247,118,65,.25),transparent 70%);bottom:-200px;right:-160px;pointer-events:none}
.auth-shell .brand-panel.variant-register::after{background:radial-gradient(circle,rgba(101,0,205,.28),transparent 70%);bottom:auto;right:auto;top:-180px;left:-160px}
.auth-shell .brand{display:flex;align-items:center;gap:10px;font-family:var(--rh-font-display);font-weight:600;font-size:18px;color:var(--rh-fg);position:relative;z-index:1;text-decoration:none}
.auth-shell .brand:hover{text-decoration:none}
/* .brand-mark used to be a CSS-only gradient block; the rebrand round
   replaced it with an <img> of the real logo. Drop the gradient backdrop
   when the element is an image, otherwise the PNG's transparent edges
   show through as a pink/purple box. */
.auth-shell span.brand-mark{width:26px;height:26px;border-radius:7px;background:var(--rh-grad-primary);display:inline-block}
.auth-shell img.brand-mark{width:26px;height:26px;border-radius:7px;background:none;object-fit:contain;display:inline-block}
.auth-shell .brand-pitch{position:relative;z-index:1;max-width:480px}
.auth-shell .brand-pitch .eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--rh-purple-glow);font-weight:600;margin-bottom:18px}
.auth-shell .brand-panel.variant-register .brand-pitch .eyebrow{color:var(--rh-warning)}
.auth-shell .brand-pitch h1{font-family:var(--rh-font-display);font-size:40px;line-height:1.1;letter-spacing:-.02em;font-weight:600;margin:0 0 18px}
.auth-shell .brand-pitch h1 em{font-style:normal;background:var(--rh-grad-hero);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-shell .brand-pitch p{color:var(--rh-fg-muted);font-size:16px;margin:0 0 28px;line-height:1.6}
.auth-shell .brand-bullets{display:grid;gap:12px;font-size:14px;color:var(--rh-fg-muted);padding:0;margin:0;list-style:none}
.auth-shell .brand-bullets li{list-style:none;display:flex;align-items:center;gap:10px}
.auth-shell .brand-bullets i{color:var(--rh-success);font-size:18px}
.auth-shell .brand-foot{position:relative;z-index:1;color:var(--rh-fg-faint);font-size:12px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.auth-shell .brand-foot a{color:var(--rh-fg-muted)}
.auth-shell .brand-foot .version-chip{font-family:var(--rh-font-mono);font-size:11px;padding:2px 9px;border-radius:999px;background:rgba(101,0,205,.18);color:var(--rh-purple-glow);border:1px solid rgba(101,0,205,.35)}

/* ------ form panel (right) ------ */
.auth-shell .form-panel{padding:48px 56px;display:flex;flex-direction:column;background:var(--rh-bg)}
.auth-shell .tabs{display:inline-flex;gap:4px;background:var(--rh-bg-inset);padding:4px;border-radius:10px;margin-bottom:32px;border:1px solid var(--rh-border);width:fit-content}
.auth-shell .tab{padding:8px 18px;border-radius:7px;font-size:13.5px;font-weight:500;cursor:pointer;color:var(--rh-fg-muted);border:none;background:transparent;font-family:inherit}
.auth-shell .tab.active{background:var(--rh-bg-elev2);color:var(--rh-fg)}

.auth-shell .form-section{max-width:420px}
.auth-shell .form-section.is-hidden{display:none}
.auth-shell .brand-pitch.is-hidden{display:none}
.auth-shell .form-section h2{font-family:var(--rh-font-display);font-size:26px;font-weight:600;margin:0 0 6px;letter-spacing:-.01em}
.auth-shell .form-section .sub{color:var(--rh-fg-muted);margin:0 0 26px;font-size:14.5px}

.auth-shell .form-row{margin-bottom:16px}
.auth-shell label{display:block;font-size:12px;font-weight:600;color:var(--rh-fg-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em}
.auth-shell input[type=text],
.auth-shell input[type=email],
.auth-shell input[type=password]{width:100%;background:var(--rh-bg-inset);border:1px solid var(--rh-border);color:var(--rh-fg);padding:11px 14px;border-radius:9px;font-family:inherit;font-size:14.5px;outline:none;transition:border-color .15s}
.auth-shell input:focus{border-color:var(--rh-purple);box-shadow:0 0 0 2px rgba(101,0,205,.25)}
.auth-shell input.is-error{border-color:var(--rh-danger);box-shadow:0 0 0 2px rgba(255,77,109,.2)}
.auth-shell .hint{font-size:12px;color:var(--rh-fg-faint);margin-top:4px}
.auth-shell .error-text{display:block;font-size:12px;color:var(--rh-danger);margin-top:4px}
.auth-shell .row-between{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;font-size:13px;gap:12px;flex-wrap:wrap}
.auth-shell .check{display:inline-flex;align-items:center;gap:8px;color:var(--rh-fg-muted);cursor:pointer;text-transform:none;letter-spacing:0;font-weight:500;font-size:13.5px;margin-bottom:0}
.auth-shell .check input{accent-color:var(--rh-purple);width:15px;height:15px;margin:0}

.auth-shell .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:9px;font-size:14.5px;font-weight:600;border:1px solid transparent;cursor:pointer;font-family:inherit;line-height:1;width:100%;text-decoration:none}
.auth-shell .btn-primary{background:var(--rh-grad-primary);color:#fff;box-shadow:0 8px 24px -8px rgba(101,0,205,.6)}
.auth-shell .btn-primary:hover{color:#fff;text-decoration:none}
.auth-shell .btn-ghost{background:transparent;border-color:var(--rh-border-strong);color:var(--rh-fg)}
.auth-shell .btn-ghost:hover{background:rgba(255,255,255,.04);text-decoration:none}
.auth-shell .btn[disabled],.auth-shell .btn.is-disabled{opacity:.55;cursor:not-allowed}

.auth-shell .divider{display:flex;align-items:center;gap:14px;margin:24px 0;color:var(--rh-fg-faint);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.auth-shell .divider::before,.auth-shell .divider::after{content:"";height:1px;flex:1;background:var(--rh-border)}

.auth-shell .swap-link{color:var(--rh-fg-muted);font-size:13px;margin-top:24px;text-align:center}
.auth-shell .swap-link a{color:var(--rh-purple-glow);font-weight:600}
.auth-shell .swap-link button.linklike{background:none;border:none;color:var(--rh-purple-glow);font-weight:600;cursor:pointer;font-family:inherit;font-size:inherit;padding:0}
.auth-shell .swap-link button.linklike:hover{text-decoration:underline}

/* ------ password strength meter ------ */
.auth-shell .password-meter{display:flex;gap:4px;margin-top:8px}
.auth-shell .password-meter span{flex:1;height:4px;border-radius:2px;background:var(--rh-bg-elev2);transition:background .15s}
.auth-shell .password-meter[data-strength="1"] span:nth-child(-n+1){background:var(--rh-danger)}
.auth-shell .password-meter[data-strength="2"] span:nth-child(-n+2){background:var(--rh-danger)}
.auth-shell .password-meter[data-strength="3"] span:nth-child(-n+3){background:var(--rh-warning)}
.auth-shell .password-meter[data-strength="4"] span{background:var(--rh-success)}

/* ------ info notice ------ */
.auth-shell .notice{margin-bottom:18px;padding:10px 14px;border-radius:8px;background:rgba(74,180,255,.1);border:1px solid rgba(74,180,255,.32);color:var(--rh-fg-muted);font-size:13px;display:flex;gap:10px;align-items:flex-start}
.auth-shell .notice i{color:var(--rh-info);font-size:16px;margin-top:1px}

/* ------ flash messages inside form panel ------ */
.auth-shell .auth-flash{margin-bottom:18px;padding:10px 14px;border-radius:8px;font-size:13.5px;display:flex;gap:10px;align-items:flex-start}
.auth-shell .auth-flash i{font-size:16px;margin-top:1px;flex-shrink:0}
.auth-shell .auth-flash.success{background:rgba(45,212,127,.12);border:1px solid rgba(45,212,127,.34);color:var(--rh-fg)}
.auth-shell .auth-flash.success i{color:var(--rh-success)}
.auth-shell .auth-flash.error{background:rgba(255,77,109,.12);border:1px solid rgba(255,77,109,.34);color:var(--rh-fg)}
.auth-shell .auth-flash.error i{color:var(--rh-danger)}
.auth-shell .auth-flash.warning{background:rgba(247,181,0,.12);border:1px solid rgba(247,181,0,.34);color:var(--rh-fg)}
.auth-shell .auth-flash.warning i{color:var(--rh-warning)}
.auth-shell .auth-flash.info{background:rgba(74,180,255,.1);border:1px solid rgba(74,180,255,.32);color:var(--rh-fg)}
.auth-shell .auth-flash.info i{color:var(--rh-info)}

/* ------ responsive ------ */
@media (max-width:920px){
  .auth-shell .layout{grid-template-columns:1fr}
  .auth-shell .brand-panel{padding:32px;min-height:auto}
  .auth-shell .form-panel{padding:32px}
  .auth-shell .brand-pitch h1{font-size:32px}
}