/* ============================================================
   host.css — the "new-listing" form (host.html)
   Tokens, header, footer, buttons and links come from styles.css;
   only what the form itself needs lives here.
   ============================================================ */
[hidden]{display:none!important}           /* wins over display:flex/grid on hidden rows and the progress line */
.hf-main{padding:24px 0 64px}
.hf-wrap{max-width:760px;margin:0 auto;padding:0 20px}
.hd .host-btn{display:none}                 /* you are already here */
a.mark{border:0}                            /* the brand links home on subpages (same rule as event.css) */
a.mark:hover{color:var(--bright);border:0}
.hf-form.is-init .hf-ctl,.hf-form.is-init .hf-check{transition:none}

/* ---------- page head, gate, progress ---------- */
.hf-h1{margin:0;font-size:16px;font-weight:700;color:var(--bright);letter-spacing:.01em;line-height:1.4}
.hf-h1 .ps{color:var(--acc)}
.hf-gate{margin:24px auto 0}
.hf-gate p{margin-bottom:12px}
.hf-prog{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--mute);font-size:12px;margin:6px 0 24px;
  /* follows the host down the form so the count is always in view */
  position:sticky;top:0;z-index:5;background:var(--bg);padding:10px 0;margin-top:0;
  border-bottom:1px solid var(--line)}
.hf-prog-bar{color:var(--dim);letter-spacing:-.02em;white-space:nowrap}
.hf-prog-bar b{color:var(--acc);font-weight:400}
.hf-prog.is-full{color:var(--acc)}

/* ---------- sections ---------- */
.hf-sec{margin:0 0 26px}
.hf-sh{display:flex;align-items:center;gap:12px;color:var(--mute);font-size:12px;margin:0 0 12px;white-space:nowrap}
.hf-sh b{color:var(--bright);font-weight:700;letter-spacing:.04em}
.hf-sh b::before{content:"── ";color:var(--dim);letter-spacing:0}
.hf-sh-line{flex:1;border-top:1px solid var(--line2);opacity:.8}
.hf-sh-cnt{color:var(--dim);font-size:11px;letter-spacing:.02em}
.hf-sh-cnt.is-full{color:var(--acc)}
.hf-sh-cnt.is-full::before{content:"✓ "}

