/* Sharing page (#290): who has access, sharing through an invite link, and
   recent changes made through shared access. Built from the shared section
   blocks, buttons, form controls, modal and toast. */
.access-intro {
  max-width: 68ch;
  margin: 0 0 var(--space-4);
}

.access-load-error[hidden],
.access-body[hidden] {
  display: none;
}

.access-load-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.access-body {
  display: grid;
  gap: var(--space-4);
}

.access-list,
.access-activity {
  margin: 0;
  padding: 0;
  list-style: none;
}

.access-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line);
}

.access-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.access-item-main {
  flex: 1 1 280px;
  min-width: 0;
}

.access-item-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.access-item-name {
  overflow-wrap: anywhere;
}

.access-item-who,
.access-item-what,
.access-item-when {
  margin: var(--space-1) 0 0;
}

.access-item-when {
  color: var(--color-text-muted);
}

.access-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.access-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  background: var(--color-action-subtle);
  color: var(--color-text-muted);
}

.access-status.is-information { background: var(--color-information-surface); color: var(--color-information); }
.access-status.is-good { background: var(--color-positive-surface); color: var(--color-positive); }
.access-status.is-warn { background: var(--color-warning-surface); color: var(--color-warning); }

.access-apps-note {
  margin: 0 0 var(--space-3);
}

.access-activity-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-line);
}

.access-activity-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.access-activity-who {
  font-weight: 600;
}

/* Share dialog body. */
.access-form {
  display: grid;
  gap: var(--space-4);
}

.access-presets {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.access-presets legend {
  margin-bottom: var(--space-2);
  padding: 0;
}

/* Two by two where the dialog is wide enough, so the form, and the hint
   saying what is still missing, fit without scrolling; one column on a
   phone, where the dialog is a full-screen sheet. */
.access-presets {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.access-presets legend {
  grid-column: 1 / -1;
}

@media (max-width: 767px) {
  .access-presets {
    grid-template-columns: 1fr;
  }
}

.access-preset {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.access-preset:has(input:checked) {
  border-color: var(--color-action);
  background: var(--color-action-subtle);
}

.access-preset input {
  margin-top: 3px;
}

.access-preset-label {
  display: block;
  font-weight: 600;
}

.access-preset-detail {
  display: block;
  margin-top: 2px;
}

.access-form .text-input,
.access-form select,
.access-link .text-input {
  width: 100%;
}

.access-tracking {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.access-tracking[hidden],
.access-form [data-share-scenario][hidden] {
  display: none;
}

.access-link {
  display: grid;
  gap: var(--space-2);
}

.access-link-row {
  display: flex;
  gap: var(--space-2);
}

.access-link-row .text-input {
  flex: 1 1 auto;
  min-width: 0;
}

.account-sharing .btn {
  margin-top: var(--space-2);
}