/* Status dot. Colour lives on the dot only, never on button text, so iOS Safari cannot paint it link-blue. */
button.app-status-light {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}
button.app-status-light.is-in-header {
  position: static;
  z-index: auto;
  top: auto;
  left: auto;
  transform: none;
}
button.app-status-light {
  -webkit-tap-highlight-color: transparent;
}
button.app-status-light:not(.is-in-header) {
  position: fixed;
  z-index: 2000;
  top: env(safe-area-inset-top, 0px);
  left: max(8px, env(safe-area-inset-left));
}
button.app-status-light:focus-visible {
  outline: 2px solid #1c1917;
  outline-offset: 2px;
}
button.app-status-light .app-status-dot {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 50%;
  background-color: #6b6258;
}
button.app-status-light.is-green .app-status-dot { background-color: #127a45; }
button.app-status-light.is-yellow .app-status-dot { background-color: #a16207; }
button.app-status-light.is-red .app-status-dot { background-color: #b42318; }

body.compact-review #compact-review .cr-header {
  position: relative;
}

.app-status-sheet {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 72px) max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left));
}
.app-status-sheet[hidden] { display: none; }
.app-status-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(20 16 12 / 42%);
}
.app-status-card {
  position: relative;
  width: min(100%, 420px);
  margin: 0;
  padding: 16px 16px 18px;
  border-radius: 16px;
  background: #ffffff;
  background-color: #ffffff;
  color: #1c1917;
  -webkit-text-fill-color: #1c1917;
  box-shadow: 0 16px 40px rgb(0 0 0 / 22%);
}
.app-status-card-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.app-status-card h2 {
  margin: 0;
  color: #1c1917;
  -webkit-text-fill-color: #1c1917;
  font: 700 calc(18px * var(--text-scale, 1))/1.3 inherit;
}
.app-status-note {
  margin: 8px 0 0;
  color: #1c1917;
  -webkit-text-fill-color: #1c1917;
  font: 500 calc(14px * var(--text-scale, 1))/1.4 inherit;
}
.app-status-legend {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.app-status-legend li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #1c1917;
  -webkit-text-fill-color: #1c1917;
  font: 500 calc(14px * var(--text-scale, 1))/1.4 inherit;
}
.app-status-legend strong {
  color: #1c1917;
  -webkit-text-fill-color: #1c1917;
  font-weight: 700;
}
.app-status-swatch {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin-top: 3px;
  border-radius: 50%;
  background-color: #6b6258;
}
.app-status-swatch.is-green { background-color: #127a45; }
.app-status-swatch.is-yellow { background-color: #a16207; }
.app-status-swatch.is-red { background-color: #b42318; }
button.app-status-close,
button.app-status-action {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  min-width: 44px;
  border-radius: 10px;
  font: 700 calc(14px * var(--text-scale, 1))/1 inherit;
  cursor: pointer;
}
button.app-status-close {
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid #d6d3d1;
  background: #ffffff;
  background-color: #ffffff;
  color: #1c1917;
  -webkit-text-fill-color: #1c1917;
}
button.app-status-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 0 14px;
  border: 0;
  background: #1c1917;
  background-color: #1c1917;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}
.app-status-actions:empty { display: none; }

body.night-mode .app-status-card,
body.night-mode .app-status-card h2,
body.night-mode .app-status-note,
body.night-mode .app-status-legend li,
body.night-mode .app-status-legend strong {
  background-color: #171717;
  color: #f5f5f4;
  -webkit-text-fill-color: #f5f5f4;
}
body.night-mode .app-status-card { background: #171717; }
body.night-mode button.app-status-close {
  background: #171717;
  background-color: #171717;
  color: #f5f5f4;
  -webkit-text-fill-color: #f5f5f4;
  border-color: #44403c;
}
body.night-mode button.app-status-action {
  background: #f5f5f4;
  background-color: #f5f5f4;
  color: #1c1917;
  -webkit-text-fill-color: #1c1917;
}
body.night-mode button.app-status-light:focus-visible { outline-color: #f5f5f4; }

@media (prefers-color-scheme: dark) {
  body:not(.day-mode) .app-status-card,
  body:not(.day-mode) .app-status-card h2,
  body:not(.day-mode) .app-status-note,
  body:not(.day-mode) .app-status-legend li,
  body:not(.day-mode) .app-status-legend strong {
    background-color: #171717;
    color: #f5f5f4;
    -webkit-text-fill-color: #f5f5f4;
  }
  body:not(.day-mode) .app-status-card { background: #171717; }
  body:not(.day-mode) button.app-status-close {
    background: #171717;
    background-color: #171717;
    color: #f5f5f4;
    -webkit-text-fill-color: #f5f5f4;
    border-color: #44403c;
  }
  body:not(.day-mode) button.app-status-action {
    background: #f5f5f4;
    background-color: #f5f5f4;
    color: #1c1917;
    -webkit-text-fill-color: #1c1917;
  }
}