/* auth.css — account widget + sign-in modal + toast for "The Lie in the Graph".
   Loaded on the landing pages only. Dark/gold theme, RTL-aware via logical props.
   Falls back to literal colors so it's safe even if a page omits the CSS vars. */

/* account control (top corner; logical inset works for LTR + RTL) */
.account-bar{
  position:fixed; top:12px; inset-inline-end:14px; z-index:6;
  display:flex; align-items:center; gap:8px;
}
.litg-acct-email{
  color:var(--dim,#7d93ab); font-size:12px; max-width:42vw;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.litg-acct-btn{
  font:inherit; font-size:13px; cursor:pointer; padding:7px 14px; min-height:36px;
  border-radius:999px; border:1px solid var(--line,#23344a);
  background:var(--panel,#121e2e); color:var(--ink,#dce7f2);
  transition:border-color .18s ease, color .18s ease, filter .18s ease;
}
.litg-acct-btn:hover, .litg-acct-btn:focus-visible{ border-color:var(--accent,#e8b44a); color:#fff; outline:none; }
.litg-acct-btn:focus-visible{ outline:2px solid var(--accent,#e8b44a); outline-offset:2px; }
.litg-acct-btn.primary{ background:var(--accent,#e8b44a); color:#1a1206; border-color:transparent; font-weight:700; }
.litg-acct-btn.primary:hover{ filter:brightness(1.07); color:#1a1206; }

/* modal */
.litg-auth-overlay{
  position:fixed; inset:0; background:rgba(5,9,14,.82);
  display:none; align-items:center; justify-content:center; padding:18px; z-index:50;
}
.litg-auth-overlay.open{ display:flex; }
.litg-auth-card{
  position:relative; width:100%; max-width:400px;
  background:var(--panel,#121e2e); border:1px solid var(--line,#23344a);
  border-radius:12px; padding:26px 26px 22px; box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.litg-auth-card h2{
  font-family:var(--font-display,'Cormorant Garamond',Georgia,serif);
  color:var(--accent,#e8b44a); font-size:24px; font-weight:700; margin:0 0 14px;
}
.litg-auth-x{
  position:absolute; top:8px; inset-inline-end:10px;
  background:none; border:none; color:var(--dim,#7d93ab);
  font-size:18px; line-height:1; padding:6px; cursor:pointer;
}
.litg-auth-x:hover{ color:var(--ink,#dce7f2); }
.litg-step label{ display:block; font-size:13px; color:var(--dim,#7d93ab); margin-bottom:6px; }
.litg-step input{
  width:100%; font:inherit; font-size:16px; padding:11px 13px; margin-bottom:14px;
  border-radius:8px; border:1px solid var(--line,#23344a);
  background:var(--panel2,#0f1926); color:var(--ink,#dce7f2);
}
.litg-step input:focus{ outline:2px solid var(--accent,#e8b44a); outline-offset:1px; border-color:var(--accent,#e8b44a); }
.litg-step-code #litg-code{
  letter-spacing:.4em; text-align:center; font-size:22px;
  font-family:Menlo,Consolas,monospace;
}
.litg-auth-go{
  width:100%; font:inherit; font-size:15px; font-weight:700; cursor:pointer; padding:12px;
  border:none; border-radius:8px; background:var(--accent,#e8b44a); color:#1a1206; min-height:46px;
}
.litg-auth-go:hover:not(:disabled){ filter:brightness(1.07); }
.litg-auth-go:disabled{ opacity:.6; cursor:default; }
.litg-sent{ font-size:13px; color:var(--ink,#dce7f2); margin-bottom:14px; line-height:1.5; }
.litg-auth-link{
  display:block; margin:12px auto 0; background:none; border:none;
  color:var(--dim,#7d93ab); font:inherit; font-size:13px; text-decoration:underline; cursor:pointer;
}
.litg-auth-link:hover{ color:var(--accent,#e8b44a); }
.litg-auth-err{
  margin-top:12px; color:#f0a8a8; font-size:13px;
  background:rgba(224,92,92,.12); border:1px solid #e05c5c; border-radius:7px; padding:9px 11px;
}

/* toast */
.litg-toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px);
  background:var(--panel,#121e2e); border:1px solid var(--line,#23344a); color:var(--ink,#dce7f2);
  padding:11px 18px; border-radius:10px; font-size:13.5px; max-width:90vw; text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.45); opacity:0; pointer-events:none; z-index:60;
  transition:opacity .25s ease, transform .25s ease;
}
.litg-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* locked book cards (guests, books beyond the free tier) */
.book-card.locked{ opacity:.62; position:relative; }
.book-card.locked:hover{ transform:none; border-color:var(--line,#23344a); }
.book-card .lock-badge{
  margin-top:6px; color:var(--accent,#e8b44a); font-size:12px; font-weight:700;
  display:inline-flex; align-items:center; gap:4px;
}

/* full-screen gate overlay on a locked game page */
.litg-gate-overlay{
  position:fixed; inset:0; background:rgba(6,10,16,.93); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; padding:18px; z-index:80;
}
.litg-gate-overlay.open{ display:flex; }
.litg-gate-card{
  width:100%; max-width:420px; text-align:center;
  background:var(--panel,#121e2e); border:1px solid var(--line,#23344a);
  border-radius:14px; padding:32px 28px; box-shadow:0 20px 60px rgba(0,0,0,.55);
}
.litg-gate-lock{ font-size:40px; margin-bottom:8px; }
.litg-gate-card h2{
  font-family:var(--font-display,'Cormorant Garamond',Georgia,serif);
  color:var(--accent,#e8b44a); font-size:26px; font-weight:700; margin:0 0 10px;
}
.litg-gate-card p{ color:var(--ink,#dce7f2); font-size:14.5px; line-height:1.6; margin:0 0 18px; }
.litg-gate-back{
  display:inline-block; margin-top:14px; color:var(--dim,#7d93ab);
  text-decoration:none; font-size:13.5px;
}
.litg-gate-back:hover{ color:var(--accent,#e8b44a); }

/* stats modal */
.litg-stats-card{ max-width:460px; }
.litg-stats-body{ margin-top:4px; }
.litg-stats-note{ color:var(--dim,#7d93ab); font-size:12.5px; font-style:italic; margin-top:14px; }
.litg-stat-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; margin-top:6px;
}
.litg-stat-card{
  background:var(--panel2,#0f1926); border:1px solid var(--line,#23344a);
  border-radius:9px; padding:12px 10px; text-align:center;
}
.litg-stat-card .sv{ font-size:24px; font-weight:700; color:var(--accent,#e8b44a); line-height:1.1; }
.litg-stat-card .sl{ font-size:11.5px; color:var(--dim,#7d93ab); margin-top:4px; }
.litg-stat-card .ss{ font-size:11px; color:var(--ink,#dce7f2); margin-top:3px; }
.litg-stats-h3{
  font-family:var(--font-display,'Cormorant Garamond',Georgia,serif);
  color:var(--ink,#dce7f2); font-size:17px; font-weight:700; margin:20px 0 8px;
}
.litg-time-list{ list-style:none; margin:0; padding:0; }
.litg-time-list li{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  padding:7px 0; border-top:1px solid var(--line,#23344a); font-size:13.5px;
}
.litg-time-list li:first-child{ border-top:none; }
.litg-time-list .t-book{ color:var(--ink,#dce7f2); }
.litg-time-list .t-meta{ color:var(--accent,#e8b44a); font-family:Menlo,Consolas,monospace; font-size:12.5px; white-space:nowrap; }

/* "request a book" — entry links + form */
.litg-req-link{
  display:inline-block; margin-top:10px; background:none; border:none;
  color:var(--dim,#7d93ab); font:inherit; font-size:13px; text-decoration:underline; cursor:pointer;
}
.litg-req-link:hover, .litg-req-link:focus-visible{ color:var(--accent,#e8b44a); outline:none; }
.litg-req-intro{ color:var(--dim,#7d93ab); font-size:13px; line-height:1.5; margin-bottom:14px; }
.litg-req-card label{ display:block; font-size:13px; color:var(--dim,#7d93ab); margin:2px 0 6px; }
.litg-req-card input, .litg-req-card textarea{
  width:100%; font:inherit; font-size:15px; padding:11px 13px; margin-bottom:12px;
  border-radius:8px; border:1px solid var(--line,#23344a);
  background:var(--panel2,#0f1926); color:var(--ink,#dce7f2);
}
.litg-req-card textarea{ resize:vertical; min-height:64px; }
.litg-req-card input:focus, .litg-req-card textarea:focus{
  outline:2px solid var(--accent,#e8b44a); outline-offset:1px; border-color:var(--accent,#e8b44a);
}

@media (prefers-reduced-motion:reduce){
  .litg-toast, .litg-acct-btn, .litg-auth-go{ transition:none; }
}