/* Kleto Pulse group row (owner ruling 2026-10-29, docs/DESIGN-TASTE.md;
   group-row.js). One .ui-bar above the summary: the shared chip row
   (ui/MANIFEST.md, "Control band") scrolls inside itself with its edge
   fades, selected state and forced colour state; the trailing actions stay
   put at the end. The row has one height from first paint (the band's
   control height), so the group read never moves anything. This sheet maps
   Pulse's tokens onto the layer and places the trailing actions. */

.pgr {
  --ui-ground: var(--bg); --ui-rail: var(--card); --ui-raised: var(--card);
  --ui-hover: var(--accent-tint); --ui-pressed: var(--border);
  --ui-ink: var(--text); --ui-ink-muted: var(--dim); --ui-ink-faint: var(--faint);
  --ui-ink-inverse: var(--bg); --ui-line: var(--border); --ui-line-strong: var(--line-strong);
  --ui-accent: var(--home-accent); --ui-accent-ink: var(--home-on-accent, var(--bg)); --ui-ring-color: var(--home-accent);
  --ui-radius-card: 8px;
  /* The band edge reaches 3:1 on Pulse black and on a card (#646464 is
     3.4:1 on #000 and 3.3:1 on #0a0a0a); the selection is the one accent. */
  --ui-ctl-line: #646464;
  --ui-sel-edge: var(--home-accent);
  --ui-text: 13px; --ui-text-sm: 12px;
  margin: 4px 0 12px;
  min-height: var(--ui-ctl-h, 40px);
}
:root[data-theme="light"] .pgr { --ui-ctl-line: #86868b; }
.pgr__bar { min-height: var(--ui-ctl-h, 40px); }
.pgr .ui-chip { font-size: var(--ui-text); }
.pgr .ui-count { font-family: var(--mono); font-size: 11px; text-align: right; }
.pgr .pgr__chip[aria-checked="true"] { font-weight: 600; }
.pgr .pgr__chip.is-over { outline: 2px solid var(--home-accent); outline-offset: 2px; }
/* Proximity snap with native momentum (devices checklist item 11): a
   flick settles on a chip edge without fighting a long scroll. */
.pgr__chips { scroll-snap-type: x proximity; }
.pgr__chips > .ui-chip { scroll-snap-align: start; }

/* The trailing actions: square icon buttons on a phone (the "All groups"
   label hides under 600px of bar width), quiet everywhere. */
.pgr .ui-chip--action {
  height: var(--ui-ctl-h, 40px); min-height: var(--ui-ctl-h, 40px); padding: 0 12px; gap: 8px;
  border-color: var(--ui-ctl-line); border-radius: var(--ui-ctl-r, 8px); background: var(--card); color: var(--text);
}
.pgr .pgr__new, .pgr .pgr__tools-btn { width: var(--ui-ctl-h, 40px); padding: 0; justify-content: center; }
.pgr .pgr__new { border-style: dashed; }
.pgr .ui-chip--action .ico { width: 16px; height: 16px; flex: none; }
.pgr__tools { position: relative; }
.pgr__tools[hidden], .pgr__all[hidden], .pgr__new[hidden] { display: none; }
.pgr__menu { min-width: 240px; max-width: min(320px, calc(100vw - 32px)); }
.pgr__menu .portfolio__purpose { display: block; padding: 8px 12px 6px; text-transform: none; letter-spacing: 0; }
.pgr__menu .portfolio__purpose strong { display: block; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.pgr__menu .portfolio__purpose p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--dim); white-space: pre-wrap; overflow-wrap: anywhere; }
.pgr__danger { color: var(--down); }

/* The "All groups" list. */
.pgr-list { width: min(380px, 100vw); --ui-sel-edge: var(--home-accent); }
.pgr-list .ui-sheet-head { display: flex; align-items: center; gap: 12px; }
.pgr-list .ui-sheet-head h2 { margin: 0; }
.pgr-list .ui-sheet-head .ui-iconbtn { margin-left: auto; }
.pgr-list__search { margin: 0 0 8px; }
.pgr-list__items { display: flex; flex-direction: column; gap: 2px; max-height: min(52vh, 420px); overflow-y: auto; overscroll-behavior: contain; }
.pgr-list__row .ui-count { font-family: var(--mono); font-size: 12px; text-align: right; }
.pgr-list__row { justify-content: space-between; min-height: 44px; }
.pgr-list__row[aria-checked="true"] { font-weight: 600; }
.pgr-list__none { margin: 8px 4px; color: var(--dim); font-size: 13px; }

/* During a card drag the row sticks under the top bar, so every drop
   target is in reach (sticky keeps its flow space: nothing jumps). */
@media (min-width: 768px) {
  body.is-dragging-project #app #home-groups { position: sticky; top: 72px; z-index: 12; background: var(--bg); }
}
/* The large screen class (2400px and up, zoomed by screens.css): a larger
   text step, so a chip label reads 32px or more at 4K. */
@media (min-width: 2400px) { .pgr { --ui-text: 15px; } .pgr .ui-count { font-size: 13px; } }