:root {
  color-scheme: light;
  --paper: #f5f2eb;
  --surface: #fffdf8;
  --ink: #172925;
  --muted: #65716c;
  --line: #d9ded8;
  --focus: #0b6d62;
  --teal: #087d70;
  --accent-text: #087d70;
  --teal-dark: #075f57;
  --button-hover: #075f57;
  --teal-pale: #dceee9;
  --danger: #a33b32;
  --connected: #16803c;
  --disconnected: #b53c36;
  --subtle: #f9f7f1;
  --notice: #f8e9e5;
  --shadow: 0 20px 60px rgb(28 46 41 / 9%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-synthesis: none;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #141d1b;
  --surface: #1b2723;
  --ink: #e5eee8;
  --muted: #acbcb3;
  --line: #3b4d44;
  --focus: #7fd9c6;
  --teal: #158575;
  --accent-text: #8ad9c7;
  --teal-dark: #8ad9c7;
  --button-hover: #106859;
  --teal-pale: #263f35;
  --danger: #ffaaa0;
  --connected: #6bdb8d;
  --disconnected: #ff8e88;
  --subtle: #18231f;
  --notice: #432b29;
  --shadow: 0 20px 60px rgb(0 0 0 / 15%);
}

/* Script sets the theme; until it runs, or if it never does, the system
   preference stands so a reader who asked for dark is not shown light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --paper: #141d1b;
    --surface: #1b2723;
    --ink: #e5eee8;
    --muted: #acbcb3;
    --line: #3b4d44;
    --focus: #7fd9c6;
    --teal: #158575;
    --accent-text: #8ad9c7;
    --teal-dark: #8ad9c7;
    --button-hover: #106859;
    --teal-pale: #263f35;
    --danger: #ffaaa0;
    --connected: #6bdb8d;
    --disconnected: #ff8e88;
    --subtle: #18231f;
    --notice: #432b29;
    --shadow: 0 20px 60px rgb(0 0 0 / 15%);
  }
}

:root[data-theme="dark"] .message-state:not(.error) {
  color: #dec080;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 1rem;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  min-width: 300px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 5%, rgb(8 125 112 / 8%), transparent 24rem),
    var(--paper);
}

button,
input,
select {
  font: inherit;
}

button,
a,
input,
select {
  outline-offset: 3px;
}

button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

button {
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--teal);
  border-radius: 0.45rem;
  color: white;
  background: var(--teal);
  font-weight: 700;
  cursor: pointer;
}

/* Hover hints only where a pointer can hover: a touch screen never un-hovers,
   so a tapped control would stay lit. Each :hover rule below is gated. */
@media (hover: hover) {
  button:hover {
    border-color: var(--teal-dark);
    background: var(--button-hover);
  }
}

button:disabled {
  opacity: 0.52;
  cursor: wait;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.75rem;
  padding: 0 4vw;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  font-weight: 700;
  text-decoration: none;
}

.brand img {
  display: block;
  flex: none;
}

.brand span {
  color: var(--muted);
  font-size: 0.85rem;
  font-style: italic;
  font-weight: 400;
}

.connection {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.connection::before {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--disconnected);
  content: "";
}

.connection[data-state="connected"]::before {
  background: var(--connected);
}

main {
  width: min(92vw, 1320px);
  margin: 0 auto;
}

.address-panel {
  padding: 1.5rem 0;
}

.eyebrow {
  margin: 0 0 0.65rem;
  color: var(--accent-text);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.17em;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.3;
}

.address-actions {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  background: var(--surface);
}

#inbox-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) auto auto;
  gap: 0.75rem;
  align-items: end;
}

#inbox-form label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
}

#inbox-form input {
  width: 100%;
}

#inbox-form button {
  min-height: 3rem;
}

.secondary-button {
  border-color: var(--line);
  color: var(--teal-dark);
  background: transparent;
}

/* One action with a standing choice beside it: the button generates, the
   narrow half opens the menu that says which kind. */
