/* Layout and proportions match HEY's web app (measured at a 1512px window).
   Name, logo and icons are Postboxey's own. Expect to restyle. */

:root {
  /* Theme channels: Appearance → Dark redefines these (below) */
  --ink-rgb: 35 28 51;
  --warm-rgb: 226 221 215;
  --shade-rgb: 0 0 0;
  --sheet-rgb: 255 255 255;
  --color-sheet: #ffffff;
  --color-paper: #fbfaf9;
  --color-on-mint: rgb(35 28 51);

  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-ink: rgb(var(--ink-rgb));
  --color-muted: rgb(var(--ink-rgb) / 0.66);
  --color-line: #e6e3dc;
  --color-tint: rgb(var(--warm-rgb) / 0.15);
  --color-accent: #3072dd;
  --color-accent-ink: #ffffff;
  --color-fresh: #fff8e1;
  --gradient: linear-gradient(135deg, #3072dd 0%, #3072dd 100%);
  /* Quiet neutral: popups and menus are white with light grey buttons and dark text; blue marks
     where you are; hairlines are plain; Snooze is graphite */
  --popup-surface: #ffffff;
  --popup-line: #e7e5e4;
  --popup-ink-rgb: 28 25 23;
  --popup-ink: rgb(var(--popup-ink-rgb));
  --popup-muted: #6b6560;
  --popup-heading: #29353c;
  --popup-tile: #f8f9f9;
  --popup-hover: rgb(var(--popup-ink-rgb) / 0.06);
  --popup-current: #e8f0fc;
  --popup-current-ink: #2a63c8;
  --popup-shadow: 0 12px 32px rgb(0 0 0 / 0.12);
  --color-rule: #d6d3d1;
  --color-graphite: #57534e;
  --color-soft: #f0efed;
  --radius: 14px;
  --shadow: 0 1px 2px rgb(var(--shade-rgb) / 0.06), 0 4px 16px rgb(var(--shade-rgb) / 0.04);
  --font: -apple-system, system-ui, Aptos, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --page-width: 44rem;
  --header-height: 53px;

  color-scheme: light;
}

/* Appearance → Dark, or System default on a device set to dark. Email bodies
   keep their own colours. */
:root[data-appearance="dark"] {
  --ink-rgb: 236 233 242;
  --warm-rgb: 0 0 0;
  --shade-rgb: 255 255 255;
  --sheet-rgb: 36 33 43;
  --color-sheet: rgb(36 33 43);
  --color-paper: rgb(30 28 36);
  --color-bg: rgb(24 22 29);
  --color-surface: rgb(36 33 43);
  --color-line: rgb(62 58 72);
  --color-fresh: rgb(58 52 32);
  --popup-surface: rgb(46 43 54);
  --popup-line: rgb(66 62 76);
  --popup-ink-rgb: 236 233 242;
  --popup-muted: rgb(236 233 242 / 0.65);
  --popup-heading: var(--popup-muted);
  --popup-tile: rgb(56 52 66);
  --popup-current: rgb(48 114 221 / 0.3);
  --popup-current-ink: #a9c7f7;
  --popup-shadow: 0 12px 32px rgb(0 0 0 / 0.45);
  --color-rule: rgb(72 68 84);
  --color-graphite: #b5b0a8;
  --color-soft: rgb(52 48 62);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-appearance="system"] {
    --ink-rgb: 236 233 242;
    --warm-rgb: 0 0 0;
    --shade-rgb: 255 255 255;
    --sheet-rgb: 36 33 43;
    --color-sheet: rgb(36 33 43);
    --color-paper: rgb(30 28 36);
    --color-bg: rgb(24 22 29);
    --color-surface: rgb(36 33 43);
    --color-line: rgb(62 58 72);
    --color-fresh: rgb(58 52 32);
    --popup-surface: rgb(46 43 54);
    --popup-line: rgb(66 62 76);
    --popup-ink-rgb: 236 233 242;
    --popup-muted: rgb(236 233 242 / 0.65);
    --popup-heading: var(--popup-muted);
    --popup-tile: rgb(56 52 66);
    --popup-current: rgb(48 114 221 / 0.3);
    --popup-current-ink: #a9c7f7;
    --popup-shadow: 0 12px 32px rgb(0 0 0 / 0.45);
    --color-rule: rgb(72 68 84);
    --color-graphite: #b5b0a8;
    --color-soft: rgb(52 48 62);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font: 16px/1.5 var(--font);
}

/* Form controls don't inherit the page font by default (they'd fall back to Arial) */
button, input, select, textarea { font-family: inherit; }

a { color: inherit; }

/* Header */

.app-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-height);
  padding: 0 max(7px, calc((100% - 1229px) / 2));
  background: rgb(var(--sheet-rgb) / 0.95);
  font-size: 17.6px;
  line-height: 24.64px;
}

.app-header__side { display: flex; align-items: center; }
.app-header__side--end { justify-content: flex-end; }
.app-header__side--end form { margin: 0; }


