/*
 * Per-talk feedback — the attendee form's emotion picker + 1–5 rating scales,
 * and the "your feedback" summary on the talk page. Radio inputs are visually
 * hidden; the checked state styles the label (via :has()).
 */
@layer components {
  /* Recommend? — three choices, always one row. */
  .emotion-options { display: flex; flex-wrap: nowrap; gap: calc(var(--u-pad) / 2); }
  /* u-flex-fill (markup) lets each option share the row and shrink. */
  .emotion-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--u-pad) / 4);
    padding-block: calc(var(--u-pad) * 0.75);
    padding-inline: calc(var(--u-pad) / 2);
    border: var(--border-size-1) solid var(--line);
    border-radius: var(--radius-2);
    cursor: pointer;
  }
  .emotion-option__icon { color: var(--ink-muted); }
  .emotion-option__label { font-size: var(--font-size-0); color: var(--ink-muted); }
  .emotion-option:has(:checked) { border-color: var(--accent); background: var(--accent-soft); }
  .emotion-option:has(:checked) .emotion-option__icon,
  .emotion-option:has(:checked) .emotion-option__label { color: var(--ink); }
  .emotion-option:has(:focus-visible) { outline: var(--border-size-2) solid var(--accent); outline-offset: 2px; }

  /* 1–5 star rating — reversed DOM (5→1) in a row-reverse row reads 1→5 left to
     right; the checked star and every lower one light up (pure CSS). */
  .star-scale {
    display: flex;
    flex-direction: row-reverse;
    gap: calc(var(--u-pad) / 2);
  }
  /* Each star takes an equal share of the row so they fill the width. */
  .star {
    flex: 1;
    display: flex;
    justify-content: center;
    cursor: pointer;
    line-height: 0;
    color: var(--line);
  }
  .star__icon {
    color: inherit;
    inline-size: min(3.25rem, 100%);
    block-size: auto;
    transition: color 0.1s ease;
  }

  /* Fill on selection (the star + its lower siblings) and on hover-preview. */
  .star:has(:checked),
  .star:has(:checked) ~ .star,
  .star-scale:hover .star:hover,
  .star-scale:hover .star:hover ~ .star { color: var(--accent); }
  /* While previewing a hover, don't keep the previously-checked stars lit. */
  .star-scale:hover .star:has(:checked),
  .star-scale:hover .star:has(:checked) ~ .star { color: var(--line); }
  .star-scale:hover .star:hover,
  .star-scale:hover .star:hover ~ .star { color: var(--accent); }
  .star:has(:focus-visible) { outline: var(--border-size-2) solid var(--accent); outline-offset: 2px; border-radius: var(--radius-1); }

  /* The radio-group fieldsets get their box from u-boxed (markup); only the
     legend spacing is bespoke. */
  .feedback-field legend { margin-block-end: calc(var(--u-pad) / 2); padding-inline: calc(var(--u-pad) / 4); }

  /* "Your feedback" summary on the talk page. */
  .feedback-panel {
    padding-block-start: var(--u-pad);
    border-block-start: var(--border-size-1) solid var(--line);
  }
  /* A little extra breathing room before the action button (beats the panel's
     u-stack-half gap). */
  .feedback-panel .button { margin-block-start: var(--u-pad); }
  .feedback-summary { display: flex; flex-direction: column; gap: calc(var(--u-pad) / 4); }
  .feedback-summary__emotion { display: flex; align-items: center; gap: calc(var(--u-pad) / 2); font-weight: var(--font-weight-6); }
  /* Admin: one attendee's comment with their own scores. The box is u-boxed
     (markup); the left-ruled body is u-quote. */
  .fb-comment__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--u-pad) / 2) var(--u-pad);
  }
  .fb-comment__emotion { color: var(--ink-muted); }
  .fb-comment__body { margin: calc(var(--u-pad) / 2) 0 0; color: var(--ink); }

  /* Stacked readouts (the "your feedback" summary) share one grid so the label
     column is uniform and the star groups line up, whatever the label length. */
  .rating-readouts {
    display: grid;
    grid-template-columns: max-content auto;
    gap: calc(var(--u-pad) / 4) calc(var(--u-pad) / 2);
    align-items: center;
  }
  .rating-readouts .rating-readout { display: contents; }

  /* Read-only star readout in the summary: label + five stars, N filled. */
  .rating-readout { display: flex; align-items: center; gap: calc(var(--u-pad) / 2); }
  .rating-readout__stars { display: inline-flex; gap: 2px; line-height: 0; }
  .rating-readout__star { color: var(--line); }
  .rating-readout__star.is-filled { color: var(--accent); }

  .feedback-summary__comment { margin: calc(var(--u-pad) / 4) 0 0; color: var(--ink-muted); }
}