/* public/assets/auth.css — the sign-in / create-account landing page (src/auth_page.php).
   Same palette and serif as the reader (app.css) so signing in feels like opening the same book. */
:root { --wood:#3b2616; --wood2:#2a1a0e; --night:#140a04; --brass:#c9a45c; --brass-hi:#e8c77d; --paper:#fbf9f4; --paper2:#f4ecd8;
        --ink:#1d1a16; --leather:#5a2e1e; --muted:#6b5b45; --cream:#f1e6d0; --cream-dim:#cdbb97; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body.al { margin:0; min-height:100vh; color:var(--cream); font:17px/1.65 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  background:
    radial-gradient(1100px 620px at 22% 8%, rgba(232,199,125,.20), transparent 62%),
    linear-gradient(180deg, rgba(20,10,4,.35), rgba(20,10,4,.78) 55%, rgba(20,10,4,.92)),
    url("/assets/bg2.jpg") center top / 1400px auto, #1c0e06; }
a { color:var(--brass-hi); }
a:focus-visible, button:focus-visible, input:focus-visible { outline:2px solid var(--brass-hi); outline-offset:3px; }
.al-visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.al-eyebrow { margin:0 0 10px; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); }
h1, h2, h3 { font-weight:400; margin:0; }
kbd { font:600 13px/1 "SF Mono",Menlo,Consolas,monospace; background:var(--paper2); color:var(--ink); border:1px solid #b9a98a; border-bottom-width:2px; border-radius:5px; padding:2px 6px; }

/* ---- top bar ---- */
.al-top { max-width:1240px; margin:0 auto; padding:22px 32px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.al-brand img { display:block; width:150px; height:auto; filter:drop-shadow(0 4px 12px #0009); }
.al-nav { display:flex; gap:26px; font-size:16px; }
.al-nav a { color:var(--cream-dim); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px; }
.al-nav a:hover { color:var(--brass-hi); border-bottom-color:var(--brass); }

/* ---- hero: the pitch on the left, the sign-in card in the upper right ---- */
.al-hero { max-width:1240px; margin:0 auto; padding:36px 32px 10px; display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:56px; align-items:start; }
.al-pitch { padding-top:34px; }
.al-hero h1 { font-size:clamp(40px, 5.2vw, 66px); line-height:1.05; letter-spacing:.005em; color:#fbf3e2; text-shadow:0 2px 18px #0008; }
.al-hero h1 em { color:var(--brass-hi); font-style:italic; }
.al-lede { max-width:600px; margin:22px 0 26px; font-size:19px; line-height:1.65; color:#eadcc0; }
.al-chips { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.al-chips li { font-size:14px; padding:5px 13px; border:1px solid #c9a45c88; border-radius:999px; background:rgba(20,10,4,.45); color:var(--cream); }

.al-card { position:relative; background:var(--paper); color:var(--ink); border-radius:14px; padding:30px 32px 24px;
  box-shadow:0 24px 60px #000b, 0 0 0 1px #c9a45c66, inset 0 4px 0 var(--brass); }
.al-card::before { content:''; position:absolute; inset:7px; border:1px solid #e4d8bf; border-radius:10px; pointer-events:none; }
.al-card-eyebrow { margin:0 0 2px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); }
.al-card h2 { font-size:30px; letter-spacing:.02em; margin-bottom:18px; color:var(--ink); }
.al-card h1 { display:none; }                                      /* in case the form markup brings its own heading */
.al-card form, .al-card .auth { display:grid; gap:14px; max-width:none; position:relative; }
.al-card label { display:grid; gap:5px; font-size:15px; color:var(--leather); font-weight:600; }
.al-card input:not([type=checkbox]):not([type=hidden]) { width:100%; font:inherit; font-size:16px; font-weight:400; color:var(--ink); padding:11px 13px;
  border:1px solid #c9b48b; border-radius:8px; background:#fff; transition:border-color .15s, box-shadow .15s; }
.al-card input:focus { outline:none; border-color:var(--brass); box-shadow:0 0 0 3px #c9a45c55; }
.al-card button, .al-card input[type=submit] { font:inherit; font-size:17px; min-height:48px; margin-top:4px; border:0; border-radius:8px; cursor:pointer;
  color:#fbf1dc; background:linear-gradient(180deg, #6a3724, var(--leather)); box-shadow:0 2px 0 #3a1c10, 0 6px 16px #5a2e1e55; transition:transform .1s, filter .15s; }
.al-card button:hover { filter:brightness(1.08); } .al-card button:active { transform:translateY(1px); }
.al-card p { margin:4px 0 0; font-size:15px; color:var(--ink); position:relative; }
.al-card a { color:var(--leather); font-weight:600; }
.al-card .err { margin:0; padding:9px 12px; border-radius:6px; color:#8a1c1c; background:#f8e4e0; border:1px solid #e6b8ae; }
.al-card > .err { margin:0 0 16px; }                              /* auth_form() puts the error above the form */
.al-card form + p { margin-top:16px; }                            /* and the "New here?" line after it */
.al-card .al-card-foot { margin-top:18px; padding-top:14px; border-top:1px solid #e4d8bf; font-size:13.5px; color:var(--muted); line-height:1.5; }

/* ---- screenshot of the reader, with numbered callouts ---- */
.al-tour { max-width:1240px; margin:0 auto; padding:56px 32px 20px; }
.al-shot { margin:0; }
.al-frame { border-radius:12px; overflow:hidden; background:var(--night); border:1px solid #c9a45c77;
  box-shadow:0 40px 90px #000c, 0 0 0 6px rgba(20,10,4,.6), 0 0 120px rgba(232,199,125,.10);
  transform:perspective(2000px) rotateX(3deg); transform-origin:50% 0; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.al-frame:hover { transform:none; }
@media (prefers-reduced-motion: reduce) { .al-frame, .al-frame:hover { transform:none; transition:none; } }
.al-chrome { display:flex; align-items:center; gap:7px; height:34px; padding:0 14px; background:linear-gradient(#2c1b0f, #1d1008); border-bottom:1px solid #c9a45c44; }
.al-chrome i { width:11px; height:11px; border-radius:50%; background:#5a4430; }
.al-chrome span { flex:1; text-align:center; margin-right:47px; font-size:13px; color:var(--cream-dim); letter-spacing:.03em; }
.al-screen { position:relative; aspect-ratio:1922 / 897; background:#2a1a0e; }
.al-screen img { display:block; width:100%; height:100%; object-fit:cover; }
.al-pin { position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; display:grid; place-items:center; border-radius:50%;
  font:700 14px/1 Georgia,serif; color:var(--night); background:var(--brass-hi); border:2px solid var(--night);
  box-shadow:0 0 0 3px #e8c77d66, 0 4px 12px #000a; animation:al-pulse 2.8s ease-in-out infinite; }
.al-pin:nth-of-type(2) { animation-delay:.4s; } .al-pin:nth-of-type(3) { animation-delay:.8s; } .al-pin:nth-of-type(4) { animation-delay:1.2s; }
@keyframes al-pulse { 0%, 100% { box-shadow:0 0 0 3px #e8c77d66, 0 4px 12px #000a; } 50% { box-shadow:0 0 0 9px #e8c77d00, 0 4px 12px #000a; } }
@media (prefers-reduced-motion: reduce) { .al-pin { animation:none; } }
.al-legend { list-style:none; counter-reset:pin; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px; margin:34px 0 0; padding:0; }
.al-legend li { counter-increment:pin; position:relative; padding-left:40px; font-size:15px; line-height:1.55; color:#e3d4b6; }
.al-legend li::before { content:counter(pin); position:absolute; left:0; top:0; width:28px; height:28px; display:grid; place-items:center; border-radius:50%;
  font:700 13px/1 Georgia,serif; color:var(--night); background:var(--brass-hi); }
.al-legend b { display:block; color:#fbf3e2; font-weight:600; margin-bottom:2px; }

/* ---- features ---- */
.al-features, .al-session { max-width:1240px; margin:0 auto; padding:80px 32px 10px; text-align:center; }
.al-features h2, .al-session h2 { font-size:clamp(28px, 3.4vw, 40px); line-height:1.15; color:#fbf3e2; margin-bottom:38px; }
.al-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; text-align:left; }
.al-grid article { background:var(--paper); color:var(--ink); border-radius:10px; padding:22px 22px 20px; box-shadow:0 10px 30px #0008;
  border-top:3px solid var(--brass); transition:transform .2s, box-shadow .2s; }
.al-grid article:hover { transform:translateY(-3px); box-shadow:0 16px 36px #000a; }
.al-grid svg { width:40px; height:40px; padding:8px; border-radius:10px; background:#f4ecd8; color:var(--leather);
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.al-grid h3 { font-size:19px; line-height:1.25; margin:14px 0 6px; color:var(--leather); }
.al-grid p { margin:0; font-size:15px; line-height:1.55; color:#4b3f2f; }

/* ---- three steps ---- */
.al-steps { list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; margin:0; padding:0; position:relative; }
.al-steps::before { content:''; position:absolute; top:27px; left:16.6%; right:16.6%; height:1px; background:linear-gradient(90deg, transparent, var(--brass), transparent); }
.al-steps li { position:relative; padding:0 26px; }
.al-steps span { position:relative; display:inline-grid; place-items:center; width:54px; height:54px; border-radius:50%; font-size:24px; color:var(--brass-hi);
  background:var(--night); border:1px solid var(--brass); box-shadow:0 0 22px #e8c77d33; }
.al-steps h3 { font-size:22px; margin:16px 0 6px; color:#fbf3e2; }
.al-steps p { margin:0 auto; max-width:300px; font-size:16px; color:#e0d0b0; }

/* ---- closing verse ---- */
.al-verse { max-width:900px; margin:0 auto; padding:90px 32px 70px; text-align:center; }
.al-verse blockquote { margin:0; }
.al-verse blockquote p { margin:0; font-size:clamp(24px, 3vw, 34px); line-height:1.35; font-style:italic; color:#fbf3e2; }
.al-verse blockquote p::before { content:'\201C'; color:var(--brass); } .al-verse blockquote p::after { content:'\201D'; color:var(--brass); }
.al-verse cite { display:block; margin-top:12px; font-style:normal; font-size:14px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); }
.al-up { display:inline-block; margin-top:34px; padding:12px 24px; border-radius:999px; border:1px solid var(--brass); color:var(--brass-hi); text-decoration:none; }
.al-up:hover { background:#c9a45c22; }

.al-foot { border-top:1px solid #c9a45c33; background:rgba(20,10,4,.7); padding:22px 32px 28px; text-align:center; font-size:13px; color:#a8977a; }
.al-foot p { margin:4px auto; max-width:900px; } .al-foot a { color:var(--cream-dim); }

/* ---- tablets ---- */
@media (max-width: 1100px) {
  .al-hero { grid-template-columns:minmax(0,1fr) 350px; gap:36px; }
  .al-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .al-legend { grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ---- phones: logo, then the sign-in card, then the pitch and the tour ---- */
@media (max-width: 760px) {
  body.al { font-size:16px; background-size:auto, auto, 900px auto, auto; }
  .al-top { padding:max(14px, env(safe-area-inset-top)) 18px 0; justify-content:center; }
  .al-brand img { width:132px; }
  .al-nav { display:none; }
  .al-hero { grid-template-columns:minmax(0,1fr); gap:30px; padding:18px 16px 0; }
  .al-card { order:-1; padding:24px 22px 20px; }
  .al-pitch { padding-top:6px; text-align:center; }
  .al-lede { font-size:17px; margin:16px auto 20px; }
  .al-chips { justify-content:center; }
  .al-tour { padding:44px 12px 10px; }
  .al-frame { transform:none; border-radius:9px; }
  .al-chrome { height:26px; } .al-chrome i { width:8px; height:8px; } .al-chrome span { font-size:11px; margin-right:30px; }
  .al-pin { width:22px; height:22px; margin:-11px 0 0 -11px; font-size:11px; }
  .al-legend { grid-template-columns:minmax(0,1fr); gap:16px; margin-top:24px; padding:0 6px; }
  .al-features, .al-session { padding:60px 16px 0; }
  .al-features h2, .al-session h2 { margin-bottom:26px; }
  .al-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .al-grid article { display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:14px; padding:18px; }
  .al-grid svg { grid-row:1 / 3; }
  .al-grid h3 { margin:0 0 4px; font-size:18px; }
  .al-steps { grid-template-columns:minmax(0,1fr); gap:28px; }
  .al-steps::before { display:none; }
  .al-verse { padding:70px 20px 50px; }
}