/* The readers: Power Through New (/inbox/unseen) and Read Together
   (/inbox/back_from_snooze), plus "Mark all as seen" on the New-for-you heading. */

/* New-for-you / Back from Snooze heading actions */
.new-heading__actions { position: relative; display: flex; align-items: center; gap: 7.7px; }
.new-heading__mark-all-form { display: contents; }

.new-heading__actions { position: static; }
/* Invisible until pointed at or focused, 115.5px along the heading (as HEY's) */
.new-heading__mark-all { position: absolute; left: 115.5px; top: 50%; translate: 0 -50%; cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.new-heading__mark-all:hover,
.new-heading__mark-all:focus-visible { opacity: 1; }

@media (hover: none) {
  .new-heading__mark-all { display: none; }
}

/* The reader */
.reader { padding-bottom: 0; }

/* The title sits on the page, 25px above the first card (as the reference's) */
.reader__heading { margin-bottom: 25px; padding: 0 16px; text-align: center; }
.reader__title { margin: 0; font-size: 44px; line-height: 44px; font-weight: 700; }

/* Each thread is a card, as the reference's Feed-style sheets: 55px in, the
   subject at the top left, 39.6px between cards */
.reader__topic {
  width: min(1078px, 100%);
  margin: 0 auto 39.6px;
  padding: 55px 55px 12.375px;
  border-radius: 29.7px;
  background: var(--color-sheet);
  box-shadow: rgb(var(--warm-rgb) / 0.5) 0 0 33px 0;
  scroll-margin-top: var(--header-height);
}

.reader__topic:focus { outline: none; }
.reader__topic-header { padding-bottom: 9.25px; }
.reader__topic .entries { margin-top: 25px; }

/* The messages lie flat in the card rather than each in a sheet of its own */
.reader__topic .entry { width: 100%; padding: 0 0 24.75px; border: 0; border-radius: 0; background: none; box-shadow: none; }

/* Long bodies stop at 550px; "See more…" (an outlined pill on a strip of the
   card's white) opens the rest and stays below it as "See less…" */
.reader__topic .entry-expander--clipped,
.reader__topic .entry-expander--expanded { position: relative; padding-bottom: 55px; }
.reader__topic .entry-expander--clipped { max-height: 550px; overflow: hidden; }

/* The strip spans the body; the pill lines up with the text (the body's own inset) */
.entry-expander__bar { position: absolute; inset: auto 0 0; display: flex; padding-block: 12.375px 6.1875px; padding-inline: inherit; background: var(--color-sheet); }
.entry-expander__bar[hidden] { display: none; }

.entry-expander__button {
  padding: 4.62px 12.32px;
  border: 1px solid rgb(var(--ink-rgb) / 0.15);
  border-radius: 33px;
  background: none;
  color: rgb(var(--ink-rgb) / 0.66);
  font: 500 15.4px/21.56px var(--font);
  cursor: pointer;
}

.entry-expander__button:hover, .entry-expander__button:focus-visible { background: var(--color-soft); color: var(--color-ink); outline: none; }

.reader__subject { margin: 0; font-size: 30.8px; line-height: 30.8px; font-weight: 700; overflow-wrap: anywhere; }
.reader__subject a { color: inherit; text-decoration: none; }
.reader__subject a:hover { text-decoration: underline; }
.reader__subject a:focus-visible { outline: none; text-decoration: underline; }

.reader__end { height: 1px; }

/* After the last thread, "All done" (the reference's blue button), with room
   below it for the last thread to scroll past the top and be marked seen. */
.reader__done,
.reader__blank {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 44px 16px;
  text-align: center;
}

.reader__done { min-height: calc(100vh - var(--header-height, 0px)); padding-top: 0; }

.reader__all-done {
  margin-top: 24.75px;
  padding: 5.94px 15.84px;
  border-radius: 33px;
  background: var(--color-accent);
  color: #fff;
  font-size: 19.8px;
  line-height: 27.72px;
  font-weight: 500;
  text-decoration: none;
}

.reader__all-done:hover, .reader__all-done:focus-visible { background: var(--popup-current-ink); color: #fff; outline: none; }

@media (max-width: 640px) {
  .reader__topic { padding: 16px 16px 12px; border-radius: 20px; }
}
.reader__blank { padding-top: 88px; }
.reader__done-icon { width: 44px; height: 44px; }
.reader__done-text { margin: 0; font-size: 22px; line-height: 28px; font-weight: 700; }

.reader__done-link {
  padding: 3.96px 13.2px;
  border: 1px solid var(--popup-line);
  border-radius: 33px;
  color: var(--color-ink);
  font-size: 15.4px;
  font-weight: 500;
  text-decoration: none;
}

.reader__done-link:hover { background: var(--color-soft); color: var(--color-ink); }
.reader__done-link:focus-visible { outline: none; background: var(--color-soft); color: var(--color-ink); }