/* The thread's More menu (forward, move, trash, thread options) and the
   banner on a trashed or spam thread. */

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

/* Centred on the More tile (3px left, as HEY's) and 6px above it */
.topic-more__menu {
  top: auto;
  right: auto;
  left: 50%;
  bottom: calc(100% + 6px);
  translate: calc(-50% - 3px) 0;
  max-height: 525px;
  overflow-y: auto;
}

.topic-more__menu[hidden] { display: none; }
.topic-more__tiles { row-gap: 10px; margin: 4.4px; }
.topic-more .popup-menu__tile { margin: 1px 0; }
.topic-more__menu > .popup-menu__title { margin: 29px 0 6.74px 8.89px; line-height: 16.17px; }
.topic-more .popup-menu__row { margin: 1px 0; }
.topic-more__form { margin: 0; display: contents; }

.topic-more .popup-menu__tile { position: relative; width: 100%; border: none; font: inherit; color: var(--popup-ink); cursor: pointer; background: var(--popup-tile); border: 1px solid var(--popup-line); }
.topic-more .popup-menu__tile:hover { background: var(--color-soft); }
.topic-more .popup-menu__tile--current { border-color: transparent; background: var(--popup-current); color: var(--popup-current-ink); }

.topic-more .popup-menu__row { width: 100%; border: none; background: none; font: inherit; text-align: left; cursor: pointer; }
.topic-more .popup-menu__row:hover { background: rgb(var(--shade-rgb) / 0.12); }

/* The recycling box at the menu's foot, measured in the reference: yellow
   "Recycling in 2 years" over the switch, mint "Keep this thread" once on */
/* Measured from the reference (2026-10-18): a 2px border; the title yellow
   while recycling is coming, mint once kept. Those are for its blue menu, so
   our dark menus use them as they are and our light ones use readable
   equivalents (an amber and a green, both above 4.5:1 on white). */
:root { --recycling-alert: rgb(161 98 7); --recycling-kept: #1a7f37; }
:root[data-appearance="dark"] { --recycling-alert: rgb(255 214 10); --recycling-kept: rgb(157 255 236); }
@media (prefers-color-scheme: dark) { :root[data-appearance="system"] { --recycling-alert: rgb(255 214 10); --recycling-kept: rgb(157 255 236); } }
.topic-more__recycling { margin: 15.4px 0 0; padding: 10.164px; border: 2px solid var(--popup-line); border-radius: 8.8px; }
.topic-more__recycling-title { margin: 0 0 6.7375px; color: var(--recycling-kept); font-size: 13.475px; line-height: 16.17px; font-weight: 600; text-transform: uppercase; }
.topic-more__recycling--alert .topic-more__recycling-title { color: var(--recycling-alert); }
.topic-more__recycling-form { margin: 0; }
.topic-more__recycling-switch { display: flex; align-items: center; height: 33px; }
.topic-more__recycling-label { margin-left: 9.625px; }
.topic-more__recycling .switch__container { background: rgb(35 28 51 / 0.15); }
.topic-more__recycling .switch__button { background: #fff; }

.topic-more__key {
  position: absolute;
  top: 6.5px;
  right: 8px;
  font: 700 12px/1 SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  opacity: 0.6;
}

.topic-more__key--row { top: 50%; translate: 0 -50%; }

.topic-more__move-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4.4px; }
.topic-more__move .popup-menu__tile { height: 86px; padding: 0 6px 13.86px; }

.topic-view__state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(1078px, 100%);
  margin: 0 auto 16px;
  padding: 10px 16px;
  border-radius: 99px;
  background: rgb(201 36 0 / 0.08);
  color: rgb(140 25 0);
  font-size: 15.4px;
}

.topic-view__restore-form { margin: 0; }

.topic-view__restore {
  padding: 3px 14px;
  border: 1px solid currentColor;
  border-radius: 33px;
  background: var(--color-sheet);
  color: inherit;
  font: 500 15.4px/1.4 var(--font);
  cursor: pointer;
}

/* Buttons that sit in a popup menu as rows (Report spam under a message's •••) */
.popup-menu__form { margin: 0; display: contents; }
.popup-menu__row--button { width: 100%; border: none; background: none; font: inherit; text-align: left; cursor: pointer; }
.popup-menu__row--button:hover { background: rgb(var(--shade-rgb) / 0.12); }