/* Docket: a calm, modern mail client. Every colour, size and space is a token on :root (see DESIGN.md). */
/* ::backdrop does not inherit from :root in Safari before 17.4, so it gets the tokens directly. */
:root,
::backdrop {
  color-scheme: light dark;

  /* The page behind the raised white surfaces. */
  --c-canvas: #f4f5f7;
  --c-bg: #ffffff;
  --c-surface: #f0f2f5;
  --c-border: #dde1e6;
  /* Control edges (inputs, buttons): at least 3:1 against bg and surface. */
  --c-border-strong: #7d8996;
  --c-scrim: rgb(0 0 0 / 0.5);
  --c-text: #14181d;
  --c-text-muted: #4d5866;
  --c-accent: #2753c9;
  --c-accent-hover: #1e43a8;
  --c-on-accent: #ffffff;
  /* The selected folder, the pressed mode, your own messages. */
  --c-accent-subtle: #e8eefc;
  --c-accent-subtle-text: #1e43a8;
  --c-focus: #2753c9;
  --c-success-bg: #e3f3ea;
  --c-success-text: #11552f;
  --c-warning-bg: #fcefd2;
  --c-warning-text: #6d4300;
  --c-danger-bg: #fbe5e5;
  --c-danger-text: #8f1a1a;
  --c-info-bg: #e4eef6;
  --c-info-text: #174a6d;
  --c-ai-bg: #ece6f8;
  --c-ai-text: #4b2f8a;
  /* Avatar tones: decoration only, picked by a hash of the name. */
  --c-tone-1-bg: #e3ebfd;
  --c-tone-1-text: #1e43a8;
  --c-tone-2-bg: #def3e8;
  --c-tone-2-text: #146038;
  --c-tone-3-bg: #fcefd6;
  --c-tone-3-text: #7a4a00;
  --c-tone-4-bg: #ece6f8;
  --c-tone-4-text: #4b2f8a;
  --c-tone-5-bg: #fbe4ea;
  --c-tone-5-text: #8f1d3d;
  /* Label colours: the person's choice, decoration beside the label name. */
  --c-label-grey-bg: #eceef1;
  --c-label-grey-text: #3d4652;
  --c-label-red-bg: #fbe4e4;
  --c-label-red-text: #8f1a1a;
  --c-label-orange-bg: #fdebd9;
  --c-label-orange-text: #7f3a00;
  --c-label-yellow-bg: #fbf1c7;
  --c-label-yellow-text: #634900;
  --c-label-green-bg: #e0f2e7;
  --c-label-green-text: #145a32;
  --c-label-teal-bg: #dcf1ef;
  --c-label-teal-text: #0f5752;
  --c-label-blue-bg: #e3ebfd;
  --c-label-blue-text: #1e43a8;
  --c-label-purple-bg: #ece6f8;
  --c-label-purple-text: #4b2f8a;
  --c-label-pink-bg: #fbe4ee;
  --c-label-pink-text: #8a1c4f;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ts-xs: 0.8125rem;
  --ts-sm: 0.875rem;
  --ts-base: 1rem;
  --ts-md: 1.125rem;
  --ts-lg: 1.375rem;
  --ts-xl: 1.75rem;
  --lh-heading: 1.2;
  --lh-sub: 1.4;
  --lh-body: 1.6;
  --fw-regular: 400;
  --fw-strong: 600;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-full: 9999px;
  --shadow-sm: 0 1px 3px rgb(16 24 40 / 0.08);
  --shadow-md: 0 8px 24px rgb(16 24 40 / 0.14);
  --tap: 2.75rem;
  /* A QR code must stay dark on light in every theme, or scanners cannot read it. */
  --c-qr-light: #ffffff;
  --c-qr-dark: #000000;
  --avatar: 2.5rem;
  --page-width: 40rem;
  --duration-micro: 150ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-canvas: #0f1215;
    --c-bg: #171b20;
    --c-surface: #20262c;
    --c-border: #2c343c;
    --c-border-strong: #6b7785;
    --c-text: #e8ecf0;
    --c-text-muted: #a3adb8;
    --c-accent: #8ab4ff;
    --c-accent-hover: #a9c7ff;
    --c-on-accent: #0b1530;
    --c-accent-subtle: #1c2a45;
    --c-accent-subtle-text: #b5ccff;
    --c-focus: #8ab4ff;
    --c-success-bg: #123324;
    --c-success-text: #8fdcae;
    --c-warning-bg: #3a2a08;
    --c-warning-text: #f0c36b;
    --c-danger-bg: #3b1616;
    --c-danger-text: #f4a6a6;
    --c-info-bg: #14293a;
    --c-info-text: #9ccbf0;
    --c-ai-bg: #2a2145;
    --c-ai-text: #cdbdf5;
    --c-tone-1-bg: #1c2a45;
    --c-tone-1-text: #b5ccff;
    --c-tone-2-bg: #15322a;
    --c-tone-2-text: #9fe0bd;
    --c-tone-3-bg: #3a2b0c;
    --c-tone-3-text: #f2c879;
    --c-tone-4-bg: #2a2145;
    --c-tone-4-text: #cdbdf5;
    --c-tone-5-bg: #3d1a26;
    --c-tone-5-text: #f5afc3;
    --c-label-grey-bg: #2a3038;
    --c-label-grey-text: #c9d1da;
    --c-label-red-bg: #3b1616;
    --c-label-red-text: #f4a6a6;
    --c-label-orange-bg: #3a2410;
    --c-label-orange-text: #f5bf8c;
    --c-label-yellow-bg: #352b08;
    --c-label-yellow-text: #f0d27a;
    --c-label-green-bg: #123324;
    --c-label-green-text: #8fdcae;
    --c-label-teal-bg: #0f312f;
    --c-label-teal-text: #8adbd3;
    --c-label-blue-bg: #1c2a45;
    --c-label-blue-text: #b5ccff;
    --c-label-purple-bg: #2a2145;
    --c-label-purple-text: #cdbdf5;
    --c-label-pink-bg: #3d1a2a;
    --c-label-pink-text: #f5afcd;
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.4);
    --shadow-md: 0 8px 24px rgb(0 0 0 / 0.4);
  }
}

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

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--c-canvas);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--ts-base);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: var(--lh-heading);
  font-weight: var(--fw-strong);
}

h1 { font-size: var(--ts-xl); }
h2 { font-size: var(--ts-lg); }
h3 { font-size: var(--ts-md); }


p,
ul {
  margin: 0;
}

ul { padding-left: var(--sp-6); }

a { color: var(--c-accent); }

h1[tabindex="-1"]:focus { outline: none; }

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-bg);
  transform: translateY(-300%);
}

.skip-link:focus { transform: none; }

/* Line icons from src/web/icons.ts; they take the text colour of the label beside them. */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Layout */
.page {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

main.page {
  padding-block: var(--sp-6) var(--sp-12);
  outline: none;
}

.site-header {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--tap);
  padding-block: var(--sp-2);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  font-weight: var(--fw-strong);
  font-size: var(--ts-md);
  color: var(--c-text);
  text-decoration: none;
}

/* The envelope mark: a mask, so it takes the accent colour in light and dark. */
.wordmark::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background: var(--c-accent);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1 3v9h16V8l-8 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.site-header__account { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
/* The name and Sign out keep their width on a phone; only the address shortens. */
.site-header .wordmark,
.site-header__account > .button { flex: none; white-space: nowrap; }
.site-header__who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text-muted); font-size: var(--ts-sm); }

/* minmax(0, 1fr): a long word or wide row wraps inside the column instead of widening the page. */
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
.stack-tight { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }

/* Regions a view has not filled yet must not add their gap. */
.stack > :empty { display: none; }

