/* V13 dashboard surface. Pencil and Forge share this DOM; only motion differs. */
html[data-dashboard="v13"] {
  --gaddr-mark-from: #8a6bff;
  --gaddr-mark-to: #4b25f4;
  --gaddr-accent-light: #2f00ff;
  --gaddr-accent-dark: #6b4cff;
  --ui-icon-size: 22px;
  --topbar-height: 56px;
  --row-height: 48px;
  --motion-standard: cubic-bezier(.2, .8, .2, 1);
  --button-hover-border: color-mix(in srgb, var(--accent-ui) 42%, var(--border));
  --button-hover-fill: color-mix(in srgb, var(--accent-ui) 8%, var(--surface));
  --button-hover-shadow: 0 3px 10px color-mix(in srgb, var(--accent-ui) 14%, transparent);
  --surface-hover: var(--surface-muted);
  --surface-active: var(--surface-selected);
  --surface-elevated: var(--surface);
  --border-hover: var(--button-hover-border);
  --text-muted: var(--text-tertiary);
  --primary-hover: color-mix(in srgb, var(--accent-ui) 88%, var(--text-primary));
  --primary-active: color-mix(in srgb, var(--accent-ui) 78%, var(--text-primary));
  --accent: var(--accent-ui);
  --accent-hover: var(--primary-hover);
  --scrim-soft: rgb(5 8 18 / .30);
  --scrim: rgb(4 7 15 / .45);
  --scrim-strong: rgb(4 7 15 / .62);
  color-scheme: light dark;
}

html[data-dashboard="v13"][data-theme="light"] {
  color-scheme: light;
  --page: #fbfcff;
  --surface: #ffffff;
  --surface-muted: #f6f7fb;
  --surface-selected: #f3f0ff;
  --text-primary: #07143f;
  --text-secondary: #52628c;
  --text-tertiary: #5b6d9b;
  --border: #dde1eb;
  --control-border: #9da6be;
  --input-background: #ffffff;
  --input-placeholder: #59698f;
  --dropdown-background: #ffffff;
  --disabled-background: #f0f1f5;
  --tooltip-fill: #07143f;
  --tooltip-text: #ffffff;
  --disabled-text: #676d80;
  --focus-ring: #5f43ff;
  --success: #19765a;
  --warning: #8a5a00;
  --danger: #b42318;
  --danger-foreground: #ffffff;
  --overlay: rgb(5 8 18 / .45);
  --accent-ui: var(--gaddr-accent-light);
  --accent-text: #2f00ff;
  --chip-work-bg: #efedff;
  --chip-work-text: #3927bd;
  --chip-finance-bg: #ffede3;
  --chip-finance-text: #a63e00;
  --chip-security-bg: #e5efff;
  --chip-security-text: #124da9;
  --chip-personal-bg: #e1f5e8;
  --chip-personal-text: #17653b;
  --chip-soon-bg: #e8e9ef;
  --chip-soon-text: #494a59;
  --chip-jobs-bg: #ede9ff;
  --chip-jobs-text: #4630c7;
  --chip-current-bg: #e7e1ff;
  --chip-current-text: #3f26ba;
  --shadow-ui: 0 16px 36px rgb(20 28 70 / .12), 0 2px 8px rgb(20 28 70 / .06);
  --shadow-search: 0 12px 26px rgb(29 28 84 / .10);
  --skeleton-base: #e5e8f0;
  --skeleton-wave: #f8f9fc;
  --background: var(--page);
  --foreground: var(--text-primary);
  --muted: var(--text-secondary);
  --surface-strong: var(--surface-selected);
  --primary: var(--accent-ui);
  --primary-foreground: #ffffff;
  --focus: var(--focus-ring);
  --shadow: var(--shadow-ui);
  --shadow-soft: var(--shadow-search);
}

html[data-dashboard="v13"][data-theme="dark"] {
  color-scheme: dark;
  --page: #05080f;
  --surface: #0b111b;
  --surface-muted: #101620;
  --surface-selected: #17192a;
  --text-primary: #f7f8fc;
  --text-secondary: #b9becc;
  --text-tertiary: #a6adbe;
  --border: #303744;
  --control-border: #697385;
  --input-background: #0c121c;
  --input-placeholder: #b8bdca;
  --dropdown-background: #0b1019;
  --disabled-background: #151a24;
  --tooltip-fill: #e8eaf2;
  --tooltip-text: #07143f;
  --disabled-text: #979ead;
  --focus-ring: #a28cff;
  --success: #67d4ad;
  --warning: #ffc857;
  --danger: #ff8a80;
  --danger-foreground: #21110f;
  --overlay: rgb(4 7 15 / .72);
  --accent-ui: var(--gaddr-accent-dark);
  --accent-text: #a28cff;
  --chip-work-bg: #1e1a42;
  --chip-work-text: #ad9fff;
  --chip-finance-bg: #4b290f;
  --chip-finance-text: #ffad5b;
  --chip-security-bg: #102b4d;
  --chip-security-text: #77b4ff;
  --chip-personal-bg: #103a24;
  --chip-personal-text: #73dea2;
  --chip-soon-bg: #2b2b34;
  --chip-soon-text: #d0d1da;
  --chip-jobs-bg: #342b66;
  --chip-jobs-text: #e4deff;
  --chip-current-bg: #3b2f78;
  --chip-current-text: #f0ecff;
  --shadow-ui: 0 18px 42px rgb(0 0 0 / .40), 0 2px 10px rgb(0 0 0 / .25);
  --shadow-search: 0 14px 34px rgb(0 0 0 / .28);
  --skeleton-base: #171d28;
  --skeleton-wave: #2c3442;
  --background: var(--page);
  --foreground: var(--text-primary);
  --muted: var(--text-secondary);
  --surface-strong: var(--surface-selected);
  --primary: var(--accent-ui);
  --primary-foreground: #ffffff;
  --focus: var(--focus-ring);
  --shadow: var(--shadow-ui);
  --shadow-soft: var(--shadow-search);
}

html[data-dashboard="v13"] body {
  background: var(--page);
  color: var(--text-primary);
  font-family: Manrope, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: "tnum" 1;
}

html[data-dashboard="v13"] button,
html[data-dashboard="v13"] input,
html[data-dashboard="v13"] textarea,
html[data-dashboard="v13"] select {
  font-family: inherit;
}

/* Den delade hover-kontrakten for varje knapp. `.family-menu-scrim` stod i
   undantagslistan tills 2026-09-09; scrimmen forsvann med den lokala
   familjemenyn, och undantaget med den. `.nav-scrim` star kvar. */
html[data-dashboard="v13"] :where(button:not(:disabled):not([aria-disabled="true"]):not(.nav-scrim)) {
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

html[data-dashboard="v13"] :where(button:not(:disabled):not([aria-disabled="true"]):not(.nav-scrim)):hover {
  box-shadow: inset 0 0 0 1px var(--button-hover-border), var(--button-hover-shadow);
}

html[data-dashboard="v13"] :where(button:not(:disabled):not([aria-disabled="true"]):not(.nav-scrim)):active {
  box-shadow: inset 0 0 0 1px var(--border-hover), inset 0 2px 4px color-mix(in srgb, var(--text-primary) 14%, transparent);
}

html[data-dashboard="v13"] a:focus-visible,
html[data-dashboard="v13"] button:focus-visible,
html[data-dashboard="v13"] input:focus-visible,
html[data-dashboard="v13"] select:focus-visible,
html[data-dashboard="v13"] textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

html[data-dashboard="v13"] .mail-view {
  position: relative;
  height: 100dvh;
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
  background: var(--page);
}

html[data-dashboard="v13"] .topbar {
  display: grid;
  position: relative;
  z-index: 20;
  width: 100%;
  max-width: none;
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  margin: 0;
  gap: 16px;
  padding-inline: 16px;
  border-bottom: 1px solid var(--border);
  background: var(--page);
}

/* Gaddrs produktmeny star dar markt och familjeknappen stod. Kontraktet ritar
   allt inuti sig sjalvt, i en shadow root som den har filen inte nar in i; det
   enda som behovs harifran ar platsen i raden. */
html[data-dashboard="v13"] .product-bar gaddr-nav {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

html[data-dashboard="v13"] .product-bar {
  display: flex;
  height: var(--topbar-height);
  align-items: center;
  border-inline-end: 0;
}

/* The mark is a way home and the caret opens the family. They were one
   button, so the only thing the logo did was open a menu. */
html[data-dashboard="v13"] .brand-home,
html[data-dashboard="v13"] .product-switcher-trigger {
  display: inline-flex;
  position: relative;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  margin: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-primary);
  font-weight: 600;
}

html[data-dashboard="v13"] .nav-toggle {
  display: none;
}

html[data-dashboard="v13"] .topbar-action svg {
  width: var(--ui-icon-size);
  height: var(--ui-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

html[data-dashboard="v13"] .topbar-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 4px;
}

html[data-dashboard="v13"] .topbar-actions .account {
  max-width: 220px;
  overflow: hidden;
  margin-inline: 8px;
  color: var(--text-secondary);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-dashboard="v13"] .topbar-actions .sync-status {
  margin-inline-end: 4px;
  color: var(--text-secondary);
  font-size: 13px;
  white-space: nowrap;
}

html[data-dashboard="v13"] .icon-action.active {
  background: color-mix(in srgb, var(--accent-ui) 16%, var(--surface));
  box-shadow: inset 0 -2px 0 var(--accent-ui);
  color: var(--accent-text);
}

html[data-dashboard="v13"] .mobile-mailbox-bar {
  display: none;
}

html[data-dashboard="v13"] .family-icon-library {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

@keyframes family-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

html[data-dashboard="v13"] .family-status {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}

html[data-dashboard="v13"] .status-soon,
html[data-dashboard="v13"] .status-unavailable {
  background: var(--chip-soon-bg);
  color: var(--chip-soon-text);
}

html[data-dashboard="v13"] .status-jobs {
  background: var(--chip-jobs-bg);
  color: var(--chip-jobs-text);
}

html[data-dashboard="v13"] .status-current {
  background: var(--chip-current-bg);
  color: var(--chip-current-text);
}

html[data-dashboard="v13"] .workspace-layout {
  display: grid;
  width: 100%;
  max-width: none;
  height: calc(100dvh - var(--topbar-height));
  min-height: 0;
  grid-template-columns: 336px minmax(0, 1fr);
  gap: 0;
  margin: 0;
}

html[data-dashboard="v13"] .workspace-nav {
  display: flex;
  position: relative;
  top: auto;
  width: 336px;
  height: calc(100dvh - var(--topbar-height));
  max-height: calc(100dvh - var(--topbar-height));
  min-height: 0;
  align-self: stretch;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-inline-end: 1px solid var(--border);
  border-radius: 0;
  background: var(--page);
  box-shadow: none;
}

html[data-dashboard="v13"] .workspace-nav-scroll {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 32px 14px 18px;
}

html[data-dashboard="v13"] .compose-cta {
  display: flex;
  width: calc(100% - 20px);
  min-height: 62px;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 0 10px 16px;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: var(--accent-ui);
  color: var(--primary-foreground);
  box-shadow: none;
  font-size: 16px;
  font-weight: 600;
}

html[data-dashboard="v13"] .compose-cta:hover {
  transform: none;
  background: var(--primary-hover);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-ui) 18%, transparent), var(--button-hover-shadow);
}

html[data-dashboard="v13"] .compose-cta span:first-child {
  width: 24px;
  font-size: 25px;
  text-align: center;
}

html[data-dashboard="v13"] .nav-heading {
  margin: 14px 18px 6px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}

html[data-dashboard="v13"] .nav-item {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 500;
}

html[data-dashboard="v13"] .nav-item:hover {
  border-color: transparent;
  background: var(--surface-muted);
}

html[data-dashboard="v13"] .nav-item.active {
  background: var(--surface-selected);
  color: var(--accent-text);
  font-weight: 600;
}

html[data-dashboard="v13"] .nav-label {
  gap: 12px;
}

html[data-dashboard="v13"] .nav-icon {
  display: inline-grid;
  width: var(--ui-icon-size);
  height: var(--ui-icon-size);
  flex: 0 0 var(--ui-icon-size);
  place-items: center;
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
}

html[data-dashboard="v13"] .tab-count {
  color: var(--text-secondary);
}

html[data-dashboard="v13"] .tab-count.has-unread {
  color: var(--primary-foreground);
}

html[data-dashboard="v13"] .nav-add {
  color: var(--accent-text);
}

html[data-dashboard="v13"] .label-nav-item {
  margin-inline: 4px;
  color: var(--text-secondary);
}

html[data-dashboard="v13"] .rail-markers {
  display: grid;
  gap: 18px;
  margin: 24px 0 18px 20px;
}

html[data-dashboard="v13"] .rail-markers span {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--primary);
}

html[data-dashboard="v13"] .rail-markers span:nth-child(2) { background: var(--success); }
html[data-dashboard="v13"] .rail-markers span:nth-child(3) { background: var(--warning); }

/* The synthetic fixture must not show a live clock or a working refresh; the
   screenshots it feeds would otherwise differ on every capture. */
html[data-dashboard="v13"][data-fixture="synthetic"] .topbar-actions .sync-status,
html[data-dashboard="v13"][data-fixture="synthetic"] .topbar-actions .refresh-action {
  display: none !important;
}

html[data-dashboard="v13"] .sync-status {
  display: inline-flex;
  max-width: none;
  margin: 8px 16px 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
}

html[data-dashboard="v13"] #refresh-button {
  display: inline-flex;
  width: auto;
  min-width: max-content;
  max-width: none;
  flex: 0 0 auto;
  justify-content: center;
  margin: 0 4px;
  padding-inline: 10px;
  color: var(--text-secondary);
}

html[data-dashboard="v13"] .signout-action {
  display: inline-flex;
  flex: 0 0 auto;
  margin: 0 4px;
  white-space: nowrap;
}

