/* =====================================================================
   INSPIRER OF THE YEAR, the nomination form.
   Loaded after ioty.css on /high-up/inspirer-of-the-year/nominate/ only
   (body.page-highup.page-ioty, so the award page's tokens, Newsreader
   and the ink buttons all apply). One narrow column on black, the
   questions set in the serif like the letter they ask for, the labels
   in Plex Mono. No rules or dividers: fields are quiet slabs of lighter
   black, focus is a white ring, an error a soft red one.
   ===================================================================== */

.ioty-nom {
  --nom-field: #101010;
  --nom-field-hi: #171717;
  --nom-edge: rgba(255, 255, 255, 0.14);
  --nom-bad: #f0857b;
  min-height: calc(var(--svh, 1vh) * 100);
  padding: clamp(104px, 16vh, 150px) 0 clamp(72px, 12vh, 120px);
  background: #000;
  color: var(--ioty-white);
  /* native bits (the datalist arrow, the resize grip, autofill) drawn for black */
  color-scheme: dark;
}
.ioty-nom [hidden] {
  display: none !important;
}
.ioty-nom-wrap {
  width: min(40rem, calc(100% - 32px));
  margin-inline: auto;
}

/* ------------------------------------------------ the head */
.ioty-nom-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--txt-soft);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.ioty-nom-back:hover {
  color: var(--ioty-white);
}
.ioty-nom-back:focus-visible {
  outline: 2px solid var(--ioty-white);
  outline-offset: 4px;
}
.ioty-nom-title {
  margin: 14px 0 clamp(36px, 6vh, 56px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 7vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ioty-white);
  text-wrap: balance;
}
.ioty-nom-title .ioty-irid-always {
  /* the gradient paints the box: pad past the italic, take it back */
  padding: 0.06em 0.1em 0.1em;
  margin: -0.06em -0.1em -0.1em;
  font-style: italic;
  font-weight: 350;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ------------------------------------------------ panels */
.ioty-nom-panel {
  display: grid;
  gap: 18px;
  justify-items: start;
}
@media (prefers-reduced-motion: no-preference) {
  .ioty-nom-panel.is-in {
    animation: ioty-nom-in 0.5s var(--ease) both;
  }
}
@keyframes ioty-nom-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.ioty-nom-h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 4.4vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ioty-white);
  text-wrap: balance;
}
.ioty-nom-h2:focus,
.ioty-nom-q:focus,
.ioty-nom-confirm-q:focus {
  outline: none;
}
.ioty-nom-text,
.ioty-nom-lede {
  margin: 0;
  max-width: 36em;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.4vw, 1.22rem);
  line-height: 1.6;
  color: #d6d6d1;
  text-wrap: pretty;
}
.ioty-nom-lede {
  margin-bottom: 6px;
  font-size: clamp(1.18rem, 2.8vw, 1.36rem);
  color: var(--ioty-white);
}
.ioty-nom-text a,
.ioty-nom-link {
  color: var(--ioty-white);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.ioty-nom-text a:hover,
.ioty-nom-link:hover {
  text-decoration-thickness: 2px;
}
.ioty-nom-dim {
  color: var(--txt-dim);
}
.ioty-nom-small {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
}
.ioty-nom-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

/* the loading line: one soft iridescent dot breathing beside it */
.ioty-nom-loading {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ioty-nom-pulse {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ioty-irid);
  background-size: 300% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .ioty-nom-pulse {
    animation: ioty-nom-breathe 1.4s ease-in-out infinite alternate;
  }
}
@keyframes ioty-nom-breathe {
  from {
    opacity: 0.35;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* ------------------------------------------------ signed out: the two ways in */
.ioty-nom-choices {
  display: grid;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}
.ioty-nom-choice {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 96px;
  align-content: center;
  padding: 22px 64px 22px 24px;
  background: var(--nom-field);
  border: 1px solid var(--nom-edge);
  color: var(--ioty-white);
  text-decoration: none;
  transition:
    border-color 0.25s var(--ease),
    background 0.25s var(--ease);
}
.ioty-nom-choice:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: var(--nom-field-hi);
}
.ioty-nom-choice:focus-visible {
  outline: 2px solid var(--ioty-white);
  outline-offset: 3px;
}
.ioty-nom-choice-title {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3.4vw, 1.55rem);
  line-height: 1.2;
}
.ioty-nom-choice-sub {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--txt-soft);
}
.ioty-nom-choice-arrow {
  position: absolute;
  right: 24px;
  top: 50%;
  margin-top: -0.6em;
  font-size: 1.3rem;
  line-height: 1.2;
  transition: transform 0.25s var(--ease);
}
.ioty-nom-choice:hover .ioty-nom-choice-arrow {
  transform: translateX(4px);
}
@media (min-width: 640px) {
  .ioty-nom-choices {
    grid-template-columns: 1fr 1fr;
  }
}