/* Cards and text: raised white surfaces on the grey canvas. */
.card {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.muted { color: var(--c-text-muted); }
.quiet { color: var(--c-text-muted); font-size: var(--ts-xs); }

.file-list { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.file-list .button { max-width: 100%; overflow-wrap: anywhere; text-align: left; }

/* Forms */
.field, .field-group { display: grid; gap: var(--sp-1); }
.field__label { font-size: var(--ts-sm); font-weight: var(--fw-strong); }
.field__hint { color: var(--c-text-muted); font-size: var(--ts-xs); }

input,
textarea,
select {
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  font: inherit;
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  transition: border-color var(--duration-micro) var(--ease-standard);
}

input:hover,
textarea:hover,
select:hover { border-color: var(--c-text-muted); }
::placeholder { color: var(--c-text-muted); opacity: 1; }

/* Buttons: radius md, never a pill. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: var(--sp-2) var(--sp-4);
  font: inherit;
  font-weight: var(--fw-strong);
  color: var(--c-text);
  gap: var(--sp-2);
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-micro) var(--ease-standard);
}

.button:hover { background: var(--c-surface); }
.button--primary { color: var(--c-on-accent); background: var(--c-accent); border-color: var(--c-accent); box-shadow: var(--shadow-sm); }
.button--primary:hover { background: var(--c-accent-hover); }
.button--danger { color: var(--c-danger-text); background: var(--c-danger-bg); border-color: var(--c-danger-text); }
.button--danger:hover { background: var(--c-danger-bg); filter: brightness(0.95); }
/* Secondary actions in a row: no box until hover, so the one primary action stands out. */
.button--ghost { padding-inline: var(--sp-3); background: transparent; border-color: transparent; }
.button--ghost:hover { background: var(--c-surface); }
.button[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.button[aria-pressed="true"] { background: var(--c-accent-subtle); color: var(--c-accent-subtle-text); border-color: var(--c-accent-subtle-text); }

.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Joined choices (Write / Preview, Reply / Reply all / Forward): one framed group, the pressed one filled. */
.tabs,
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  justify-self: start;
  padding: var(--sp-1);
  background: var(--c-surface);
  border-radius: var(--r-md);
}

.tab,
.segmented > .button {
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  font: inherit;
  font-size: var(--ts-sm);
  font-weight: var(--fw-strong);
  color: var(--c-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
}

.tab:hover,
.segmented > .button:hover { background: var(--c-bg); color: var(--c-text); }

.tab[aria-pressed="true"],
.segmented > .button[aria-pressed="true"] { background: var(--c-bg); color: var(--c-accent-subtle-text); border-color: var(--c-border); box-shadow: var(--shadow-sm); }

/* Status */
.notice { padding: var(--sp-3); border-radius: var(--r-md); border: 1px solid transparent; }
.notice--hidden { display: none; }
.notice--error { background: var(--c-danger-bg); color: var(--c-danger-text); border-color: var(--c-danger-text); }
.notice--info { background: var(--c-info-bg); color: var(--c-info-text); }

.verdict { padding: var(--sp-3); border-radius: var(--r-sm); border: 1px solid transparent; }
.verdict--valid { background: var(--c-success-bg); color: var(--c-success-text); border-color: var(--c-success-text); }
.verdict--invalid { background: var(--c-danger-bg); color: var(--c-danger-text); border-color: var(--c-danger-text); }

.badge {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 0 var(--sp-2);
  font-size: var(--ts-xs);
  font-weight: var(--fw-strong);
  border-radius: var(--r-sm);
}

.badge--ai { background: var(--c-ai-bg); color: var(--c-ai-text); }

@media (prefers-reduced-motion: reduce) {
  .button,
  input,
  textarea,
  select { transition: none; }
}

/* Docket Markdown: rendered message bodies and the composer's "/" menu. Tokens only; dark mode comes with them. */
.md {
  display: grid;
  gap: var(--sp-3);
  max-width: 70ch;
}

.md h3,
.md h4,
.md h5 { font-size: var(--ts-md); line-height: var(--lh-sub); }

.md ol { margin: 0; padding-left: var(--sp-6); }

.md blockquote {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding-left: var(--sp-4);
  border-left: 3px solid var(--c-border);
  color: var(--c-text-muted);
}

.md hr {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--c-border);
}

.md :not(pre) > code,
.md-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--ts-xs);
  background: var(--c-surface);
  border-radius: var(--r-sm);
}

.md :not(pre) > code { padding: 0 var(--sp-1); }

.md-code {
  margin: 0;
  padding: var(--sp-3);
  overflow-x: auto;
  white-space: pre;
  border: 1px solid var(--c-border);
}

.md-scroll { overflow-x: auto; }

.md-table,
.md-quote {
  width: 100%;
  border-collapse: collapse;
}

.md-table th,
.md-table td,
.md-quote th,
.md-quote td {
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--c-border);
}

.md-quote .md-quote__number { text-align: right; white-space: nowrap; }
.md-quote tfoot th { text-align: right; }
.md-quote tfoot th,
.md-quote tfoot td { font-weight: var(--fw-strong); border-bottom: 0; }

.md-block {
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* A block button sizes to its label like every other button; tables in a block still take the full width. */
.md-block > .button { justify-self: start; }

.md-options {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.md-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--sp-3);
}

.md-option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  cursor: pointer;
}

.md-option input {
  flex: none;
  width: var(--sp-6);
  height: var(--sp-6);
  margin: 0;
  accent-color: var(--c-accent);
}

.md-option input[aria-disabled="true"] { cursor: default; }
.md .button[aria-disabled="true"] { cursor: default; }

.md-who {
  margin: 0;
  font-size: var(--ts-xs);
  color: var(--c-text-muted);
}

.md-approve {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-accent);
  border-radius: var(--r-md);
}

.md-approve__text { font-weight: var(--fw-strong); }

.md-decision {
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
}

.md-decision__done {
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  font-weight: var(--fw-strong);
  color: var(--c-success-text);
  background: var(--c-success-bg);
  border-radius: var(--r-sm);
}

.md-decision__replaced {
  margin: 0;
  color: var(--c-text-muted);
}

.slash-menu {
  display: grid;
  gap: var(--sp-1);
  max-height: calc(var(--tap) * 6);
  margin: var(--sp-1) 0 0;
  padding: var(--sp-1);
  overflow-y: auto;
  list-style: none;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

.slash-menu__option {
  display: grid;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  align-content: center;
  border-radius: var(--r-sm);
  cursor: pointer;
}

.slash-menu__name { font-weight: var(--fw-strong); }
.slash-menu__hint { font-size: var(--ts-xs); color: var(--c-text-muted); }

.slash-menu__option[aria-selected="true"] {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

.slash-menu__option[aria-selected="true"] .slash-menu__hint { color: var(--c-on-accent); }

/* Webmail: sign-in screens, the mail frame, conversation list, messages and composer. Tokens only. */
.page--wide { --page-width: 72rem; }

/* Sign-in, sign-up and recovery: one centred raised card. */
.auth { max-width: 28rem; margin-inline: auto; }
.auth .card { padding: var(--sp-6); box-shadow: var(--shadow-md); }

.check {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  cursor: pointer;
}

.check__box {
  width: 1.25rem;
  min-height: 0;
  height: 1.25rem;
  flex: none;
  accent-color: var(--c-accent);
}

.recovery-code {
  padding: var(--sp-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--ts-md);
  letter-spacing: 0.05em;
  overflow-wrap: anywhere;
  user-select: all;
  background: var(--c-surface);
  border: 1px dashed var(--c-text-muted);
  border-radius: var(--r-md);
}

.export-progress {
  width: 100%;
  height: var(--sp-3);
  accent-color: var(--c-accent);
}

/* The full address of a link that link protection doubted, every character visible. */
.link-check__address {
  padding: var(--sp-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
  background: var(--c-surface);
  border-radius: var(--r-md);
}

/* The mail frame. Phone: Compose beside search, folders under them, then the view. */
.mail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "compose search" "nav nav" "main main";
  gap: var(--sp-4) var(--sp-3);
}

.mail-compose-link { grid-area: compose; }
.mail-nav { grid-area: nav; }
.mail-main { grid-area: main; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-content: start; }
/* The list pane and the view pane; one of them is empty (and hidden) unless the reading pane splits them. */
.mail-panes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4) var(--sp-6); align-items: start; }
.mail-panes > :empty { display: none; }

.mail-search { grid-area: search; position: relative; min-width: 0; }
.mail-search .icon {
  position: absolute;
  left: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-muted);
  pointer-events: none;
}
/* Room for the icon: its left offset, its width, then a gap. */
.mail-search input { padding-left: calc(var(--sp-3) + 1.25rem + var(--sp-2)); }

/* Phone folders: two rows of five even tiles, icon over label, never off screen. */
.mail-nav { display: grid; gap: var(--sp-3); }
.mail-nav__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mail-nav__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: var(--tap);
  padding: var(--sp-1);
  font-size: var(--ts-xs);
  color: var(--c-text-muted);
  text-decoration: none;
  border-radius: var(--r-md);
  transition: background-color var(--duration-micro) var(--ease-standard);
}

.mail-nav__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Phone tiles give their whole width to the label, so "Scheduled" fits at 375 px. */
.mail-nav__list .mail-nav__link { padding-inline: 0; }
.mail-nav__link:hover { background: var(--c-surface); color: var(--c-text); }
.mail-nav__link[aria-current="page"] { background: var(--c-accent-subtle); color: var(--c-accent-subtle-text); font-weight: var(--fw-strong); }

