@layer components {
  /* The row under the document's meta: « Accès » (or its pill), then the gestures; the waiting line takes its own row. */
  .document-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .document-actions .document-gestures { margin: 0; }

  .document-access-button {
    display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 10px;
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); color: var(--foreground);
    font-size: 13px; text-decoration: none;
  }
  .document-access-button:is(:hover, :active) { background: var(--accent); }
  .document-access-button:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: 2px; }
  .document-access-key { color: var(--muted-foreground); }
  .document-access-button b { font-weight: 600; }

  .document-access-pill {
    display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted-foreground); font-size: 13px;
  }
  html[data-offline-copy] .document-access-button { display: none; }

  .document-access-dialog .muted { margin: 0; }
  .document-access-dialog h2 { margin: 0; }
  .document-access-choice { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
  .document-access-choice legend {
    display: flex; align-items: center; gap: 6px; padding: 0; margin-bottom: 8px; font-weight: 600;
  }
  .document-access-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .document-access-option {
    position: relative; display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); cursor: pointer;
  }
  .document-access-option input { position: absolute; opacity: 0; pointer-events: none; }
  .document-access-dot {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 16px;
    margin-top: 2px; border: 1.5px solid var(--input); border-radius: 50%;
  }
  .document-access-option:has(input:checked) { border-color: var(--jx-accent); background: var(--jx-accent-soft); }
  .document-access-option input:checked ~ .document-access-dot { border-color: var(--jx-accent); }
  .document-access-option input:checked ~ .document-access-dot::after {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--jx-accent);
  }
  .document-access-option:has(input:focus-visible) { outline: 2px solid var(--jx-accent); outline-offset: 2px; }
  .document-access-option:has(input:disabled) { cursor: not-allowed; }
  .document-access-option:has(input:disabled):not(:has(input:checked)) { opacity: 0.6; }
  .document-access-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .document-access-text b { display: flex; align-items: center; gap: 6px; font-weight: 600; }
  .document-access-text span { color: var(--muted-foreground); }
  .document-access-summary { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted-foreground); }
  .document-access-error { margin: 0; color: var(--destructive); font-weight: 500; }
  .document-access-error:empty { display: none; }
  .document-access-locked {
    display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid var(--border);
    border-radius: var(--radius-lg); background: var(--surface); color: var(--muted-foreground);
  }

  /* « Nouveau document »: both settings on one line, « Changer » opens the choices under it. */
  .document-new-access { display: flex; flex-direction: column; gap: 12px; margin: 0; color: var(--muted-foreground); }
  p.document-new-access { flex-direction: row; align-items: flex-start; gap: 8px; }
  .document-new-access summary {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 32px; cursor: pointer;
  }
  .document-new-access summary:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: 2px; }
  .document-new-access-change { color: var(--foreground); font-weight: 500; text-decoration: underline; }
  .document-new-access summary:is(:hover, :active) .document-new-access-change { color: var(--jx-accent); }
  .document-new-access[open] summary { margin-bottom: 12px; }

  /* Phones: « Accès » stays in the header, a finger tall; the options stack and each one is a whole target. */
  @media (max-width: 1099px) {
    .document-access-button { min-height: var(--tap); }
    .document-new-access summary { min-height: var(--tap); }
  }
  @media (max-width: 767px) {
    .document-access-options { grid-template-columns: 1fr; }
    .document-access-option { min-height: var(--tap); }
  }
}