/* =====================================================================
   Armando — the three proposed components (HELP-111 stories 14 to 16,
   JHE's decision 3, 22 Oct 2026).

   JHE - Pino's design rev 1 proposed them where the design system has
   nothing that fits: a count on the Checkbox, the LoadStatus line, and a
   single-choice MultiSelect for picking one person. Each is built from
   atoms the system already has (Badge, StateBadge, Button, Avatar,
   MenuButton's option row) and styled from tokens only. design-system/
   is a copy of the artifact and is never edited here: when the artifact
   has them and is re-synced, their rules move into bundle.css and this
   file goes.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Proposed component, to be added to the design system artifact
   (HELP-111, JHE - Pino's design rev 1): Checkbox count, an atom variant
   of Checkbox. A neutral Badge at the card's right edge (neutral-800 on
   neutral-100, tabular figures), scaled with the card's sm, md and lg
   (lg is md zoomed by scale-lg), half-lit at zero; the count is said in
   the card's name and the Badge is aria-hidden.
   ------------------------------------------------------------------ */
.pf-check__count { flex: none; align-self: center; margin-left: auto; padding-left: var(--space-2); }
.pf-check__count .pf-badge { font-variant-numeric: tabular-nums; }
.pf-check--sm .pf-check__count .pf-badge { min-width: 18px; height: 18px; padding: 0 5px; }
.pf-check__count--zero { opacity: .5; }

/* ---------------------------------------------------------------------
   Proposed component, to be added to the design system artifact
   (HELP-111, JHE - Pino's design rev 1): LoadStatus, a molecule. One
   line under the ViewRibbon: a StateBadge glyph and a sentence in body
   neutral-600. reading (state-working, aria-busy), read (state-done),
   stale, 'not live' (state-waiting, with a ghost Button 'Reload').
   role=status, polite. A failed read is the danger InlineAlert, never a
   fourth variant.
   ------------------------------------------------------------------ */
.pf-loadstatus { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-height: 36px; padding: 0 var(--space-6) var(--space-3); font: var(--type-body); color: var(--neutral-600); }
.pf-loadstatus[hidden] { display: none; }
.pf-loadstatus > .pf-state { flex: none; }
.pf-loadstatus__text { min-width: 0; font-variant-numeric: tabular-nums; }
.pf-loadstatus .pf-btn { height: 30px; }
/* On a phone the screen has its own 16 px gutter. */
#app[data-layout="phone"] .pf-loadstatus { min-height: 32px; padding: 0 2px var(--space-2); }

/* ---------------------------------------------------------------------
   Proposed component, to be added to the design system artifact
   (HELP-111, JHE - Pino's design rev 1): MultiSelect single choice, a
   molecule variant of MultiSelect for picking one person. The same 36 px
   field and list (radius-lg, elevation-3, z-dropdown), a search above six
   options, rows of Avatar md and the name in MenuButton's gold
   single-choice look, 'Nobody' first with the empty human Avatar; no
   badges and no 'n selected' foot. role=combobox with a listbox and
   aria-activedescendant; Esc closes it and the focus returns to the
   field. A bottom sheet (radius-2xl) on a phone. In a record's
   AttributeCluster its field is the editable value (pf-attrs__value).
   ------------------------------------------------------------------ */
.pf-ms--single .pf-ms__value { display: inline-flex; flex: 1 1 auto; align-items: center; gap: var(--space-2); min-width: 0; padding-left: 2px; font-weight: 600; }
.pf-ms--single .pf-ms__value > span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-ms--single .pf-ms__value > .pf-muted { font-weight: 500; }
.pf-ms--single .pf-ms__field:focus-visible { outline: none; border-color: var(--brand-gold); box-shadow: var(--focus-ring); }
.pf-ms--single .pf-ms__list { z-index: var(--z-dropdown); min-width: 260px; white-space: normal; text-align: left; max-height: 340px; overflow-y: auto; box-shadow: var(--elevation-3); }
.pf-ms--single .pf-ms__list > .pf-menu__head { display: none; }
.pf-ms--single .pf-opt { gap: var(--space-2-5); }
.pf-ms--single .pf-opt > span:last-child { min-width: 0; overflow-wrap: anywhere; }
/* The row the arrow keys are on (aria-activedescendant): the focus ring, since the focus itself stays in the search or the field. */
.pf-ms--single .pf-opt[data-active="true"] { border-color: var(--brand-gold); box-shadow: var(--focus-ring); }
.pf-ms--single .pf-opt:hover { background: var(--brand-gold-tint); }
.pf-ms--single .pf-opt[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.pf-ms--single .pf-ms__note { padding: var(--space-2) var(--space-2-5); }
/* In AttributeCluster the field is the editable value; the list hangs from it, as AttributeCluster's own menu does. */
.pf-attrs--editable .pf-ms--single { display: inline-flex; width: auto; max-width: 100%; }
.pf-attrs--editable .pf-ms--single .pf-ms__list { top: calc(100% + 6px); left: -6px; right: auto; width: 280px; }
.pf-attrs--editable dd:has(.pf-ms--single) { position: relative; overflow: visible; }
/* The bottom sheet on a phone: the list leaves its field for the foot of the window, its head naming it. */
.pf-ms--single .pf-ms__list.pf-ms__list--sheet {
  position: fixed;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-popover);
  width: auto;
  min-width: 0;
  max-height: 70vh;
  padding: var(--space-2) var(--space-2) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow: var(--elevation-5);
}
.pf-ms--single .pf-ms__list--sheet > .pf-menu__head { display: block; }
.pf-ms--single .pf-ms__list--sheet .pf-opt { min-height: 44px; }
.pf-ms--single .pf-ms__list--sheet .pf-ms__search { min-height: 44px; font-size: 16px; }

/* ---------------------------------------------------------------------
   MultiSelect single choice in a form (HELP-93 story 6, Steven's answer
   (a) of 23 Oct 2026): the optional mark is FormField's, the list lines
   are the design system's pf-ms__line; these are the two additions the
   bundle does not have yet. Invalid: FormField's danger border. Floated:
   in a Dialog on a desktop the list is placed in the top layer, under its
   field or above it (pf-ms__list--up), so the body's scrolling never cuts
   it off. To be added to the design system artifact, then synced.
   ------------------------------------------------------------------ */
.pf-ms--single .pf-ms__field[aria-invalid="true"] { border-color: var(--feedback-danger); }
.pf-ms--single .pf-ms__field[aria-invalid="true"]:focus-visible { border-color: var(--feedback-danger); }
.pf-ms--single .pf-ms__list.pf-ms__list--float { position: fixed; right: auto; min-width: 0; margin-top: 0; z-index: var(--z-popover); }