/* mail: Mailen: mailklienten (/mail, /mail/t/:id), skriva (/mail/ny), snippets, utkasten
   och autoutkasten (/mail/utkast), och den gamla inkorgen (/mail/live). Ägare: vyn "mail".

   Designnatten 2026-10-20 ("Lugn precision"): Superhuman-tempot i Doits tokens och
   komponenter. Sidhuvudet är pageHeader(), knapparna button(), menyerna menu() och de
   tomma lägena emptyState(); här står bara läge, mått och mailens egna delar.
   Ordningen: listsidan (sidhuvudet, flikraden, raderna), tråden (verktygsraden,
   meddelandena, papperet för HTML-mail, handlingsraden, kontaktpanelen), skrivrutan,
   snippets och de äldre sidorna. Telefonens regler står under det de ändrar. */

@layer views {

/* ── .mailc ──────────────────────────────────────────────────────────────── */

/* Mailens sidor: lite tätare text, en bredd som linjerar med listan. */
.mailc { --who-w: 200px; max-width: 1280px; margin: 0; font-size: var(--fs-14); }
.mailc [hidden], [data-compose][hidden] { display: none; }
.mailc .page-head { margin-bottom: var(--space-5); }
@media (max-width: 1099px) {
  .mailc { --who-w: 150px; }
}

/* Sök och Skriv till höger om rubriken. */
.mailc__tools { display: flex; align-items: center; gap: var(--space-4); }
.mailc__search { position: relative; display: flex; align-items: center; }
.mailc__search .icon { position: absolute; left: var(--space-5); width: 15px; height: 15px; color: var(--text-3); pointer-events: none; }
.mailc__search input {
  width: 220px; height: 32px; padding: 0 var(--space-9);
  border: 1px solid transparent; border-radius: var(--r-md); background: var(--surface);
  font-size: var(--fs-14); color: var(--text);
  transition: width var(--dur) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.mailc__search input::placeholder { color: var(--text-3); }
.mailc__search input:focus { width: 320px; background: var(--bg); }
.mailc__search input::-webkit-search-cancel-button { display: none; }
.mailc__search kbd { position: absolute; right: var(--space-4); }
.mailc__search input:focus + kbd { display: none; }

@media (max-width: 859px) {
  /* Telefonen: rubriken ensam, sökfältet på hela bredden under den (som i iOS). */
  .mailc .page-head__row { flex-wrap: wrap; row-gap: var(--space-5); }
  .mailc .page-head__actions { flex: 1 1 100%; }
  .mailc__tools { flex: 1; }
  .mailc__search { flex: 1; }
  .mailc__search input, .mailc__search input:focus { width: 100%; height: var(--hit); font-size: var(--fs-17); border-radius: var(--r-lg); }
  .mailc__notify { display: none; }
  /* Skriv i tumzonen: en rund knapp ovanför bottenmenyn, som + på listsidorna. */
  .mailc__compose.btn {
    position: fixed; z-index: var(--z-tabbar);
    right: calc(var(--gutter) + env(safe-area-inset-right));
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-6));
    width: 56px; height: 56px; min-width: 56px; padding: 0; gap: 0;
    border-radius: 50%; font-size: 0; box-shadow: var(--shadow-lg);
  }
  .mailc__compose.btn .icon { width: 24px; height: 24px; }
  .mailc[data-mail-list] { padding-bottom: var(--space-12); }
}

/* ── .mailc__bar och .msplit ─────────────────────────────────────────────── */

/* Flikraden: sticky, 44 px, flikarna rullar i sidled när de inte ryms och Mer
   och kontot står utanför (en meny inuti en rullande rad klipps). */
/* --titlebar-h finns bara i Doit.app (body.mac-unified, mac.css): där fastnar
   raden under titelraden i stället för bakom den. */
.mailc__bar {
  position: sticky; top: var(--titlebar-h, 0px); z-index: var(--z-sticky);
  display: flex; align-items: stretch; gap: var(--space-4);
  min-height: 44px; margin: 0 0 var(--space-2);
  background: var(--bg); box-shadow: inset 0 -1px 0 var(--line);
}
/* En öppen meny är i telefonen ett ark med scrim (position: fixed), men den
   sticky raden är en egen stapelkontext: utan det här hamnade arket under
   bottenmenyn, Skriv och trådens handlingsrad (Släng och Egna flikar gick
   inte att nå). Gäller också trådens verktygsrad. */
