/* ---------------------------------------------------------------
   The mail screen — STRUCTURE ONLY.

   🚨 NOT ONE COLOUR IS DECIDED HERE. Every value below is a token NAME out of
   @foundry/admin's tokens.css, and this file adds none of its own: an app that has already
   chosen a palette for its back office gets a mail client in it for free, and one that
   has not gets the kit's neutral grey and knows it skipped the choice. `test/mount.test.js`
   reads this file with exactly the two rules forge's admin-check read the kit's own
   sheets with — no literal colour, and every token read is one tokens.css declares — so
   that is checked rather than promised. The kit's tokens are `light-dark()` pairs, which
   is why a sheet that only ever NAMES them follows the theme without a dark block of
   its own.

   🚨 AND IT NEEDS A HEIGHT IT CANNOT GIVE ITSELF. Three columns that scroll separately
   only exist inside a box with a known height, and @foundry/admin's `shell()` deliberately
   does not constrain its `main` — the page scrolls there, which is right for every screen
   that is a document. So the HOST says how tall the mail screen is (its app.css does it
   in three lines), and everything here is `100%` of whatever that turned out to be.
   The `min-height: 0` on every level is what makes a grid child allowed to be shorter
   than its content, and leaving one out is what makes the whole page scroll instead of
   the column.
   --------------------------------------------------------------- */

/* 🚨 THE HOST RULE, HERE AND NOT IN EVERY APP. The paragraph above asked each host for three
   lines, and neither kunden nor gruppe wrote them: @foundry/admin's `main` kept its document
   padding (1.25rem 1.5rem 4rem), so the Postfach sat in a frame with a 4rem strip under it.
   This sheet is only ever loaded beside that kit, so it says it once: a `main` holding the mail
   screen is exactly one screen tall and has no padding. On a phone the kit's own
   `[data-nav="closed"] .adm-main` rule is more specific and keeps the top padding its fixed bar
   needs; `border-box` takes that padding out of the 100dvh. */
.adm-main:has(> .mb-app) {
  box-sizing: border-box;
  height: 100dvh;
  padding: 0;
}

.mb-app {
  --mb-folders: 232px;
  --mb-list: 384px;
  display: grid;
  grid-template-columns: var(--mb-folders) auto var(--mb-list) auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  background: var(--bg);
  /* The drawer below 75rem is positioned against this box and nothing outside it. */
  position: relative;
}

/* --- the folder drawer, and why it exists ---------------------------------------------
 *
 * 🚨 THREE WIDTHS, THREE LAYOUTS — not one layout that shrinks. Wide (≥75rem) the tree is
 * a column and the toggle and the scrim are not drawn at all. On a tablet (48–75rem) the
 * tree steps out of the grid and comes back over the list when asked for, so that the two
 * panes doing the work — the list and the mail — keep the whole width. Narrow (<40rem)
 * the same drawer stays and the list and the reader take turns.
 *
 * The middle band is the one that was missing, and 1024×768 said why: 232 + 384 of fixed
 * columns left the reader narrower than the list beside it — a toolbar in three rows and a
 * sentence broken every four words — while the phone layout put the folders in a scrolling
 * strip and gave a mail the whole screen with nothing beside it. Both wrong for the same
 * reason: the folder tree is the pane you look at least and it was the one being paid for.
 */

.mb-tree-toggle,
.mb-scrim {
  display: none;
}

.mb-app > * {
  min-height: 0;
  min-width: 0;
}

/* --- the divider ------------------------------------------------------------- */
/* A one-pixel line with a comfortable grab area around it: the thing you SEE and the
   thing you can HIT are not the same size, and making the line thick enough to grab
   would draw a gutter nobody asked for. */

.mb-grip {
  position: relative;
  width: 7px;
  cursor: col-resize;
  background: transparent;
  border: 0;
  touch-action: none;
}

.mb-grip::before {
  content: "";
  position: absolute;
  inset: 0 3px;
  background: var(--line);
}

.mb-grip:hover::before,
.mb-grip:focus-visible::before,
.mb-grip[data-dragging]::before {
  inset: 0 2px;
  background: var(--accent);
}

.mb-grip:focus-visible {
  outline: none;
}

/* --- the folder column -------------------------------------------------------- */

.mb-folders {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--surface);
}

.mb-tree {
  overflow-y: auto;
  padding: 0.75rem 0.5rem;
  display: grid;
  align-content: start;
  gap: 1rem;
}

