/* <grapes-waitlist> base look. Every value comes from a custom property, so a
   variant restyles by setting these on the element or any ancestor:
     --gw-bg         field background
     --gw-fg         field text
     --gw-border     field border
     --gw-accent     button background, focus ring
     --gw-on-accent  button text
     --gw-radius     corner radius of field and button
     --gw-font       font family
   Two more than the brief listed, because the copy around the field sits on
   the page ground, not on the field:
     --gw-text       hint, consent, success and error text
     --gw-error      error text colour (red fails on burgundy, so voice uses cream)
     --gw-ok         the check mark
   Presets: tone="shelf" (on cream) and tone="voice" (on burgundy). */

grapes-waitlist {
  --gw-bg: var(--color-surface-card, #fff);
  --gw-fg: var(--color-ink, #1d1316);
  --gw-border: var(--color-border, #e3ddd6);
  --gw-accent: var(--grapes-brand, #82182e);
  --gw-on-accent: #fff;
  --gw-radius: var(--radius-control, 12px);
  --gw-font: var(--font-sans, "Inter Variable", system-ui, sans-serif);
  --gw-text: var(--color-ink, #1d1316);
  --gw-error: var(--color-state-error, #8a1f2b);
  --gw-ok: var(--color-state-ok, #2f6b45);
  display: block;
  font-family: var(--gw-font);
  color: var(--gw-text);
  max-width: 34rem;
}

/* On burgundy: cream field and cream button with burgundy text (8.43:1 both
   ways); copy in white (9.91:1); errors in cream with a rule, never red. */
grapes-waitlist[tone="voice"] {
  --gw-bg: #fff;
  --gw-fg: #1d1316; /* literal, like every voice value: the white field stays white in dark */
  --gw-border: transparent;
  --gw-accent: #f0ece7; /* literal: the voice ground keeps its colour in both themes (brand row 10), so its button does too; the shelf token turns near-black in dark */
  --gw-on-accent: #82182e;
  --gw-text: var(--color-on-voice, #fff);
  --gw-error: var(--color-on-voice, #fff);
  --gw-ok: #2f6b45;
}
/* The light shelf keeps the burgundy button; the dark shelf (tokens' dark
   theme) gets the light accent so the button stays readable. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) grapes-waitlist:not([tone="voice"]) {
    --gw-accent: var(--color-accent);
    --gw-on-accent: var(--color-on-accent);
    --gw-bg: var(--color-surface-card);
    --gw-ok: var(--color-state-ok);
  }
}

grapes-waitlist * { box-sizing: border-box; }

.gw-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.gw-form { margin: 0; }

.gw-row { display: flex; flex-wrap: wrap; gap: 8px; }
.gw-field { flex: 1 1 14rem; min-width: 0; }
.gw-submit { flex: 0 0 auto; }
grapes-waitlist[layout="stacked"] .gw-row { flex-direction: column; }
grapes-waitlist[layout="stacked"] .gw-field,
grapes-waitlist[layout="stacked"] .gw-submit { flex: 0 0 auto; width: 100%; }

.gw-field {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;
  background: var(--gw-bg);
  color: var(--gw-fg);
  border: 1.5px solid var(--gw-border);
  border-radius: var(--gw-radius);
}
/* The ring sits on the field, which holds the prefix and the input. */
.gw-field:focus-within { outline: 2px solid var(--gw-accent); outline-offset: 2px; }
grapes-waitlist[tone="voice"] .gw-field:focus-within { outline-color: #fff; }

.gw-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: inherit;
  font: 400 1rem/1.2 var(--gw-font); /* 16px: iOS zooms into anything smaller */
  outline: none; /* replaced by the ring on .gw-field:focus-within */
}
.gw-input::placeholder { color: var(--color-ink-muted, #6b5a60); opacity: 1; }
grapes-waitlist[tone="voice"] .gw-input::placeholder { color: #6b5a60; } /* on the white field in both themes */

/* The prefix shows "+351"; the native select lies over it, invisible, so a tap
   opens the system picker with the full country names. */
.gw-prefix {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  min-width: 44px;
  padding: 0 4px 0 14px;
  font: 500 1rem/1 var(--gw-font);
  font-variant-numeric: tabular-nums;
}
.gw-prefix[hidden] { display: none; }
.gw-prefix__code { display: inline-flex; align-items: center; white-space: nowrap; }
.gw-prefix__code::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin: -3px 0 0 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}
.gw-prefix__select {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 1rem;
}

.gw-check {
  display: inline-flex;
  padding-right: 14px;
  color: var(--gw-ok);
}
.gw-check[hidden] { display: none; }

.gw-submit {
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--gw-radius);
  background: var(--gw-accent);
  color: var(--gw-on-accent);
  font: 600 1rem/1.2 var(--gw-font);
  cursor: pointer;
}
.gw-submit:hover { filter: brightness(1.08); }
.gw-submit:focus-visible { outline: 2px solid var(--gw-accent); outline-offset: 3px; }
grapes-waitlist[tone="voice"] .gw-submit:focus-visible { outline-color: #fff; }
.gw-submit:disabled { cursor: progress; opacity: 0.85; }

.gw-hint, .gw-error { margin: 8px 2px 0; font-size: 0.875rem; line-height: 1.45; }
.gw-hint[hidden] { display: none; }
.gw-error:empty { display: none; }
.gw-error { color: var(--gw-error); font-weight: 500; }
grapes-waitlist[tone="voice"] .gw-error { padding-left: 10px; border-left: 2px solid currentColor; }

.gw-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  font-size: 0.8125rem;
  line-height: 1.5;
  cursor: pointer;
}
.gw-consent__box {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin: 0;
  /* the whole label is the hit area, so the box can stay 20px */
  outline-offset: 2px;
  accent-color: var(--gw-accent);
  position: relative;
  top: 1px;
}
.gw-consent__box:focus-visible { outline: 2px solid var(--gw-text); }

.gw-success { margin: 0; font-size: 1.0625rem; line-height: 1.5; font-weight: 500; }
.gw-success:empty { display: none; }
.gw-success:focus { outline: none; } /* focused by script only, to be announced */