/* ==========================================================================
   tufte-form.css
   Form styling consistent with tufte.css (https://edwardtufte.github.io/tufte-css/)
   ========================================================================== */

/* -- Form container ------------------------------------------------------
   Tufte articles are set in a single narrow column (width: 87.5%; max-width
   55%, or ~700px, on the body). Forms should respect the same measure so
   labels and inputs don't sprawl across the page. */

.tufte-form {
  width: 55.5%;
  max-width: 700px;
  /*margin: 2rem auto;*/
  font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD",
    "Book Antiqua", Georgia, serif;
  color: #111;
  background-color: #fffff8;
  font-size: 1.4rem;
  line-height: 2rem;
}

.tufte-form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 3rem 0;
}

.tufte-form legend {
  font-style: italic;
  font-size: 1.8rem;
  line-height: 2.1rem;
  margin-bottom: 1.4rem;
  color: #111;
}

/* -- Field groups ---------------------------------------------------------
   One field per line, generous vertical rhythm (matches Tufte's 1.4rem
   paragraph spacing) rather than tight, app-like form stacking. */
.tufte-form .field {
  margin-bottom: 2rem;
}

.tufte-form label {
  display: block;
  font-weight: normal;
  font-style: italic;
  font-size: 1.4rem;
  color: #111;
  margin-bottom: 0.3rem;
}

/* Required-field marker set as a Tufte-style sidenote number rather than
   a red asterisk */
.tufte-form label .required {
  font-style: normal;
  font-size: 1rem;
  vertical-align: super;
  color: #111;
}

/* -- Text inputs ------------------------------------------------------------
   No boxes. A single hairline rule, same weight as Tufte's <hr> (#111 at
   thin width), doubling as the writing line. Background stays flush with
   the page (#fffff8) so fields read as part of the text, not UI chrome. */
.tufte-form input[type="text"],
.tufte-form input[type="email"],
.tufte-form input[type="password"],
.tufte-form input[type="tel"],
.tufte-form input[type="url"],
.tufte-form input[type="number"],
.tufte-form input[type="date"],
.tufte-form textarea,
.tufte-form select {
  width: 100%;
  font-family: et-book, Palatino, "Palatino Linotype", Georgia, serif;
  font-size: 1.4rem;
  color: #111;
  background-color: #fffff8;
  border: none;
  border-bottom: 1px solid #111;
  border-radius: 0;
  padding: 0.3rem 0.1rem;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.tufte-form textarea {
  border: 1px solid #ccc;
  border-radius: 0;
  padding: 0.6rem;
  min-height: 6rem;
  resize: vertical;
}

/* Focus state: thicken the rule instead of adding a glow/box, echoing how
   Tufte uses weight, not color, to draw attention */
.tufte-form input:focus,
.tufte-form textarea:focus,
.tufte-form select:focus {
  outline: none;
  border-bottom: 2px solid #111;
}

.tufte-form textarea:focus {
  border: 1px solid #111;
}

/* Placeholder text: same italic register as sidenotes */
.tufte-form ::placeholder {
  font-style: italic;
  color: #999;
  opacity: 1;
}

/* -- Select dropdown --------------------------------------------------------
   Keep the native control but strip chrome so it matches the underlined
   text-input style. */
.tufte-form select {
  border: none;
  border-bottom: 1px solid #111;
  background-image: linear-gradient(45deg, transparent 50%, #111 50%),
    linear-gradient(135deg, #111 50%, transparent 50%);
  background-position: calc(100% - 12px) center, calc(100% - 7px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.5rem;
}

/* -- Checkboxes & radios -----------------------------------------------
   Tufte uses numerals and small caps rather than icon-heavy UI; keep
   native controls minimal and align them with body text baseline. */
.tufte-form .choice-group {
  margin-bottom: 2rem;
}

.tufte-form .choice-group > .choice-label {
  font-style: italic;
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
  display: block;
}

.tufte-form .choice {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
  font-size: 1.4rem;
}

.tufte-form input[type="checkbox"],
.tufte-form input[type="radio"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: #111;
}

/* -- Sidenotes as help text -----------------------------------------------
   Field-level hints go in the margin, exactly like tufte.css sidenotes:
   numbered marker inline, note floats right in the margin column at
   viewports wide enough to support it. */
.tufte-form .sidenote-number {
  font-size: 1rem;
  vertical-align: super;
}

.tufte-form .field-help.sidenote {
  float: right;
  clear: right;
  margin-right: -60%;
  width: 50%;
  margin-top: 0.1rem;
  margin-bottom: 0;
  font-size: 1.1rem;
  line-height: 1.4rem;
  vertical-align: baseline;
  position: relative;
  color: #111;
}

/* Fallback for narrow viewports: help text drops inline like Tufte's
   mobile sidenote behavior, shown as a toggle-free footnote-style line */
@media (max-width: 760px) {
  .tufte-form .field-help.sidenote {
    display: block;
    float: none;
    width: 100%;
    margin: 0.4rem 0 0 0;
    font-size: 1.2rem;
  }
}

/* -- Validation / error states --------------------------------------------
   No red boxes or icons: errors are set in the same italic sidenote voice,
   with the rule beneath the field thickening to signal something needs
   attention -- consistent with Tufte's "weight over color" philosophy. */
.tufte-form .field.has-error input,
.tufte-form .field.has-error textarea,
.tufte-form .field.has-error select {
  border-bottom: 2px solid #111;
}

.tufte-form .field-error {
  display: block;
  font-style: italic;
  font-size: 1.2rem;
  color: #111;
  margin-top: 0.3rem;
}

.tufte-form .field-error::before {
  content: "— ";
}

/* -- Numerals ---------------------------------------------------------------
   Tufte sets tabular/quantitative content in sans-serif (Gill Sans/
   Helvetica) via the .sans class. Apply the same rule to numeric fields
   so figures don't take on old-style serif numeral proportions. */
.tufte-form input[type="number"],
.tufte-form input[type="tel"],
.tufte-form .sans {
  font-family: Gill Sans, "Gill Sans MT", Calibri, sans-serif;
  letter-spacing: 0.01em;
}

/* -- Buttons -----------------------------------------------------------
   No filled buttons. A bracketed, small-caps link-style control, matching
   Tufte's understated treatment of interactive elements (links are simply
   colored text, no underline chrome, no pill shapes). */
.tufte-form button,
.tufte-form input[type="submit"] {
  font-family: et-book, Palatino, Georgia, serif;
  font-size: 1.4rem;
  font-style: italic;
  color: #111;
  background: none;
  border: 1px solid #111;
  border-radius: 0;
  padding: 0.5rem 1.4rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tufte-form button:hover,
.tufte-form input[type="submit"]:hover {
  background-color: #111;
  color: #fffff8;
}

.tufte-form button:focus,
.tufte-form input[type="submit"]:focus {
  outline: 1px dotted #111;
  outline-offset: 3px;
}

.tufte-form button.secondary {
  border-color: #ccc;
  color: #777;
}

.tufte-form button.secondary:hover {
  background-color: #ccc;
  color: #111;
}

/* -- Fine print / disclaimers ----------------------------------------------
   Reuses Tufte's epigraph styling register for terms-and-conditions or
   privacy notices below the fold of the form. */
.tufte-form .form-epigraph {
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.8rem;
  color: #555;
  margin: 2rem 0 0 0;
  padding-left: 1rem;
  border-left: 1px solid #ccc;
}

@media (max-width: 760px) {
.tufte-form { width: 90%; }
}

/* -- Language select page --------------------------------------------
   A title-page treatment: centered, quiet, no buttons or cards. The
   two languages are set as plain text choices separated by a hairline,
   echoing how Tufte separates sidenotes/footnotes with a rule rather
   than a box. */
.language-select {
  width: 87.5%;
  max-width: 700px;
  margin: 4rem auto;
  text-align: center;
  font-family: et-book, Palatino, "Palatino Linotype", Georgia, serif;
  color: #111;
  background-color: #fffff8;
}

.language-select h1 {
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 2.6rem;
  margin-bottom: 3rem;
}

/* -- Purist version: plain text links ------------------------------- */
.language-choices {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 1.2rem;
  font-size: 1.6rem;
}

.language-choices a {
  color: #111;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.language-choices a:hover,
.language-choices a:focus {
  border-bottom-color: #111;
}

.language-choices .divider {
  color: #999;
  font-family: Gill Sans, "Gill Sans MT", Calibri, sans-serif;
}

/* -- Flagged version: small, muted, secondary to the text ------------
   If flags are kept, they're sized to sit quietly beside the text
   rather than as the primary visual anchor, and desaturated slightly
   so they don't fight the page's black-and-white palette. */
.language-choices .language-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.4rem;
  color: #111;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.language-choices .language-choice:hover,
.language-choices .language-choice:focus {
  border-bottom-color: #111;
}

.language-choices .flag-icon {
  width: 28px;
  height: auto;
  filter: saturate(0.6);
  opacity: 0.85;
}

.language-choices .language-choice span {
  font-size: 1.4rem;
}

/* -- Privacy policy specifics ----------------------------------------- */

/* Date line under the title, same register as an article dateline */
.subtitle {
  font-style: italic;
  color: #555;
  font-size: 1.4rem;
  margin-top: -1rem;
  margin-bottom: 2.5rem;
}

/* Purpose list (§3): remove default bullets since each item already
   carries its own sidenote reference */
.purpose-list {
  list-style: none;
  padding-left: 0;
}

.purpose-list li {
  margin-bottom: 1.2rem;
}

/* Back-to-home link, same treatment as the confirmation page */
.policy-back {
  margin-top: 3rem;
  font-size: 1.3rem;
}

.policy-back a {
  color: #111;
  text-decoration: none;
  border-bottom: 1px solid #111;
}

.policy-back a:hover {
  color: #555;
  border-bottom-color: #555;
}