.mail-nav__count {
  position: absolute;
  top: var(--sp-1);
  right: var(--sp-1);
  min-width: 1.25rem;
  padding: 0 var(--sp-1);
  font-size: var(--ts-xs);
  font-weight: var(--fw-strong);
  line-height: var(--lh-sub);
  text-align: center;
  color: var(--c-accent-subtle-text);
  background: var(--c-accent-subtle);
  border-radius: var(--r-full);
}

.mail-nav__count:empty { display: none; }

/* Inbox tabs wrap onto a second line on a phone rather than scroll, so no tab hides off-screen. */
.category-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--c-border);
}

.category-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  white-space: nowrap;
  color: var(--c-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.category-tab:hover { color: var(--c-text); background: var(--c-surface); }
.category-tab[aria-current="page"] { color: var(--c-accent-subtle-text); font-weight: var(--fw-strong); border-bottom-color: var(--c-accent-subtle-text); }

.category-tab__count {
  min-width: 1.25rem;
  padding: 0 var(--sp-1);
  font-size: var(--ts-xs);
  font-weight: var(--fw-strong);
  text-align: center;
  color: var(--c-accent-subtle-text);
  background: var(--c-accent-subtle);
  border-radius: var(--r-full);
}

.category-tab__count:empty { display: none; }

/* Suggestions under the search box. */
.search-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin: var(--sp-1) 0 0;
  padding: var(--sp-1);
  list-style: none;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}

.search-suggest__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
  border-radius: var(--r-sm);
}

.search-suggest__option:hover,
.search-suggest__option[aria-selected="true"] { background: var(--c-accent-subtle); color: var(--c-accent-subtle-text); }
.search-suggest__detail { font-size: var(--ts-sm); color: var(--c-text-muted); overflow-wrap: anywhere; }

.subscription { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--c-bg); }
.subscription__who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); overflow-wrap: anywhere; }
.subscription__latest { margin: 0; }

.reactions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding-top: var(--sp-2); }
.reaction { min-height: var(--tap); min-width: var(--tap); padding: 0 var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg); color: var(--c-text); font: inherit; cursor: pointer; }
.reaction--mine { border-color: var(--c-info-text); background: var(--c-info-bg); color: var(--c-info-text); }
.reaction-picker__choices { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); }
.task { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4); padding: var(--sp-2) var(--sp-4); background: var(--c-bg); }
.task .check { flex: 1 1 14rem; }
.task__title { overflow-wrap: anywhere; }
.task[data-state="overdue"] .task__due { color: var(--c-danger-text); font-weight: 600; }
.task[data-state="done"] .task__title { text-decoration: line-through; color: var(--c-text-muted); }

.priority-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.priority-switch[aria-pressed="true"] { background: var(--c-accent-subtle); color: var(--c-accent-subtle-text); }

.settings-fieldset { margin: 0; padding: 0; border: 0; }

/* The conversation list: one raised card, rows split by hairlines. */
.mail-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.mail-list > li + li { border-top: 1px solid var(--c-border); }

/* Empty folders and searches explain themselves in a sentence or two; keep it readable on wide screens. */
.mail-empty {
  max-width: 60ch;
  padding: var(--sp-8) var(--sp-6);
  color: var(--c-text-muted);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

.mail-row {
  display: grid;
  /* The sender keeps room however many marks the row carries. */
  grid-template-columns: var(--avatar) minmax(6rem, 1fr) auto;
  grid-template-areas: "avatar people meta" "avatar subject subject" "avatar snippet snippet";
  column-gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  color: var(--c-text);
  text-decoration: none;
  background: var(--c-bg);
  transition: background-color var(--duration-micro) var(--ease-standard);
}

a.mail-row:hover { background: var(--c-surface); }
/* The conversation open in the reading pane. */
a.mail-row[aria-current="true"] { background: var(--c-accent-subtle); }

.avatar {
  grid-area: avatar;
  align-self: start;
  display: grid;
  place-items: center;
  width: var(--avatar);
  height: var(--avatar);
  font-weight: var(--fw-strong);
  border-radius: var(--r-full);
}

.avatar--tone-1 { background: var(--c-tone-1-bg); color: var(--c-tone-1-text); }
.avatar--tone-2 { background: var(--c-tone-2-bg); color: var(--c-tone-2-text); }
.avatar--tone-3 { background: var(--c-tone-3-bg); color: var(--c-tone-3-text); }
.avatar--tone-4 { background: var(--c-tone-4-bg); color: var(--c-tone-4-text); }
.avatar--tone-5 { background: var(--c-tone-5-bg); color: var(--c-tone-5-text); }

.mail-row__people { grid-area: people; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row__subject { grid-area: subject; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row__snippet { grid-area: snippet; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text-muted); font-size: var(--ts-sm); }
.mail-row__meta { grid-area: meta; display: flex; align-items: center; gap: var(--sp-2); color: var(--c-text-muted); font-size: var(--ts-xs); }
.mail-row__meta .badge { margin-left: 0; background: var(--c-info-bg); color: var(--c-info-text); }
.mail-row__meta .badge--attention { background: var(--c-warning-bg); color: var(--c-warning-text); }
.mail-row__meta .badge--done { background: var(--c-success-bg); color: var(--c-success-text); }
.mail-row__star { color: var(--c-warning-text); }
/* Unread: a dot as well as bold, so the state does not rest on weight alone. */
.mail-row--unread .mail-row__people::before {
  content: "";
  display: inline-block;
  width: var(--sp-2);
  height: var(--sp-2);
  margin-right: var(--sp-2);
  vertical-align: middle;
  background: var(--c-accent);
  border-radius: var(--r-full);
}
.mail-row--unread .mail-row__people,
.mail-row--unread .mail-row__subject { font-weight: var(--fw-strong); }
.mail-row--problem { background: var(--c-danger-bg); color: var(--c-danger-text); }
.mail-row--problem .mail-row__snippet { color: inherit; white-space: normal; }

/* Conversation toolbar: icon and label; on a phone the label is read out but not shown. */
.mail-toolbar { gap: var(--sp-1); }
.mail-toolbar .button { position: relative; }

@media (max-width: 39.99rem) {
  .mail-toolbar .button__label,
  .bulk-bar .button__label,
  .header-link__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Messages: raised cards; folded ones sit back on the surface colour, your own are tinted and set in. */
.message {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.message:not([open]) { background: var(--c-surface); box-shadow: none; }
.message--out { margin-left: var(--sp-8); }
.message--out[open] { background: var(--c-accent-subtle); }
.message > :not(summary) { margin: 0 var(--sp-4) var(--sp-4); }

.message__summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  list-style: none;
}

.message__summary::-webkit-details-marker { display: none; }
.message__from { font-weight: var(--fw-strong); flex: none; }
.message__snippet { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text-muted); }
.message[open] .message__snippet { visibility: hidden; }
.message__date { flex: none; margin-left: auto; color: var(--c-text-muted); font-size: var(--ts-xs); }

.message__header,
.message-details__facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--ts-xs);
  color: var(--c-text-muted);
}

.message__header dt, .message-details__facts dt { font-weight: var(--fw-strong); }
.message__header dd, .message-details__facts dd { margin: 0; overflow-wrap: anywhere; }
/* Message id, signature and encryption facts, folded under the header lines. */
.message-details { display: grid; justify-items: start; gap: var(--sp-2); }
.message-details__summary { display: inline-flex; align-items: center; min-height: var(--tap); cursor: pointer; font-size: var(--ts-xs); color: var(--c-text-muted); }
/* A folded form inside a settings card, such as importing an OpenPGP key. */
.disclosure { display: grid; gap: var(--sp-2); }
.disclosure > summary { display: inline-flex; align-items: center; min-height: var(--tap); cursor: pointer; }
/* An email opened with OpenPGP or S/MIME: its check line, then the text or frame, then its files. */
.secure-email { display: grid; gap: var(--sp-2); }
.secure-email__files { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* The sender's copy of a message the relay could not deliver to some people. */
.message-warning {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-warning-bg);
  color: var(--c-warning-text);
}
.message-warning > p { flex: 1 1 16rem; margin: 0; font-weight: var(--fw-strong); overflow-wrap: anywhere; }

/* Full compose: one raised card. */
.mail-compose {
  padding: var(--sp-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* Flex, not grid: once Cc / Bcc is hidden, its empty column and gap would still narrow the To field. */
.mail-compose__to { display: flex; align-items: end; gap: var(--sp-2); }
.mail-compose__to > :first-child { flex: 1; min-width: 0; }
.mail-preview { padding: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-md); }

.file-list__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); overflow-wrap: anywhere; }

