/* ============================================================
   Event Sign-ups — base + public styles
   Direction: calm "event ticket / ledger". Pine-teal primary,
   warm-paper surfaces, monospace for money & counts.
   ============================================================ */

:root{
  --ink:#16211f; --ink-soft:#39463f; --muted:#6a7670;
  --paper:#eef1ec; --surface:#ffffff; --surface-2:#f6f8f4;
  --line:#e0e5de; --line-strong:#c9d1c8;
  --pine:#0d5c54; --pine-600:#0a4a44; --pine-050:#e5f0ed;
  --amber-ink:#8a4b00; --amber-bg:#fbeede;
  --green-ink:#166b39; --green-bg:#e6f4ea;
  --red:#b42318; --red-600:#8f1b12; --red-bg:#fbe9e6;
  --radius:16px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(16,33,31,.05), 0 10px 30px rgba(16,33,31,.06);
  --shadow-sm:0 1px 2px rgba(16,33,31,.06);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  background:var(--paper); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body.public{background:
  radial-gradient(1200px 500px at 50% -260px, var(--pine-050), transparent 70%),
  var(--paper);
}

.wrap{width:100%; max-width:960px; margin:0 auto; padding:28px 20px 40px}
a{color:var(--pine)}
h1,h2,h3{line-height:1.15; letter-spacing:-.02em; margin:0 0 .4em}
h1{font-size:clamp(1.6rem, 4vw, 2rem); font-weight:750}
h2{font-size:1.3rem; font-weight:700}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.mt{margin-top:1.2rem}
::selection{background:var(--pine-050)}

/* keyboard focus is always visible, mouse clicks stay clean */
a:focus-visible,button:focus-visible,.btn:focus-visible,.iconbtn:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,[onclick]:focus-visible{
  outline:3px solid var(--pine); outline-offset:2px;
}

/* skip link for keyboard / screen-reader users */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--pine); color:#fff; padding:.6rem 1rem;
  border-radius:0 0 var(--radius-sm) 0; font-weight:650; text-decoration:none;
}
.skip:focus{left:0}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important; animation:none!important; scroll-behavior:auto!important}
}

.eyebrow{
  text-transform:uppercase; letter-spacing:.16em; font-size:.72rem;
  font-weight:700; color:var(--pine); margin:0 0 .5rem;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  background:var(--pine); color:#fff; border:1px solid var(--pine);
  padding:.62rem 1.05rem; border-radius:var(--radius-sm); font:inherit;
  font-weight:650; cursor:pointer; text-decoration:none; transition:.15s;
  box-shadow:var(--shadow-sm);
}
.btn:hover{background:var(--pine-600); border-color:var(--pine-600)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.65; cursor:progress; transform:none}
.btn.ghost{background:#fff; color:var(--ink); border-color:var(--line-strong); box-shadow:none}
.btn.ghost:hover{background:var(--surface-2); border-color:var(--muted)}
.btn.danger{background:#fff; color:var(--red); border-color:#e7c3bd; box-shadow:none}
.btn.danger:hover{background:var(--red-bg)}
.btn.tiny{padding:.35rem .7rem; font-size:.82rem; border-radius:8px}
.btn-lg{padding:.85rem 1.5rem; font-size:1.05rem; width:100%}
.iconbtn{
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); background:#fff; border-radius:8px; cursor:pointer;
  color:var(--ink-soft); font-size:.95rem; line-height:1;
}
.iconbtn:hover{background:var(--surface-2)}
.iconbtn.danger{color:var(--red); border-color:#e7c3bd}
.iconbtn.danger:hover{background:var(--red-bg)}

/* ---------- cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px; box-shadow:var(--shadow);
  margin-bottom:22px;
}
.card.narrow{max-width:460px; margin:6vh auto}
.card.empty{text-align:center; padding:44px 24px}
.card-title{font-size:1.05rem; margin-bottom:1rem}
.card-title-row{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem}

/* ---------- forms (inputs shared everywhere) ---------- */
label{display:block; font-weight:600; font-size:.92rem; color:var(--ink-soft)}
fieldset.field{border:0; padding:0; margin:0; min-width:0}
fieldset.field legend{display:block; padding:0; font-weight:600; font-size:.92rem; color:var(--ink-soft); margin-bottom:.1rem}
input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=date],input[type=search],input[type=password],select,textarea{
  width:100%; margin-top:.35rem; padding:.6rem .7rem; font:inherit;
  color:var(--ink); background:#fff; border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); transition:border-color .15s, box-shadow .15s;
}
textarea{resize:vertical; min-height:2.6rem}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--pine); box-shadow:0 0 0 3px var(--pine-050);
}
.stack,.stack-label{display:block}
.stack label,.stack>label{margin-bottom:1rem}
.stack-label{margin-bottom:1.1rem; font-weight:600; color:var(--ink-soft)}
.field-help{display:block; margin-top:.3rem; font-weight:500; font-size:.8rem; color:var(--muted)}
.field-error{display:block; margin-top:.3rem; font-size:.82rem; color:var(--red); font-weight:600}
.has-error input,.has-error select,.has-error textarea{border-color:var(--red)}
.has-error input:focus,.has-error select:focus,.has-error textarea:focus{
  border-color:var(--red); box-shadow:0 0 0 3px var(--red-bg)}
