/* The error surface also works without Tailwind, the asset manifest or the shop service. */
.pphp-error {
  --error-bg: var(--c-base, oklch(96% .012 85));
  --error-panel: var(--c-panel, oklch(98% .007 85));
  --error-ink: var(--c-ink, oklch(24% .018 270));
  --error-muted: var(--c-muted, oklch(46% .025 270));
  --error-line: var(--c-line, oklch(82% .016 270));
  --error-accent: var(--c-lime, oklch(87% .2 123));
  --error-accent-ink: var(--c-limeink, oklch(21% .03 125));
  color: var(--error-ink); font-family: Sarabun, system-ui, sans-serif; line-height: 1.65;
}
.dark .pphp-error { --error-bg: var(--c-base, oklch(17% .012 270)); --error-panel: var(--c-panel, oklch(22% .018 270)); --error-ink: var(--c-ink, oklch(94% .009 85)); --error-muted: var(--c-muted, oklch(74% .022 270)); --error-line: var(--c-line, oklch(35% .025 270)); }
.pphp-error-page { margin: 0; display: grid; place-items: center; min-height: 100dvh; box-sizing: border-box; padding: 2rem 1rem; background: var(--error-bg); }
.pphp-error-page main { width: min(100%, 38rem); }
@media (prefers-color-scheme: dark) {
  .pphp-error-page:not(.light), .pphp-error-page:not(.light) .pphp-error { --error-bg: oklch(17% .012 270); --error-panel: oklch(22% .018 270); --error-ink: oklch(94% .009 85); --error-muted: oklch(74% .022 270); --error-line: oklch(35% .025 270); }
}
.pphp-error-wrap { width: min(100%, 38rem); margin: 3rem auto; }
.pphp-error-page .pphp-error-wrap { margin: 0; }
.pphp-error-card { background: var(--error-panel); border: 1px solid var(--error-line); border-radius: 1.25rem; padding: 2rem; }
.pphp-error-kicker { color: var(--error-muted); font-size: .875rem; margin: 0 0 .75rem; }
.pphp-error h1 { font-size: 1.75rem; line-height: 1.35; font-weight: 700; margin: 0 0 1rem; }
.pphp-error-hint { color: var(--error-muted); margin: 0; max-width: 65ch; }
.pphp-error-level { display: inline-block; font-size: .875rem; font-weight: 600; border: 1px solid var(--error-line); border-radius: .5rem; padding: .25rem .625rem; margin: 1.25rem 0 .75rem; }
.pphp-error[data-error-severity="S3"] .pphp-error-level { background: oklch(62% .18 27 / .12); }
.pphp-error[data-error-severity="S2"] .pphp-error-level { background: oklch(77% .15 75 / .12); }
.pphp-error-message, .pphp-error-fields { margin: 1rem 0 0; overflow-wrap: anywhere; }
.pphp-error-fields { padding-inline-start: 1.25rem; }
.pphp-error-meta { border-block-start: 1px solid var(--error-line); margin: 0; padding-block-start: .875rem; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .375rem 1rem; font-size: .8125rem; }
.pphp-error-meta dt { color: var(--error-muted); }.pphp-error-meta dd { margin: 0; overflow-wrap: anywhere; font-family: ui-monospace, Consolas, monospace; }
.pphp-error-actions { display: flex; flex-wrap: wrap; gap: .625rem; margin: 1.5rem 0 1rem; }
.pphp-error-action { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; padding: .625rem 1rem; border: 1px solid var(--error-line); border-radius: .75rem; font: inherit; font-size: .9375rem; font-weight: 600; color: var(--error-ink); background: var(--error-panel); text-decoration: none; cursor: pointer; }
.pphp-error-action:first-child { background: var(--error-accent); color: var(--error-accent-ink); border-color: transparent; }
.pphp-error-action:hover { filter: brightness(.96); }.pphp-error-action:active { filter: brightness(.9); }
.pphp-error :focus-visible { outline: 3px solid oklch(68% .14 235); outline-offset: 3px; }
.pphp-error-report summary { cursor: pointer; color: var(--error-muted); font-size: .875rem; padding-block: .5rem; }
.pphp-error-details { margin: .5rem 0 1rem; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8125rem; line-height: 1.7; font-family: ui-monospace, Consolas, monospace; user-select: text; }
.pphp-error-copy-status { display: block; color: var(--error-muted); font-size: .8125rem; min-height: 1.65em; margin-top: .5rem; }
.pphp-error-note { font-size: .8125rem; color: var(--error-muted); margin: 1rem 0 0; }
.pphp-component-errors { display: grid; gap: .75rem; margin-bottom: 1.5rem; }
.pphp-component-error { border: 1px solid var(--error-line); border-radius: .75rem; padding: 1rem; background: var(--error-panel); font-size: .875rem; }
.pphp-component-error p { margin: 0; }.pphp-component-error .pphp-error-meta { margin-top: .75rem; }
@media (max-width: 400px) { .pphp-error-card { padding: 1.25rem; }.pphp-error h1 { font-size: 1.5rem; }.pphp-error-wrap { margin-block: 1.5rem; }.pphp-error-meta { grid-template-columns: 1fr; gap: .125rem; }.pphp-error-meta dd { margin-bottom: .5rem; }.pphp-error-actions { flex-direction: column; }.pphp-error-action { width: 100%; } }