/* MineChef — email capture: the .notify form and its states. Owned by the "form" piece.
   Colours come from tokens.css (--cta-*): the button is the same amber as the lanterns. */

.notify {
  margin-top: clamp(20px, 3.4vh, 34px);
  width: min(100%, 460px);
}

/* On 2K/4K/ultrawide the capsule would otherwise stay a 460px pill in the middle of a 3840px picture:
   let it grow with the rest of the lockup (type.css scales the words above the same breakpoint). */
@media (min-width: 2000px) {
  .notify { width: min(100%, 600px); }
  .notify__row { padding: 8px; }
  .notify__input { padding: 16px 20px; font-size: 1.25rem; }
  .notify__button { padding: 16px 26px; font-size: 1.3rem; }
  .notify__hint { font-size: 1rem; }
}
.notify__row {
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 249, 238, 0.92);
  box-shadow: 0 10px 30px rgba(58, 34, 56, 0.28), inset 0 0 0 1px rgba(58, 34, 56, 0.08);
}
.notify__input {
  flex: 1 1 auto;
  width: 0;      /* an <input> keeps an intrinsic ~180px min-content otherwise: the row must be able to collapse */
  min-width: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--cta-ink);
  font-weight: 600;
}
.notify__input::placeholder { color: rgba(58, 34, 56, 0.5); }
.notify__button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--cta-top), var(--cta-bottom));
  color: var(--cta-ink);
  font-family: var(--font-ui, "Fredoka", system-ui, sans-serif);
  font-weight: 600;
  font-size: 1.05rem;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--cta-shadow), 0 8px 18px rgba(201, 122, 24, 0.35);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.notify__button:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--cta-shadow), 0 12px 22px rgba(201, 122, 24, 0.4); }
.notify__button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cta-shadow), 0 4px 10px rgba(201, 122, 24, 0.3); }
.notify__hint {
  margin-top: 10px;
  font-size: var(--step--1);
  font-weight: 600;
  opacity: 0.85;
  text-shadow: 0 1px 2px var(--ink-hero-shadow);
}
/* Specificity matters here: `.bedrock p` (0,1,1) sets cream copy on the dark plate, and it used to beat a
   bare `.notify__success` (0,1,0) — cream text on the near-white confirmation, i.e. invisible. Scoping the
   rule to `.notify .notify__success` (0,2,0) keeps the dark ink wherever the form is used. */
.notify .notify__success {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  background: rgba(255, 249, 238, 0.96);
  color: var(--cta-ink);
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(58, 34, 56, 0.28), inset 0 0 0 1px rgba(58, 34, 56, 0.08);
}
/* a lantern-amber disc with a tick, inline so it costs no request */
.notify .notify__success::before {
  content: "";
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A2238' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5 10.2 16.5 18 8'/%3E%3C/svg%3E") center / 16px 16px no-repeat,
    linear-gradient(180deg, var(--cta-top, #FFC857), var(--cta-bottom, #F2A93B));
  box-shadow: inset 0 0 0 2px rgba(58, 34, 56, 0.18);
}
.notify.is-done .notify__row,
.notify.is-done .notify__hint { display: none; }
.notify.is-done .notify__success { display: flex; }

/* bedrock variant */
.bedrock .notify { margin-top: 4px; }
.bedrock .notify__hint { color: var(--ink-soft); text-shadow: none; }

/* phones: one compact row (input + short "Notify me"), one-line hint, so the fold keeps the mine in view */
@media (max-width: 640px) {
  .notify { margin-top: clamp(16px, 2.6vh, 26px); }
  .notify__row { padding: 5px; gap: 6px; }
  .notify__input { padding: 12px 14px; }
  .notify__button { padding: 12px 16px; font-size: 1rem; }
  .notify__button-tail { display: none; }
  .notify__hint { margin-top: 8px; font-size: 0.8rem; line-height: 1.3; }
}