/* =============================================================
   login.css — everything the login wall needs, and nothing else.
   Uberzoot Staff Portal. Cream / ink / monstera. Fraunces + Inter.

   WHY THIS FILE EXISTS
   app.css is 115KB and 95% of it describes screens only a signed-in
   member ever sees — the thread, the composer, DMs, the admin panel.
   Serving all of it to a stranger at the login wall gave away the shape
   of the whole app for nothing. app.css is now behind the session cookie
   (server/session.js) with app.js, and this file carries the ~5KB the
   wall actually uses.

   These rules were MOVED from app.css, not rewritten. If you change one
   here, check whether app.css has the same rule: the two files are both
   loaded once somebody is signed in, and this one loads first.
   ============================================================= */

:root {
  --cream:#F4EFE8; --bone:#EBE3D7; --sand:#D9CBB5;
  --ink:#1A1614; --espresso:#2B2420;
  --monstera:#4A6B4E; --monstera-deep:#3A5440; --monstera-soft:#6B8F6F;
  --cognac:#A8774D; --cognac-deep:#7A5334;
  --font-display:'Fraunces',Georgia,serif;
  --font-ui:'Inter',system-ui,sans-serif;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; background:var(--cream); font-family:var(--font-ui); color:var(--ink);
  -webkit-font-smoothing:antialiased; overscroll-behavior:none; }
