/* Private notes: the Collab (W) popup, the note composer under a thread,
   and notes shown between messages. */

/* Collab (W) popup on the action bar, opening upward like More */

.collab-menu { position: relative; flex: 1; display: flex; }
.collab-menu > summary { list-style: none; width: 100%; cursor: pointer; }
.collab-menu > summary::-webkit-details-marker { display: none; }
.collab-menu > summary:hover, .collab-menu[open] > summary { background: var(--color-sheet); color: var(--color-accent); }

.collab-menu__menu { top: auto; right: auto; left: 50%; bottom: calc(100% + 16px); translate: -50% 0; }
.collab-menu__menu .popup-menu__row:hover, .collab-menu__menu .popup-menu__row:focus-visible { background: rgb(var(--shade-rgb) / 0.12); outline: none; }

/* The note composer, in the thread's composer frame */

.note-composer {
  width: min(1078px, 100%);
  margin: 24.75px auto 14.85px;
  padding: 33px 55px;
  border-radius: 29.7px;
  background: linear-gradient(135deg, rgb(48 114 221 / 0.1) 0%, rgb(48 114 221 / 0.07) 100%), var(--color-sheet);
  box-shadow: rgb(var(--warm-rgb) / 0.5) 0 0 33px 0;
  scroll-margin-top: 70px;
  font-size: 19.8px;
  line-height: 27.72px;
}

.note-composer__row { display: flex; align-items: flex-start; gap: 11px; }
.avatar--note { --avatar-size: 40px; flex: none; font-size: 14px; box-shadow: var(--color-sheet) 0 0 0 2px; }
.note-composer__main { flex: 1; min-width: 0; }

trix-editor.note-composer__editor {
  min-height: 165px;
  padding: 16.5px 9.9px 9.9px;
  border: 1px solid rgb(48 114 221 / 0.2);
  border-radius: 0 27.5px 27.5px 27.5px;
  background: var(--color-sheet);
  outline: none;
  overflow-wrap: anywhere;
}