.random-picker {
  position: relative;
  display: flex;
  min-width: 0;
}

.random-picker #random {
  flex: 1;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.random-style {
  position: relative;
  width: 2.6rem;
  margin-left: -1px;
  padding: 0;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.random-style::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.45rem;
  height: 0.45rem;
  margin: -0.35rem 0 0 -0.25rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  pointer-events: none;
  content: "";
}

.random-style[aria-expanded="true"]::after {
  margin-top: -0.1rem;
  transform: rotate(225deg);
}

.random-picker .domain-options {
  inset-inline: auto 0;
  min-width: 14rem;
}

@media (hover: hover) {
  .secondary-button:hover {
    color: white;
  }
}

input, select {
  min-width: 0;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.45rem;
  color: var(--ink);
  background: var(--surface);
}

.domain-picker {
  position: relative;
  min-width: 0;
}

#domain {
  position: relative;
  width: 100%;
  padding: 0.7rem 2.5rem 0.7rem 0.9rem;
  border-color: var(--line);
  color: var(--ink);
  background: var(--surface);
  font-weight: 400;
  text-align: left;
}

#domain-value {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#domain::after {
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 0.45rem;
  height: 0.45rem;
  margin-top: -0.35rem;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  pointer-events: none;
  content: "";
}

#domain[aria-expanded="true"]::after {
  margin-top: -0.1rem;
  transform: rotate(225deg);
}

.domain-options {
  position: absolute;
  z-index: 10;
  top: calc(100% + 0.35rem);
  inset-inline: 0;
  max-height: min(16rem, 45vh);
  margin: 0;
  padding: 0.3rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow);
  list-style: none;
  outline: none;
}

.domain-options [role="option"],
.domain-options [role="menuitemradio"] {
  min-height: 2.75rem;
  padding: 0.7rem 1.6rem 0.7rem 0.65rem;
  position: relative;
  border-radius: 0.35rem;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.domain-options .active {
  color: var(--teal-dark);
  background: var(--teal-pale);
}

@media (hover: hover) {
  .domain-options [role="option"]:hover, .domain-options [role="menuitemradio"]:hover {
    color: var(--teal-dark);
    background: var(--teal-pale);
  }
}

.domain-options [aria-selected="true"]::after,
.domain-options [aria-checked="true"]::after {
  position: absolute;
  top: 50%;
  right: 0.7rem;
  width: 0.35rem;
  height: 0.65rem;
  margin-top: -0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  content: "";
}

@media (hover: hover) {
  #inbox:hover, #domain:hover {
    border-color: var(--muted);
  }
}

.receiving-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
}

.toggle {
  display: flex;
  flex: none;
  gap: 0.5rem;
  align-items: center;
  min-height: 2.75rem;
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
}

.toggle input {
  width: 1rem;
  min-height: 1rem;
  margin: 0;
  accent-color: var(--teal);
}

.copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: var(--teal-pale);
}

.copy-row output {
  min-width: 0;
  padding: 0.75rem;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.9rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copy-row output.unavailable {
  color: var(--danger);
  font-family: inherit;
  font-weight: 500;
  overflow-wrap: anywhere;
  white-space: normal;
}

.copy-row button {
  min-height: auto;
  border: 0;
  border-left: 1px solid var(--teal);
  border-radius: 0;
  color: var(--teal-dark);
  background: transparent;
}

@media (hover: hover) {
  .copy-row button:hover {
    background: rgb(8 125 112 / 10%);
  }
}


.hint {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

#privacy {
  margin: 0.8rem 0 0;
}

#error {
  margin: 0.55rem 0 0;
  color: var(--danger);
  font-size: 0.82rem;
  font-weight: 650;
}

#error:empty {
  display: none;
}

