/* Stage (Mailroom): the sorting room, on the dark brown of Mailroom's own dark theme.
   Shared stage geometry first (the same values as every stage file), then Mailroom's drawing.
   Continuous motion is transform and opacity only. Everything is finished without the script. */

/* ---------------------------------------------------------------- the shared stage (scoped to Mailroom so the other stages keep their own ink) */
.st-stage.st-mailroom {
  --st-ink: #F5F2EC;
  --st-hair: rgb(245 242 236 / .22);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-width: 0;
  border-radius: 6px;
  background: var(--st-ground);
  color: var(--st-ink);
  overflow: hidden;
}
.st-stage.st-mailroom > figure { position: relative; z-index: 1; }
.st-stage.st-mailroom > [aria-hidden="true"] { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.st-mailroom .st-mark {
  position: absolute;
  top: 28px;
  left: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  color: var(--st-ink);
  white-space: nowrap;
}
/* The mark is a paragraph; page rules for paragraphs (ink, measure) must not reach it. */
.st-stage.st-mailroom .st-mark { max-width: none !important; color: var(--st-ink) !important; }
.st-mailroom .st-mark-icon { display: block; width: 28px !important; height: 28px !important; max-width: none; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
/* Round 9: Newsreader only at 28 px and up, so the stage name is Manrope 600. */
.st-mailroom .st-mark-name { font: 600 18px/1 Manrope, Arial, sans-serif !important; letter-spacing: -.01em; }
.st-mailroom .st-mark-by {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 2px;
  font: 500 12px/1 Manrope, Arial, sans-serif !important;
  color: #CBD0CC;
}
.st-mailroom .st-mark-by img { display: block; width: auto !important; height: 9px !important; max-width: none; margin: 0 !important; border: 0 !important; box-shadow: none !important; }
@media (max-width: 700px) {
  .st-mailroom .st-mark { top: 20px; left: 20px; }
}

/* ---------------------------------------------------------------- Mailroom: the ground and the frame on it */
/* The ground is Mailroom's own dark page (--mr-page-solid, dark theme) and the ink its dark-theme page ink. */
.st-stage.st-mailroom {
  --st-ground: #191612;   /* judges, 15 Oct: a warm near-black, toned down from #1D1309 (Jordan: too much brown) */
  --st-ink: #F2E9DC;
  --st-hair: rgb(242 233 220 / .2);
  --st-ease: cubic-bezier(.16, 1, .3, 1);
}
.st-mailroom .st-mark-by { color: #CBD0CC; }   /* one "by SOLVA" ink on every dark stage: 11.69 to 1 here */
.st-mailroom > figure { width: 100% !important; max-width: none !important; margin: 0 !important; }

/* The caption keeps its markup and behaviour; only its ink changes for the ground. The caption's "Mailroom by SOLVA"
   now lives in the mark, so the caption keeps it for screen readers only. */
.st-mailroom figure > figcaption { background: none !important; box-shadow: none !important; }
.st-mailroom figure > figcaption,
.st-mailroom figure > figcaption :is(span, a, button) { color: rgb(242 233 220 / .78) !important; }
.st-mailroom figure > figcaption :is(.cm-inspect, .cm-play) { border-color: rgb(242 233 220 / .3) !important; background: none !important; }
.st-mailroom figure > figcaption .p9-credit {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important;
}
.st-mailroom .np-screen-open { border-color: rgb(242 233 220 / .16) !important; }

/* The stage takes the column: the home pair box holds only the stage now. */
body #lx-lights .ws-mail-pair.st-mailroom-pair { display: block !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
/* On a phone the screen keeps its own width, centred on the stage; the caption and its buttons run to the stage's
   20 px edge, in line with the mark. */
@media (max-width: 760px) { .st-mailroom-home > figure > a { max-width: 248px !important; margin-left: auto !important; margin-right: auto !important; } }
@media (max-width: 700px) { :is(.st-mailroom-page, .st-mailroom-work) > figure > a { max-width: 248px !important; margin-left: auto !important; margin-right: auto !important; } }

/* ---------------------------------------------------------------- the list */
/* Every row is placed by transform only: --y on wide screens (written by the build for the sorted rest, then by the
   script), a group column on narrow ones. Ink from the contrast judge: names #B0A698 (7.62), subjects #A39A8B (6.57),
   counts #F5F2EC. Text is never under 12 px. */
.st-mailroom-art {
  container-type: size;
  /* compact (phone, tablet, the Our work card): three groups in a row above the screen, each with its newest card */
  --pad: 32px;
  --gap: 12px;
  --w: calc((100cqw - 2 * var(--pad) - 2 * var(--gap)) / 3);
  --L: 74px;
  --cy: calc(var(--L) + 28px);
  --sy: 176px;
}
.st-mailroom-list { position: absolute; inset: 0; }
.st-mailroom-head, .st-mailroom-card {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  backface-visibility: hidden;
}
.st-mailroom-card {
  z-index: 2;
  display: block;
  width: var(--w);
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgb(242 233 220 / .16);
  border-radius: 6px;
  background: var(--st-ground);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 400 12px/30px Manrope, Arial, sans-serif !important;
  letter-spacing: 0;
  color: #A39A8B;
  opacity: 1;
}
.st-mailroom-card b { font-weight: 600 !important; color: #B0A698; }
.st-mailroom-card > span { display: none; margin-left: 6px; }
/* Every card has one fixed place; an arrival waits 24 px to the right of its own slot, unseen, and slides in. */
.st-mailroom-card { transform: translate(calc(var(--gx) + var(--dx, 0px)), var(--cy)); }
.st-mailroom-card[data-st-mailroom-pile="reply"] { --gx: var(--pad); }
.st-mailroom-card[data-st-mailroom-pile="when"] { --gx: calc(var(--pad) + var(--w) + var(--gap)); }
.st-mailroom-card[data-st-mailroom-pile="ignored"] { --gx: calc(var(--pad) + 2 * (var(--w) + var(--gap))); }
.st-mailroom-card[data-st-mailroom-extra]:not([data-st-mailroom-in]) { --dx: 24px; }
/* Narrow: one card per group, the newest. The one it replaces has faded before it slides in: never two at once. */
.st-mailroom-card:not([data-st-mailroom-top]) { opacity: 0; }

.st-mailroom-head {
  width: var(--w);
  height: 22px;
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translate(var(--hx), var(--L));
}
.st-mailroom-head[data-st-mailroom-head="reply"] { --hx: var(--pad); }
.st-mailroom-head[data-st-mailroom-head="when"] { --hx: calc(var(--pad) + var(--w) + var(--gap)); }
.st-mailroom-head[data-st-mailroom-head="ignored"] { --hx: calc(var(--pad) + 2 * (var(--w) + var(--gap))); }
/* The carbon anchor: the header row of the group that last received a card fills carbon, its words chalk. */
.st-mailroom-anchor {
  position: absolute;
  inset: -5px -8px;
  border-radius: 4px;
  background: #0B0D0E;
  opacity: 0;
}
.st-mailroom-head[data-st-mailroom-on] .st-mailroom-anchor { opacity: 1; }
.st-mailroom-head[data-st-mailroom-on] .st-mailroom-label { color: #F5F2EC; }
.st-mailroom-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
  font: 600 12px/16px Manrope, Arial, sans-serif !important;
  letter-spacing: 0;
  color: #D9D0C2;
}
.st-mailroom-glyph { flex: none; display: block; box-sizing: border-box; }
.st-mailroom-glyph-reply { width: 6px; height: 6px; margin: 0 1px; background: currentColor; transform: rotate(45deg); }
.st-mailroom-glyph-when { width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; }
.st-mailroom-glyph-ignored { width: 8px; height: 1px; background: currentColor; }
/* The count: every figure it will show is laid in the same place; the current one is opaque (a cross-fade). */
.st-mailroom-count {
  position: relative;
  display: inline-grid;
  flex: none;
  font: 600 12px/16px Manrope, Arial, sans-serif !important;
  font-variant-numeric: tabular-nums;
  color: #F5F2EC;
}
.st-mailroom-count > span { grid-area: 1 / 1; opacity: 0; }
.st-mailroom-count[data-st-mailroom-n="0"] > span:nth-child(1),
.st-mailroom-count[data-st-mailroom-n="1"] > span:nth-child(2),
.st-mailroom-count[data-st-mailroom-n="2"] > span:nth-child(3),
.st-mailroom-count[data-st-mailroom-n="3"] > span:nth-child(4),
.st-mailroom-count[data-st-mailroom-n="4"] > span:nth-child(5) { opacity: 1; }

/* A narrow row of groups keeps Mailroom's words whole: the marks before them go first. */
@container (max-width: 419px) {
  .st-mailroom-glyph { display: none; }
  .st-mailroom-head { gap: 4px; }
}
@container (min-width: 700px) {
  .st-mailroom-card > span { display: inline; }
}

/* ---------------------------------------------------------------- compact sizes */
.st-mailroom { padding: 160px 32px 28px; }
@media (max-width: 700px) {
  .st-mailroom { padding: 146px 20px 20px; }
  .st-mailroom-art { --pad: 20px; --gap: 10px; --L: 62px; --sy: 162px; }
  .st-mailroom-card { padding: 0 8px; }
}
@media (max-width: 340px) {
  .st-mailroom { padding-top: 162px; }
  .st-mailroom-art { --cy: calc(var(--L) + 44px); --sy: 178px; }
  .st-mailroom-head { flex-wrap: wrap; row-gap: 2px; height: 36px; align-content: flex-start; }
  .st-mailroom-count { flex-basis: 100%; }
}

/* The Mailroom page: the text that sat beside the screen moves above the stage, so the stage can take the column. */
@media (min-width: 701px) {
  body .np-proof.st-mailroom-proof { display: block !important; }
  body .np-proof.st-mailroom-proof > .np-copy { max-width: 640px; margin-bottom: 36px; }
}

/* ---------------------------------------------------------------- wide: the home section and the Mailroom page, from 1180 px */
@media (min-width: 1180px) {
  body .np-proof.st-mailroom-proof > .np-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    column-gap: 64px;
    align-items: end;
    max-width: none !important;
    margin-bottom: 48px;
  }
  body .np-proof.st-mailroom-proof > .np-copy > * { margin: 0 !important; }
  .st-mailroom-wide { min-height: 632px; padding: 96px 72px 64px 380px; }
  .st-mailroom-wide .st-mark { top: 34px; left: 40px; }
  /* The list: a column 300 px wide at the left, rows 38 px apart, cards indented under their group. Each group ends
     with the empty slot its arrival lands in, which at rest reads as the space before the next group. */
  .st-mailroom-wide .st-mailroom-list { inset: 96px auto auto 40px; width: 300px; }
  .st-mailroom-wide .st-mailroom-art .st-mailroom-head {
    width: 300px;
    height: 30px;
    justify-content: space-between;
    padding: 0 2px;
    transform: translateY(var(--y));
  }
  .st-mailroom-wide .st-mailroom-art .st-mailroom-anchor { inset: 0 -10px; }
  .st-mailroom-wide .st-mailroom-art .st-mailroom-count { font-size: 16px !important; line-height: 20px !important; }
  .st-mailroom-wide .st-mailroom-art .st-mailroom-card {
    width: 284px;
    height: 30px;
    line-height: 28px;
    left: 16px;
    transform: translate(var(--dx, 0px), var(--y));
  }
  .st-mailroom-wide .st-mailroom-art .st-mailroom-card:not([data-st-mailroom-extra]),
  .st-mailroom-wide .st-mailroom-art .st-mailroom-card[data-st-mailroom-in] { opacity: 1; }
  .st-mailroom-wide .st-mailroom-art .st-mailroom-card[data-st-mailroom-extra]:not([data-st-mailroom-in]) { opacity: 0; }
  .st-mailroom-wide .st-mailroom-art .st-mailroom-card > span { display: inline; }
  /* The pair, decided 15 Oct: no overlap. The phone stands BESIDE the desktop window, 28 px away, bottoms aligned, both
     inside the stage's content box (the figure); the window takes what the phone leaves. The phone's screen has the
     recording's own shape (780 x 1688), shown whole (contain), with concentric corners: bezel 22 px, padding 5 px,
     screen 17 px. */
  .st-mailroom-wide .co-pair.co-pair {
    grid-template-columns: minmax(0, 1fr) 22% !important;
    column-gap: 28px;
    align-items: end;
  }
  .st-mailroom-wide .co-pair.co-pair > .co-desk { grid-column: 1 !important; grid-row: 1; margin-bottom: 0 !important; }
  .st-mailroom-wide .co-pair.co-pair > .co-phone {
    grid-column: 2 !important;
    grid-row: 1;
    aspect-ratio: auto;
    height: auto;
    transform: none;
  }
  .st-mailroom-wide .co-pair.co-pair > .co-phone > img {
    position: static;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 780 / 1688;
    object-fit: contain;
  }
  .st-mailroom-wide .co-pair.co-pair > .co-phone > :is(img, video) { border-radius: 17px !important; }
  .st-mailroom-wide .co-pair.co-pair > .co-phone > video { object-fit: contain; }
  .st-mailroom-wide .co-pair.co-pair > figcaption { grid-column: 1 / -1 !important; }
  /* Home only (Mark and Jordan, 15 Oct meeting: "make the screen bigger... come down more, have it centred"): the
     screens take more of the panel and sit in its middle, not against its top. */
  .st-mailroom-home.st-mailroom-wide { padding: 80px 40px 56px 372px; display: flex; flex-direction: column; justify-content: center; }
  .st-mailroom-home.st-mailroom-wide .co-pair.co-pair { grid-template-columns: minmax(0, 1fr) 20% !important; }
}

/* ---------------------------------------------------------------- motion */
.st-mailroom.st-mailroom-live :is(.st-mailroom-card, .st-mailroom-head) { transition: transform .45s var(--st-ease), opacity .25s linear; }
.st-mailroom.st-mailroom-live .st-mailroom-count > span { transition: opacity .2s linear; }
.st-mailroom.st-mailroom-live .st-mailroom-anchor { transition: opacity .35s var(--st-ease); }
.st-mailroom.st-mailroom-live .st-mailroom-label { transition: color .35s var(--st-ease); }
.st-mailroom.st-mailroom-instant :is(.st-mailroom-card, .st-mailroom-head, .st-mailroom-count > span, .st-mailroom-anchor, .st-mailroom-label) { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .st-mailroom *, .st-mailroom { transition: none !important; animation: none !important; }
}