/* t·AI·pset — the website's look for the account pages (My account, Users, forgot / reset password).
   Loaded after accounts.css and theme-site.css (which already restyles the shared parts:
   tokens, the light rail and its lock-up, the account row and menu, cards, pill buttons).
   This file adds only what the account pages have and the tool does not. Looks only. */

/* ---------- page heading: the site's label pill, a larger serif title ---------- */
.eyebrow{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--teal-tint);color:var(--teal-dark);
  font:700 .74rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.9rem}
h1{font-size:clamp(1.9rem,3.2vw,2.5rem);line-height:1.12;letter-spacing:-.005em}
.lede{font-size:1.05rem}

/* ---------- the rail's links: the site's stepper rows ---------- */
.rail-nav a{color:var(--rail-soft);border-radius:14px;padding:.65rem .75rem;font-weight:600}
.rail-nav a:hover{background:var(--rail-hover);color:var(--rail-ink)}
.rail-nav a.active{background:var(--gold-l);color:var(--rail-ink);box-shadow:inset 3px 0 0 var(--gold)}
.rail-nav .ico{display:grid;place-items:center;width:1.3rem;height:1.3rem;color:var(--rail-faint)}
.rail-nav .ico svg{width:18px;height:18px}
.rail-nav a.active .ico,.rail-nav a:hover .ico{color:var(--teal-dark)}

/* ---------- cards, fields and buttons ---------- */
.card{padding:1.6rem 1.7rem}
.card-title{font-size:1.3rem}
.field label,.f-lbl{font-size:.88rem}
.field input,.field select,.toolbar input,.toolbar select{border-radius:11px;background:var(--white);border:1.5px solid var(--line);padding:.7rem .9rem}
.field input:focus,.field select:focus,.toolbar input:focus,.toolbar select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(47,166,160,.2)}
.field input:focus-visible,.field select:focus-visible,.toolbar input:focus-visible,.toolbar select:focus-visible{outline:none}
.toolbar .search{border-radius:999px;padding-left:1.1rem}
.btn-xs{border-radius:999px;padding:.35rem .85rem}
.btn-gold{border-radius:999px}
.btn-danger{border-radius:999px}
.banner,.alert{border-radius:14px}

/* ---------- the users list ---------- */
.tablewrap{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
table.grid th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);background:var(--paper)}
table.grid tbody tr:hover td{background:var(--teal-tint)}
.pill{border-radius:999px;font-weight:700}
.modal-card{border-radius:var(--radius-lg)}

/* ---------- forgot / reset password: the sign-in page's split, the form on cream ---------- */
.auth-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh}
.auth-hero{background:#22303C;display:flex;align-items:center;justify-content:center;padding:3rem 2rem;position:sticky;top:0;height:100vh}
.auth-split .auth-shell{min-height:0;justify-content:center;background:var(--paper)}
.auth-hero .brand{display:flex;align-items:center;gap:clamp(.6rem,1.4vw,1rem);text-decoration:none}
.auth-hero .brand-mark{width:clamp(84px,9vw,124px);height:auto;aspect-ratio:1;margin-left:-.5rem}
.auth-hero .lg-ink{stroke:#F6F3EA}
.auth-hero .lg-inkfill{fill:#F6F3EA}
.auth-hero .brand-name{color:#F6F3EA;font-size:clamp(2.3rem,4.4vw,3.6rem)}
.auth-hero .brand-ai{color:var(--gold)}
.auth-hero .brand-tag{color:#A9B3BD;font-size:clamp(.85rem,1.2vw,1.05rem);margin-top:.7rem}
.auth-card{border-radius:18px;background:rgba(255,253,248,.96);box-shadow:0 1px 0 var(--line),0 18px 50px -12px rgba(34,48,60,.22)}
:root[data-theme="dark"] .auth-card{background:var(--white)}
.auth-title{font-size:2rem}
.auth-form .field input{padding:.8rem .95rem}
.auth-form .btn-block{border-radius:11px}
@media(max-width:860px){
  .auth-split{grid-template-columns:minmax(0,1fr)}
  .auth-hero{position:static;height:auto;padding:2rem 1.2rem}
}

/* Psalm 119 set word by word behind the card, as on sign-in (public/js/auth-deco.js + psalm119.js) */
.auth-split .auth-shell{position:relative;overflow:hidden;isolation:isolate}
.auth-split .auth-card,.auth-split .auth-foot{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(max-width:860px){ .deco{display:none} }
@media(prefers-reduced-motion:reduce){ .deco-page .w{opacity:1;transition:none} }