.workspace {
  display: grid;
  /* HTML mail is a fixed-width table, 600 to 667px in the templates seen
     in practice. The reader's minimum holds one with the frame's margins
     around it, so a message never scrolls sideways beside the list; where
     the two no longer fit, the list moves above. */
  grid-template-columns: minmax(18rem, 0.38fr) minmax(48rem, 0.62fr);
  min-height: 39rem;
  margin-bottom: 2rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.message-list {
  min-width: 0;
  border-right: 1px solid var(--line);
  background: var(--subtle);
}

.list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 6.2rem;
  padding: 1.25rem 1.4rem;
  border-bottom: 1px solid var(--line);
}

.list-heading .eyebrow {
  margin-bottom: 0.25rem;
}

.list-heading h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.7rem;
  font-weight: 500;
}

#count {
  display: inline-grid;
  min-width: 1.7rem;
  height: 1.7rem;
  margin-left: 0.3rem;
  padding: 0 0.45rem;
  place-items: center;
  border-radius: 2rem;
  color: var(--teal-dark);
  background: var(--teal-pale);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  vertical-align: 0.2rem;
}

.icon-button, .more-button {
  min-height: 2.2rem;
  padding: 0.45rem 0.7rem;
  border-color: var(--line);
  color: var(--teal-dark);
  background: transparent;
  font-size: 0.78rem;
}

@media (hover: hover) {
  .icon-button:hover, .more-button:hover {
    color: white;
    background: var(--button-hover);
  }
}

#messages {
  margin: 0;
  padding: 0;
  list-style: none;
}

#messages li + li {
  border-top: 1px solid var(--line);
}

.message-item {
  display: block;
  width: 100%;
  /* Two lines and their padding: a list is for scanning, so each row
     takes what its text needs and no more. */
  min-height: 0;
  padding: 0.6rem 1.1rem;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.message-item.selected {
  border-left-color: var(--teal);
  color: var(--ink);
  background: var(--teal-pale);
}

/* A touch screen has no way to un-hover, so a tapped row would stay lit
   beside the one opened next. Only a pointer that hovers gets the hint. */
@media (hover: hover) {
  .message-item:hover {
    border-left-color: var(--teal);
    color: var(--ink);
    background: var(--teal-pale);
  }
}

.message-line {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  justify-content: space-between;
  line-height: 1.3;
}

.message-line strong {
  overflow: hidden;
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-item .message-line strong {
  font-weight: 500;
}

.message-item.unread .message-line strong {
  font-weight: 800;
}

.message-item.unread .message-line strong::before {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--accent-text);
  vertical-align: 0.1rem;
  content: "";
}

.message-item.unread .message-subject {
  color: var(--ink);
  font-weight: 650;
}

.message-line time {
  flex: none;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 500;
}

.message-subject {
  display: block;
  margin-top: 0.15rem;
  line-height: 1.3;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The all-inboxes view names each row's inboxes under the message, as
   links that open the inbox. Aligned with the button's text. */
.message-inboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  padding: 0 1.1rem 0.55rem;
  /* The same edge as the button above, so the row's highlight continues
     down through this line. */
  border-left: 3px solid transparent;
  font-size: 0.7rem;
  font-weight: 600;
}

.message-item.selected + .message-inboxes {
  border-left-color: var(--teal);
  background: var(--teal-pale);
}

@media (hover: hover) {
  .message-item:hover + .message-inboxes {
    border-left-color: var(--teal);
    background: var(--teal-pale);
  }
}

.message-inbox {
  color: var(--accent-text);
  text-decoration: none;
}

.message-inbox:hover,
.message-inbox:focus-visible {
  text-decoration: underline;
}

.message-state {
  display: inline-block;
  margin-top: 0.2rem;
  color: #806c38;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.message-state.error {
  color: var(--danger);
}

#empty {
  margin: 0;
  padding: 3rem 1.5rem;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-style: italic;
  text-align: center;
}

.more-button {
  display: block;
  margin: 1.2rem auto;
}

.more-button[hidden] {
  display: none;
}

