/**
 * Layout and components of the better pages (index-better.html and stability-better.html)
 *
 * Colors come from tokens.css, sizes are written in em so the text size option scales everything. The font sets are in
 * font-sets.css, high contrast in contrast.css and the theme panel in panel.css.
 */
html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
}

body {
  text-align: center;
  font-family: Arial, sans-serif;
  padding: 2.5rem 1.5rem 3rem;
  font-size: clamp(1em, 0.88em + 0.45vw, 1.3em);
  background:
    radial-gradient(60rem 30rem at 50% -10%, color-mix(in oklch, var(--primary) 16%, transparent), transparent 70%),
    var(--bg);
}

@media (max-width: 40em) {
  body {
    /* Room for the round button of the theme panel, which stays in the top right corner */
    padding: 4rem 0.75rem 3rem;
    font-size: 0.8em;
  }
}

html[data-i18n-pending] body {
  visibility: hidden;
}

a {
  color: var(--primary);
}

:focus-visible {
  outline: 0.125rem solid var(--primary);
  outline-offset: 0.125rem;
}

select {
  font: inherit;
  color: var(--text);
}

/* Loading message and page visibility */
#loading {
  text-align: center;
}

span.loadCircle {
  display: inline-block;
  width: 2em;
  height: 2em;
  vertical-align: middle;
  margin-right: 0.5em;
  border: 0.2em solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  box-sizing: border-box;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(359deg);
  }
}

div.visible {
  display: block;
  animation: fadeIn 0.4s;
}

div.hidden {
  display: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
}

#testWrapper {
  max-width: 64rem;
  margin-inline: auto;
}

/* The logo, the title and the tagline of the modern design, above the page: the logo on the left, the title with the
   tagline under it always in the middle of the page, and the round theme button of the panel at the right end. The
   side columns have the same width, so the text is centered on the page; on a narrow screen the text goes under the logo. */
header.brand {
  display: grid;
  grid-template-columns: minmax(9.5em, 1fr) auto minmax(9.5em, 1fr);
  align-items: center;
  gap: 0.6em 1em;
  box-sizing: border-box;
  margin: -1.7rem auto 2.4em;
  padding: 0 0.5rem;
}

/* The logo is a link to the project */
header.brand .brand-logo-link {
  grid-column: 1;
  justify-self: start;
  line-height: 0;
}

header.brand .brand-logo {
  width: 9.5em;
  height: auto;
}

/* The logo is made for a dark background, so it is turned around in the light scheme */
:root:not([data-theme="dark"]) header.brand .brand-logo {
  filter: invert(1) hue-rotate(180deg);
}

header.brand .brand-text {
  grid-column: 2;
  min-width: 0;
  text-align: center;
}

header.brand h1 {
  margin: 0 0 0.2em;
  font-size: 1.5em;
  font-weight: 400;
  letter-spacing: -0.02em;
}

header.brand .tagline {
  margin: 0;
  font-size: 0.95em;
  color: var(--muted);
}

@media (max-width: 58em) {
  header.brand {
    grid-template-columns: 1fr;
  }

  header.brand .brand-text {
    grid-column: 1;
  }
}

/* Buttons */
#startStopBtn,
#startBtn,
#resetBtn {
  display: inline-block;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  font: inherit;
  font-size: 1.05em;
  width: calc(10em / 1.05);
  height: calc(3.5em / 1.05);
  line-height: calc(3.2em / 1.05);
  color: var(--primary);
  background: none;
  border: 0.15em solid var(--primary);
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: all 0.3s;
}

#startStopBtn:hover,
#startBtn:hover,
#resetBtn:hover {
  box-shadow:
    0 0 2em rgba(0, 0, 0, 0.1),
    inset 0 0 1em rgba(0, 0, 0, 0.1);
}

#startStopBtn.running,
#startBtn.running {
  color: #ffffff;
  background: var(--danger);
  border-color: var(--danger-border);
}

