/* The form pages (docs/TICKETS.md, steps 7, 7c and 10), in the look of the site that embeds them: their font
   (Barlow), their colours, the pill button. Compact, because the form sits in a column next to the page's intro:
   fields two by two from 440px wide, one below the other on a phone. */
@font-face { font-family: Barlow; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: Barlow; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: Barlow; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-700.woff2") format("woff2"); }

/* compete-hr.com (and the not-available page): navy. */
:root {
  color-scheme: light;
  --chr-heading: #213442;
  --chr-text: #213442;
  --chr-muted: #4f6372;
  --chr-border: #cdd6dc;
  --chr-primary: #8bc541;
  --chr-primary-hover: #9dd055;
  --chr-on-primary: #213442;
  --chr-focus: #557828;
  --chr-error: #b42318;
  --chr-radius: 5px;
  --chr-control-height: 44px;
}

/* vrijedagen.nl and leavedays.com: the Vrijedagen greens. */
.chr-site-vrijedagen, .chr-site-leavedays {
  --chr-heading: #184e23;
  --chr-text: #33452f;
  --chr-muted: #4b5a47;
  --chr-border: #cfd8cc;
  --chr-on-primary: #184e23;
  --chr-focus: #184e23;
}

* { box-sizing: border-box; }

/* Only room for the focus outline: the embedding page gives the form its own margins. */
body {
  margin: 0;
  padding: 4px;
  font: 16px/1.4 Barlow, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--chr-text);
  background: #fff;
}

h1 { font-size: 1.375rem; font-weight: 700; line-height: 1.2; margin: 0 0 12px; color: var(--chr-heading); }

#chr-form { display: grid; grid-template-columns: 1fr; column-gap: 16px; }
#chr-form > * { grid-column: 1 / -1; min-width: 0; }

@media (min-width: 440px) {
  #chr-form { grid-template-columns: 1fr 1fr; }
  #chr-form > .chr-half { grid-column: auto; }
}

.chr-field { margin-bottom: 12px; }

label, legend { display: block; font-weight: 600; font-size: 0.9375rem; margin-bottom: 4px; color: var(--chr-heading); }

/* One line in a half column, so the two controls of a pair stay level (a long label is cut off, not wrapped). */
.chr-half > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chr-required { font-weight: 400; color: var(--chr-muted); font-size: 0.875em; }

/* Inputs and selects share one height, so a select lines up with the input next to it. */
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 12px;
  font: inherit;
  color: inherit;
  border: 2px solid var(--chr-border);
  border-radius: var(--chr-radius);
  background-color: #fff;
}

input[type="text"], input[type="email"], input[type="tel"], select { height: var(--chr-control-height); }

/* The browser's own arrow sits against the edge and differs per browser: a chevron drawn with two gradients
   instead (the CSP allows no data: images), its right point 12px in, like the text on the left. */
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--chr-heading) 50%),
    linear-gradient(135deg, var(--chr-heading) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

textarea { padding: 9px 12px; resize: vertical; min-height: 88px; }

/* "Choose" (the empty, invalid value of a required select) reads as a placeholder; the real choices do not. */
select:invalid { color: var(--chr-muted); }
select option { color: var(--chr-text); }

/* High contrast mode drops the gradient chevron: give the browser's own arrow back. */
@media (forced-colors: active) {
  select { -webkit-appearance: auto; appearance: auto; background-image: none; padding-right: 12px; }
}

input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--chr-focus);
  outline-offset: 1px;
}

[aria-invalid="true"] { border-color: var(--chr-error); }

.chr-error { margin: 4px 0 0; color: var(--chr-error); font-size: 0.875rem; }
.chr-error:empty { display: none; }

.chr-check { display: flex; gap: 8px; align-items: flex-start; font-size: 0.9375rem; }
.chr-check input { margin-top: 3px; accent-color: var(--chr-focus); }
.chr-check label { font-weight: 400; font-size: inherit; margin: 0; color: var(--chr-text); }

.chr-privacy { margin: 0 0 8px; color: var(--chr-muted); font-size: 0.8125rem; }
.chr-privacy a { color: var(--chr-heading); }

#chr-captcha { margin: 4px 0 8px; min-height: 65px; }

.chr-status { min-height: 1.4em; margin: 0 0 8px; color: var(--chr-error); }

/* The websites' primary button: green pill. */
button {
  justify-self: start;
  padding: 12px 28px;
  font: inherit;
  font-weight: 700;
  color: var(--chr-on-primary);
  background: var(--chr-primary);
  border: 2px solid var(--chr-primary);
  border-radius: 999px;
  cursor: pointer;
}

button:hover { background: var(--chr-primary-hover); border-color: var(--chr-primary-hover); }
button:disabled { opacity: 0.6; cursor: progress; }

.chr-thanks { font-size: 1.125rem; margin: 8px 0; color: var(--chr-heading); }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.chr-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }