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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--cm-bg);
  color: var(--cm-text);
  font-family: var(--cm-font-text);
  font-size: var(--cm-fs-md);
  line-height: 1.43;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--cm-font); font-weight: 400; margin: 0; }

a { color: var(--cm-link); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }

img { max-width: 100%; }

[hidden] { display: none !important; }

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

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--cm-4); top: -48px;
  z-index: 1000;
  padding: var(--cm-2) var(--cm-4);
  background: var(--cm-primary);
  color: var(--cm-text-on-primary);
  border-radius: var(--cm-radius);
}
.skip-link:focus { top: var(--cm-2); }

/* Material Symbols helper: <span class="ms">inbox</span> */
.ms {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
  user-select: none;
  flex: none;
}
.ms.fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20; }
.ms.lg { font-size: 24px; }
.ms.sm { font-size: 18px; }

::selection { background: var(--cm-primary-soft); }

/* Thin, unobtrusive scrollbars as in Gmail. */
* { scrollbar-width: thin; scrollbar-color: var(--cm-border-strong) transparent; }