.app-header__me { display: block; margin-right: 11px; list-style: none; cursor: pointer; border-radius: 50%; }
.app-header__me::-webkit-details-marker { display: none; }
.app-header__me:focus { outline: none; }
.app-header__me:focus-visible { box-shadow: 0 0 0 2px #a4d2ff; }

/* Your menu, from the avatar */
.app-header__side--end .search-field { margin-right: 12px; }
.me-menu { position: relative; }
.me-menu__panel { top: calc(100% + 8px); right: 11px; width: 280px; padding: 8.8px; border-radius: 17.6px; font-weight: 400; }
.me-menu__who { display: flex; align-items: center; gap: 10px; padding: 8px 10px 4px; }
.me-menu__who .avatar { --avatar-size: 40px; flex: none; font-size: 15px; }
.me-menu__identity { display: grid; min-width: 0; }
.me-menu__name { font-weight: 600; }
.me-menu__address { overflow: hidden; color: var(--popup-muted); font-size: 13.5px; line-height: 19px; text-overflow: ellipsis; white-space: nowrap; }
.me-menu__form { margin: 0; }
.me-menu__row { display: flex; align-items: center; width: 100%; height: 38px; padding: 0 10px; border: 0; border-radius: 8.8px; background: none; color: var(--popup-ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.me-menu__row:hover, .me-menu__row:focus-visible { background: var(--popup-hover); outline: none; }
.me-menu__row { gap: 10px; }
.me-menu__row-icon { width: 18px; height: 18px; flex: none; color: var(--popup-muted); }
.app-header__me .avatar { --avatar-size: 40px; font-size: 15px; }

body:has(.app-header) { padding-top: 63.8px; }

/* Box pages (Inbox, The Feed, Paper Trail): a white sheet with the title,
   anything new on white, and previously seen mail on a warm tint below. */

.app-main.app-main--sheet { max-width: none; padding: 17.2px 0 0; }

.sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1078px, 100%);
  min-height: calc(100vh - 81px);
  margin: 0 auto;
  padding: 55px 55px 0;
  border-radius: 29.7px 29.7px 0 0;
  background: var(--color-sheet);
  box-shadow: rgb(var(--warm-rgb) / 0.5) 0 0 33px 0;
  font-size: 19.8px;
  line-height: 27.72px;
}

/* The live regions (User::LiveBoxes) wrap parts of a box page without a box of their own. */
.live-region { display: contents; }

.sheet__title { margin: 0; font-size: 44px; line-height: 44px; font-weight: 700; text-align: center; }

/* "+ New email" and its chevron: one blue pill split by a hairline. The main
   part keeps the old Write button's size; the chevron opens the New menu. */
.new-button { position: absolute; top: 22px; right: 22px; display: flex; height: 37.19px; }

.new-button__main {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 5.28px 12px 5.28px 38.72px;
  border-radius: 33px 0 0 33px;
  background: var(--color-accent);
  color: #fff;
  font-size: 17.6px;
  line-height: 24.64px;
  font-weight: 500;
  text-decoration: none;
}

.new-button__plus { position: absolute; left: 13px; width: 18px; height: 18px; }
.new-button__more { position: relative; display: flex; }

.new-button__chevron {
  display: flex;
  align-items: center;
  padding: 0 11px 0 9px;
  border-left: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 0 33px 33px 0;
  background: var(--color-accent);
  color: #fff;
  list-style: none;
  cursor: pointer;
}

.new-button__chevron::-webkit-details-marker { display: none; }
.new-button__chevron svg { width: 18px; height: 18px; transition: transform 150ms ease; }
.new-button__chevron path { stroke-width: 2.5px; }
.new-button__more[open] .new-button__chevron svg { transform: rotate(180deg); }
.new-button__main:hover, .new-button__chevron:hover, .new-button__more[open] .new-button__chevron { background: var(--popup-current-ink); }

.new-button__menu { top: calc(100% + 6px); right: 0; z-index: 30; width: 262px; padding: 8.8px; border-radius: 17.6px; }
.new-button__form { margin: 0; }
/* Where a row's new thing goes, when it can live in only one place (a sticky: the Inbox) */
.new-button__where { margin-left: auto; color: var(--popup-muted); font-size: 12.5px; }
.new-button__row { width: 100%; border: none; background: none; font: inherit; font-weight: 400; text-align: left; cursor: pointer; }
.new-button__row:hover, .new-button__row:focus-visible { background: var(--popup-hover); outline: none; }

/* The 1px gradient rule under the title */
.sheet__rule { position: relative; height: 22px; margin: 12.78px 0; }
.sheet__rule::before { content: ""; position: absolute; inset: 11px 0 auto; height: 1px; background: var(--color-rule); }

.nothing-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 207px;
  padding-top: 2px;
  font-size: 15.4px;
  line-height: 15.4px;
}

.nothing-new__icon { width: 25px; height: 25px; }
.nothing-new__text { margin: 0 0 12.78px; font-size: inherit; font-weight: 400; }

.postings { display: flex; flex-direction: column; flex: 1; }
.postings--seen { margin: 24.75px -55px 0; background: var(--color-tint); }

.postings__heading { padding: 12.375px 55px 0; }

.postings__label {
  margin: 12.78px 16.5px;
  font-size: 15.4px;
  line-height: 15.4px;
  font-weight: 700;
  text-transform: uppercase;
}

.postings--seen .posting { padding: 0 55px; }

.posting__body {
  display: grid;
  grid-template-columns: 45px 1fr auto;
  align-items: center;
  column-gap: 5px;
  height: 68.3px;
  padding: 9.9px 22px 9.9px 16.5px;
  color: inherit;
  text-decoration: none;
}

.posting .avatar { --avatar-size: 44.55px; align-self: start; font-size: 16px; }
/* HEY's bundled row: two rounded-square avatars, the second offset down-right */
.posting__avatar--bundled { position: relative; display: flex; flex: none; align-self: start; min-width: 55.44px; }
.posting__avatar--bundled .avatar { --avatar-size: 37.62px; margin: 0 0 0 1.47px; border: 2px solid var(--color-sheet); border-radius: 4.4px; font-size: 13px; }
.posting__avatar--bundled .avatar + .avatar { position: absolute; top: 2.97px; left: 0; margin: 0 0 0 5.42px; }
.posting__content { align-self: start; min-width: 0; }

/* Unread dot, centred on the avatar */
.posting__body { position: relative; }
.postings--new .posting--unseen .posting__body::before {
  content: "";
  position: absolute;
  left: 2.2px;
  top: 27.5px;
  width: 10.9px;
  height: 10.9px;
  border-radius: 50%;
  background: #fa8a0a;
}

/* "New for you" sits on the gradient rule, with the reader pill at its end */
.new-heading { position: relative; display: flex; align-items: center; justify-content: space-between; height: 15.4px; margin: 19.4px 0 12.78px 16.5px; }
.new-heading::before { content: ""; position: absolute; inset: 7.7px 0 auto; height: 1px; background: var(--color-rule); }

.new-heading__label {
  position: relative;
  margin: 0;
  padding-right: 7.7px;
  background: var(--color-sheet);
  font-size: 15.4px;
  line-height: 15.4px;
  font-weight: 700;
  text-transform: uppercase;
}

.new-heading__reader {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 28.4px;
  padding: 3.96px 10.56px 3.96px 29.04px;
  border: 1px solid var(--popup-line);
  border-radius: 33px;
  background: var(--color-sheet);
  color: var(--color-ink);
  font-size: 13.2px;
  font-weight: 500;
  text-decoration: none;
}