.key-help { max-width: min(32rem, calc(100vw - 2 * var(--sp-4))); color: var(--c-text); box-shadow: var(--shadow-md); }
/* .card sets display: grid, which beats the browser's own rule that hides a closed dialog. */
.key-help:not([open]) { display: none; }
.key-help::backdrop { background: var(--c-scrim); }

.key-help__list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
}

.key-help__list dd { margin: 0; }

.key-help kbd {
  padding: 0 var(--sp-1);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--ts-xs);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
}

@media (min-width: 40rem) {
  .auth { padding-top: var(--sp-6); }
  .mail-compose { padding: var(--sp-6); }
}

/* Wide screens: a folder column beside the view, Compose heading the folders. */
@media (min-width: 56rem) {
  .mail {
    grid-template-columns: 14rem minmax(0, 1fr);
    grid-template-areas: "compose search" "nav main";
    gap: var(--sp-4) var(--sp-6);
    align-items: start;
  }

  .mail-compose-link { justify-self: stretch; }
  .mail-nav { position: sticky; top: var(--sp-4); }
  .mail-nav__list { grid-template-columns: minmax(0, 1fr); }

  .mail-nav__link {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--sp-3);
    padding-inline: var(--sp-3);
    font-size: var(--ts-sm);
  }

  .mail-nav__label { flex: 1; text-align: left; }
  .mail-nav__list .mail-nav__link { padding-inline: var(--sp-3); }
  .mail-nav__labels,
  .mail-nav__sublabels { display: grid; grid-template-columns: minmax(0, 1fr); }
  .mail-nav__labels .mail-nav__link { padding-inline: var(--sp-3); }
  .mail-nav__count { position: static; }

  .mail-row {
    grid-template-columns: var(--avatar) 12rem minmax(0, 1fr) auto;
    grid-template-areas: "avatar people subject meta" "avatar people snippet meta";
  }
}

/* Mail proofs: who approved a block, whether it matches the text shown, and the proof download. */
.md-proof {
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
  padding-top: var(--sp-2);
}

.md-proof .verdict { margin: 0; font-size: var(--ts-xs); }
/* End of mail proofs */

/* Email to and from outside Docket (email-view.ts, the compose note) */
.mail-compose__outside {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
}
.email-notice {
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
}
.email-notice > p { margin: 0; }
.email-notice__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.badge--email { margin-left: 0; background: var(--c-info-bg); color: var(--c-info-text); }
.email-check {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--ts-sm);
}
.email-check--ok { background: var(--c-success-bg); color: var(--c-success-text); }
.email-check--warn { background: var(--c-warning-bg); color: var(--c-warning-text); font-weight: var(--fw-strong); }
/* Email is plain text: its own line breaks, long words and links wrapped, never wider than a reading line. */
.email-body {
  max-width: 70ch;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: var(--lh-body);
}
/* End of email */

/* Writing fast: block buttons, the always-open reply box, replies on their way, the command palette. */
/* The message box starts small and grows with what is typed, up to most of the screen. */
.message-box { min-height: calc(var(--lh-body) * 5em); max-height: 60vh; field-sizing: content; resize: vertical; }
.message-box--quick { min-height: calc(var(--lh-body) * 2em + 2 * var(--sp-2)); }

.block-bar { display: grid; gap: var(--sp-1); }
.block-bar__row,
.block-bar__more { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.block-bar__button { font-size: var(--ts-sm); border-color: var(--c-border); }
.block-bar__button[aria-expanded="true"] { background: var(--c-accent-subtle); color: var(--c-accent-subtle-text); border-color: var(--c-accent-subtle-text); }
/* On a phone the row keeps three blocks and More; the rest move into More so the row never wraps. */
.block-bar__wide-only { display: none; }

@media (min-width: 40rem) {
  .block-bar__wide-only { display: inline-flex; }
  .block-bar__narrow-only { display: none; }
}

/* One row under a message box: blocks, attach, then Send on the right. */
.composer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.composer-tools > [type="submit"] { margin-left: auto; }
/* One text size across the row, so blocks, attach and Send read as one set. */
.composer-tools .button { font-size: var(--ts-sm); }

.quick-reply {
  padding: var(--sp-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.quick-reply__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.quick-reply__summary { min-width: 0; overflow-wrap: anywhere; color: var(--c-text-muted); font-size: var(--ts-sm); }
.quick-reply__edit { margin-left: auto; font-size: var(--ts-sm); }
/* The keyboard hint shows only while the person is writing. */
.quick-reply .field__hint { display: none; }
.quick-reply:focus-within .field__hint { display: block; }

/* A reply still being sealed and sent: dashed until the real message takes its place. */
.message--pending { border-style: dashed; background: var(--c-bg); box-shadow: none; }
.message--pending > .message__summary { margin: 0; cursor: default; }

.command-palette { width: min(36rem, calc(100vw - 2 * var(--sp-4))); margin-block-start: var(--sp-12); padding: var(--sp-3); color: var(--c-text); box-shadow: var(--shadow-md); }
/* .card sets display: grid, which beats the browser's own rule that hides a closed dialog. */
.command-palette:not([open]) { display: none; }
.command-palette::backdrop { background: var(--c-scrim); }
.command-palette__list { display: grid; gap: var(--sp-1); max-height: calc(var(--tap) * 8); margin: 0; padding: 0; overflow-y: auto; list-style: none; }

.command-palette__option {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  cursor: pointer;
}

.command-palette__option[aria-selected="true"] { background: var(--c-accent); color: var(--c-on-accent); }

@media (prefers-reduced-motion: reduce) {
  .mail-nav__link,
  .mail-row { transition: none; }
}
/* End of writing fast */

/* Email parity: labels, selection, sheets, undo send, drafts, settings, contacts, HTML email, print. */
.label-dot { flex: none; width: 0.75rem; height: 0.75rem; border-radius: var(--r-full); }
.label-chips { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); }
.label-chip { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 var(--sp-2); font-size: var(--ts-xs); font-weight: var(--fw-strong); border-radius: var(--r-sm); }
.label-dot--grey { background: var(--c-label-grey-text); }
.label-dot--red { background: var(--c-label-red-text); }
.label-dot--orange { background: var(--c-label-orange-text); }
.label-dot--yellow { background: var(--c-label-yellow-text); }
.label-dot--green { background: var(--c-label-green-text); }
.label-dot--teal { background: var(--c-label-teal-text); }
.label-dot--blue { background: var(--c-label-blue-text); }
.label-dot--purple { background: var(--c-label-purple-text); }
.label-dot--pink { background: var(--c-label-pink-text); }
.label-chip--grey { background: var(--c-label-grey-bg); color: var(--c-label-grey-text); }
.label-chip--red { background: var(--c-label-red-bg); color: var(--c-label-red-text); }
.label-chip--orange { background: var(--c-label-orange-bg); color: var(--c-label-orange-text); }
.label-chip--yellow { background: var(--c-label-yellow-bg); color: var(--c-label-yellow-text); }
.label-chip--green { background: var(--c-label-green-bg); color: var(--c-label-green-text); }
.label-chip--teal { background: var(--c-label-teal-bg); color: var(--c-label-teal-text); }
.label-chip--blue { background: var(--c-label-blue-bg); color: var(--c-label-blue-text); }
.label-chip--purple { background: var(--c-label-purple-bg); color: var(--c-label-purple-text); }
.label-chip--pink { background: var(--c-label-pink-bg); color: var(--c-label-pink-text); }

/* Labels in the folder list: a heading, then wrapping links on a phone and a column on wide screens. */
.mail-nav__heading { font-size: var(--ts-sm); color: var(--c-text-muted); padding-inline: var(--sp-3); }
.mail-nav__section { display: grid; gap: var(--sp-1); }
.mail-nav__labels { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.mail-nav__labels .mail-nav__link { flex-direction: row; gap: var(--sp-2); padding-inline: var(--sp-3); font-size: var(--ts-sm); }
.mail-nav__labels .mail-nav__count { position: static; }
/* Nested labels ("Clients/Acme"): a group takes a whole row, its children sit indented below, and a 44 px button folds them. */
.mail-nav__group { flex-basis: 100%; display: grid; gap: var(--sp-1); }
.mail-nav__tree-row { display: flex; align-items: center; gap: var(--sp-1); }
.mail-nav__tree-row > .mail-nav__link { flex: 1; min-width: 0; }
.mail-nav__link--group { color: var(--c-text-muted); }
.mail-nav__sublabels { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0; padding: 0 0 0 var(--sp-4); list-style: none; }
.mail-nav__sublabels .mail-nav__link { flex-direction: row; gap: var(--sp-2); padding-inline: var(--sp-3); font-size: var(--ts-sm); }
.mail-nav__sublabels .mail-nav__count { position: static; }
.mail-nav__toggle {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--tap);
  block-size: var(--tap);
  padding: 0;
  color: var(--c-text-muted);
  background: none;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
}
.mail-nav__toggle:hover { background: var(--c-surface); color: var(--c-text); }
.mail-nav__toggle[aria-expanded="true"] .icon { transform: rotate(90deg); }

/* Rows with a checkbox in front; drafts and scheduled rows with a button at the end. */
.mail-list__item { display: grid; grid-template-columns: var(--tap) minmax(0, 1fr); background: var(--c-bg); }
.mail-list__item > .mail-row { padding-left: 0; }
.mail-list__item--action { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); padding-right: var(--sp-3); }
.mail-list__item--action > .mail-row { padding-left: var(--sp-4); }
.mail-row__check { display: grid; place-items: center; min-height: var(--tap); cursor: pointer; }
/* Compact density: one line per row with less padding; on touch screens every row stays a full tap target. */
.mail-list--compact .mail-row {
  grid-template-columns: minmax(6rem, 12rem) minmax(0, max-content) minmax(0, 1fr) auto;
  grid-template-areas: "people subject snippet meta";
  align-items: center;
  padding-block: var(--sp-1);
}
.mail-list--compact .avatar { display: none; }
.mail-list--compact .mail-row__check { min-height: 0; }
@media (pointer: coarse) {
  .mail-list--compact .mail-row,
  .mail-list--compact .mail-row__check { min-height: var(--tap); }
}
.mail-row__meta { flex-wrap: wrap; justify-content: flex-end; }
.mail-row__draft { color: var(--c-accent-subtle-text); font-weight: var(--fw-strong); }

.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); }
.bulk-bar__all { padding-inline: var(--sp-3); }
.bulk-bar__status { color: var(--c-text-muted); font-size: var(--ts-sm); }
.bulk-bar__status:empty { display: none; }
.bulk-bar__actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.bulk-bar__actions:empty { display: none; }
.bulk-bar .button { position: relative; }