/* ------------------------------------------------ done and closed */
.ioty-nom-check {
  width: 64px;
  height: 64px;
  color: #8ff5c9;
}
@media (prefers-reduced-motion: no-preference) {
  .ioty-nom-done.is-in .ioty-nom-check path {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: ioty-nom-tick 0.6s 0.25s cubic-bezier(0.45, 0.05, 0.55, 1) forwards;
  }
}
@keyframes ioty-nom-tick {
  to {
    stroke-dashoffset: 0;
  }
}
.ioty-nom-nominee {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 22px 24px;
  background: var(--nom-field);
}
.ioty-nom-nominee p {
  margin: 0;
}
.ioty-nom-nominee-label,
.ioty-nom-nominee-role {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-soft);
}
.ioty-nom-nominee-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 4.6vw, 2.1rem);
  line-height: 1.15;
  color: var(--ioty-white);
  overflow-wrap: anywhere;
}
.ioty-nom-nominee-role {
  overflow-wrap: anywhere;
}

/* ------------------------------------------------ the form */
.ioty-nom-draftnote {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8ff5c9;
}
.ioty-nom-form {
  display: grid;
  gap: clamp(36px, 6vh, 52px);
  width: 100%;
  margin-top: clamp(18px, 3vh, 28px);
}
.ioty-nom-block {
  display: grid;
  gap: 10px;
}
.ioty-nom-q {
  display: block;
  margin: 0 0 4px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.45rem, 3.8vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ioty-white);
}
.ioty-nom-hint {
  margin: 0 0 4px;
  max-width: 38em;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--txt-soft);
}
.ioty-nom-cols {
  display: grid;
  gap: 16px;
}
@media (min-width: 560px) {
  .ioty-nom-cols {
    grid-template-columns: 1fr 1fr;
  }
}
.ioty-nom-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.ioty-nom-label {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-soft);
}
/* 16px and up, or iOS zooms the page on focus */
.ioty-nom-field input,
.ioty-nom-field textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 13px 16px;
  border: 1px solid var(--nom-edge);
  border-radius: 0;
  background: var(--nom-field);
  color: var(--ioty-white);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color 0.2s var(--ease),
    background 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.ioty-nom-field textarea {
  min-height: 15rem;
  resize: vertical;
  padding: 16px 18px;
  font-family: var(--serif);
  font-size: 1.14rem;
  line-height: 1.6;
}
/* without JS the datalist's own arrow stays (it is the hint that a
   list exists); color-scheme above draws it light, this only quiets
   it. With JS the input loses its list, and the arrow with it */
.ioty-nom-field input::-webkit-calendar-picker-indicator {
  opacity: 0.7;
  cursor: pointer;
}
.ioty-nom-field input:hover,
.ioty-nom-field textarea:hover {
  border-color: rgba(255, 255, 255, 0.28);
}
.ioty-nom-field input:focus-visible,
.ioty-nom-field textarea:focus-visible {
  outline: none;
  border-color: var(--ioty-white);
  background: var(--nom-field-hi);
  box-shadow: 0 0 0 1px var(--ioty-white);
}
.ioty-nom-field input.is-bad,
.ioty-nom-field textarea.is-bad {
  border-color: var(--nom-bad);
  box-shadow: 0 0 0 1px var(--nom-bad);
}
/* ------------------------------------------------ the role picker */
/* ioty-nominate.js turns the role field into a combobox: a chevron at
   the input's end and a black panel of suggestions under it, set in
   the serif like the questions, the active row lit by a faint wash
   of the iridescent band. The panel only suggests, so a role typed
   in the member's own words is kept as it is */