.mb-tree-group {
  display: grid;
  gap: 1px;
}

.mb-tree-head {
  margin: 0 0 0.35rem;
  padding: 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Making a folder is rare, so it sits under the tree and is quieter than a folder. */
.mb-tree-tools {
  display: grid;
  gap: 1px;
  padding-top: 0.25rem;
  border-top: 1px solid var(--line-soft);
}

.mb-tree-tool {
  justify-content: start;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  font-size: 0.82rem;
  color: var(--dim);
}

.mb-folder {
  --mb-depth: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.42rem 0.6rem;
  padding-inline-start: calc(0.6rem + var(--mb-depth) * 0.9rem);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.mb-folder:hover {
  background: var(--surface-2);
}

.mb-folder.is-current {
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  color: var(--accent);
  font-weight: 600;
}

.mb-folder svg {
  color: var(--muted);
}

.mb-folder.is-current svg {
  color: inherit;
}

.mb-folder-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mb-folder-count {
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.mb-folder.is-current .mb-folder-count {
  color: inherit;
}

/* The link chip. It sits under the tree because it is a property of the ACCOUNT, not of
   the page — the old screen had it in the top bar, where it looked like a property of
   whatever you happened to be looking at. */
.mb-link-bar {
  padding: 0.6rem;
  border-top: 1px solid var(--line-soft);
}

.mb-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  text-align: start;
  cursor: pointer;
}

.mb-link:hover {
  background: var(--surface-2);
}

.mb-link > i {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--muted);
}

.mb-link[data-tone="ok"] > i {
  background: var(--ok);
}

.mb-link[data-tone="busy"] > i {
  background: var(--warn);
}

.mb-link[data-tone="bad"] > i {
  background: var(--bad);
}

/* 🚨 AND HERE IT COST THE WHOLE COLUMN. The status line under the tree carries whatever
   the tunnel says, and „Der Server nimmt auf diesem Port keine Verbindung an. Stimmen Host
   und Port? [ECONNREFUSED]" in one unbreakable line made the folder column 826px wide —
   the tree stretched with it and the sentence ran out across the reader. The ellipsis was
   there the whole time and never got to work, because the box was never allowed to be
   narrower than the text inside it. */
.mb-link,
.mb-link-bar,
.mb-tree {
  min-width: 0;
}

.mb-link > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- the list column ----------------------------------------------------------- */
/* Two rows, never one scrolling column: the search box must not move when the list is
   long, and it must not be inside the element that is rebuilt when post arrives. */

.mb-list {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--surface);
  border-inline-start: 1px solid var(--line-soft);
}

/* 🚨 THE SAME RULE AS THE `min-height: 0` AT THE TOP OF THIS FILE, ONE AXIS OVER. A grid
   or flex child may not be narrower than its content unless it is told it may, and the
   search field asks for a comfortable width — so the head stayed 375px wide inside a
   307px list and everything in it hung over the reader. Nothing here may be wider than
   the column it is in; the search is the one that gives way. */
.mb-list-head,
.mb-list-top,
.mb-tiles {
  min-width: 0;
}

.mb-list-head {
  display: grid;
  gap: 0.6rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--line-soft);
}

.mb-list-top {
  display: flex;
  gap: 0.5rem;
  align-items: end;
}

.mb-list-top .mb-search {
  flex: 1 1 auto;
  min-width: 0;
}

.mb-tree-toggle,
.mb-new {
  flex: 0 0 auto;
}

.mb-list-head .mb-search .field-label {
  display: none;
}