#startBtn.disabled {
  color: var(--muted);
  border-color: var(--border);
  cursor: default;
  opacity: 0.8;
}

#startBtn.disabled:hover {
  box-shadow: none;
}

/* Number of connections (index) */
.conn {
  display: inline-flex;
  align-items: center;
  margin-top: 0.7em;
  font-size: 0.8em;
  color: var(--muted);
}

.conn-seg {
  display: inline-flex;
  overflow: hidden;
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-button);
}

.conn-seg button {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3em 1em;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.conn-seg button[aria-checked="true"] {
  color: var(--on-primary);
  background: var(--primary);
}

.conn-seg button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

#serverArea {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  margin-top: 1.25em;
}

/* The sponsor of the selected server, under the server list */
p.sponsor {
  min-height: 1.5em;
  margin: 0.5em 0 0;
  font-size: 0.9em;
  color: var(--muted);
  text-align: center;
}

p.sponsor a {
  color: inherit;
}

/* No blank line under the target row when there is nothing to show */
#targetArea + p.sponsor:empty {
  display: none;
}

/* Meters (index) and numbers (both pages) */
#test {
  margin: 1em 0;
}

div.testGroup {
  display: block;
  margin: 0 auto;
}

div.testArea {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  width: 16em;
  height: 12.5em;
  margin-bottom: 1.6em;
}

div.testArea2 {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  width: 10em;
  padding-bottom: 0.2em;
  text-align: center;
}

div.testArea div.testName {
  position: absolute;
  top: 0.1em;
  left: 0;
  width: 100%;
  z-index: 9;
  font-size: 1.4em;
}

div.testArea2 div.testName {
  display: flex;
  justify-content: center;
  white-space: nowrap;
  font-size: 1.4em;
}

div.testArea div.meterText {
  position: absolute;
  bottom: 1.55em;
  left: 0;
  width: 100%;
  z-index: 9;
  font-size: 2.5em;
}

div.testArea2 div.meterText {
  display: inline-block;
  font-size: 2.5em;
}

div.testArea2 div.meterText.accent {
  color: var(--primary);
}

div.meterText:empty::before {
  content: "0.00";
}

div.testArea div.unit {
  position: absolute;
  bottom: 2em;
  left: 0;
  width: 100%;
  z-index: 9;
}

div.testArea2 div.unit {
  display: inline-block;
}

div.testArea canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

div.testArea .sub {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin-top: 0.15em;
  font-size: 0.95em;
  opacity: 0.85;
}

/* IP address and ISP */
#ipArea {
  margin-top: 0.9em;
}

.ip-card {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  padding: 0.5em 1.2em;
  background: var(--surface);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-card);
}

.ip-address {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1.05em;
  font-weight: 600;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.ip-isp {
  margin-top: 0.15em;
  font-size: 0.8em;
  opacity: 0.7;
}

/* Test history */
#historySection {
  max-width: 40em;
  margin: 1em auto 0;
  text-align: left;
}

.history-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  margin-bottom: 0.75em;
}

.history-heading h3 {
  margin: 0;
  font-size: 1.1em;
  opacity: 0.85;
}

#historyToggle {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

#historyClear {
  font: inherit;
  color: var(--muted);
  background: none;
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: all 0.2s;
}

#historyClear {
  padding: 0.3em 0.8em;
  font-size: 0.75em;
}

#historyClear:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.history-caret::before {
  content: "\25BE";
  display: inline-block;
  font-size: 0.75em;
  opacity: 0.6;
}

#historySection.collapsed .history-caret::before {
  content: "\25B8";
}

#historySection.collapsed #historyList,
#historySection.collapsed .history-view,
#historySection.collapsed #historySummary {
  display: none;
}

#historyList {
  overflow: hidden;
  border: 0.0625rem solid var(--primary);
  border-radius: var(--radius-card);
}

.history-panel + .history-panel {
  border-top: 0.0625rem solid var(--border);
}

