/* t·AI·pset — the sign-in page (login.php). From Interface/login.html. */
  :root{
    --paper:#F6F3EA; --ink:#22303C; --ink-soft:#5B6673;
    --teal:#0E7C66; --teal-dark:#0A5F4F; --gold:#FFCF01;
    --line:#DDD5C2; --white:#FFFDF8; --red:#B3492F; --red-soft:#F6E3DC;
    --serif:'Gentium Book Plus', Georgia, serif;
    --sans:system-ui, -apple-system, 'Segoe UI', sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.55;min-height:100vh}

  /* ---------- layout ---------- */
  .login{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}
  .hero{background:var(--ink);display:flex;align-items:center;justify-content:center;padding:3rem 2rem}
  .form-side{display:flex;align-items:center;justify-content:center;padding:3rem 1.5rem}
  @media(max-width:860px){
    .login{grid-template-columns:minmax(0,1fr);min-height:0}
    .hero{padding:2.2rem 1.2rem}
    .form-side{padding:2.2rem 1.4rem 3rem;align-items:flex-start}
  }

  /* ---------- lock-up ---------- */
  .brand{display:flex;align-items:center;gap:clamp(.6rem,1.4vw,1rem)}
  .brand-mark{width:clamp(96px,11.5vw,150px);height:auto;aspect-ratio:1;margin-left:-.5rem}
  .brand-name{font-family:var(--serif);font-weight:700;font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:1;color:var(--paper);white-space:nowrap}
  .brand-name .bdot{display:inline-block;transform:scale(1.35);margin:0 .02em}
  .brand-ai{display:inline-block;position:relative;color:var(--gold);transform-origin:50% 55%}
  .ai-eye{display:inline-block;transform-origin:50% 60%}
  .ai-smile{position:absolute;left:50%;bottom:-.02em;width:.42em;height:.2em;transform:translateX(-50%) scaleX(.5);
    border-bottom:.07em solid var(--gold);border-radius:0 0 .4em .4em;opacity:0}
  .brand-tag{display:flex;align-items:center;gap:.6rem;margin-top:.7rem;font-family:var(--serif);font-style:italic;
    font-size:clamp(.9rem,1.35vw,1.15rem);letter-spacing:.07em;color:#A9B3BD;white-space:nowrap}
  .tag-dash{width:.95em;height:3px;border-radius:2px;background:#6FA8A0;flex:none}

  /* ---------- the mark ---------- */
  .lg{overflow:visible;display:block;flex:none}
  .lg *{transform-box:fill-box;transform-origin:center}
  .lg .lg-floor{transform-box:view-box;transform-origin:100px 180px}
  .lg .lg-vb{transform-box:view-box;transform-origin:100px 100px}
  .lg-ink{fill:none;stroke:var(--paper);stroke-width:26}
  .lg-inkfill{fill:var(--paper)}
  .lg-eye{fill:var(--gold)}
  .lg-head{transform-box:view-box !important;transform-origin:100px 100px !important}
  .brand-mark .lg-head,.brand-mark .lg-look,.brand-mark .lg-blink{transition:transform .35s ease}

  /* mark's turns */
  .brand.act-hello .hm-greet{animation:lgHello 2s ease-in-out}
  @keyframes lgHello{0%,10%{transform:translateY(0) rotate(0)}30%{transform:translateY(-18px) rotate(-5deg)}50%{transform:translateY(0) rotate(0)}66%{transform:translateY(-8px) rotate(3deg)}82%,100%{transform:translateY(0) rotate(0)}}
  .brand.act-hello .hm-wink{animation:lgWink .9s ease-in-out 1.8s}
  @keyframes lgWink{0%,100%{transform:scaleY(1)}30%,70%{transform:scaleY(.12)}}
  .brand.act-face .lg-head{animation:lgTilt 7s ease-in-out}
  .brand.act-face .lg-look{animation:lgLook 7s ease-in-out}
  .brand.act-face .lg-blink{animation:lgBlink 7s linear}
  .brand.act-face .lg-hop{animation:lgHop 7s ease-in-out}
  @keyframes lgBlink{0%,30%,34%,76%,79%,82%,100%{transform:scaleY(1)}32%,77.5%,80.5%{transform:scaleY(.12)}}
  @keyframes lgLook{0%,8%{transform:translate(0,0)}14%,26%{transform:translate(-9px,2px)}32%,50%{transform:translate(0,0)}56%,68%{transform:translate(7px,-8px)}74%,100%{transform:translate(0,0)}}
  @keyframes lgTilt{0%,52%{transform:rotate(0)}58%,68%{transform:rotate(-6deg)}74%,100%{transform:rotate(0)}}
  @keyframes lgHop{0%,84%{transform:translateY(0)}87%{transform:translateY(-12px)}90%{transform:translateY(0)}92%{transform:translateY(-6px)}94%,100%{transform:translateY(0)}}

  /* wordmark's turns */
  .brand.act-cartwheel .brand-ai{animation:aiCart .9s ease-in-out}
  @keyframes aiCart{from{transform:rotate(0)}to{transform:rotate(360deg)}}
  .brand.act-bounce .brand-ai{animation:aiBounce 1s ease-in-out}
  @keyframes aiBounce{0%,50%,100%{transform:translateY(0)}25%{transform:translateY(-.12em)}75%{transform:translateY(-.07em)}}
  .brand.act-blink .ai-eye{animation:aiBlinkTwice 1.1s ease}
  @keyframes aiBlinkTwice{0%,30%,55%,85%,100%{transform:scaleY(1)}15%,70%{transform:scaleY(.08)}}
  .brand.act-rise .ai-a{animation:aiRise .9s ease}
  .brand.act-rise .ai-i{animation:aiRise .9s ease .8s}
  @keyframes aiRise{0%,100%{transform:translateY(0)}30%,65%{transform:translateY(-.1em)}}
  .brand.act-wink .ai-i{animation:aiWinkOnce 1.8s ease}
  @keyframes aiWinkOnce{0%,100%{transform:scaleY(1)}15%,70%{transform:scaleY(.08)}}
  .brand.act-wink .ai-smile{animation:aiSmileOnce 1.8s ease}
  @keyframes aiSmileOnce{0%,100%{opacity:0;transform:translateX(-50%) scaleX(.5)}15%,70%{opacity:1;transform:translateX(-50%) scaleX(1)}}

  /* reacting to the form (takes priority over the turns) */
  .brand:is(.watch,.shy,.peek) :is(.lg-head,.lg-look,.lg-blink,.lg-hop,.hm-greet,.hm-wink){animation:none}
  .brand.watch .lg-look{transform:translate(var(--lx,4px),7px)}
  .brand.shy .lg-blink{transform:scaleY(.12)}
  .brand.shy .lg-head{transform:rotate(-7deg)}
  .brand.peek .lg-blink{transform:scaleY(.55)}
  .brand.peek .lg-look{transform:translate(11px,7px)}
  .brand.shake .hm-react{animation:lgShake .55s ease-in-out}
  @keyframes lgShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px) rotate(-3deg)}40%{transform:translateX(9px) rotate(3deg)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
  .brand.joy .hm-react{animation:lgJoy 1.1s ease-in-out}
  @keyframes lgJoy{0%,100%{transform:translateY(0) scale(1,1)}18%{transform:translateY(0) scale(1.1,.86)}42%{transform:translateY(-30px) scale(.94,1.08)}66%{transform:translateY(0) scale(1.08,.9)}82%{transform:translateY(0) scale(.98,1.02)}}

  /* ---------- form ---------- */
  .card{width:100%;max-width:380px}
  .card h1{font-family:var(--serif);font-size:2rem;line-height:1.2;margin-bottom:1.6rem}
  .field{margin-bottom:1.1rem}
  .field-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.35rem}
  .field label{font-weight:600;font-size:.9rem}
  .field input{width:100%;font:inherit;font-size:1rem;padding:.8rem .95rem;border:1.5px solid var(--line);border-radius:11px;background:var(--white);color:var(--ink)}
  .field input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,124,102,.18)}
  .field input[aria-invalid="true"]{border-color:var(--red);background:var(--red-soft)}
  .err{display:block;color:var(--red);font-size:.83rem;margin-top:.35rem}
  .err:empty{display:none}
  .pw{position:relative}
  .pw input{padding-right:4.6rem}
  .pw-toggle{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);font:inherit;font-size:.83rem;font-weight:600;color:var(--teal-dark);background:none;border:none;padding:.4rem .5rem;border-radius:7px;cursor:pointer}
  .link{font:inherit;font-size:.85rem;color:var(--teal-dark);background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
  .pw-toggle:focus-visible,.link:focus-visible,.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
  .btn{width:100%;margin-top:.6rem;display:flex;align-items:center;justify-content:center;gap:.6rem;font:inherit;font-weight:600;font-size:1.05rem;
    padding:.95rem 1.5rem;border:none;border-radius:11px;background:var(--teal);color:#fff;cursor:pointer;transition:background .15s,transform .12s}
  .btn:hover{background:var(--teal-dark)}
  .btn:active{transform:scale(.98)}
  .btn .lg{width:22px;height:22px;display:none}
  .btn.busy{cursor:progress}
  .btn.busy .lg{display:block}
  .btn .lg-ink{stroke:#fff}.btn .lg-inkfill{fill:#fff}.btn .lg-eye{fill:var(--gold)}
  .btn.busy .lg-spin{animation:lgSpin 1.6s cubic-bezier(.7,0,.3,1) infinite}
  @keyframes lgSpin{0%,15%{transform:rotate(0)}25%,40%{transform:rotate(90deg)}50%,65%{transform:rotate(180deg)}75%,90%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}
  .note{margin-top:1.4rem;font-size:.83rem;color:var(--ink-soft)}
  a.link{display:inline}
  .btn:disabled{background:var(--ink-soft);cursor:not-allowed;transform:none}

  /* ---------- messages from the server (signed out, password changed, errors) ---------- */
  .alert{border-radius:11px;padding:.75rem 1rem;margin-bottom:1.1rem;font-size:.92rem;border:1px solid}
  .alert p+p{margin-top:.4rem}
  .alert-ok{background:#E1EFE8;border-color:#BCD9CB;color:var(--teal-dark)}
  .alert-error,.alert-bad{background:var(--red-soft);border-color:#E0B7AA;color:var(--red)}
  .alert-info{background:#E4ECF7;border-color:transparent;color:#2F4A6B}

  /* ---------- the right side: Psalm 119 set word by word, one language a page (public/js/login.js) ---------- */
  .form-side{position:relative;overflow:hidden;isolation:isolate}
  .card{position:relative;z-index:2}
  .deco{position:absolute;inset:0;z-index:0;pointer-events:none}
  .deco-page .sheet{position:absolute;inset:4.5% 6% 4.5%;display:flex;flex-direction:column;opacity:.28;color:var(--ink);transition:opacity 1.4s ease}
  .deco-page .sheet.out{opacity:0}
  .deco-page .hd{text-align:center;font-family:var(--serif),var(--script,serif);font-size:.85rem;letter-spacing:.14em;margin-bottom:1.1rem;color:var(--ink-soft)}
  .deco-page .hd b{color:var(--teal-dark);letter-spacing:.06em;margin-inline-end:.6em}
  .deco-page .cols{columns:2;column-gap:2.6rem;flex:none}
  .deco-page .col{font-family:var(--serif),var(--script,serif);line-height:1.9;text-align:justify}
  .deco-page .col[dir="rtl"]{text-align:right}
  .deco-page .ch{float:inline-start;font-family:var(--serif);font-size:3.6em;line-height:.8;font-weight:700;margin:.1em .12em 0;color:var(--teal)}
  .deco-page sup{font-family:var(--serif);font-size:.6em;color:var(--teal);font-weight:700;margin-inline-end:.15em}
  .deco-page .w{opacity:0;transition:opacity .5s ease}
  .deco-page .w.on{opacity:1}
  .deco-page .w.now{color:var(--teal-dark);opacity:1;background:linear-gradient(transparent 70%,rgba(255,207,1,.9) 70%)}
  @media(min-width:861px){
    .card{background:rgba(246,243,234,.94);padding:2.2rem 2.2rem 1.8rem;border-radius:18px;max-width:440px;
      box-shadow:0 1px 0 var(--line),0 18px 50px -12px rgba(34,48,60,.22);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  }
  @media(max-width:860px){ .deco{display:none} }

  @media(prefers-reduced-motion:reduce){
    .deco-page .w{opacity:1;transition:none}
    .lg *,.brand *{animation:none !important;transition:none !important}
  }

/* "I'm not a robot": its styles are in captcha.css (shared with sign-up) */
.legal{margin-top:.6rem;font-size:.72rem;color:#8A929B}
.legal a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* ---------- the right side's three backgrounds, taking turns (public/js/auth-deco.js, TsAuthDeco.cycle) ----------
   A · the Psalm being set word by word   B · the world's scripts drifting up   C · the printer's sheet */
.deco-cycle .deco{opacity:0;transition:opacity 1.4s ease}
.deco-cycle .deco.on{opacity:1}
/* the middle stays calm: the drifting letters fade out towards the form */
.deco-scripts{overflow:hidden;-webkit-mask-image:radial-gradient(ellipse 46% 52% at 50% 50%,transparent 55%,#000 100%);
  mask-image:radial-gradient(ellipse 46% 52% at 50% 50%,transparent 55%,#000 100%)}
.deco-scripts span{position:absolute;bottom:-12%;font-family:var(--serif);color:var(--ink);line-height:1;animation:drift linear infinite;will-change:transform}
.deco-scripts span.gold{color:var(--gold);opacity:.9}
.deco-scripts span.teal{color:var(--teal)}
@keyframes drift{from{transform:translateY(0) rotate(var(--r0))}to{transform:translateY(-125vh) rotate(var(--r1))}}
.deco-press .grid{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 27px,rgba(14,124,102,.075) 27px 28px)}
.deco-press .margin{position:absolute;top:0;bottom:0;width:1px;background:rgba(179,73,47,.18)}
.deco-press .crop{position:absolute;width:26px;height:26px;opacity:.45}
.deco-press .crop::before,.deco-press .crop::after{content:"";position:absolute;background:var(--ink)}
.deco-press .crop::before{height:1.5px;width:26px}
.deco-press .crop::after{width:1.5px;height:26px}
.deco-press .crop.tl::before,.deco-press .crop.tl::after{bottom:0;right:0}
.deco-press .crop.tr::before,.deco-press .crop.tr::after{bottom:0;left:0}
.deco-press .crop.bl::before,.deco-press .crop.bl::after{top:0;right:0}
.deco-press .crop.br::before,.deco-press .crop.br::after{top:0;left:0}
.deco-press .reg{position:absolute;width:34px;height:34px;opacity:.35;animation:regSpin 24s linear infinite}
@keyframes regSpin{to{transform:rotate(360deg)}}
.deco-press .line{position:absolute;left:12%;right:6%;text-align:left;font-family:var(--serif);font-size:clamp(1rem,1.35vw,1.2rem);font-style:italic;color:var(--ink-soft);white-space:nowrap;overflow:hidden}
.deco-press .line .ref{font-style:normal;font-size:.8em;letter-spacing:.08em;color:var(--teal);margin-left:.6em}
.deco-press .caret{display:inline-block;width:2px;height:1.05em;background:var(--gold);vertical-align:-.15em;margin-left:1px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){ .deco-scripts span,.deco-press .reg,.deco-press .caret{animation:none} }
/* the tabs naming the three backgrounds: the current one in gold; they move on with the backgrounds, and a click picks one */
.deco-tabs{position:absolute;top:14px;right:14px;z-index:3;display:flex;gap:4px;padding:5px;border-radius:999px;
  background:rgba(255,253,248,.94);border:1px solid #E4DED0;box-shadow:0 1px 2px rgba(34,48,60,.06),0 14px 30px -18px rgba(34,48,60,.35);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.deco-tabs button{font:600 .8rem var(--sans);border:0;border-radius:999px;padding:.45rem .9rem;background:transparent;color:#5B6673;cursor:pointer;transition:background .4s,color .4s,box-shadow .4s}
.deco-tabs button:hover{color:#22303C;background:#F6F3EA}
.deco-tabs button[aria-selected="true"]{background:#2FA6A0;color:#fff;box-shadow:0 8px 18px -10px rgba(47,166,160,.75)}
.deco-tabs button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media(max-width:860px){ .deco-tabs{display:none} }