body { overflow:hidden; }
.hidden { display:none !important; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
input { font-family:inherit; }

/* ============================== LOGIN ============================== */
.screen-full { position:fixed; inset:0; background:var(--cream); z-index:100; overflow-y:auto; }
.login-body { min-height:100%; padding:calc(48px + var(--safe-top)) 32px calc(40px + var(--safe-bottom));
  display:flex; flex-direction:column; max-width:430px; margin:0 auto; }
.login-logo { font-family:var(--font-display); font-weight:300; font-size:46px; letter-spacing:0.04em; margin-bottom:4px; }
.login-sub { font-size:11px; font-weight:500; letter-spacing:0.26em; text-transform:uppercase; color:rgba(26,22,20,0.35); margin-bottom:6px; }
.login-divider { width:32px; height:2px; background:var(--monstera); margin-bottom:44px; }
.login-heading { font-family:var(--font-display); font-weight:300; font-style:italic; font-size:30px; line-height:1.25; margin-bottom:36px; }
.login-google { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:17px;
  background:var(--ink); color:var(--cream); font-size:12px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase;
  margin-bottom:20px; transition:background .3s,letter-spacing .3s; }
.login-google:active { background:var(--monstera); letter-spacing:0.26em; }
.login-or { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.login-or-line { flex:1; height:1px; background:rgba(26,22,20,0.1); }
.login-or-text { font-size:11px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:rgba(26,22,20,0.28); }
.login-field { width:100%; padding:16px 18px; border:0.5px solid rgba(26,22,20,0.15); border-radius:14px;
  background:rgba(255,255,255,0.7); font-size:16px; font-weight:300; outline:none; margin-bottom:12px; }
.login-field:focus { border-color:var(--monstera); }
.login-field::placeholder { color:rgba(26,22,20,0.3); }
.login-submit { width:100%; padding:17px; background:var(--monstera); color:var(--cream);
  font-size:12px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; margin-top:4px; transition:background .3s; }
.login-submit:active { background:var(--monstera-deep); }
.login-error { color:#A33; font-size:13px; margin-top:14px; min-height:18px; text-align:center; }
.login-footer { margin-top:auto; padding-top:32px; font-size:12px; color:rgba(26,22,20,0.28); line-height:1.7; text-align:center; }

/* Used by .request-sent-icon. The rest of app.css's keyframes stay there. */
@keyframes polly-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

/* First-time hint on the login wall. The wall still gives nothing away —
   this only helps someone who's already been added and doesn't know that
   typing a password creates their account. */
/* Sits between the error line and the first-time hint, so the recovery path is
   where someone looks after a failed sign-in rather than buried at the bottom. */
.login-reset { text-align:center; margin-top:14px; font-size:13px; font-weight:300; }
/* Confirmation, not an error — the red of .login-error would read as a failure
   for a message that is good news. */
.login-note {
  text-align:center; margin-top:12px;
  font-size:13px; font-weight:300; line-height:1.5;
  color:var(--monstera);
}

.login-hint {
  font-size:12px; font-weight:300; line-height:1.5;
  color:rgba(26,22,20,0.4); text-align:center; margin-top:16px;
}

/* Invite form */
.invite-field-label {
  font-size:10px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(26,22,20,0.35); margin-bottom:6px;
}
.invite-field {
  width:100%; padding:13px 15px; border:0.5px solid rgba(26,22,20,0.15);
  border-radius:12px; background:#fff; font-family:var(--font-ui);
  font-size:16px; font-weight:300; color:var(--ink); outline:none; margin-bottom:16px;
}
.invite-field:focus { border-color:var(--monstera); }
.invite-roles { display:flex; gap:8px; margin-bottom:10px; }
.invite-role {
  flex:1; padding:11px; font-family:var(--font-ui); font-size:11px; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase; border:0.5px solid rgba(26,22,20,0.15);
  background:transparent; color:rgba(26,22,20,0.45); transition:all 0.2s;
}
.invite-role.active { background:var(--monstera); border-color:var(--monstera); color:var(--cream); }
.invite-note {
  font-size:12px; font-weight:300; line-height:1.5;
  color:rgba(26,22,20,0.4); margin-bottom:20px;
}

/* =============================================================
   ACCESS REQUESTS
============================================================= */
.login-request-link {
  color:var(--monstera); text-decoration:underline; cursor:pointer; font-weight:400;
}
.request-intro {
  font-size:14px; font-weight:300; line-height:1.6; color:rgba(26,22,20,0.5);
  margin-bottom:24px;
}
.request-sent-body { align-items:center; text-align:center; justify-content:center; }
.request-sent-icon {
  width:56px; height:56px; border-radius:50%; background:var(--monstera);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  animation:polly-in 0.4s cubic-bezier(0.34,1.4,0.64,1) both;
}
.request-sent-icon i { font-size:28px; color:var(--cream); }
.request-sent-head {
  font-family:var(--font-display); font-weight:300; font-size:28px;
  color:var(--ink); margin-bottom:12px;
}
.request-sent-text {
  font-size:15px; font-weight:300; line-height:1.6;
  color:rgba(26,22,20,0.5); max-width:300px;
}

/* =============================================================
   TEXT SELECTION — the login fields must stay selectable even though
   the app turns selection off everywhere else.
============================================================= */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
/* Stop double-tap zoom on controls — it makes taps feel laggy because Safari
   waits ~300ms to see if a second tap is coming. */
button {
  touch-action: manipulation;
}


/* =============================================================
   SPLASH
   Covers the ~800ms Firebase takes to restore a session (which is what made
   the login screen flash), and gives the app a moment of its own.
============================================================= */
/* Blank sheet in the app's own background colour. No contents, so there is
   nothing to lay out, nothing to animate, and nothing to download. The fade is
   short and goes cream-to-cream, so what you actually see is the thread
   arriving rather than a curtain lifting. */
.splash {
  position:fixed; inset:0; z-index:400;
  background:var(--cream);
  display:flex; align-items:center; justify-content:center;
  transition:opacity 0.22s ease;
}
.splash.gone { opacity:0; pointer-events:none; }
/* Deliberately no entrance animation. The logo is here to occupy a wait that
   already exists, not to perform — anything that fades or scales in makes the
   open read as slower than it is, which is what the old 1.4s splash did. */
.splash-logo {
  width:140px; height:140px;
  object-fit:contain; display:block;
}
/* Nothing to show if the file is missing: a broken-image glyph in the middle
   of the splash would look far worse than the plain sheet it replaced. */
.splash-logo[src=""], .splash-logo:not([src]) { display:none; }

/* =============================================================
   ONE ICON. The request-sent tick is the only glyph the wall uses, so
   icons.css (26KB of them) is gated with app.css rather than served to
   everyone for this. Both rules copied verbatim from icons.css.
============================================================= */
.ti{
  display:inline-block; width:1em; height:1em;
  vertical-align:-0.125em; flex-shrink:0;
  background-color:currentColor;
  -webkit-mask:var(--i) center/contain no-repeat;
          mask:var(--i) center/contain no-repeat;
}
.ti-check{--i:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12l5 5l10 -10%22 /%3E%3C/svg%3E")}