/* A short choice in a modal panel. */
.sheet { width: min(28rem, calc(100vw - 2 * var(--sp-4))); color: var(--c-text); box-shadow: var(--shadow-md); }
.sheet:not([open]) { display: none; }
.sheet::backdrop { background: var(--c-scrim); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.sheet__title { font-size: var(--ts-md); }
.sheet__choices { display: grid; gap: var(--sp-1); }
.sheet__choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  font: inherit;
  color: var(--c-text);
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color var(--duration-micro) var(--ease-standard);
}
.sheet__choice:hover { background: var(--c-surface); }
.sheet__detail { color: var(--c-text-muted); font-size: var(--ts-sm); }
.sheet__check { padding-inline: var(--sp-3); }
.sheet__pick { padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }
.sheet__pick > .button { justify-self: start; }

/* Undo send, and links inside notices. */
.outbox { display: grid; gap: var(--sp-2); }
.outbox:empty { display: none; }
.outbox__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.notice a { color: inherit; font-weight: var(--fw-strong); }
.mail-compose--sending { opacity: 0.6; }
.composer-tools > .composer-tools__end { margin-left: auto; }
.composer-tools__end ~ [type="submit"] { margin-left: 0; }
.compose-saved:empty { display: none; }

.header-link { position: relative; padding-inline: var(--sp-2); }
.header-link[aria-current="page"] { background: var(--c-accent-subtle); color: var(--c-accent-subtle-text); }
.thread-marks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.thread-marks .badge,
.message__summary .badge { margin-left: 0; background: var(--c-info-bg); color: var(--c-info-text); }
.message__summary .badge--attention { background: var(--c-warning-bg); color: var(--c-warning-text); }

/* HTML email in its sandboxed frame; the frame sets its own height. */
.email-html { max-width: 100%; }
.email-frame { display: block; width: 100%; border: 1px solid var(--c-border); border-radius: var(--r-md); }
.file-list__preview { flex-basis: 100%; }
.file-list__preview:empty { display: none; }
.md-image { display: block; max-width: 100%; max-height: 24rem; border-radius: var(--r-md); }
.pdf-pages { display: grid; gap: var(--sp-2); }
.pdf-page { display: block; width: 100%; height: auto; border: 1px solid var(--c-border); background: #fff; }
.file-preview-text { margin: 0; padding: var(--sp-2); white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--c-border); border-radius: var(--r-md); }
.file-preview { display: block; max-width: 100%; max-height: 24rem; border: 1px solid var(--c-border); border-radius: var(--r-md); }

