/* Box shell pages (Declined, Trash, Spam, Sent, Everything, Previously
   Seen): the sheet and posting rows from the Inbox, plus a title icon, a
   description, box pills and a Restore button on Trash and Spam rows. */

.box-sheet__header { position: relative; }

/* As HEY's, every box page sets its title (and icon) on the gradient rule */
.box-sheet__icon { flex: none; width: 33px; height: 33px; margin-right: 11px; vertical-align: -3px; }
/* The reference draws its title icons 28-33px across in a 33px box. Ours
   have margins inside their 24-unit boxes, so each grows until its drawing
   matches; negative margins keep the 33px footprint and the centre. */
.box-sheet__icon--trash { width: 39.6px; height: 39.6px; margin: -3.3px 7.7px -3.3px -3.3px; }
.box-sheet__icon--thumbs_down { width: 41px; height: 41px; margin: -4px 7px -4px -4px; }
.box-sheet__icon--sent, .box-sheet__icon--everything { width: 44px; height: 44px; margin: -5.5px 5.5px -5.5px -5.5px; }
.box-sheet__icon--spam { width: 46.6px; height: 46.6px; margin: -6.8px 4.2px -6.8px -6.8px; }
.box-sheet__divider { position: relative; }
.box-sheet__divider::before { content: ""; position: absolute; inset: 22px 0 auto; height: 1px; background: var(--color-rule); }
.box-sheet__divider span { position: relative; padding: 0 11px; background: var(--color-sheet); }

.box-sheet__description { margin: 6.19px auto 24.75px; max-width: 40em; color: var(--color-ink); font-size: 19.8px; line-height: 27.72px; text-align: center; }

/* Empty Trash: an outlined pill in the sheet's top-right corner */
.box-sheet__header form { position: absolute; top: -33px; right: -33px; }

.box-sheet__empty {
  height: 37px;
  padding: 5.28px 14.08px;
  border: 1px solid #3072dd;
  border-radius: 33px;
  background: transparent;
  color: #3072dd;
  font: inherit;
  font-size: 17.6px;
  line-height: 24.64px;
  font-weight: 500;
  cursor: pointer;
}

.box-sheet__empty:hover { background: rgb(48 114 221 / 0.06); }
.box-sheet__empty:focus-visible { outline: none; box-shadow: 0 0 0 2px #a4d2ff; }

/* Sent: a left caps subheading whose rule runs to the right */
.box-sheet__subheading { margin: 13px 0 12.78px; } /* HEY: 13px under the title, flush left */

.box-sheet__blank { height: 160px; }

/* Rows: the posting partial, with the pill and Restore alongside it */
.box-entry { display: flex; align-items: center; gap: 11px; }

.box-row { position: relative; display: flex; flex: 1; align-items: center; min-width: 0; border-radius: 11px; }
.box-row .posting { flex: 1; min-width: 0; }
.box-row:focus { outline: none; }
.box-row:focus-visible, .box-row:focus-within { box-shadow: 0 0 0 2px #a4d2ff; }
.box-row__open { display: none; }

.box-pill {
  flex: none;
  margin-right: 11px;
  padding: 0.77px 7.7px;
  border: 1px solid var(--color-muted);
  border-radius: 15.4px;
  color: var(--color-muted);
  font-size: 15.4px;
  line-height: 21.56px;
  white-space: nowrap;
}

.box-pill--trash { border-color: rgb(201 36 0 / 0.75); color: rgb(201 36 0 / 0.75); }
.box-pill--spam { border-color: rgb(201 36 0 / 0.5); color: rgb(201 36 0 / 0.75); }

.box-entry form { flex: none; }

.box-entry__restore {
  display: inline-flex;
  align-items: center;
  gap: 5.5px;
  height: 30.8px;
  padding: 3.96px 11px 3.96px 8.8px;
  border: 1px solid var(--popup-line);
  border-radius: 33px;
  background: var(--color-sheet);
  color: var(--color-ink);
  font: inherit;
  font-size: 15.4px;
  font-weight: 500;
  cursor: pointer;
}

.box-entry__restore:hover { background: var(--color-soft); }
.box-entry__restore:focus-visible { outline: none; box-shadow: 0 0 0 2px #a4d2ff; }
.box-entry__restore-icon { width: 16px; height: 16px; }

/* The next 50 rows load when this frame scrolls into view; the link is the fallback */
.box-more { display: flex; justify-content: center; padding: 22px 0; }
.box-more__link { color: var(--color-accent); font-size: 15.4px; font-weight: 500; }

@media (max-width: 640px) {
  .box-sheet__header form { position: static; display: flex; justify-content: center; margin-top: 12.78px; }
  .box-entry { flex-wrap: wrap; }
  .box-pill { display: none; }
}

/* HEY's Trash and Everything use 66px rows; Previously Seen keeps the Inbox's 68 */
.box-postings .posting__body { height: 66px; }
.box-sheet--previously-seen .box-postings .posting__body { height: 68.3px; }

/* Drafts has no description, so its rows keep the gap under the title */
.box-sheet--drafts .box-postings { margin-top: 24.75px; }

/* Drafts' blank slate runs edge to edge under the title */
.drafts-blank { margin: 1.1px -55px 24.75px; border-radius: 0; }
/* Sent Mail has no divider, but the reference keeps the 11px before its icon */
.box-sheet--sent .sheet__title > span { padding-left: 11px; }