/* A panel is a bar of one part (the header), or the header and the icons (share, download, and the actions of the page) */
.history-bar {
  display: flex;
  align-items: stretch;
  background: var(--surface);
}

.history-bar > .history-header {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.history-share-btn,
.history-download-btn,
.history-action-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 3.2em;
  padding: 0 0.9em;
  font: inherit;
  color: var(--muted);
  background: var(--surface);
  border: 0;
  border-left: 0.0625rem solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
}

.history-share-btn:hover,
.history-share-btn:focus-visible,
.history-download-btn:hover,
.history-download-btn:focus-visible,
.history-action-btn:hover,
.history-action-btn:focus-visible {
  color: var(--on-primary);
  background: var(--primary);
}

.history-share-btn.done {
  color: var(--great);
}

.history-share-btn.done:hover {
  color: var(--on-primary);
}

.history-share-btn.done svg {
  display: none;
}

.history-share-btn.done::before {
  content: "\2713";
  font-size: 1.1em;
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
  box-sizing: border-box;
  width: 100%;
  padding: 0.85em 1em;
  font: inherit;
  color: inherit;
  text-align: left;
  background: var(--surface);
  border: 0;
  cursor: pointer;
  transition: background 0.2s;
}

.history-header:hover {
  background: var(--primary-subtle);
}

.history-panel.open .history-bar > .history-header {
  color: var(--primary);
}

.history-date {
  font-size: 0.85em;
  white-space: nowrap;
  opacity: 0.65;
}

.history-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 1em;
  margin-left: auto;
  margin-right: 0.75em;
  font-size: 0.95em;
}

/* A number and its unit are not broken apart: a narrow screen takes a whole metric to the next line */
.history-metric {
  white-space: nowrap;
}

.history-icon::before {
  content: "\25B8";
  display: inline-block;
  font-size: 0.75em;
  opacity: 0.6;
  transition: transform 0.25s;
}

.history-panel.open .history-icon::before {
  transform: rotate(90deg);
}

.history-body {
  padding: 0.6em 1em 1em;
  font-size: 0.9em;
  background: var(--surface);
}

.history-details {
  margin: 0;
  overflow: hidden;
  border: 0.0625rem solid var(--border);
  border-radius: calc(var(--radius-card) / 2);
}

.history-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.75em;
  padding: 0.4em 0.75em;
}

.history-row:nth-child(even) {
  background: var(--surface-muted);
}

.history-row + .history-row {
  border-top: 0.0625rem solid var(--border);
}

.history-details dt {
  margin: 0;
  color: var(--muted);
  white-space: nowrap;
}

.history-details dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.history-details dd.history-badge {
  justify-self: end;
  padding: 0.05em 0.7em;
  border: 0.0625rem solid currentColor;
  border-radius: 999px;
}

.history-action {
  padding: 0.35em 0.9em;
  font: inherit;
  font-size: 0.85em;
  color: var(--primary);
  background: none;
  border: 0.0625rem solid var(--primary);
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: all 0.2s;
}

.history-action:hover,
.history-action:focus-visible {
  color: var(--on-primary);
  background: var(--primary);
}

.history-badge::before,
#rating::before {
  content: "\25CF\00a0";
}

/* The history by period: the lists to choose it, and the table */
.history-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  margin-bottom: 0.75em;
}

/* The lists and the button between the two arrows of the pages; they come down to more lines when there is no room */
.history-controls {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}

.history-page-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.8em;
  min-width: 1.5rem;
  height: 1.8em;
  min-height: 1.5rem;
  padding: 0;
  font: inherit;
  font-size: 0.78em;
  color: var(--text);
  background: transparent;
  border: 0.1em solid var(--border);
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: all 0.3s;
}

.history-page-btn:hover {
  border-color: var(--primary);
}

/* The arrow that leads nowhere: dimmed, but it still takes the focus */
.history-page-btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

