/* =============================================================================
   feedback.css — the confirm page and the empty state (3.3 stage 6).

   Separate from forms.css on the same grounds as select.css, date.css and
   choice.css: that file describes the field frame and the text-entry controls,
   and neither of these is a field. Both are page-level furniture.

   NOTE WHAT IS NOT HERE: a dialog, a backdrop, a scrim, a spinner and a skeleton.
   The confirm is a PAGE by decision (see ConfirmPanel's own remarks), and nothing
   on a static-SSR page loads in a way a spinner improves — a form post is the
   browser's own progress bar, and an island degrades to a real control rather
   than to a spinner. Building either would be the switch-and-button-sizes
   mistake: shipped, unused, then wrong when a real consumer finally arrives.
   ========================================================================== */

/* -- confirm page -------------------------------------------------------------
   Bounded rather than full-bleed. This is one question and two answers, and a
   question set in a 92rem measure reads as a paragraph nobody finishes. */

.hrc-confirm {
  display: flex;
  flex-direction: column;
  gap: var(--hrc-space-md);

  /* min-inline-size: 0 so a long unbroken subject shrinks the panel's CONTENT
     rather than pushing the page sideways — the responsive contract's rule that
     wide content scrolls inside its own container, never by moving the page. */
  min-inline-size: 0;
  max-inline-size: 44rem;

  padding: var(--hrc-space-lg);
  border: 1px solid var(--hrc-border);
  border-radius: var(--hrc-radius);
  background-color: var(--hrc-surface);
  color: var(--hrc-ink);
}

.hrc-confirm__title {
  margin: 0;
  font-size: var(--hrc-text-xl);
  font-weight: var(--hrc-weight-semibold);
  line-height: var(--hrc-leading-tight);
}

/* The record being acted on. Larger than the body text because it is the one
   thing the user must read before deciding, and `overflow-wrap` because a name
   or a code with no spaces in it must break rather than escape the panel.

   SHRINK-WRAPPED, for the same reason as .hrc-alert__subject and found the same
   way — by eye, in the container. A full-width block carrying dir="auto" aligns
   to its OWN direction, so an Arabic name sat at the far right of the panel
   while the question sat at the left, and the two stopped reading as one
   thought. A Latin name would have looked fine, which is exactly why no test
   caught it: the rendering was correct, just not right. */
.hrc-confirm__subject {
  margin: 0;
  inline-size: fit-content;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  font-size: var(--hrc-text-lg);
  font-weight: var(--hrc-weight-medium);
  line-height: var(--hrc-leading-tight);
  color: var(--hrc-ink);
}

.hrc-confirm__body {
  font-size: var(--hrc-density-text);
  line-height: var(--hrc-leading);
  color: var(--hrc-ink-muted);
}

.hrc-confirm__body p {
  margin: 0 0 var(--hrc-space-xs) 0;
}

.hrc-confirm__body p:last-child {
  margin-block-end: 0;
}

/* Wraps rather than scrolls, and that is the whole 360px story for this panel:
   at a narrow width the two actions stack, and because Cancel is a link styled
   as a button they stack to the same height. */
.hrc-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hrc-space-xs);
  margin-block-start: var(--hrc-space-xs);
}

/* -- empty state --------------------------------------------------------------
   Centred, quiet, and never the same words for "nothing here yet" as for
   "nothing matches your filter" — see EmptyState's remarks. */

.hrc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hrc-space-xs);
  min-inline-size: 0;
  padding: var(--hrc-space-xl) var(--hrc-space-md);
  border: 1px dashed var(--hrc-border-strong);
  border-radius: var(--hrc-radius);
  background-color: var(--hrc-surface-raised);
  text-align: center;
}

/* Dashed rather than solid, deliberately: a solid panel reads as content that
   loaded, and the point of this box is that there is nothing in it. */

.hrc-empty__title {
  margin: 0;
  font-size: var(--hrc-text-lg);
  font-weight: var(--hrc-weight-semibold);
  line-height: var(--hrc-leading-tight);
  color: var(--hrc-ink);
}

.hrc-empty__body {
  max-inline-size: 36rem;
  font-size: var(--hrc-density-text);
  line-height: var(--hrc-leading);
  color: var(--hrc-ink-muted);
}

.hrc-empty__body p {
  margin: 0;
}

.hrc-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--hrc-space-xs);
  margin-block-start: var(--hrc-space-xs);
}