/*
 * Kaiso error pages (Views::Errors::Show). The painted wall states what
 * happened; a slab over its lower edge offers the next step, set like the home
 * search bar (ink edge, flat deep-wall reveal). The status plate is the one
 * lit thing. No breeze-block light here: that belongs to the home wall.
 * public/*.html repeat this design with inline styles (lib/kaiso/error_pages/static_page.rb).
 */
.error-wall { background: var(--wall); color: var(--on-wall); --focus: var(--ink); }
.error-wall-copy { max-width: var(--page-max); margin-inline: auto; padding: var(--space-8) var(--page-inline) calc(var(--space-8) + var(--space-7)); }
.error-code { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-5); font-size: var(--step-0); font-weight: 650; }
.error-code-plate { padding: 0.125rem var(--space-2); background: var(--sun); color: var(--ink); font-family: var(--font-display); font-stretch: var(--wider); font-weight: 800; font-variant-numeric: tabular-nums; }
.error-title { max-width: 15ch; margin: 0 0 var(--space-5); font-family: var(--font-display); font-stretch: var(--wider); font-size: clamp(2.25rem, 1rem + 3.4vw, 4rem); font-weight: 800; line-height: 0.98; letter-spacing: -0.035em; }
.error-lede, .error-note { max-width: 46ch; margin: 0; font-size: var(--step-1); font-weight: 500; line-height: 1.45; }
.error-note { margin-top: var(--space-4); font-size: var(--step-0); }

.error-next { position: relative; z-index: 1; max-width: var(--page-max); margin: calc(-1 * var(--space-8)) auto 0; padding-inline: var(--page-inline); }
.error-next-slab { inline-size: fit-content; max-inline-size: 100%; display: grid; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-radius: var(--radius); background: var(--field); color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink), 0 0.5rem 0 1.5px var(--wall-deep); }
.error-next-title { margin: 0; color: var(--ink-quiet); font-size: var(--step--1); font-weight: 650; }
.error-next-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); margin: 0; padding: 0; list-style: none; }
.error-next-links .text-link { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 640px) {
  .error-wall-copy { padding-block: var(--space-6) calc(var(--space-8) + var(--space-5)); }
  .error-code { margin-bottom: var(--space-4); }
  .error-title { margin-bottom: var(--space-4); }
  .error-lede { font-size: var(--step-0); line-height: 1.5; }
  .error-next { margin-top: calc(-1 * var(--space-7)); }
  .error-next-slab { inline-size: auto; padding: var(--space-4); }
  .error-next-links { flex-direction: column; align-items: stretch; gap: 0; inline-size: 100%; }
  .error-next-links .button { inline-size: 100%; margin-bottom: var(--space-2); }
}