/* The member web app. Loads after site.css and reads the same tokens —
   colour, type and the theme switch are shared with the marketing site on
   purpose, so crossing from spousora.com into /login does not feel like a
   different product. This file only adds the form/screen layout site.css
   has no reason to carry. */

.app-body{
  background:var(--ground);
  color:var(--ink);
  min-height:100dvh;
}

.app-shell{
  max-width:520px;
  margin:0 auto;
  padding:0 20px 48px;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

.app-shell.wide{ max-width:760px; }

.app-bar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 0 10px;
  position:sticky;
  top:0;
  background:var(--ground);
  z-index:5;
}

.app-bar .back{
  width:34px;height:34px;border-radius:10px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  background:var(--card);color:var(--ink);
  cursor:pointer;
}

.app-bar h1{ font-family:var(--serif); font-size:19px; font-weight:600; margin:0; flex:1; }
.app-bar .step{ font-family:var(--mono); font-size:12px; color:var(--ink3); }

.app-main{ flex:1; display:flex; flex-direction:column; padding-top:6px; }

.eyebrow-app{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--indigo);
}

.app-h1{ font-family:var(--serif); font-size:clamp(24px,5vw,30px); line-height:1.15; margin:10px 0 8px; }
.app-lede{ color:var(--ink2); font-size:14.5px; line-height:1.55; margin:0 0 18px; }

.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label{ font-size:12.5px; font-weight:600; color:var(--ink2); }
.field .hint{ font-size:12px; color:var(--ink3); }
.field input,.field select,.field textarea{
  font:inherit; font-size:15px; padding:12px 13px; border-radius:12px;
  border:1.5px solid var(--line2); background:var(--card); color:var(--ink);
  width:100%; box-sizing:border-box;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--indigo);
}
.field textarea{ resize:vertical; min-height:88px; }

.otp-input input{
  letter-spacing:.5em; font-family:var(--mono); font-size:22px; text-align:center;
  padding-left:8px;
}