.mailc__bar:has(details[open]), .mconv__bar:has(details[open]) { z-index: var(--z-overlay); }
.msplit {
  flex: 1; min-width: 0; display: flex; align-items: stretch; gap: var(--space-2);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.msplit::-webkit-scrollbar { display: none; }
.msplit__tab {
  display: inline-flex; align-items: center; gap: var(--space-3); flex: none;
  padding: 0 var(--space-4);
  font-size: var(--fs-14); font-weight: var(--fw-500); color: var(--text-2); text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.msplit__tab:hover { color: var(--text); }
.msplit__tab.is-active { color: var(--text); font-weight: var(--fw-600); box-shadow: inset 0 -2px 0 var(--accent); }
.msplit__tab:focus-visible { outline-offset: -2px; border-radius: var(--r-sm); }
.msplit__count { font-size: var(--fs-12); font-weight: var(--fw-600); color: var(--accent); font-variant-numeric: tabular-nums; }
.msplit__count--faint { color: var(--text-3); font-weight: var(--fw-500); }

/* Mer och kontot: menu() i flikradens höjd. */
.mailc__menus { flex: none; display: flex; align-items: center; gap: var(--space-2); }
.mailc__menus .menu > summary { color: var(--text-2); }
.mailc__menus .menu.is-current > summary { color: var(--text); font-weight: var(--fw-600); }
.mailc__menus .menu > summary .msplit__count { margin-left: var(--space-2); }
/* Ikonen (⋯, konto) bara där etiketten inte får plats. */
.mailc__menus .menu > summary > .icon:not(.menu__chevron) { display: none; }
.mailc__menus .mfilter.is-current > summary { color: var(--accent); }
@media (max-width: 1099px) {
  /* Mac-fönstret: kontot som ikon, så att alla flikar får plats. */
  .mailc__menus .mfilter > summary > .icon:not(.menu__chevron) { display: inline-block; }
  .mailc__menus .mfilter .mailc__menu-label, .mailc__menus .mfilter .menu__chevron { display: none; }
}
.mailc__menus .menu__item .msplit__count { margin-left: auto; }

@media (max-width: 859px) {
  /* Telefonen: hela bredden ut till kanten, så att raden kan rullas med tummen. */
  .mailc__bar { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); gap: var(--space-2); }
  .msplit__tab { min-height: var(--hit); padding: 0 var(--space-4); font-size: var(--fs-15); }
  .mailc__menus .menu > summary { font-size: var(--fs-15); padding-inline: var(--space-2); }
  /* Mer som ⋯ (siffran syns kvar), så att flikarna får bredden. */
  .mailc__menus .menu > summary > .icon:not(.menu__chevron) { display: inline-block; width: 20px; height: 20px; }
  .mailc__menus .mailc__menu-label { font-size: 0; }
  .mailc__menus .mailc__menu-label .msplit__count { font-size: var(--fs-12); }
  .mailc__menus .menu__chevron { display: none; }
  /* En vy under Mer är vald: etiketten står i stället för ⋯, så att man ser var man är. */
  .mailc__menus .msplit__more.is-current > summary > .icon:not(.menu__chevron) { display: none; }
  .mailc__menus .msplit__more.is-current .mailc__menu-label { font-size: var(--fs-15); }
  /* Flikarna tonar ut mot kanten: det finns fler åt höger. */
  .msplit { -webkit-mask-image: linear-gradient(to right, currentColor calc(100% - 24px), transparent); mask-image: linear-gradient(to right, currentColor calc(100% - 24px), transparent); }
}

/* ── .mlist och .mrow ────────────────────────────────────────────────────── */

/* En rad per tråd: prick, avsändare, ämne med etiketter och utdrag, meta.
   36 px på datorn. Avdelaren börjar där texten börjar (efter pricken). */
.mlist { list-style: none; margin: 0; padding: 0; }
.mrow { position: relative; --row-inset: calc(var(--space-4) + 12px + var(--space-5)); }
.mrow + .mrow::before { content: ""; position: absolute; top: 0; left: var(--row-inset); right: 0; border-top: 1px solid var(--line); }
.mrow.is-selected::before, .mrow.is-selected + .mrow::before, .mrow.is-picked + .mrow.is-picked::before { border-color: transparent; }
.mrow__link {
  display: grid; grid-template-columns: 12px minmax(0, var(--who-w)) minmax(0, 1fr) auto; gap: var(--space-5);
  align-items: center; min-height: var(--row-h); padding: var(--space-2) var(--space-4);
  border-radius: var(--r-sm); color: var(--text-2); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}
a.mrow__link:hover { background: var(--hover); }
.mrow__link:focus-visible { outline-offset: -2px; }

/* Pricken för oläst (och bocken för markerad) i första kolumnen. */
.mrow__link::before { content: ""; justify-self: center; width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.mrow--unread .mrow__link::before { background: var(--accent); }

.mrow__who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.mrow__count { margin-left: var(--space-1); font-size: var(--fs-12); color: var(--text-3); font-variant-numeric: tabular-nums; }
.mrow__draft { margin-left: var(--space-2); font-size: var(--fs-12); font-weight: var(--fw-500); color: var(--text-2); }
.mrow__text { min-width: 0; display: flex; align-items: center; gap: var(--space-3); overflow: hidden; white-space: nowrap; }
.mrow__subject { flex: 0 1 auto; min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.mrow__snippet { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.mrow__meta { display: flex; align-items: center; gap: var(--space-4); white-space: nowrap; font-size: var(--fs-13); color: var(--text-3); font-variant-numeric: tabular-nums; }
.mrow__meta .icon { width: 14px; height: 14px; }
.mrow__star { display: inline-flex; color: var(--flag); }
.mrow__attach { display: inline-flex; }
.mrow__snooze, .mrow__failed { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-12); color: var(--text-2); }
.mrow__failed { color: var(--danger); font-weight: var(--fw-500); }
.mrow__time { min-width: 44px; text-align: right; }
/* Smal lista (Doit.app-fönstret, 920 px): utdraget blev fragment ("— Hej …").
   Det går bort och ämnet får platsen. Bara trådlistorna: i Öppnat och
   Utkorgen bär utdraget själva uppgiften. */
@media (min-width: 860px) {
  .mlist[data-selectable] { container-type: inline-size; }
}
@container (max-width: 1000px) {
  .mlist[data-selectable] .mrow__snippet { display: none; }
  .mlist[data-selectable] .mrow__subject { max-width: none; }
}
/* Öppnat (Recent Opens) har ingen olästprick: ingen tom kolumn till vänster. */
.mopens .mrow { --row-inset: var(--space-4); }
.mopens .mrow__link { grid-template-columns: minmax(0, var(--who-w)) minmax(0, 1fr) auto; }
.mopens .mrow__link::before { display: none; }

/* Läst: lugnare, oläst: fet. */
.mrow:not(.mrow--unread) .mrow__who, .mrow:not(.mrow--unread) .mrow__subject { color: var(--text-2); }
.mrow--unread .mrow__who, .mrow--unread .mrow__subject { font-weight: var(--fw-600); color: var(--text); }
.mrow--unread .mrow__time { color: var(--text); font-weight: var(--fw-600); }

/* Etiketterna: märkets form (blocket "Märkenas form" i components.css) och
   tonerna här. Testerna läser klasserna, så de står kvar. */
.mrow__label { flex: none; background: var(--surface); color: var(--text-2); }
.mrow__label--auto { background: var(--surface); color: var(--text-2); }
/* Svara, Väntar på svar, Uppgift och Projekt är kategorier, inga handlingar:
   samma neutrala märke som i mailkön på Tasks. Färgen sparas till det den
   betyder i resten av Doit (orange flagga, accent handling, lila TSS). */

/* Markerad med tangentbordet: tonad bakgrund och accentkanten (samma som listorna). */
.mrow.is-selected .mrow__link { background: var(--selected-bg); box-shadow: inset 3px 0 0 var(--selected-edge); }
/* Flera markerade (x): en bock i prickens kolumn. */
.mrow.is-picked .mrow__link { background: var(--selected-bg); }
.mrow.is-picked .mrow__link::before {
  content: "✓"; width: 14px; height: 14px; border-radius: var(--r-xs);
  background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-11); font-weight: var(--fw-700); line-height: 14px; text-align: center;
}
/* Klart i listan: raden tonar ut och glider åt sidan på 120 ms, sedan tar
   skriptet bort den (ingen rörelse vid prefers-reduced-motion, base.css). */
.mrow { transition: opacity var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease); }
.mrow.is-leaving { opacity: 0; translate: var(--space-6) 0; pointer-events: none; }
.mrow[hidden] { display: none; }

@media (max-width: 859px) {
  /* Telefonen: tre nivåer som i iOS Mail — avsändare och tid, ämne, utdrag. */
  .mrow { --row-inset: calc(var(--space-2) + 12px + var(--space-4)); }
  .mrow__link {
    grid-template-columns: 12px minmax(0, 1fr) auto; grid-template-rows: auto auto;
    column-gap: var(--space-4); row-gap: var(--space-1);
    align-items: baseline; min-height: var(--row-h-touch); padding: var(--space-5) var(--space-2);
  }
  .mrow__link::before { align-self: center; grid-row: 1; }
  .mrow__who { font-size: var(--fs-17); grid-column: 2; grid-row: 1; }
  .mrow__meta { grid-column: 3; grid-row: 1; font-size: var(--fs-15); gap: var(--space-3); }
  .mrow__text { grid-column: 2 / -1; grid-row: 2; flex-wrap: wrap; row-gap: var(--space-1); white-space: normal; font-size: var(--fs-15); }
  .mrow__subject { max-width: calc(100% - 96px); white-space: nowrap; }
  .mrow__text:not(:has(.mrow__label)) .mrow__subject { max-width: 100%; }
  .mrow__text .mrow__label ~ .mrow__label { display: none; }
  .mrow__dash { display: none; }
  .mrow__snippet {
    flex: 1 0 100%; white-space: normal; color: var(--text-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: var(--lh-row);
  }
  .mrow__time { min-width: 0; }
  .mopens .mrow { --row-inset: var(--space-2); }
  .mopens .mrow__link { grid-template-columns: minmax(0, 1fr) auto; }
  .mopens .mrow__who { grid-column: 1; }
  .mopens .mrow__meta { grid-column: 2; }
  .mopens .mrow__text { grid-column: 1 / -1; }
}

/* ── Under listan ────────────────────────────────────────────────────────── */

.mailc__zero { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: var(--space-7) 0 0; }
.mailc__zero .btn { color: var(--text-2); }
.mailc__zero form { display: contents; }
.mailc__note { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; font-size: var(--fs-13); color: var(--text-2); }
.mailc__note .icon { width: 15px; height: 15px; flex: none; }
.mailc__note--error { color: var(--danger); }
/* Tangenterna: sist, i --text-3 (ingen opacitet på text). Döljs på pekskärm (.keys-hint). */
.mailc__keys { margin: var(--space-9) auto 0; max-width: 72ch; font-size: var(--fs-12); line-height: var(--lh-text); color: var(--text-3); text-align: center; }

/* Flera markerade: en lugn rad nere i bild. */
.mbulk {
  position: sticky; bottom: var(--space-6); z-index: var(--z-sticky);
  width: fit-content; max-width: 100%; margin: var(--space-5) auto 0;
  padding: var(--space-4) var(--space-6); border-radius: var(--r-full);
  background: var(--elevated); color: var(--text); box-shadow: var(--shadow-md);
  font-size: var(--fs-13); font-weight: var(--fw-500); font-variant-numeric: tabular-nums;
}
.mbulk .keys-hint { color: var(--text-2); font-weight: var(--fw-400); }
@media (max-width: 859px) {
  .mbulk { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-4)); }
}