.mb-new {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.mb-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.mb-tile {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.mb-tile b {
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

.mb-tile[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  color: var(--accent);
}

.mb-tile[aria-pressed="true"] b {
  color: inherit;
}

/* 🚨 A select asks for the width of its widest option, and „alle Konten" is a list of
   mail addresses. With the list column at 300px it hung 56 pixels over the reader — on a
   tablet by default, and on any screen where somebody drags the divider left. Shrinking
   is allowed here: what it holds is a filter, not a sentence. */
.mb-picker {
  margin-inline-start: auto;
  min-width: 0;
  max-width: 100%;
}

.mb-picker select {
  max-width: 100%;
}

.mb-picker .field-label {
  display: none;
}

.mb-rows {
  overflow-y: auto;
  padding-bottom: 1rem;
}

.mb-rows:focus {
  outline: none;
}

.mb-day {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  padding: 0.5rem 0.85rem 0.3rem;
  background: var(--surface);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
}

/* One row is three lines and a face, not a table row. Sender, subject and the first
   words of the text are what a person actually scans; putting them in a column grid is
   what made the old screen read like a database table. */
.mb-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 0;
  border-inline-start: 3px solid transparent;
  background: transparent;
  color: var(--fg);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.mb-row + .mb-row {
  border-top: 1px solid var(--line-soft);
}

.mb-row:hover {
  background: var(--surface-2);
}

.mb-row.is-open {
  border-inline-start-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}

/* 🚨 AND THE SAME RULE A THIRD TIME, WHICH IS WHY IT IS WORTH SAYING ONCE PROPERLY: a
   grid or flex child is as wide as its content unless it is told it may be narrower, and
   `text-overflow: ellipsis` cannot save a line whose box was never allowed to shrink — the
   three dots never appear and the row widens the column instead. Every row of a mail list
   is one long line of somebody else's text, so all three of them say it. */
.mb-row-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.1rem;
}

.mb-from,
.mb-subject,
.mb-preview {
  min-width: 0;
}

.mb-row-top,
.mb-row-mid {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.mb-from {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
}

.mb-row-top .mb-when {
  margin-inline-start: auto;
  flex: none;
  font-size: 0.75rem;
  color: var(--muted);
}

.mb-subject {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  color: var(--muted);
}

.mb-row-mid svg {
  flex: none;
  color: var(--dim);
}

.mb-count {
  flex: none;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.mb-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--dim);
}

/* Unread is weight and a dot, never a colour on its own: a colour is the one signal that
   does not survive the person who cannot see it. */
.mb-row.is-unread .mb-from,
.mb-row.is-unread .mb-subject {
  font-weight: 700;
  color: var(--fg);
}

/* The dot is also the switch: clicking it marks the conversation read or unread. It is
   a bigger target than it looks — the padding is the hit area, and a 8px circle is not
   something anybody aims at twice. */
.mb-dot {
  align-self: center;
  box-sizing: content-box;
  width: 0.5rem;
  height: 0.5rem;
  padding: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
  background-clip: content-box;
  cursor: pointer;
}

/* Read: an outline, not nothing. A target that vanishes once you have used it makes
   „doch noch mal ansehen" impossible, and that is the whole reason to mark mail unread. */
.mb-dot.is-read {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.mb-row:hover .mb-dot.is-read,
.mb-row:focus-visible .mb-dot.is-read,
.mb-dot.is-read:hover {
  opacity: 1;
}

.mb-dot.is-read:hover {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.mb-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}

.mb-more {
  display: block;
  margin: 0.75rem auto;
}

/* --- the reader column --------------------------------------------------------- */

.mb-reader {
  overflow-y: auto;
  padding: 1.25rem 1.5rem 3rem;
  border-inline-start: 1px solid var(--line-soft);
}

.mb-reader:focus {
  outline: none;
}

.mb-blank {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.75rem;
  height: 100%;
  color: var(--dim);
}

.mb-reader-head {
  display: grid;
  gap: 0.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-soft);
}

.mb-reader-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mb-reader-title h2 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
}

/* The way back only exists in the narrow layout; wide, the list is right there. */
.mb-back {
  display: none;
  flex: none;
}

.mb-reader-meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.mb-reader-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mb-reader-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.mb-msgs {
  display: grid;
  gap: 1rem;
  padding-top: 1rem;
}

.mb-older {
  justify-self: center;
}

.mb-msg {
  padding: 0.9rem 1rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

/* Ours, set off — which side of a conversation a message came from is the first thing
   the eye needs and the last thing a date can tell it. */
.mb-msg[data-out] {
  border-inline-start: 3px solid var(--accent);
  background: var(--surface-2);
}

/* Avatar, who, „Merken", time. The third column is `auto`, so the row is the same shape
   whether or not the host has an address book to put anybody in. */
.mb-msg-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line-soft);
}

/*
 * 🚨 QUIET UNTIL THE MESSAGE IS UNDER THE POINTER. It is a useful button and a rare one —
 * a person writes somebody into the book once and then reads a thousand mails from them —
 * so at full weight it would sit on every message in every thread competing with the two
 * things a header is for: who wrote, and when. Focus shows it too, or it would be a
 * control only a mouse can find.
 */
