/* Labels: the thread's Label… picker, the chips under a thread's title,
   /labels (All Labels) and each label's page. Blank slates reuse the Feed's
   card (feed.css); popups reuse .popup-menu. */

/* The picker in the More menu (B) */

.label-picker__form { position: relative; margin: 0 0 11px; }

.label-picker__input {
  display: block;
  width: 292px;
  max-width: 100%;
  height: 39px;
  padding: 7.7px 66px 7.7px 22px;
  border: none;
  border-radius: 22px;
  background: var(--color-sheet);
  color: var(--color-ink);
  font: 400 15.4px/23.1px var(--font);
}

.label-picker__input:focus, .label-picker__input:focus-visible { outline: none; box-shadow: none; }
.label-picker__input::placeholder { color: rgb(var(--ink-rgb) / 0.5); }

.label-picker__add {
  position: absolute;
  top: 4.5px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
}

.label-picker__add:hover { filter: brightness(1.12); }
.label-picker__add:focus-visible { outline: none; box-shadow: 0 0 0 2px #a4d2ff; }
.label-picker__add-icon { width: 16px; height: 16px; }

.label-picker__list { display: grid; }
.topic-more .label-picker__row { height: 40px; }
.topic-more .label-picker__row[hidden] { display: none; }
.label-picker__row-icon { opacity: 0.55; }
.label-picker__row--on .label-picker__row-icon { opacity: 1; }
.label-picker__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.topic-more .label-picker__row--on { background: rgb(var(--shade-rgb) / 0.12); }
.topic-more .label-picker__row:focus-visible { outline: none; background: rgb(var(--shade-rgb) / 0.12); }

.label-picker__empty, .label-picker__hint { margin: 4.4px 0 2.2px; color: var(--popup-muted); font-size: 15.4px; line-height: 21.56px; text-align: center; }
.label-picker__hint { opacity: 0.75; }

/* Chips under the thread's title */

.topic-labels { display: flex; flex-wrap: wrap; justify-content: center; gap: 6.6px; margin-top: 13.2px; }
.topic-labels[hidden] { display: none; }

.topic-labels__chip {
  display: inline-flex;
  align-items: center;
  gap: 5.5px;
  height: 28px;
  padding: 3.96px 10.56px 3.96px 8.8px;
  border: 1px solid var(--popup-line);
  border-radius: 33px;
  background: var(--color-sheet);
  color: var(--color-ink);
  font-size: 13.2px;
  line-height: 18.48px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.topic-labels__chip:hover { background: var(--color-soft); }
.topic-labels__icon { width: 13px; height: 13px; }

/* All Labels: a narrow sheet with "+ New" in its corner */

.sheet.labels-sheet { width: min(704px, 100%); padding-bottom: 55px; }

.labels-sheet__header { margin-bottom: 29.48px; }
.labels-sheet__title { display: flex; align-items: center; justify-content: center; gap: 9.9px; }
.labels-sheet__title-icon { flex: none; width: 35px; height: 35px; }

.labels-new { position: absolute; top: 22px; right: 22px; z-index: 3; }
.labels-new > summary { list-style: none; }
.labels-new > summary::-webkit-details-marker { display: none; }

.labels-new__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 37px;
  padding: 5.28px 14.08px 5.28px 38.72px;
  border: 1px solid var(--color-accent);
  border-radius: 33px;
  background: transparent;
  color: var(--color-accent);
  font-size: 17.6px;
  line-height: 24.64px;
  font-weight: 500;
  cursor: pointer;
}

.labels-new__pill:hover, .labels-new[open] > .labels-new__pill { background: var(--color-soft); }
.labels-new__pill:focus-visible { outline: none; box-shadow: 0 0 0 2px #a4d2ff; }
/* The plus drawn 16.5px, centred 22px in, as the reference's */
.labels-new__pill-icon { position: absolute; left: 7.83px; width: 28.33px; height: 28.33px; }

/* The ADD A NEW LABEL / rename popup: 330×142 */
.labels-popup { right: 0; width: 330px; padding: 19.25px; box-shadow: none; text-align: left; }
.labels-popup .popup-menu__title { margin-top: 0; }
.labels-popup__form { display: grid; gap: 8.8px; margin: 0; }

.labels-popup__input {
  width: 291px;
  max-width: 100%;
  height: 38px;
  padding: 7.7px 11px;
  border: none;
  border-radius: 6.6px;
  background: var(--color-sheet);
  color: var(--color-ink);
  font: 400 15.4px/22px var(--font);
}

.labels-popup__input:focus, .labels-popup__input:focus-visible { outline: none; box-shadow: none; }

.labels-popup__save {
  width: 100%;
  height: 32px;
  padding: 0 14.08px;
  border: none;
  border-radius: 33px;
  background: var(--color-accent);
  color: #fff;
  font: 500 15.4px/1 var(--font);
  cursor: pointer;
}

.labels-popup__save:hover { filter: brightness(0.96); }

/* Rows */

.labels-list { display: grid; gap: 2.2px; margin-inline: -17.5px; }
.label-row { position: relative; }

.label-row__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 60px;
  padding: 14.52px 92px 14.52px 66px;
  border-radius: 8.8px;
  color: var(--color-ink);
  font-size: 22px;
  line-height: 30.8px;
  font-weight: 500;
  text-decoration: none;
}

.label-row__link:hover { background: rgb(48 114 221 / 0.05); }
.label-row__link:focus-visible { outline: none; box-shadow: 0 0 0 2px #a4d2ff; }
.label-row__icon { position: absolute; left: 22px; width: 24px; height: 24px; color: #3072dd; }
.label-row__name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.label-row__count { flex: none; color: var(--color-muted); font-size: 15.4px; line-height: 21.56px; font-weight: 400; }

.label-row__actions { position: absolute; top: 0; bottom: 0; right: 16.5px; display: flex; align-items: center; gap: 6.6px; }
.label-row:has(.label-row__rename[open]) { z-index: 4; }
.label-row__form { margin: 0; display: contents; }
.label-row__rename { position: relative; }
.label-row__rename > summary { list-style: none; }
.label-row__rename > summary::-webkit-details-marker { display: none; }
.label-row__rename .labels-popup { top: calc(100% + 5.7px); right: -15.4px; }

.label-row__button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
}

.label-row__button:hover, .label-row__rename[open] > .label-row__button { background: rgb(var(--ink-rgb) / 0.06); color: var(--color-ink); }
.label-row__button:focus-visible { outline: none; box-shadow: 0 0 0 2px #a4d2ff; }
.label-row__button-icon { width: 17px; height: 17px; }

.labels-blank { min-height: 480px; margin: 0 -55px -55px; border-radius: 0 0 29.7px 29.7px; }

/* A label's page */

.label-sheet__header { margin-bottom: 12.78px; }
.label-sheet__description { margin: 12.78px 0 0; color: var(--color-muted); font-size: 19.8px; line-height: 27.72px; text-align: center; }
.label-postings { margin: 0 -55px; }
.label-postings .posting { padding: 0 55px; }
.labels-blank--all { min-height: 715px; margin: 0 -55px 24.75px; border-radius: 0; }
.label-sheet .labels-blank { min-height: 715px; margin-bottom: 0; border-radius: 0; }

@media (max-width: 640px) {
  .sheet.labels-sheet { padding: 33px 16px; }
  .labels-new { position: static; display: flex; justify-content: center; margin-top: 16px; }
  .labels-new .labels-popup { right: auto; left: 50%; translate: -50% 0; width: min(330px, calc(100vw - 32px)); }
  .label-row__link { padding-left: 50px; font-size: 18px; }
  .label-row__icon { left: 14px; }
  .labels-blank, .label-postings { margin-inline: -16px; }
  .label-postings .posting { padding-inline: 16px; }
}