.ioty-nom-combo {
  position: relative;
  min-width: 0;
}
.ioty-nom-combo.is-enhanced input {
  padding-right: 52px;
}
.ioty-nom-combo-btn {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--txt-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* the chevron is two borders of a small square, turned */
.ioty-nom-combo-btn::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: -5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition:
    transform 0.25s var(--ease),
    margin 0.25s var(--ease);
}
.ioty-nom-combo-btn:hover,
.ioty-nom-combo.is-open .ioty-nom-combo-btn {
  color: var(--ioty-white);
}
.ioty-nom-combo.is-open .ioty-nom-combo-btn::before {
  margin-top: 5px;
  transform: rotate(225deg);
}
.ioty-nom-combo-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 40;
  background: #070707;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.85),
    0 0 40px rgba(185, 164, 255, 0.07);
}
@media (prefers-reduced-motion: no-preference) {
  .ioty-nom-combo-pop {
    animation: ioty-nom-drop 0.18s var(--ease) both;
  }
}
@keyframes ioty-nom-drop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.ioty-nom-combo-list {
  margin: 0;
  padding: 6px 0;
  list-style: none;
  /* five and a half rows, so the half row says there is more; the
     script shortens it to the room above the on-screen keyboard */
  max-height: 254px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.ioty-nom-combo-opt {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.3;
  color: #d6d6d1;
  cursor: pointer;
  overflow-wrap: anywhere;
  transition: color 0.15s var(--ease);
}
/* the active row: the band, faint, behind the words, and a thin
   stroke of it at the row's start */
.ioty-nom-combo-opt::before,
.ioty-nom-combo-opt::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: var(--ioty-irid);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s var(--ease);
}
.ioty-nom-combo-opt::before {
  right: 0;
  background-size: 200% 100%;
}
.ioty-nom-combo-opt::after {
  width: 2px;
}
.ioty-nom-combo-opt.is-active,
.ioty-nom-combo-opt.is-current {
  color: #fff;
}
.ioty-nom-combo-opt.is-active::before {
  opacity: 0.13;
}
/* the stroke also marks the role already in the field */
.ioty-nom-combo-opt.is-active::after,
.ioty-nom-combo-opt.is-current::after {
  opacity: 1;
}
.ioty-nom-combo-opt mark {
  background: none;
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.ioty-nom-combo-opt.is-current mark {
  text-decoration: none;
}
.ioty-nom-combo-none {
  margin: 0;
  padding: 14px 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--txt-soft);
}
@media (prefers-reduced-motion: reduce) {
  .ioty-nom-combo-btn::before,
  .ioty-nom-combo-opt,
  .ioty-nom-combo-opt::before,
  .ioty-nom-combo-opt::after {
    transition: none;
  }
}

.ioty-nom-err,
.ioty-nom-formerr {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--nom-bad);
}
.ioty-nom-err:empty,
.ioty-nom-formerr:empty {
  display: none;
}
.ioty-nom-count {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--txt-dim);
  font-variant-numeric: tabular-nums;
}
.ioty-nom-count.is-over {
  color: var(--nom-bad);
}
.ioty-nom-foot {
  display: grid;
  gap: 14px;
  justify-items: start;
}
.ioty-nom-foot .ioty-nom-actions {
  margin-top: 0;
}
.ioty-nom-confirm {
  display: grid;
  gap: 14px;
  width: 100%;
  padding: 22px 24px;
  background: var(--nom-field-hi);
}
@media (prefers-reduced-motion: no-preference) {
  .ioty-nom-confirm {
    animation: ioty-nom-in 0.35s var(--ease) both;
  }
}
.ioty-nom-confirm-q {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 3.4vw, 1.5rem);
  line-height: 1.3;
  color: var(--ioty-white);
}
.ioty-nom-confirm .ioty-nom-actions {
  margin-top: 0;
}

/* the second button: an outline that takes the same ink on hover */
.ioty-btn-ghost {
  background: transparent;
  color: var(--ioty-white);
}
.ioty-btn-ghost:hover,
.ioty-btn-ghost:focus-visible {
  color: #000;
}
.ioty-btn:disabled {
  cursor: default;
  opacity: 0.6;
}
button.ioty-btn {
  cursor: pointer;
}
/* sending: the label steps aside for a small spinner */
.ioty-btn.is-busy {
  color: transparent;
}
.ioty-btn.is-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top-color: #000;
  animation: ioty-nom-spin 0.7s linear infinite;
}
@keyframes ioty-nom-spin {
  to {
    transform: rotate(360deg);
  }
}

/* who is signed in, and the way out, at the foot of every signed-in panel */
.ioty-nom-who {
  text-transform: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: clamp(48px, 8vh, 72px) 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--txt-dim);
  overflow-wrap: anywhere;
}
.ioty-nom-link {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: var(--txt-soft);
  cursor: pointer;
}
.ioty-nom-link:focus-visible {
  outline: 2px solid var(--ioty-white);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .ioty-nom-choice {
    padding: 20px 56px 20px 20px;
  }
  .ioty-nom-choice-arrow {
    right: 20px;
  }
  .ioty-nom-actions .ioty-btn {
    flex: 1 1 100%;
  }
  .ioty-nom-nominee,
  .ioty-nom-confirm {
    padding: 20px;
  }
}