.history-page-btn[aria-disabled="true"]:hover {
  border-color: var(--border);
}

.history-page-btn[hidden] {
  display: none;
}

.history-page-btn svg {
  display: block;
}

.history-select {
  box-sizing: border-box;
  height: 1.8em;
  min-height: 1.5rem;
  padding: 0 1.8em 0 0.7em;
  font: inherit;
  font-size: 0.78em;
  color: var(--text);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23808080'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7em center;
  background-size: 0.7em 0.45em;
  border: 0.1em solid var(--border);
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: all 0.3s;
  appearance: none;
}

.history-select:hover,
.history-export:hover {
  border-color: var(--primary);
}

.history-export {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 1.8em;
  min-height: 1.5rem;
  min-width: 1.8em;
  padding: 0 0.4em;
  font: inherit;
  font-size: 0.78em;
  color: var(--text);
  background: transparent;
  border: 0.1em solid var(--border);
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: all 0.3s;
}

/* The display above would otherwise win over the attribute */
.history-export[hidden] {
  display: none;
}

.history-export svg {
  display: block;
}

.history-table-wrap {
  overflow-x: auto;
  /* Not transparent: over a photo background the rows with no stripe would show it through */
  background: var(--surface);
  border: 0.0625rem solid var(--primary);
  border-radius: var(--radius-card);
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
}

.history-table th,
.history-table td {
  padding: 0.5em 0.55em;
  text-align: right;
}

.history-table th[scope="col"] {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.history-table th[scope="col"]:first-child,
.history-table th[scope="row"] {
  text-align: left;
}

.history-table th[scope="row"] {
  white-space: nowrap;
  font-weight: 600;
}

.history-table tbody tr:nth-child(even) {
  background: var(--surface-muted);
}

.history-table td.history-badge {
  font-weight: 600;
}

/* The table of a period (not the table of the hops of a route) is never scrolled: the heads of the columns and the two ends of a period
   break into lines */
#historySummary .history-table th[scope="col"] {
  white-space: normal;
  vertical-align: bottom;
}

#historySummary .history-table th.history-period span {
  display: block;
}

/* On a narrow screen each period of the history is a card, like the results of the list: its dates, then the numbers as "name   value" */
@media (max-width: 48em) {
  #historySummary .history-table,
  #historySummary .history-table tbody,
  #historySummary .history-table tr,
  #historySummary .history-table th,
  #historySummary .history-table td {
    display: block;
  }

  /* The heads stay for the screen readers, and are not drawn: each number carries its name */
  #historySummary .history-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  #historySummary .history-table tbody tr {
    padding: 0.4em 0.75em;
    font-size: 1.1em;
  }

  #historySummary .history-table tbody tr + tr {
    border-top: 0.0625rem solid var(--border);
  }

  #historySummary .history-table th[scope="row"] {
    padding: 0.2em 0 0.3em;
    text-align: left;
  }

  #historySummary .history-table th.history-period span {
    display: inline;
  }

  #historySummary .history-table td {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75em;
    padding: 0.15em 0;
  }

  #historySummary .history-table td::before {
    content: attr(data-label);
    font-weight: 400;
    color: var(--muted);
    text-align: left;
  }
}

/* Footer: three styles, chosen in the theme panel (data-footer on <html>) */
.footer {
  margin: 2em 0 1em;
}

.footer a {
  font-size: 0.8em;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}

.footer a:hover,
.footer a:focus-visible {
  color: var(--primary);
  text-decoration: underline;
}

html[data-footer="text"] .footer a + a::before,
html:not([data-footer]) .footer a + a::before {
  content: "\00b7";
  display: inline-block;
  margin: 0 0.75em;
  color: var(--muted);
  text-decoration: none;
}

html[data-footer="chips"] .footer a {
  display: inline-block;
  margin: 0.15em 0.25em;
  padding: 0.3em 0.9em;
  color: var(--text);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-button);
}