/* ---------- fields ---------- */
.hf-f{display:flex;flex-direction:column;gap:5px;min-width:0;margin:0 0 14px}
.hf-row2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.hf-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px}
.hf-lab{display:flex;align-items:baseline;gap:7px;color:var(--acc);font-weight:700;font-size:12px;min-width:0}
.hf-lab .ps{font-weight:400}
.hf-req{font-style:normal;color:var(--mute);font-weight:400;font-size:10px;vertical-align:1px}
.hf-lab .hf-cnt{margin-left:auto;font-weight:400;font-size:11px;color:var(--mute);white-space:nowrap}
.hf-cnt.is-ok{color:var(--acc)}
.hf-cnt.is-near{color:var(--acc2)}
.hf-cnt.is-over{color:var(--warn)}
.hf-ctlwrap{position:relative}
.hf-ctl{display:block;width:100%;min-width:0;font:inherit;font-size:13px;line-height:1.4;background:var(--bg);border:1px solid var(--line2);color:var(--bright);padding:8px 32px 8px 10px;border-radius:2px;margin:0;transition:border-color .12s,background .12s,box-shadow .12s;-webkit-appearance:none;appearance:none}
.hf-ctl::placeholder{color:var(--dim)}
.hf-ctl:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 2px var(--accdim)}
.hf-ta{min-height:160px;resize:vertical}
.hf-sel{cursor:pointer;padding-right:52px}
.hf-form option{background:var(--panel);color:var(--ink)}
.hf-selwrap::after{content:"▾";position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--mute);pointer-events:none;font-size:12px}
.hf-check{position:absolute;right:10px;top:50%;width:14px;height:14px;margin-top:-7px;opacity:0;transform:scale(.6);transition:opacity .18s,transform .18s;pointer-events:none}
.hf-selwrap .hf-check{right:30px}
.hf-tawrap .hf-check{top:17px}
/* done: amber wash + check glyph; the wash animation plays once, on the crossing into "done" */
.hf-f.is-done .hf-ctl{border-color:var(--acc);background:rgba(var(--acc-rgb),.07)}
.hf-f.is-done .hf-check{opacity:1;transform:scale(1)}
.hf-f.is-bad .hf-ctl{border-color:var(--warn)}
.hf-f.is-bad .hf-ctl:focus{box-shadow:0 0 0 2px rgba(255,107,87,.14)}
.hf-f.is-wash .hf-ctl{animation:hf-wash .6s ease-out}
.hf-f.is-wash .hf-check{animation:hf-checkin .6s cubic-bezier(.2,.7,.2,1)}
@keyframes hf-wash{0%{background:rgba(var(--acc-rgb),.22)}100%{background:rgba(var(--acc-rgb),.07)}}
@keyframes hf-checkin{0%{opacity:0;transform:scale(.6)}55%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
.hf-hint{color:var(--mute);font-size:11px;line-height:1.5}
.hf-err{display:none;color:var(--warn);font-size:11px;line-height:1.5}
.hf-err::before{content:"!! "}
.hf-f.is-bad .hf-err{display:block}

/* slug preview */
.hf-slug{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--mute);min-height:22px}
.hf-slug-pre{white-space:nowrap}
.hf-slug-txt{color:var(--bright);word-break:break-all}
.hf-slug-txt:empty::before{content:"your-event-title";color:var(--dim)}
.hf-slug-in{font:inherit;font-size:12px;background:var(--panel);border:1px solid var(--line2);color:var(--bright);padding:2px 6px;border-radius:2px;width:28ch;max-width:100%}
.hf-slug-in:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 2px var(--accdim)}
.hf-slug-av{white-space:nowrap}
.hf-slug-av.is-ok{color:var(--acc)}
.hf-slug-av.is-taken{color:var(--warn)}
.hf-slug-av.is-taken::before{content:"!! "}
.hf-slug .lnk{font-size:inherit}
.lnk.is-mute{color:var(--mute)}

/* the location block: neighborhood, venue and street address read as one thing, because
   one visibility control at the end of the group governs the venue and the address */
.hf-loc{border-left:1px solid var(--line);padding:2px 0 2px 12px;margin:0 0 14px}
.hf-loc .hf-f{margin:0 0 12px}
.hf-loc .hf-f:last-child{margin:0}