.mb-remember {
  opacity: 0;
  transition: opacity 0.12s ease-out;
}

.mb-msg:hover .mb-remember,
.mb-remember:focus-visible {
  opacity: 1;
}

/* Whoever cannot hover gets it always: a coarse pointer has no „under the pointer". */
@media (hover: none) {
  .mb-remember {
    opacity: 1;
  }
}

.mb-msg-who {
  display: grid;
  gap: 0.1rem;
  font-size: 0.85rem;
}

.mb-msg-who span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.mb-msg .mb-when {
  flex: none;
  font-size: 0.78rem;
  color: var(--muted);
}

.mb-body {
  margin: 0.8rem 0 0;
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mb-quote {
  color: var(--dim);
}

.mb-body-missing {
  margin: 0.8rem 0 0;
  font-size: 0.9rem;
  color: var(--dim);
}

.mb-msg iframe {
  width: 100%;
  height: 22rem;
  margin-top: 0.8rem;
  border: 0;
}

.mb-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.mb-attachments a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8rem;
  text-decoration: none;
}

/* --- writing a mail ----------------------------------------------------------- */
/*
 * 🚨 A MAIL IS NOT A FORM, AND THAT WAS THE WHOLE PROBLEM. The dialog was the kit's
 * `form-grid`: every line a floating label over a bordered box, two to a row. That is the
 * right shape for „Konto anlegen" and the wrong one for a letter — An, Kopie and Betreff
 * came out as three equal boxes, the body was one more box the same size as the subject,
 * and „Datei anhängen" and „Senden: Sofort" stood as further rows ABOVE the button.
 *
 * What a mail client draws instead, and what these rules do: a small header of hairline
 * rows, one large sheet that takes every pixel left over, and a bar at the bottom with the
 * things that qualify sending. The fields are unchanged — only their treatment is.
 */

.mb-compose {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
}

.mb-compose-head {
  display: grid;
}

/* One line: the label in a fixed column, the box borderless on a hairline. */
.mb-compose-head .field {
  display: grid;
  /* Wide enough for „Blindkopie (Bcc)" on one line: wrapped to two, the label column
     grows taller than its own row and the header stops being a set of lines. */
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.5rem;
  padding: 0;
  border-bottom: 1px solid var(--line-soft);
}

/* 🚨 THE `[hidden]` TRAP, CAUGHT ON SCREEN THE FIRST TIME THIS RENDERED. `display: grid`
   one rule up outranks the user agent's `[hidden] { display: none }`, so Kopie and
   Blindkopie — which `copyFields()` hides until somebody asks for them — stood open in
   every new mail. The same rule exists twice more in this file, for the same reason. */
.mb-compose-head .field[hidden] {
  display: none;
}

.mb-compose-head .field > label {
  margin: 0;
  padding-top: 0.55rem;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--muted);
}

/* „Pflichtfeld" beside every address is noise on a screen where the An line is obviously
   required; the form still refuses an empty one and says so there. */
.mb-compose-head .field > label .req {
  display: none;
}

.mb-compose-head .field > input,
.mb-compose-head .field > select {
  padding: 0.5rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.mb-compose-head .field > input:focus,
.mb-compose-head .field > select:focus {
  outline: none;
  box-shadow: none;
}

/* The row itself carries the focus mark, so the whole line lights up rather than a box
   inside it — which is what makes these read as lines and not as fields. */
.mb-compose-head .field:focus-within {
  border-bottom-color: var(--accent);
}

/*
 * The hint under Bcc is worth its two lines exactly once — while somebody is standing in
 * the field. Permanently visible it turns the header back into a form; never visible and
 * the one sentence that prevents a copied-in competitor is gone.
 */
.mb-compose-head .field .hint {
  display: none;
  grid-column: 2;
  margin: 0 0 0.4rem;
}

.mb-compose-head .field:focus-within .hint {
  display: block;
}

.mb-compose-head .field .err-text {
  grid-column: 2;
}

/* 🚨 THE SUGGESTIONS ARE POSITIONED AGAINST THIS WRAPPER, so in a two-column row it has
   to land under the BOX and not under the label — otherwise the list is as wide as the
   word „Blindkopie" and every name in it wraps to three lines. Seen on screen. */
.mb-compose-head .field .mb-suggest-wrap {
  grid-column: 2;
}

.mb-compose-to {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--line-soft);
}

