/*
 * The select boxes on the Field app page and the Trailer pages (Barrett, 2026-10-14). Each single-choice select draws the app's
 * own arrow inside the field's padding, the same distance in from the right edge as its text sits in from the left edge, as in a
 * text field. The platform's arrow sat about 3 px from the right edge whatever the padding. These rules are in no cascade layer,
 * so they win over the Tailwind classes on each select.
 *
 * A select with the `appearance-none` class draws its own arrow icon beside it (the Trailer header's company select,
 * `pickerControl` in trailer/shell.js), so it gets the page's list but not the page's arrow.
 *
 * Where the browser has the styleable select (`appearance: base-select`: Chrome and Edge 135 and later, Safari 27 and later), the
 * page also draws the list: it opens below the field (above it near the bottom of the screen), at least as wide as the field, in
 * the app's colours. On a Mac the platform's own menu puts the chosen option over the field instead. Where the browser does not
 * have it (Safari 26, Firefox), the platform still draws the list.
 *
 * tests/e2e/field-app-select-boxes.spec.ts and tests/e2e/trailer-select-boxes.spec.ts measure both on the real pages.
 */

@supports (appearance: base-select) {
  select:not([multiple], [size]),
  select:not([multiple], [size])::picker(select) {
    appearance: base-select;
  }

  /* The text and the arrow sit in one row, the arrow at the end of the field's content. The browser gives no way to style the
     text's own box, so a choice too long for the field cannot end in "…": it wraps onto a second line instead, which keeps the
     arrow in the field and shows the whole choice. */
  select:not([multiple], [size]) {
    display: inline-flex;
    align-items: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* A select that shows its choice through a <button> holding <selectedcontent> (lib/select-choice-on-one-line.js: the Field app
     header's project switcher and the Trailer header's company select) keeps the choice on one line, ending in "…". */
  select:not([multiple], [size]) > button {
    all: unset;
    display: block;
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* A stroked chevron in ink-muted, two thirds the size of the field's text; it turns over while the list is open. Its picture is
     cropped to the stroke, so the visible arrow ends where the padding starts. */
  select:not([multiple], [size])::picker-icon {
    content: '';
    flex: none;
    inline-size: 0.6875em;
    block-size: 0.6875em;
    background-color: #A8A49B;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 4 12 12' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: rotate 150ms ease-out;
  }

  select:not([multiple], [size]):open::picker-icon {
    rotate: 180deg;
  }

  select.appearance-none::picker-icon {
    display: none;
  }

  /* The list: a raised plum surface on the strong hairline, 4 px from the field, never wider than the screen less 1 rem a side. */
  select:not([multiple], [size])::picker(select) {
    max-inline-size: calc(100vw - 2rem);
    margin-block: 4px;
    padding: 4px;
    border: 1px solid #474448;
    border-radius: 0.5rem;
    background: #332838;
    color: #F1F0EA;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.45);
  }

  /* Each option is a 48 px touch target, and a long one wraps rather than running out of the list. The chosen one carries the
     amber check. */
  select:not([multiple], [size]) option {
    min-block-size: 48px;
    gap: 0.5rem;
    padding-inline: 0.75rem;
    border-radius: 0.375rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  select:not([multiple], [size]) option:hover,
  select:not([multiple], [size]) option:focus-visible {
    background: #443646;
    outline: none;
  }

  select:not([multiple], [size]) option::checkmark {
    color: #FFAB40;
  }
}

/* No styleable select: the same chevron as a background picture, 0.75 rem in from the right edge (the px-3 padding most selects
   here use), with room kept for it so a long choice does not run under it. */
@supports not (appearance: base-select) {
  select:not([multiple], [size], .appearance-none) {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 4 12 12' fill='none' stroke='%23A8A49B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.6875em;
    padding-inline-end: 2.25rem;
  }
}

/* A choice that cannot be taken (its option carries `disabled`, as a project that already has today's log does in the daily-log
   project chooser) is ink-muted rather than ink-faint: 6.1:1 on this ground instead of 4.2:1. Disabled controls are exempt from
   the WCAG contrast minimum, but this app is read one-handed in direct sun, so the exemption is not worth taking. The iOS wheel
   ignores option colour and greys disabled rows itself, which is why the `disabled` attribute, not this rule, carries the
   behaviour. */
select option:disabled {
  color: #A8A49B;
}