/* Kept visually consistent with the front page (loverboi.org): same cream +
   teal + violet palette, same fonts, same subtle flower texture, since this
   is the next step in that same visitor journey. The admin tool at /signin
   is deliberately the odd one out and stays on its own dark purple theme. */
:root{
  --cream: #FBF3E2;
  --bg: var(--cream);
  --surface: #ffffff;
  --surface-2: #EDE8FF;
  --ink: #2A2140;
  --ink-soft: #5B5270;
  --muted: #6C6488;
  --border: rgba(42,33,64,0.14);
  --border-soft: rgba(42,33,64,0.08);
  --accent: #7B5CFA;
  --accent-strong: #6B3FE0;
  --accent-2: #3EA5AB;
  --accent-soft: #EDE8FF;
  --shadow: rgba(42,33,64,0.12);
}

*{ box-sizing:border-box; }
body{
  margin:0; background-color:var(--bg); color:var(--ink);
  background-image:url('/flower-pattern.png'); background-repeat:repeat;
  font-family:'Inter',-apple-system,sans-serif;
  font-size:14.5px; line-height:1.6;
}
h1,h2,.display{ font-family:'Playfair Display',Georgia,serif; font-weight:700; letter-spacing:-0.01em; text-wrap:balance; }
button{ font-family:inherit; font-size:inherit; color:inherit; }

/* This is the public, no-sign-in intake site: a plain top bar, no admin-style
   sidebar - it should feel like a simple form site, not a dashboard. */
#app{ display:flex; flex-direction:column; min-height:100vh; }
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:18px 24px;
}
.wordmark{ display:flex; align-items:center; gap:10px; }
.wordmark-logo{ height:44px; width:auto; display:block; }
.nav{ display:flex; gap:6px; }
.nav-btn{
  padding:9px 16px; border-radius:9px;
  border:none; background:transparent; color:var(--ink-soft); cursor:pointer;
  font-weight:600; font-size:0.85rem;
}
.nav-btn:hover{ background:var(--surface-2); }
.nav-btn.active{ background:var(--accent-soft); color:var(--accent-strong); }

#main{ flex:1; min-width:0; padding:30px 24px 60px; display:flex; justify-content:center; }

.apply-card{
  width:100%; max-width:520px; background:var(--surface); border:1.5px solid var(--border);
  border-radius:16px; padding:32px 30px; height:fit-content;
}
.apply-card.wide{ max-width:720px; }
.apply-card h1{ font-size:1.7rem; margin:0 0 6px; color:var(--accent-strong); }
.apply-sub{ color:var(--muted); font-size:0.9rem; margin:0 0 22px; }

.field{ margin-bottom:16px; display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:0.8rem; font-weight:700; color:var(--ink-soft); }
.field input[type="text"], .field input[type="email"], .field input[type="number"], .field textarea{
  padding:11px 13px; border-radius:11px; border:1.5px solid var(--border); background:var(--surface-2);
  color:var(--ink); font-size:0.92rem; font-family:inherit; width:100%; resize:vertical;
}
.field input[type="file"]{ font-size:0.85rem; }
.radio-row{ display:flex; flex-direction:column; gap:8px; }
.radio-opt{ display:flex; align-items:center; gap:8px; font-size:0.88rem; font-weight:500; cursor:pointer; }

#update-form textarea{
  width:100%; padding:14px; border-radius:12px; border:1.5px solid var(--border); background:var(--surface-2);
  color:var(--ink); font-size:0.95rem; font-family:inherit; margin-bottom:16px;
}

.form-section{ padding:16px 0; border-top:1px solid var(--border-soft); }
.form-section:first-of-type{ border-top:none; padding-top:0; }
.form-section h2{ font-size:1.05rem; margin:0 0 14px; color:var(--accent-strong); }

.big-btn{
  display:inline-flex; align-items:center; gap:10px; padding:13px 26px; border-radius:12px;
  background:var(--accent); color:#fff; font-weight:700; cursor:pointer; border:none; font-size:0.98rem;
  margin-top:6px;
}
.big-btn:hover{ background:var(--accent-strong); }

.marketing-box{
  white-space:pre-line; font-size:1rem; line-height:1.7;
}

#toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--cream); padding:11px 20px; border-radius:100px;
  font-size:0.85rem; font-weight:600; opacity:0; pointer-events:none; transition:all .25s ease;
  box-shadow:0 10px 30px var(--shadow); z-index:50; max-width:90vw; text-align:center;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:700px){
  .topbar{ padding:12px 16px; }
  .wordmark-logo{ height:36px; }
  #main{ padding:20px 14px; }
}

/* One consistent keyboard focus ring, never removed without this
   replacing it. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2.5px solid var(--accent-strong); outline-offset:2px;
}

/* ---- questionnaire extras ---- */
.req{ color:var(--accent-strong); }
.lookup-error{
  background:#FBE9F0; border:1.5px solid #E9B7CB; color:#8A2E55; border-radius:11px;
  padding:10px 13px; font-size:0.86rem; margin:-4px 0 14px;
}
.field select{
  padding:11px 13px; border-radius:11px; border:1.5px solid var(--border); background:var(--surface-2);
  color:var(--ink); font-size:0.92rem; font-family:inherit; width:100%;
}
.sub-field{ display:flex; flex-direction:column; gap:6px; margin-top:6px; padding-left:12px; border-left:2px solid var(--accent-soft); }
.sub-field[hidden], .field [hidden]{ display:none !important; }

/* intake form progress bar: sticks to the top while scrolling the form */
.form-progress{
  position:sticky; top:0; z-index:5; background:var(--surface);
  display:flex; align-items:center; gap:12px; padding:10px 0 12px; margin:-6px 0 14px;
  border-bottom:1px solid var(--border-soft);
}
.fp-track{ flex:1; height:8px; border-radius:100px; background:var(--accent-soft); overflow:hidden; }
.fp-fill{ height:100%; width:0; background:var(--accent-2); border-radius:100px; transition:width .25s ease; }
.fp-label{ flex:none; font-size:0.8rem; font-weight:600; color:var(--muted); min-width:110px; text-align:right; }