.mb-compose-to .field {
  border-bottom: 0;
}

.mb-compose-to .mb-copies {
  align-self: center;
  margin: 0;
}

/* The sheet. No border, no label, and it grows into whatever the dialog has left. */
.mb-compose-sheet {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  padding-top: 0.5rem;
}

.mb-compose-sheet .mb-rich-wrap {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
}

.mb-compose-sheet .mb-rich-label {
  display: none;
}

.mb-compose-sheet .mb-rich {
  min-height: 11rem;
  overflow-y: auto;
  padding: 0.6rem 0;
  border: 0;
  background: transparent;
}

.mb-compose-sheet .mb-rich:focus {
  outline: none;
}

/* The bar: attachments on the left, the time on the right, both quiet. */
.mb-compose-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line-soft);
}

.mb-compose-tools .mb-schedule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
}

/* „Senden" as a word over a picker reading „Sofort" says the same thing twice, next to a
   button that already says it. The picker alone is the sentence. */
.mb-compose-tools .mb-schedule > .field > label {
  display: none;
}

.mb-compose-tools .mb-files-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.mb-compose-tools .mb-guarantee {
  flex: 1 0 100%;
  margin: 0;
}

/*
 * The suggestions under a recipient box.
 *
 * 🚨 THE WRAPPER IS ZERO HIGH ON PURPOSE. The list is positioned against it and must not
 * take part in the layout: a suggestion list that pushed the subject line down would move
 * the thing somebody is about to click, every time they type a letter.
 */
.mb-suggest-wrap {
  position: relative;
  height: 0;
}

.mb-suggest {
  position: absolute;
  inset-inline: 0;
  top: 0.2rem;
  z-index: 5;
  max-height: 15rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 6px 20px color-mix(in oklab, var(--fg) 18%, transparent);
}

/* Same trap as the file preview: our own `display` would outrank `[hidden]`. */
.mb-suggest[hidden] {
  display: none;
}

.mb-suggest li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius);
  cursor: pointer;
}

.mb-suggest li.is-active,
.mb-suggest li:hover {
  background: var(--surface-2);
}

.mb-suggest-name {
  font-weight: 600;
}

.mb-suggest-mail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--muted);
}

/*
 * A file with a preview is a small block rather than a chip: the link and the button sit on
 * one line, the preview opens under them, and the whole thing takes the full width so an
 * opened picture does not shove its neighbours out of the row.
 */
.mb-file {
  flex: 1 0 100%;
}

.mb-file-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/*
 * 🚨 `display` HERE WOULD BEAT `[hidden]`. A rule of our own on the element outranks the
 * user-agent's `[hidden] { display: none }`, and the preview would stand open from the first
 * render — so the attribute is honoured explicitly rather than trusted.
 */
.mb-file-preview {
  display: block;
  margin-top: 0.5rem;
}

.mb-file-preview[hidden] {
  display: none;
}

.mb-file-preview img {
  max-width: 100%;
  max-height: 60vh;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.mb-file-preview object {
  width: 100%;
  height: 70vh;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/*
 * „Cc/Bcc" sits in the grid cell beside „An", and without this it floats at the top of
 * that cell, level with the LABEL rather than with the box it belongs to — where it reads
 * as a second heading instead of a thing to press.
 */
.mb-copies {
  align-self: end;
  justify-self: start;
  margin-bottom: 0.35rem;
}

/* The attachment row: a button that is really a label, and the list under it. */
.mb-files-box {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.5rem;
}
/*
 * 🚨 HIDDEN, NOT ABSENT. A file input cannot be styled and its own button says „Choose
 * files" in the browser's language, which in a German screen is the one control that
 * suddenly speaks English. The `<label for>` above it IS the button; the input has to stay
 * in the document for the label to open it, and `display: none` would take the keyboard
 * path with it — so it is clipped instead.
 */
.mb-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.mb-files {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}
.mb-files li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.mb-file-busy {
  opacity: 0.7;
}

.mb-reply {
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

/* --- when a mail is meant to leave ------------------------------------------------ */

.mb-schedule {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--line-soft);
}

.mb-when-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0 0.8rem;
}

/* The [hidden] trap, and this file's only instance of it: `display: grid` one rule up
   beats the UA stylesheet's `[hidden] { display: none }`, so without this the two pickers
   stay visible and editable under „Sofort" while every reader of the code believes they
   are gone. See admin.css, which has it three times over. */
.mb-when-rows[hidden] {
  display: none;
}

/* The sentence about who would be holding the mail. It is the most important text in the
   dialog and is deliberately not styled as a hint — a promise a person is about to rely
   on should not look like small print. */
.mb-guarantee:not(:empty) {
  margin: 0;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--fg);
  font-size: 0.85rem;
}