html[data-dashboard="v13"] .signout-action svg {
  width: var(--ui-icon-size);
  height: var(--ui-icon-size);
  flex: 0 0 var(--ui-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

html[data-dashboard="v13"] .workspace-content {
  min-width: 0;
  width: 100%;
  height: calc(100dvh - var(--topbar-height));
  overflow: hidden;
  padding: 10px;
  background: var(--surface-muted);
}

html[data-dashboard="v13"] .workspace-content:has(.content-panel:not([hidden])) {
  overflow-y: auto;
}

html[data-dashboard="v13"] .mail-dashboard-view {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}

html[data-dashboard="v13"] .mail-container {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

html[data-dashboard="v13"] .mail-search {
  display: grid;
  position: relative;
  width: 100%;
  max-width: 720px;
  min-width: 0;
  height: 44px;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--surface-muted);
  box-shadow: none;
}

html[data-dashboard="v13"] .mail-search:focus-within {
  border-color: var(--focus-ring);
  background: var(--surface);
  box-shadow: 0 1px 6px color-mix(in srgb, var(--accent-ui) 14%, transparent);
}

html[data-dashboard="v13"] .search-icon {
  display: inline-grid;
  width: 100%;
  height: var(--ui-icon-size);
  place-items: center;
  padding: 0;
  color: var(--text-secondary);
}

html[data-dashboard="v13"] .search-icon svg,
html[data-dashboard="v13"] .search-clear svg {
  width: var(--ui-icon-size);
  height: var(--ui-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

html[data-dashboard="v13"] .mail-search input {
  min-width: 0;
  height: 42px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 400;
  outline: 0;
}

html[data-dashboard="v13"] .mail-search input::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}

html[data-dashboard="v13"] .search-clear {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
}

html[data-dashboard="v13"] .search-clear:hover {
  background: var(--button-hover-fill);
  color: var(--text-primary);
}

html[data-dashboard="v13"] .list-toolbar {
  display: flex;
  width: 100%;
  min-height: 44px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px 12px;
  margin: 0;
  padding: 4px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

html[data-dashboard="v13"] .folder-title {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}

html[data-dashboard="v13"] .list-toolbar .badge {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 24px;
  white-space: nowrap;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--accent-ui);
  color: var(--primary-foreground);
  font-size: 13px;
  font-weight: 700;
}

html[data-dashboard="v13"] .read-filter {
  display: inline-flex;
  flex: 0 0 auto;
  margin-inline-start: 8px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  gap: 2px;
}

html[data-dashboard="v13"] .read-filter-option {
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
}

html[data-dashboard="v13"] .read-filter-option.is-selected {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--text-primary) 12%, transparent);
}

html[data-dashboard="v13"] .message-count {
  min-width: 96px;
  flex: 0 1 auto;
  margin: 0 0 0 auto;
  white-space: nowrap;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  text-align: end;
}

html[data-dashboard="v13"] .mail-grid {
  display: block;
  position: relative;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

html[data-dashboard="v13"] .message-list-panel {
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 0;
  background: var(--surface);
}

html[data-dashboard="v13"] .list-heading {
  display: grid;
  min-height: 30px;
  grid-template-columns: 56px 215px minmax(260px, 1fr) 145px 100px;
  align-items: center;
  padding: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

html[data-dashboard="v13"] .list-heading > span {
  padding-inline: 14px;
}

html[data-dashboard="v13"] .table-check,
html[data-dashboard="v13"] .row-select {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-inline: auto;
  border: 1.5px solid var(--control-border);
  border-radius: 4px;
  background: transparent;
}

html[data-dashboard="v13"] .message-list {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: color-mix(in srgb, var(--control-border) 78%, transparent) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  background: var(--surface);
}

html[data-dashboard="v13"] .message-list::-webkit-scrollbar,
html[data-dashboard="v13"] .reader-scroll::-webkit-scrollbar {
  width: 10px;
}

html[data-dashboard="v13"] .message-list::-webkit-scrollbar-track,
html[data-dashboard="v13"] .reader-scroll::-webkit-scrollbar-track {
  background: transparent;
}

html[data-dashboard="v13"] .message-list::-webkit-scrollbar-thumb,
html[data-dashboard="v13"] .reader-scroll::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--control-border) 78%, transparent);
  background-clip: padding-box;
}

html[data-dashboard="v13"] .message-list::-webkit-scrollbar-thumb:hover,
html[data-dashboard="v13"] .reader-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--control-border);
  background-clip: padding-box;
}

html[data-dashboard="v13"] .message-row {
  display: grid;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 72px;
  grid-template-columns: 56px 215px minmax(260px, 1fr) 145px 100px;
  align-items: center;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  color: var(--text-primary);
  text-align: start;
  transition: background 100ms ease;
}

html[data-dashboard="v13"] .message-row:last-child {
  border-bottom: 0;
}

html[data-dashboard="v13"] .message-row:hover,
html[data-dashboard="v13"] .message-row.active {
  background: var(--surface-muted);
  box-shadow: none;
}

/* Read and unread are told apart four ways at once (weight, ink, ground and a
   marker) because any single one of them disappears at a glance, on a dim
   screen, or for a reader who cannot separate two greys. */
html[data-dashboard="v13"] .message-row.unread {
  padding-inline-start: 0;
  border-inline-start: 3px solid var(--accent-ui);
  background: var(--surface);
}

html[data-dashboard="v13"] .message-row.unread::before {
  display: none;
}

html[data-dashboard="v13"] .message-row.unread .from,
html[data-dashboard="v13"] .message-row.unread .subject {
  color: var(--text-primary);
  font-weight: 800;
}

html[data-dashboard="v13"] .message-row.unread .message-preview,
html[data-dashboard="v13"] .message-row.unread time {
  color: var(--text-primary);
  font-weight: 600;
}

html[data-dashboard="v13"] .message-row.read {
  border-inline-start: 3px solid transparent;
  background: var(--surface-muted);
}

html[data-dashboard="v13"] .message-row.read .from,
html[data-dashboard="v13"] .message-row.read .subject {
  color: var(--text-secondary);
  font-weight: 400;
}

