/* ==========================================================================
   ZELENCIO — FORM CONTROLS
   --------------------------------------------------------------------------
   Loaded on every page, because the native <select> opens the operating
   system's list dialog everywhere on the site, not only in the Launch Hub.
   Paired with assets/js/form-controls.js.
   ========================================================================== */

.zsel-native {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.zsel-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--lh-cut, 10px);
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.4 'Inter', system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
@media (max-width: 700px) { .zsel-trigger { font-size: 16px; } }

.zsel-trigger:hover { border-color: var(--ink-faint); }
.zsel-trigger:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-wash);
}
.zsel-trigger.is-empty .zsel-val { color: var(--ink-faint); }
.zsel-val   { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zsel-caret { flex: none; color: var(--ink-3); font-size: 11px; }

.zsel-backdrop {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0, 0, 0, .55);
  animation: zsel-fade .16s ease;
}

/* Phone: a bottom sheet, because the thumb is at the bottom of the screen.
   Desktop: a centred panel, because the pointer is not. */
.zsel-sheet {
  position: fixed; z-index: 9999;
  left: 0; right: 0; bottom: 0;
  max-height: 78vh;
  display: flex; flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  animation: zsel-up .2s cubic-bezier(.2, .8, .3, 1);
  overflow: hidden;
}
@media (min-width: 820px) {
  .zsel-sheet {
    left: 50%; top: 50%; right: auto; bottom: auto;
    width: min(520px, 92vw);
    max-height: 72vh;
    transform: translate(-50%, -50%);
    border: 1px solid var(--line);
    border-radius: 14px;
    animation: zsel-pop .16s ease;
  }
}

@keyframes zsel-fade { from { opacity: 0; } }
@keyframes zsel-up   { from { transform: translateY(100%); } }
@keyframes zsel-pop  { from { transform: translate(-50%, -48%); opacity: 0; } }

.zsel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.zsel-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 16px; font-weight: 700; color: var(--ink);
}
.zsel-x {
  width: 32px; height: 32px; flex: none;
  border: 0; border-radius: 8px;
  background: var(--bg-inset); color: var(--ink-3);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.zsel-x:hover { color: var(--ink); }

.zsel-search { padding: 12px 18px; border-bottom: 1px solid var(--line-soft); }
.zsel-input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.4 'Inter', system-ui, sans-serif;
}
.zsel-input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-wash);
}

.zsel-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 8px calc(14px + env(safe-area-inset-bottom));
}
.zsel-opt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 12px;
  border: 0; border-radius: 10px;
  background: none; color: var(--ink);
  font: 400 15px/1.35 'Inter', system-ui, sans-serif;
  text-align: left; cursor: pointer;
}
.zsel-opt:hover { background: var(--bg-sunk); }
.zsel-opt.is-on { background: var(--brand-wash); color: var(--brand-deep); font-weight: 600; }
.zsel-opt[disabled] { opacity: .45; cursor: not-allowed; }
.zsel-opt__t    { overflow: hidden; text-overflow: ellipsis; }
.zsel-opt__n    { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3); }
.zsel-opt.is-on .zsel-opt__n { color: var(--brand-deep); opacity: .8; }
.zsel-opt__tick { opacity: 0; font-size: 13px; }
.zsel-opt.is-on .zsel-opt__tick { opacity: 1; }
.zsel-none { padding: 28px 12px; text-align: center; color: var(--ink-3); font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .zsel-sheet, .zsel-backdrop { animation: none; }
}


/* ==========================================================================
   TAG INPUT
   --------------------------------------------------------------------------
   One box for a list of names. Type, press Enter, it becomes a chip.
   A repeated row with a remove button is too much furniture for something
   that is just a word.

   A chip can carry a date, a time or a reason underneath it when the group
   asks for those — a scheduled listing needs a date, a removed one needs a
   reason.
   ========================================================================== */

.ztags {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  padding: 10px;
}
.ztags:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }

.ztags__list { display: grid; gap: 8px; }
.ztags__list:not(:empty) { margin-bottom: 10px; }

.ztag {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-raised);
  padding: 10px 12px;
}
.ztag__top { display: flex; align-items: center; gap: 10px; }
.ztag__name {
  flex: 1; min-width: 0;
  font-weight: 600; font-size: 14px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ztag__x {
  flex: none;
  width: 26px; height: 26px;
  border: 0; border-radius: 6px;
  background: var(--bg-inset); color: var(--ink-3);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.ztag__x:hover { color: var(--down); }

.ztag__fields { display: grid; gap: 8px; margin-top: 10px; }
@media (min-width: 620px) { .ztag__fields { grid-template-columns: 1fr 1fr; } }
.ztag__f { display: grid; gap: 4px; }
.ztag__f--wide { grid-column: 1 / -1; }
.ztag__f > span { font-size: 11.5px; color: var(--ink-3); }
.ztag__f input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px 'Inter', system-ui, sans-serif;
}
@media (max-width: 700px) { .ztag__f input { font-size: 16px; } }
.ztag__f input:focus { outline: none; border-color: var(--brand); }

.ztags__input {
  width: 100%;
  padding: 10px 4px;
  border: 0;
  background: none;
  color: var(--ink);
  font: 400 15px 'Inter', system-ui, sans-serif;
}
@media (max-width: 700px) { .ztags__input { font-size: 16px; } }
.ztags__input:focus { outline: none; }
.ztags__input::placeholder { color: var(--ink-faint); }