/* Host a party. Loaded only on /host/. Uses the site tokens from styles.css (ink, muted, line, orange, orange-text, font).
   Rules: white surfaces, orange for accents only, never white text on #F37521 (white text sits on brand-strong). */
.host-layout{--hf-error:var(--color-error);--hf-error-ink:var(--color-error);--hf-border:color-mix(in srgb,var(--color-ink) 45%,var(--color-bg));display:grid;gap:2rem;align-items:start}
@media(min-width:960px){.host-layout{grid-template-columns:minmax(0,18rem) minmax(0,40rem);gap:clamp(48px,7vw,112px)}.host-aside{position:sticky;top:120px}}
.host-aside ul{display:grid;gap:.6rem;margin-bottom:1.25rem}
.host-aside li{padding-left:1.1rem;position:relative}
.host-aside li::before{content:'';position:absolute;left:0;top:.78em;width:.55em;height:2px;background:var(--color-brand)}
.host-main{min-width:0}

.host-form{display:grid;gap:1.25rem}
.hf-note{color:var(--color-muted);font-size:var(--step--1)}
.hf-card{background:var(--color-bg);border:1px solid var(--color-line);border-radius:var(--radius-md);padding:clamp(20px,4vw,32px);display:grid;gap:1.25rem}
.hf-card h2{font-size:var(--step-2);letter-spacing:-.02em;margin:0;display:flex;align-items:center;gap:.7rem}
.hf-step{display:inline-grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:50%;border:1.5px solid var(--color-brand);color:var(--color-brand-strong);font-size:var(--step--1);font-weight:var(--weight-strong);font-variant-numeric:tabular-nums}
.hf-lead{color:var(--color-muted);margin:0}

.hf{display:grid;gap:.4rem;min-width:0}
.hf label,.hf legend,.hf-dates legend{font-weight:var(--weight-strong);font-size:var(--step-0);padding:0}
.hf-hint{color:var(--color-muted);font-size:var(--step--1);line-height:1.45;margin:0}
.hf input[type=text],.hf input[type=email],.hf input[type=tel],.hf input[type=number],.hf input[type=date],.hf textarea{
  width:100%;min-height:48px;padding:.7rem .85rem;font:inherit;font-size:max(16px,1rem);color:var(--color-ink);background:var(--color-bg);
  border:1.5px solid var(--hf-border);border-radius:var(--radius-sm);appearance:none;-webkit-appearance:none;
  transition:border-color var(--dur-fast) var(--ease-out)}
.hf textarea{resize:vertical;line-height:1.5}
.hf input[type=date]{min-width:0}
@media(hover:hover){.hf input:hover,.hf textarea:hover{border-color:var(--color-ink)}}
.hf input:focus-visible,.hf textarea:focus-visible,.hf-agreement:focus-visible{outline:var(--focus-ring);outline-offset:2px;border-color:var(--color-ink)}
.hf [aria-invalid=true]:focus-visible{outline-color:var(--hf-error);border-color:var(--hf-error)}
.hf-prefix{display:flex;align-items:stretch}
.hf-prefix>span{display:grid;place-items:center;min-width:2.5rem;border:1.5px solid var(--hf-border);border-right:0;border-radius:var(--radius-sm) 0 0 var(--radius-sm);background:var(--color-bg-alt);color:var(--color-muted)}
.hf-prefix input{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.hf.has-error .hf-prefix>span{border-color:var(--hf-error)}

.hf-dates{border:0;margin:0;padding:0;display:grid;gap:1rem;min-width:0}
.hf-dates legend{margin-bottom:.4rem}
@media(min-width:560px){.hf-dates{grid-template-columns:repeat(3,minmax(0,1fr))}.hf-dates legend{grid-column:1/-1}}
.hf-radios{border:0;margin:0;padding:0}
.hf-radios legend{margin-bottom:.2rem}
.hf-radios .hf-choice{display:inline-flex;margin-right:1.75rem}
.hf-choice{display:flex;align-items:center;gap:.7rem;min-height:44px;font-weight:400;cursor:pointer}
.hf .hf-choice{font-weight:400}
.hf input[type=radio],.hf input[type=checkbox]{width:22px;height:22px;flex:none;margin:0;accent-color:var(--color-ink)}
.hf-agree{align-items:flex-start;padding-top:.4rem}
.hf-agree input{margin-top:.15rem}
.hf-sign{margin-top:.6rem}

.hf-agreement{max-height:18rem;overflow:auto;padding:1rem;background:var(--color-bg-alt);border:1px solid var(--color-line);border-radius:var(--radius-sm);font-size:var(--step-0);line-height:1.6}

.hf-err{color:var(--hf-error);font-size:var(--step--1);font-weight:var(--weight-ui);margin:0}
.hf-err:empty{display:none}
.hf.has-error input:not([type=radio]):not([type=checkbox]),.hf.has-error textarea{border-color:var(--hf-error);border-width:2px}
.hf.has-error>label:first-child,.hf.has-error legend{color:var(--hf-error)}

.hf-status{padding:1rem 1.15rem;border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-bg)}
.hf-status.hf-alert{border-color:var(--hf-error);color:var(--hf-error-ink);background:var(--color-bg)}
.hf-status button{margin-top:.5rem}