#reader {
  min-width: 0;
  background: var(--surface);
}

#welcome {
  display: grid;
  min-height: 39rem;
  padding: 3rem;
  place-content: center;
  text-align: center;
}

.welcome-mark {
  margin-bottom: 0.9rem;
  color: var(--accent-text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
}

#welcome h2 {
  max-width: 17ch;
  margin: 0 auto 0.75rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

/* The page's one sentence about itself: what a search result quotes when
   it quotes the page, and what a reader sees before any mail. */
#welcome .lead {
  margin: 0 auto;
  color: var(--muted);
  line-height: 1.5;
}

/* Two sentences a line where they fit; on a phone the break would leave
   a word alone on a line, so the text wraps as it will. */
@media (max-width: 40rem) {
  #welcome .lead br {
    display: none;
  }
}

#detail {
  min-width: 0;
}

.message-header {
  /* Less below than above: the date line above reads as part of the
     top margin, and the last address row otherwise floats over a gap. */
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) clamp(1.1rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid var(--line);
}

.message-date {
  margin: 0 0 1.2rem;
  color: var(--accent-text);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#received-relative {
  color: var(--muted);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.message-header h2 {
  margin: 0 0 0.75rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.address-field {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: baseline;
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
}

.address-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
}

#sender, #recipients {
  min-width: 0;
  color: var(--ink);
  font-weight: 600;
}

.message-tools {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem clamp(1.5rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
  background: var(--subtle);
}

.tabs {
  display: flex;
  gap: 0.35rem;
}

.tabs button {
  min-height: 2rem;
  padding: 0.35rem 0.65rem;
  border-color: transparent;
  color: var(--muted);
  background: transparent;
  font-size: 0.78rem;
}

.tabs button.active {
  color: var(--teal-dark);
  background: var(--teal-pale);
}

@media (hover: hover) {
  .tabs button:hover {
    color: var(--teal-dark);
    background: var(--teal-pale);
  }
}

.download, .resources a {
  color: var(--teal-dark);
  font-size: 0.8rem;
  font-weight: 750;
  text-underline-offset: 0.17rem;
}

#detail-status, .notice {
  margin: 1.5rem clamp(1.5rem, 4vw, 3rem);
  color: var(--muted);
}

#detail-status:empty {
  margin-block: 0;
  font-size: 0.9rem;
}

.notice {
  padding: 1rem;
  border-left: 3px solid var(--danger);
  color: var(--danger);
  background: var(--notice);
}

#html-body, #text-body {
  width: calc(100% - clamp(3rem, 8vw, 6rem));
  min-height: 28rem;
  margin: clamp(0.75rem, 1.5vw, 1.25rem) clamp(1.5rem, 4vw, 3rem)
    clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  background: white;
}

#text-body {
  padding: 1.25rem;
  overflow: auto;
  color: var(--ink);
  background: var(--surface);
  font: 0.88rem/1.65 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
}

.resources {
  margin: 0 clamp(1.5rem, 4vw, 3rem);
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}

.resources:empty {
  display: none;
}

.resources h3 {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.resources p {
  margin: -0.35rem 0 0.8rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.resources ul {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.resources li {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  min-width: 0;
}

.resources a {
  overflow: hidden;
  text-overflow: ellipsis;
}

.resources span {
  flex: none;
  color: var(--muted);
  font-size: 0.72rem;
}

footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: center;
  padding: 0 4vw 2rem;
  color: var(--muted);
  font-size: 0.73rem;
}

footer a {
  color: var(--accent-text);
}

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

/* Below this the list and the reader's minimum no longer fit side by side.
   In em so that it moves with the reader's font size, as the rem minimums
   do: 18rem + 48rem of columns inside a main of 92vw. */
@media (max-width: 72em) {
  .workspace {
    /* A grid track's automatic minimum is its content, so a long subject in
       the list widens the column past the viewport and the page clips what
       will not fit. A zero minimum lets the text wrap instead. */
    grid-template-columns: minmax(0, 1fr);
  }

  .message-list {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  #messages {
    max-height: 22rem;
    overflow: auto;
    /* A scroll box, but Chromium still let its rows stretch the document's
       scroll extent: fifty rows added a screen of nothing below the footer.
       Paint containment keeps what the box clips out of the page's height. */
    contain: paint;
  }

  /* Below the list, a short message or the empty reader should take the
     room it needs, not a desktop's worth of it. */
  .workspace {
    min-height: 0;
  }

  #welcome {
    min-height: 14rem;
  }

  #html-body,
  #text-body {
    min-height: 10rem;
  }
}