.req{color:var(--red)}
.fr-check{display:flex; align-items:center; gap:.5rem; font-weight:600; color:var(--ink-soft); margin-top:.4rem}
.fr-check input{width:auto; margin:0}

.choice-group{margin-top:.4rem; display:grid; gap:.4rem}
.choice{display:flex; align-items:center; gap:.55rem; font-weight:500; color:var(--ink);
  padding:.5rem .65rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2);
  cursor:pointer; transition:border-color .15s, background .15s}
.choice:hover{border-color:var(--line-strong); background:#fff}
.choice:has(input:checked){border-color:var(--pine); background:var(--pine-050)}
.choice input{width:auto; margin:0; accent-color:var(--pine)}

/* ---------- flash / notices ---------- */
.flash{padding:.75rem 1rem; border-radius:var(--radius-sm); margin-bottom:1rem;
  border:1px solid var(--line); border-left-width:4px; background:#fff; font-weight:500;
  display:flex; align-items:baseline; gap:.55rem}
.flash::before{font-weight:800; flex:0 0 auto}
.flash-success{border-left-color:var(--green-ink); background:var(--green-bg); color:var(--green-ink)}
.flash-success::before{content:"✓"}
.flash-error{border-left-color:var(--red); background:var(--red-bg); color:var(--red-600)}
.flash-error::before{content:"!"}
.flash-info{border-left-color:var(--pine); background:var(--pine-050); color:var(--pine-600)}
.flash-info::before{content:"i"; font-family:var(--mono)}
.errbox{background:#2b1512; color:#ffd9d2; padding:.9rem; border-radius:var(--radius-sm);
  font-family:var(--mono); font-size:.8rem; overflow:auto; white-space:pre-wrap}
.steps{padding-left:1.2rem} .steps li{margin:.4rem 0}

/* ---------- public: hero + event list ---------- */
.hero{text-align:center; padding:20px 0 8px}
.hero h1{font-size:clamp(1.9rem, 5.5vw, 2.6rem)}
.lede{font-size:1.08rem; color:var(--ink-soft); max-width:36rem; margin:.4rem auto 0}

.event-list{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px}
.event-card a{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow-sm);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.event-card a:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--line-strong)}
.event-main h2{margin:0 0 .2rem; font-size:1.2rem}
.event-desc{margin:0; color:var(--muted); font-size:.92rem}
.event-go{color:var(--pine); font-weight:650; white-space:nowrap}

/* ---------- public: the ticket (form) ---------- */
.ticket{
  max-width:620px; margin:6px auto 0; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:30px; overflow:hidden;
}
.ticket-head{margin-bottom:1.2rem}
.ticket-head h1{font-size:1.8rem}
.ticket-intro{color:var(--ink-soft); margin-top:.4rem}
.ticket-form{display:block}
.ticket-form .field{margin-bottom:1.15rem}
.form-heading{margin:1.4rem 0 .3rem; font-size:1.1rem; color:var(--ink)}
.form-para{color:var(--ink-soft); margin:.2rem 0 1rem}
.form-divider{border:none; border-top:1px solid var(--line); margin:1.4rem 0}

/* signature: tear-off payment stub */
.stub{
  position:relative; margin:1.6rem -30px 0; padding:1.6rem 30px .4rem;
  background:var(--surface-2); border-top:2px dashed var(--line-strong);
}
.stub::before,.stub::after{
  content:""; position:absolute; top:-13px; width:24px; height:24px;
  background:var(--paper); border-radius:50%;
}
.stub::before{left:-13px} .stub::after{right:-13px}
.stub-label{margin:0; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem;
  font-weight:700; color:var(--muted)}
.stub-amount{font-family:var(--mono); font-size:1.5rem; font-weight:700; color:var(--ink); margin:.15rem 0 .5rem}
.stub-text{color:var(--ink-soft); font-size:.95rem}
.stub-qr{display:block; width:190px; height:190px; object-fit:contain; margin:.9rem 0;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:8px}
.stub-hint{font-size:.85rem; color:var(--muted); margin:0 0 .4rem}
.ticket-form .btn-lg{margin-top:1.4rem}

/* honeypot */
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; opacity:0}

/* thank you */
.ticket-done{text-align:center}
.check{width:64px; height:64px; margin:0 auto 1rem; border-radius:50%;
  background:var(--green-bg); color:var(--green-ink); font-size:2rem; font-weight:800;
  display:flex; align-items:center; justify-content:center}
.ticket-done .stub{text-align:left}

/* footer */
.sitefoot{border-top:1px solid var(--line); color:var(--muted); font-size:.82rem}
.sitefoot .wrap{padding-top:18px; padding-bottom:22px}
.sitefoot-in{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.foot-admin{color:var(--muted); text-decoration:none}
.foot-admin:hover{color:var(--pine); text-decoration:underline}

/* login card niceties */
.login .eyebrow{text-align:left}

@media (max-width:560px){
  .hero h1{font-size:1.9rem}
  .ticket{padding:22px}
  .stub{margin:1.4rem -22px 0; padding-left:22px; padding-right:22px}
  .event-card a{flex-direction:column; align-items:flex-start}
}