/*
 * The card of the entry form of the free journey (ticket 0180, lot A, rule 3): the rules `lp-*`
 * of the card of the home page (ticket 0237, sub-lot B2-a, the free design of direction D),
 * moved from static/css/pages/home.css without a change of value, so that the home page and the
 * product page that can be ordered render the same card (templates/intake/_entry_card.html).
 * Loaded by these two pages, before the sheet of the page; the sheet of the product page sets
 * the card in its card of the price (static/css/pages/produit.css). Every colour is a variable of
 * tokens.css; the movements are those of the closed list of
 * apps/core/tests/test_design_components.py, under a preference for motion only.
 */

/* The card of the form --------------------------------------------------- */

.lp-intake {
  position: relative;
  padding: clamp(1.375rem, 3vw, 2.25rem);
  border: var(--border-width) solid color-mix(in srgb, var(--color-ink) 8%, transparent);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.lp-intake__head {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
}

.lp-intake__title {
  margin: 0;
  font-size: clamp(1.625rem, 2.6vw, 2rem);
}

.lp-intake__tag {
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lp-intake__help {
  margin: 0.5rem 0 0;
  color: var(--color-ink-muted);
  font-size: 0.96875rem;
}

.lp-intake .field {
  max-width: none;
  margin: 1.375rem 0 0;
}

.lp-intake .field > label {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin: 0 0 0.5rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-strong);
}

.lp-intake .field > label small {
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
}

.lp-intake textarea,
.lp-intake input[type="email"] {
  padding: 0.875rem 1rem;
  border-color: var(--color-border);
  border-radius: 0.75rem;
  background: var(--color-page);
  font-size: 1rem;
}

.lp-intake textarea {
  height: 10.5rem;
  min-height: 10.5rem;
  line-height: 1.55;
}

.lp-intake input[type="email"] {
  min-height: 3.125rem;
}

.lp-intake textarea:hover,
.lp-intake input[type="email"]:hover {
  border-color: var(--color-ink-muted);
}

.lp-intake textarea:focus,
.lp-intake input[type="email"]:focus {
  border-color: var(--color-ink);
  background: var(--color-surface);
}

/* The tools of the field: the button « Dicter » at the left, the counter at the right. A grid of
   a fixed first column, so that the counter has the same room with the button, without it and
   without script (the card is as high in the three cases, ticket 0177, rule 1 ter (2)); under
   40 rem the counter goes under the button, on its own line, which takes no room while the
   counter is empty. */
.lp-intake .field__tools {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0 0.75rem;
  align-items: center;
  /* The row keeps the height of the button « Dicter » with or without it. */
  min-height: var(--target-size);
  margin-top: 0.25rem;
}

@media (max-width: 39.9375rem) {
  .lp-intake .field__tools {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .lp-intake .field__foot-slot {
    min-height: var(--target-size);
  }
}

.lp-intake .field__foot-slot {
  position: static;
  display: flex;
}

.lp-intake .dictation-slot {
  max-width: none;
  margin: 0;
  text-align: right;
}

@media (max-width: 39.9375rem) {
  .lp-intake .dictation-slot {
    text-align: left;
  }
}

.lp-intake .dictation-slot:has(> :not(:empty)) {
  margin-top: 0.25rem;
}

.lp-intake .dictation-slot:not(:has(> :not(:empty))) {
  margin: 0;
}

.lp-intake .dictation-slot > * {
  margin: 0;
}

.lp-intake .dictation-slot > .dictation-notice {
  text-align: left;
}

.lp-intake .dictation-button {
  padding: 0.375rem 0.75rem;
}

.lp-intake .dictation-button::before {
  inset: 0.375rem 0;
  border-color: var(--color-border);
}

.lp-intake .dictation-button .icon {
  color: var(--color-brand);
}

.lp-intake .description-counter {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

/* The topics: chips that pose an example of description (rendered by the script of the
   field); the box of 44 pixels holds a visible chip of 32. */
.lp-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  margin-top: 0.25rem;
}

button.button--secondary.lp-topic {
  position: relative;
  isolation: isolate;
  min-height: 2.75rem;
  padding: 0.375rem 0.75rem;
  border: 0;
  background: transparent;
  color: var(--color-ink-soft);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
}

button.button--secondary.lp-topic::before {
  position: absolute;
  inset: 0.375rem 0;
  z-index: -1;
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-pill);
  background: transparent;
  content: "";
}

button.button--secondary.lp-topic:hover {
  background: transparent;
  color: var(--color-brand);
}

button.button--secondary.lp-topic:hover::before {
  border-style: solid;
  border-color: var(--color-brand);
  background: var(--color-attention-soft);
}

button.button--secondary.lp-topic:focus-visible {
  outline-color: transparent;
}

button.button--secondary.lp-topic:focus-visible::before {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

/* The consent: the box of the free design (22 pixels, ink when checked). */
.lp-intake .choice {
  gap: 0.75rem;
  align-items: flex-start;
  min-height: var(--target-size);
  color: var(--color-ink-soft);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

.lp-intake .choice input {
  appearance: none;
  display: grid;
  flex: none;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.0625rem 0 0;
  border: 1.5px solid var(--color-border);
  border-radius: 0.4375rem;
  background: var(--color-surface);
  cursor: pointer;
}

.lp-intake .choice input::after {
  width: 0.625rem;
  height: 0.375rem;
  border-bottom: 2px solid var(--color-surface);
  border-left: 2px solid var(--color-surface);
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  content: "";
}

.lp-intake .choice input:checked {
  border-color: var(--color-ink);
  background: var(--color-ink);
}

.lp-intake .choice input:checked::after {
  transform: rotate(-45deg) translate(1px, -1px) scale(1);
}

.lp-intake .actions {
  display: block;
  margin: 1.375rem 0 0;
}

.lp-intake .actions button {
  width: 100%;
  min-height: 3.5rem;
  padding: 0.875rem 1.75rem;
  gap: 0.625rem;
  font-size: var(--font-size-base);
}

.lp-intake .actions button .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.lp-reassure {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  margin: 0.875rem 0 0;
  color: var(--color-ink-soft);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}

.lp-reassure .icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 1px;
  color: var(--color-verified);
}

.lp-fine {
  /* The width of the card decides the fold of the row below (container query). */
  container: lp-fine / inline-size;
  margin-top: 1.125rem;
  padding-top: 1rem;
  border-top: var(--border-width) dashed var(--color-line-strong);
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

.lp-fine > p {
  margin: 0;
}

/* The four small links (the example of a description is the third, ticket 0246) and the link to
   the legal notice are the five children of one row (ticket 0269): one style, one box of 44 px,
   one interval between neighbours (written once, --space-2), none between two lines. The row
   folds between whole elements. An open panel takes the whole line, under its link, in the
   flow: the links before it stay where they are, the ones after it follow the panel. Below
   640 px, and where the card is too narrow for the small links on one line (under 26.75 rem,
   428 px), one element per line, at the left, the boxes touching. */
.lp-fine__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  align-items: flex-start;
}

.lp-fine__row > * {
  margin: 0;
}

.lp-fine details {
  margin: 0;
}

.lp-fine details[open] {
  width: 100%;
}

.lp-fine .more__summary,
.lp-fine__legal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-size);
  color: var(--color-ink-soft);
  font-size: var(--font-size-xs);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.lp-fine__legal a:hover {
  color: var(--color-ink-soft);
  text-decoration-thickness: 1px;
}

.lp-fine .more__panel {
  margin: 0 0 0.5rem;
  border-color: var(--color-line);
  color: var(--color-ink-soft);
}

.lp-fine .more__panel .hint,
.lp-fine .more__panel .note {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xs);
}

.lp-fine .more__panel > :last-child {
  margin-bottom: 0;
}

@media (max-width: 39.9375rem) {
  .lp-fine__row {
    flex-direction: column;
  }
}

/* The threshold of 26.75 rem stays right with the example of a description (ticket 0246): it
   separates the narrow card (stack of five lines, tested at 1 024 px) from the card that
   folds the row as [2, 2, 1] (tested at 1 280 and 1 440 px), with whole elements on each
   line in both cases. */
@container lp-fine (width < 26.75rem) {
  .lp-fine__row {
    flex-direction: column;
  }
}

/* Movements of state (ticket 0237, rule 20 (e)): nothing under prefers-reduced-motion: reduce. */
@media (prefers-reduced-motion: no-preference) {
  button.button--secondary.lp-topic::before {
    transition:
      background-color var(--motion-hover) var(--ease-state),
      border-color var(--motion-hover) var(--ease-state);
  }

  .lp-intake .actions button .icon {
    transition: transform 250ms var(--ease-state);
  }

  .lp-intake .actions button:hover .icon {
    transform: translateX(3px);
  }
}