@layer components {
  .field {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);

    & small { font-size: var(--text-x-small); font-weight: 500; }
    &:has([aria-invalid=true]) small { color: var(--color-negative); }
  }

  .field--check {
    flex-direction: row;
    align-items: start;
    gap: var(--inline-space);

    & label { font-weight: 400; }
  }

  /* Dropzone: a dashed area the file input fills, transparent. The ring points up, the way the
     file goes; while a file is dragged over, the zone fills violet and the ring bobs. */
  .dropzone {
    position: relative;
    display: grid;
    place-items: center;
    gap: var(--block-space-half);
    min-block-size: 11rem;
    padding: var(--block-space-double);
    text-align: center;
    color: var(--color-subtle);
    background: var(--color-bg-raised);
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-large);
    transition: border-color var(--transition), background var(--transition), color var(--transition),
      scale var(--duration-flip) var(--ease-out-back);

    &:hover { color: var(--color-link); border-color: var(--color-link); }
    &:focus-within { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
    &:has([aria-invalid=true]) { border-color: var(--color-negative); }

    &[data-active] {
      color: var(--color-link);
      background: var(--color-link-tint);
      border-style: solid;
      border-color: var(--color-link);
      scale: 1.02;
    }
  }

  .dropzone__input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    opacity: 0;
    cursor: pointer;
  }

  .dropzone__icon { font-size: 2rem; transition: none; }
  .dropzone:has(.dropzone__preview:not([hidden])) .dropzone__icon { display: none; } /* the image says it */
  .dropzone__prompt { font-size: var(--text-small); font-weight: 600; }
  .dropzone__preview { max-block-size: 5rem; inline-size: auto; border-radius: var(--radius); }

  @media (prefers-reduced-motion: no-preference) {
    .dropzone[data-active] .dropzone__icon { animation: dropzone-bob 500ms ease-in-out infinite alternate; }
  }

  @keyframes dropzone-bob { to { translate: 0 -0.375rem; } }

  /* Choices: a radio group as cards side by side, the chosen one in violet. The native radio
     stays, so the keyboard and the form work as ever; its label stretches over the whole card. */
  .choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--inline-space-double);

    & legend { margin-block-end: var(--block-space-half); }
    & .field__error { grid-column: 1 / -1; }
  }

  .choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--inline-space-double);
    padding: var(--block-space) var(--inline-space-double);
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-large);
    transition: border-color var(--transition), background var(--transition);

    & label {
      font-size: var(--text-normal);
      font-weight: 600;
      cursor: pointer;

      &::after { content: ""; position: absolute; inset: 0; }
    }

    &:hover { border-color: var(--color-link); }
    &:has(:checked) { background: var(--color-link-tint); border-color: var(--color-link); box-shadow: 0 0 0 1px var(--color-link); }
    &:has(:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
    &:has([aria-invalid=true]), .choices:has(.field__error) & { border-color: var(--color-negative); }
  }

  /* Picker: one choice made by a tap, set as the home's index. Each option is a button_to, so a
     form per row; button. outranks the global button face (buttons.css), which a row does not want. */
  .picker {
    max-inline-size: 40rem;
    border-block-start: 1px solid var(--color-border-strong);

    & .button_to { border-block-end: 1px solid var(--color-border-strong); }
  }

  button.picker__option {
    display: flex;
    align-items: center;
    gap: var(--inline-space-double);
    inline-size: 100%;
    min-block-size: 4.5rem;
    padding: var(--block-space) 0;
    font-size: clamp(var(--text-medium), 0.9rem + 1.2vw, var(--text-x-large));
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: start;
    color: var(--color-text);
    background: none;
    border: 0;
    border-radius: 0;
    scale: none !important;
    transition: padding var(--duration-flip) var(--ease-out-back), color var(--transition);

    &::before { display: none; }
    & .ring { font-size: var(--text-medium); color: var(--color-link); }
    & .picker__name { flex: 1; }

    &:hover { padding-inline-start: var(--inline-space-double); color: var(--color-link); }
  }

  /* The current choice: a violet band with a bar at its edge, and stamped "Aquí estás". */
  button.picker__option--current {
    padding-inline: var(--inline-space-double);
    color: var(--color-link);
    background: var(--color-link-tint);
    box-shadow: inset 0.3rem 0 0 var(--color-link);

    &:hover { padding-inline-start: calc(var(--inline-space) * 3); }
  }

  /* Tabs: a page's sibling pages as big words on a rule; the current one in ink, marked violet. */
  .tabs {
    display: flex;
    gap: calc(var(--inline-space) * 4);
    overflow-x: auto;
    border-block-end: 1px solid var(--color-border-strong);
    scrollbar-width: none;

    & a {
      flex: none;
      margin-block-end: -1px;
      padding-block: var(--block-space-half);
      font-size: var(--text-large);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--color-subtle);
      text-decoration: none;
      background: none; /* no drawn underline (base.css): the bar marks the current tab */
      border-block-end: 3px solid transparent;
      transition: color var(--transition), border-color var(--transition);

      &:hover { color: var(--color-text); }
      &[aria-current=page] { color: var(--color-text); border-color: var(--color-link); }
    }
  }

  .links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-half) var(--inline-space-double);
    font-size: var(--text-small);
  }

  /* The owner's customer search. */
  .search {
    display: flex;
    gap: var(--inline-space);
    max-inline-size: 32rem;

    & input { flex: 1; min-inline-size: 0; }
  }

  /* F12 history filters: one row where it fits, stacked on a phone. */
  .filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--block-space) var(--inline-space-double);
  }
}