/* The error pages: a slip that says what happened in plain words, and a stub with the request's trace id,
   to read aloud to whoever helps. Prefix py-err-. */
.py-screen.py-err { align-content: center; }
.py-screen.py-err .py-err-slip {
  justify-self: center; width: min(100%, 44rem);
  display: grid; grid-template-columns: minmax(0, 1fr) 13rem;
  background: var(--py-paper); border-radius: var(--py-r-sheet);
  box-shadow: var(--py-shadow-sheet); outline: 1px solid var(--py-ruling);
}
.py-screen.py-err .py-err-body { display: grid; gap: var(--py-4); align-content: start; padding: var(--py-6) var(--py-5); }
.py-screen.py-err .py-err-body .py-title { font-size: var(--py-s-3); }
.py-screen.py-err .py-err-go { margin-top: var(--py-2); }
.py-screen.py-err .py-err-stub { /* the stub tears off along the dashed line */
  display: grid; align-content: center; gap: var(--py-2); padding: var(--py-5) var(--py-4);
  background: var(--py-canary); color: var(--py-canary-ink);
  border-inline-start: 2px dashed var(--py-rule); border-radius: 0 var(--py-r-sheet) var(--py-r-sheet) 0;
}
.py-screen.py-err .py-err-stub-label { font-size: var(--py-s--1); font-weight: 650; }
.py-screen.py-err .py-err-trace code { --py-mono: 1; font-size: var(--py-s--1); font-weight: 600; white-space: nowrap; }

@media (max-width: 40rem) {
  .py-screen.py-err .py-err-slip { grid-template-columns: minmax(0, 1fr); }
  .py-screen.py-err .py-err-stub { border-inline-start: 0; border-top: 2px dashed var(--py-rule); border-radius: 0 0 var(--py-r-sheet) var(--py-r-sheet); }
}