/* Nominate: featured navy card with the disabled call to action and the notify-me form. */
.nominate { z-index: 6; background: var(--paper); color: var(--ink); }
.nominate__card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 2.5rem clamp(2rem, 5vw, 5rem); align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(1.75rem, 5vw, 4.5rem); border-radius: var(--radius-xl);
  background: var(--navy); color: var(--white);
  box-shadow: var(--shadow-card);
}
.nominate__card::before {
  content: ""; position: absolute; z-index: -1; left: -10rem; bottom: -14rem; width: 34rem; aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(closest-side, rgb(74 74 191 / .55), transparent);
}
.nominate__deco {
  position: absolute; z-index: -1; right: -.1em; top: -.12em;
  font-size: clamp(11rem, 30vw, 22rem); line-height: 1; color: rgb(255 255 255 / .06); transform: rotate(8deg);
}
.nominate__title { font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4rem); margin-bottom: 1.25rem; max-width: 12ch; }
.nominate__copy .lede { color: var(--on-dark-soft); max-width: 32rem; }
/* Controls: one column, both rows the same width, height, radius and 2px border (grid rows are
   equal-height, so a wrapped label would grow both). Max width keeps it from stretching. */
.nominate__side {
  display: grid; grid-auto-rows: 1fr; gap: .75rem;
  width: 100%; max-width: 30rem; align-content: center;
}

/* Not yet available: looks inert (dashed, no fill, lock), takes no pointer or keyboard action */
.btn-off {
  width: 100%; min-height: 3.5rem; padding: .5rem 1.25rem; justify-content: center; text-align: center;
  cursor: not-allowed;
  background: rgb(255 255 255 / .04); color: rgb(255 255 255 / .78);
  border: 2px dashed rgb(255 255 255 / .38);
}
.btn-off i { flex: none; }
/* Narrow: the label cannot fit on one line, so the date takes its own, smaller line instead of
   breaking wherever the width runs out. */
@media (max-width: 559px) {
  .btn-off__when { display: block; font-size: .875rem; font-weight: 600; }
}
/* Smallest phones (320): tighter padding and type so "Nominate a Student" stays on one line and
   the email field keeps a usable width beside Notify Me. */
@media (max-width: 379px) {
  .btn-off { gap: .45rem; padding-inline: .75rem; font-size: .9375rem; }
  .btn-off__when { font-size: .8125rem; }
  .notify .btn { padding-inline: 1rem; font-size: .9375rem; }
  .notify input { padding-inline: 2.6rem 1rem; }
  .notify__field i { left: .9rem; }
}

/* Email field and Notify Me as one compound control: the button is a flex child of the bordered
   row, not an overlay, so a password manager's icon (injected at the right edge of the input)
   sits in the padding reserved for it and never touches the text or the button. */
.notify { min-width: 0; }
.notify__row {
  display: flex; align-items: stretch; height: 100%; min-height: 3.5rem; padding: 4px;
  border: 2px solid rgb(255 255 255 / .38); border-radius: 999px; background: rgb(255 255 255 / .08);
  transition: border-color .2s ease, background-color .2s ease;
}
.notify__row:has(input:focus-visible) {
  border-color: var(--lime); background: rgb(255 255 255 / .14); outline: 3px solid var(--lime); outline-offset: 3px;
}
.notify__field { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.notify__field i {
  position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
  font-size: 1.25rem; color: var(--on-dark-soft); pointer-events: none;
}
.notify input {
  width: 100%; min-width: 0; padding: 0 3rem 0 3rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--white); font: inherit;
}
.notify input:focus, .notify input:focus-visible { outline: none; }
.notify input:-webkit-autofill { -webkit-text-fill-color: var(--white); transition: background-color 99999s; }
.notify .btn { flex: none; min-height: 0; padding-block: 0; padding-inline: 1.5rem; cursor: pointer; }

@media (min-width: 960px) {
  .nominate__card { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .nominate__side { justify-self: start; }
}