/* Settings and contacts. */
.settings-jump__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.settings-jump__list a { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: var(--sp-3); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); text-decoration: none; }
.settings-section h3 { font-size: var(--ts-md); }
/* Explanations stay at a reading width on wide screens. */
.settings-section p,
.settings-section .field__hint,
.settings-section ul:not(.settings-list) > li,
.contact p { max-width: 60ch; }
.settings-section h2[tabindex="-1"]:focus { outline: none; }
.settings-list { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.settings-list__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
/* A list's empty or error line is prose: kept to a reading width. */
.settings-list__note { max-width: 60ch; }
.settings-row-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-2); }
.settings-row-form > .field,
.settings-row-form > .field-group,
.settings-row-form > input,
.settings-row-form > select { flex: 1 1 10rem; min-width: 0; }
.settings-row-form > .label-dot { align-self: center; }
.color-input { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; padding: var(--sp-1); border: 1px solid var(--c-border); border-radius: var(--r-md); background: transparent; cursor: pointer; }
.copy-text { font-size: var(--ts-sm); resize: none; }
.fingerprint { padding: var(--sp-3); font-size: var(--ts-md); font-variant-numeric: tabular-nums; letter-spacing: 0.05em; word-spacing: 0.25em; background: var(--c-surface); border-radius: var(--r-md); }
.contact-list { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.contact__head { display: flex; align-items: start; gap: var(--sp-3); }
.contact__who { display: grid; min-width: 0; }
.contact__name { font-weight: var(--fw-strong); }

@media (prefers-reduced-motion: reduce) {
  .sheet__choice { transition: none; }
}

/* Print: the conversation only, every message open, on plain paper colours. */
@media print {
  :root {
    --c-canvas: #ffffff;
    --c-bg: #ffffff;
    --c-surface: #ffffff;
    --c-accent-subtle: #ffffff;
    --c-text: #000000;
    --c-text-muted: #333333;
    --shadow-sm: none;
  }
  .site-header,
  .skip-link,
  .mail-nav,
  .mail-search,
  .mail-compose-link,
  .mail-toolbar,
  .quick-reply,
  .outbox,
  .notice,
  .bulk-bar,
  .tabs,
  .message__snippet,
  .file-list .button { display: none !important; }
  .mail { display: block; }
  main.page { max-width: none; padding: 0; }
  .message { break-inside: avoid; }
  .message--out { margin-left: 0; }
  /* Confidential mail from others is held back from print even when the browser prints the page anyway. */
  .message--confidential { display: none !important; }
}
/* End of email parity */

/* Calendar and contacts: toolbar, agenda, week and month, the event editor, invitation cards, contact cards. Tokens only. */
.calendar-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.calendar-toolbar__nav, .calendar-toolbar__views { display: flex; gap: var(--sp-2); }
.calendar-toolbar__title { flex: 1 1 10rem; margin: 0; font-size: var(--ts-md); font-weight: var(--fw-strong); }
.calendar-body { min-width: 0; }

.calendar-events { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.calendar-event {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  color: var(--c-text);
  text-decoration: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  /* The left bar carries meaning, as in other calendars: colour = overlap, dashed = tentative. */
  border-left: 4px solid var(--c-accent);
  border-radius: var(--r-sm);
}
.calendar-event:hover { background: var(--c-accent-subtle); }
.calendar-event__time { flex: none; color: var(--c-text-muted); font-size: var(--ts-xs); }
.calendar-event__title { min-width: 0; overflow-wrap: anywhere; }
.calendar-event--all-day { background: var(--c-accent-subtle); color: var(--c-accent-subtle-text); }
.calendar-event--all-day .calendar-event__time { color: var(--c-accent-subtle-text); }
.calendar-event--overlap { border-left-color: var(--c-warning-text); }
.calendar-event--tentative { border-left-style: dashed; }

.calendar-agenda { display: grid; gap: var(--sp-4); }
.calendar-agenda__day { display: grid; gap: var(--sp-2); align-content: start; }
.calendar-agenda__head { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--ts-base); font-weight: var(--fw-strong); }

/* Week grid: an hour grid in its own scroller. Below 64rem one day shows (the selected one) and the heads switch days. */
.calendar-week { --hour: 4rem; --slot: calc(var(--hour) / 4); --gutter: 3.5rem; }
.calendar-week__scroll { position: relative; max-height: 75dvh; overflow-x: hidden; overflow-y: auto; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.calendar-week__top { position: sticky; top: 0; z-index: 2; background: var(--c-bg); border-bottom: 1px solid var(--c-border); }
.calendar-week__heads { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-week__corner, .calendar-week__add { display: none; }
.calendar-week__head { display: flex; align-items: center; justify-content: center; border-bottom: 2px solid transparent; }
.calendar-week__head.calendar-column--selected { border-bottom-color: var(--c-accent); }
.calendar-week__pick { flex: 1 1 auto; display: grid; justify-items: center; min-height: var(--tap); padding: var(--sp-1); color: var(--c-text); font: inherit; line-height: var(--lh-heading); background: none; border: 0; border-radius: var(--r-sm); cursor: pointer; }
.calendar-column__weekday { color: var(--c-text-muted); font-size: var(--ts-xs); }
.calendar-column__number { font-weight: var(--fw-strong); }
.calendar-column--today .calendar-column__number { padding-inline: var(--sp-2); color: var(--c-on-accent); background: var(--c-accent); border-radius: var(--r-sm); }
.calendar-week__allday { display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr); border-top: 1px solid var(--c-border); }
.calendar-week__allday-label { padding: var(--sp-2) var(--sp-1); color: var(--c-text-muted); font-size: var(--ts-xs); text-align: right; }
.calendar-week__allday-cell { padding: var(--sp-1); }
.calendar-week__allday-cell:not(.calendar-column--selected) { display: none; }
.calendar-week__allday .calendar-event { min-height: 1.75rem; padding-block: var(--sp-1); font-size: var(--ts-xs); }
.calendar-week__body { display: grid; grid-template-columns: var(--gutter) minmax(0, 1fr); }
.calendar-hours__label { display: block; height: var(--hour); padding-inline-end: var(--sp-2); color: var(--c-text-muted); font-size: var(--ts-xs); text-align: right; }
.calendar-slots { display: grid; grid-template-rows: repeat(96, var(--slot)); border-left: 1px solid var(--c-border); background-image: linear-gradient(to bottom, var(--c-border) 1px, transparent 1px); background-size: 100% var(--hour); cursor: pointer; }
.calendar-slots:not(.calendar-column--selected) { display: none; }
.calendar-slots .calendar-event { min-height: 0; padding: 0 var(--sp-1); overflow: hidden; flex-direction: column; align-items: stretch; gap: 0; font-size: var(--ts-xs); line-height: var(--lh-heading); }
.calendar-slots .calendar-event:focus-visible { outline-offset: -2px; }
/* Narrow lanes clip whole words instead of splitting "Overlap" into "Overla p"; the link keeps the full name. */
.calendar-slots .calendar-event > * { overflow: hidden; overflow-wrap: normal; text-overflow: ellipsis; }
.calendar-now { grid-column: 1 / -1; align-self: start; z-index: 1; height: 0; border-top: 2px solid var(--c-accent); pointer-events: none; }

.calendar-month { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--c-bg); }
.calendar-month th { padding: var(--sp-2) 0; color: var(--c-text-muted); font-size: var(--ts-xs); font-weight: var(--fw-strong); text-align: center; }
.calendar-day { height: 4.5rem; padding: var(--sp-1); vertical-align: top; text-align: center; border: 1px solid var(--c-border); }
.calendar-day--outside { background: var(--c-surface); color: var(--c-text-muted); }
.calendar-day--selected { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.calendar-day__number { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); border-radius: var(--r-sm); }
.calendar-day__number[aria-current="date"] { color: var(--c-on-accent); background: var(--c-accent); }
.calendar-day__count { display: block; color: var(--c-accent-subtle-text); font-size: var(--ts-xs); font-weight: var(--fw-strong); }
.calendar-day .calendar-events, .calendar-day__more { display: none; }

@media (min-width: 48rem) {
  .calendar-day { height: 8.5rem; text-align: left; }
  .calendar-day__number { min-width: 1.75rem; min-height: 1.75rem; }
  .calendar-day__count { display: none; }
  .calendar-day .calendar-events { display: grid; }
  .calendar-day__more { display: inline; font-size: var(--ts-xs); }
  .calendar-day .calendar-event { min-height: 1.75rem; padding-block: var(--sp-1); font-size: var(--ts-xs); }
}
@media (min-width: 64rem) {
  /* Reading pane (the shell adds --split at this width when the setting is on): the list stays in view beside the conversation. */
  .mail-panes--split { grid-template-columns: minmax(18rem, 2fr) minmax(0, 3fr); }
  .mail-panes--split > .mail-panes__list { position: sticky; top: var(--sp-4); max-height: calc(100dvh - 2 * var(--sp-4)); overflow-y: auto; }
  /* The list pane is narrow, so rows stack sender, subject and snippet as they do on a phone. */
  .mail-panes--split .mail-row {
    grid-template-columns: var(--avatar) minmax(0, 1fr) auto;
    grid-template-areas: "avatar people meta" "avatar subject subject" "avatar snippet snippet";
  }
  .mail-panes--split .mail-list--compact .mail-row { grid-template-columns: minmax(4rem, 8rem) minmax(0, 1fr) auto; grid-template-areas: "people subject meta"; }
  .mail-panes--split .mail-list--compact .mail-row__snippet { display: none; }
  .calendar-week__heads, .calendar-week__allday, .calendar-week__body { grid-template-columns: var(--gutter) repeat(7, minmax(0, 1fr)); }
  .calendar-week__corner { display: block; }
  .calendar-week__add { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); color: var(--c-text); border-radius: var(--r-sm); }
  .calendar-week__allday-cell:not(.calendar-column--selected) { display: block; }
  .calendar-slots:not(.calendar-column--selected) { display: grid; }
}

.field-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0; padding: 0; border: 0; }
.field-row > .field, .field-row > .field-group, .field-row > input, .field-row > select { flex: 1 1 10rem; min-width: 0; }
.field-row--end { align-items: end; }
.field--check { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; border: 0; }
.chip-row > legend { width: 100%; padding: 0; }
.chip-check { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); padding-inline: var(--sp-3); background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); }
.reminder-list { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.reminder-list__row { display: flex; gap: var(--sp-2); }
.reminder-list__row select { flex: 1 1 auto; min-width: 0; }
.guest-list { margin: 0; padding-left: var(--sp-6); }

.invite { border: 1px solid var(--c-accent); background: var(--c-accent-subtle); }
.invite__title { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--ts-base); }
.invite__answer { display: flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--c-success-text); }

