/*
 * Divider-separated answer rows, no bordered cards. The wash BLEEDS outward —
 * an equal negative margin and padding, net zero for layout — so the option TEXT
 * sits on the container's own edge, level with the question above it.
 *
 * Selected is a persistent tint and hover is one rung quieter, which is what
 * keeps "the one I picked" readable while the pointer is somewhere else.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-choice-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  .lotics-choice-list__options {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
  }

  .lotics-choice-list__option,
  .lotics-choice-list__custom {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-12);
    padding-block: var(--lotics-space-12);
    padding-inline: var(--lotics-row-wash-bleed);
    margin-inline: calc(var(--lotics-row-wash-bleed) * -1);
    border-radius: var(--lotics-radius-control);
    background-color: transparent;
    appearance: none;
    border: 0 solid var(--border);
    /* An answer SETS A VALUE; the pointer is reserved for what acts. */
    cursor: default;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  .lotics-choice-list__option:hover,
  .lotics-choice-list__option:active,
  .lotics-choice-list__custom:hover {
    background-color: var(--lotics-wash-hover);
  }

  .lotics-choice-list__option[data-checked],
  .lotics-choice-list__custom[data-checked] {
    background-color: var(--lotics-wash-selected);
  }

  .lotics-choice-list__option:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  /* A text row rings on ANY focus, the way every text-like control in the kit
     does — a clicked field shows its edge immediately. */
  .lotics-choice-list__custom:focus-within {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  .lotics-choice-list__text {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    gap: var(--lotics-space-2);
  }

  .lotics-choice-list__label {
    min-width: 0;
    font-family: var(--font-sans);
    font-size: var(--lotics-text-sm);
    line-height: var(--lotics-leading-sm);
    letter-spacing: var(--lotics-tracking-sm);
    font-weight: var(--lotics-weight-regular);
    font-feature-settings: var(--lotics-font-features);
    color: var(--lotics-ink-default);
    text-align: start;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }

  /* The chosen answer thickens rather than colouring: the tick already carries
     the state, and a second colour would be the brand spent on a selection. */
  .lotics-choice-list__option[data-checked] .lotics-choice-list__label {
    font-weight: var(--lotics-weight-medium);
  }

  .lotics-choice-list__description {
    min-width: 0;
    font-family: var(--font-sans);
    font-size: var(--lotics-text-xs);
    line-height: var(--lotics-leading-xs);
    letter-spacing: var(--lotics-tracking-xs);
    font-weight: var(--lotics-weight-regular);
    font-feature-settings: var(--lotics-font-features);
    color: var(--lotics-ink-muted);
    text-align: start;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }

  /* The tick's slot is reserved on every row, so picking one moves nothing. */
  .lotics-choice-list__indicator {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 17px;
  }

  /* The typed answer reads exactly like a picked option's LABEL — the input
     contract's SIZE (16 on a phone, which is what stops iOS zooming a focused
     field) with the label's family, weight, tracking and ink. */
  .lotics-choice-list__answer {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0 solid var(--border);
    background-color: transparent;
    appearance: none;
    resize: none;
    /* The ROW owns the ring, so the element inside it must not draw a second. */
    outline-style: none;
    overflow-y: hidden;
    /* Floored at ONE line — the measurement arrives from a ref callback and
       the first render has none. */
    height: max(var(--lotics-input-leading), var(--lotics-choice-list-answer-height));
    font-family: var(--font-sans);
    font-size: var(--lotics-input-text);
    line-height: var(--lotics-input-leading);
    letter-spacing: var(--lotics-input-tracking);
    font-weight: var(--lotics-weight-medium);
    color: var(--lotics-ink-default);
    cursor: text;
  }

  .lotics-choice-list__answer[data-scrollable] {
    overflow-y: auto;
  }

  .lotics-choice-list__answer::placeholder {
    color: var(--lotics-ink-placeholder);
    opacity: 1;
  }
}