/*
 * The rest of the kit: buttons, fields, chips, surfaces.
 *
 * Everything here is deliberately quiet. The photos are the only saturated
 * thing on the page; the interface is stationery.
 */

/* ---- Buttons ----------------------------------------------------------- *
 * The primary button is the page's stamp, and its label is always the user's
 * own verb: "Enviar fotos", "Baixar álbum" — never "Submit".                 */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    scale var(--duration-fast) var(--ease);
}

.button:active {
  scale: 0.985;
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  scale: 1;
}

.button--primary {
  background: var(--ink);
  color: var(--print);
  box-shadow: var(--shadow-control);
}

.button--primary:hover {
  background: color-mix(in srgb, var(--ink) 88%, var(--paper));
  box-shadow: var(--shadow-print);
}

.button--secondary {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.button--secondary:hover {
  background: var(--ink-wash);
}

/* The gold tertiary: a text action with a leaf of foil under it. Reserved for
   the small, warm invitations — "minhas fotos", "ver como funciona". */
.button--gold {
  padding-inline: 0;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--gold-rule);
  color: var(--gold);
}

.button--gold:hover {
  border-bottom-color: var(--gold);
}

.button--block {
  inline-size: 100%;
}

.button--lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-body-lg);
}

.button--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-label);
}

.button svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: none;
}

/* On a phone the primary action spans the column: it is the page's one job. */
@media (max-width: 30rem) {
  .button--primary.button--responsive {
    inline-size: 100%;
  }
}

/* A quiet inline link in the body voice. */
.link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  transition: text-decoration-color var(--duration) var(--ease);
}

.link:hover {
  text-decoration-color: currentcolor;
}

.link--gold {
  color: var(--gold);
  text-decoration-color: var(--gold-rule);
}

/* ---- Surfaces ---------------------------------------------------------- */

.card {
  background: var(--print);
  border: 1px solid var(--ink-edge);
  border-radius: var(--radius-print);
  box-shadow: var(--shadow-surface);
  padding: var(--space-6);
}

@media (min-width: 48rem) {
  .card {
    padding: var(--space-8);
  }
}

/* A recessed area on the page — the darker paper, used for wells and notes. */
.well {
  background: var(--paper-shade);
  border-radius: var(--radius-control);
  padding: var(--space-4);
}

/* ---- Chips and stamps -------------------------------------------------- *
 * Not app pills. Rectangular, small, the tone of a rubber stamp.             */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.25rem var(--space-2);
  background: var(--paper-shade);
  border: 1px solid var(--rule);
  border-radius: var(--radius-chip);
  font-family: var(--font-ui);
  font-size: var(--text-fine);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soft-ink);
}

.chip--gold {
  background: var(--gold-wash);
  border-color: var(--gold-rule);
  color: var(--gold);
}

.chip__dot {
  inline-size: 0.375rem;
  block-size: 0.375rem;
  border-radius: 50%;
  background: currentcolor;
}

/* ---- Fields ------------------------------------------------------------ *
 * Labels in Fraunces italic, as if written in the margin of a journal; the
 * guest's own typing in the clean sans.                                      */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-caption);
  color: var(--gold);
}

.field__input {
  inline-size: 100%;
  padding: var(--space-3) 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: var(--text-body-lg);
  color: var(--ink);
  transition: border-color var(--duration) var(--ease);
}

.field__input::placeholder {
  color: var(--soft-ink);
  opacity: 0.7;
}

.field__input:focus {
  outline: none;
  border-bottom-color: var(--gold);
}

.field__input:focus-visible {
  outline: none;
}

.field:focus-within .field__label {
  color: var(--gold);
}

/* The boxed variant, for the denser organizer forms. */
.field__input--boxed {
  padding: var(--space-3) var(--space-4);
  background: var(--print);
  border: 1px solid var(--rule);
  border-radius: var(--radius-control);
}

.field__input--boxed:focus {
  border-color: var(--gold);
}

.field__hint {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-caption);
  color: var(--soft-ink);
}

.field__error {
  font-size: var(--text-caption);
  color: var(--alert);
}

textarea.field__input {
  min-block-size: 6rem;
  resize: vertical;
}

/* ---- A choice expressed as prose --------------------------------------- *
 * The event settings ask questions, not toggles: "Os convidados veem as
 * fotos?". Each answer is a small card that explains what it means.          */

.choice {
  display: grid;
  gap: var(--gutter);
}

@media (min-width: 40rem) {
  .choice {
    grid-template-columns: repeat(2, 1fr);
  }
}

.choice__option {
  display: block;
  padding: var(--space-5);
  background: var(--print);
  border: 1px solid var(--rule);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition:
    border-color var(--duration) var(--ease),
    background-color var(--duration) var(--ease);
}

.choice__option:hover {
  border-color: var(--soft-ink);
}

.choice__option:has(input:checked) {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold-wash) 60%, var(--print));
}

.choice__option:has(input:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.choice__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* The answer reads as a small paragraph: an eyebrow, a plain-language title,
   and a line explaining what it actually means for the guests. */
.choice__option > * {
  display: block;
}

.choice__title {
  font-family: var(--font-display);
  font-size: var(--text-headline);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  margin-block: var(--space-1) var(--space-2);
}

.choice__note {
  font-size: var(--text-body);
  color: var(--soft-ink);
}

/* When the feed is private, moderation means nothing — the whole question is
   put away rather than left on the page looking clickable. */
.choice--inert {
  opacity: 0.45;
  pointer-events: none;
}

/* ---- A message in the brand's voice ------------------------------------ *
 * Empty states, confirmations, the closed album. Never error styling.        */

.notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding-block: var(--space-8);
}

.notice__mark {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: 50%;
  border: 1px solid var(--gold-rule);
  color: var(--gold);
}

.notice__mark svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

/* ---- Flash messages ---------------------------------------------------- *
 * The header is sticky, so the first message needs room to clear it rather
 * than arriving pressed against the rule underneath it.                      */

.flashes {
  padding-block-start: var(--space-6);
}

.flash {
  padding: var(--space-3) var(--space-4);
  margin-block-end: var(--space-4);
  background: var(--print);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-control);
  font-size: var(--text-body);
}

.flash--alert {
  border-left-color: var(--alert);
}

/* ---- Inline icons ------------------------------------------------------ */

.icon {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
}

/* ---- The wordmark as a link -------------------------------------------- */

.wordmark-link {
  display: inline-flex;
  text-decoration: none;
}

/* ---- Skip link --------------------------------------------------------- *
 * First in the tab order, invisible until focused.                          */

.skip-link {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: var(--z-overlay);
  padding: var(--space-2) var(--space-4);
  background: var(--print);
  border: 1px solid var(--rule);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-print);
  text-decoration: none;
  translate: 0 -300%;
}

.skip-link:focus {
  translate: 0 0;
}