@media (max-width: 820px) {
  #inbox-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .site-header {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
  }

  .header-tools {
    gap: 0.65rem;
  }

  .brand span {
    display: none;
  }

  main {
    width: calc(100% - 1rem);
  }

  .address-panel {
    padding: 1rem 0;
  }

  .address-actions {
    padding: 0.75rem;
  }

  #inbox-form {
    gap: 0.65rem;
  }

  #inbox-form > button {
    padding-inline: 0.5rem;
  }

  .receiving-row {
    align-items: stretch;
    flex-direction: column;
    gap: 0.25rem;
  }

  .workspace {
    margin-bottom: 2.5rem;
  }

  .message-tools {
    align-items: flex-start;
    flex-direction: column;
  }

  #html-body,
  #text-body {
    width: calc(100% - 2rem);
    margin: 1rem;
  }

  footer {
    align-items: center;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: no-preference) {
  button, a {
    transition: color 120ms ease, background-color 120ms ease,
      border-color 120ms ease;
  }
}

/* The image notice is informational, not an error, so it does not borrow the
   danger colour the .notice rule applies. */
#image-notice {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: clamp(0.75rem, 1.5vw, 1.25rem) clamp(1.5rem, 4vw, 3rem) 0;
  padding: 0.75rem 1rem;
  /* A choice the reader is being offered, not a fault: the brand colour,
     tinted, at body size, so it is seen without reading as an alarm. */
  border-left: 4px solid var(--teal);
  border-radius: 0.35rem;
  color: var(--ink);
  background: var(--teal-pale);
  font-size: 0.95rem;
}

#image-notice[hidden] {
  display: none;
}

#image-notice:not([hidden]) + #html-body {
  margin-top: 0.5rem;
}

#load-images {
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--teal);
  border-radius: 0.3rem;
  background: var(--teal);
  color: white;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

@media (hover: hover) {
  #load-images:hover {
    border-color: var(--button-hover);
    background: var(--button-hover);
  }
}

/* The heading and the figures share a row: the figures are context for the
   service, so they sit beside its title rather than interrupting the path
   from the title to the reader's own address. */
.page-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  /* The heading this row was named for is now for assistive technology
     only, and takes no space, so the row carries the gap itself. */
  margin-bottom: 0.9rem;
}

/* Received mail, in windows ending now. */
#stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.25rem;
  margin: 0;
  color: var(--muted);
  /* Body size: these figures are the page's opening line, not a footnote. */
  font-size: 0.95rem;
}

#stats[hidden] {
  display: none;
}

#stats div {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

#stats dt {
  font-weight: 500;
}

/* Without this the row is five numbers with no subject. */
.stats-lead dt {
  color: var(--ink);
  font-weight: 700;
}

.stats-lead dt::after {
  content: ":";
}

#stats dd {
  margin: 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Touch wants a larger target than a pointer does. These are comfortable to
   click with a mouse at their designed size, so they are enlarged only where
   a finger is doing the work, rather than being padded for everyone. */
@media (pointer: coarse) {
  .download,
  .resources a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  .tabs button {
    min-height: 2.75rem;
    padding-inline: 0.9rem;
  }

  .toggle input[type="checkbox"] {
    width: 1.35rem;
    height: 1.35rem;
  }
}