html[data-footer="chips"] .footer a:hover {
  border-color: var(--primary);
  text-decoration: none;
}

html[data-footer="bar"] .footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3em 1.4em;
  max-width: 64rem;
  margin-inline: auto;
  padding-top: 0.9em;
  border-top: 0.0625rem solid var(--border);
}

/* Privacy policy */
#privacyPolicy {
  position: fixed;
  inset: 2em;
  z-index: 999999;
  box-sizing: border-box;
  padding: 1em;
  overflow-y: auto;
  font-size: 0.85em;
  text-align: left;
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6);
}

#privacyPolicy .privacy-close,
.share-dialog .privacy-close {
  position: sticky;
  top: 0;
  float: right;
  width: 2em;
  height: 2em;
  margin: -0.25em -0.25em 0 0.5em;
  padding: 0;
  font: inherit;
  font-size: 1.4em;
  line-height: 1;
  color: var(--text);
  background: var(--surface);
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-button);
  cursor: pointer;
}

#privacyPolicy .privacy-close:hover,
.share-dialog .privacy-close:hover {
  color: var(--primary);
  border-color: var(--primary);
}

div.closePrivacyPolicy {
  text-align: center;
}

div.closePrivacyPolicy a {
  display: inline-block;
  padding: 1em 3em;
  font-size: 0.8em;
}

/* Stability page */
/* Second row of the stability page: the target, and next to it the server once the target is a LibreSpeed server */
#targetArea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  margin: 0 auto 1em;
}

#targetArea #serverArea {
  margin-top: 0;
}

#targetArea #targetSelect {
  margin-right: 0;
}

#controls {
  margin: 0 auto 1em;
}

#durationSelect,
#targetSelect,
#server {
  box-sizing: border-box;
  height: 3.5em;
  margin-right: 0.5em;
  padding: 0 2em 0 0.75em;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23808080'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85em center;
  background-size: 0.7em 0.45em;
  border: 0.15em solid var(--border);
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: all 0.3s;
  appearance: none;
}

#durationSelect:hover,
#targetSelect:hover,
#server:hover {
  border-color: var(--primary);
}

/* The server list is wider than the duration list and keeps its place when the page is narrow */
#server {
  width: 100%;
  min-width: 14em;
  max-width: 28em;
  margin-right: 0;
  font-size: 1.05em;
  text-align: left;
}

#server:disabled {
  opacity: 0.6;
  cursor: default;
}

#resetBtn {
  width: calc(7em / 1.05);
  margin-left: 0.5em;
  color: var(--muted);
  border-color: var(--border);
}

#rating {
  position: absolute;
  top: 0.5em;
  right: 0.6em;
  z-index: 2;
  padding: 0.15em 0.75em;
  font-weight: bold;
  line-height: 1.4;
  background: var(--surface);
  border: 0.0625rem solid currentColor;
  border-radius: 999px;
}

#rating.great,
.history-badge.great {
  color: var(--great);
}

#rating.good,
.history-badge.good {
  color: var(--good);
}

#rating.poor,
.history-badge.poor {
  color: var(--poor);
}

#rating.bad,
.history-badge.bad {
  color: var(--bad);
}

#rating.none {
  display: none;
}

#chartContainer {
  position: relative;
  width: 95%;
  max-width: 60em;
  margin: 1em auto;
}

#pingChart,
#uplotHost {
  box-sizing: border-box;
  border: 0.0625rem solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

#pingChart {
  width: 100%;
  height: 22.5rem;
}

#uplotHost {
  overflow: hidden;
}

@media (max-width: 40em) {
  #pingChart {
    height: 12.5rem;
  }
}

#optionalControls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em 1em;
  box-sizing: border-box;
  width: 95%;
  max-width: 60em;
  margin: 1em auto;
}

#optionalControls label {
  display: flex;
  flex: 1 1 18em;
  align-items: center;
  gap: 0.6em;
  min-width: 0;
  margin: 0;
  text-align: left;
}

