/* Thread extras (Batch 5): rename the thread, the ignored-thread note, and the
   print page. */

/* Rename: the h1 is the summary of a popup. Closed, it looks like the plain h1. */
.topic-title { display: flex; flex-direction: column; align-items: center; max-width: 100%; }
.topic-rename { position: relative; max-width: 100%; }
.topic-rename__summary { display: block; list-style: none; cursor: pointer; outline: none; }
.topic-rename__summary::-webkit-details-marker { display: none; }
.topic-rename__summary::marker { content: ""; }

.topic-rename__popup {
  position: absolute;
  top: calc(100% + 11px);
  left: 50%;
  translate: -50% 0;
  z-index: 4;
  width: 330px;
  min-height: 249px;
  padding: 22px;
  border-radius: 26.4px;
  border: 1px solid var(--popup-line);
  background: var(--popup-surface);
  box-shadow: var(--popup-shadow);
  color: var(--popup-ink);
  text-align: left;
}

.topic-rename__form { display: flex; flex-direction: column; }
.topic-rename__heading { display: block; margin: 0 0 11px; font-size: 17.6px; line-height: 22px; font-weight: 600; color: var(--popup-ink); }

.topic-rename__input {
  width: 286px;
  max-width: 100%;
  height: 44px;
  padding: 8.8px;
  border: 1px solid var(--popup-line);
  border-radius: 6.6px;
  background: var(--popup-tile);
  color: var(--popup-ink);
  font: 17.6px/1.5 var(--font);
  outline: none;
}

.topic-rename__note { margin: 11px 0 14px; font-size: 15.4px; line-height: 20px; color: var(--popup-muted); }

.topic-rename__save {
  width: 286px;
  max-width: 100%;
  height: 37px;
  border: none;
  border-radius: 33px;
  background: var(--color-accent);
  color: #fff;
  font: 500 15.4px/1 var(--font);
  cursor: pointer;
  outline: none;
}

.topic-rename__save:hover { background: #2a63c8; }

/* Shown under the title while the thread is ignored. */
.topic-title__muted {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  color: var(--color-muted);
  font-size: 14px;
}

.topic-title__muted-icon { width: 16px; height: 16px; }

/* Print page: its own layout, no app chrome. */
.print-view { background: var(--color-sheet); color: #000; font: 14px/1.5 var(--font); }
.print-view__sheet { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
.print-view__actions { display: flex; justify-content: space-between; align-items: center; margin: 0 0 24px; }
.print-view__back { color: var(--color-muted); text-decoration: none; }
.print-view__print { padding: 6px 16px; border: 1px solid var(--color-line); border-radius: 33px; background: var(--color-sheet); font: inherit; cursor: pointer; }
.print-view__title { margin: 0 0 24px; font-size: 26px; line-height: 1.2; font-weight: 700; }

.print-view__message { padding: 18px 0; border-top: 1px solid #ccc; break-inside: auto; }
.print-view__headers { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0 0 14px; font-size: 13px; }
.print-view__headers dt { font-weight: 600; }
.print-view__headers dd { margin: 0; overflow-wrap: anywhere; }

.print-view__body { overflow-wrap: anywhere; }
.print-view__body img { max-width: 100%; height: auto; }
.print-view__body blockquote { margin: 0; padding-left: 13px; border-left: 1px solid #ccc; }
.print-view__body table { max-width: 100%; }
.print-view__attachments { margin: 14px 0 0; font-size: 13px; }

@media print {
  .print-view__actions { display: none; }
  .print-view__sheet { max-width: none; padding: 0; }
  .print-view__body a { color: inherit; }
}