/* "Email me my palette" (REVEAL_ARTIFACT_SPEC.md G3.4.1). One stylesheet for
   the one form, linked by both hosts for the same reason the markup lives in
   one file: the reveal and the permalink must not drift into two different
   consent forms.

   Tokens only, no literal colours: /static/tokens.css is linked by every
   public surface, so this inherits the same ink, rule and accent the page
   around it uses on either host. */
.palette-email {
  margin: 2rem auto 0;
  max-width: 32rem;
  padding: 1.25rem;
  border: 1px solid var(--color-rule-soft, #efe4e3);
  border-radius: 16px;
  background: var(--color-paper-2, #fffbfa);
  text-align: left;
}
.palette-email__title {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  font-weight: 600;
}
.palette-email__label {
  display: block;
  margin: 0 0 .5rem;
  font-size: .95rem;
  color: var(--color-muted, #4f4141);
}
.palette-email__row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.palette-email__input {
  flex: 1 1 14rem;
  min-height: 48px;
  padding: .6rem .8rem;
  border: 1px solid var(--color-rule, #d9c9c8);
  border-radius: 10px;
  font: inherit;
  color: inherit;
  background: var(--color-paper, #fff);
}
/* TWO CLASSES DEEP ON PURPOSE. Both hosts define `.btn` and only one of them
   defines `.btn--ghost` (it lives in /color-analysis's own inline style, not in
   blog.css), so the form asks for `.btn` and paints its own secondary
   treatment here rather than naming a class one host would ignore. The extra
   class beats `.btn` in the cascade whichever order the stylesheets load in,
   which a single-class rule would not on the page whose `.btn` is declared
   later. */
.palette-email .palette-email__send {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 1.25rem;
  background: transparent;
  color: var(--color-ink, #281b1c);
  border: 1px solid var(--color-rule, #d9c9c8);
}
.palette-email .palette-email__send:hover {
  border-color: var(--color-accent, #972942);
  color: var(--color-accent, #972942);
  background: transparent;
}
.palette-email .palette-email__send[disabled] {
  opacity: .6;
  cursor: default;
}
.palette-email__note {
  margin: .6rem 0 .35rem;
  font-size: .85rem;
  color: var(--color-muted, #4f4141);
}
.palette-email__consent {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  font-size: .85rem;
  color: var(--color-muted, #4f4141);
  line-height: 1.4;
}
.palette-email__consent input {
  margin-top: .2rem;
  min-width: 18px;
  min-height: 18px;
}
.palette-email__status {
  margin: .75rem 0 0;
  font-size: .9rem;
  color: var(--color-ink, #281b1c);
}