/* Egna flikar: överst, under flikraden, som ett lugnt kort. */
.mailc__splits { margin: var(--space-4) 0 var(--space-6); padding: var(--space-6); border-radius: var(--r-lg); background: var(--surface); }
.mailc__splits-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.mailc__splits-title { font-size: var(--fs-15); font-weight: var(--fw-600); }
.mailc__splits-hint { margin: var(--space-2) 0 var(--space-5); font-size: var(--fs-13); color: var(--text-2); line-height: var(--lh-text); }
.mailc__splits-list { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.mailc__splits-list li { display: flex; align-items: center; gap: var(--space-4); min-height: var(--row-h); }
.mailc__splits-list li + li { border-top: 1px solid var(--line); }
.mailc__splits-list form { margin-left: auto; }
.mailc__splits-name { font-weight: var(--fw-600); }
.mailc__splits-form { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.mailc__splits-form input { flex: 1 1 180px; }

/* Recent Opens: pricken i --ok i stället för ett ●-tecken. */
.mopens__eye { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

/* ── .mconv: tråden ──────────────────────────────────────────────────────── */

.mconv { max-width: 1180px; }
/* Verktygsraden: Inkorgen till vänster, det man gör med tråden till höger. */
.mconv__bar {
  position: sticky; top: var(--titlebar-h, 0px); z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  min-height: 48px; background: var(--bg); box-shadow: inset 0 -1px 0 var(--line);
}
.mailc__back {
  display: inline-flex; align-items: center; gap: var(--space-3); min-height: 32px;
  color: var(--text-2); font-weight: var(--fw-500); text-decoration: none; white-space: nowrap;
}
.mailc__back:hover { color: var(--text); }
.mailc__back .icon { width: 16px; height: 16px; }
.mconv__actions { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.mconv__form { display: contents; }
.mconv__actions .btn { color: var(--text-2); }
.mconv__actions .btn:hover { color: var(--text); }
.mconv__star.is-on { color: var(--flag); }
.mconv__star.is-on:hover { color: var(--flag); }
.mconv__star kbd { color: var(--text-3); }
@media (max-width: 1099px) {
  /* Mac-fönstret och smala skärmar: bara ikonerna för det som är mer sällan. */
  .mconv__wide .mconv__label { display: none; }
}
/* Etikett och Flytta i ⋯-menyn behövs bara i telefonen, där knapparna döljs. */
@media (min-width: 860px) {
  .mconv__more .menu__item[data-narrow] { display: none; }
}
@media (max-width: 859px) {
  .mconv__bar { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--space-2) var(--gutter); gap: var(--space-2); }
  .mailc__back { min-height: var(--hit); padding-inline: var(--space-3); font-size: var(--fs-17); color: var(--accent); }
  .mailc__back .icon { width: 20px; height: 20px; }
  .mconv__label, .mconv__wide { display: none; }
}

.mconv__head { max-width: 760px; margin: var(--space-8) 0 var(--space-6); }
.mconv__title { font-size: var(--fs-24); line-height: var(--lh-tight); font-weight: var(--fw-700); letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; }
.mconv__sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 0; font-size: var(--fs-13); color: var(--text-2); }
.mconv__remind { display: inline-flex; align-items: center; gap: var(--space-2); }
.mconv__remind .icon { width: 14px; height: 14px; }
.mconv__muted { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0 0; padding: var(--space-3) var(--space-5); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-13); color: var(--text-2); }
.mconv__muted .icon { width: 15px; height: 15px; }
.mconv__note { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0; font-size: var(--fs-13); color: var(--text-2); }
@media (max-width: 859px) {
  .mconv__title { font-size: var(--fs-28); }
}

/* Lässpalten (760 px) och kontaktpanelen bredvid på bred skärm. */
.mconv__body { display: grid; gap: var(--space-10); }
@media (min-width: 1100px) {
  .mconv__body { grid-template-columns: minmax(0, 760px) 260px; }
}
.mconv__main { min-width: 0; }
.mconv__messages { margin: 0 0 var(--space-6); border-top: 1px solid var(--line); }

/* Sammanfattningen: en lugn yta överst, rubriken med vanliga bokstäver. */
.msummary { margin: 0 0 var(--space-6); padding: var(--space-5) var(--space-6); border-radius: var(--r-lg); background: var(--surface); }
.msummary__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--fs-13); font-weight: var(--fw-600); color: var(--text); }
.msummary__head .icon { width: 14px; height: 14px; color: var(--text-3); }
.msummary__by { font-weight: var(--fw-400); color: var(--text-2); }
.msummary__text { white-space: pre-wrap; font-size: var(--fs-14); line-height: var(--lh-text); }

