/* SkyStack Mail — oranje huisstijl.
   Kleuren, maten en vormen zijn variabelen. De instellingenpagina zet data-attributen
   (data-theme, data-tone, data-size, …) en de accentkleur op <html>; pas hier de standaardwaarden aan. */
:root {
  /* accent: basiskleur + afgeleide waarden (zie accent_tune() in lib/prefs.php) */
  --accent-base: #f97316;
  --btn-ink: #2b1300;   /* tekstkleur op accentvlakken */
  --keep: 76%;          /* lichte modus: accent als tekst wordt hiermee verdonkerd */
  --lift: 100%;         /* donkere modus: accent als tekst wordt hiermee opgelicht */

  /* donker, warm (standaard) */
  --bg: #110a06;
  --panel: #1a110b;
  --panel-2: #241810;
  --line: rgba(255, 190, 140, .13);
  --line-2: rgba(255, 190, 140, .26);
  --text: #fbf1e8;
  --muted: #b9a08b;
  --danger: #fb7185;
  --ok: #4ade80;
  --star: #fbbf24;
  --shadow: 0 10px 40px rgba(0, 0, 0, .45);
  --accent: color-mix(in srgb, var(--accent-base) var(--lift), #fff);
  --bg-glow: color-mix(in srgb, var(--accent-base) 16%, transparent);
  --unread: color-mix(in srgb, var(--accent-base) 7%, transparent);
  --sel: color-mix(in srgb, var(--accent-base) 16%, transparent);
  --grad: linear-gradient(135deg, color-mix(in srgb, var(--accent-base) 62%, #fff), var(--accent-base) 55%, color-mix(in srgb, var(--accent-base) 82%, #000));

  /* maten en vormen (door instellingen aangepast) */
  --scale: 1;
  --radius: 14px; --r-in: 12px; --r-btn: 999px;
  --row-y: .75rem; --nav-y: .625rem; --pad: 1.5rem; --gap: 1.5rem;
  --maxw: 1400px;
  --msg-fs: 15px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #fff7ef;
  --panel: #ffffff;
  --panel-2: #fff0e2;
  --line: rgba(120, 60, 10, .12);
  --line-2: rgba(120, 60, 10, .24);
  --text: #2b1a0d;
  --muted: #7a6450;
  --danger: #e11d48;
  --ok: #15803d;
  --star: #d97706;
  --shadow: 0 10px 30px rgba(90, 45, 10, .12);
  --accent: color-mix(in srgb, var(--accent-base) var(--keep), #000);
  --bg-glow: color-mix(in srgb, var(--accent-base) 22%, transparent);
  --unread: color-mix(in srgb, var(--accent-base) 9%, transparent);
  --sel: color-mix(in srgb, var(--accent-base) 14%, transparent);
  color-scheme: light;
}
/* neutrale achtergrond (zonder oranje tint) */
:root[data-tone="neutral"] { --bg: #0b0b0c; --panel: #151516; --panel-2: #1e1e20; --line: rgba(255, 255, 255, .10); --line-2: rgba(255, 255, 255, .20); --text: #f3f3f4; --muted: #a2a2a8; }
:root[data-tone="neutral"][data-theme="light"] { --bg: #f6f5f4; --panel: #ffffff; --panel-2: #efeeed; --line: rgba(0, 0, 0, .09); --line-2: rgba(0, 0, 0, .19); --text: #1c1917; --muted: #6b665f; }

/* tekstgrootte: schaalt alles dat in rem staat mee */
:root[data-size="s"] { --scale: .92; }
:root[data-size="l"] { --scale: 1.12; }
:root[data-size="xl"] { --scale: 1.25; }
/* berichttekst (lezen en schrijven) */
:root[data-msg="s"] { --msg-fs: 14px; }
:root[data-msg="l"] { --msg-fs: 17px; }
:root[data-msg="xl"] { --msg-fs: 19px; }
/* ruimte, hoeken, breedte, lettertype */
:root[data-density="compact"] { --row-y: .4rem; --nav-y: .4rem; --pad: 1rem; --gap: 1rem; }
:root[data-density="roomy"] { --row-y: 1.05rem; --nav-y: .85rem; --pad: 1.9rem; --gap: 2rem; }
:root[data-radius="sharp"] { --radius: 6px; --r-in: 5px; --r-btn: 6px; }
:root[data-radius="round"] { --radius: 22px; --r-in: 16px; }
:root[data-width="narrow"] { --maxw: 1100px; }
:root[data-width="wide"] { --maxw: 100%; }
:root[data-font="readable"] { --font: Verdana, Geneva, Tahoma, sans-serif; }
:root[data-font="serif"] { --font: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif; }
:root[data-font="mono"] { --font: var(--mono); }
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }

* { box-sizing: border-box; }
html { font-size: calc(var(--scale) * 100%); -webkit-text-size-adjust: 100%; scrollbar-color: color-mix(in srgb, var(--accent-base) 45%, var(--panel-2)) transparent; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: .9375rem/1.55 var(--font); color: var(--text);
  background: radial-gradient(1100px 480px at 50% -120px, var(--bg-glow), transparent 70%), var(--bg);
  background-repeat: no-repeat;
}
::selection { background: color-mix(in srgb, var(--accent-base) 38%, transparent); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -.02em; }
h1 em, h2 em, h3 em { font-style: italic; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .05em; }
.ico { width: 1.125rem; height: 1.125rem; flex: none; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--panel); padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.muted { color: var(--muted); }

/* ---------- header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30; height: 4rem; display: flex; align-items: center; gap: 1.25rem; padding: 0 1.5rem;
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .625rem; color: var(--text); font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand img { width: 1.75rem; height: 1.75rem; border-radius: 7px; }
.brand strong { font-weight: 800; color: var(--accent); }
.brand em { font-style: normal; font-family: var(--mono); font-size: .6875rem; color: var(--muted); border: 1px solid var(--line-2); border-radius: var(--r-btn); padding: 2px 8px; margin-left: 2px; }
.nav { display: flex; gap: 6px; margin-left: .75rem; }
.nav a { color: var(--muted); padding: .5rem .75rem; border-radius: var(--r-btn); font-weight: 500; font-size: .875rem; }
.nav a:hover, .nav a.on { color: var(--text); background: var(--panel-2); text-decoration: none; }
.nav a.on { box-shadow: inset 0 -2px 0 var(--accent); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.me { font-size: .8125rem; color: var(--muted); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.burger { display: none; }

/* ---------- knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; cursor: pointer; border: 1px solid var(--line-2);
  background: var(--panel); color: var(--text); padding: .5625rem 1rem; border-radius: var(--r-btn); font: 600 .875rem/1 var(--font); transition: .15s;
}
.btn:hover { background: var(--panel-2); text-decoration: none; border-color: var(--accent); }
.btn.primary { background: var(--grad); color: var(--btn-ink); border-color: transparent; box-shadow: 0 6px 24px color-mix(in srgb, var(--accent-base) 35%, transparent); }
.btn.primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.btn.sm { padding: .4375rem .75rem; font-size: .8125rem; }
.btn.icon { padding: .5625rem; width: 2.375rem; height: 2.375rem; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover, .btn.ghost.on { color: var(--text); background: var(--panel-2); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- layout ---------- */
.shell { flex: 1; display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: var(--gap); width: 100%; max-width: var(--maxw); margin: 0 auto; padding: var(--pad); }
.side { position: sticky; top: 5.5rem; align-self: start; display: flex; flex-direction: column; gap: .875rem; }
.side .compose-btn { width: 100%; padding: .8125rem 1rem; font-size: .9375rem; }
.folders { list-style: none; margin: 0; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.folders a { display: flex; align-items: center; gap: .75rem; padding: var(--nav-y) .75rem; border-radius: max(6px, calc(var(--radius) - 4px)); color: var(--muted); font-weight: 500; }
.folders a:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
.folders a.on { background: var(--sel); color: var(--text); }
.folders a.on .ico { color: var(--accent); }
.folders .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { font: 600 .6875rem/1 var(--mono); padding: 4px 7px; border-radius: 999px; background: var(--grad); color: var(--btn-ink); }
.main { min-width: 0; }
.main.solo { flex: 1; display: grid; place-items: center; padding: 1.5rem; }
.footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .8125rem; padding: 1.125rem 1.5rem; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 4px 0 1.125rem; flex-wrap: wrap; }
.page-head h1 { font-size: clamp(1.625rem, 3.4vw, 2.25rem); }
.page-head p { margin: 6px 0 0; color: var(--muted); }

.flash { margin-bottom: .875rem; padding: .75rem 1rem; border-radius: max(8px, calc(var(--radius) - 2px)); border: 1px solid var(--line-2); background: var(--panel); display: flex; gap: 10px; align-items: center; }
.flash.error { border-color: color-mix(in srgb, var(--danger) 55%, transparent); background: color-mix(in srgb, var(--danger) 10%, var(--panel)); }
.flash.success { border-color: color-mix(in srgb, var(--ok) 55%, transparent); background: color-mix(in srgb, var(--ok) 10%, var(--panel)); }

/* ---------- lijst ---------- */
.searchbar { display: flex; gap: 10px; flex: 1; min-width: 15rem; max-width: 32rem; }
.searchbar input { flex: 1; }
input[type=text], input[type=email], input[type=password], select, textarea {
  width: 100%; background: var(--panel); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-in);
  padding: .6875rem .875rem; font: inherit; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-base) 24%, transparent); }
select { width: auto; padding: .5rem .75rem; border-radius: var(--r-btn); font-size: .8125rem; font-weight: 600; cursor: pointer; }
.chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.chip { font: 600 .75rem/1 var(--mono); padding: .5rem .75rem; border-radius: var(--r-btn); border: 1px solid var(--line-2); color: var(--muted); }
.chip:hover { text-decoration: none; color: var(--text); border-color: var(--accent); }
.chip.on { background: var(--sel); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }

.list-card { overflow: hidden; }
.bulkbar { display: flex; align-items: center; gap: .5rem; padding: .625rem .875rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; background: var(--panel-2); }
.bulkbar .sp { flex: 1; }
.cb { width: 1.125rem; height: 1.125rem; accent-color: var(--accent-base); cursor: pointer; }
.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: grid; grid-template-columns: 1.375rem 1.875rem 13rem minmax(0, 1fr) auto; align-items: center; gap: .75rem;
  padding: var(--row-y) 1rem; border-bottom: 1px solid var(--line); color: var(--text); transition: background .12s;
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--panel-2); }
.row.unread { background: var(--unread); box-shadow: inset 3px 0 0 var(--accent-base); }
.row.checked { background: var(--sel); }
.row .from { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.unread .from, .row.unread .subj { font-weight: 700; }
.row .subj { display: flex; gap: .5rem; align-items: center; min-width: 0; overflow: hidden; }
.row .subj span.t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .subj .ico { width: .9375rem; height: .9375rem; color: var(--muted); }
.row .date { font: .75rem var(--mono); color: var(--muted); white-space: nowrap; }
.row .rowlink { color: inherit; display: contents; }
.row .rowlink:hover { text-decoration: none; }
.star { background: none; border: 0; padding: 4px; cursor: pointer; color: var(--muted); display: grid; place-items: center; border-radius: 8px; }
.star:hover { color: var(--star); }
.star.on { color: var(--star); }
.star.on svg { fill: currentColor; }
.empty { padding: 3.5rem 1.25rem; text-align: center; color: var(--muted); }
.empty h2 { color: var(--text); font-size: 1.375rem; margin-bottom: .5rem; }
.pager { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--muted); }
.pager .btns { display: flex; gap: .5rem; }