/* The reference draws these pills' icons in its second colour; ours are the
   blue, a small spot of colour in a neutral pill */
.new-heading__reader-icon { position: absolute; left: 10px; width: 14px; height: 14px; color: var(--color-accent); }

.posting__title {
  display: block;
  margin-bottom: -1px;
  padding-bottom: 1.1px;
  overflow: hidden;
  font-size: 19.8px;
  line-height: 25.74px;
  white-space: nowrap;
  text-overflow: ellipsis;
}


.posting__byline {
  display: block;
  padding: 1px 0;
  overflow: hidden;
  color: var(--color-muted);
  font-size: 15.4px;
  line-height: 18.48px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.posting__time { margin-bottom: 2.2px; padding-left: 11px; color: var(--color-muted); font-size: 15.4px; line-height: 21.56px; text-align: right; }
.posting__count { margin-left: 6px; color: var(--color-muted); font-size: 15.4px; font-weight: 400; }
/* A bundle's subjects, newest first, joined by the reference's bold dot */
.posting__subject { display: inline-block; line-height: 25.74px; }
.posting__separator { display: inline-block; margin: 0 4.95px; font-weight: 700; line-height: 19.8px; }
/* Hover, as the reference's: a faint blue wash on the row, no underline */
/* The checkbox over the avatar counts as the row, as in the reference */
.posting__body:hover, .posting:has(.posting__select:hover) .posting__body { background: rgb(48 114 221 / 0.05); }

/* Jump menu: the logo button at the top middle and the panel it opens */

.jump { position: relative; display: flex; justify-content: center; }

/* Sized as Queen Bee's menu button (~/Sites/Intranet, shared/_top_nav): a
   28px mark, lettering with 13px capitals, an 18px chevron, 6px apart, in a
   pill 4px x 12px around them (36px tall). The hover colour is ours. */
.jump__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--color-ink);
  font: inherit;
  cursor: pointer;
}

.jump__trigger:hover { background: var(--color-soft); }
.jump__mark { display: block; width: 28px; height: 28px; }
/* 15px tall puts the capitals at Queen Bee's 13.05px (18px semibold) */
.wordmark { display: block; }
.wordmark__letters { fill: currentColor; }
.wordmark__accent { fill: var(--color-accent); }
.jump__wordmark { width: 91.43px; height: 18.4px; margin-bottom: -3.4px; } /* the p's and y's tails hang below the line */
/* The lettering is a dark image; dark mode turns it light */
.jump__chevron { width: 18px; height: 18px; transition: transform 150ms ease; }
.jump__chevron path { stroke-width: 2.5px; }
.jump__trigger[aria-expanded="true"] .jump__chevron { transform: rotate(180deg); }

.jump__panel {
  --jump-tile-bg: var(--popup-tile);

  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  translate: -50% 0;
  z-index: 10;
  width: min(484px, calc(100vw - 1.5rem));
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  padding: 23.1px;
  border: 1px solid var(--popup-line);
  border-radius: 23.1px;
  background: var(--popup-surface);
  box-shadow: var(--popup-shadow);
  color: var(--popup-ink);
  font-size: 15.4px;
  line-height: 21.56px;
}

.jump__panel[hidden] { display: none; }
/* While the menu is open its header rises above everything fixed (the trays,
   parked drafts), which a tall menu would otherwise slide under */
.app-header:has(.jump__panel:not([hidden])) { z-index: 21; }

.jump__hint { margin: 0 0 9.625px; text-align: center; color: var(--popup-muted); }

.jump__hint kbd {
  padding: 1.96px 3.93px;
  font: 700 13.09px/13.09px ui-monospace, SFMono-Regular, Menlo, monospace;
}

.jump__search {
  display: flex;
  align-items: center;
  gap: 10.04px;
  height: 39px;
  padding: 0 7.7px 0 12px;
  border: 1px solid var(--popup-line);
  border-radius: 22px;
  background: var(--popup-tile);
  color: var(--popup-muted);
}

.jump__search-icon { width: 18px; height: 18px; flex: none; }

.jump__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  color: var(--popup-ink);
  font: inherit;
}

.jump__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px 9px;
  margin: 15px 4.4px 4.4px;
}

.jump__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 86px;
  padding: 0 10.164px 13.86px;
  border: 1px solid var(--popup-line);
  border-radius: 8.8px;
  background: var(--popup-tile);
  color: var(--popup-ink);
  text-decoration: none;
  font-weight: 500;
  text-align: center;
}

a.jump__tile:hover, a.jump__tile:focus-visible { background: var(--color-soft); outline: none; }
.jump__tile--current, a.jump__tile--current:hover { border-color: transparent; background: var(--popup-current); color: var(--popup-current-ink); --jump-tile-bg: var(--popup-current); }
.jump__tile--soon { opacity: 0.55; cursor: default; }
/* The reference's tile icons fill ~95% of a 25.6px image (a 24.8px star); ours
   fill ~70% of their box, so the box is 35px. -6px keeps the centre 35px
   from the tile's top, as the reference's is. */
.jump__tile-icon { width: 35px; height: 35px; margin-bottom: -6px; }
/* Some of ours fill more of their box; sized to the reference's counterpart */
.jump__tile-icon--feed { width: 31px; height: 31px; margin-bottom: -4px; }
.jump__tile-icon--set_aside { width: 33px; height: 33px; margin-bottom: -5px; }
.jump__tile-icon--snooze { width: 27px; height: 27px; margin-bottom: -2px; }
.jump__tile-number { position: absolute; top: 6px; right: 9px; font-size: 13px; font-weight: 700; color: rgb(var(--popup-ink-rgb) / 0.4); }
.jump__soon { position: absolute; top: 6px; left: 9px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--popup-muted); }

.jump__results { margin-top: 0.75rem; display: grid; gap: 0.15rem; }
.jump__results[hidden] { display: none; }

.jump__row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  color: var(--popup-ink);
  text-decoration: none;
}

