/* Shared by register.html and host.html.
   The tokens, card, rule, labels and button are copied from index.html so the
   pages match the save-the-date. Change a colour there, change it here too. */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}

:root{
  --ink:#16110b;
  --green:#1f3d2b;
  --green-deep:#122519;
  --parchment:#f5ecda;
  --parchment-dim:#d9cdb4;
  --gold:#d9ac52;
  --ember:#c0563a;
  --label:#8a7043;
  --muted:#5d5142;
  --line:rgba(122,99,56,.28);
  --field:#fffaf0;
  --display:"Montserrat",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --body:"Montserrat",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

body{
  background:var(--green-deep);
  color:var(--parchment);
  font-family:var(--body);
  font-size:clamp(16px,.9vw + 13px,18px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

[hidden]{display:none !important}

/* ---------------- page + card (from index.html) ---------------- */
.details{
  min-height:100svh;
  background:radial-gradient(120% 80% at 50% 0%, #24462f 0%, var(--green-deep) 70%);
  padding:clamp(2.5rem,8vw,5rem) 16px clamp(2.5rem,6vw,4rem);
  display:flex;flex-direction:column;align-items:center;gap:clamp(1.6rem,4vw,2.4rem);
}

.card{
  width:min(640px,100%);
  background:linear-gradient(180deg,#fbf5e8 0%, #f2e6cf 100%);
  color:var(--ink);
  border:1px solid rgba(217,172,82,.55);
  border-radius:3px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.65), inset 0 0 0 6px rgba(255,255,255,.35);
  padding:clamp(2rem,6vw,3.4rem) clamp(1.2rem,5vw,3rem);
  text-align:center;
}
.card.wide{width:min(1040px,100%)}

.crest{
  display:block;
  width:clamp(64px,13vw,92px);
  height:auto;
  margin:0 auto clamp(.6rem,2vw,1rem);
  opacity:.9;
}
.card h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.5rem,4vw,2.2rem);
  margin:0 0 .4rem;
  color:var(--green);
  letter-spacing:.02em;
  text-transform:uppercase;
}
.card .lede{margin:.2rem 0 0;color:var(--muted);font-style:italic;font-size:.95rem;text-wrap:pretty}
.rule{
  width:120px;height:1px;margin:1.4rem auto clamp(1.6rem,4vw,2.2rem);
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  position:relative;
}
.rule::after{
  content:"✦";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-55%);
  background:#f7efdf;padding:0 .6rem;color:var(--gold);font-size:.7rem;
}

.btn{
  display:inline-block;
  padding:.8em 1.9em;
  font-family:var(--display);
  font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:#f7efdf;background:var(--green);
  border:1px solid var(--green);
  border-radius:2px;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.btn:hover{background:#2c5539;transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.btn.ghost{background:transparent;color:var(--green)}
.btn.ghost:hover{background:rgba(31,61,43,.08)}
.btn.small{padding:.6em 1.2em;font-size:.6rem}

footer{
  padding:0 16px clamp(2.5rem,6vw,4rem);
  text-align:center;
  font-size:.66rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(245,236,218,.4);
  background:var(--green-deep);
}
footer a{color:inherit}

/* ---------------- form ---------------- */
form{text-align:left;display:grid;gap:1.4rem}

.field{display:grid;gap:.4rem;margin:0;padding:0;border:0;min-width:0}
.field > label, .field > legend, .label{
  font-family:var(--display);
  font-size:.63rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--label);
  padding:0;
}
.field .hint{font-size:.8rem;color:var(--muted);font-style:italic;margin:0}
.field .opt{letter-spacing:.1em;text-transform:none;font-weight:500;font-style:italic}

input[type=text],input[type=email],input[type=password],textarea{
  width:100%;
  font:inherit;font-size:1rem;color:var(--ink);
  background:var(--field);
  border:1px solid rgba(122,99,56,.4);
  border-radius:2px;
  padding:.7em .85em;
}
textarea{resize:vertical;min-height:4.5em;line-height:1.5}
input:focus-visible,textarea:focus-visible,.pill input:focus-visible + span,.btn:focus-visible,.tab:focus-visible,.chip:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;
}
.invalid{border-color:var(--ember) !important;box-shadow:0 0 0 1px var(--ember)}

/* radio pills */
.pills{display:flex;flex-wrap:wrap;gap:.6rem}
.pill{position:relative;flex:1 1 9rem}
.pill input{position:absolute;opacity:0;width:1px;height:1px}
.pill span{
  display:block;text-align:center;cursor:pointer;
  padding:.75em 1em;
  font-family:var(--display);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green);background:var(--field);
  border:1px solid rgba(122,99,56,.4);border-radius:2px;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.pill span small{display:block;font-size:.85em;font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--muted);margin-top:.15em}
.pill input:checked + span{background:var(--green);border-color:var(--green);color:#f7efdf}
.pill input:checked + span small{color:var(--parchment-dim)}

/* guests */
.guests{display:grid;gap:1rem}
.guest{
  border:1px dashed rgba(217,172,82,.9);
  border-radius:3px;
  padding:1.1rem clamp(.9rem,3vw,1.3rem) 1.2rem;
  display:grid;gap:1.1rem;
  background:rgba(255,255,255,.35);
}
.guest-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.guest-head h3{
  margin:0;font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--green);
}
.linkish{
  font:inherit;font-size:.78rem;color:var(--ember);background:none;border:0;padding:.2em 0;cursor:pointer;text-decoration:underline;
}
.section-break{border:0;border-top:1px solid var(--line);margin:.2rem 0}

.form-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;align-items:center;margin-top:.4rem}

.alert{
  margin:0;padding:.8em 1em;border-radius:2px;font-size:.92rem;
  background:rgba(192,86,58,.1);border:1px solid rgba(192,86,58,.45);color:#7a2f1c;
}
.alert.ok{background:rgba(31,61,43,.08);border-color:rgba(31,61,43,.35);color:var(--green)}

.done{text-align:center}
.done p{margin:0 0 1rem;text-wrap:pretty}
.done .big{font-size:1.15rem;font-weight:600;color:var(--green)}