#alertThreshold {
  flex: 1 1 6em;
  min-width: 6em;
  width: auto;
  accent-color: var(--primary);
}

#thresholdValue {
  min-width: 5.5em;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Share results of the speed test: the button under the numbers and the picture of the result */
.share-dialog,
.consent-dialog {
  box-sizing: border-box;
  max-width: min(32em, 92vw);
  padding: 1em;
  color: var(--text);
  text-align: center;
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-card);
}

.share-dialog::backdrop,
.consent-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.share-dialog img#shareImage {
  display: block;
  max-width: 100%;
  margin: 0 auto 1em;
}

/* One bar on top of the picture: the pill of the copy buttons on the left and the close button on the right, in one height */
.share-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5em;
  margin-bottom: 0.75em;
}

.share-dialog .share-bar .privacy-close {
  position: static;
  float: none;
  flex: none;
  margin: 0 0 0 auto;
}

/* The two copy buttons are one pill: the link on the left, the picture on the right, with a line between them */
.share-pill {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 0.0625rem solid var(--primary);
  border-radius: var(--radius-button);
}

.share-pill button {
  display: grid;
  place-items: center;
  min-width: 2.9em;
  padding: 0 0.9em;
  font: inherit;
  font-size: 0.9em;
  color: var(--primary);
  background: none;
  border: 0;
  cursor: pointer;
  transition: all 0.2s;
}

.share-pill button + button {
  border-left: 0.0625rem solid var(--primary);
}

.share-pill button:hover,
.share-pill button:focus-visible {
  color: var(--on-primary);
  background: var(--primary);
}

.share-pill button:focus-visible {
  outline-offset: -0.25rem;
}

.share-pill button svg {
  display: block;
  width: 1.45em;
  height: 1.45em;
}

/* What is told to the screen readers after a copy, and not shown */
.share-status {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  margin: -0.0625rem;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
}

/* The privacy consent that is asked before the first test when the server has telemetry */
.consent-dialog h2 {
  margin: 0 0 0.5em;
  font-size: 1.2em;
}

.consent-dialog p {
  margin: 0 0 0.75em;
}

.consent-read {
  display: inline-block;
  margin-bottom: 1em;
  font-size: 0.9em;
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  justify-content: center;
}

.consent-actions button {
  padding: 0.6em 1.4em;
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius-button);
  transition: all 0.2s;
}

.consent-cancel {
  color: var(--muted);
  background: none;
  border: 0.0625rem solid var(--border);
}

.consent-accept {
  color: var(--on-primary);
  background: var(--primary);
  border: 0.0625rem solid var(--primary);
}

/* What the medians of the table are, told to the screen readers and not shown */
.history-table-caption {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  margin: -0.0625rem;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
}

/* Toasts: short messages at the bottom left of the page (toast.js). The region and the messages let the mouse go through, so
   they never cover a control; only the close button is clickable */
.toast-region {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: min(30rem, calc(100vw - 2rem));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  box-sizing: border-box;
  max-width: 100%;
  padding: 0.65em 0.9em;
  font-size: 0.85em;
  line-height: 1.35;
  text-align: left;
  color: var(--text);
  background: var(--surface);
  border: 0.0625rem solid var(--primary);
  border-radius: var(--radius-card);
  box-shadow: 0 0.4em 1.2em rgb(0 0 0 / 0.25);
  opacity: 0;
  transform: translateY(0.5em);
  transition:
    opacity 0.2s,
    transform 0.2s;
}

.toast.visible {
  opacity: 1;
  transform: none;
}

.toast-close {
  flex: none;
  margin: -0.15em -0.25em 0 0;
  padding: 0 0.35em;
  font: inherit;
  font-size: 1.3em;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: var(--radius-button);
  cursor: pointer;
  pointer-events: auto;
}

.toast-close:hover {
  color: var(--text);
}

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