.jump__row[hidden] { display: none; }
.jump__row[aria-selected="true"], .jump__row:hover { background: var(--popup-hover); }
.jump__row-text { display: flex; flex-direction: column; min-width: 0; }
.jump__row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jump__row-meta { font-size: 0.8rem; color: var(--popup-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jump__empty { margin: 0.5rem 0.65rem; color: var(--popup-muted); }

.jump__sections { margin-top: 0; }

.jump__section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16.84px 0 6.74px;
  padding: 0 0 0 8.89px;
  list-style: none;
  color: var(--popup-heading);
  font-size: 13.475px;
  line-height: 16.17px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
}

.jump__section summary::-webkit-details-marker { display: none; }
.jump__section-chevron { width: 16px; height: 16px; color: var(--popup-muted); rotate: -90deg; transition: rotate 150ms ease; }
.jump__section[open] .jump__section-chevron { rotate: 0deg; }
/* HEY leaves the tile row margins and the title margin uncollapsed */
.jump__sections > .jump__section:first-child summary { margin-top: 22.24px; }

.jump__section-body { display: block; margin: 0; }
.jump__section-body form { margin: 0; }

.jump__link {
  display: flex;
  align-items: center;
  gap: 10.6px;
  width: 100%;
  margin: 1px 0;
  padding: 9.24px 9.24px 9.24px 14.45px;
  border: none;
  border-radius: 8.8px;
  background: none;
  color: var(--popup-ink);
  font: inherit;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.jump__link:hover { background: var(--popup-hover); }
.jump__link-icon { width: 17.3px; height: 17.3px; flex: none; }
/* The reference's row glyphs fill their 17.3px box (16.6-17.4px of ink); ours
   sit inside a 24-unit grid with room around them, so each is drawn up to the
   reference's size (Labels, Collections and Workflows to 17.3px) */
[data-glyph="drafts"], [data-glyph="clips"], [data-glyph="snippets"] { scale: 1.42; }
[data-glyph="sent"], [data-glyph="contacts"] { scale: 1.27; }
[data-glyph="spam"], [data-glyph="label"] { scale: 1.25; }
[data-glyph="declined"] { scale: 1.2; }
[data-glyph="trash"], [data-glyph="everything"] { scale: 1.2; }
[data-glyph="collection"] { scale: 1.19; }
[data-glyph="seen"], [data-glyph="files"] { scale: 1.13; }
[data-glyph="workflow"], [data-glyph="tags"] { scale: 1.09; }
/* Each row's icon has its own colour (Scott's pick), all readable on white;
   dark mode mixes each toward white so it shows on the dark menu */
[data-glyph] { color: var(--glyph-colour, currentColor); }
[data-glyph="drafts"] { --glyph-colour: #3072dd; }
[data-glyph="sent"] { --glyph-colour: #0b7d70; }
[data-glyph="contacts"] { --glyph-colour: #7c4dcc; }
[data-glyph="clips"] { --glyph-colour: #c2560a; }
[data-glyph="snippets"] { --glyph-colour: #3a7d2c; }
[data-glyph="seen"] { --glyph-colour: #5b6b78; }
[data-glyph="declined"] { --glyph-colour: #c0392b; }
[data-glyph="files"] { --glyph-colour: #8a6d1f; }
[data-glyph="spam"] { --glyph-colour: #c2185b; }
[data-glyph="trash"] { --glyph-colour: #6b6560; }
[data-glyph="everything"] { --glyph-colour: #4f5bd5; }
[data-glyph="tags"] { --glyph-colour: #b7791f; }
[data-glyph="collection"] { --glyph-colour: #0e7490; }
[data-glyph="workflow"] { --glyph-colour: #a8456b; }
[data-glyph="sticky"] { --glyph-colour: #ca8a04; scale: 1.09; }
/* The Snooze menu: colour by meaning, from the same palette, no two rows
   alike side by side; Back to top now shares the Zzz's brand blue. */
[data-glyph="snooze-unsnooze"] { --glyph-colour: #c0392b; }
[data-glyph="snooze-now"] { --glyph-colour: #3072dd; }
[data-glyph="snooze-later_today"] { --glyph-colour: #c2560a; }
[data-glyph="snooze-tomorrow"] { --glyph-colour: #3a7d2c; }
[data-glyph="snooze-weekend"] { --glyph-colour: #a8456b; }
[data-glyph="snooze-next_week"] { --glyph-colour: #0e7490; }
[data-glyph="snooze-custom"] { --glyph-colour: #b7791f; }
[data-glyph="snooze-surprise_me"] { --glyph-colour: #7c4dcc; }
[data-glyph="snooze-if_no_reply"] { --glyph-colour: #5b6b78; }
:root[data-appearance="dark"] [data-glyph] { color: color-mix(in srgb, var(--glyph-colour) 55%, white); }
@media (prefers-color-scheme: dark) {
  :root[data-appearance="system"] [data-glyph] { color: color-mix(in srgb, var(--glyph-colour) 55%, white); }
}
.jump__link--static { color: var(--popup-muted); cursor: default; }
.jump__link--static:hover { background: none; }

/* Buttons */

.btn {
  display: inline-block;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--plain { border-color: transparent; background: none; color: var(--color-muted); }

/* Page */

.app-main {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

.flash {
  position: fixed;
  top: 64px;
  left: 50%;
  translate: -50% 0;
  z-index: 6;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  background: var(--color-ink);
  color: #fff;
  font-size: 15.4px;
  animation: flash-out 0.4s ease 3s forwards;
}

@keyframes flash-out { to { opacity: 0; visibility: hidden; } }

/* "Sending… Undo": stays for the whole Undo Sending window */
.flash--undo { display: flex; align-items: center; gap: 11px; padding-right: 0.5rem; animation-delay: 9.6s; }
.flash__form { margin: 0; }
.flash__action { padding: 2px 11px; border: 1px solid rgb(var(--sheet-rgb) / 0.5); border-radius: 999px; background: none; color: #fff; font: 500 15.4px/1.4 var(--font); cursor: pointer; }
.flash__action:hover { background: rgb(var(--sheet-rgb) / 0.15); }

.box-title {
  margin: 0 0 2rem;
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: center;
}

.box-section { margin-bottom: 2.5rem; }

.box-section__title {
  margin: 0 0 0.75rem;
  color: var(--color-muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.empty { color: var(--color-muted); text-align: center; }

/* Avatars */

.avatar {
  --avatar-size: 2.5rem;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  background: hsl(var(--avatar-hue) 65% 88%);
  color: hsl(var(--avatar-hue) 55% 28%);
  font-size: calc(var(--avatar-size) * 0.38);
  font-weight: 700;
}

.avatar--photo { object-fit: cover; }
.avatar--large { --avatar-size: 3rem; }
.avatar--small { --avatar-size: 1.9rem; }

/* Topic list */

.topic-cards, .topic-list {
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.topic {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
}

.topic:last-child { border-bottom: none; }
.topic:hover { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.topic--fresh { background: var(--color-fresh); }

.topic__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.topic__people { font-size: 0.875rem; color: var(--color-muted); }
.topic__subject { font-weight: 700; }
.topic--fresh .topic__subject { font-weight: 800; }

.topic__snippet {
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topic__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; font-size: 0.8rem; color: var(--color-muted); }

.topic__count {
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--color-line);
  font-weight: 700;
}

/* Thread */

.thread__header { margin-bottom: 1.5rem; text-align: center; }
.thread__back { color: var(--color-muted); font-size: 0.875rem; text-decoration: none; }
.thread__subject { margin: 0.5rem 0 0; font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.thread__actions { display: flex; justify-content: center; margin-top: 1.5rem; }

/* Email view: people and subject above, one white card per message, and a
   floating action bar at the bottom (matches HEY's topic page). */

.topic-view { padding-bottom: 120px; font-size: 19.8px; line-height: 27.72px; }
.topic-view__composer { display: block; scroll-margin-top: 70px; }
.topic-view__composer .composer-sheet--inline { scroll-margin-top: 70px; }
/* While replying, the composer's own sticky bar replaces the action bar. */
.topic-view:has(.topic-view__composer .composer-sheet) { padding-bottom: 0; }
.topic-view:has(.topic-view__composer .composer-sheet) .topic-toolbar { display: none; }

.topic-view__header { display: flex; flex-direction: column; align-items: center; padding: 0 16px; }
.topic-view__people { display: flex; margin-bottom: 1px; margin-right: 12.4px; } /* HEY centres the avatars with an empty sibling beside them, 6px left of centre */
.topic-view__people .avatar { --avatar-size: 39.6px; font-size: 14px; box-shadow: var(--color-sheet) 0 0 0 2px; }
.topic-view__people .avatar + .avatar { margin-left: -9.9px; }
.topic-view__subject { max-width: 770px; margin: 15px 0 0; font-size: 44px; line-height: 44px; font-weight: 700; text-align: center; text-wrap: balance; }

.entries { display: flex; flex-direction: column; gap: 24.75px; margin-top: 26.35px; }

.entry {
  width: min(1078px, 100%);
  /* A link to a message (#message_21) lands below the header and the pinned
     title, as the reference's scroll-padding-top does */
  scroll-margin-top: 113.3px;
  margin: 0 auto;
  padding: 0 55px 24.75px;
  border: 1px solid var(--color-sheet);
  border-radius: 29.7px;
  background: var(--color-sheet);
  box-shadow: rgb(var(--warm-rgb) / 0.5) 0 0 33px 0;
}

.entry__header { display: flex; align-items: flex-start; margin-top: 22px; }
.entry__header > .avatar { margin-right: 9.9px; }
.avatar--entry { --avatar-size: 49.5px; font-size: 17px; box-shadow: rgb(164 210 255) 0 0 0 2px; }

.entry__who { flex: 1; min-width: 0; }
.entry__from { line-height: 25.74px; }
.entry__sender { font-size: 19.8px; line-height: 25.74px; font-weight: 600; }
.entry__sender-email, .entry__recipients { color: var(--color-muted); font-size: 17.6px; line-height: 22.88px; }
.entry__recipients { display: flex; flex-wrap: wrap; column-gap: 0.75em; padding-top: 1px; }

.entry__meta { display: flex; align-items: flex-start; padding-top: 2px; color: var(--color-muted); font-size: 17.6px; line-height: 24.64px; }

.entry__menu {
  display: inline-grid;
  place-items: center;
  width: 39.6px;
  height: 35.2px;
  margin-top: 0;
  border-radius: 33px;
  /* The reference lifts the button 5.5px, which puts the dots level with the
     date; its menu still opens from the box's bottom edge, below. */
  translate: 0 -5.5px;
}

.entry__menu-icon { width: 20px; height: 20px; }
.entry__actions { position: relative; }
.entry__actions > .popup-menu { top: 100%; }
.entry__actions summary { list-style: none; cursor: pointer; }
.entry__actions summary::-webkit-details-marker { display: none; }
.entry__actions summary:hover { background: rgb(var(--ink-rgb) / 0.06); color: var(--color-ink); }

/* The reference's pop: menus spring open from their centre, a touch past
   full size and back, in a tenth of a second. Menus here are positioned with
   `translate`, which this `transform` leaves alone. */
@keyframes pop-open {
  0% { transform: scale(0.3); opacity: 0; }
  75% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}
/* `backwards`, not the reference's `both`: once it has popped, the menu keeps no
   transform, so it doesn't stay on its own compositing layer, which could leave
   a ghost of the menu painted after it closed. Looks the same. */
[open] > .popup-menu, .jump__panel:not([hidden]) { animation: 0.1s ease backwards pop-open; }

/* The small menu under a message's ••• (same look as the jump menu) */
.popup-menu {
  --popup-bg: var(--popup-surface);

  position: absolute;
  top: calc(100% + 5.7px);
  right: -15.4px;
  z-index: 10;
  width: 330px;
  padding: 19.25px 19.25px 21.45px;
  border: 1px solid var(--popup-line);
  border-radius: 23.1px;
  background: var(--popup-surface);
  box-shadow: var(--popup-shadow);
  color: var(--popup-ink);
  font-size: 15.4px;
  line-height: 21.56px;
  font-weight: 500;
}

.popup-menu__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8.8px; margin: 5.3px 4.4px 11.2px; }

.popup-menu__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 86.2px;
  padding: 0 10px 13.86px;
  border: 1px solid var(--popup-line);
  border-radius: 8.8px;
  background: var(--popup-tile);
  color: var(--popup-ink);
  text-decoration: none;
}

.popup-menu__tile:hover { background: var(--color-soft); }
.popup-menu__tile-icon { width: 24px; height: 24px; }
/* The thread's menu tiles, sized like the reference's (drawn 21-25px across,
   centred 34.5px down the tile); the margins keep the label where it was. */
.popup-menu__tile-icon--reply, .popup-menu__tile-icon--forward { width: 33px; height: 33px; margin: -1.8px 0 -7.2px; }
.popup-menu__tile-icon--label { width: 35px; height: 35px; margin: -2.8px 0 -8.2px; }
.popup-menu__tile-icon--move { width: 36px; height: 36px; margin: -3.3px 0 -8.7px; }
.popup-menu__tile-icon--trash { width: 30.5px; height: 30.5px; margin: -0.55px 0 -5.95px; }

.popup-menu__row {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 9.24px 9.24px 9.24px 42.35px;
  border-radius: 8.8px;
  color: var(--popup-ink);
  text-decoration: none;
}

/* The reference draws its menu-row icons 17.3px across, centred 23.1px in.
   Most of ours span 17 of their 24 units, so a 23.5px box matches; the
   rest are sized one by one (measured 2026-10-18). */
.popup-menu__row-icon { position: absolute; left: 23.1px; width: 23.5px; height: 23.5px; translate: -50% 0; }
.popup-menu__row-icon[data-icon="board"] { width: 19px; height: 19px; }
.popup-menu__row-icon[data-icon="bell"], .popup-menu__row-icon[data-icon="bell_off"], .popup-menu__row-icon[data-icon="trash"] { width: 20.8px; height: 20.8px; }
.popup-menu__row-icon[data-icon="unseen"] { width: 21.2px; height: 21.2px; }
.popup-menu__row-icon[data-icon="print"] { width: 24.3px; height: 24.3px; }
.popup-menu__row-icon[data-icon="pencil"] { width: 28.6px; height: 28.6px; }
.popup-menu__row--soon { opacity: 0.6; cursor: default; }

.entry__body { padding: 9px 79.2px 0 59.4px; }
/* A sent message the provider never took (ours; the reference shows bounces as mail) */
.entry__undelivered { display: flex; flex-wrap: wrap; align-items: center; gap: 6.6px 11px; margin: 0 0 13.2px; padding: 9.9px 13.2px; border-radius: 8.8px; background: rgb(201 36 0 / 0.08); color: rgb(201 36 0); font-size: 15.4px; line-height: 21.56px; }
.entry__undelivered-form { margin: 0; }
.entry__undelivered-retry { padding: 3.3px 11px; border: 1px solid rgb(201 36 0); border-radius: 33px; background: none; color: rgb(201 36 0); font: 500 14.3px/19.8px var(--font); cursor: pointer; }
.entry__undelivered-retry:hover { background: rgb(201 36 0); color: #fff; }
/* Message text at the reference's size (its email content is 19.8px/27.72px,
   measured in Read Together); HTML mail starts at the same size in its frame */
.entry__text { font-size: 19.8px; line-height: 27.72px; }
.entry__text p { margin: 19.8px 0; overflow-wrap: anywhere; }
.entry__text a { color: rgb(48 114 221); }
.entry__text--rich { padding-top: 19.8px; overflow-wrap: anywhere; }
.entry__text--rich blockquote, .composer__editor blockquote { margin: 0; padding-left: 13px; border-left: 1px solid rgb(var(--ink-rgb) / 0.15); }
.entry__text--rich ul, .entry__text--rich ol { padding-left: 1.5em; }

.entry__frame {
  display: block;
  width: 100%;
  min-height: 4rem;
  margin-top: 19.8px;
  border: none;
  background: var(--color-sheet);
}


.topic-toolbar {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 4;
  translate: -50% 0;
  width: min(660px, calc(100% - 16px));
  padding: 11px 0;
}

.topic-toolbar__content {
  display: flex;
  gap: 5px;
  padding: 5.5px;
  border-radius: 17.6px;
  background: rgb(var(--sheet-rgb) / 0.95) linear-gradient(135deg, rgb(48 114 221 / 0.05) 0%, rgb(48 114 221 / 0.05) 80%);
}

.topic-toolbar__action {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 60px;
  padding: 5.5px;
  border-radius: 13.2px;
  color: var(--color-ink);
  font-size: 15.4px;
  line-height: 21.56px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

a.topic-toolbar__action:hover { background: var(--color-sheet); color: var(--color-accent); }

/* HEY's six tiles are each 104px wide, 5px apart */
.topic-toolbar__content > a.topic-toolbar__action,
.topic-toolbar__content > details { flex: 0 0 104px; min-width: 0; }
.topic-toolbar__action--soon { opacity: 0.45; cursor: default; }
.topic-toolbar__icon { flex: none; width: 24px; height: 24px; margin: 1.75px 0 1.75px; }
/* The reference's toolbar icons are drawn 20-24px across; ours have margins
   inside their 24-unit boxes, so each box grows until its drawing matches,
   with negative margins keeping the centre (and the label) in place. */
.topic-toolbar__icon--reply, .topic-toolbar__icon--set_aside { width: 31px; height: 31px; margin: -1.75px 0; }
.topic-toolbar__icon--reply_later { width: 35px; height: 35px; margin: -3.75px 0; transform: translate(-1.45px, 2.55px); }
.topic-toolbar__icon--snooze { width: 25px; height: 25px; margin: 1.25px 0; }
.topic-toolbar__icon--collab { width: 33px; height: 33px; margin: -2.75px 0; }
.topic-toolbar__icon--more { width: 31.5px; height: 31.5px; margin: -2px 0; }

.topic-toolbar__action kbd {
  position: absolute;
  top: 6.5px;
  right: 6.5px;
  padding: 1.96px 3.93px;
  font: 700 13.09px/13.09px SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  opacity: 0.5;
}

/* Back to the box, at the top left */
.app-header__back {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 37.19px;
  margin-right: 5.5px;
  padding: 5.28px 14.08px 5.28px 29.92px;
  border: 1px solid var(--popup-line);
  border-radius: 33px;
  background: var(--color-soft);
  color: var(--color-accent);
  font-weight: 500;
  text-decoration: none;
}

.app-header__back-icon { position: absolute; left: 8px; width: 18px; height: 18px; }
.app-header__back:hover { background: var(--popup-line); }



/* Composer */

.composer {
  padding: 1.25rem;
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

.composer__field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--color-line);
}

.composer__field label { width: 4.5rem; color: var(--color-muted); font-size: 0.875rem; }

.composer input[type="text"], .composer input[type="email"], .composer input[type="password"], .composer__body {
  flex: 1;
  width: 100%;
  padding: 0.6rem 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: none;
}

.composer__body { margin-top: 0.75rem; resize: vertical; }

.composer__footer { display: flex; align-items: center; gap: 0.75rem; justify-content: space-between; flex-wrap: wrap; margin-top: 0.75rem; }
.composer__attach { color: var(--color-muted); font-size: 0.875rem; }
.composer__note { margin: 0 0 0.5rem; color: var(--color-muted); font-size: 0.875rem; }

.composer__errors { margin: 0 0 1rem; padding: 0.6rem 1rem 0.6rem 2rem; border-radius: 8px; background: #fde8e8; color: #8a1f1f; }


/* HEY's cover art over Previously Seen. Measured live in HEY: the cover is
   the section's full width and one window tall; clicking it peeks, and a
   44px strip of it waits above the trays with a round arrow to cover again. */
.box-cover { position: relative; }
/* The cover's layers (image 3; menu, label and stickies 4) stay under the
   fixed header (5), so nothing of it shows through when scrolled up there */
.box-cover__menu { position: absolute; top: 12.375px; right: 66px; z-index: 4; }
.box-cover__menu-btn { display: grid; place-items: center; width: 35.2px; height: 35.2px; border-radius: 52.8px; color: rgb(var(--ink-rgb) / 0.66); list-style: none; cursor: pointer; }
.box-cover__menu-btn::-webkit-details-marker { display: none; }
.box-cover__menu-icon { width: 21.8px; height: 21.8px; }
.box-cover__popup { position: absolute; top: 35.2px; right: -15.4px; width: 330px; box-sizing: border-box; padding: 19.25px; border: 1px solid var(--popup-line); border-radius: 23.1px; background: var(--popup-surface); box-shadow: var(--popup-shadow); color: var(--popup-ink); }
.box-cover__title { margin: 0 0 8px; text-align: center; }
.box-cover-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.box-cover-presets__form { display: contents; }
.box-cover-preset { min-height: 66px; padding: 0; border: 0; border-radius: 11px; background-color: #fff; background-size: cover; background-position: center; cursor: pointer; }
.box-cover-preset[data-cover="blobs"] { background-image: url("/assets/covers/blobs-41715de2.svg"); }
.box-cover-preset[data-cover="grid"] { background-image: url("/assets/covers/grid-de9bfa07.svg"); }
.box-cover-preset[data-cover="peace"] { background-image: url("/assets/covers/peace-56ed0b77.svg"); }
.box-cover-preset[data-cover="terrazzo"] { background-image: url("/assets/covers/terrazzo-587d6729.svg"); }
.box-cover-preset[data-cover="topo"] { background-image: url("/assets/covers/topo-1bca04f1.svg"); }
.box-cover-preset[data-cover="waves"] { background-image: url("/assets/covers/waves-df77ae27.svg"); }
.box-cover-preset:focus-visible, .box-cover-preset--current { outline: none; box-shadow: 0 0 0 2px rgb(164 210 255); }
.box-cover__upload-form { margin: 15px 0 0; }
.box-cover__upload { display: block; padding: 4.62px 12.32px; border: 1px solid #fff; border-radius: 33px; font-size: 15.4px; line-height: 21.56px; font-weight: 500; text-align: center; cursor: pointer; }
.box-cover__upload-field { display: none; }
.box-cover__remove-form { margin: 11px 0 0; }
.box-cover__remove { width: 100%; padding: 0; border: 0; background: none; color: var(--popup-muted); font: 500 15.4px/21.56px var(--font); text-decoration: underline; cursor: pointer; }

.postings--covered:not(.postings--peeking) { position: relative; min-height: 100vh; }
.postings--covered:not(.postings--peeking) > .posting { display: none; }
.postings--covered .postings__label { position: relative; z-index: 4; }
.box-cover__content { display: none; }
.postings--covered:not(.postings--peeking) .box-cover__content { position: absolute; inset: 0 0 auto; z-index: 3; display: block; height: 100vh; background-color: var(--color-sheet); background-repeat: no-repeat; background-position: center top; background-size: cover; cursor: pointer; }
.postings--covered:not(.postings--peeking) .box-cover__menu { top: 17.6px; right: 17.6px; }
.postings--covered:not(.postings--peeking) .box-cover__menu-btn { background: rgb(var(--sheet-rgb) / 0.6); color: var(--color-ink); }
.box-cover-tray { display: none; }
.postings--peeking .box-cover-tray { position: fixed; inset: auto 0 0; z-index: 6; display: flex; justify-content: center; pointer-events: none; }
.sheet:has(.trays) .postings--peeking .box-cover-tray { bottom: 82.5px; }
.box-cover-tray__content { width: min(1078px, 100%); height: 44px; border-radius: 9.9px 9.9px 0 0; background-color: var(--color-sheet); background-position: center top; background-size: cover; pointer-events: auto; cursor: pointer; }
.box-cover__peek-toggle { position: absolute; top: -19.8px; left: 50%; display: grid; place-items: center; width: 39.6px; height: 39.6px; padding: 0; border: 0; border-radius: 59.4px; background: var(--color-sheet); color: var(--color-ink); translate: -50% 0; pointer-events: auto; cursor: pointer; }
.box-cover__peek-toggle svg { width: 22px; height: 22px; }

/* The reference's sticky notes over the cover (measured with one test
   sticky): "+" at the cover's top left; the grid 37px down and 72px in,
   three 294.6px columns; yellow square cards */
.stickies__menu, .stickies { display: none; }
.postings--covered:not(.postings--peeking) .stickies__menu { position: absolute; top: 17.6px; left: 17.6px; z-index: 4; display: block; }
.stickies__menu-form { margin: 0; }
.stickies__menu-btn { display: grid; place-items: center; width: 35.2px; height: 35.2px; padding: 0; border: 0; border-radius: 52.8px; background: rgb(var(--sheet-rgb) / 0.6); color: rgb(242 183 5); cursor: pointer; }
.stickies__menu-btn svg { width: 22px; height: 22px; }
.postings--covered:not(.postings--peeking) .stickies { position: absolute; inset: 0 0 auto; z-index: 4; display: block; margin: 37.125px 72.325px; padding-bottom: 110px; pointer-events: none; }
.stickies__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24.75px; }
.sticky { position: relative; display: flex; flex-direction: column; min-height: 294.6px; background: rgb(255 246 200); box-shadow: rgb(0 0 0 / 0.1) 0 22px 27.5px 0, rgb(0 0 0 / 0.1) 0 11px 11px -5.5px; color: rgb(35 28 51); font-size: 17.6px; line-height: 24.64px; pointer-events: auto; }
.sticky--new { animation: 0.2s ease-in-out pop-open; } /* the reference's new sticky pops in */
.sticky--medium { grid-column: span 2; }
.sticky--large { grid-column: 1 / -1; }
.sticky__form { display: flex; flex: 1; flex-direction: column; margin: 0; }
.sticky__sizer { position: absolute; top: 8.3px; left: 50%; display: flex; border: 1px solid rgb(35 28 51); border-radius: 2.64px; translate: -50% 0; }
.sticky__size { display: block; cursor: pointer; }
.sticky__size-input { display: block; width: 13.2px; height: 13.2px; margin: 0; border-radius: 0; background: transparent; appearance: none; cursor: pointer; }
.sticky__size + .sticky__size .sticky__size-input { border-left: 1px solid rgb(35 28 51); }
.sticky__size-input:checked { background: rgb(48 114 221); }
.sticky__input { flex: 1; min-height: 232.9px; margin-top: 7px; padding: 22px 22px 44px; border: 0; background: transparent; color: rgb(35 28 51); font: 400 17.6px/24.64px var(--font); resize: none; }
.sticky__input:focus { outline: none; }
.sticky__input::placeholder { color: rgb(35 28 51 / 0.5); }
.sticky__actions { position: absolute; bottom: 10.9px; left: 22px; }
.sticky__save { height: 32.8px; padding: 4.62px 12.32px; border: 1px solid rgb(48 114 221); border-radius: 33px; background: rgb(48 114 221); color: #fff; font: 500 15.4px/21.56px var(--font); cursor: pointer; }
.sticky__discard-form { position: absolute; bottom: 16.5px; left: 94.2px; margin: 0; }
.sticky__discard { padding: 0; border: 0; background: none; color: rgb(35 28 51); font: 400 15.4px/21.56px var(--font); text-decoration: underline; cursor: pointer; }
.sticky__editor { display: flex; flex: 1; flex-direction: column; }
.sticky__editor[hidden], .sticky__view[hidden] { display: none; }
.sticky__delete-form { position: absolute; right: 22px; bottom: 11px; margin: 0; }
.sticky__delete { display: grid; place-items: center; width: 35.2px; height: 35.2px; padding: 0; border: 0; border-radius: 52.8px; background: none; color: rgb(35 28 51); cursor: pointer; }
.sticky__delete svg { width: 24px; height: 24px; }

/* A saved sticky, measured in the reference: the note in 22px of padding,
   its first line bold; Copy and Edit on hover, 5.5px off the bottom. Small
   stays square; medium and large fit the note. */
.sticky--saved:not(.sticky--editing) { min-height: 0; }
.sticky--editing .sticky__input { flex: none; height: 230.48px; min-height: 0; }
.sticky--editing .sticky__actions { bottom: 12.2px; }
.sticky--editing .sticky__discard-form { bottom: 17.22px; }
.sticky--small.sticky--saved:not(.sticky--editing) { aspect-ratio: 1 / 1; }
.sticky__view { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.sticky__text { flex: 1; min-height: 0; padding: 22px 22px 44px; overflow: auto; overflow-wrap: anywhere; }
.sticky__text p { margin: 0 0 1.4em; }
.sticky__text p:last-child { margin-bottom: 0; }
.sticky__text p:first-child::first-line { font-weight: 700; }
.sticky__hover { position: absolute; right: 5.5px; bottom: 5.5px; left: 5.5px; display: flex; justify-content: center; gap: 11px; opacity: 0; transition: opacity 0.15s; }
.sticky:hover .sticky__hover, .sticky__hover:focus-within { opacity: 1; }
.sticky__pill { height: 32.8px; padding: 4.62px 12.32px; border: 1px solid rgb(48 114 221); border-radius: 33px; background: rgb(48 114 221); color: #fff; font: 500 15.4px/21.56px var(--font); cursor: pointer; }
.sticky__copied { position: absolute; top: 50%; left: 50%; padding: 6.6px 15.4px; border-radius: 44px; background: rgb(35 28 51 / 0.9); color: #fff; font-size: 15.4px; line-height: 21.56px; white-space: nowrap; translate: -50% -50%; }

@media (max-width: 640px) {
  .app-header { padding-inline: 0.75rem; gap: 0.5rem; }

  .sheet { padding: 70px 16px 0; border-radius: 20px 20px 0 0; font-size: 17px; }
  .sheet__title { font-size: 34px; line-height: 34px; }
  .new-button { top: 16px; right: 16px; }
  .new-heading { margin-left: 0; }
  .new-heading__reader { font-size: 0; padding-right: 0; width: 30px; }
  .postings--seen { margin-inline: -16px; }
  .postings__heading, .postings--seen .posting { padding-inline: 16px; }
  .postings__label { margin-inline: 0; }
  .posting__body { padding-left: 12px; padding-right: 0; }
}

/* As HEY's: a thread's or collection's title pinned under the header once
   it has scrolled away; clicking it goes back to the top. */
.scrolled-title {
  position: fixed;
  top: var(--header-height, 52.8px);
  left: 0;
  right: 0;
  z-index: 7;
  display: block;
  width: 100%;
  height: 49.7px;
  padding: 0 16px;
  border: none;
  background: rgb(var(--sheet-rgb) / 0.95);
  color: var(--color-ink);
  font-size: 19.8px;
  line-height: 27.72px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.scrolled-title[hidden] { display: none; }
.scrolled-title__text { display: inline-flex; align-items: center; gap: 5.5px; max-width: 100%; }
.scrolled-title__icon { flex: none; width: 14.84px; height: 14.84px; }