/*
 * Forms App Styles: the public form, its home list and one question at a
 * time (CSS.md "Forms"). Tokens only; the fields themselves are the shared
 * form components.
 */

@layer components {
  /* The public form: the fields keep the product's form rhythm, 40px apart
     (16px gap and the form group's own 24px). */
  .form-page__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .form-page__form > .form-actions {
    margin-top: 0;
    align-items: center;
  }

  .form-page__lead {
    margin: calc(var(--space-4) * -1) 0 var(--space-8);
  }

  /* In another site's frame (forms/embed.html, mock public-embed): the
     frame's own room at the edges and none above, the title a step
     smaller, since the page around it has its own. */
  .embed .form-page {
    padding-block-start: 0;
  }

  .embed .form-page .page__title {
    font-size: var(--text-lg);
    margin-block-end: var(--space-4);
  }

  .embed .form-page__lead {
    margin: 0 0 var(--space-6);
  }

  /* The guard's widget, or nothing for a member or without a key. */
  .form-page__finish:not(:has(*)) {
    display: none;
  }

  /* The open and scheduled forms on the site's home page. */
  .forms-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: var(--max-width-narrow);
  }

  .forms-list__item {
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .forms-list__item:first-child {
    padding-top: 0;
  }

  .forms-list__title {
    font-size: var(--text-lg);
    margin: 0 0 var(--space-2);
  }

  .forms-list__title a {
    text-decoration: none;
  }

  .forms-list__title a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .forms-list__meta {
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
    margin: var(--space-2) 0 0;
  }

  /* The site's search: the shared box (global.css), as wide as the text,
     then the results as the home lists forms, the words found marked. */
  .page > .search-form {
    max-width: var(--max-width-narrow);
  }

  .forms-search__snippet mark {
    background: none;
    color: var(--ink);
    font-weight: var(--weight-semibold);
  }

  /* One question at a time (the form-steps behavior, JS.md): the server
     draws every field; the behavior marks the form form-steps--on and the
     current field form-step, and every other field waits. After the
     first step the title steps back and the introduction goes. */
  .form-steps--on > [data-field-id]:not(.form-step) {
    display: none;
  }

  .form-page:has(.form-steps--later) .page__title {
    font-size: var(--text-md);
    margin: 0 0 var(--space-4);
  }

  .form-page:has(.form-steps--later) .form-page__lead {
    display: none;
  }

  .form-steps__progress {
    margin: 0 0 var(--space-8);
  }

  .form-steps__progress .meta-text {
    margin: 0 0 var(--space-2);
  }

  .form-step > .form-label,
  .form-step > legend.form-label {
    display: block;
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    line-height: 1.25;
    text-wrap: balance;
    margin: 0 0 var(--space-4);
    padding: 0;
  }

  .form-step > .form-label .text-muted {
    font-size: var(--text-base);
    font-weight: var(--weight-regular, 400);
  }

  .form-step > .form-hint {
    display: block;
    margin: 0 0 var(--space-6);
  }

  .form-step .form-textarea {
    min-height: 10rem;
  }

  /* A refused step's words, under its question, as a refused field's. */
  .form-steps__error {
    margin: var(--space-2) 0 0;
  }

  /* The letter of each choice, the key that picks it, where there is a
     keyboard to press it (plan "Also in v1": letter keys). */
  @media (pointer: fine) {
    .form-steps--on [data-field-type="radio"],
    .form-steps--on [data-field-type="checkboxes"] {
      counter-reset: choice;
    }

    .form-steps--on [data-field-type="radio"] .form-check,
    .form-steps--on [data-field-type="checkboxes"] .form-check {
      counter-increment: choice;
    }

    .form-steps--on [data-field-type="radio"] .form-check-label::after,
    .form-steps--on [data-field-type="checkboxes"] .form-check-label::after {
      content: counter(choice, upper-alpha);
      margin-inline-start: var(--space-2);
      padding: 0 0.4em;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      font-family: var(--font-mono);
      font-size: 0.75em;
      color: var(--color-fg-muted);
    }
  }
}

@layer components {
  /* Every form's inbox on a phone: the form's name goes under the sender
     and its column goes, so the two left keep their words whole. */
  .forms-inbox__form-line {
    display: none;
  }

  @media (max-width: 640px) {
    .forms-inbox__form-line {
      display: block;
    }

    .forms-inbox__form-col {
      display: none;
    }
  }

  /* The summary of a form's answers in the admin (forms/plan.md 4.2): a
     field a block, each option or number a row with its count and share
     over a thin bar. The bar is a native meter drawn like the progress
     bar, since the admin's policy refuses a width written into the page. */
  .forms-summary {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    max-width: var(--max-width-narrow);
  }

  /* A field and a row are list items the base style indents: they start
     where the lead sentence does. */
  .forms-summary__field,
  .forms-summary__row {
    padding: 0;
    margin: 0;
  }

  .forms-summary__field {
    min-width: 0;
  }

  .forms-summary__rows {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .forms-summary__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-1) var(--space-4);
  }

  .forms-summary__count {
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .forms-summary__meter {
    appearance: none;
    display: block;
    flex-basis: 100%;
    width: 100%;
    height: 4px;
    border: 0;
    background: var(--color-bg-hover);
  }

  .forms-summary__meter::-webkit-meter-bar {
    height: 4px;
    border: 0;
    border-radius: 0;
    background: var(--color-bg-hover);
  }

  .forms-summary__meter::-webkit-meter-optimum-value,
  .forms-summary__meter::-webkit-meter-suboptimum-value,
  .forms-summary__meter::-webkit-meter-even-less-good-value {
    background: var(--color-fg);
  }

  .forms-summary__meter::-moz-meter-bar {
    background: var(--color-fg);
  }

  /* A reply sent from a submission's page. */
  .forms-reply {
    padding-inline-start: var(--space-4);
    border-inline-start: 2px solid var(--line-soft);
  }
}