/* segmented toggles */
.hf-seg{display:flex;gap:6px;flex-wrap:wrap}
.hf-segb{font:inherit;font-size:12px;background:transparent;color:var(--mute);border:1px solid var(--line);padding:6px 8px;cursor:pointer;border-radius:2px;text-align:left;transition:color .12s,border-color .12s,background .12s}
.hf-segb::before{content:"[ ";color:var(--dim)}
.hf-segb::after{content:" ]";color:var(--dim)}
.hf-segb:hover{color:var(--acc);border-color:var(--acc)}
.hf-segb:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.hf-segb[aria-pressed="true"]{color:#0b0d10;background:var(--acc);border-color:var(--acc);font-weight:700}
.hf-segb[aria-pressed="true"]::before,.hf-segb[aria-pressed="true"]::after{color:rgba(11,13,16,.55)}

/* checkbox rows (share .hf-ctl so tint + wash apply) */
.hf-chk{display:flex;align-items:flex-start;gap:10px;cursor:pointer;position:relative;padding:9px 32px 9px 10px;line-height:1.5;color:var(--ink)}
.hf-chk:focus-within{outline:0;border-color:var(--acc);box-shadow:0 0 0 2px var(--accdim)}
.hf-cb{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.hf-box{color:var(--mute);flex:none;white-space:pre}
.hf-box::before{content:"[ ]"}
.hf-cb:checked ~ .hf-box{color:var(--acc);font-weight:700}
.hf-cb:checked ~ .hf-box::before{content:"[x]"}
.hf-f.is-off .hf-chk{opacity:.45;cursor:not-allowed}
.hf-f.is-off .hf-chk:focus-within{border-color:var(--line2);box-shadow:none}

/* actions, footnote */
.hf-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.hf-act .btn{padding:7px 12px}
.hf-act .btn[disabled],.hf-act .btn[disabled]:hover{color:var(--dim);border-color:var(--line);background:transparent;cursor:not-allowed}
.hf-act .btn[disabled]::before,.hf-act .btn[disabled]::after,.hf-act .btn[disabled]:hover::before,.hf-act .btn[disabled]:hover::after{color:var(--dim)}
.hf-act .btn.is-mute{color:var(--mute);border-color:var(--line)}
.hf-draft{color:var(--mute);font-size:11px}
.hf-form .fn{margin-top:16px}

/* submitted panel */
.hf-done{border:1px solid var(--acc);background:var(--panel);padding:18px 20px 16px;margin-top:18px;box-shadow:0 0 0 4px rgba(11,13,16,.9),0 0 60px rgba(var(--acc-rgb),.08)}
.hf-done-h{font-size:15px;font-weight:700;color:var(--bright);margin:0 0 10px}
.hf-done-h .ps{color:var(--acc)}
.hf-done p{margin:0 0 14px;line-height:1.6;color:var(--ink)}
.hf-done b{color:var(--bright);font-weight:500;word-break:break-all}
.hf-done-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hf-done .lnk{border-bottom:0}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .hf-row3{grid-template-columns:1fr}
}
@media (max-width:480px){
  .hf-row2{grid-template-columns:1fr}
  .hf-act .btn{width:100%;text-align:center}
  .hf-slug-in{width:100%}
  .hf-sh{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .hf-f.is-wash .hf-ctl,.hf-f.is-wash .hf-check{animation:none}
  .hf-check,.hf-ctl{transition:none}
}

/* optional-field marker: everything else on the form is required, so only these are called out */
.hf-opt{color:var(--dim);font-weight:400;margin-left:6px}

/* time wheels: two selects read as one control. iOS renders a select as its own wheel picker,
   so this is the native "set an alarm" feel on a phone and a plain dropdown pair on desktop. */
/* One native time input per end. color-scheme is what makes the browser draw its own parts of
   the control dark: without it Chrome paints the segments and the dropdown on white, which on
   this page looks like a bug rather than a browser default. The picker icon is inverted to sit
   with the rest of the form, and it only appears on hover or focus so the field is quiet at rest. */
/* what the address lookup filled in, said quietly beside "always public" rather than as its own
   line, so the field does not grow a row every time a host types a street */
.hf-auto{color:var(--acc);margin-left:8px}
.hf-auto:empty{margin:0}

.hf-tinput{color-scheme:dark;min-width:0;width:100%;font-variant-numeric:tabular-nums}
.hf-tinput::-webkit-datetime-edit{padding:0}
.hf-tinput::-webkit-datetime-edit-fields-wrapper{padding:0}
.hf-tinput::-webkit-datetime-edit-hour-field:focus,
.hf-tinput::-webkit-datetime-edit-minute-field:focus,
.hf-tinput::-webkit-datetime-edit-ampm-field:focus{background:rgba(var(--acc-rgb),.22);color:var(--bright);outline:0}
.hf-tinput::-webkit-calendar-picker-indicator{
  filter:invert(1) sepia(1) saturate(3) hue-rotate(2deg);opacity:0;cursor:pointer;transition:opacity .12s}
.hf-tinput:hover::-webkit-calendar-picker-indicator,
.hf-tinput:focus::-webkit-calendar-picker-indicator{opacity:.65}
.hf-tsep{color:var(--mute)}