/* The dot is the unread marker, not a checkbox. It is filled only when unread. */
html[data-dashboard="v13"] .message-row .row-select {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

html[data-dashboard="v13"] .message-row.unread .row-select {
  background: var(--accent-ui);
}

html[data-dashboard="v13"] .message-row .from,
html[data-dashboard="v13"] .message-row time,
html[data-dashboard="v13"] .message-copy,
html[data-dashboard="v13"] .category-chip,
html[data-dashboard="v13"] .message-row .row-labels {
  min-width: 0;
  padding-inline: 14px;
}

html[data-dashboard="v13"] .message-row .from {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-dashboard="v13"] .message-copy {
  display: grid;
  gap: 2px;
}

html[data-dashboard="v13"] .message-row .subject,
html[data-dashboard="v13"] .message-preview {
  display: block;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-dashboard="v13"] .message-row .subject {
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
}

html[data-dashboard="v13"] .message-preview {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

html[data-dashboard="v13"] .message-row time {
  color: var(--text-secondary);
  font-size: 13px;
  text-align: start;
}

html[data-dashboard="v13"] .category-chip {
  justify-self: start;
  width: max-content;
  max-width: calc(100% - 20px);
  margin-inline: 10px;
  padding: 4px 10px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--chip-work-bg);
  color: var(--chip-work-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-dashboard="v13"] .message-row .row-labels {
  display: flex;
  width: auto;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  overflow: visible;
}

html[data-dashboard="v13"] .message-row .row-labels .label-chip {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-dashboard="v13"] .category-finance {
  background: var(--chip-finance-bg);
  color: var(--chip-finance-text);
}

html[data-dashboard="v13"] .category-security {
  background: var(--chip-security-bg);
  color: var(--chip-security-text);
}

html[data-dashboard="v13"] .category-personal {
  background: var(--chip-personal-bg);
  color: var(--chip-personal-text);
}

html[data-dashboard="v13"] .reader {
  display: none;
}

html[data-dashboard="v13"] .mail-grid.reader-open .reader {
  display: block;
  position: absolute;
  z-index: 20;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  background: var(--surface);
}

html[data-dashboard="v13"] .reader-content {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
}

html[data-dashboard="v13"] .reader-content[hidden] {
  display: none;
}

html[data-dashboard="v13"] .reader-scroll {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Was up to 64px on every side, which put the message a long way from the
     left edge and a long way down the screen before a word of it appeared.
     Each part below carries the padding it needs instead. */
  padding: 0;
  scrollbar-color: color-mix(in srgb, var(--control-border) 78%, transparent) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

html[data-dashboard="v13"] .reader-footer {
  display: flex;
  min-height: 68px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px clamp(28px, 4vw, 64px);
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 -8px 24px color-mix(in srgb, var(--text-primary) 8%, transparent);
}

html[data-dashboard="v13"] .reader-footer button {
  min-width: 112px;
  min-height: 44px;
}

html[data-dashboard="v13"] .mail-grid.reader-open .reader-back {
  display: inline-flex;
}

html[data-dashboard="v13"] .message-skeleton {
  display: grid;
  min-height: 72px;
  grid-template-columns: 56px 215px minmax(260px, 1fr) 145px 100px;
  align-items: center;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

html[data-dashboard="v13"] .skeleton-block {
  display: block;
  border-radius: 5px;
  background: linear-gradient(105deg, var(--skeleton-base) 28%, var(--skeleton-wave) 44%, var(--skeleton-base) 60%);
  background-size: 320% 100%;
  animation: skeleton-wave 1.55s linear infinite;
}

@keyframes skeleton-wave {
  from { background-position: 160% 0; }
  to { background-position: -160% 0; }
}

html[data-dashboard="v13"] .skeleton-select {
  width: 18px;
  height: 18px;
  justify-self: center;
  border-radius: 4px;
}

html[data-dashboard="v13"] .skeleton-sender {
  width: 56%;
  height: 14px;
  margin-inline: 14px;
}

html[data-dashboard="v13"] .skeleton-copy {
  display: grid;
  gap: 8px;
  padding-inline: 14px;
}

html[data-dashboard="v13"] .skeleton-subject {
  width: 66%;
  height: 14px;
}

html[data-dashboard="v13"] .skeleton-preview {
  width: 88%;
  height: 9px;
}

html[data-dashboard="v13"] .skeleton-category {
  width: 58px;
  height: 24px;
  margin-inline: 14px;
}

html[data-dashboard="v13"] .skeleton-date {
  width: 55px;
  height: 12px;
  margin-inline: 14px;
}

html[data-dashboard="v13"] .content-panel {
  width: min(950px, 100%);
  min-height: calc(100dvh - 160px);
  margin-inline-start: auto;
  border-radius: 10px;
  box-shadow: none;
}

html[data-dashboard="v13"][data-build="pencil"] *,
html[data-dashboard="v13"][data-build="pencil"] *::before,
html[data-dashboard="v13"][data-build="pencil"] *::after {
  scroll-behavior: auto !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
}

html[data-dashboard="v13"][data-build="pencil"] .skeleton-block {
  background: var(--skeleton-base);
}

html[data-dashboard="v13"][data-motion="reduce"] *,
html[data-dashboard="v13"][data-motion="reduce"] *::before,
html[data-dashboard="v13"][data-motion="reduce"] *::after {
  scroll-behavior: auto !important;
  animation-duration: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
}

html[data-dashboard="v13"][data-motion="reduce"] .skeleton-block {
  background: var(--skeleton-base);
  animation: none !important;
}

@media (max-width: 1180px) {

  html[data-dashboard="v13"] .message-skeleton {
    grid-template-columns: 48px 160px minmax(220px, 1fr) 86px;
  }

  /* The row narrows with the window rather than holding fixed pixel columns,
     which is what squeezed the subject out between 900px and 1200px. */
  html[data-dashboard="v13"] .row-open {
    grid-template-columns: 170px minmax(180px, 1fr) 92px;
  }

  html[data-dashboard="v13"] .list-heading {
    grid-template-columns: 34px 14px 170px minmax(180px, 1fr) 92px 34px;
  }

  html[data-dashboard="v13"] .list-heading .heading-category,
  html[data-dashboard="v13"] .message-row .category-chip,
  html[data-dashboard="v13"] .message-row .row-labels,
  html[data-dashboard="v13"] .row-open .row-labels,
  html[data-dashboard="v13"] .row-open .category-chip,
  html[data-dashboard="v13"] .message-skeleton .skeleton-category {
    display: none;
  }
}

@media (max-width: 900px) {
  html[data-dashboard="v13"] .topbar {
    gap: 10px;
    padding-inline: 10px;
  }

  html[data-dashboard="v13"] .topbar-actions .sync-status,
  html[data-dashboard="v13"] .topbar-actions .account {
    display: none;
  }

  html[data-dashboard="v13"] .workspace-layout {
    grid-template-columns: 72px minmax(0, 1fr);
    height: calc(100dvh - 72px);
    min-height: calc(100dvh - 72px);
  }

  html[data-dashboard="v13"] .workspace-nav {
    width: 72px;
    height: calc(100dvh - 72px);
    max-height: calc(100dvh - 72px);
    min-height: calc(100dvh - 72px);
    padding: 0;
    overflow: hidden;
    transform: none;
    transition: none;
  }

  html[data-dashboard="v13"] .workspace-nav-scroll {
    padding: 22px 8px 12px;
    overflow-y: auto;
    scrollbar-width: none;
  }

  html[data-dashboard="v13"] .workspace-nav-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  html[data-dashboard="v13"] .compose-cta {
    width: 52px;
    min-height: 52px;
    justify-content: center;
    margin: 0 2px 14px;
    padding: 0;
  }

  html[data-dashboard="v13"] .compose-cta span:last-child,
  html[data-dashboard="v13"] .nav-text,
  html[data-dashboard="v13"] .nav-heading,
  html[data-dashboard="v13"] .nav-heading-row,
  html[data-dashboard="v13"] .tab-count,
  html[data-dashboard="v13"] .label-nav-list,
  html[data-dashboard="v13"] .sync-status {
    display: none;
  }

  html[data-dashboard="v13"] .nav-item {
    width: 54px;
    min-height: 52px;
    justify-content: center;
    padding: 0;
  }

  html[data-dashboard="v13"] .nav-label {
    gap: 0;
  }

  html[data-dashboard="v13"] .rail-markers {
    display: none;
  }

  html[data-dashboard="v13"] #refresh-button,
  html[data-dashboard="v13"] .signout-action {
    width: 54px;
    min-height: 48px;
    justify-content: center;
    margin: 0;
  }

  html[data-dashboard="v13"] .workspace-content {
    height: calc(100dvh - var(--topbar-height));
    padding: 8px;
  }

  html[data-dashboard="v13"] .mail-dashboard-view {
    gap: 12px;
  }

  html[data-dashboard="v13"] .mail-container {
    border-radius: 12px;
  }

  html[data-dashboard="v13"] .mail-search {
    height: 40px;
    min-height: 40px;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    padding: 0;
    border-radius: 8px;
  }

  html[data-dashboard="v13"] .mail-search input {
    height: 38px;
    min-height: 38px;
    font-size: 15px;
  }

  html[data-dashboard="v13"] .search-icon {
    padding: 0;
  }

  html[data-dashboard="v13"] .search-clear { grid-column: 3; }

  html[data-dashboard="v13"] .list-toolbar {
    margin-top: 0;
  }

  html[data-dashboard="v13"] .list-heading,
  html[data-dashboard="v13"] .message-row,
  html[data-dashboard="v13"] .message-skeleton {
    grid-template-columns: 40px 150px minmax(280px, 1fr) 86px;
  }

  html[data-dashboard="v13"] .list-heading .heading-category,
  html[data-dashboard="v13"] .message-row .category-chip,
  html[data-dashboard="v13"] .message-row .row-labels,
  html[data-dashboard="v13"] .message-skeleton .skeleton-category {
    display: none;
  }

  html[data-dashboard="v13"] .message-list {
    max-height: none;
  }
}

@media (max-width: 600px) {
  html[data-dashboard="v13"] .mail-view {
    height: auto;
    overflow-x: clip;
    overflow-y: visible;
  }

  html[data-dashboard="v13"] .topbar {
    height: 56px;
    min-height: 56px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    margin: 0;
    padding-inline: 8px;
    border-bottom: 1px solid var(--border);
  }

  html[data-dashboard="v13"] .product-bar {
    width: auto;
    height: 56px;
    border-inline-end: 0;
  }

  html[data-dashboard="v13"] .topbar-actions .refresh-action,
  html[data-dashboard="v13"] .topbar-actions .signout-action,
  html[data-dashboard="v13"] .topbar-actions .topbar-action,
  html[data-dashboard="v13"] .topbar-actions .action-label {
    display: none;
  }

  /* On a phone the mark and the word are the way home, and the caret beside
     them is the family. Both stay reachable: hiding the caret here would have
     left no way into the family menu at all once the mark meant Inbox. */
  html[data-dashboard="v13"] .brand-home {
    width: auto;
    min-height: 44px;
    gap: 6px;
    margin-inline-start: 0;
    padding-inline-end: 0;
  }

  html[data-dashboard="v13"] .nav-toggle {
    display: inline-flex;
    width: 40px;
    min-width: 40px;
    height: 40px;
    margin: 0 12px 0 auto;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
  }

  html[data-dashboard="v13"] .workspace-layout {
    display: block;
    height: calc(100dvh - 56px);
    min-height: 0;
  }

  html[data-dashboard="v13"] .workspace-nav {
    display: flex;
    position: fixed;
    z-index: 115;
    inset: 64px 0 0 auto;
    width: min(320px, 88vw);
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    border-inline-start: 1px solid var(--border);
    border-inline-end: 0;
    background: var(--surface);
    box-shadow: -18px 0 40px rgb(0 0 0 / .24);
    transform: translateX(105%);
    transition: transform 200ms var(--motion-standard);
  }

  html[data-dashboard="v13"] .workspace-nav-scroll {
    min-height: auto;
    flex: 0 0 auto;
    overflow: visible;
    padding: 18px 12px 0;
  }

  html[data-dashboard="v13"] body.nav-open .workspace-nav {
    transform: translateX(0);
  }

  html[data-dashboard="v13"] body.nav-open {
    overflow: hidden;
  }

  html[data-dashboard="v13"] .nav-scrim {
    position: fixed;
    z-index: 110;
    inset: 64px 0 0;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: var(--scrim);
  }

  html[data-dashboard="v13"] body.nav-open .nav-scrim {
    display: block;
  }

  html[data-dashboard="v13"] .workspace-nav .compose-cta {
    width: calc(100% - 8px);
    justify-content: flex-start;
    margin-inline: 4px;
    padding-inline: 18px;
  }

  html[data-dashboard="v13"] .workspace-nav .compose-cta span:last-child,
  html[data-dashboard="v13"] .workspace-nav .nav-text,
  html[data-dashboard="v13"] .workspace-nav .nav-heading,
  html[data-dashboard="v13"] .workspace-nav .nav-heading-row,
  html[data-dashboard="v13"] .workspace-nav .tab-count,
  html[data-dashboard="v13"] .workspace-nav .label-nav-list,
  html[data-dashboard="v13"] .workspace-nav .sync-status {
    display: initial;
  }

  html[data-dashboard="v13"] .workspace-nav .nav-heading-row {
    display: flex;
  }

  html[data-dashboard="v13"] .workspace-nav .label-nav-list {
    display: grid;
  }

  html[data-dashboard="v13"] .workspace-nav .nav-item,
  html[data-dashboard="v13"] .workspace-nav #refresh-button,
  html[data-dashboard="v13"] .workspace-nav .signout-action {
    width: 100%;
    justify-content: flex-start;
    padding-inline: 14px;
  }

  html[data-dashboard="v13"] .workspace-nav .signout-action {
    display: inline-flex;
  }

  html[data-dashboard="v13"] .workspace-nav .nav-label {
    gap: 12px;
  }

  html[data-dashboard="v13"] .workspace-content {
    width: 100%;
    height: calc(100dvh - 56px);
    min-height: 0;
    overflow: hidden;
    padding: 0 16px calc(86px + env(safe-area-inset-bottom));
    background: var(--page);
  }

  html[data-dashboard="v13"] .mail-dashboard-view {
    display: grid;
    height: 100%;
    min-height: 0;
  }

  html[data-dashboard="v13"] .mail-container {
    display: flex;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  /* The base sheet still carries an older two-row header; keep the search in
     the single row this shell uses. */
  html[data-dashboard="v13"] .mail-search {
    height: 40px;
    min-height: 40px;
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: 34px minmax(0, 1fr) 36px;
    gap: 0;
    margin: 0;
    padding: 0;
    border-radius: 8px;
  }

  html[data-dashboard="v13"] .topbar-actions {
    grid-column: 3;
    grid-row: 1;
    width: auto;
  }

  html[data-dashboard="v13"] .mail-search:focus-within {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
  }

  html[data-dashboard="v13"] .mail-search input {
    height: 38px;
    min-height: 38px;
    padding-inline: 4px;
    font-size: 14px;
  }

  html[data-dashboard="v13"] .search-icon {
    padding: 0;
  }

  html[data-dashboard="v13"] .search-clear {
    grid-column: 3;
  }

  html[data-dashboard="v13"] .search-clear[hidden] {
    display: none !important;
  }

  html[data-dashboard="v13"] .search-clear:not([hidden]) {
    display: inline-grid !important;
    width: 36px;
    min-width: 36px;
    min-height: 38px;
  }

  html[data-dashboard="v13"] .mobile-mailbox-bar button > span:first-child {
    display: inline-grid;
    width: var(--ui-icon-size);
    height: var(--ui-icon-size);
    place-items: center;
  }

  html[data-dashboard="v13"] .list-toolbar {
    min-height: 44px;
    gap: 8px;
    margin-top: 10px;
    padding: 0 4px;
    border: 0;
    background: transparent;
  }

  html[data-dashboard="v13"] .sort-control {
    display: none;
  }

  html[data-dashboard="v13"] .message-count {
    margin-inline-start: auto;
    font-size: 13px;
  }

  html[data-dashboard="v13"] .page-control {
    min-width: 40px;
    min-height: 40px;
  }

  html[data-dashboard="v13"] .mail-grid {
    width: 100%;
    margin-top: 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  html[data-dashboard="v13"] .list-heading {
    display: none;
  }

  html[data-dashboard="v13"] .message-list {
    display: grid;
    height: 100%;
    min-height: 0;
    max-height: none;
    gap: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 8px;
    background: transparent;
  }

  html[data-dashboard="v13"] .message-row {
    min-height: 0;
    grid-template-columns: 30px 12px minmax(0, 1fr) 30px;
    grid-template-rows: auto;
    align-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
  }

  html[data-dashboard="v13"] .message-row:last-child {
    border-bottom: 1px solid var(--border);
  }

  html[data-dashboard="v13"] .row-select {
    grid-column: 1;
    grid-row: 1;
  }

  html[data-dashboard="v13"] .message-row .from {
    grid-column: 1;
    grid-row: 1;
    padding-inline: 4px;
    font-size: 14px;
  }

  html[data-dashboard="v13"] .message-row time {
    grid-column: 2;
    grid-row: 1;
    padding-inline: 5px;
    text-align: end;
    color: var(--text-secondary);
    font-size: 11px;
    text-align: end;
  }

  html[data-dashboard="v13"] .message-row .subject {
    padding-inline: 0;
    font-size: 13px;
  }

  html[data-dashboard="v13"] .message-preview {
    padding: 0;
    font-size: 11px;
  }

  html[data-dashboard="v13"] .message-row .category-chip,
  html[data-dashboard="v13"] .message-row .row-labels {
    display: block;
    grid-column: 3;
    grid-row: 3;
    justify-self: end;
    max-width: 68px;
    margin: 0 4px;
    padding: 2px 7px;
    font-size: 10px;
    line-height: 14px;
  }

  html[data-dashboard="v13"] .message-row .row-labels {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  html[data-dashboard="v13"] .message-skeleton {
    min-height: 88px;
    grid-template-columns: 32px minmax(0, 1fr) 70px;
    grid-template-rows: 24px 25px 25px;
    padding: 7px 8px;
    border: 1px solid var(--border);
    border-radius: 9px;
  }

  html[data-dashboard="v13"] .skeleton-select {
    grid-column: 1;
    grid-row: 1 / 4;
  }

  html[data-dashboard="v13"] .skeleton-sender {
    grid-column: 2;
    grid-row: 1;
    width: 42%;
    margin-inline: 4px;
  }

  html[data-dashboard="v13"] .skeleton-copy {
    display: contents;
  }

  html[data-dashboard="v13"] .skeleton-subject {
    grid-column: 2 / 4;
    grid-row: 2;
    width: 72%;
    margin-inline: 4px;
  }

  html[data-dashboard="v13"] .skeleton-preview {
    grid-column: 2 / 4;
    grid-row: 3;
    width: 86%;
    margin-inline: 4px;
  }

  html[data-dashboard="v13"] .skeleton-category {
    display: block;
    grid-column: 3;
    grid-row: 3;
    width: 54px;
    height: 18px;
    justify-self: end;
    margin: 0 4px;
  }

  html[data-dashboard="v13"] .skeleton-date {
    grid-column: 3;
    grid-row: 1;
    width: 48px;
    justify-self: end;
    margin: 0 4px;
  }

  html[data-dashboard="v13"] .mail-grid.reader-open .reader {
    position: fixed;
    z-index: 105;
    inset: 56px 0 calc(64px + env(safe-area-inset-bottom));
    width: auto;
    height: auto;
    padding: 0;
  }

  html[data-dashboard="v13"] .reader-scroll {
    padding: 0;
  }

  html[data-dashboard="v13"] .reader-footer {
    min-height: 64px;
    padding: 10px 16px;
  }

  html[data-dashboard="v13"] .reader-footer button {
    min-width: 0;
    flex: 1 1 0;
  }

  html[data-dashboard="v13"] .mobile-mailbox-bar {
    display: grid;
    position: fixed;
    z-index: 100;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: calc(64px + env(safe-area-inset-bottom));
    grid-template-columns: repeat(5, 1fr);
    padding: 5px 5px env(safe-area-inset-bottom);
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
  }

  html[data-dashboard="v13"] .mobile-mailbox-bar button {
    display: grid;
    min-width: 0;
    min-height: 54px;
    place-items: center;
    gap: 0;
    padding: 3px;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 500;
  }

  html[data-dashboard="v13"] .mobile-mailbox-bar button > span:first-child {
    color: var(--text-primary);
    font-size: 20px;
    line-height: 22px;
  }

  html[data-dashboard="v13"] .mobile-mailbox-bar .mobile-compose {
    background: var(--accent-ui);
    color: var(--primary-foreground);
  }

  html[data-dashboard="v13"] .mobile-mailbox-bar .mobile-compose > span:first-child {
    color: var(--primary-foreground);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-dashboard="v13"] *,
  html[data-dashboard="v13"] *::before,
  html[data-dashboard="v13"] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
  }

  html[data-dashboard="v13"] .skeleton-block {
    background: var(--skeleton-base);
    animation: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Density.

   Compact is the default, and it does not drop the preview: subject and
   preview sit on one line, the way a paper list reads. The two-line row cost
   72px, which on a 720px laptop is seven messages on screen. This is thirteen,
   and the preview is still there.
   --------------------------------------------------------------------------- */
html[data-dashboard="v13"][data-density="compact"] .message-row,
html[data-dashboard="v13"][data-density="compact"] .message-skeleton {
  min-height: 44px;
}

html[data-dashboard="v13"][data-density="compact"] .row-open {
  min-height: 44px;
}

html[data-dashboard="v13"][data-density="compact"] .message-copy {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* The subject takes what it needs and no more, so the preview gets the rest of
   the line instead of a fixed share of it. */
html[data-dashboard="v13"][data-density="compact"] .message-row .subject {
  flex: 0 1 auto;
  max-width: 62%;
  line-height: 20px;
}

/* Basis zero, so the preview asks for none of the line and takes what is
   left. With basis auto it asked for its own text length and the subject was
   the one that got cut, which is exactly backwards. */
html[data-dashboard="v13"][data-density="compact"] .message-preview {
  display: block;
  min-width: 0;
  flex: 1 1 0;
  font-size: 13px;
  line-height: 20px;
  opacity: .78;
}

/* Column labels above a one-line list name what is already obvious. Gmail has
   none either, and the 30px is another two thirds of a message. */
html[data-dashboard="v13"][data-density="compact"] .list-heading {
  display: none;
}

/* Comfortable keeps the two-line row, eight pixels tighter than it was. */
html[data-dashboard="v13"][data-density="comfortable"] .message-row,
html[data-dashboard="v13"][data-density="comfortable"] .message-skeleton {
  min-height: 64px;
}

/* Getting back to the list is a first-class control, not a hint. */
html[data-dashboard="v13"] .mail-grid.reader-open .reader-back,
html[data-dashboard="v13"] .back-to-mail {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
}

html[data-dashboard="v13"] .mail-grid.reader-open .reader-back:hover,
html[data-dashboard="v13"] .back-to-mail:hover {
  border-color: var(--button-hover-border);
  background: var(--button-hover-fill);
}

html[data-dashboard="v13"] .back-to-mail {
  margin: 0;
}

html[data-dashboard="v13"] .settings-form {
  display: grid;
  max-width: 680px;
  gap: 28px;
}

html[data-dashboard="v13"] .settings-group {
  display: grid;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  gap: 8px;
}

html[data-dashboard="v13"] .settings-group legend,
html[data-dashboard="v13"] .settings-group h3 {
  margin: 0;
  padding: 0 6px;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 700;
}

html[data-dashboard="v13"] .settings-group label {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}

html[data-dashboard="v13"] .settings-group .check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
}

html[data-dashboard="v13"] .signature-preview {
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 20px;
  white-space: pre-wrap;
}

html[data-dashboard="v13"] .signature-preview.is-empty {
  color: var(--text-secondary);
  font-style: italic;
}

html[data-dashboard="v13"] .settings-plan-name {
  margin: 0;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 700;
}

html[data-dashboard="v13"] .help-group {
  max-width: 680px;
  margin: 0 0 24px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

html[data-dashboard="v13"] .help-group h3 {
  margin: 0 0 12px;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 700;
}

html[data-dashboard="v13"] .shortcut-list {
  display: grid;
  margin: 0;
  gap: 10px;
}

html[data-dashboard="v13"] .shortcut-list > div {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
}

html[data-dashboard="v13"] .shortcut-list dt {
  color: var(--text-primary);
  font-weight: 700;
}

html[data-dashboard="v13"] .shortcut-list dd {
  margin: 0;
  color: var(--text-secondary);
}

html[data-dashboard="v13"] .shortcut-list kbd {
  display: inline-block;
  min-width: 26px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 700px) {
  html[data-dashboard="v13"] .shortcut-list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* Rail tooltips.
   They earn their place two ways: in the collapsed rail they are the only label
   there is, and in the wide rail they carry the unread count, which the visible
   text does not.

   One fixed element for the whole shell, placed at hover time. Drawing the
   tooltip inside the button would be simpler, but the rail clips its own
   overflow to scroll, so anything overflowing it is invisible. */
html[data-dashboard="v13"] .tooltip {
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  max-width: 280px;
  padding: 6px 10px;
  border-radius: 7px;
  background: var(--tooltip-fill);
  color: var(--tooltip-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: scale(.96);
  transition: opacity 90ms ease, transform 90ms ease;
  box-shadow: var(--shadow-ui);
}

html[data-dashboard="v13"] .tooltip.is-visible {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  html[data-dashboard="v13"] .tooltip {
    transform: none;
  }

  html[data-dashboard="v13"] .tooltip.is-visible {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Reading a message.

   The header used to be three stacked blocks: a back button on its own line,
   then sender, subject and metadata, then a row of buttons. Each carried its
   own padding, and together they pushed the message itself below the fold on a
   laptop. Everything that is a control now shares one line with the subject,
   and the sender sits on a second, quieter line.
   --------------------------------------------------------------------------- */
html[data-dashboard="v13"] .reader-bar {
  display: flex;
  position: sticky;
  z-index: 5;
  top: 0;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

html[data-dashboard="v13"] .reader-subject {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-dashboard="v13"] .mail-grid.reader-open .reader-back {
  min-width: 36px;
  min-height: 36px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  gap: 0;
}

html[data-dashboard="v13"] .reader-bar .reader-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}

html[data-dashboard="v13"] .reader-bar .icon-action {
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  font-size: 15px;
}

html[data-dashboard="v13"] .reader-bar .primary {
  min-height: 34px;
  margin-inline-start: 6px;
  padding: 0 14px;
  font-size: 14px;
}

html[data-dashboard="v13"] .icon-action.danger-action:hover {
  border-color: var(--danger);
  color: var(--danger);
}

html[data-dashboard="v13"] .icon-action[aria-pressed="true"] {
  color: var(--accent-ui);
}

/* Sender and date on one quiet line rather than two loud ones. */
html[data-dashboard="v13"] .reader-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 10px 14px 6px;
}

html[data-dashboard="v13"] .reader-identity .sender {
  margin: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
}

html[data-dashboard="v13"] .reader-identity .supporting {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

/* ---------------------------------------------------------------------------
   Selecting messages.
   --------------------------------------------------------------------------- */
html[data-dashboard="v13"] .select-all {
  display: inline-flex;
  min-width: 34px;
  min-height: 34px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding-inline-end: 4px;
}

html[data-dashboard="v13"] .selection-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent-ui) 8%, var(--surface));
}

html[data-dashboard="v13"] .selection-count {
  margin-inline-end: 6px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

html[data-dashboard="v13"] .bulk-action {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
}

html[data-dashboard="v13"] .bulk-action:hover {
  border-color: var(--button-hover-border);
  background: var(--button-hover-fill);
}

html[data-dashboard="v13"] .bulk-action.danger-action:hover {
  border-color: var(--danger);
  color: var(--danger);
}

html[data-dashboard="v13"] .bulk-action.quiet-action {
  border-color: transparent;
  color: var(--text-secondary);
}

/* Applying a label is one control in the row rather than a trip into the
   reader: pick a label, and it lands on everything selected. */
html[data-dashboard="v13"] .bulk-label {
  min-height: 32px;
  max-width: 190px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 13px;
}

/* The checkbox is a control now, so it needs to look like one and be big
   enough to hit. The unread dot moved next to it rather than into it. */
html[data-dashboard="v13"] .row-select,
html[data-dashboard="v13"] .select-all input,
html[data-dashboard="v13"] .table-check {
  /* The base sheet gives every input a 48px minimum so a text field is easy
     to hit. A checkbox drawn at 16px inherited it invisibly, and because it
     sits in the row's own grid it was the thing setting the row's height:
     every message was 48px tall to make room for nothing, and the toolbar was
     21px taller than it asked for. Chrome ignores padding on a native
     checkbox, so the target grows by drawing the box larger instead. */
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  accent-color: var(--accent-ui);
  cursor: pointer;
}

/* Selected is a tint, not a repaint. It has to sit under the unread styling
   without swallowing it, so a selected unread row still reads as unread. */
html[data-dashboard="v13"] .message-row.is-selected {
  background: color-mix(in srgb, var(--accent-ui) 7%, var(--surface));
}

/* The unread marker is its own dot again, beside the checkbox, so selecting a
   message and it being unread are two different things you can see at once. */
html[data-dashboard="v13"] .row-unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
}

html[data-dashboard="v13"] .message-row.unread .row-unread-dot {
  background: var(--accent-ui);
}

html[data-dashboard="v13"] .row-star {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1;
}

html[data-dashboard="v13"] .row-star[aria-pressed="true"] {
  color: var(--warning);
}

/* ---------------------------------------------------------------------------
   The message row.

   It is no longer one big button. A checkbox and a star are controls in their
   own right, and a button inside a button is invalid markup that a screen
   reader cannot reach. The row is a container; the middle of it is the button
   that opens the message, and it carries the old five-column grid.
   --------------------------------------------------------------------------- */
html[data-dashboard="v13"] .message-row {
  display: grid;
  grid-template-columns: 34px 14px minmax(0, 1fr) 34px;
  align-items: center;
  padding: 0;
  gap: 0;
}

html[data-dashboard="v13"] .row-open {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: var(--row-height);
  grid-template-columns: 200px minmax(220px, 1fr) 140px 112px;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: start;
}

html[data-dashboard="v13"] .row-open:hover {
  background: transparent;
  box-shadow: none;
}

html[data-dashboard="v13"] .row-select,
html[data-dashboard="v13"] .row-unread-dot,
html[data-dashboard="v13"] .row-star {
  justify-self: center;
}

html[data-dashboard="v13"] .row-star {
  min-width: 30px;
  min-height: 30px;
  border-radius: 6px;
}

html[data-dashboard="v13"] .row-star:hover {
  background: var(--button-hover-fill);
}

/* The list header has to line up with the row, or the columns read as random. */
html[data-dashboard="v13"] .list-heading {
  grid-template-columns: 34px 14px 200px minmax(220px, 1fr) 140px 112px 34px;
}

html[data-dashboard="v13"] .page-controls {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

html[data-dashboard="v13"] .page-control {
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1;
}

html[data-dashboard="v13"] .page-control:disabled {
  border-color: var(--border);
  background: var(--disabled-background);
  color: var(--disabled-text, var(--text-secondary));
  opacity: .55;
}

/* ---------------------------------------------------------------------------
   Responsive.

   The old sheet had breakpoints for the rail and the header but left the row
   itself on fixed pixel columns, so between roughly 900px and 1200px the
   sender column and the subject column fought over the same space and the
   preview line was clipped mid-word.
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
  html[data-dashboard="v13"] .reader-bar {
    padding: 6px 8px;
  }

  html[data-dashboard="v13"] .reader-subject {
    font-size: 16px;
  }
}

/* ---------------------------------------------------------------------------
   The narrow row, restated where it can win.

   The templates for 1180px and 900px are written near the top of this sheet,
   above the rule that defines the row. A media query adds no specificity, so
   the later plain rule won and every window narrower than 1200px was laid out
   for 1200px. Measured at 661px: the row asked for 656px inside 486px, the
   date ran 31px past the edge of the window, and the star sat on top of it.

   They belong here, after the row and before the phone layout, which is the
   only breakpoint that was already in the right place.
   --------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  /* The category chip is hidden at this width, so the row is three columns. */
  html[data-dashboard="v13"] .row-open {
    grid-template-columns: 170px minmax(140px, 1fr) 106px;
  }

  html[data-dashboard="v13"] .list-heading {
    grid-template-columns: 34px 14px 170px minmax(140px, 1fr) 106px 34px;
  }
}

@media (max-width: 900px) {
  html[data-dashboard="v13"] .row-open {
    grid-template-columns: 132px minmax(100px, 1fr) 92px;
  }

  html[data-dashboard="v13"] .list-heading {
    grid-template-columns: 34px 14px 132px minmax(100px, 1fr) 92px 34px;
  }

  /* The words beside the top bar icons cost the search box more than they are
     worth. Without this the bar wrapped, and the search box fell out of it and
     drew over the first message. */
  html[data-dashboard="v13"] .topbar-actions .action-label {
    display: none;
  }
}

@media (max-width: 700px) {
  /* The action row wraps instead of scrolling sideways off the screen. */
  html[data-dashboard="v13"] .selection-bar {
    padding: 8px;
  }

  html[data-dashboard="v13"] .bulk-action {
    flex: 1 1 auto;
    min-width: 72px;
  }

  html[data-dashboard="v13"] .bulk-label {
    flex: 1 1 100%;
    max-width: none;
  }

  html[data-dashboard="v13"] .list-heading {
    display: none;
  }
}

/* Labels on one line: the chips, then the picker as the last chip. */
html[data-dashboard="v13"] .message-label-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 14px 10px;
}

html[data-dashboard="v13"] .label-chips {
  display: contents;
}

html[data-dashboard="v13"] .label-picker {
  min-height: 26px;
  max-width: 160px;
  padding: 0 8px;
  border: 1px dashed var(--control-border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
}

html[data-dashboard="v13"] .label-picker:hover {
  border-style: solid;
  border-color: var(--accent-ui);
  color: var(--text-primary);
}

/* ---------------------------------------------------------------------------
   Phone layout for the message row.

   Placed last on purpose. These rules and the base row rules have the same
   specificity, and a media query does not change that, so the one further down
   the file wins. Putting the responsive rules earlier means they lose silently.
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
  html[data-dashboard="v13"] .message-row {
    grid-template-columns: 30px 12px minmax(0, 1fr) 30px;
    grid-template-rows: auto;
    min-height: 0;
    padding: 0;
  }

  /* Sender and time share the first line; subject and preview stack under it.
     A card, not a table, because a table needs width a phone does not have. */
  html[data-dashboard="v13"] .row-open {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    min-height: 0;
    padding: 9px 4px;
    row-gap: 2px;
  }

  html[data-dashboard="v13"] .row-open .from {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding-inline: 4px;
    font-size: 14px;
  }

  html[data-dashboard="v13"] .row-open .row-meta {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    gap: 5px;
    padding-inline: 4px;
  }

  html[data-dashboard="v13"] .row-open time {
    font-size: 11px;
    text-align: end;
    white-space: nowrap;
  }

  html[data-dashboard="v13"] .row-attachment {
    width: 13px;
    height: 13px;
  }

  /* min-width:0 on both the track and the item, or a long subject refuses to
     shrink and pushes the whole row past the edge of the screen. */
  html[data-dashboard="v13"] .row-open .message-copy {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    gap: 1px;
    padding-inline: 4px;
  }

  html[data-dashboard="v13"] .row-open .subject,
  html[data-dashboard="v13"] .row-open .message-preview {
    min-width: 0;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Three lines of text need room for three lines. The row was inheriting a
     desktop height that cut the preview in half. */
  html[data-dashboard="v13"] .row-open .subject {
    line-height: 19px;
  }

  html[data-dashboard="v13"] .row-open .message-preview {
    line-height: 17px;
  }

  html[data-dashboard="v13"] .message-row {
    min-height: 74px;
  }

  html[data-dashboard="v13"] .row-open .row-labels,
  html[data-dashboard="v13"] .row-open .category-chip {
    display: none;
  }

  /* The toolbar wraps to a second line on a narrow screen, and the container
     is a flex column that will otherwise squeeze it back to one and clip it. */
  html[data-dashboard="v13"] .list-toolbar {
    flex: 0 0 auto;
    row-gap: 4px;
    min-height: 0;
  }

  html[data-dashboard="v13"] .message-count {
    margin-inline-start: 0;
    font-size: 12px;
  }

  /* Paging sits with the count rather than starting a line of its own. */
  html[data-dashboard="v13"] .page-controls {
    margin-inline-start: auto;
  }

  html[data-dashboard="v13"] .selection-bar {
    flex: 0 0 auto;
  }
}

/* ---------------------------------------------------------------------------
   Conversations.

   The earlier messages in a thread are one line each above the open one. A
   line expands in place, so reading an exchange is scrolling rather than a
   trip back to the list and in again for every reply.
   --------------------------------------------------------------------------- */
html[data-dashboard="v13"] .thread-count {
  display: inline-flex;
  min-width: 18px;
  height: 17px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}

html[data-dashboard="v13"] .message-row.unread .thread-count {
  background: color-mix(in srgb, var(--accent-ui) 16%, var(--surface));
  color: var(--accent-text);
}

html[data-dashboard="v13"] .thread-strip {
  display: grid;
  margin: 0 14px 8px;
  gap: 1px;
}

html[data-dashboard="v13"] .thread-summary {
  margin: 0 0 6px;
  color: var(--text-secondary);
  font-size: 12px;
}

html[data-dashboard="v13"] .thread-entry {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

html[data-dashboard="v13"] .thread-entry[open] {
  background: var(--surface);
}

html[data-dashboard="v13"] .thread-line {
  display: grid;
  grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 7px 10px;
  cursor: pointer;
  list-style: none;
}

html[data-dashboard="v13"] .thread-line::-webkit-details-marker {
  display: none;
}

html[data-dashboard="v13"] .thread-line:hover {
  background: var(--button-hover-fill);
}

html[data-dashboard="v13"] .thread-who {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* One line of the reply, so you can tell which one you want without opening
   each in turn. */
html[data-dashboard="v13"] .thread-gist {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-dashboard="v13"] .thread-line time {
  color: var(--text-secondary);
  font-size: 11px;
  white-space: nowrap;
}

html[data-dashboard="v13"] .thread-body {
  margin: 0;
  padding: 0 10px 10px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  line-height: 20px;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 600px) {
  html[data-dashboard="v13"] .thread-strip {
    margin: 0 8px 8px;
  }

  html[data-dashboard="v13"] .thread-line {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 2px;
  }

  html[data-dashboard="v13"] .thread-gist {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------------------
   Reading, tightened.

   The reader used to sit inside up to 64px of padding on every side. On a
   laptop that is most of a screen of nothing before the first word, and a wide
   left margin the eye has to cross on every line. Each part now carries what
   it needs and no more.
   --------------------------------------------------------------------------- */
html[data-dashboard="v13"] .reader-identity {
  padding: 8px 14px 4px;
}

html[data-dashboard="v13"] .message-body,
html[data-dashboard="v13"] .message-html {
  /* A measure, not a margin. Long lines are hard to read; a wall of padding
     is not what stops them. */
  max-width: 78ch;
  margin: 0;
  padding: 4px 14px 16px;
}

html[data-dashboard="v13"] .message-html {
  max-width: none;
  width: 100%;
  padding: 0 8px 12px;
}

html[data-dashboard="v13"] .attachments {
  margin: 0;
  padding: 6px 14px;
}

html[data-dashboard="v13"] .remote-images-notice {
  margin: 0 14px 8px;
}

html[data-dashboard="v13"] .reply-form {
  margin: 0;
  padding: 10px 14px 14px;
}

/* The conversation history now sits under the message, so it needs a rule
   above it rather than the summary line it had when it was on top. */
html[data-dashboard="v13"] .thread-strip {
  margin: 4px 14px 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

html[data-dashboard="v13"] .thread-summary {
  margin: 0 0 6px;
  font-size: 12px;
}

/* ---------------------------------------------------------------------------
   The paperclip.

   It used to be a character appended inside the subject, and the subject
   ellipsises: every subject longer than its column took the clip with it, so
   the mark was missing on exactly the long subjects that carry files. It has
   its own cell now, beside the date, at a size you can see across a room.
   --------------------------------------------------------------------------- */
html[data-dashboard="v13"] .row-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding-inline: 14px;
}

html[data-dashboard="v13"] .row-meta time {
  padding-inline: 0;
}

html[data-dashboard="v13"] .row-attachment {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--text-secondary);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-dashboard="v13"] .message-row.unread .row-attachment {
  color: var(--accent-ui);
}

@media (max-width: 600px) {
  html[data-dashboard="v13"] .reader-identity,
  html[data-dashboard="v13"] .message-body,
  html[data-dashboard="v13"] .attachments,
  html[data-dashboard="v13"] .reply-form {
    padding-inline: 10px;
  }

  html[data-dashboard="v13"] .thread-strip {
    margin-inline: 10px;
  }
}

/* ---------------------------------------------------------------------------
   Attachments.

   A card each, with a preview for the kinds that can be rendered safely and a
   download for everything else. Previews are built on first open, so a message
   with ten files does not fetch ten nobody asked to see.
   --------------------------------------------------------------------------- */
html[data-dashboard="v13"] .attachment-heading {
  margin: 0 0 6px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

/* The chips run across the reader rather than down it. Four files were 190px
   of stacked cards before the message started; the same four are two rows. */
html[data-dashboard="v13"] .attachment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 6px;
}

html[data-dashboard="v13"] .attachment-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

html[data-dashboard="v13"] .attachment-card.is-open {
  border-color: var(--accent-ui);
}

html[data-dashboard="v13"] .attachment-open {
  display: grid;
  min-width: 0;
  min-height: 46px;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 9px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  text-decoration: none;
}

html[data-dashboard="v13"] .attachment-open:hover {
  background: var(--button-hover-fill);
}

html[data-dashboard="v13"] .attachment-icon {
  font-size: 15px;
  line-height: 1;
}

html[data-dashboard="v13"] .attachment-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

html[data-dashboard="v13"] .attachment-name {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-dashboard="v13"] .attachment-size {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 15px;
  white-space: nowrap;
}

/* Download is always one press away, whether or not the file can be shown. */
html[data-dashboard="v13"] .attachment-icon-button {
  display: inline-flex;
  width: 34px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-inline-start: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

html[data-dashboard="v13"] .attachment-icon-button:hover {
  background: var(--button-hover-fill);
  color: var(--text-primary);
}

/* One preview at a time, under the chips, so opening a file does not move the
   other chips around under the reader's hand. */
html[data-dashboard="v13"] .attachment-stage {
  margin-top: 8px;
}

/* A preview is bounded. An enormous image or a long PDF must not push the
   message it belongs to off the screen. */
html[data-dashboard="v13"] .attachment-stage img {
  display: block;
  max-width: 100%;
  max-height: 460px;
  border-radius: 6px;
  object-fit: contain;
}

html[data-dashboard="v13"] .attachment-stage video,
html[data-dashboard="v13"] .attachment-stage audio {
  width: 100%;
  max-height: 460px;
  border-radius: 6px;
}

html[data-dashboard="v13"] .attachment-stage iframe {
  width: 100%;
  height: 460px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}

@media (max-width: 600px) {
  html[data-dashboard="v13"] .attachment-stage img,
  html[data-dashboard="v13"] .attachment-stage iframe {
    max-height: 300px;
    height: auto;
  }

  html[data-dashboard="v13"] .attachment-stage iframe {
    height: 300px;
  }
}

/* Blocking a sender is a verdict made while looking at their message, so the
   control sits with the sender rather than in a settings page. */
html[data-dashboard="v13"] .sender-rule {
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}

html[data-dashboard="v13"] .sender-rule:hover {
  border-color: var(--button-hover-border);
  color: var(--text-primary);
}

html[data-dashboard="v13"] .sender-rule.is-set {
  border-color: var(--accent-ui);
  background: color-mix(in srgb, var(--accent-ui) 12%, var(--surface));
  color: var(--accent-text);
}

/* ---------------------------------------------------------------------------
   The account menu.

   Who you are, which address new mail goes out as, and the way out. The
   identities offered are the ones the server will accept; this menu cannot
   grant anything it does not already allow.
   --------------------------------------------------------------------------- */
html[data-dashboard="v13"] .account-menu {
  position: relative;
}

html[data-dashboard="v13"] .account-button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
}

html[data-dashboard="v13"] .account-button:hover,
html[data-dashboard="v13"] .account-button[aria-expanded="true"] {
  border-color: var(--border);
  background: var(--surface-muted);
}

html[data-dashboard="v13"] .account-initial {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-ui);
  color: var(--primary-foreground);
  font-size: 13px;
  font-weight: 700;
}

html[data-dashboard="v13"] .account-panel {
  position: absolute;
  z-index: 90;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  max-width: calc(100vw - 24px);
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--dropdown-background);
  box-shadow: var(--shadow-ui);
}

html[data-dashboard="v13"] .account-panel-heading {
  margin: 0 0 2px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

html[data-dashboard="v13"] .account-panel-address {
  margin: 0 0 12px;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
}

html[data-dashboard="v13"] .account-identity {
  width: 100%;
  min-height: 34px;
  margin-bottom: 4px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--input-background);
  color: var(--text-primary);
  font-size: 13px;
}

html[data-dashboard="v13"] .account-panel-actions {
  display: grid;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  gap: 2px;
}

html[data-dashboard="v13"] .account-panel-link {
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  text-align: start;
  text-decoration: none;
  line-height: 32px;
}

html[data-dashboard="v13"] .account-panel-link:hover {
  background: var(--button-hover-fill);
}

/* Mottagarraden. Rutan ser ut som ett falt och ar det inte: den ar en rad
   marker plus det man skriver just nu. Kanten sitter pa rutan, sa att den
   bryts nar en enda adress i den ar trasig, vilket ar det som gor felet
   synligt innan man trycker skicka. */
/* Signaturraden i installningarna: valjaren till vanster, handlingarna till
   hoger, och de bryter till en egen rad pa en telefon i stallet for att krympa
   till oanvandbara knappar. */
html[data-dashboard="v13"] .signature-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

html[data-dashboard="v13"] .signature-picker label {
  margin: 0;
}

html[data-dashboard="v13"] .signature-picker select {
  min-width: 14ch;
  flex: 1 1 18ch;
}

html[data-dashboard="v13"] .signature-picker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

html[data-dashboard="v13"] .signature-picker-actions .is-danger {
  color: var(--danger);
}

html[data-dashboard="v13"] .compose-signature {
  display: flex;
  align-items: center;
  gap: 8px;
}

html[data-dashboard="v13"] .compose-signature label {
  margin: 0;
}

html[data-dashboard="v13"] .compose-signature select {
  flex: 0 1 22ch;
}

html[data-dashboard="v13"] .recipient-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

html[data-dashboard="v13"] .recipient-toggles {
  display: flex;
  gap: 4px;
}

html[data-dashboard="v13"] .recipient-toggle {
  min-height: 24px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

html[data-dashboard="v13"] .recipient-toggle:hover,
html[data-dashboard="v13"] .recipient-toggle.is-open {
  background: var(--button-hover-fill);
  color: var(--text-primary);
}

/* Rutan och listan hor ihop. Listan ritas ovanpa det som star under i stallet
   for att knuffa ner amnesraden medan nagon skriver. */
html[data-dashboard="v13"] .recipient-field {
  position: relative;
}

html[data-dashboard="v13"] .recipient-suggestions {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  max-height: 232px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 16px 32px color-mix(in srgb, #000 28%, transparent);
  list-style: none;
}

html[data-dashboard="v13"] .recipient-suggestion {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
}

html[data-dashboard="v13"] .recipient-suggestion.is-active,
html[data-dashboard="v13"] .recipient-suggestion:hover {
  background: var(--button-hover-fill);
}

html[data-dashboard="v13"] .recipient-suggestion-pick {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  gap: 8px;
  min-height: 34px;
  min-width: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}

html[data-dashboard="v13"] .recipient-suggestion-address {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-dashboard="v13"] .recipient-suggestion-name {
  flex: 0 1 auto;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-dashboard="v13"] .recipient-suggestion-forget {
  display: inline-flex;
  flex: 0 0 26px;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 26px;
}

html[data-dashboard="v13"] .recipient-suggestion-forget:hover {
  background: var(--border);
  color: var(--text-primary);
}

html[data-dashboard="v13"] .recipient-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input-background);
  cursor: text;
}

html[data-dashboard="v13"] .recipient-box:focus-within {
  border-color: var(--accent);
}

html[data-dashboard="v13"] .recipient-box input {
  flex: 1 1 12ch;
  min-width: 12ch;
  min-height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
}

html[data-dashboard="v13"] .recipient-box input:focus {
  outline: none;
  box-shadow: none;
}

html[data-dashboard="v13"] .recipient-chips {
  display: contents;
}

html[data-dashboard="v13"] .recipient-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 2px 2px 2px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--button-hover-fill);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 22px;
}

html[data-dashboard="v13"] .recipient-chip.is-invalid {
  border-color: var(--danger);
  background: transparent;
  color: var(--danger);
}

/* Knappen i marken ar en knapp, och den delade knappregeln i styles.css ger
   varje knapp `padding: 10px 16px` och `min-height: 44px`. Utan aterstallning
   blev marken 50 pixlar hog i ett falt som ar 40, adressen skots in mot mitten
   och krysset lade sig over grannmarken. Hojden star har och ingen annanstans. */
html[data-dashboard="v13"] .recipient-chip-text {
  max-width: 28ch;
  min-height: 22px;
  height: 22px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 500;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Samma sak har, och varre: `width: 22px` med 16 pixlar vaddering pa vardera
   sidan ger ett innehall som ar bredare an rutan, sa krysset lag utanfor sin
   egen mark. `flex: 0 0 22px` haller det kvar dar det ritas. */
html[data-dashboard="v13"] .recipient-chip-remove {
  display: inline-flex;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 15px;
  line-height: 22px;
}

html[data-dashboard="v13"] .recipient-chip-remove:hover {
  background: var(--border);
}

html[data-dashboard="v13"] .account-panel-link.is-signout {
  color: var(--danger);
}

/* Drives rad bar sitt eget tillstand, sa den maste kunna sta oppen och
   stangd utan att flytta nagot annat i menyn. Raden under den ar plandata
   och inte en knapp; den ska lasas som hjalptext. */
html[data-dashboard="v13"] .account-panel-link#account-drive-link {
  display: flex;
  align-items: center;
  gap: 8px;
}

html[data-dashboard="v13"] .account-panel-note {
  margin: 0;
  padding: 0 8px 4px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 16px;
}

html[data-dashboard="v13"] a[aria-disabled="true"] {
  cursor: default;
  opacity: 0.55;
}

html[data-dashboard="v13"] a.account-panel-link[aria-disabled="true"]:hover {
  background: transparent;
}

@media (max-width: 600px) {
  html[data-dashboard="v13"] .account-button .account {
    display: none;
  }

  html[data-dashboard="v13"] .account-panel {
    right: -8px;
    width: min(300px, calc(100vw - 16px));
  }
}

/* ---------------------------------------------------------------------------
   Ristoo.

   The button is a member of the top bar at every width. It used to float in
   the lower right on wider screens, where the notice for a sent message landed
   on top of it and it could sit over the reader's own buttons. The panel docks
   under the top bar on the right and runs to the bottom, so a conversation has
   room and nothing covers the mailbox that was not asked for. It states its
   own limits in the header, because an assistant that reads your mail should
   say so where you can see it rather than in a document you never opened.
   --------------------------------------------------------------------------- */
html[data-dashboard="v13"] .ristoo-launcher {
  display: inline-flex;
  position: static;
  flex: 0 0 auto;
  height: 36px;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  margin-inline: 4px;
  padding: 0 14px 0 4px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-ui);
  color: var(--primary-foreground);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

html[data-dashboard="v13"] .ristoo-launcher:hover,
html[data-dashboard="v13"] .ristoo-launcher[aria-expanded="true"] {
  background: var(--primary-hover);
}

html[data-dashboard="v13"] .ristoo-mark {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-foreground) 22%, transparent);
  font-size: 14px;
}

html[data-dashboard="v13"] .ristoo-panel {
  display: flex;
  position: fixed;
  z-index: 89;
  top: calc(var(--topbar-height) + 8px);
  right: 12px;
  bottom: 12px;
  width: min(400px, calc(100vw - 24px));
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-ui);
}

html[data-dashboard="v13"] .ristoo-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 8px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--border);
}

html[data-dashboard="v13"] .ristoo-header h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 700;
}

html[data-dashboard="v13"] .ristoo-scope {
  grid-column: 1;
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
}

html[data-dashboard="v13"] .ristoo-header .icon-action {
  grid-column: 2;
  grid-row: 1 / 3;
  min-width: 30px;
  min-height: 30px;
  font-size: 18px;
}

html[data-dashboard="v13"] .ristoo-log {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 8px;
  padding: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

html[data-dashboard="v13"] .ristoo-entry {
  max-width: 92%;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-muted);
}

html[data-dashboard="v13"] .ristoo-entry.is-you {
  justify-self: end;
  background: color-mix(in srgb, var(--accent-ui) 14%, var(--surface));
}

/* A notice that would have covered the conversation on a narrow screen is
   written into it instead, quieter than an answer. */
html[data-dashboard="v13"] .ristoo-entry.is-system {
  justify-self: center;
  max-width: 100%;
  border: 1px dashed var(--border);
  background: transparent;
}

html[data-dashboard="v13"] .ristoo-text {
  margin: 0;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 19px;
  white-space: pre-wrap;
  word-break: break-word;
}

html[data-dashboard="v13"] .ristoo-entry.is-system .ristoo-text {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 17px;
}

/* Where an answer came from, under the answer. An assistant that cannot say
   where it read something is one you cannot check. */
html[data-dashboard="v13"] .ristoo-note {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 11px;
}

/* Suggested replies. Each is a whole reply a person can read before choosing
   it, so it is drawn as text and not squeezed into a chip. */
html[data-dashboard="v13"] .ristoo-replies {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

html[data-dashboard="v13"] .ristoo-reply {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  line-height: 18px;
  text-align: start;
  white-space: pre-wrap;
  cursor: pointer;
}

html[data-dashboard="v13"] .ristoo-reply:hover {
  border-color: var(--accent-ui);
  background: var(--button-hover-fill);
}

html[data-dashboard="v13"] .ristoo-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 10px;
}

/* The shared button rule gives every button 44px and 10px 16px, so a chip
   says its own size. */
html[data-dashboard="v13"] .ristoo-suggestion {
  height: auto;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
}

html[data-dashboard="v13"] .ristoo-suggestion:hover:not(:disabled) {
  border-color: var(--accent-ui);
  color: var(--text-primary);
}

html[data-dashboard="v13"] .ristoo-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
}

html[data-dashboard="v13"] .ristoo-form input {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--input-background);
  color: var(--text-primary);
  font-size: 13px;
}

html[data-dashboard="v13"] .ristoo-form .primary {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

/* From 1024px the panel takes a column of its own instead of lying over the
   reader, whose star, archive and spam buttons sit on the right. The layout
   gives up the panel's 400px and both 12px gaps while it is open. */
@media (min-width: 1024px) {
  html[data-dashboard="v13"] body.ristoo-open .workspace-layout {
    padding-inline-end: 424px;
  }
}

/* The Ristoo mark joined the top bar, and up to 1280px the words beside the
   icons would then have cut the search box to "Searc". Each of those buttons
   keeps its name in aria-label and in its tooltip. */
@media (max-width: 1280px) {
  html[data-dashboard="v13"] .topbar-actions .action-label {
    display: none;
  }
}

/* Below a wide desktop the word goes and the mark stays, so the search box
   keeps its width: at 1280px the word cost it 62px. The word is still the
   button's name for a screen reader, so it is clipped rather than removed;
   display: none left the phone button with no name at all. */
@media (max-width: 1440px) {
  html[data-dashboard="v13"] .ristoo-launcher {
    width: 36px;
    min-width: 36px;
    justify-content: center;
    padding: 0;
  }

  html[data-dashboard="v13"] .ristoo-launcher-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 600px) {
  html[data-dashboard="v13"] .ristoo-launcher {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    flex: 0 0 40px;
    margin-inline: 0;
  }

  /* On a phone the conversation is the screen, under the top bar and over
     the tab bar and the reader, until it is closed. */
  html[data-dashboard="v13"] .ristoo-panel {
    z-index: 120;
    top: var(--topbar-height);
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    padding-bottom: env(safe-area-inset-bottom);
    border-width: 1px 0 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ---------------------------------------------------------------------------
   Notices.

   Lower left, the corner nothing else in the shell uses. Each closes by
   itself, waits while it is pointed at or focused, and carries its own close
   button; app.js owns the timing. They stand above the install and offline
   row while that row shows, and above the estate's floating Ristoo button on
   any page that has one, which publishes its height as --gaddr-ristoo-inset.
   Mail never draws that button: its Ristoo is in the top bar.
   --------------------------------------------------------------------------- */
html[data-dashboard="v13"] .mail-toasts {
  display: flex;
  position: fixed;
  z-index: 140;
  bottom: calc(16px + var(--gaddr-ristoo-inset, 0px));
  left: 16px;
  width: min(420px, calc(100vw - 32px));
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  pointer-events: none;
}

html[data-dashboard="v13"] .mail-toast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-ui);
  color: var(--text-primary);
  pointer-events: auto;
  animation: mail-toast-in 180ms var(--motion-standard);
}

html[data-dashboard="v13"] .mail-toast.is-success {
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
}

html[data-dashboard="v13"] .mail-toast.is-warning {
  border-color: color-mix(in srgb, var(--warning) 55%, var(--border));
  background: color-mix(in srgb, var(--warning) 7%, var(--surface));
}

html[data-dashboard="v13"] .mail-toast.is-error {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
}

html[data-dashboard="v13"] .mail-toast.is-leaving {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 160ms ease-in, transform 160ms ease-in;
}

@keyframes mail-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

html[data-dashboard="v13"] .mail-toast-text {
  margin: 0;
  padding-block: 5px;
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

html[data-dashboard="v13"] .mail-toast-close {
  display: inline-grid;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

html[data-dashboard="v13"] .mail-toast-close:hover {
  background: var(--button-hover-fill);
  color: var(--text-primary);
}

html[data-dashboard="v13"] .mail-toast-close .ui-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

/* A finger needs the full target. */
@media (pointer: coarse) {
  html[data-dashboard="v13"] .mail-toast-close {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }
}

/* The install and offline row keeps its place at the bottom. Notices and the
   docked panel stand above it while it shows instead of on it. */
html[data-dashboard="v13"] body:has(#pwa-row:not([hidden])) .mail-toasts {
  bottom: calc(80px + var(--gaddr-ristoo-inset, 0px));
}

html[data-dashboard="v13"] body:has(#pwa-row:not([hidden])) .ristoo-panel {
  bottom: 80px;
}

@media (max-width: 600px) {
  html[data-dashboard="v13"] .mail-toasts {
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom) + var(--gaddr-ristoo-inset, 0px));
    left: 12px;
    width: auto;
  }

  /* On a phone the row stood at the bottom edge, under the tab bar. */
  html[data-dashboard="v13"] .pwa-row {
    bottom: calc(76px + env(safe-area-inset-bottom));
  }

  html[data-dashboard="v13"] body:has(#pwa-row:not([hidden])) .mail-toasts {
    bottom: calc(144px + env(safe-area-inset-bottom) + var(--gaddr-ristoo-inset, 0px));
  }

  html[data-dashboard="v13"] body:has(#pwa-row:not([hidden])) .ristoo-panel {
    bottom: 0;
  }
}

/* The phone rule far above hides Refresh with a class selector, and
   `#refresh-button { display: inline-flex }` beat it by specificity, so a
   54px button sat over the menu button beside the Ristoo mark. The mailbox
   syncs by itself; the button is for wider screens. The same line is in the
   unmerged feat/svar-sprak-och-luft-20260911, so a later merge meets itself. */
@media (max-width: 600px) {
  html[data-dashboard="v13"] .topbar-actions #refresh-button {
    display: none;
  }

  /* The old shell's 8px above and below stayed on a bar whose one row is the
     full 56px, so the row ran 16px past the content box and every button sat
     8px low, the Ristoo mark on the bar's bottom line. */
  html[data-dashboard="v13"] .topbar {
    padding-block: 0;
  }
}

/* Mail carries its own Ristoo. The estate's floating one reads the
   gaddr-ristoo meta tag and stays away; this holds even if a copy is ever
   injected here before it has read the tag. */
ristoo-chatt {
  display: none !important;
}

/* Signature templates -------------------------------------------------- */

.signature-templates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: 6px 0 12px;
}