.contacts-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.contacts-bar .mail-search { flex: 1 1 14rem; }
.contact-photo { width: var(--avatar); height: var(--avatar); object-fit: cover; border-radius: var(--r-sm); }
.contact-address { padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-md); }
/* Week grid positions: generated by scripts/calendar-grid-css.mjs, do not edit by hand */
.slot-row-1 { grid-row-start: 1; }
.slot-row-2 { grid-row-start: 2; }
.slot-row-3 { grid-row-start: 3; }
.slot-row-4 { grid-row-start: 4; }
.slot-row-5 { grid-row-start: 5; }
.slot-row-6 { grid-row-start: 6; }
.slot-row-7 { grid-row-start: 7; }
.slot-row-8 { grid-row-start: 8; }
.slot-row-9 { grid-row-start: 9; }
.slot-row-10 { grid-row-start: 10; }
.slot-row-11 { grid-row-start: 11; }
.slot-row-12 { grid-row-start: 12; }
.slot-row-13 { grid-row-start: 13; }
.slot-row-14 { grid-row-start: 14; }
.slot-row-15 { grid-row-start: 15; }
.slot-row-16 { grid-row-start: 16; }
.slot-row-17 { grid-row-start: 17; }
.slot-row-18 { grid-row-start: 18; }
.slot-row-19 { grid-row-start: 19; }
.slot-row-20 { grid-row-start: 20; }
.slot-row-21 { grid-row-start: 21; }
.slot-row-22 { grid-row-start: 22; }
.slot-row-23 { grid-row-start: 23; }
.slot-row-24 { grid-row-start: 24; }
.slot-row-25 { grid-row-start: 25; }
.slot-row-26 { grid-row-start: 26; }
.slot-row-27 { grid-row-start: 27; }
.slot-row-28 { grid-row-start: 28; }
.slot-row-29 { grid-row-start: 29; }
.slot-row-30 { grid-row-start: 30; }
.slot-row-31 { grid-row-start: 31; }
.slot-row-32 { grid-row-start: 32; }
.slot-row-33 { grid-row-start: 33; }
.slot-row-34 { grid-row-start: 34; }
.slot-row-35 { grid-row-start: 35; }
.slot-row-36 { grid-row-start: 36; }
.slot-row-37 { grid-row-start: 37; }
.slot-row-38 { grid-row-start: 38; }
.slot-row-39 { grid-row-start: 39; }
.slot-row-40 { grid-row-start: 40; }
.slot-row-41 { grid-row-start: 41; }
.slot-row-42 { grid-row-start: 42; }
.slot-row-43 { grid-row-start: 43; }
.slot-row-44 { grid-row-start: 44; }
.slot-row-45 { grid-row-start: 45; }
.slot-row-46 { grid-row-start: 46; }
.slot-row-47 { grid-row-start: 47; }
.slot-row-48 { grid-row-start: 48; }
.slot-row-49 { grid-row-start: 49; }
.slot-row-50 { grid-row-start: 50; }
.slot-row-51 { grid-row-start: 51; }
.slot-row-52 { grid-row-start: 52; }
.slot-row-53 { grid-row-start: 53; }
.slot-row-54 { grid-row-start: 54; }
.slot-row-55 { grid-row-start: 55; }
.slot-row-56 { grid-row-start: 56; }
.slot-row-57 { grid-row-start: 57; }
.slot-row-58 { grid-row-start: 58; }
.slot-row-59 { grid-row-start: 59; }
.slot-row-60 { grid-row-start: 60; }
.slot-row-61 { grid-row-start: 61; }
.slot-row-62 { grid-row-start: 62; }
.slot-row-63 { grid-row-start: 63; }
.slot-row-64 { grid-row-start: 64; }
.slot-row-65 { grid-row-start: 65; }
.slot-row-66 { grid-row-start: 66; }
.slot-row-67 { grid-row-start: 67; }
.slot-row-68 { grid-row-start: 68; }
.slot-row-69 { grid-row-start: 69; }
.slot-row-70 { grid-row-start: 70; }
.slot-row-71 { grid-row-start: 71; }
.slot-row-72 { grid-row-start: 72; }
.slot-row-73 { grid-row-start: 73; }
.slot-row-74 { grid-row-start: 74; }
.slot-row-75 { grid-row-start: 75; }
.slot-row-76 { grid-row-start: 76; }
.slot-row-77 { grid-row-start: 77; }
.slot-row-78 { grid-row-start: 78; }
.slot-row-79 { grid-row-start: 79; }
.slot-row-80 { grid-row-start: 80; }
.slot-row-81 { grid-row-start: 81; }
.slot-row-82 { grid-row-start: 82; }
.slot-row-83 { grid-row-start: 83; }
.slot-row-84 { grid-row-start: 84; }
.slot-row-85 { grid-row-start: 85; }
.slot-row-86 { grid-row-start: 86; }
.slot-row-87 { grid-row-start: 87; }
.slot-row-88 { grid-row-start: 88; }
.slot-row-89 { grid-row-start: 89; }
.slot-row-90 { grid-row-start: 90; }
.slot-row-91 { grid-row-start: 91; }
.slot-row-92 { grid-row-start: 92; }
.slot-row-93 { grid-row-start: 93; }
.slot-row-94 { grid-row-start: 94; }
.slot-row-95 { grid-row-start: 95; }
.slot-row-96 { grid-row-start: 96; }
.slot-rows-3 { grid-row-end: span 3; }
.slot-rows-4 { grid-row-end: span 4; }
.slot-rows-5 { grid-row-end: span 5; }
.slot-rows-6 { grid-row-end: span 6; }
.slot-rows-7 { grid-row-end: span 7; }
.slot-rows-8 { grid-row-end: span 8; }
.slot-rows-9 { grid-row-end: span 9; }
.slot-rows-10 { grid-row-end: span 10; }
.slot-rows-11 { grid-row-end: span 11; }
.slot-rows-12 { grid-row-end: span 12; }
.slot-rows-13 { grid-row-end: span 13; }
.slot-rows-14 { grid-row-end: span 14; }
.slot-rows-15 { grid-row-end: span 15; }
.slot-rows-16 { grid-row-end: span 16; }
.slot-rows-17 { grid-row-end: span 17; }
.slot-rows-18 { grid-row-end: span 18; }
.slot-rows-19 { grid-row-end: span 19; }
.slot-rows-20 { grid-row-end: span 20; }
.slot-rows-21 { grid-row-end: span 21; }
.slot-rows-22 { grid-row-end: span 22; }
.slot-rows-23 { grid-row-end: span 23; }
.slot-rows-24 { grid-row-end: span 24; }
.slot-rows-25 { grid-row-end: span 25; }
.slot-rows-26 { grid-row-end: span 26; }
.slot-rows-27 { grid-row-end: span 27; }
.slot-rows-28 { grid-row-end: span 28; }
.slot-rows-29 { grid-row-end: span 29; }
.slot-rows-30 { grid-row-end: span 30; }
.slot-rows-31 { grid-row-end: span 31; }
.slot-rows-32 { grid-row-end: span 32; }
.slot-rows-33 { grid-row-end: span 33; }
.slot-rows-34 { grid-row-end: span 34; }
.slot-rows-35 { grid-row-end: span 35; }
.slot-rows-36 { grid-row-end: span 36; }
.slot-rows-37 { grid-row-end: span 37; }
.slot-rows-38 { grid-row-end: span 38; }
.slot-rows-39 { grid-row-end: span 39; }
.slot-rows-40 { grid-row-end: span 40; }
.slot-rows-41 { grid-row-end: span 41; }
.slot-rows-42 { grid-row-end: span 42; }
.slot-rows-43 { grid-row-end: span 43; }
.slot-rows-44 { grid-row-end: span 44; }
.slot-rows-45 { grid-row-end: span 45; }
.slot-rows-46 { grid-row-end: span 46; }
.slot-rows-47 { grid-row-end: span 47; }
.slot-rows-48 { grid-row-end: span 48; }
.slot-rows-49 { grid-row-end: span 49; }
.slot-rows-50 { grid-row-end: span 50; }
.slot-rows-51 { grid-row-end: span 51; }
.slot-rows-52 { grid-row-end: span 52; }
.slot-rows-53 { grid-row-end: span 53; }
.slot-rows-54 { grid-row-end: span 54; }
.slot-rows-55 { grid-row-end: span 55; }
.slot-rows-56 { grid-row-end: span 56; }
.slot-rows-57 { grid-row-end: span 57; }
.slot-rows-58 { grid-row-end: span 58; }
.slot-rows-59 { grid-row-end: span 59; }
.slot-rows-60 { grid-row-end: span 60; }
.slot-rows-61 { grid-row-end: span 61; }
.slot-rows-62 { grid-row-end: span 62; }
.slot-rows-63 { grid-row-end: span 63; }
.slot-rows-64 { grid-row-end: span 64; }
.slot-rows-65 { grid-row-end: span 65; }
.slot-rows-66 { grid-row-end: span 66; }
.slot-rows-67 { grid-row-end: span 67; }
.slot-rows-68 { grid-row-end: span 68; }
.slot-rows-69 { grid-row-end: span 69; }
.slot-rows-70 { grid-row-end: span 70; }
.slot-rows-71 { grid-row-end: span 71; }
.slot-rows-72 { grid-row-end: span 72; }
.slot-rows-73 { grid-row-end: span 73; }
.slot-rows-74 { grid-row-end: span 74; }
.slot-rows-75 { grid-row-end: span 75; }
.slot-rows-76 { grid-row-end: span 76; }
.slot-rows-77 { grid-row-end: span 77; }
.slot-rows-78 { grid-row-end: span 78; }
.slot-rows-79 { grid-row-end: span 79; }
.slot-rows-80 { grid-row-end: span 80; }
.slot-rows-81 { grid-row-end: span 81; }
.slot-rows-82 { grid-row-end: span 82; }
.slot-rows-83 { grid-row-end: span 83; }
.slot-rows-84 { grid-row-end: span 84; }
.slot-rows-85 { grid-row-end: span 85; }
.slot-rows-86 { grid-row-end: span 86; }
.slot-rows-87 { grid-row-end: span 87; }
.slot-rows-88 { grid-row-end: span 88; }
.slot-rows-89 { grid-row-end: span 89; }
.slot-rows-90 { grid-row-end: span 90; }
.slot-rows-91 { grid-row-end: span 91; }
.slot-rows-92 { grid-row-end: span 92; }
.slot-rows-93 { grid-row-end: span 93; }
.slot-rows-94 { grid-row-end: span 94; }
.slot-rows-95 { grid-row-end: span 95; }
.slot-rows-96 { grid-row-end: span 96; }
.slot-col-1 { grid-column-start: 1; }
.slot-col-2 { grid-column-start: 2; }
.slot-col-3 { grid-column-start: 3; }
.slot-col-4 { grid-column-start: 4; }
.slot-col-5 { grid-column-start: 5; }
.slot-col-6 { grid-column-start: 6; }
.slot-cols-2 { grid-column-end: span 2; }
.slot-cols-3 { grid-column-end: span 3; }
.slot-cols-4 { grid-column-end: span 4; }
.slot-cols-5 { grid-column-end: span 5; }
.slot-cols-6 { grid-column-end: span 6; }
.slot-grid-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.slot-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slot-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.slot-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.slot-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.slot-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.calendar-now--step-1 { margin-top: calc(var(--slot) * 1 / 5); }
.calendar-now--step-2 { margin-top: calc(var(--slot) * 2 / 5); }
.calendar-now--step-3 { margin-top: calc(var(--slot) * 3 / 5); }
.calendar-now--step-4 { margin-top: calc(var(--slot) * 4 / 5); }
/* End of week grid positions */
/* End of calendar and contacts */

