/* ============================================================================
   TRam Studio — auth shell ("The Wire")
   Scope: signed-out pages only (Login / Register / MagicLinkSent).
   Self-contained: does not depend on studio-theme.css tokens.
   ============================================================================ */

.auth-body{
  --a-accent:#0fb5a1;
  --a-gold:#c9a227;
  --a-navy:#0f1420;
  --a-navy2:#131a29;
  --a-line:#22304a;
  --a-txt:#e8edf6;
  --a-dim:#8fa3c4;
  --a-dimmer:#4d5f82;
  --a-mono:'JetBrains Mono',monospace;
  --a-disp:'Space Grotesk',sans-serif;
  --a-body:'Inter',sans-serif;

  margin:0;
  font-family:var(--a-body);
  background:var(--a-navy);
  color:var(--a-txt);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow-x:hidden;
}
.auth-body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(34,48,74,.4) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,48,74,.4) 1px,transparent 1px);
  background-size:56px 56px;
}
.auth-body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 500px at 28% 40%, rgba(15,181,161,.13), transparent 60%),
    radial-gradient(700px 420px at 78% 75%, rgba(201,162,39,.08), transparent 60%);
}

/* ---- header ---- */
.auth-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:30px 52px}
.auth-brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.auth-brand-mark{width:30px;height:30px;border:2px solid var(--a-accent);position:relative;flex:none}
.auth-brand-mark::after{content:"";position:absolute;inset:5px;background:var(--a-accent);clip-path:polygon(0 0,100% 0,100% 35%,35% 35%,35% 100%,0 100%)}
.auth-brand-word{font-family:var(--a-disp);font-weight:700;letter-spacing:.14em;font-size:18px;color:var(--a-txt)}
.auth-brand-word em{font-style:normal;color:var(--a-accent)}
.auth-status{font-family:var(--a-mono);font-size:11px;letter-spacing:.18em;color:var(--a-dim);display:flex;align-items:center;gap:9px}
.auth-status-dot{width:8px;height:8px;background:var(--a-accent);animation:authPdot 2.2s ease infinite}
@keyframes authPdot{0%,100%{box-shadow:0 0 0 0 rgba(15,181,161,.5)}55%{box-shadow:0 0 0 8px rgba(15,181,161,0)}}
.auth-top-right{display:flex;align-items:center;gap:26px}
.auth-theme-toggle{display:flex;align-items:center;gap:9px;background:none;border:none;padding:4px;cursor:pointer}
.auth-theme-toggle:focus-visible{outline:2px solid var(--a-accent);outline-offset:3px}
.att-label{font-family:var(--a-mono);font-size:9px;letter-spacing:.2em;color:var(--a-dimmer);transition:color .2s}
html[data-auth-theme="dark"] .att-label-dark{color:var(--a-accent)}
html[data-auth-theme="light"] .att-label-light{color:var(--a-gold)}
.att-track{position:relative;width:44px;height:20px;border:1.5px solid var(--a-line);background:var(--a-navy2);transition:background .2s,border-color .2s}
.att-knob{position:absolute;top:2px;left:2px;width:13px;height:13px;background:var(--a-accent);transition:transform .25s cubic-bezier(.7,0,.3,1),background .2s}
html[data-auth-theme="light"] .att-knob{transform:translateX(24px);background:var(--a-gold)}

/* ---- main grid ---- */
.auth-main{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center;padding:0 52px 48px;max-width:1500px;width:100%;margin:0 auto;box-sizing:border-box}

/* ---- hero ---- */
.auth-hero h1{font-family:var(--a-disp);font-weight:700;font-size:clamp(32px,3.9vw,54px);line-height:1.08;letter-spacing:-.015em;margin:0}
.auth-hero h1 .hl-a{color:var(--a-accent)}
.auth-hero h1 .hl-g{color:var(--a-gold)}
.auth-hero-sub{margin:22px 0 0;max-width:520px;color:var(--a-dim);font-size:17px;line-height:1.65}

.auth-wire{margin-top:42px;border:1px solid var(--a-line);background:rgba(19,26,41,.82);max-width:600px}
.auth-wire-bar{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--a-line);font-family:var(--a-mono);font-size:10.5px;letter-spacing:.18em;color:var(--a-dimmer)}
.auth-wire-bar i{width:8px;height:8px;background:var(--a-line)}
.auth-wire-bar i:first-child{background:var(--a-accent)}
.auth-wire-bar span{margin-left:8px}
.auth-wire-body{padding:18px 20px;font-family:var(--a-mono);font-size:12.5px;line-height:2;min-height:172px;white-space:pre-wrap;word-break:break-word}
.tk-k{color:var(--a-dim)} .tk-s{color:var(--a-accent)} .tk-g{color:var(--a-gold)} .tk-c{color:var(--a-dimmer)}
.auth-caret{display:inline-block;width:7px;height:14px;background:var(--a-accent);vertical-align:-2px;animation:authBlink 1s steps(1) infinite}
@keyframes authBlink{50%{opacity:0}}

/* ---- panel (the card each page renders into) ---- */
.auth-panel{background:var(--a-navy2);border:1px solid var(--a-line);padding:42px 40px;position:relative;max-width:460px;justify-self:end;width:100%;box-sizing:border-box}
.auth-panel::before{content:"";position:absolute;top:-1px;left:-1px;width:56px;height:56px;border-top:2px solid var(--a-accent);border-left:2px solid var(--a-accent)}
.auth-panel::after{content:"";position:absolute;bottom:-1px;right:-1px;width:56px;height:56px;border-bottom:2px solid var(--a-gold);border-right:2px solid var(--a-gold)}

.auth-eyebrow{font-family:var(--a-mono);font-size:11px;letter-spacing:.22em;color:var(--a-accent);margin:0 0 12px}
.auth-title{font-family:var(--a-disp);font-weight:700;font-size:30px;margin:0 0 6px;color:var(--a-txt)}
.auth-sub{color:var(--a-dim);font-size:14.5px;margin:0 0 28px}
.auth-sub b{color:var(--a-txt)}

.auth-field{margin-bottom:16px}
.auth-label{display:block;font-family:var(--a-mono);font-size:11px;letter-spacing:.16em;color:var(--a-dim);margin-bottom:8px;text-transform:uppercase}
.auth-input{width:100%;box-sizing:border-box;padding:14px 16px;font:15px var(--a-body);color:var(--a-txt);background:var(--a-navy);border:1.5px solid var(--a-line);border-radius:0;outline:none;transition:border-color .15s,box-shadow .15s}
.auth-input::placeholder{color:var(--a-dimmer)}
.auth-input:focus{border-color:var(--a-accent);box-shadow:0 0 0 3px rgba(15,181,161,.16)}

.auth-btn{width:100%;box-sizing:border-box;padding:15px;margin-top:4px;font:600 15px var(--a-disp);letter-spacing:.02em;border:none;border-radius:0;cursor:pointer;background:var(--a-accent);color:#06231f;transition:filter .15s}
.auth-btn:hover{filter:brightness(1.1)}
.auth-btn:focus-visible{outline:2px solid var(--a-txt);outline-offset:2px}

.auth-divider{display:flex;align-items:center;gap:14px;margin:24px 0 16px;color:var(--a-dimmer);font-family:var(--a-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--a-line)}

.auth-oauth{display:grid;grid-template-columns:1fr;gap:10px}
.auth-oauth form{margin:0}
.auth-btn-secondary{display:flex;width:100%;box-sizing:border-box;align-items:center;justify-content:center;gap:9px;padding:12px;border:1.5px solid var(--a-line);border-radius:0;background:transparent;color:var(--a-txt);font:500 14px var(--a-body);cursor:pointer;transition:border-color .15s,background .15s}
.auth-btn-secondary:hover{border-color:var(--a-accent);background:rgba(15,181,161,.06)}
.auth-provider-icon{width:16px;height:16px;flex:none}

.auth-alt{margin-top:18px;font-size:13.5px;color:var(--a-dim)}
.auth-alt a,.auth-toggle{color:var(--a-accent);font-weight:600;text-decoration:none;background:none;border:none;padding:0;font-family:inherit;font-size:inherit;cursor:pointer}
.auth-alt a:hover,.auth-toggle:hover{text-decoration:underline}

.auth-msg{padding:13px 16px;font-size:13.5px;line-height:1.55;margin-bottom:18px;border:1px solid var(--a-line)}
.auth-msg-error{border-color:#8a3040;background:rgba(138,48,64,.14);color:#f2b8c1}
.auth-msg-ok{border-color:rgba(15,181,161,.5);background:rgba(15,181,161,.08);color:var(--a-txt)}

/* dev wire: the on-screen magic link when email isn't configured */
.auth-devwire{margin-top:4px;margin-bottom:18px;border:1px solid var(--a-gold)}
.auth-devwire-bar{padding:8px 14px;border-bottom:1px solid rgba(201,162,39,.4);font-family:var(--a-mono);font-size:10px;letter-spacing:.22em;color:var(--a-gold)}
.auth-devwire-body{padding:14px;font-family:var(--a-mono);font-size:12px;line-height:1.8;word-break:break-all}
.auth-devwire-body a{color:var(--a-accent);text-decoration:none}
.auth-devwire-body a:hover{text-decoration:underline}

/* sent-state icon */
.auth-sent{width:52px;height:52px;border:2px solid var(--a-accent);position:relative;margin-bottom:22px}
.auth-sent::before{content:"";position:absolute;left:9px;right:9px;top:14px;height:0;border-top:2px solid var(--a-accent)}
.auth-sent::after{content:"";position:absolute;left:9px;right:9px;top:14px;height:14px;border-left:2px solid var(--a-accent);border-right:2px solid var(--a-accent);border-bottom:2px solid var(--a-accent)}

/* mode toggle (magic vs password) */
.auth-panel[data-mode="magic"] .auth-when-password{display:none}
.auth-panel[data-mode="password"] .auth-when-magic{display:none}

/* ---- footer ---- */
.auth-foot{position:relative;z-index:2;padding:0 52px 24px;font-family:var(--a-mono);font-size:10px;letter-spacing:.22em;color:var(--a-dimmer);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ---- responsive + motion ---- */
@media (max-width:1040px){
  .auth-main{grid-template-columns:1fr;gap:8px;padding-top:6px}
  .auth-hero h1{font-size:clamp(34px,8vw,46px)}
  .auth-hero-sub,.auth-wire{display:none}
  .auth-panel{justify-self:center}
}
@media (max-width:560px){
  .auth-top,.auth-main,.auth-foot{padding-left:22px;padding-right:22px}
  .auth-panel{padding:32px 26px}
  .auth-status{display:none}
}
@media (prefers-reduced-motion:reduce){
  .auth-status-dot,.auth-caret{animation:none}
}

/* ============================================================================
   Light theme ("Drafting Table" palette). Activated via
   html[data-auth-theme="light"]; dark is the default. Shares the app's
   studio-theme localStorage key, so app-side preference carries over.
   ============================================================================ */
html[data-auth-theme="light"] .auth-body{
  --a-navy:#f7f8fa;          /* page bg   */
  --a-navy2:#ffffff;         /* panels    */
  --a-line:#dfe3ea;          /* hairlines */
  --a-txt:#0f1420;           /* text      */
  --a-dim:#5b6470;           /* secondary */
  --a-dimmer:#9aa4b2;        /* tertiary  */
}
html[data-auth-theme="light"] .auth-body::before{
  background-image:
    linear-gradient(rgba(15,20,32,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,20,32,.055) 1px,transparent 1px);
}
html[data-auth-theme="light"] .auth-body::after{
  background:
    radial-gradient(900px 500px at 28% 40%, rgba(15,181,161,.07), transparent 60%),
    radial-gradient(700px 420px at 78% 75%, rgba(201,162,39,.06), transparent 60%);
}
html[data-auth-theme="light"] .auth-panel{
  border-color:#0f1420;
  box-shadow:10px 10px 0 rgba(15,20,32,.07);
}
html[data-auth-theme="light"] .auth-wire{background:rgba(255,255,255,.9)}
html[data-auth-theme="light"] .tk-g{color:#a8861f}
html[data-auth-theme="light"] .auth-btn{background:#0f1420;color:#ffffff}
html[data-auth-theme="light"] .auth-btn:hover{background:var(--a-accent);color:#06231f;filter:none}
html[data-auth-theme="light"] .auth-input{background:#ffffff}
html[data-auth-theme="light"] .auth-msg-error{border-color:#d9a1ab;background:#fbf1f3;color:#8a3040}
html[data-auth-theme="light"] .auth-msg-ok{border-color:rgba(15,181,161,.55);background:rgba(15,181,161,.07);color:#0f1420}
html[data-auth-theme="light"] .att-track{background:#ffffff}

/* soften theme flips */
.auth-body,.auth-panel,.auth-input,.auth-wire,.att-track{
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.auth-btn{transition:background-color .2s ease,color .2s ease,filter .15s ease}