trix-editor.note-composer__editor:empty::before { color: rgb(var(--ink-rgb) / 0.6); }
trix-editor.note-composer__editor blockquote { margin: 0; padding-left: 13px; border-left: 1px solid rgb(var(--ink-rgb) / 0.15); }
trix-editor.note-composer__editor a { color: #3072dd; }

.note-composer__help { display: flex; align-items: center; gap: 6px; margin: 11px 0 0; color: var(--color-muted); font-size: 15.4px; line-height: 21.56px; }
.note-composer__help-icon { flex: none; width: 16px; height: 16px; }

.note-composer__errors { margin: 0 0 11px; padding: 8px 14px; border-radius: 12px; background: rgb(220 38 38 / 0.08); color: rgb(153 27 27); font-size: 15.4px; list-style: none; }

.note-composer__buttons { display: flex; align-items: center; margin-top: 16.5px; }

.note-composer__post {
  height: 42px;
  min-width: 118px;
  padding: 5.9px 15.8px;
  border: none;
  border-radius: 33px;
  background: #3072dd;
  color: #fff;
  font: 500 19.8px/27.72px var(--font);
  cursor: pointer;
}

.note-composer__post:focus-visible { outline: none; box-shadow: 0 0 0 2px #a4d2ff; }
.note-composer__post:disabled { opacity: 0.5; cursor: default; }

.note-composer__cancel {
  display: inline-grid;
  place-items: center;
  width: 39.6px;
  height: 39.6px;
  margin-left: auto;
  border: 1px solid rgb(var(--ink-rgb) / 0.15);
  border-radius: 50%;
  background: var(--color-sheet);
  color: var(--color-muted);
}

.note-composer__cancel svg { width: 22px; height: 22px; }
.note-composer__cancel:hover { background: rgb(var(--ink-rgb) / 0.06); color: var(--color-ink); }

/* While writing a note, hide the floating action bar so it can't cover Post note. */
.topic-view:has(.topic-view__composer .note-composer) { padding-bottom: 0; }
.topic-view:has(.topic-view__composer .note-composer) .topic-toolbar { display: none; }

/* Opened on its own (no frame), e.g. after a failed post */
.note-page { width: min(1078px, 100%); margin: 0 auto; }
.note-page__title { margin: 0 0 11px; font-size: 22px; line-height: 27.72px; font-weight: 700; text-align: center; }

/* A note between messages: tinted, with a lock line under the author */

.entry--note {
  border-color: rgb(48 114 221 / 0.12);
  background: linear-gradient(135deg, rgb(48 114 221 / 0.07) 0%, rgb(48 114 221 / 0.05) 100%), var(--color-sheet);
}

.note-entry__verb { color: var(--color-muted); font-size: 17.6px; }
.note-entry__private { display: flex; align-items: center; gap: 5px; padding-top: 1px; color: var(--color-muted); font-size: 15.4px; line-height: 22.88px; }
.note-entry__lock { flex: none; width: 14px; height: 14px; }

.note-entry__delete-form { margin: 0 6px 0 0; }

.note-entry__delete {
  display: inline-grid;
  place-items: center;
  width: 35.2px;
  height: 35.2px;
  margin-top: -5.5px;
  padding: 0;
  border: none;
  border-radius: 33px;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
}

.note-entry__delete svg { width: 20px; height: 20px; }
.note-entry__delete:hover { background: rgb(var(--ink-rgb) / 0.06); color: var(--color-ink); }

/* Collab → Share with…, as the reference's: a 396px popup in place of the
   Work Options menu, and The Roster */
.share-popup { top: auto; right: auto; left: 50%; bottom: calc(100% + 16px); width: 396px; translate: -50% 0; }
.share-popup:empty { display: none; }
.collab-menu:has(.share-popup form) .collab-menu__menu, .collection__options:has(.share-popup form) .collection__options-menu { display: none; }
.collection__options:not([open]) .share-popup { display: none; }
.collab-menu:not([open]) .share-popup { display: none; }
.share-form { margin: 0; font-size: 15.4px; line-height: 21.56px; }
.share-form__label { display: block; margin: 0 0 7.7px; font-weight: 600; }
.share-form__label--spaced { margin-top: 19.25px; }
.share-form__points { margin: 0 0 19.25px; padding-left: 18.48px; }
.share-form__points li { margin-bottom: 4.81px; }
.share-form__who { padding: 0 7.7px; border-radius: 6.6px; background: #fff; color: rgb(35 28 51); }
.share-form__who .recipients { margin: 0; min-height: 45.8px; }
.share-form__notice { display: block; box-sizing: border-box; width: 100%; padding: 7.7px; border: 1px solid transparent; border-radius: 6.6px; background: #fff; color: rgb(35 28 51); font: inherit; resize: vertical; }
.share-form__notice:focus { outline: none; box-shadow: 0 0 0 2px #a4d2ff; }
.share-form__footer { margin: 19.25px 0 0; }
.share-form__submit { width: 100%; height: 32.8px; padding: 4.62px 12.32px; border: 1px solid var(--color-accent); border-radius: 33px; background: var(--color-accent); color: #fff; font: 500 15.4px/21.56px var(--font); cursor: pointer; }

.roster { text-align: center; }
.roster__title { margin: 0 0 6.875px; font-size: 44px; line-height: 44px; font-weight: 700; }
.roster__intro { margin: 0 0 22px; }
.roster__share { position: relative; display: inline-block; margin: 0 0 22px; }
.roster__share > summary { list-style: none; cursor: pointer; }
.roster__share > summary::-webkit-details-marker { display: none; }
.roster__share .share-popup { top: calc(100% + 11px); bottom: auto; z-index: 10; text-align: left; }
.roster__people { text-align: left; }
.roster__person + .roster__person { border-top: 1px solid rgb(var(--shade-rgb) / 0.05); }
.roster__remove { margin: 0; align-self: center; }
.roster__remove-button { padding: 5.28px 14.08px; border: 1px solid rgb(201 36 0); border-radius: 33px; background: rgb(201 36 0); color: #fff; font: 500 17.6px/24.64px var(--font); cursor: pointer; }
.collection__roster-link { display: inline-flex; }
.roster__note { margin: 22px 0 0; color: rgb(var(--ink-rgb) / 0.66); font-size: 17.6px; line-height: 24.64px; text-align: left; }
a.topic-view__people { text-decoration: none; }

@media (max-width: 640px) {
  .note-composer { padding: 22px 16px; border-radius: 22px; }
  .avatar--note { display: none; }
}

/* A list row's note, under the subject as the reference shows it
   (topics/notes/_row): a yellow chip, or the editor the bulk bar's Note opens.
   The row is 68.3px tall; the note starts 2.2px under the byline, lined up
   with the subject. An empty frame takes no room. */
.posting__note { display: block; margin: -9.9px 22px 9.9px 66.5px; }
.posting__note:not(:has(*)) { display: none; }

.posting-note {
  display: inline-block;
  min-width: 0;
  max-width: 808.5px;
  padding: 7.04px 14.08px;
  border-radius: 5.5px;
  background: linear-gradient(135deg, rgb(255 214 10 / 0.35) 0%, rgb(255 214 10 / 0.15) 100%);
  color: var(--color-ink);
  font-size: 17.6px;
  line-height: 24.64px;
  text-decoration: none;
}
.posting-note__text { font-size: 15.4px; line-height: 21.56px; white-space: pre-line; }
.posting-note__edit-icon { display: inline-block; width: 17.6px; height: 17.6px; margin: -2.2px 0 0 4.4px; vertical-align: middle; }

.posting-note--editor { display: block; width: 100%; }
.posting-note__label { display: block; margin: 5.5px 0 0; font-weight: 700; }
.posting-note__error { margin: 5.5px 0 0; color: #8a1f1f; font-size: 15.4px; }
.posting-note__field {
  display: block;
  width: 100%;
  margin: 5.5px 0 11px;
  padding: 3.52px 0;
  border: 0;
  border-bottom: 1px dashed #fff;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  resize: none;
  outline: none;
}
.posting-note__field::placeholder { color: rgb(var(--ink-rgb) / 0.55); }
.posting-note__actions { display: flex; align-items: center; gap: 4px; }
.posting-note__save, .posting-note__cancel {
  height: 32.79px;
  padding: 4.62px 12.32px;
  border: 1px solid var(--color-accent);
  border-radius: 33px;
  font: inherit;
  font-size: 15.4px;
  font-weight: 500;
  line-height: 21.56px;
  cursor: pointer;
}
.posting-note__save { background: var(--color-accent); color: #fff; }
.posting-note__cancel { display: inline-flex; align-items: center; background: transparent; color: var(--color-accent); text-decoration: none; }
.posting-note__delete { display: grid; place-items: center; width: 26px; height: 26px; margin-left: 1px; padding: 0; border: 0; background: none; color: var(--color-ink); cursor: pointer; }
.posting-note__delete-icon { width: 17.6px; height: 17.6px; }