/* --- the outbox ------------------------------------------------------------------- */

.mb-out-head {
  margin: 0;
  font-size: 0.95rem;
}

.mb-out {
  display: grid;
  gap: 0.3rem;
  padding: 0.7rem 0.85rem;
  border-inline-start: 3px solid var(--line);
}

.mb-out + .mb-out {
  border-top: 1px solid var(--line-soft);
}

/* Waiting is the ordinary state and gets no colour at all; failure gets one, because it
   is the only row on this screen that somebody has to do something about. */
.mb-out[data-state="gescheitert"] {
  border-inline-start-color: var(--bad);
}

.mb-out[data-state="übergeben"] {
  border-inline-start-color: var(--ok);
}

/* A proposal is the second row somebody has to act on, and the only one that is waiting
   on a decision rather than on a clock. */
.mb-out[data-state="vorgemerkt"] {
  border-inline-start-color: var(--accent);
}

.mb-out-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.mb-out-when {
  flex: none;
  color: var(--muted);
  font-size: 0.78rem;
}

.mb-out-to {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.mb-out-text {
  margin: 0;
  overflow: hidden;
  color: var(--dim);
  font-size: 0.82rem;
  line-height: 1.45;
  /* Three lines of the mail, so a person can tell two scheduled mails apart without
     opening either. The whole text is in the draft on the server. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.mb-out-note {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.mb-out[data-state="gescheitert"] .mb-out-note {
  color: var(--bad);
}

.mb-out-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

/* --- „Mailprogramme": device passwords -------------------------------------------- */

.mb-logins {
  display: grid;
  gap: 0.85rem;
}

.mb-login-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.mb-login-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.mb-login {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.45rem 0.6rem;
}

.mb-login + .mb-login {
  border-top: 1px solid var(--line);
}

.mb-login-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mb-login-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: end;
}

/* „Signatur": remove on the left of save, both at the right edge under the box. */
.mb-signature-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* The one moment the secret exists outside the mail server: set apart, never repeated. */
.mb-login-secret {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.mb-login-secret h3,
.mb-login-secret p {
  margin: 0;
}

.mb-login-value {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.mb-login-value code {
  font-size: 1rem;
  word-break: break-all;
}

.mb-login-settings {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem 0.8rem;
  margin: 0;
  font-size: 0.85rem;
}

.mb-login-settings dt {
  color: var(--muted);
}

.mb-login-settings dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.mb-request-add {
  display: grid;
  gap: 0.6rem;
}

/* The one domain there is, beside the local part — a fact, not a choice. */
.mb-request-domain {
  padding-bottom: 0.55rem;
  color: var(--muted);
  /* A domain broken at its dots reads as two words. */
  white-space: nowrap;
}

/* --- tablet: two panes, and the folders behind a button --------------------------- */

@media (max-width: 75rem) {
  /* 🚨 OUT OF FLOW, so the grid has three children left — list, grip, reader — and needs
     no second template that could disagree with the first. The list keeps the width
     somebody dragged it to, but never past two fifths: a list wider than the mail beside
     it is the thing this whole band exists to prevent. */
  .mb-app {
    grid-template-columns: clamp(15rem, var(--mb-list), 40%) auto minmax(0, 1fr);
  }

  .mb-grip[data-which="folders"] {
    display: none;
  }

  .mb-folders {
    position: absolute;
    z-index: 3;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(19rem, 82vw);
    border-inline-end: 1px solid var(--line);
    box-shadow: 0 0 2rem color-mix(in oklab, var(--fg) 22%, transparent);
    transform: translateX(-102%);
    transition: transform 0.16s ease-out;
    /* An off-screen panel is still in the tab order, and a folder nobody can see stealing
       the focus is worse than one nobody can reach — so it is taken out of it. */
    visibility: hidden;
  }

  .mb-app[data-tree="open"] .mb-folders {
    transform: none;
    visibility: visible;
  }

  .mb-scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    background: color-mix(in oklab, var(--fg) 28%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease-out;
  }

  .mb-app[data-tree="open"] .mb-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .mb-tree-toggle {
    display: inline-flex;
  }

  .mb-list {
    border-inline-start: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .mb-folders,
    .mb-scrim {
      transition: none;
    }
  }
}

/* --- narrow ---------------------------------------------------------------------- */
/* 🚨 One pane, not two squeezed ones. Below this width a list beside a reader is two
   unusable columns, so the layout changes again rather than shrinks: the list and the
   reader take turns according to whether a conversation is open. The folder drawer from
   the band above stays exactly as it is — one mechanism, not two.

   40rem and not 48: a tablet held upright is 768 CSS pixels and belongs in the band above,
   with a list and a mail beside each other. */

/* The words go before the panes do: three controls in one row over a 300px list leaves
   the search a stub, and a magnifier beside a sidebar and a pencil is the one place where
   pictures need no learning. The names stay in aria-label and title. */
@media (max-width: 60rem) {
  .mb-tree-toggle span,
  .mb-new span {
    display: none;
  }
}

@media (max-width: 40rem) {
  .mb-app {
    grid-template-columns: minmax(0, 1fr);
  }

  .mb-grip {
    display: none;
  }

  .mb-app[data-stage="reader"] .mb-list,
  .mb-app[data-stage="list"] .mb-reader {
    display: none;
  }

  .mb-reader {
    border-inline-start: 0;
    padding: 1rem 1rem 3rem;
  }

  .mb-back {
    display: inline-flex;
  }
}

/* --- the summary, when a model was configured -----------------------------------------
 *
 * 🚨 IT MUST NOT LOOK LIKE A MESSAGE. It sits above the conversation, inside the reader,
 * and everything about it — the border, the ground, the small caps of its heading — is
 * there so that a sentence nobody in the thread wrote cannot be mistaken for one somebody
 * did. `--accent` marks the case that matters: somebody is waiting on us.
 */
.mb-ai {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.mb-ai[data-waiting="true"] {
  border-color: var(--accent);
  border-style: solid;
}
.mb-ai-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.mb-ai-head b {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.mb-ai[data-waiting="true"] .mb-ai-head b {
  color: var(--accent);
}
/* Which model wrote it, always visible and never the loudest thing in the box. */
.mb-ai-by {
  font-size: 0.75rem;
  color: var(--dim);
  white-space: nowrap;
}
.mb-ai-gist {
  margin: 0;
  color: var(--fg);
}
.mb-ai-actions {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
}
.mb-ai-actions li + li {
  margin-top: 2px;
}

/* --- the box a mail is written in ------------------------------------------------- */

.mb-rich-wrap {
  display: grid;
  gap: 0.35rem;
}

.mb-rich-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--dim);
}

.mb-rich-bar {
  display: flex;
  gap: 0.15rem;
}

.mb-rich-tool {
  min-width: 2rem;
  padding: 0.25rem 0.4rem;
  font-size: 0.9rem;
  line-height: 1.2;
}

.mb-rich {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  line-height: 1.5;
  overflow-y: auto;
  max-height: 22rem;
}

.mb-rich:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* 🚨 The paragraphs a browser makes in a contenteditable are ordinary <p>s and inherit a
   margin from wherever. Spelling them out here is what makes the box look like the mail
   it will become rather than like a stack of widely spaced blocks. */
.mb-rich p {
  margin: 0 0 0.4rem;
}

.mb-rich p:last-child {
  margin-bottom: 0;
}

.mb-rich blockquote {
  margin: 0.5rem 0;
  padding-left: 0.7rem;
  border-left: 2px solid var(--line);
  color: var(--dim);
}

.mb-rich ul,
.mb-rich ol {
  margin: 0.3rem 0;
  padding-left: 1.4rem;
}

.mb-rich a {
  color: var(--accent);
}

/* 🚨 A LOGO IS 900 PIXELS WIDE AND THE BOX IS 400. Left alone, a picture dropped into the
   editor pushes the whole sheet sideways and the person writing sees a horizontal
   scrollbar instead of their mail. The cap is on the SHOWING, not on the file: what is
   sent is the picture as it is, and a mail client at the other end does the same thing
   with it. */
.mb-rich img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* Selected, it should be obvious that it is one object and can be deleted with one key. */
.mb-rich img::selection {
  background: color-mix(in oklab, var(--accent) 40%, transparent);
}