/* ── .mmsg: ett meddelande ───────────────────────────────────────────────── */

/* Hopfällt: avatar, avsändare, utdrag, tid. Öppet: mottagarna och texten under,
   i textens spalt (44 px in: avatarens 32 + 12). */
.mmsg { --msg-inset: calc(32px + var(--space-5)); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--titlebar-h, 0px) + 64px); }
.mmsg__head {
  display: grid; grid-template-columns: 32px auto minmax(0, 1fr) auto; gap: var(--space-5); align-items: center;
  min-height: 52px; padding: var(--space-3) var(--space-2); cursor: pointer; list-style: none;
  border-radius: var(--r-sm); transition: background-color var(--dur-fast) var(--ease);
}
.mmsg__head::-webkit-details-marker { display: none; }
.mmsg__head:hover { background: var(--hover); }
.mmsg[open] > .mmsg__head:hover { background: none; }
.mmsg__head:focus-visible { outline-offset: -2px; }
.mmsg__head .avatar { width: 32px; height: 32px; font-size: var(--fs-12); }
.mmsg__from { font-weight: var(--fw-600); font-size: var(--fs-14); color: var(--text); white-space: nowrap; }
.mmsg__snippet { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-14); color: var(--text-2); }
.mmsg[open] .mmsg__snippet { visibility: hidden; }
.mmsg__time { display: inline-flex; align-items: center; gap: var(--space-4); white-space: nowrap; font-size: var(--fs-13); color: var(--text-3); font-variant-numeric: tabular-nums; }
.mmsg__clip { display: inline-flex; align-items: center; gap: var(--space-1); }
.mmsg__clip .icon { width: 13px; height: 13px; }
.mmsg--draft { border-bottom-style: dashed; }