.password-field{ position:relative; }
.password-field input{ padding-right:44px; }
.password-toggle{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border:none; background:none; border-radius:9px;
  color:var(--ink3); display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.password-toggle:hover{ color:var(--ink2); background:var(--card2); }

.chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.chip-btn{
  font:inherit; font-size:13.5px; padding:9px 14px; border-radius:999px;
  border:1.5px solid var(--line2); background:var(--card); color:var(--ink);
  cursor:pointer;
}
.chip-btn.selected{ background:var(--indigo); border-color:var(--indigo); color:#fff; }
.chip-btn:disabled{ opacity:.5; cursor:default; }

.card-app{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:16px; margin-bottom:14px;
}
.card-app.tint{ background:var(--card2); }
.card-app.selected{ border-color:var(--indigo); box-shadow:0 0 0 1.5px var(--indigo) inset; }

.btn-app{
  font:inherit; font-weight:600; font-size:15px; padding:13px 18px;
  border-radius:14px; border:none; cursor:pointer;
  background:var(--indigo-fill); color:#fff;
  width:100%; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-app:disabled{ opacity:.45; cursor:default; }
.btn-app.ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line2); }
.btn-app.danger{ background:var(--rose); }
.btn-app.sm{ width:auto; padding:9px 16px; font-size:13.5px; }

.app-footer{
  position:sticky; bottom:0; padding:14px 0; background:var(--ground);
  border-top:1px solid var(--line);
  margin-top:auto;
}

.progress-app{ height:5px; border-radius:999px; background:var(--line); overflow:hidden; width:100%; max-width:160px; }
.progress-app > i{ display:block; height:100%; background:var(--indigo); border-radius:999px; transition:width .3s ease; }

.error-note{ color:var(--rose); font-size:13.5px; margin:8px 0; }

.photo-grid-app{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.photo-slot{
  aspect-ratio:.8; border-radius:14px; border:1.5px dashed var(--line2);
  background:var(--card2); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:6px; cursor:pointer; overflow:hidden; position:relative;
  color:var(--ink2); font-size:11.5px; text-align:center; padding:8px;
}
.photo-slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.photo-slot .tag{
  position:absolute; left:6px; top:6px; background:rgba(9,9,20,.62); color:#fff;
  font-size:9.5px; padding:3px 6px; border-radius:6px; font-family:var(--mono);
}
.photo-slot .status{
  position:absolute; right:6px; top:6px; width:8px; height:8px; border-radius:999px;
}
.photo-slot .status.pending{ background:var(--bronze); }
.photo-slot .status.approved{ background:var(--jade); }
.photo-slot .status.rejected{ background:var(--rose); }

.capture-stage{
  position:relative; width:100%; aspect-ratio:3/4; border-radius:18px; overflow:hidden;
  background:#0A0B18;
}
.capture-stage video,.capture-stage img{ width:100%; height:100%; object-fit:cover; }
.capture-guide{
  position:absolute; inset:24px; border:2px dashed rgba(255,255,255,.55); border-radius:14px;
  pointer-events:none;
}

.timeline{ display:flex; flex-direction:column; gap:0; }
.timeline-row{ display:flex; gap:12px; padding:10px 0; }
.timeline-dot{ width:9px; height:9px; border-radius:999px; background:var(--indigo); margin-top:5px; flex-shrink:0; }
.timeline-line{ width:1.5px; background:var(--line); flex:1; margin:4px 0 -10px 3.75px; }

.slot-grid{ display:flex; flex-direction:column; gap:18px; }
.slot-day h4{ font-family:var(--mono); font-size:12px; color:var(--ink3); margin:0 0 8px; text-transform:uppercase; letter-spacing:.05em; }
.slot-chips{ display:flex; gap:8px; flex-wrap:wrap; }

.call-stage{
  position:fixed; inset:0; background:#0A0B18; display:flex; flex-direction:column; z-index:50;
}
.call-remote{ flex:1; width:100%; height:100%; object-fit:cover; background:#0A0B18; }
.call-local{
  position:absolute; right:16px; top:calc(env(safe-area-inset-top,0px) + 16px);
  width:100px; height:134px; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.18);
  background:#15172C;
}
.call-local video{ width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
.call-topbar{
  position:absolute; left:0; right:0; top:0; padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 14px;
  display:flex; align-items:center; justify-content:space-between; color:#fff;
  background:linear-gradient(to bottom, rgba(7,8,18,.65), transparent);
}
.call-controls{
  position:absolute; left:0; right:0; bottom:0; padding:16px 18px calc(env(safe-area-inset-bottom,0px) + 20px);
  display:flex; justify-content:center; gap:16px;
  background:linear-gradient(to top, rgba(7,8,18,.7), transparent);
}
.call-btn{
  width:56px; height:56px; border-radius:999px; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:rgba(255,255,255,.14);
}
.call-btn.end{ background:var(--rose); }
.call-btn.active{ background:#fff; color:#0A0B18; }
.call-waiting{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  text-align:center; color:#fff; padding:0 30px;
}

/* ── the dashboard (Discover, Requests, Messages, You) ─────────────────── */

.tab-shell{ display:flex; flex-direction:column; min-height:100dvh; }
.tab-main{ flex:1; max-width:520px; width:100%; margin:0 auto; padding:0 20px 90px; box-sizing:border-box; }
.tab-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  display:flex; justify-content:center;
  background:var(--card); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.tab-bar-inner{ display:flex; width:100%; max-width:520px; }
.tab-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:9px 4px 8px; background:none; border:none; cursor:pointer;
  color:var(--ink3); font:inherit; font-size:10.5px; font-weight:600; position:relative;
}
.tab-item.active{ color:var(--indigo); }
.tab-item .dot{
  position:absolute; top:5px; right:calc(50% - 20px); width:8px; height:8px;
  border-radius:999px; background:var(--rose); border:1.5px solid var(--card);
}

.top-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0 4px;
}
.top-row h1{ font-family:var(--serif); font-size:22px; margin:0; }

.discover-card{
  border-radius:22px; overflow:hidden; background:var(--card2);
  aspect-ratio:3/4; position:relative; margin-top:10px;
}
.discover-card img{ width:100%; height:100%; object-fit:cover; }
.discover-card .veil{
  position:absolute; left:0; right:0; bottom:0; padding:50px 18px 16px;
  background:linear-gradient(to top, rgba(7,8,18,.78), transparent); color:#fff;
}
.discover-card .name{ font-family:var(--serif); font-size:22px; display:flex; align-items:center; gap:8px; }
.badge-row{ display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; }
.badge-pill{
  background:rgba(255,255,255,.22); border-radius:999px; padding:5px 10px;
  font-size:11.5px; font-weight:700;
}
.discover-card .sub{ font-size:13px; opacity:.85; margin-top:7px; }
.discover-card .tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.discover-card .tag{
  background:rgba(255,255,255,.18); border-radius:999px; padding:6px 9px; font-size:11px; font-weight:600;
}
.discover-actions{ display:flex; gap:10px; margin-top:14px; align-items:center; }
.round-btn{
  width:52px; height:52px; border-radius:999px; border:1.5px solid var(--line2);
  background:var(--card); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink3); flex-shrink:0;
}
.round-btn.liked{ border-color:var(--rose); color:var(--rose); background:rgba(185,59,88,.08); }

.list-row{
  display:flex; align-items:center; gap:12px; padding:13px 0;
  border-bottom:1px solid var(--line); cursor:pointer; background:none; border-left:none; border-right:none; border-top:none;
  width:100%; text-align:left; font:inherit; color:inherit;
}
.list-row:last-child{ border-bottom:none; }
.avatar{
  width:52px; height:52px; border-radius:14px; object-fit:cover; background:var(--card2); flex-shrink:0;
}
.avatar.round{ border-radius:999px; }
.list-row .meta{ flex:1; min-width:0; }
.list-row .meta .t1{ font-weight:700; font-size:14.5px; display:flex; align-items:center; gap:6px; }
.list-row .meta .t2{ font-size:12.5px; color:var(--ink3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.unread-dot{ width:9px; height:9px; border-radius:999px; background:var(--rose); flex-shrink:0; }

.request-card{
  display:flex; gap:12px; padding:13px; border:1px solid var(--line); border-radius:16px; margin-top:10px;
}
.request-card .note{ font-size:13px; color:var(--ink2); margin:5px 0 9px; font-style:italic; }
.request-card .row{ display:flex; gap:8px; }

.chat-bar{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px;
  padding:14px 0; background:var(--ground); border-bottom:1px solid var(--line); margin-bottom:8px;
}
.chat-thread{ display:flex; flex-direction:column; gap:8px; padding:6px 0 80px; }
.bubble{
  max-width:78%; padding:10px 13px; border-radius:16px; font-size:14px; line-height:1.4;
}
.bubble.them{ align-self:flex-start; background:var(--card2); border-bottom-left-radius:4px; }
.bubble.me{ align-self:flex-end; background:var(--indigo-fill); color:#fff; border-bottom-right-radius:4px; }
.bubble .time{ display:block; font-size:10px; opacity:.6; margin-top:3px; }
.chat-input-bar{
  position:fixed; left:0; right:0; bottom:0; background:var(--ground); border-top:1px solid var(--line);
  padding:10px 20px calc(env(safe-area-inset-bottom,0px) + 10px); display:flex; gap:8px;
  justify-content:center;
}
.chat-input-bar-inner{ display:flex; gap:8px; width:100%; max-width:520px; }
.chat-input-bar input{
  flex:1; font:inherit; font-size:15px; padding:12px 14px; border-radius:999px;
  border:1.5px solid var(--line2); background:var(--card);
}
.send-btn{
  width:44px; height:44px; border-radius:999px; border:none; background:var(--indigo-fill); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.send-btn:disabled{ opacity:.4; }

.empty-note{ text-align:center; color:var(--ink3); font-size:13.5px; padding:60px 20px; }

.gathering-card{
  border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-top:12px; cursor:pointer;
  background:var(--card);
}
.gathering-cover{ width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--card2); display:block; }
.gathering-body{ padding:13px 14px; }
.gathering-kind{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--indigo);
}
.gathering-title{ font-family:var(--serif); font-size:17px; margin:5px 0 4px; }
.gathering-meta{ font-size:12.5px; color:var(--ink3); }
.gathering-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }

.rsvp-row{ display:flex; gap:8px; margin-top:14px; }
.attendee-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
.attendee-row:last-child{ border-bottom:none; }

@media(max-width:400px){
  .app-shell{ padding:0 14px 40px; }
  .tab-main{ padding:0 14px 90px; }
}