/* ---------- bericht lezen ---------- */
.msg-head { padding: 1.375rem 1.5rem; border-bottom: 1px solid var(--line); }
.msg-head h1 { font-size: clamp(1.375rem, 2.8vw, 1.875rem); margin-bottom: 1rem; overflow-wrap: anywhere; }
.sender { display: flex; gap: .875rem; align-items: flex-start; }
.avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--grad); color: var(--btn-ink); display: grid; place-items: center; font-weight: 800; font-size: 1.125rem; flex: none; }
.meta { min-width: 0; font-size: .875rem; }
.meta b { font-weight: 700; }
.meta .kv { color: var(--muted); font-size: .8125rem; overflow-wrap: anywhere; }
.meta .kv span { color: var(--text); }
.msg-actions { display: flex; gap: .5rem; flex-wrap: wrap; padding: .875rem 1.5rem; border-bottom: 1px solid var(--line); background: var(--panel-2); align-items: center; }
.msg-actions .sp { flex: 1; }
.paper { background: #fff; border-radius: 0 0 var(--radius) var(--radius); }
.mailframe { display: block; width: 100%; border: 0; min-height: 160px; background: #fff; border-radius: 0 0 var(--radius) var(--radius); }
.plain { padding: 1.375rem 1.5rem; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font); font-size: var(--msg-fs); }
.notice { display: flex; gap: .75rem; align-items: center; justify-content: space-between; padding: .625rem 1.5rem; font-size: .8125rem; background: color-mix(in srgb, var(--accent-base) 10%, var(--panel)); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.attachments { padding: 1rem 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .625rem; }
.att { display: inline-flex; align-items: center; gap: .625rem; padding: .5625rem .875rem; border-radius: max(8px, calc(var(--radius) - 2px)); border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); font-size: .8125rem; max-width: 100%; }
.att:hover { border-color: var(--accent); text-decoration: none; }
.att small { font: .6875rem var(--mono); color: var(--muted); }

/* ---------- opstellen ---------- */
.compose { padding: 8px 0; }
.field { display: grid; grid-template-columns: 5.625rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: 4px 1.375rem; border-bottom: 1px solid var(--line); }
.field label { color: var(--muted); font-size: .8125rem; font-weight: 600; }
.field input { border: 0; border-radius: 0; background: transparent; padding: .875rem 0; box-shadow: none !important; }
.field .toggles { display: flex; gap: .5rem; }
.field.hidden { display: none; }
.compose textarea { border: 0; border-radius: 0; background: transparent; min-height: 380px; resize: vertical; padding: 1.125rem 1.375rem; font-family: var(--font); font-size: var(--msg-fs); line-height: 1.6; box-shadow: none !important; }
.compose .foot { display: flex; gap: .625rem; align-items: center; padding: .875rem 1.375rem; border-top: 1px solid var(--line); flex-wrap: wrap; background: var(--panel-2); border-radius: 0 0 var(--radius) var(--radius); }
.compose .foot .sp { flex: 1; }
.filelist { color: var(--muted); font-size: .8125rem; }
.filepick { position: relative; overflow: hidden; }
.filepick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---------- login ---------- */
.login { width: 100%; max-width: 27.5rem; padding: 2.25rem 2rem; box-shadow: var(--shadow); }
.login .brand { justify-content: center; font-size: 1.625rem; margin-bottom: 1.625rem; }
.login h1 { font-size: 2.125rem; text-align: center; margin-bottom: .625rem; }
.login p.lead { text-align: center; color: var(--muted); margin: 0 0 1.625rem; }
.login .f { margin-bottom: 1rem; }
.login .f label { display: block; font-size: .8125rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.login .btn { width: 100%; padding: .875rem; font-size: .9375rem; margin-top: 6px; }
.login .tags { display: flex; gap: .5rem; justify-content: center; margin-top: 1.375rem; flex-wrap: wrap; }
.tag { font: .6875rem var(--mono); color: var(--muted); border: 1px solid var(--line-2); border-radius: var(--r-btn); padding: 5px 10px; }

/* ---------- instellingen ---------- */
.settings { display: grid; grid-template-columns: minmax(0, 1fr) 23rem; gap: var(--gap); align-items: start; }
.set-card { padding: 1.25rem 1.5rem .5rem; margin-bottom: 1rem; }
.set-card h2 { font-size: 1.1875rem; padding-bottom: .875rem; }
.set-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .625rem 1.25rem; padding: .9375rem 0; border-top: 1px solid var(--line); align-items: start; }
.set-label { font-size: .875rem; font-weight: 600; padding-top: .25rem; }
.set-label small { display: block; font-weight: 400; font-size: .75rem; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.set-row textarea { font: .8125rem/1.5 var(--mono); min-height: 7rem; resize: vertical; }
.set-row.off { opacity: .45; }
.seg { display: flex; flex-wrap: wrap; gap: .4375rem; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: inline-block; padding: .5rem .875rem; border: 1px solid var(--line-2); border-radius: var(--r-btn); font-size: .8125rem; font-weight: 600; color: var(--muted); background: var(--panel); transition: .12s; }
.seg label:hover span { border-color: var(--accent); color: var(--text); }
.seg input:checked + span { background: var(--sel); color: var(--text); border-color: color-mix(in srgb, var(--accent) 65%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 65%, transparent); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.swatches { display: flex; flex-wrap: wrap; gap: .5rem .375rem; }
.swatch { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3125rem; width: 4.5rem; cursor: pointer; }
.swatch > input[type=radio] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.swatch .dot { position: relative; width: 2.5rem; height: 2.5rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .12s, transform .12s; }
.swatch:hover .dot { transform: scale(1.06); }
.swatch > input:checked + .dot { outline-color: var(--text); }
.swatch > input:focus-visible + .dot { outline-color: var(--accent); }
.swatch small { font-size: .75rem; color: var(--muted); }
.swatch > input:checked ~ small { color: var(--text); font-weight: 600; }
.swatch.custom .dot { background: conic-gradient(from 90deg, #fbbf24, #f97316, #ef4f12, #c8693a, #ffa87a, #fbbf24); }
.swatch.custom .dot input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.check { display: inline-flex; align-items: center; gap: .625rem; cursor: pointer; font-size: .875rem; padding-top: .125rem; }
.set-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; position: sticky; bottom: 0; padding: .875rem 0 1rem; margin-top: .25rem; background: linear-gradient(to top, var(--bg) 70%, transparent); z-index: 5; }
.set-actions .muted { font-size: .8125rem; }

.preview { position: sticky; top: 5.5rem; padding: 1.25rem; }
.pv-top { display: flex; align-items: center; gap: .75rem; }
.pv-top .meta { flex: 1; }
.pv-title { font-size: 1.375rem; margin: 1rem 0 .5rem; }
.pv-text { margin: 0 0 1rem; font-size: var(--msg-fs); line-height: 1.55; color: var(--text); }
.pv-rows { margin: 1rem 0; border: 1px solid var(--line); border-radius: max(6px, calc(var(--radius) - 4px)); overflow: hidden; }
.mrow { display: grid; grid-template-columns: 1.125rem 6.5rem minmax(0, 1fr) auto; gap: .625rem; align-items: center; padding: var(--row-y) .875rem; border-bottom: 1px solid var(--line); font-size: .875rem; }
.mrow:last-child { border-bottom: 0; }
.mrow .ico { width: 1rem; height: 1rem; color: var(--muted); }
.mrow .ico.on { color: var(--star); }
.mrow .from, .mrow .subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow .date { font: .6875rem var(--mono); color: var(--muted); white-space: nowrap; }
.mrow.unread { background: var(--unread); box-shadow: inset 3px 0 0 var(--accent-base); }
.mrow.unread .from, .mrow.unread .subj { font-weight: 700; }
.pv-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .settings { grid-template-columns: 1fr; }
  .preview { position: static; order: -1; }
}
@media (max-width: 900px) {
  .topbar { padding: 0 1rem; gap: .75rem; }
  .nav, .me { display: none; }
  .btn.burger { display: inline-flex; }
  .shell { grid-template-columns: 1fr; padding: .875rem; gap: .875rem; }
  .side { position: static; display: none; }
  body.menu-open .side { display: flex; }
  .row { grid-template-columns: 1.375rem 1.75rem minmax(0, 1fr) auto; grid-template-areas: "c s from date" ". . subj subj"; row-gap: 2px; }
  .row > :nth-child(1) { grid-area: c; } .row > :nth-child(2) { grid-area: s; }
  .row .from { grid-area: from; } .row .subj { grid-area: subj; } .row .date { grid-area: date; }
  .field { grid-template-columns: 4rem minmax(0, 1fr) auto; padding: 2px .875rem; }
  .compose textarea { padding: .875rem; }
  .msg-head, .msg-actions, .attachments, .notice { padding-left: 1rem; padding-right: 1rem; }
  .set-card { padding-left: 1rem; padding-right: 1rem; }
  .set-row { grid-template-columns: 1fr; }
  .set-label { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }