/* The sign-up block and the sound control. Link this after tokens.css.

   [data-signup]         A paper card, sitting on its ledge. The field and button work on any
                         colour field because they keep their own paper behind them.
   [data-signup="bare"]  No card, for a block that already sits on one. Set --su-on and
                         --su-on-muted if the surface underneath isn't paper. */

[data-signup] {
  --su-ledge: 7px;
  --su-height: clamp(64px, 5.8vw, 84px);
  --su-type: clamp(20px, 1.8vw, 26px);
  --su-on: var(--ink);
  --su-on-muted: var(--ink-muted);
  --su-problem: var(--berry);

  position: relative;
  z-index: 4;
  box-sizing: border-box;
  --su-pad: clamp(18px, 2.4vw, 30px);
  /* The bottom is shorter because the empty status line stands in for the rest of it. */
  padding: var(--su-pad) var(--su-pad) max(10px, calc(var(--su-pad) - 14px));
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: 0 var(--su-ledge) 0 var(--edge);
  color: var(--su-on);
  font-family: var(--font-sans);
}

[data-signup="bare"] {
  padding: 0;
  background: none;
  box-shadow: none;
}

[data-signup] form { margin: 0; }

[data-signup] .su-label {
  display: block;
  margin: 0 0 var(--space-2);
  color: var(--su-on);
  font-size: 15px;
  font-weight: 800;
}

[data-signup] .su-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
}

/* ---- The field: a strip of warm paper, oversized, on its ledge ---- */

[data-signup] .su-field {
  position: relative;
  display: block;
  flex: 999 1 300px;
  min-width: 0;
  margin-bottom: var(--su-ledge);
}

[data-signup] input[type="email"] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: var(--su-height);
  margin: 0;
  padding: 0 44px 0 clamp(18px, 2vw, 26px);
  border: 2px solid var(--edge);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 var(--su-ledge) 0 var(--edge);
  color: var(--ink);
  caret-color: var(--leaf);
  font: 700 var(--su-type) / 1.2 var(--font-sans);
  letter-spacing: -0.005em;
  appearance: none;
  outline: none;
}

[data-signup] input[type="email"]::placeholder {
  color: var(--ink-muted);
  font-weight: 600;
  opacity: 1;
}

[data-signup] input[type="email"]:focus-visible {
  outline: 3px solid var(--leaf);
  outline-offset: -2px;
}

[data-signup] input[aria-invalid="true"] { border-color: var(--su-problem); }
[data-signup] input[aria-invalid="true"]:focus-visible { outline-color: var(--su-problem); }

/* ---- The button: big, leaf, and it physically goes down. ----
   The button's own box never moves, so its hit area stays still under the pointer. The face
   drops onto the ledge, which is why this is transform only, 80ms down and 120ms back. */

[data-signup] button[type="submit"] {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex: 1 1 auto;
  height: calc(var(--su-height) + var(--su-ledge));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--on-leaf);
  font: 800 var(--su-type) / 1 var(--font-sans);
  letter-spacing: -0.01em;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  appearance: none;
  outline: none;
}

[data-signup] button[type="submit"]::before {
  content: "";
  position: absolute;
  inset: var(--su-ledge) 0 0;
  border-radius: inherit;
  background: var(--leaf-deep);
}

[data-signup] .su-face {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--su-height);
  padding: 0 clamp(28px, 3.2vw, 46px);
  border-radius: inherit;
  background: var(--leaf);
  transition: transform 120ms var(--ease-out);
}

[data-signup] button[type="submit"]:active .su-face,
[data-signup][data-signup-state="sending"] .su-face {
  transform: translateY(var(--su-ledge));
  transition-duration: 80ms;
}

[data-signup] button[type="submit"]:focus-visible {
  outline: 3px solid var(--leaf);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  [data-signup] button[type="submit"]:hover .su-face { background: var(--leaf-hover); }
}

/* ---- What the block says ---- */

[data-signup] .su-status {
  min-height: 1.4em;
  margin: var(--space-1) 0 0;
  color: var(--su-on-muted);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  outline: none;
}
/* Until there's something to say, the line says who it's for and what the email is for. */
[data-signup] .su-status:empty[data-hint]::before {
  content: attr(data-hint);
  font-size: 13px;
  font-weight: 600;
}
[data-signup][data-signup-state="error"] .su-status { color: var(--su-problem); }
[data-signup][data-signup-state="note"] .su-status { color: var(--su-on); }

/* ---- Saved. Every block ends up here ---- */

/* The moment before: the field and button step aside, under the tag. */
[data-signup][data-signup-state="lifting"] .su-row,
[data-signup][data-signup-state="lifting"] .su-label {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms var(--ease-out);
}
[data-signup][data-signup-state="lifting"] .su-status {
  position: absolute;
  opacity: 0;
}

[data-signup][data-signup-state="done"] .su-row,
[data-signup][data-signup-state="done"] .su-label { display: none; }

[data-signup][data-signup-state="done"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: var(--su-pad);
}

[data-signup][data-signup-state="done"] .su-status {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  color: var(--su-on-muted);
  font-size: var(--su-type);
  font-weight: 600;
  animation: su-saved 220ms var(--ease-out) backwards;
}

