/* 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; }

/* Pick-one / tick-all questions are fieldsets: the legend reads like the
   other questions' labels. */
fieldset.field{ border:0; padding:0; margin:0 0 16px; min-width:0; }
fieldset.field legend{ padding:0; margin-bottom:6px; font-size:0.8rem; font-weight:700; color:var(--ink-soft); }
.radio-opt{ min-height:44px; }

/* 1 to 10 questions: ten taps in a row, so it's clear a number is wanted */
.scale-row{ display:grid; grid-template-columns:repeat(10, minmax(0, 1fr)); gap:6px; }
.scale-opt{ position:relative; display:block; cursor:pointer; }
.scale-opt input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.scale-opt span{
  display:flex; align-items:center; justify-content:center; min-height:44px; border-radius:11px;
  border:1.5px solid var(--border); background:var(--surface-2); font-weight:700; font-variant-numeric:tabular-nums;
}
.scale-opt input:checked + span{ background:var(--accent); border-color:var(--accent); color:#fff; }
.scale-opt input:focus-visible + span{ outline:2.5px solid var(--accent-strong); outline-offset:2px; }
@media (max-width:420px){ .scale-row{ grid-template-columns:repeat(5, minmax(0, 1fr)); } }

/* "I have more to share": optional free text under a pick-one question */
.more-share{ margin-top:4px; }
.more-share > summary{
  display:inline-flex; align-items:center; min-height:44px; cursor:pointer;
  font-size:0.82rem; font-weight:600; color:var(--accent-strong);
}
.more-share > summary:focus-visible{ outline:2.5px solid var(--accent-strong); outline-offset:2px; border-radius:6px; }
.more-share textarea{
  width:100%; 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; resize:vertical;
}

/* sharing note under the intro (edited on the admin's Questionnaire tab) */
.sharing-note{
  margin:-10px 0 22px; padding:10px 13px; border-radius:11px; background:var(--accent-soft);
  color:var(--ink); font-size:0.86rem;
}
.field-hint{ margin:-2px 0 2px; font-size:0.84rem; font-weight:600; color:var(--accent-strong); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---- topic groups: a small heading, then short answers in two columns.
   A want / about-you pair reads left to right: what he wants in a guy, then
   himself. One column on phones, where two columns would cramp the choices. ---- */
.apply-card.wide{ max-width:860px; }
.q-group{ padding:14px 0 2px; border-top:1px solid var(--border-soft); }
.form-section h2 + .q-group{ border-top:none; padding-top:0; }
.q-group h3{ font-size:0.95rem; margin:0 0 10px; color:var(--ink); }
.q-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 28px; }
.q-cell{ min-width:0; }
.q-side{ margin:0 0 4px; font-size:0.72rem; font-weight:700; color:var(--accent-strong); }
@media (max-width:640px){
  .q-grid{ grid-template-columns:minmax(0, 1fr); }
}
/* choices wrap across the line instead of one per row, so the form is
   shorter; each choice keeps its 44px tap height */
.radio-row{ flex-direction:row; flex-wrap:wrap; gap:0 20px; }