.signature-template {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: inherit;
  cursor: pointer;
}

.signature-template:hover {
  border-color: var(--accent);
}

.signature-template.is-selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.signature-template-name {
  font-weight: 600;
  font-size: 13px;
}

.signature-template-summary {
  font-size: 12px;
  color: var(--text-secondary);
}

.signature-fields {
  display: grid;
  grid-template-columns: minmax(80px, auto) 1fr;
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 12px;
}

.signature-fields label {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.signature-fields-help {
  grid-column: 1 / -1;
  margin: 0;
}

/* The preview shows the signature as a reader's mail client would, so it
   deliberately keeps a light card rather than inheriting the dark theme. */
.signature-rendered {
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  color: #18181b;
  overflow-x: auto;
}

.signature-line {
  font-size: 13px;
  color: #3f3f46;
  margin: 2px 0;
}

.signature-line-name {
  font-size: 15px;
  font-weight: 600;
  color: #18181b;
  margin: 0;
}

.signature-line-title {
  margin-top: 1px;
}

.signature-line-tagline {
  margin-top: 6px;
  font-size: 12px;
  color: #71717a;
}

.signature-rule {
  height: 1px;
  opacity: .35;
  margin: 8px 0;
}

.signature-preview-empty {
  margin: 0;
  font-size: 13px;
  color: #71717a;
}

/* Two assistants over one set of tools --------------------------------- */

.assistant-picker {
  display: flex;
  gap: 6px;
  grid-column: 1 / -1;
  margin-top: 8px;
}

.assistant-choice {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.assistant-choice.is-selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.assistant-name {
  font-size: 13px;
  font-weight: 600;
}

.assistant-role {
  font-size: 11px;
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------------------
   The top bar stays one row.

   styles.css is the shell this dashboard replaced, and below 700px it still
   drops the search box onto a second grid row and moves the actions into a
   fourth column. This bar is one row at every width and has a fixed height, so
   that second row fell outside it: measured at 661px the search box sat at
   y=74, over the first message, and the bar carried an empty phantom column.

   Placed last and outside any media query, because it has to beat both sheets
   at every width.
   --------------------------------------------------------------------------- */
@media (min-width: 601px) {
  html[data-dashboard="v13"] .mail-search {
    grid-column: auto;
    grid-row: auto;
    margin-bottom: 0;
  }

  html[data-dashboard="v13"] .topbar-actions {
    grid-column: auto;
  }
}

/* ---------------------------------------------------------------------------
   Density is a list idea, and a phone does not show a list.

   Below 600px a message is a card with the sender and time on one line and the
   subject and preview under them. Compact's 44px floor and its one-line copy
   belong to the table above that width; here they cut the preview in half.
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
  /* A card is sender and time on one line and subject and preview under them,
     which measures 81px. The list is a fixed-height grid and its rows do not
     grow past what they are told to be, so the card says what it needs: at
     72px the preview was cut through the middle of its own letters, which is
     what it did before this rule as well. */
  html[data-dashboard="v13"] .message-row,
  html[data-dashboard="v13"] .message-skeleton,
  html[data-dashboard="v13"][data-density="compact"] .message-row,
  html[data-dashboard="v13"][data-density="compact"] .message-skeleton,
  html[data-dashboard="v13"][data-density="comfortable"] .message-row,
  html[data-dashboard="v13"][data-density="comfortable"] .message-skeleton {
    min-height: 82px;
  }

  html[data-dashboard="v13"][data-density="compact"] .row-open {
    min-height: 0;
  }

  html[data-dashboard="v13"][data-density="compact"] .message-copy {
    display: grid;
    gap: 1px;
  }

  html[data-dashboard="v13"][data-density="compact"] .message-row .subject {
    max-width: none;
  }

  html[data-dashboard="v13"][data-density="compact"] .message-preview {
    flex: none;
    opacity: 1;
  }

  html[data-dashboard="v13"][data-density="compact"] .list-heading {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Sending later.

   The queue and its store were built and nothing in the interface could reach
   them: there was no way to schedule a message at all. The menu lives beside
   Send, because that is where the decision is made.
   --------------------------------------------------------------------------- */
html[data-dashboard="v13"] .send-group {
  display: inline-flex;
  position: relative;
  align-items: stretch;
}

html[data-dashboard="v13"] .send-group .primary {
  border-radius: 10px 0 0 10px;
}

html[data-dashboard="v13"] .send-more {
  min-width: 40px;
  padding: 0;
  border-radius: 0 10px 10px 0;
  border-inline-start: 1px solid var(--send-divider, rgba(255, 255, 255, .28));
  font-size: 18px;
  line-height: 1;
}

html[data-dashboard="v13"] .send-menu {
  display: grid;
  position: absolute;
  z-index: 40;
  right: 0;
  bottom: calc(100% + 8px);
  width: max-content;
  min-width: 268px;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 18px 40px var(--shadow-panel, rgba(0, 0, 0, .35));
}

html[data-dashboard="v13"] .send-menu-title {
  margin: 2px 8px 6px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

html[data-dashboard="v13"] .send-menu-item {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  text-align: start;
}

html[data-dashboard="v13"] .send-menu-item:hover,
html[data-dashboard="v13"] .send-menu-item:focus-visible {
  background: var(--button-hover-fill);
}

html[data-dashboard="v13"] .send-menu-when {
  color: var(--text-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

html[data-dashboard="v13"] .schedule-panel {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 14px 14px;
  border: 1px solid var(--accent-ui);
  border-radius: 12px;
  background: var(--surface-muted);
}

html[data-dashboard="v13"] .schedule-panel-title {
  margin: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
}

html[data-dashboard="v13"] .schedule-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

html[data-dashboard="v13"] .schedule-fields input {
  min-width: 140px;
  flex: 1 1 140px;
}

html[data-dashboard="v13"] .schedule-panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* The compose window, full screen when a message deserves it. */
html[data-dashboard="v13"] .compose-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

html[data-dashboard="v13"] #compose-expand .expand-in,
html[data-dashboard="v13"] #compose-expand[aria-pressed="true"] .expand-out {
  display: none;
}

html[data-dashboard="v13"] #compose-expand[aria-pressed="true"] .expand-in {
  display: block;
}

/* The window scrolls its middle, not its whole self. The Send button used to
   scroll away with the message on any screen shorter than the form, which on
   a laptop is every screen. */
/* The display has to be qualified on [open]. A dialog is hidden by the browser
   with `dialog:not([open]) { display: none }`, and a class selector beats that,
   so an unqualified `display: flex` here left both dialogs standing open on top
   of the sign-in page for anybody who was not signed in. */
html[data-dashboard="v13"] .compose-dialog[open] {
  display: flex;
  overflow: hidden;
  flex-direction: column;
}

html[data-dashboard="v13"] .compose-dialog form {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

html[data-dashboard="v13"] .compose-dialog .compose-header {
  flex: none;
}

html[data-dashboard="v13"] .compose-dialog textarea {
  min-height: 140px;
  flex: 1 1 auto;
  resize: vertical;
}

/* Everything between the header and the actions is one scrolling column, so
   the buttons stay where the hand expects them. */
html[data-dashboard="v13"] .compose-dialog .compose-actions {
  position: sticky;
  z-index: 5;
  bottom: 0;
  flex: none;
  margin-top: auto;
  padding-top: 10px;
  background: var(--surface);
}

html[data-dashboard="v13"] .compose-dialog.is-fullscreen {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
}

html[data-dashboard="v13"] .compose-dialog.is-fullscreen form {
  height: 100%;
}

html[data-dashboard="v13"] .compose-dialog.is-fullscreen textarea {
  min-height: 30dvh;
}

/* Messages waiting for their hour. */
html[data-dashboard="v13"] .scheduled-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

html[data-dashboard="v13"] .scheduled-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

html[data-dashboard="v13"] .scheduled-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

html[data-dashboard="v13"] .scheduled-when {
  margin: 0;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
}

html[data-dashboard="v13"] .scheduled-what,
html[data-dashboard="v13"] .scheduled-files {
  margin: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-dashboard="v13"] .scheduled-error {
  margin: 2px 0 0;
  color: var(--danger, #f87171);
  font-size: 12px;
}

@media (max-width: 600px) {
  /* Anchored to the button, not to the left of the group: the group sits at
     the right edge of the window, so left:0 put the menu half off screen.
     Measured at 375px, it ran to 559. */
  html[data-dashboard="v13"] .send-menu {
    right: 0;
    left: auto;
    min-width: 0;
    width: min(268px, calc(100vw - 56px));
  }

  html[data-dashboard="v13"] .scheduled-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   The one row the app speaks in when it is not about mail.

   Three messages share it and never appear together: the line is down, a new
   version is waiting, or this device could hold the app.
   --------------------------------------------------------------------------- */
html[data-dashboard="v13"] .pwa-row {
  display: flex;
  position: fixed;
  z-index: 90;
  right: 12px;
  bottom: 12px;
  left: 12px;
  align-items: center;
  gap: 10px;
  margin-inline: auto;
  max-width: 520px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 16px 36px var(--shadow-panel, rgba(0, 0, 0, .38));
}

html[data-dashboard="v13"] .pwa-row[data-kind="offline"] {
  border-color: var(--accent-ui);
}

html[data-dashboard="v13"] .pwa-row-text {
  flex: 1 1 auto;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 18px;
}

html[data-dashboard="v13"] .pwa-row-action {
  min-height: 32px;
  flex: none;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: var(--accent-ui);
  color: var(--primary-foreground, #fff);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

html[data-dashboard="v13"] .pwa-row-dismiss {
  min-width: 30px;
  min-height: 30px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
}

html[data-dashboard="v13"] .pwa-row-dismiss:hover {
  background: var(--button-hover-fill);
  color: var(--text-primary);
}

/* The offline page wears the app's own face. One that looks like the
   browser's error page reads as a crash. */
html[data-dashboard="v13"] .offline-page,
body.offline-page {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  margin: 0;
  padding: 24px;
  background: var(--page, #05080f);
}

body.offline-page .offline-card {
  max-width: 460px;
  text-align: start;
}

body.offline-page .offline-mark {
  width: 52px;
  height: 36px;
  margin-bottom: 14px;
}

body.offline-page h1 {
  margin: 4px 0 12px;
  font-size: 30px;
  letter-spacing: -.02em;
}

body.offline-page .supporting {
  margin: 0 0 12px;
}

body.offline-page .primary {
  margin-top: 6px;
}

/* ---------------------------------------------------------------------------
   The signature picture, and where it sits.

   Four places rather than a free canvas, because a mail client is not a
   browser: what survives Outlook is what a table can express. Dragging is the
   obvious way to say where it goes; pressing a slot is the way that works with
   a keyboard and on a phone, and both do the same thing.
   --------------------------------------------------------------------------- */
html[data-dashboard="v13"] .signature-picture {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

html[data-dashboard="v13"] .signature-placement {
  margin-top: 10px;
}

html[data-dashboard="v13"] .placement-stage {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface-muted);
}

html[data-dashboard="v13"] .placement-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

html[data-dashboard="v13"] .placement-slot {
  min-height: 30px;
  padding: 0 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
}

html[data-dashboard="v13"] .placement-slot.is-chosen {
  border-style: solid;
  border-color: var(--accent-ui);
  background: color-mix(in srgb, var(--accent-ui) 12%, transparent);
  color: var(--text-primary);
}

html[data-dashboard="v13"] .placement-slot.is-target {
  border-style: solid;
  border-color: var(--accent-ui);
  background: color-mix(in srgb, var(--accent-ui) 22%, transparent);
  color: var(--text-primary);
}

html[data-dashboard="v13"] .placement-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: var(--surface);
  cursor: grab;
  object-fit: cover;
}

html[data-dashboard="v13"] .placement-thumb:active {
  cursor: grabbing;
}

/* A destructive press that arms first. The second press is the decision, and
   looking away undoes it, which is what a browser confirm dialog is for
   without the browser's dialog. */
html[data-dashboard="v13"] .management-card .danger.is-armed {
  border-color: var(--danger-line, #f87171);
  background: var(--danger-bg, color-mix(in srgb, #f87171 16%, transparent));
  color: var(--danger, #f87171);
}

/* ---------------------------------------------------------------------------
   Marks instead of words.

   Six words in the selection toolbar, five characters in the reader, two
   guillemets for paging, and a star that was a different glyph depending on
   whether it was on. They are one set of marks now, on one grid and one stroke
   weight, and every one of them carries the name it had in its tooltip as an
   accessible label: an icon button without a name is the most common
   accessibility failure on the web, and a tooltip is not a name.
   --------------------------------------------------------------------------- */
html[data-dashboard="v13"] .bulk-action.is-icon,
html[data-dashboard="v13"] .attachment-picker.is-icon {
  display: inline-flex;
  min-width: 34px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0;
}

html[data-dashboard="v13"] .attachment-picker.is-icon {
  min-width: 38px;
  min-height: 36px;
}

html[data-dashboard="v13"] .bulk-action.is-icon .ui-icon,
html[data-dashboard="v13"] .attachment-picker.is-icon .ui-icon,
html[data-dashboard="v13"] .icon-action .ui-icon,
html[data-dashboard="v13"] .page-control .ui-icon,
html[data-dashboard="v13"] .send-more .ui-icon,
html[data-dashboard="v13"] .row-star .ui-icon,
html[data-dashboard="v13"] .attachment-icon-button .ui-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A star that is on is filled. It was a different character before, which is
   why the column moved a pixel every time one was pressed. */
html[data-dashboard="v13"] .ui-icon[data-filled] {
  fill: currentColor;
}

html[data-dashboard="v13"] .row-star[aria-pressed="true"],
html[data-dashboard="v13"] .icon-action[aria-pressed="true"] {
  color: var(--warning, #f5a524);
}

html[data-dashboard="v13"] .page-control .ui-icon {
  width: 16px;
  height: 16px;
}

html[data-dashboard="v13"] .send-more .ui-icon {
  stroke-width: 0;
}

/* A mark that deletes should read as one before it is pressed, not only when
   the pointer is on it. A word said "Delete"; a bin has to say it in colour. */
html[data-dashboard="v13"] .bulk-action.is-icon.danger-action,
html[data-dashboard="v13"] .icon-action.danger-action {
  color: var(--danger, #f87171);
}

/* A card's decisions sit on one row rather than stacking down the page. */
html[data-dashboard="v13"] .card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

/* The three crosses were the × character. A character sits on the text
   baseline and takes the font's own weight, so it never matched the marks
   beside it. These are drawn on the same grid as the rest. */
html[data-dashboard="v13"] .pwa-row-dismiss .ui-icon,
html[data-dashboard="v13"] .icon-button .ui-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-dashboard="v13"] .pwa-row-dismiss,
html[data-dashboard="v13"] .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Reply, Forward and Send keep their words. A lone arrow does not say which
   way it points, and the two of them point at each other. The mark goes in
   front of the word rather than instead of it. */
html[data-dashboard="v13"] #reply-button,
html[data-dashboard="v13"] #forward-button,
html[data-dashboard="v13"] #send-compose,
html[data-dashboard="v13"] #send-reply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

html[data-dashboard="v13"] #reply-button .ui-icon,
html[data-dashboard="v13"] #forward-button .ui-icon,
html[data-dashboard="v13"] #send-compose .ui-icon,
html[data-dashboard="v13"] #send-reply .ui-icon {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The file input lives inside its label and is clipped rather than hidden, so
   it keeps its place in the tab order. The ring has to be drawn on the label,
   because the input itself is one pixel wide. */
html[data-dashboard="v13"] .attachment-picker:focus-within {
  outline: 2px solid var(--focus-ring, #7c6cff);
  outline-offset: 2px;
}

/* The account menu keeps its words. These are three unrelated destinations
   rather than one row of related actions, and a label is what tells them
   apart. The mark goes in front of the word, never instead of it. */
html[data-dashboard="v13"] .account-panel-link {
  display: flex;
  align-items: center;
  gap: 10px;
}

html[data-dashboard="v13"] #show-remote-images {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

html[data-dashboard="v13"] .account-panel-link .ui-icon,
html[data-dashboard="v13"] #show-remote-images .ui-icon,
html[data-dashboard="v13"] .quiet.is-icon .ui-icon,
html[data-dashboard="v13"] .primary.is-icon .ui-icon {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-dashboard="v13"] .quiet.is-icon,
html[data-dashboard="v13"] .primary.is-icon {
  display: inline-flex;
  min-width: 40px;
  align-items: center;
  justify-content: center;
}

/* Signing out is the one destination in that menu you do not want to hit by
   accident, so it reads as its own thing before it is pressed. */
html[data-dashboard="v13"] .account-panel-link.is-signout .ui-icon {
  color: var(--text-secondary);
}

/* Saving to Drive says what happened on the mark itself: a mark that only
   ever looks the same gives no way of telling a save that worked from one
   that never ran. */
html[data-dashboard="v13"] .attachment-icon-button.is-done {
  color: var(--success, #34d399);
}

html[data-dashboard="v13"] .attachment-icon-button.is-failed {
  color: var(--danger, #f87171);
}

/* Removing one staged file is a mark, not a sentence: it repeats once per row
   in a list that is already short of room. */
html[data-dashboard="v13"] .upload-remove.is-icon {
  display: inline-flex;
  min-width: 30px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0;
}

html[data-dashboard="v13"] .upload-remove.is-icon .ui-icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------------------
   Room, 2026-09-11.

   The owner read the whole surface as squeezed, and measuring agreed: 14px
   between a message and the edge of the reader, a 17px subject over 15px body
   text, 44px rows under a 44px toolbar, and settings stacked label on label.
   Earlier passes tightened each part on its own until nothing had air left.

   This layer gives the room back without moving anything: the same parts in
   the same order, with gutters that grow with the window, text a reader can
   sit with, and controls a thumb can hit. It is last in the file because the
   rules it answers are spread through it, and in this sheet the later of two
   equal selectors wins. Anything that the tablet rail or the phone card
   already decides is scoped to the widths above them, so those layouts are
   untouched except where this says so.
   --------------------------------------------------------------------------- */
html[data-dashboard="v13"] {
  --gutter: clamp(16px, 2.2vw, 32px);
  --reader-gutter: clamp(18px, 3.6vw, 56px);
  --reading-measure: 72ch;
}

@media (min-width: 901px) {
  html[data-dashboard="v13"] {
    --topbar-height: 64px;
  }

  html[data-dashboard="v13"] .topbar {
    gap: 24px;
    padding-inline: var(--gutter) calc(var(--gutter) - 4px);
  }

  html[data-dashboard="v13"] .topbar-actions {
    gap: 6px;
  }

  html[data-dashboard="v13"] .mail-search {
    height: 46px;
    border-radius: 12px;
  }

  /* The rail is narrower than it was and the reading pane gets the width. */
  html[data-dashboard="v13"] .workspace-layout {
    grid-template-columns: 264px minmax(0, 1fr);
  }

  html[data-dashboard="v13"] .workspace-nav {
    width: 264px;
  }

  html[data-dashboard="v13"] .workspace-nav-scroll {
    gap: 2px;
    padding: 24px 14px;
  }

  html[data-dashboard="v13"] .compose-cta {
    width: 100%;
    min-height: 52px;
    margin: 0 0 22px;
    padding: 0 18px;
    border-radius: 12px;
  }

  html[data-dashboard="v13"] .nav-heading {
    margin: 22px 14px 8px;
  }

  html[data-dashboard="v13"] .nav-item {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 10px;
  }

  html[data-dashboard="v13"] .workspace-content {
    padding: 14px;
  }
}

/* The rail layout sized itself for a 72px top bar that never existed, which
   left a strip of nothing under the list on every tablet. */
@media (min-width: 601px) and (max-width: 900px) {
  html[data-dashboard="v13"] .workspace-layout,
  html[data-dashboard="v13"] .workspace-nav {
    height: calc(100dvh - var(--topbar-height));
    min-height: calc(100dvh - var(--topbar-height));
    max-height: calc(100dvh - var(--topbar-height));
  }

  html[data-dashboard="v13"] .topbar {
    padding-inline: 16px 12px;
  }
}

/* The list. */
html[data-dashboard="v13"] .list-toolbar {
  min-height: 60px;
  gap: 8px 16px;
  padding: 10px var(--gutter);
}

html[data-dashboard="v13"] .folder-title {
  font-size: 19px;
}

html[data-dashboard="v13"] .read-filter-option {
  min-height: 34px;
  padding: 0 14px;
}

@media (min-width: 601px) {
  html[data-dashboard="v13"][data-density="compact"] .message-row,
  html[data-dashboard="v13"][data-density="compact"] .message-skeleton,
  html[data-dashboard="v13"][data-density="compact"] .row-open {
    min-height: 54px;
  }

  html[data-dashboard="v13"][data-density="comfortable"] .message-row,
  html[data-dashboard="v13"][data-density="comfortable"] .message-skeleton {
    min-height: 78px;
  }

  html[data-dashboard="v13"][data-density="comfortable"] .message-copy {
    gap: 4px;
  }

  html[data-dashboard="v13"] .message-row .from,
  html[data-dashboard="v13"] .message-copy,
  html[data-dashboard="v13"] .row-meta {
    padding-inline: 16px;
  }

  html[data-dashboard="v13"] .message-preview {
    font-size: 13px;
    line-height: 19px;
  }
}

/* The reader. The gutter grows with the window, the text keeps a measure a
   line can be read across, and the controls are big enough to hit. */
html[data-dashboard="v13"] .reader-bar {
  gap: 10px;
  padding: 12px var(--reader-gutter);
}

html[data-dashboard="v13"] .reader-subject {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.3;
}

html[data-dashboard="v13"] .reader-bar .icon-action,
html[data-dashboard="v13"] .mail-grid.reader-open .reader-back {
  min-width: 40px;
  min-height: 40px;
}

html[data-dashboard="v13"] .reader-identity {
  gap: 4px 14px;
  padding: 20px var(--reader-gutter) 10px;
}

html[data-dashboard="v13"] .reader-identity .sender {
  font-size: 15.5px;
}

html[data-dashboard="v13"] .reader-identity .supporting {
  font-size: 13.5px;
  line-height: 1.5;
}

html[data-dashboard="v13"] .attachments {
  padding: 8px var(--reader-gutter) 4px;
}

html[data-dashboard="v13"] .message-label-controls {
  padding: 6px var(--reader-gutter) 14px;
}

html[data-dashboard="v13"] .remote-images-notice {
  margin: 0 var(--reader-gutter) 12px;
}

html[data-dashboard="v13"] .message-body {
  max-width: calc(var(--reading-measure) + 2 * var(--reader-gutter));
  padding: 12px var(--reader-gutter) 40px;
  font-size: 16px;
  line-height: 1.7;
}

html[data-dashboard="v13"] .message-html {
  padding: 4px calc(var(--reader-gutter) - 8px) 32px;
}

html[data-dashboard="v13"] .thread-strip {
  margin: 8px var(--reader-gutter) 28px;
  padding-top: 16px;
}

html[data-dashboard="v13"] .reader-footer {
  gap: 12px;
  padding: 14px var(--reader-gutter);
}

html[data-dashboard="v13"] .reader-footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-inline: 18px;
}

html[data-dashboard="v13"] .reader-footer .ui-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* On a phone the subject was never shown: the base sheet makes the action row
   the full width of the bar and every button flex: 1, which left the subject
   0px. The actions keep their own size now, and the subject gets its own line
   under them, two lines at most. */
@media (max-width: 600px) {
  html[data-dashboard="v13"] .reader-bar {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  html[data-dashboard="v13"] .reader-bar .reader-actions {
    width: auto;
    margin-inline-start: auto;
  }

  html[data-dashboard="v13"] .reader-bar .reader-actions button {
    flex: none;
  }

  html[data-dashboard="v13"] .reader-subject {
    display: -webkit-box;
    order: 3;
    flex: 1 1 100%;
    overflow: hidden;
    font-size: 18px;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

/* Three answers side by side do not fit a phone as words, so each is a mark
   over a short word, the way a phone's own mail app draws them. */
@media (max-width: 600px) {
  html[data-dashboard="v13"] .reader-footer {
    gap: 8px;
    padding: 10px 12px;
  }

  html[data-dashboard="v13"] .reader-footer button {
    min-width: 0;
    min-height: 54px;
    flex: 1 1 0;
    flex-direction: column;
    gap: 3px;
    padding: 6px 4px;
    font-size: 12.5px;
    line-height: 1.2;
  }
}

/* The top bar's two switches: light and dark, Swedish and English. */
html[data-dashboard="v13"][data-theme="dark"] #theme-toggle .theme-icon-moon,
html[data-dashboard="v13"]:not([data-theme="dark"]) #theme-toggle .theme-icon-sun {
  display: none;
}

html[data-dashboard="v13"] .language-toggle {
  min-width: 40px;
}

html[data-dashboard="v13"] .language-code {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
}

html[data-dashboard="v13"] .language-switch {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

html[data-dashboard="v13"] .language-choice {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 600;
}

html[data-dashboard="v13"] .language-choice[aria-pressed="true"] {
  border-color: var(--accent-ui);
  background: var(--surface-selected);
  color: var(--text-primary);
}

/* The compose window, which is also where replies and forwards are written. */
html[data-dashboard="v13"] .compose-dialog:not(.label-dialog) {
  width: min(780px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  border-radius: 18px;
}

html[data-dashboard="v13"] .compose-dialog form {
  gap: 12px;
  padding: 28px clamp(20px, 3vw, 36px) 0;
}

/* The actions stay pinned to the bottom of the window, and now they read as
   its foot: a rule above, the full width of the window, instead of a Send
   button floating on top of the message field as it scrolls under. */
html[data-dashboard="v13"] .compose-dialog .compose-actions {
  gap: 10px;
  margin-inline: calc(-1 * clamp(20px, 3vw, 36px));
  padding: 14px clamp(20px, 3vw, 36px) 20px;
  border-top: 1px solid var(--border);
}

@media (max-width: 600px) {
  html[data-dashboard="v13"] .compose-dialog .compose-actions {
    margin-inline: -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

html[data-dashboard="v13"] .compose-dialog input:not([type="checkbox"]):not([type="file"]):not([type="date"]):not([type="time"]),
html[data-dashboard="v13"] .compose-dialog select {
  min-height: 44px;
}

/* The form is a scrolling flex column, and anything in it with a set
   min-height shrank to that height when the window was shorter than the
   message: the To box squeezed to 40px while its address chips stood out of
   it. The column scrolls instead; nothing in it gives up its height. */
html[data-dashboard="v13"] .compose-dialog form > :not(textarea) {
  flex-shrink: 0;
}

html[data-dashboard="v13"] .compose-dialog #compose-body {
  min-height: 180px;
  font-size: 15.5px;
  line-height: 1.6;
}

html[data-dashboard="v13"] .compose-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

html[data-dashboard="v13"] .compose-tools .attachment-picker {
  margin-top: 0;
}

html[data-dashboard="v13"] .attachment-picker.has-label {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
}

html[data-dashboard="v13"] .attachment-picker.has-label .ui-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-dashboard="v13"] .compose-tools .attachment-picker.is-icon {
  min-width: 40px;
  min-height: 40px;
}

/* The message being answered or passed on, under what you write. */
html[data-dashboard="v13"] .compose-quote:not([hidden]) {
  display: grid;
  gap: 8px;
  padding: 12px 14px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-muted);
}

html[data-dashboard="v13"] .compose-quote-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
}

html[data-dashboard="v13"] .compose-quote-title {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
}

html[data-dashboard="v13"] .compose-quote .check-label {
  font-size: 14px;
  font-weight: 500;
}

html[data-dashboard="v13"] .compose-dialog .compose-quote textarea {
  min-height: 96px;
  max-height: 40vh;
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.55;
}

html[data-dashboard="v13"] .compose-quote.is-left-out textarea {
  opacity: .45;
}

@media (max-width: 600px) {
  /* On a phone the window is the whole screen. A card with a margin of 6px
     on each side was a smaller screen inside the screen. */
  html[data-dashboard="v13"] .compose-dialog:not(.label-dialog)[open] {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  html[data-dashboard="v13"] .compose-dialog form {
    padding: 16px 16px 0;
  }

  html[data-dashboard="v13"] #compose-expand {
    display: none;
  }
}

/* Settings, Help and Channels. */
html[data-dashboard="v13"] .content-panel {
  width: min(880px, 100%);
  margin-inline: auto;
  padding: clamp(18px, 3vw, 44px) var(--gutter) 64px;
}

html[data-dashboard="v13"] .settings-form {
  max-width: none;
  gap: 28px;
}

html[data-dashboard="v13"] .settings-group {
  gap: 10px;
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: 14px;
}

html[data-dashboard="v13"] .settings-group legend,
html[data-dashboard="v13"] .settings-group h3 {
  margin-bottom: 4px;
  font-size: 18px;
}

html[data-dashboard="v13"] .settings-group label:not(.check-label) {
  margin-top: 10px;
}

html[data-dashboard="v13"] .settings-group select,
html[data-dashboard="v13"] .settings-group input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]) {
  min-height: 44px;
}

html[data-dashboard="v13"] .settings-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 4px 20px;
}

html[data-dashboard="v13"] .settings-field {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 6px;
}

html[data-dashboard="v13"] .settings-group .settings-field > label {
  margin-top: 10px;
}

html[data-dashboard="v13"] .signature-destinations {
  display: grid;
  gap: 4px;
  margin: 6px 0 10px;
  padding: 14px 16px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-muted);
}

html[data-dashboard="v13"] .signature-destinations .field-help {
  margin: 0;
}

/* The plus on Compose was drawn with no stroke, so the button was a plain
   purple block, which is all the tablet rail showed of it. */
html[data-dashboard="v13"] .compose-cta .ui-icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* On a laptop the account's full address and the sync line took the room the
   search box needed: at 1280px it was cut to "Searc". The initial still opens
   the account menu, which shows the address, and the list says when it last
   synced by being current. */
@media (min-width: 901px) and (max-width: 1440px) {
  html[data-dashboard="v13"] .topbar-actions .account {
    display: none;
  }
}

@media (min-width: 901px) and (max-width: 1280px) {
  html[data-dashboard="v13"] .topbar-actions .sync-status {
    display: none;
  }
}

/* A fieldset's legend sits in its top border, so the padding above the first
   line was on top of the legend's own height, 70px of nothing. */
html[data-dashboard="v13"] fieldset.settings-group {
  padding-top: 12px;
}

/* The same two languages inside the account menu, where a phone has room. */
html[data-dashboard="v13"] .account-language {
  justify-content: flex-start;
  margin: 2px 0 6px;
}

/* On a phone the top bar holds the mark, the menu, the theme, the assistant
   and the account, and measured at 375px that is already the whole width. The
   language button pushed the row 50px past it and over the mark, so there the
   choice lives in the account menu instead. */
@media (max-width: 600px) {
  html[data-dashboard="v13"] .topbar-actions .language-toggle {
    display: none;
  }

  /* The phone rule above the fold of this file hides Refresh with a class
     selector, and `#refresh-button { display: inline-flex }` beat it by
     specificity, so a 54px button nobody asked for sat over the mark. The
     mailbox syncs by itself; the button is for wider screens. */
  html[data-dashboard="v13"] .topbar-actions #refresh-button {
    display: none;
  }
}