/* Mottagarna: "till Philip, kopia Sara" — klick fäller ut adresserna. */
.mmsg__meta { margin: calc(-1 * var(--space-3)) var(--space-2) var(--space-4) var(--msg-inset); font-size: var(--fs-13); color: var(--text-2); }
.mmsg__meta-line { display: inline-flex; align-items: center; min-height: 24px; cursor: pointer; list-style: none; overflow-wrap: anywhere; }
.mmsg__meta-line::-webkit-details-marker { display: none; }
.mmsg__meta-line::after { content: ""; width: 6px; height: 6px; margin-left: var(--space-3); border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; translate: 0 -2px; transition: rotate var(--dur-fast) var(--ease); }
.mmsg__meta[open] > .mmsg__meta-line::after { rotate: 225deg; translate: 0 2px; }
.mmsg__meta-line:hover { color: var(--text); }
.mmsg__people { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); margin: var(--space-2) 0 0; }
.mmsg__people dt { color: var(--text-3); }
.mmsg__people dd { margin: 0; overflow-wrap: anywhere; }
.mmsg__opens { display: flex; align-items: center; gap: var(--space-2); margin: calc(-1 * var(--space-2)) var(--space-2) var(--space-4) var(--msg-inset); font-size: var(--fs-13); color: var(--text-2); }
.mmsg__opens .icon { width: 14px; height: 14px; }
.mmsg__opens--seen { color: var(--ok); }
details.mmsg__opens { display: block; }
details.mmsg__opens > summary { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; list-style: none; }
details.mmsg__opens > summary::-webkit-details-marker { display: none; }
.mmsg__open-list { margin: var(--space-2) 0 0; padding: 0; list-style: none; color: var(--text-2); display: grid; gap: var(--space-1); }
.mmsg__open-list li { display: flex; gap: var(--space-3); }

/* Texten: klartext i appens färger, 15 px (17 i telefonen). */
.mmsg__text { padding: 0 var(--space-2) var(--space-6) var(--msg-inset); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-15); line-height: var(--lh-prose); }

/* HTML-mail ligger på ett eget papper: ett mail är ritat för vitt. I ljust läge
   syns papperet inte (samma vita som sidan); i mörkt läge är det ett ljust kort
   med rundade hörn, så att mailets egna färger går att läsa. */
.mmsg__paper { margin: 0 var(--space-2) var(--space-6) var(--msg-inset); border-radius: var(--r-lg); background: var(--paper); }
/* Skriptet sätter mailets höjd (ramens dokument mäts, så ingen fast höjd här:
   en högre ram hade mätts som sin egen höjd). */
.mmsg__frame { display: block; width: 100%; min-height: 60px; border: 0; color-scheme: light; background: transparent; }
@media (prefers-color-scheme: dark) {
  .mmsg__paper { padding: var(--space-6); box-shadow: var(--shadow-xs); }
}
.mmsg__quotes { margin: calc(-1 * var(--space-4)) 0 var(--space-5) var(--msg-inset); }

/* Bilagorna: chips som laddar ner, "visa" förhandsvisar. */
.mmsg__files { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0 var(--space-2) var(--space-6) var(--msg-inset); font-size: var(--fs-13); }
.mmsg__files li { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-md); }
.mmsg__files a { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 32px; padding: 0 var(--space-5); color: var(--text); text-decoration: none; border-radius: var(--r-md); }
.mmsg__files a:hover { background: var(--hover); }
.mmsg__files .icon { width: 14px; height: 14px; color: var(--text-3); }
.mmsg__preview { color: var(--accent); border-left: 1px solid var(--line); border-radius: 0 var(--r-md) var(--r-md) 0; }
.mmsg__files a.mmsg__preview { color: var(--accent); }

@media (max-width: 859px) {
  /* Telefonen: läsbar storlek, texten under avatarens rad i hela bredden. */
  .mmsg { --msg-inset: 0px; }
  /* Hopfällt: namn och tid, och utdraget på en egen rad under (som i iOS Mail). */
  .mmsg__head { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 0; min-height: 56px; }
  .mmsg__head .avatar { grid-row: 1 / span 2; align-self: center; }
  .mmsg__snippet { grid-column: 2 / -1; grid-row: 2; font-size: var(--fs-15); }
  .mmsg[open] .mmsg__snippet { display: none; }
  .mmsg__from { overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-16); }
  .mmsg__text { font-size: var(--fs-17); }
  .mmsg__meta-line { min-height: var(--hit); }
  .mmsg__files a { min-height: var(--hit); }
}

/* ── .mreply: handlingsraden sist i tråden ───────────────────────────────── */

