@layer components {
  .member-panel { display: flex; flex-direction: column; font-size: 13px; }
  .member-panel [hidden] { display: none; }
  .member-panel-title { margin: 0; font-size: 14px; font-weight: 600; }
  /* The search and "Ajouter" bar stays on top of the scrolling desktop panel; the sheet scrolls it away. */
  .member-panel-bar {
    flex: none; display: flex; align-items: center; gap: 6px; padding: 9px 12px;
    border-bottom: 1px solid var(--border); background: var(--background);
  }
  @media (min-width: 1100px) {
    .member-panel-bar { position: sticky; top: 0; z-index: 1; }
  }
  .member-search {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px;
    border: 1px solid var(--input); border-radius: var(--radius-md); color: var(--muted-foreground); background: var(--background);
  }
  .member-search:focus-within { border-color: var(--jx-accent); box-shadow: 0 0 0 3px var(--ring); }
  .member-search svg { flex: none; }
  .member-search input {
    flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent;
    font: inherit; font-size: 13px; color: var(--foreground);
  }
  .member-search input::placeholder { color: var(--muted-foreground); }
  .member-add { flex: none; margin: 0; }
  .member-panel-body { display: flex; flex-direction: column; gap: 14px; padding: 10px 6px 14px; }
  .member-section { display: flex; flex-direction: column; gap: 2px; }
  .member-list { display: flex; flex-direction: column; gap: 2px; }
  .member-section-head { display: flex; align-items: center; gap: 6px; padding-right: 6px; }
  .member-section-title {
    flex: 1; display: flex; align-items: baseline; gap: 6px; min-width: 0; margin: 0; padding: 2px 10px 4px;
    font-size: 13px; font-weight: 400; color: var(--muted-foreground);
  }
  .member-section-title > :first-child { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
  .member-section-head .member-more { align-self: center; }
  .member-row { position: relative; display: flex; gap: 9px; align-items: center; padding: 8px 6px 8px 10px; border-radius: 8px; }
  .member-row-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
  .member-row-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
  .member-row-name strong, .member-row-link { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
  .member-row-link { color: inherit; text-decoration: none; }
  .member-row-link:is(:hover, :focus-visible) { text-decoration: underline; }
  .member-row-name .member-agent-name { font-size: 13px; }
  .member-row-sub { color: var(--muted-foreground); }
  .member-row-sub > * + *::before { content: " · "; }
  .member-more {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
    border: 0; border-radius: 6px; background: transparent; color: var(--muted-foreground); cursor: pointer;
  }
  .member-more:is(:hover, :active, :focus-visible) { background: var(--accent); color: var(--accent-foreground); }
  /* A row just added: a soft accent ground that fades out; reduced motion keeps it as long, then drops it at once. */
  .member-row[data-just-added] { animation: member-just-added 2s ease-out forwards; }
  @keyframes member-just-added { from { background: var(--accent); } to { background: transparent; } }
  @media (prefers-reduced-motion: reduce) {
    .member-row[data-just-added] { animation: member-just-added-still 2s step-end forwards; }
    @keyframes member-just-added-still { from { background: var(--accent); } to { background: transparent; } }
  }
  .member-tag {
    padding: 1px 6px; border-radius: 4px; background: var(--muted); color: var(--muted-foreground);
    font-size: 13px; font-weight: 600;
  }
  .member-tag--you { background: var(--secondary); color: var(--secondary-foreground); }
  .member-row > .badge { flex: none; }
  /* Amber ink a step darker than the badge's, to read on the tinted vacant zone as well. */
  .member-panel .badge--wait { color: light-dark(oklch(0.42 0.11 68), oklch(0.86 0.12 80)); }
  /* A vacant pole awaits a human decision: amber, dashed, doubled by a word. */
  .member-vacant {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 9px; margin: 2px 4px 0; padding: 6px 8px;
    border: 1.5px dashed var(--jx-wait); border-radius: 9px; background: var(--jx-wait-soft);
  }
  .vacant-pole { font-weight: 600; }
  .pole-designate { flex: none; margin: 0; }
  .pole-new { padding: 0 6px; }
  .pole-new > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; }
  .pole-new > summary::-webkit-details-marker { display: none; }
  .pole-new > .form--inline { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 4px 0; }
  .pole-new .input { flex: 1; min-width: 0; height: 32px; font-size: 13px; }
  .pole-rename { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; padding: 0 0 4px 10px; }
  .pole-rename[hidden] { display: none; }
  .pole-rename .input { flex: 1 1 100%; min-width: 0; height: 32px; font-size: 13px; }
  .pole-rename-actions { display: flex; gap: 6px; }
  .member-panel-error { width: 100%; color: var(--jx-no); }
  .member-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px; text-align: center; }
  .member-empty[hidden] { display: none; }
  .member-empty-title { font-size: 14px; font-weight: 600; }
  .member-empty-body { margin-bottom: 8px; color: var(--muted-foreground); }
  .menu-hint { display: block; color: var(--muted-foreground); font-size: 13px; }
  .menu-item[aria-disabled=true] { cursor: default; opacity: .7; }
  /* A member's or an agent's card page, and its edit form, inside the panel. */
  .member-sheet { display: flex; flex-direction: column; gap: 14px; padding: 12px 16px 18px; font-size: 13px; }
  .member-back { display: inline-flex; align-items: center; gap: 2px; align-self: flex-start; color: var(--foreground); text-decoration: none; }
  .member-back:is(:hover, :focus-visible) { text-decoration: underline; }
  .member-sheet-head { display: flex; align-items: center; gap: 10px; }
  .member-sheet-name { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
  .member-sheet-text { margin: 0; line-height: 1.5; }
  .member-facts { display: grid; grid-template-columns: 96px 1fr; gap: 8px 12px; margin: 0; }
  .member-facts dt { color: var(--muted-foreground); }
  .member-facts dd { margin: 0; overflow-wrap: anywhere; }
  .member-briefing-card {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 8px; color: inherit; text-decoration: none;
  }
  .member-briefing-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .member-briefing-title { font-weight: 500; }
  .member-briefing-title .badge { margin-left: 4px; }
  .member-briefing-extract { overflow-wrap: anywhere; }
  .member-sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .member-sheet-actions form, .member-sheet-foot form { margin: 0; }
  .member-sheet-actions .button, .member-sheet-foot .button { display: inline-flex; align-items: center; gap: 6px; }
  .member-sheet-foot { padding-top: 14px; border-top: 1px solid var(--border); }
  .button--danger-outline { color: var(--jx-no); border-color: color-mix(in oklch, var(--jx-no) 40%, transparent); }
  .member-sheet .alert[hidden] { display: none; }
  .member-sheet .field-error { margin: 0; color: var(--jx-no); }
  .member-sheet .input[aria-invalid=true] { border-color: var(--jx-no); }
  .member-agent-avatar--lg { width: 36px; height: 36px; }

  /* The « Ajouter des membres » screen: head, ticked rows, the optional pole, and the buttons kept at the bottom. */
  .member-add-screen { display: flex; flex-direction: column; gap: 12px; min-height: 100%; padding: 12px 16px 16px; font-size: 13px; }
  .member-add-head { display: flex; flex-direction: column; gap: 10px; }
  .member-add-title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
  .member-add-search { flex: none; }
  .member-add-results .person-picker-group-label { color: var(--muted-foreground); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
  .member-add-results .person-row { min-height: 56px; }
  .member-add-results .person-option-name { font-size: 14px; }
  .member-add-pole { padding-top: 4px; }
  /* The screen stands alone, as in the mock-up: no tabs above it, and on a phone the sheet opens to its full height. */
  .settings-panel:has(.member-add-screen) .settings-tabs { display: none; }
  @media (max-width: 1099px) {
    .sheet[data-size]:has(.member-add-screen) { height: 92dvh; }
    /* Transparent, not hidden: the sheet keeps its accessible name. */
    .sheet:has(.member-add-screen) .sheet-title { color: transparent; user-select: none; }
  }
  /* On the desktop the screen fills the panel, so the buttons sit at its bottom edge. */
  @media (min-width: 1100px) {
    .settings-panel:has(.member-add-screen) { min-height: 100%; }
    .settings-panel:has(.member-add-screen) > [role=tabpanel]:not([hidden]) { flex: 1; display: flex; flex-direction: column; }
    .member-add-screen { flex: 1; }
  }
  /* Kept at the bottom of the panel or sheet while the list scrolls. */
  .member-add-foot {
    position: sticky; bottom: 0; display: flex; gap: 8px; margin-top: auto; padding: 12px 0 4px; background: var(--background);
  }
  .member-add-foot .button { flex: 1; justify-content: center; }
  .member-add-foot .button[disabled] { opacity: .55; cursor: default; }

  /* On a phone the ⋯ menus of the panel are bottom sheets: the same menu, anchored to the bottom edge. */
  @media (max-width: 1099px) {
    :is([data-testid=member-menu], [data-testid=pole-menu], [data-testid=agent-menu])[popover] {
      left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-width: none;
      padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0;
    }
    :is([data-testid=member-menu], [data-testid=pole-menu], [data-testid=agent-menu])::backdrop { background: oklch(0 0 0 / .4); }
    :is([data-testid=member-menu], [data-testid=pole-menu], [data-testid=agent-menu]) .menu-title {
      padding: 8px 8px 6px; color: var(--foreground); font-size: 16px; font-weight: 600;
    }
  }

  /* The sheets live inside the panel but read at the page's body size. */
  .member-panel .sheet { font-size: 14px; }
}