/* =============================================================
   auth.css -- Sign-in gate shown before trip content is available.
   -------------------------------------------------------------
   Contains: mobile-first auth overlay, Google sign-in button, and
   signed-in-without-trip-access controls. Desktop card sizing lives in
   css/desktop.css.
   Depends on: css/tokens.css variables.
   Used by: index.html markup and js/auth.js state classes on .app.
   ============================================================= */
.app.auth-pending .panel,
.app.auth-blocked .panel,
.app.auth-pending .bottom-nav,
.app.auth-blocked .bottom-nav,
.app.auth-pending .install-card,
.app.auth-blocked .install-card{
  display:none;
}

.auth-screen{
  position:absolute;
  inset:0;
  z-index:80;
  display:none;
  min-height:100vh;
  padding:20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 42%),
    var(--mist);
}
.app.auth-pending .auth-screen,
.app.auth-blocked .auth-screen{
  display:flex;
  align-items:stretch;
}

.auth-card{
  width:100%;
  min-height:calc(100vh - 40px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:28px 2px;
}
.auth-eyebrow{
  font:600 11px/1 var(--font-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--buoy);
  margin-bottom:10px;
}
.auth-title{
  font-family:var(--font-display);
  font-size:48px;
  line-height:.92;
  letter-spacing:0;
  color:var(--ink);
}
.auth-copy{
  margin-top:12px;
  max-width:340px;
  color:var(--ink-70);
  font-size:14px;
  line-height:1.55;
}
.auth-button-wrap{
  min-height:44px;
  margin-top:24px;
  display:flex;
  align-items:center;
}
.google-signin-button{
  min-width:240px;
  min-height:40px;
}
.auth-access{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.auth-access-title{
  font:700 14px/1.2 var(--font-body);
  color:var(--ink);
}
.auth-access-copy{
  margin-top:8px;
  color:var(--ink-70);
  font-size:13px;
  line-height:1.45;
}
.invite-code-form{
  margin-top:14px;
}
.invite-code-form label{
  display:block;
  margin-bottom:7px;
  color:var(--ink-45);
  font:600 11px/1 var(--font-mono);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.invite-code-row{
  display:flex;
  gap:8px;
}
.invite-code-input{
  min-width:0;
  flex:1;
  height:42px;
  border:1px solid var(--field-border);
  border-radius:var(--radius-sm);
  background:var(--field);
  padding:0 12px;
  color:var(--ink);
  font:600 15px/1 var(--font-mono);
  text-transform:uppercase;
}
.invite-code-input:focus{
  outline:2px solid rgba(255,106,61,.24);
  border-color:var(--buoy);
}
.invite-code-submit{
  flex:0 0 auto;
  min-width:72px;
  height:42px;
  border:0;
  border-radius:var(--radius-sm);
  background:var(--ink);
  color:var(--paper);
  font:700 13px/1 var(--font-body);
  cursor:pointer;
}
.invite-code-submit:disabled{
  cursor:wait;
  opacity:.62;
}
.auth-access-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.auth-access-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--field);
  color:var(--ink);
  font-size:12px;
  font-weight:700;
  text-decoration:none;
}
.auth-access-link[aria-disabled="true"]{
  color:var(--ink-45);
  pointer-events:none;
}
.auth-status{
  margin-top:14px;
  min-height:18px;
  color:var(--ink-45);
  font:500 12px/1.45 var(--font-body);
}
.auth-setup{
  margin-top:14px;
  padding:12px 14px;
  border:1px solid rgba(255,106,61,.28);
  border-radius:var(--radius-sm);
  background:var(--buoy-10);
  color:var(--ink);
  font-size:13px;
  line-height:1.45;
}