.hf-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.hf-submit,.hf-secondary{font:inherit;font-weight:var(--weight-strong);min-height:var(--btn-height);padding:.8rem 1.6rem;border-radius:var(--btn-radius);cursor:pointer;line-height:1.2;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.hf-submit:active:not(:disabled),.hf-secondary:active{transform:var(--press)}
.hf-submit{background:var(--btn-bg);color:var(--btn-fg);border:2px solid var(--btn-bg);width:100%}
@media(min-width:560px){.hf-submit{width:auto;min-width:14rem}}
@media(hover:hover){.hf-submit:hover:not(:disabled){background:var(--btn-bg-hover);border-color:var(--btn-bg-hover)}}
.hf-submit:disabled{opacity:.7;cursor:progress}
.hf-secondary{background:var(--color-bg);color:var(--color-ink);border:2px solid var(--color-ink)}
@media(hover:hover){.hf-secondary:hover{background:var(--btn-ink-bg);color:var(--btn-ink-fg)}}
.hf-submit:focus-visible,.hf-secondary:focus-visible{outline:var(--focus-ring);outline-offset:3px}

.hf-success{animation:rise var(--dur-reveal) var(--ease-out) both}
.hf-success,.hf-closed{background:var(--color-bg);border:1px solid var(--color-line);border-radius:var(--radius-md);padding:clamp(24px,5vw,40px);display:grid;gap:1rem;justify-items:start}
.hf-success:focus{outline:none}
.hf-success h2,.hf-closed h2{font-size:var(--step-3);margin:0;text-wrap:balance}
.hf-success p,.hf-closed p{margin:0}
.hf-ref{font-variant-numeric:tabular-nums;font-weight:var(--weight-strong);font-size:var(--step-0);overflow-wrap:anywhere;padding:.75rem 1rem;background:var(--color-bg-alt);border-radius:var(--radius-sm);user-select:all}
.hf-closed a,.hf-success a{color:var(--color-brand-strong);font-weight:var(--weight-strong)}
.hf-agreement p{margin:0 0 .8rem}.hf-agreement p:first-child{font-weight:var(--weight-strong)}.hf-agreement p:last-child{margin-bottom:0}
.hf-cohosts{border:0;margin:0;padding:0;display:grid;gap:.6rem;min-width:0;justify-items:start}
.hf-cohosts legend{font-weight:var(--weight-strong);padding:0;margin-bottom:.4rem}
.hf-cohosts.has-error legend{color:var(--hf-error)}
.hf-cohosts #hf-cohost-rows{display:grid;gap:1rem;width:100%}
.hf-cohost{display:grid;gap:.75rem;padding:1rem;border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-bg-alt);justify-items:start}
.hf-cohost .hf{width:100%}
@media(min-width:560px){.hf-cohost{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.hf-cohost .hf-remove{grid-column:1/-1}}
.hf-remove{font:inherit;font-weight:var(--weight-strong);min-height:44px;padding:.4rem 1rem;background:none;color:var(--color-ink);border:2px solid var(--hf-border);border-radius:var(--btn-radius);cursor:pointer}
@media(hover:hover){.hf-remove:hover{border-color:var(--color-ink)}}
.hf-remove:focus-visible{outline:var(--focus-ring);outline-offset:3px}
.hf-secondary:disabled{opacity:.6;cursor:not-allowed}
.hf-optional{font-weight:var(--weight-body);color:var(--color-muted)}