.mreply { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-6) 0; }
.mreply__task { display: contents; }
@media (max-width: 859px) {
  /* Telefonen: i tumzonen, ovanför bottenmenyn — fyra lika breda knappar med
     ikon och etikett, som en verktygsrad i iOS. */
  .mreply {
    position: sticky; z-index: var(--z-sticky);
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    flex-wrap: nowrap; gap: 0; margin: var(--space-6) calc(-1 * var(--gutter)) 0;
    padding: var(--space-2) var(--gutter);
    background: color-mix(in srgb, var(--bg-sidebar) 92%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
    box-shadow: inset 0 1px 0 var(--line);
  }
  .mreply .mreply__btn {
    flex: 1 1 0; min-width: 0; flex-direction: column; gap: var(--space-1);
    height: auto; min-height: 52px; padding: var(--space-2) var(--space-1);
    border: 0; background: none; box-shadow: none;
    font-size: var(--fs-11); font-weight: var(--fw-500); color: var(--accent);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mreply .mreply__btn .icon { width: 22px; height: 22px; }
  /* Medan man skriver har rutan sin egen Skicka: raden lämnar plats. */
  .mconv__main:has([data-compose]:not([hidden])) .mreply { display: none; }
}

/* ── .mcontact: kontaktpanelen ───────────────────────────────────────────── */

/* Under trådens verktygsrad (48 px), också i Doit.app där raden fastnar under titelraden. */
.mcontact { align-self: start; position: sticky; top: calc(var(--titlebar-h, 0px) + 64px); padding-left: var(--space-7); border-left: 1px solid var(--line); font-size: var(--fs-13); }
.mcontact__person { display: flex; align-items: center; gap: var(--space-4); }
.mcontact__person > div { min-width: 0; }
.mcontact__name { font-size: var(--fs-15); font-weight: var(--fw-600); overflow-wrap: anywhere; }
.mcontact__mail { margin: var(--space-1) 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcontact__mail a { color: var(--accent); }
.mcontact__stats { margin: var(--space-4) 0 0; color: var(--text-2); font-variant-numeric: tabular-nums; }
/* Rubrikerna med vanliga bokstäver (inga VERSALER). */
.mcontact__head { margin: var(--space-6) 0 var(--space-2); font-size: var(--fs-12); font-weight: var(--fw-600); color: var(--text-3); }
.mcontact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mcontact__list--plain li { flex-direction: column; gap: 0; }
.mcontact__list--plain .mcontact__when { margin-left: 0; font-size: var(--fs-12); }
.mcontact__list a, .mcontact__list--plain li { display: flex; align-items: baseline; gap: var(--space-3); min-height: 28px; padding: var(--space-2) var(--space-2); margin-inline: calc(-1 * var(--space-2)); border-radius: var(--r-sm); color: var(--text); text-decoration: none; line-height: var(--lh-row); }
.mcontact__list a:hover { background: var(--hover); }
.mcontact__list .icon { flex: none; width: 14px; height: 14px; color: var(--text-3); translate: 0 2px; }
.mcontact__list span:first-of-type { min-width: 0; }
.mcontact__when { margin-left: auto; flex: none; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 1099px) {
  /* Under tråden i stället för bredvid: ingen vänsterkant. */
  .mcontact { position: static; padding: var(--space-6) 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (pointer: coarse) {
  .mcontact__list a, .mcontact__mail a, .mcontact__stats a { display: flex; align-items: center; min-height: var(--hit); }
  .mcontact__stats a { display: inline-flex; justify-content: center; min-width: var(--hit); }
}

/* ── .minstant: Doits utkast ─────────────────────────────────────────────── */

.minstant { margin: var(--space-5) 0; padding: var(--space-5) var(--space-6); border-radius: var(--r-lg); background: var(--accent-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.minstant__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-3); font-size: var(--fs-13); }
.minstant__head .icon { width: 15px; height: 15px; color: var(--accent); }
.minstant__to { color: var(--text-2); }
.minstant__head .btn { margin-left: auto; }
@media (max-width: 859px) {
  /* Mottagarna på en egen rad under rubriken, så att Använd står kvar till höger om "Doits utkast". */
  .minstant__to { order: 1; flex-basis: 100%; }
}
.minstant__text { white-space: pre-wrap; font-size: var(--fs-14); line-height: var(--lh-text); }

/* ── .mcompose: skrivrutan ───────────────────────────────────────────────── */

/* Ett kort som ligger ovanpå (svarsrutan): --elevated och skugga. Fokus syns som
   fältens ring runt hela rutan, och raden man skriver i får accentfärgen. */
.mcompose { margin: var(--space-4) 0 var(--space-7); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--elevated); box-shadow: var(--shadow-sm); }
.mcompose:focus-within { border-color: var(--focus-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 30%, transparent), var(--shadow-sm); }
.mcompose.is-dropping { outline: 2px dashed var(--accent); outline-offset: 4px; }
.mcompose__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 44px; padding: var(--space-2) var(--space-4) var(--space-2) var(--space-6); border-bottom: 1px solid var(--line); background: none; }
.mcompose__mode { font-size: var(--fs-14); font-weight: var(--fw-600); color: var(--text); }
.mcompose .composer__row { padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--line); }
.mcompose .composer__label { color: var(--text-2); font-size: var(--fs-13); transition: color var(--dur-fast) var(--ease); }
.mcompose .composer__row:focus-within .composer__label { color: var(--accent); font-weight: var(--fw-500); }
/* Fältet man skriver i: en accentlinje under (fälten är ramlösa i rutan). */
.mcompose.composer .composer__input:focus, .mcompose.composer .composer__body:focus { box-shadow: inset 0 -2px 0 var(--focus-ring); }
.mcompose__tools { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); }
.mcompose__tools .btn { color: var(--text-2); }
.mcompose__tools .btn:hover { color: var(--text); }
.mcompose__num { font-size: var(--fs-13); font-weight: var(--fw-600); font-variant-numeric: tabular-nums; }
.mcompose__attach { position: relative; cursor: pointer; }
.mcompose__attach input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mcompose__attach:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mcompose__editor { min-height: 160px; font-size: var(--fs-15); line-height: var(--lh-prose); overflow-wrap: anywhere; cursor: text; }
.mcompose__editor:empty::before { content: "Skriv …"; color: var(--text-3); }
.mcompose__editor ul, .mcompose__editor ol { padding-left: var(--space-8); }
.mcompose__editor a { color: var(--accent); }
.mcompose__files { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0 var(--space-6); }
.mcompose__files:not(:empty) { padding-bottom: var(--space-4); }
.mcompose__file, .mcompose__files li { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-5); border: 1px solid var(--line-strong); border-radius: var(--r-full); font-size: var(--fs-13); }
.mcompose__files .icon { width: 13px; height: 13px; }
.mcompose__files .is-uploading { color: var(--text-3); }
.mcompose__suggest { list-style: none; position: relative; z-index: var(--z-popover); max-width: 420px; margin: calc(-1 * var(--space-1)) var(--space-6) var(--space-2) calc(46px + var(--space-6) + var(--space-5)); padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--elevated); box-shadow: var(--shadow-md); }
.mcompose__suggest li { padding: var(--space-3) var(--space-4); border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcompose__suggest li.is-active, .mcompose__suggest li:hover { background: var(--selected-bg); }
.mcompose .composer__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6); border-top: 1px solid var(--line); background: none; }
.mcompose__hint { font-size: var(--fs-12); color: var(--text-2); }
.mcompose .composer__foot .actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
@media (pointer: coarse) {
  /* Raderna i rutan är 44 px att trycka på. */
  .mcompose .composer__row { align-items: center; padding-block: 0; }
  .mcompose.composer .composer__input { min-height: var(--hit); padding-block: var(--space-4); }
  .mcompose.composer select.composer__input { padding-block: 0; }
}
@media (max-width: 859px) {
  .mcompose__head { padding-left: var(--space-5); }
  .mcompose .composer__row { padding-inline: var(--space-5); }
  .mcompose .composer__input, .mcompose .composer__body, .mcompose__editor { font-size: var(--fs-17); }
  /* Kontovalet också (task.css ger select 14 px): under 16 px zoomar iPhone in. */
  .mcompose select.composer__input { font-size: var(--fs-17); }
  .mcompose .composer__foot { padding-left: var(--space-5); }
  /* Skicka står alltid längst till höger, också när raden bryts. */
  .mcompose .composer__foot .actions { width: 100%; flex-wrap: wrap; justify-content: flex-end; }
  .mcompose__send { order: 9; }
  .mcompose__suggest { margin-left: var(--space-5); }
}
@media (max-width: 600px) {
  /* Etiketten till vänster om fältet på samma rad, som i Mail på iPhone
     (task.css ställer annars etiketten ovanför, och align-items: center
     ovan centrerade den mitt i raden). */
  .mcompose .composer__row { flex-direction: row; align-items: center; gap: var(--space-4); }
  .mcompose .composer__label { width: 46px; font-size: var(--fs-13); text-align: start; }
  .mcompose.composer .composer__input { flex: 1; }
}