/* Bridges (Settings > Bridges, #/bridge/pair) */
.bridge-protocols { margin: 0; padding: 0; border: 0; }
.bridge-protocols > legend { padding: 0; font-weight: var(--fw-strong); }

/* A password-protected message reply keeps its line breaks; it is plain text. */
.note-reply {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* AI on this device: the result panel and the settings list of what this device can do. */
.ai-panel { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--c-border); border-left: 4px solid var(--c-ai-text); border-radius: var(--r-lg); background: var(--c-bg); }
.ai-panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ai-panel__title { margin: 0; font-size: var(--ts-md); }
.ai-panel__head .button { margin-left: auto; }
.ai-panel__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-panel__text:empty { display: none; }
.ai-panel__status { margin: 0; color: var(--c-text-muted); font-size: var(--ts-sm); }
.ai-panel__status:empty { display: none; }
.ai-states { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-4); margin: 0; }
.ai-states dt { font-weight: var(--fw-strong); }
.ai-states dd { margin: 0; color: var(--c-text-muted); }

/* Translation of a message in another language, made on this device. */
.translate-bar { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: var(--c-ai-bg); color: var(--c-ai-text); }
.translate-bar[hidden], .translation[hidden] { display: none; }
.translate-bar__note { margin: 0; }
.translation { display: flex; flex-direction: column; gap: var(--sp-2); }
.translation__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--c-text); }

/* Suggested replies above the reply box. */
.suggested-replies { display: flex; flex-direction: column; gap: var(--sp-2); }
.suggested-replies[hidden] { display: none; }
.suggested-replies__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.suggestions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.suggestions__reply { text-align: left; }

/* Rich editor: formatting buttons over an editable view of the Markdown. */
.rich-editor { display: flex; flex-direction: column; gap: var(--sp-2); }
.rich-editor__bar { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.rich-editor__bar .button { font-size: var(--ts-sm); }
.rich-editor__content { overflow-wrap: anywhere; }
.rich-editor__content:empty::before { content: attr(data-placeholder); color: var(--c-text-muted); }
.rich-editor__content h1 { font-size: var(--ts-xl); }
.rich-editor__content h2 { font-size: var(--ts-lg); }
.rich-editor__content h3 { font-size: var(--ts-md); }
.rich-editor__content blockquote { margin-inline: 0; padding-inline-start: var(--sp-3); border-inline-start: 3px solid var(--c-border); color: var(--c-text-muted); }
.rich-editor__content pre, .rich-editor__content code { background: var(--c-surface); border-radius: var(--r-sm); }
.rich-editor__content pre { padding: var(--sp-3); white-space: pre-wrap; }
.rich-image { padding: 0 var(--sp-2); border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); font-size: var(--ts-sm); }

/* Help me write: the result against the old text. Colour is never the only cue: removed words are struck through, new ones underlined. */
.write-preview { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.write-preview[hidden] { display: none; }
.write-preview__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.write-preview del { background: var(--c-danger-bg); color: var(--c-danger-text); text-decoration: line-through; }
.write-preview ins { background: var(--c-success-bg); color: var(--c-success-text); text-decoration: underline; }

/* Templates in the composer. */
.template-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.template-list__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Sent messages still waiting for a reply, above the Inbox. */
.follow-up__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.follow-up__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

/* A compose window opened with "Pop out": only the message, no folders or header, while it is writing. */
.popout .site-header, .popout .mail-compose-link, .popout .mail-search, .popout .mail-nav { display: none; }
.popout .mail { display: block; }

/* Take back, on my own sent message. */
.take-back { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

/* Chat form: a message to Docket people only. */
.mail-compose--chat .compose-extra { display: none; }
.mail-compose--chat .message-box { min-height: calc(var(--lh-body) * 2em + 2 * var(--sp-2)); }

/* Form, payment and QR blocks. */
.md-form { gap: var(--sp-4); }
.md-form__title, .md-payment__title { margin: 0; font-weight: var(--fw-strong); }
.md-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }

.md-field {
  display: grid;
  gap: var(--sp-1);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.md-field legend { padding: 0; }
.md-required { font-weight: var(--fw-regular); color: var(--c-text-muted); }
.md-error { margin: 0; font-size: var(--ts-sm); color: var(--c-danger-text); }
.md-error:empty { display: none; }
.md-field [aria-invalid="true"] { border-color: var(--c-danger-text); }
.md-choices { display: flex; flex-wrap: wrap; column-gap: var(--sp-6); }
.md-form input[disabled], .md-form select[disabled], .md-form textarea[disabled] { cursor: default; }

.md-tally { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }

.md-payment {
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

.md-qr { justify-items: start; }
.md-qr__image { display: block; width: min(100%, 14rem); height: auto; border-radius: var(--r-sm); }
.md-qr__light { fill: var(--c-qr-light); }
.md-qr__dark { fill: var(--c-qr-dark); }

/* Block builder: the message as a list of blocks, a properties panel, a live preview. */
.builder-wrap { display: grid; gap: var(--sp-2); justify-items: start; }
.builder-wrap > .block-bar__button[aria-expanded="true"] { background: var(--c-accent-subtle); color: var(--c-accent-subtle-text); border-color: var(--c-accent-subtle-text); }
.builder { display: grid; gap: var(--sp-4); width: 100%; padding: var(--sp-3); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.builder[hidden] { display: none; }
.builder__main { display: grid; gap: var(--sp-3); min-width: 0; align-content: start; }
.builder__main > .button { justify-self: start; }
.builder__heading, .builder__panel-title, .properties__heading { margin: 0; font-size: var(--ts-base); }
.builder__list { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.builder__empty { margin: 0; }

.builder__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: grab;
}

.builder__item--dragging { opacity: 0.5; }
.builder__item--editing { border-color: var(--c-accent); }
.builder__title { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; font-weight: var(--fw-strong); }
.builder__actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.builder__actions .button[aria-disabled="true"], .properties__row .button[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.builder__preview { padding: var(--sp-4); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); }

/* On a phone the properties are a sheet from the bottom edge; with room they sit beside the list. */
.builder__panel {
  position: fixed;
  inset: auto 0 0;
  z-index: 20;
  display: grid;
  gap: var(--sp-3);
  max-height: 80vh;
  overflow-y: auto;
  padding: var(--sp-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-md);
}

.builder__panel[hidden] { display: none; }
.builder__panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.properties__list { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.properties__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.properties__choose { flex: 1 1 10rem; justify-content: flex-start; text-align: left; border-color: var(--c-border); }
.properties__choose[aria-current="true"] { background: var(--c-accent-subtle); color: var(--c-accent-subtle-text); border-color: var(--c-accent-subtle-text); }
.properties__add { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-2); }
.properties__add > .field, .properties__add > .field-group { flex: 1 1 10rem; }

@media (min-width: 64rem) {
  .builder--editing { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: start; }
  .builder__panel { position: static; max-height: none; overflow: visible; border-radius: var(--r-md); box-shadow: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .builder__item { transition: border-color var(--duration-micro) var(--ease-standard), opacity var(--duration-micro) var(--ease-standard); }
}