[data-signup] .su-saved-title {
  color: var(--su-on);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
[data-signup] .su-saved-line { overflow-wrap: anywhere; }
[data-signup] .su-saved-line b { color: var(--su-on); font-weight: 800; }
[data-signup] .su-saved-preview {
  align-self: flex-start;
  margin-top: var(--space-1);
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--leaf-tint);
  color: var(--leaf-ink);
  font-size: 14px;
  font-weight: 800;
}

[data-signup].sheet--finale[data-signup-state="done"] .su-status { font-size: clamp(18px, 1.6vw, 26px); }
[data-signup].sheet--finale .su-saved-title { font-size: clamp(30px, 3vw, 54px); }

@keyframes su-saved {
  from { opacity: 0; transform: translateY(6px); }
}

/* ---- Out of sight, for bots only ---- */

[data-signup] .su-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- The paper tag your email becomes ---- */

.su-tag {
  position: fixed;
  z-index: 41;
  top: 0;
  left: 0;
  pointer-events: none;
}

.su-tag-inner {
  position: relative;
  display: flex;
  align-items: center;
  max-width: min(460px, calc(100vw - 32px));
  height: 56px;
  padding: 0 22px 0 46px;
  transition: transform 240ms var(--ease-settle);
}
.su-tag-inner.is-tilted { transform: rotate(-3deg); }

/* Stays light in both themes, like a sticky. */
.su-tag-paper {
  position: absolute;
  inset: 0;
  border-radius: 28px 12px 12px 28px;
  background: linear-gradient(170deg, var(--art-paper-hi), var(--art-paper-mid) 70%, var(--art-paper-low));
  box-shadow: 0 4px 0 var(--art-paper-edge-hi);
}

.su-tag-eyelet {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--paper-deep);
  box-shadow: inset 0 0 0 3px var(--art-butter-mid), inset 0 0 0 4px var(--art-butter-edge-hi);
}

.su-tag-text {
  position: relative;
  overflow: hidden;
  color: var(--sticky-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- The way back to the form ---- */

[data-signup] .su-share {
  display: block;
  margin-top: 10px;
  color: var(--su-on-muted);
  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 700;
}
[data-signup] .su-share-copy {
  appearance: none;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--leaf-ink);
  font: inherit;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.su-pill {
  --pill-ledge: 5px;
  position: fixed;
  z-index: 38;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-start;
  height: calc(50px + var(--pill-ledge));
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--on-leaf);
  font: 900 17px / 1 var(--font-sans);
  letter-spacing: -0.01em;
  white-space: nowrap;
  appearance: none;
  touch-action: manipulation;
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out), visibility 0s 120ms;
}
.su-pill.is-on {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s;
}
.su-pill::before {
  content: "";
  position: absolute;
  inset: var(--pill-ledge) 0 0;
  border-radius: inherit;
  background: var(--leaf-deep);
}
.su-pill-face {
  position: relative;
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 24px;
  border-radius: inherit;
  background: var(--leaf);
  transition: transform 120ms var(--ease-out);
}
.su-pill:active .su-pill-face { transform: translateY(var(--pill-ledge)); transition-duration: 80ms; }
.su-pill:focus-visible { outline: 3px solid var(--magpie); outline-offset: 3px; }
.su-pill--right { left: auto; right: max(20px, env(safe-area-inset-right)); }
/* Out of the way while something is in your hand. */
.is-grabbing .su-pill { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .su-pill:hover .su-pill-face { background: var(--leaf-hover); }
}
@media (max-width: 640px) {
  .su-pill { left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); }
  .su-pill--right { left: auto; right: max(12px, env(safe-area-inset-right)); }
}

/* ---- The sound control ---- */

.snd {
  --snd-ledge: 4px;
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  height: calc(44px + var(--snd-ledge));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--ink);
  font: 800 15px / 1 var(--font-sans);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  appearance: none;
  outline: none;
}

/* With no [data-sound] slot in the page, it keeps to the corner, under the bird and clear of the notch. */
.snd--floating {
  position: fixed;
  z-index: 30;
  top: max(var(--space-4), env(safe-area-inset-top));
  right: max(var(--space-4), env(safe-area-inset-right));
}

.snd::before {
  content: "";
  position: absolute;
  inset: var(--snd-ledge) 0 0;
  border-radius: inherit;
  background: var(--edge);
}

.snd-face {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  box-sizing: border-box;
  height: 44px;
  padding: 0 var(--space-4) 0 var(--space-3);
  border: 2px solid var(--edge);
  border-radius: inherit;
  background: var(--card);
  transition: transform 120ms var(--ease-out);
}

.snd:active .snd-face {
  transform: translateY(var(--snd-ledge));
  transition-duration: 80ms;
}

.snd svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.snd[data-on="true"] { color: var(--leaf-ink); }
.snd[data-on="true"] .snd-face { background: var(--leaf-tint); }

.snd:focus-visible {
  outline: 3px solid var(--leaf);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .snd:hover .snd-face { background: var(--hover); }
  .snd[data-on="true"]:hover .snd-face { background: var(--leaf-tint); }
}

@media (prefers-reduced-motion: reduce) {
  [data-signup] .su-face,
  .snd-face { transition: none; }
  [data-signup][data-signup-state="done"] .su-status { animation: su-saved-still 160ms ease-out backwards; }
  .su-tag-inner { transition: none; }
}

@keyframes su-saved-still {
  from { opacity: 0; }
}

/* On a phone the sound control is just its note, so the headline has the top of the screen. The
   words stay for screen readers, and the tint says whether it's on. */
@media (max-width: 639px) {
  .snd-face { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .snd-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}