/*
  Shared notebooks.

  A file of its own rather than more rules in app.css: the Content Security Policy
  is style-src 'self', so nothing here can be a style attribute, and a feature that
  the free and pro tiers never see should not be weight in the stylesheet everybody
  downloads on first paint.

  Everything below leans on the tokens in tokens.css. There is not one raw colour
  or one hand-picked pixel spacing, so the panel follows the theme without knowing
  anything about it.
*/

/* ---------------------------------------------------------------- the panel */

.share-panel {
  width: min(520px, calc(100vw - var(--space-8)));
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-md);
}

.share-panel::backdrop {
  background: var(--scrim);
}

.share-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.share-title {
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  min-width: 0;
  overflow-wrap: anywhere;
}

.share-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.share-close:hover {
  background: var(--surface-hover);
  color: var(--ink);
}

.share-lede {
  margin-top: var(--space-2);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

/* ---------------------------------------------------------------- not on this tier */

.share-locked {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--text-sm);
}

.share-locked-note {
  margin-top: var(--space-2);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
}

/* ---------------------------------------------------------------- adding somebody */

/*
  The address takes the room it needs and the other two take what they need,
  because an email address is the only field here whose length is unpredictable.
*/
.share-add {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.share-field-email {
  flex: 1 1 auto;
  min-width: 0;
}

.share-field-role {
  flex: 0 0 auto;
}

.share-submit {
  flex: none;
}

@media (max-width: 480px) {
  .share-add {
    flex-direction: column;
    align-items: stretch;
  }

  .share-submit {
    width: 100%;
  }
}

.share-message {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.share-message-error {
  color: var(--danger);
}

/* ---------------------------------------------------------------- who has access */

.share-list-head {
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.share-empty {
  margin-top: var(--space-2);
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.share-list {
  margin-top: var(--space-2);
  list-style: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.share-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.share-row:first-child {
  border-top: none;
}

.share-who {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.share-role {
  flex: none;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-xs);
}

/*
  Revoking is destructive, so the control reads as destructive on hover rather
  than sitting there in the same grey as everything else. It is always visible:
  hiding it until hover would be a keyboard trap on a list of people.
*/
.share-revoke {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.share-revoke:hover:not(:disabled) {
  background: var(--danger-soft);
  color: var(--danger);
}

.share-revoke:disabled {
  cursor: default;
  opacity: 0.5;
}

/* ---------------------------------------------------------------- the sidebar affordance */

/*
  Sits beside the delete control on a notebook row and behaves the same way:
  hidden until the row is hovered or focused on a pointer, always there on touch,
  where there is no hover to reveal it.
*/
.share-icon {
  display: block;
  flex: none;
}

.row-share {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: var(--space-1);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.nav-row-wrap:hover .row-share,
.nav-row-wrap:focus-within .row-share {
  opacity: 1;
}

.row-share:hover {
  color: var(--primary);
}

@media (pointer: coarse) {
  .row-share {
    opacity: 1;
  }
}

/*
  A notebook somebody else owns. Says so quietly, because the person only needs
  telling once why they cannot rename it.
*/
.shared-badge {
  flex: none;
  margin-right: var(--space-2);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--ink-faint);
  font-size: var(--text-2xs);
  line-height: 1.6;
}