:root {
  color: #202124;
  background: #f5f6f7;
  font-family: system-ui, sans-serif;
}

body {
  margin: 0;
}

main {
  width: min(46rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.5rem 0 3rem;
}

.diagnostics, .week {
  margin: 1rem 0;
  padding: 1rem;
  border-radius: .75rem;
  background: white;
}

.diagnostics ol {
  padding-left: 1.5rem;
}

.diagnostics li {
  margin: .6rem 0;
}

.diagnostics strong {
  margin-left: .5rem;
}

.diagnostics small {
  display: block;
  color: #5f6368;
}

.ok strong { color: #137333; }
.ng strong { color: #b3261e; }

article {
  padding: .9rem 0;
  border-top: 1px solid #e2e5e9;
  overflow-wrap: anywhere;
}

.meta {
  margin: 0 0 .35rem;
  color: #5f6368;
  font-size: .85rem;
}

.body {
  margin: 0;
  white-space: pre-wrap;
}

.badge {
  display: inline-block;
  padding: .12rem .4rem;
  border-radius: .3rem;
  background: #e8f0fe;
  font-size: .75rem;
}

.summary-body {
  line-height: 1.75;
}

.summary-status {
  color: #5f6368;
  font-size: .9rem;
}

.summary-button {
  border: 0;
  border-radius: .5rem;
  padding: .7rem 1rem;
  color: white;
  background: #137333;
  font: inherit;
  cursor: pointer;
}

.summary-button:disabled {
  cursor: default;
  opacity: .55;
}