/* ── .mpage: Nytt mail och Snippets ──────────────────────────────────────── */

/* En spalt på 760 px, som lässpalten i tråden. */
.mpage { max-width: 760px; margin: 0; }
/* Nytt mail: sidans rubrik säger redan "Nytt mail" — rutans etikett läses bara upp. */
.mpage .mcompose__head { justify-content: flex-end; }
.mpage .mcompose__mode { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.msnippets { list-style: none; margin: 0 0 var(--space-8); padding: 0; }
.msnippet { position: relative; display: flex; align-items: center; gap: var(--space-5); min-height: 56px; padding: var(--space-4) 0; }
.msnippet + .msnippet { border-top: 1px solid var(--line); }
.msnippet.is-selected { background: var(--selected-bg); box-shadow: inset 3px 0 0 var(--selected-edge); padding-left: var(--space-5); border-radius: var(--r-sm); }
.msnippet__body { flex: 1; min-width: 0; }
.msnippet__name { font-weight: var(--fw-600); }
.msnippet__text { margin: var(--space-1) 0 0; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msnippet__uses { flex: none; font-size: var(--fs-13); color: var(--text-3); font-variant-numeric: tabular-nums; }
.msnippet__actions { flex: none; display: flex; align-items: center; gap: var(--space-2); }
.msnippet-form { display: grid; gap: var(--space-5); padding: var(--space-6); border-radius: var(--r-lg); background: var(--surface); }
.msnippet-form__title { font-size: var(--fs-15); font-weight: var(--fw-600); }
.msnippet-form .actions { display: flex; justify-content: flex-end; gap: var(--space-3); }
@media (max-width: 599px) {
  .msnippet { flex-wrap: wrap; row-gap: var(--space-1); }
  .msnippet__body { flex: 1 1 100%; }
  .msnippet__uses { order: 3; }
  .msnippet__actions { margin-left: auto; order: 4; }
}

/* ── Autoutkast (/mail/utkast) ───────────────────────────────────────────── */

.reply-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-7); }
.reply-stats div { padding: var(--space-5); border-radius: var(--r-lg); background: var(--surface); }
.reply-stats dt { font-size: var(--fs-12); color: var(--text-2); }
.reply-stats dd { margin: var(--space-1) 0 0; font-size: var(--fs-17); font-weight: var(--fw-600); font-variant-numeric: tabular-nums; }
.reply-stats small { font-size: var(--fs-12); font-weight: var(--fw-500); color: var(--text-2); }
.replies { list-style: none; margin: 0; padding: 0; }
.reply { padding: var(--space-4) 0; }
.reply + .reply { border-top: 1px solid var(--line); }
.reply__head { display: flex; align-items: baseline; gap: var(--space-5); min-height: 28px; padding-block: var(--space-1); color: var(--text); text-decoration: none; }
.reply__head:hover .reply__subject { color: var(--text); }
.reply__from { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-600); }
.reply__subject { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.reply__when { flex: none; font-size: var(--fs-13); color: var(--text-3); font-variant-numeric: tabular-nums; }
.reply__status, .reply__needs, .reply__outcome { margin: var(--space-3) 0 0; font-size: var(--fs-14); color: var(--text-2); }
.reply__needs { color: var(--text); }
.reply__outcome { color: var(--ok); }
.reply__draft > summary { margin-top: var(--space-3); font-size: var(--fs-13); color: var(--accent); cursor: pointer; }
.reply__draft pre { margin: var(--space-3) 0 0; padding: var(--space-5); border-radius: var(--r-md); background: var(--surface); white-space: pre-wrap; font: inherit; font-size: var(--fs-14); }
.lesson { margin-bottom: var(--space-4); padding: var(--space-5) var(--space-6); border: 1px solid var(--line); border-radius: var(--r-lg); }
.lesson > summary { font-size: var(--fs-14); font-weight: var(--fw-600); cursor: pointer; }
.lesson .prose { margin-top: var(--space-4); }
.needs { list-style: none; margin: 0 0 var(--space-7); padding: 0; }
.needs li { padding: var(--space-3) 0; font-size: var(--fs-14); }
.needs li + li { border-top: 1px solid var(--line); }
.needs__count { display: inline-block; min-width: 26px; font-weight: var(--fw-600); font-variant-numeric: tabular-nums; color: var(--text); }
@media (pointer: coarse) {
  .reply__head { min-height: var(--hit); align-items: center; }
}

/* ── Den gamla inkorgen (/mail/live) och dess tråd ───────────────────────── */

.inbox { list-style: none; margin: 0; padding: 0; }
.inbox__row + .inbox__row { border-top: 1px solid var(--line); }
.inbox__link { position: relative; display: grid; grid-template-columns: minmax(120px, 200px) 1fr auto; gap: var(--space-5); align-items: baseline; padding: var(--space-5) var(--space-3); border-radius: var(--r-sm); color: var(--text); text-decoration: none; }
.inbox__link:hover { background: var(--hover); }
.inbox__from, .inbox__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox__count { font-size: var(--fs-12); color: var(--text-2); }
.inbox__snippet { color: var(--text-2); }
.inbox__meta { display: flex; gap: var(--space-4); font-size: var(--fs-13); color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.inbox__row.is-unread .inbox__from, .inbox__row.is-unread .inbox__subject { font-weight: var(--fw-600); }
.inbox__row.is-unread .inbox__link::before { content: ""; position: absolute; width: 7px; height: 7px; margin: var(--space-4) 0 0 calc(-1 * var(--space-5)); border-radius: 50%; background: var(--accent); }
@media (max-width: 599px) {
  .inbox__link { grid-template-columns: 1fr auto; }
  .inbox__text { grid-column: 1 / -1; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
.mail-thread { display: flex; flex-direction: column; gap: var(--space-5); margin-bottom: var(--space-7); }
.mail-message { padding: var(--space-5) var(--space-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg); }
.mail-message > summary { display: flex; justify-content: space-between; gap: var(--space-5); cursor: pointer; }
.mail-message__from { font-weight: var(--fw-600); }
.mail-message__time { font-size: var(--fs-13); color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mail-message__meta { margin: var(--space-2) 0 var(--space-4); font-size: var(--fs-13); color: var(--text-2); overflow-wrap: anywhere; }
.mail-message__body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--lh-text); font-size: var(--fs-15); }
.mail-task { display: flex; gap: var(--space-4); margin-top: var(--space-6); }
.mail-task input { flex: 1; }

/* ── Inställningar: signaturen (förhandsvisningen är ett mail, alltså vit) ── */

.account-signature__preview { display: block; width: 100%; max-width: 640px; height: 200px; margin: var(--space-2) 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }

/* ── Doit.app ────────────────────────────────────────────────────────────── */

/* Pilmarkör på mailens egna klickbara delar, som mac.css ger knapparna och
   raderna (flikarna, Inkorgen, meddelandenas huvuden, mottagarraden, bilagorna). */
body.in-mac :is(.msplit__tab, .mailc__back, .mmsg__head, .mmsg__meta-line, .mmsg__files a) { cursor: default; }

/* ── Avatarerna (mavatar--N, familjen behålls för äldre markup) ─────────── */

.mavatar--0 { --c: var(--avatar-0); }
.mavatar--1 { --c: var(--avatar-1); }
.mavatar--2 { --c: var(--avatar-2); }
.mavatar--3 { --c: var(--avatar-3); }
.mavatar--4 { --c: var(--avatar-4); }
.mavatar--5 { --c: var(--avatar-5); }
.mavatar--6 { --c: var(--avatar-6); }
.mavatar--7 { --c: var(--avatar-7); }
}

/* ── Mailkön på Tasks och Doits förslag i tråden ──────────────────────────
   Philip 2026-10-20: ett mail i kön är samma rad och samma tråd som i Mail. */
.mailq__list { --who-w: 200px; font-size: var(--fs-14); }
@media (max-width: 1099px) { .mailq__list { --who-w: 150px; } }
.mqueue { margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.mqueue__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-2); font-size: var(--fs-13); }
.mqueue__head .icon { width: 14px; height: 14px; }
.mqueue__note { color: var(--text); }
.mqueue__question { margin: var(--space-3) 0 var(--space-2); }
.mqueue .actions { margin-top: var(--space-3); }

/* Uppgiften mailet hör till: överst i tråden, med nästa steg och knapparna. */
.mtask { margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-md); background: var(--surface); }
.mtask__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin: 0; }
.mtask__head .icon { width: 14px; height: 14px; align-self: center; color: var(--accent); }
.mtask__kind { color: var(--text-2); font-size: var(--fs-13); }
.mtask__title { font-weight: var(--fw-600, 600); color: var(--text); text-decoration: none; }
.mtask__title:hover { text-decoration: underline; }
.mtask__status { margin-left: auto; color: var(--text-2); font-size: var(--fs-13); }
.mtask__step { margin: var(--space-3) 0 0; }
.mtask__how { margin-top: var(--space-2); font-size: var(--fs-13); color: var(--text-2); }
.mtask__how summary { cursor: pointer; }
.mtask__how-body { white-space: pre-line; margin-top: var(--space-2); }
.mtask__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }