/* ===============================================================
   Brand styles that have to be reachable by URL

   Two things on this site are drawn by documents that never touch the
   root layout and so never get a byte of the bundled app CSS: the
   /400 /403 /500 route handlers, which return raw HTML so they can
   carry a real status code, and app/global-error.tsx, which runs when
   the root layout itself has failed. Neither can import a stylesheet;
   both can link one. So the rules they need live here, in public/,
   and the root layout links this same file for every other page —
   after theme.min.css, so the .btn overrides below land last.

   Part one is the brand mark. Part two is the error panel.
   ===============================================================

   ---------------------------------------------------------------
   1. The brand mark
   ---------------------------------------------------------------

   The wordmark ships as two PNGs cut from one master by
   scripts/gen-brand-logo.sh: near-black-maroon ink in a maroon frame
   for a white ground, warm off-white in a brass one for the night.
   Which one shows is decided by the same data-theme attribute the
   pre-paint script in the root layout sets before the first frame, so
   the mark never flashes the wrong colour on the way in.

   Both are in the DOM and one is hidden — together they are under
   12KB, and a swap that costs no JavaScript and no second paint is
   worth more than the byte or two saved by being clever. */

/* `html img.…` rather than a bare class: header.css already styles the mark
   as `.hs-brand img`, which out-specifies a lone class and would leave the
   night cut showing in daylight. */
html img.brand-mark--night {
  display: none;
}

html[data-theme='dark'] img.brand-mark--day {
  display: none;
}

html[data-theme='dark'] img.brand-mark--night {
  display: block;
}

/* ===============================================================
   2. Error surfaces — 400 / 403 / 404 / 500

   One panel serves every failure the visitor can land on, because a
   wrong address, a locked door and a server that fell over are the
   same moment for the person reading: they wanted something, and it
   isn't here. What changes between them is the sentence and the way
   out, never the furniture.

   The palette is the site's own (--mm-*): the panel is a کتیبه hung
   on the page — oxblood ground bleeding out of the top edge, the
   khatam lattice pressed faintly into the corner, the status number
   set inside the eight-pointed star the rest of the site is
   ornamented with. An error still has to read as this shop and not
   as the framework's white page with a stack trace on it.

   Every token below carries a literal fallback and the night column
   is restated further down for the reason given at the top of this
   file: on a standalone document theme.css is not loaded, and a
   --mm-* var that resolves to nothing would take the panel down with
   it.
   =============================================================== */
:root {
  --er-bg: var(--mm-bg, #fff);
  --er-surface: var(--mm-surface, #fff);
  --er-rail: var(--mm-rail, #faf6f6);
  --er-ink: var(--mm-ink, #2b2b2b);
  --er-muted: var(--mm-muted, #6b6b6b);
  --er-line: var(--mm-line, #ece7e7);
  --er-brand: var(--mm-brand, #920000);
  --er-gold: var(--mm-gold, #c8a24a);
  /* the brand in its mark role — maroon by day, brass at night */
  --er-accent: var(--mm-accent, #920000);
  --er-accent-ink: var(--mm-accent-ink, #4a0000);
  --er-tint: var(--mm-tint, rgba(146, 0, 0, 0.07));
  --er-ring: var(--mm-ring, rgba(146, 0, 0, 0.22));
  --er-shadow: var(--mm-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.05));
  --er-ease: var(--mm-ease, cubic-bezier(0.22, 1, 0.36, 1));
  --er-radius: 1rem;

  /* the khatam lattice, oxblood on white */
  --er-girih: var(
    --mm-girih,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 3 39.6 14.9 53.1 10.9 49.1 24.4 61 32 49.1 39.6 53.1 53.1 39.6 49.1 32 61 24.4 49.1 10.9 53.1 14.9 39.6 3 32 14.9 24.4 10.9 10.9 24.4 14.9z' fill='none' stroke='%236d0000' stroke-width='1.15'/%3E%3C/svg%3E")
  );
}

/* The night column, restated. Inside the app these fallbacks are never
   reached — theme.css has already repointed every --mm-* by the time this
   file is read — so the two agree by construction. On a standalone error
   document they are the only values there are. */
html[data-theme='dark'] {
  --er-bg: var(--mm-bg, #16100f);
  --er-surface: var(--mm-surface, #1f1817);
  --er-rail: var(--mm-rail, #251d1c);
  --er-ink: var(--mm-ink, #ece2e0);
  --er-muted: var(--mm-muted, #ab9f9d);
  --er-line: var(--mm-line, #3a2f2e);
  --er-gold: var(--mm-gold, #d9b463);
  --er-accent: var(--mm-accent, #e8c87a);
  --er-accent-ink: var(--mm-accent-ink, #f6e6c2);
  --er-tint: var(--mm-tint, rgba(232, 200, 122, 0.1));
  --er-ring: var(--mm-ring, rgba(232, 200, 122, 0.3));
  --er-shadow: var(--mm-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.4));

  --er-girih: var(
    --mm-girih,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 3 39.6 14.9 53.1 10.9 49.1 24.4 61 32 49.1 39.6 53.1 53.1 39.6 49.1 32 61 24.4 49.1 10.9 53.1 14.9 39.6 3 32 14.9 24.4 10.9 10.9 24.4 14.9z' fill='none' stroke='%23e8c87a' stroke-opacity='0.5' stroke-width='1.15'/%3E%3C/svg%3E")
  );
}

/* ---------------------------------------------------------------
   The page the panel sits on
   --------------------------------------------------------------- */

/* Header and footer stay; the panel takes the middle of the screen so
   a two-line apology isn't stranded against the top of the viewport. */
.er {
  display: grid;
  place-items: center;
  min-height: min(70vh, 40rem);
  padding-block: 3rem 4rem;
}

@media (min-width: 768px) {
  .er {
    padding-block: 4.5rem 5.5rem;
  }
}

.er__panel {
  position: relative;
  overflow: hidden;
  max-width: 44rem;
  margin-inline: auto;
  padding: 2.75rem 1.25rem 2.25rem;
  border: 1px solid var(--er-line);
  border-radius: var(--er-radius);
  background-color: var(--er-surface);
  background-image: radial-gradient(120% 90% at 50% -20%, var(--er-tint) 0%, transparent 62%);
  box-shadow: var(--er-shadow);
  text-align: center;
  animation: er-panel-in 0.45s var(--er-ease) both;
}

@media (min-width: 768px) {
  .er__panel {
    padding: 3.5rem 3rem 3rem;
  }
}

/* The khatam lattice pressed into the top corner of the cloth. It is
   ornament only, so it is drawn on a pseudo-element and never reaches
   the accessibility tree.

   --mm-girih is maroon by day and brass at night, which is right, but the
   two are drawn at different strengths in theme.css — the night one already
   carries a 0.5 stroke-opacity. Left at one figure the lattice is either a
   smudge on white or invisible on black, so the opacity is set per theme. */
.er__panel::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 11rem;
  height: 11rem;
  background: var(--er-girih) top left / 56px 56px repeat;
  opacity: 0.16;
  -webkit-mask-image: radial-gradient(100% 100% at 0 0, #000 0%, transparent 72%);
  mask-image: radial-gradient(100% 100% at 0 0, #000 0%, transparent 72%);
  pointer-events: none;
}

html[data-theme='dark'] .er__panel::before {
  opacity: 0.5;
}

/* On a phone the panel is barely wider than the lattice, and a corner
   ornament that reaches the middle of the card stops reading as a corner. */
@media (max-width: 575.98px) {
  .er__panel::before {
    width: 7.5rem;
    height: 7.5rem;
  }
}

/* The band across the top edge — the same oxblood every other banner
   on the site is cut from, so the panel is recognisably ours. */
.er__panel::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 4px;
  background: linear-gradient(
    to left,
    var(--er-brand) 0%,
    var(--er-gold) 50%,
    var(--er-brand) 100%
  );
}

@keyframes er-panel-in {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

/* ---------------------------------------------------------------
   Eyebrow — names the failure in two words before the numeral
   --------------------------------------------------------------- */
.er__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.25rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--er-ring);
  border-radius: 999px;
  background-color: var(--er-rail);
  color: var(--er-accent-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.6;
}

.er__eyebrow svg {
  flex: none;
  color: var(--er-accent);
}

/* ---------------------------------------------------------------
   The mark — status number inside the eight-pointed star
   --------------------------------------------------------------- */
.er__mark {
  position: relative;
  width: 9.5rem;
  height: 9.5rem;
  margin: 0 auto 1.5rem;
  display: grid;
  place-items: center;
}

@media (min-width: 768px) {
  .er__mark {
    width: 11rem;
    height: 11rem;
  }
}

/* The star is the frame, not the subject: thin, quiet, and it turns
   slowly out of nothing so the number lands last. */
.er__star {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--er-accent);
  opacity: 0.28;
  animation: er-star-in 0.6s var(--er-ease) 0.05s both;
}

@keyframes er-star-in {
  from {
    opacity: 0;
    transform: rotate(-12deg) scale(0.86);
  }
  to {
    opacity: 0.28;
    transform: none;
  }
}

.er__code {
  position: relative;
  font-size: clamp(2.75rem, 12vw, 3.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--er-accent-ink);
  font-variant-numeric: tabular-nums;
  animation: er-code-in 0.5s var(--er-ease) 0.12s both;
}

@keyframes er-code-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
}

/* ---------------------------------------------------------------
   Copy
   --------------------------------------------------------------- */

/* theme.min.css justifies every h1–h6; this one is centred copy. */
.er__title {
  max-width: 26ch;
  margin-inline: auto;
  margin-bottom: 0.75rem;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.9;
  color: var(--er-ink);
  text-wrap: balance;
}

@media (min-width: 768px) {
  .er__title {
    font-size: 1.55rem;
  }
}

.er__copy {
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: 1.75rem;
  color: var(--er-muted);
  font-size: 0.95rem;
  line-height: 2;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------
   Ways out
   --------------------------------------------------------------- */
.er__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
}

/* The vendor theme paints .btn-accent and .btn-outline-accent its own
   indigo. globals.css already re-points both at the brand for the app, but
   the standalone documents never load globals.css — and inside the panel the
   override has to out-specify the vendor sheet either way. So both buttons
   are restated here, which is the one place both halves read. */
.er__panel .btn.btn-accent {
  background-color: var(--er-brand);
  border-color: var(--er-brand);
  color: #fff;
}

.er__panel .btn.btn-accent:hover,
.er__panel .btn.btn-accent:focus-visible {
  background-color: var(--mm-brand-deep, #6d0000);
  border-color: var(--mm-brand-deep, #6d0000);
  color: #fff;
}

.er__panel .btn.btn-outline-accent {
  color: var(--er-accent);
  border-color: var(--er-accent);
  background-color: transparent;
}

.er__panel .btn.btn-outline-accent:hover,
.er__panel .btn.btn-outline-accent:focus-visible {
  background-color: var(--er-brand);
  border-color: var(--er-brand);
  color: #fff;
}

/* The vendor zeroes focus rings; keyboard users need one back. */
.er__panel .btn:focus-visible,
.er__chip:focus-visible {
  outline: 2px solid var(--er-accent);
  outline-offset: 2px;
  box-shadow: none;
}

.er__panel .btn {
  min-width: 10rem;
}

@media (max-width: 575.98px) {
  .er__panel .btn {
    width: 100%;
    min-width: 0;
  }
}

/* ---------------------------------------------------------------
   The reference the visitor reads out to support
   --------------------------------------------------------------- */

/* Only ever an opaque digest — never the exception text, which can
   carry file paths and SQL the visitor should not see. */
.er__ref {
  margin-top: 1.5rem;
  padding: 0.6rem 0.9rem;
  border: 1px dashed var(--er-line);
  border-radius: 0.6rem;
  background-color: var(--er-rail);
  color: var(--er-muted);
  font-size: 0.78rem;
  line-height: 1.9;
}

.er__ref code {
  direction: ltr;
  unicode-bidi: isolate;
  padding: 0 0.25rem;
  color: var(--er-accent-ink);
  font-size: 0.78rem;
  background: none;
  user-select: all;
}

/* ---------------------------------------------------------------
   Somewhere else to go — the page failed, the shop didn't
   --------------------------------------------------------------- */
.er__links {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--er-line);
}

.er__links-title {
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--er-muted);
}

.er__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.er__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--er-line);
  border-radius: 999px;
  background-color: var(--er-surface);
  color: var(--er-ink);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: border-color 0.18s var(--er-ease), background-color 0.18s var(--er-ease),
    color 0.18s var(--er-ease), transform 0.18s var(--er-ease);
}

.er__chip:hover,
.er__chip:focus-visible {
  border-color: var(--er-accent);
  background-color: var(--er-tint);
  color: var(--er-accent-ink);
  transform: translateY(-1px);
}

.er__chip svg {
  flex: none;
  color: var(--er-accent);
}

/* ---------------------------------------------------------------
   Reduced motion — the panel arrives, it just doesn't travel
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .er__panel,
  .er__star,
  .er__code {
    animation: none;
  }

  .er__star {
    opacity: 0.28;
  }

  .er__chip {
    transition: none;
  }
}

/* ===============================================================
   The standalone document

   What /400, /403 and /500 render. A route handler answers before the
   root layout exists, so there is no header and no footer here — the
   price of a real status code on the wire. The document pays some of
   it back with the wordmark at the top (still a link home) and leans
   on the panel's own chips for the rest.
   =============================================================== */
.er-doc {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--er-bg);
  color: var(--er-ink);
  font-family: 'IRANSansX', 'Estedad', sans-serif;
}

.er-doc .er {
  flex: 1 0 auto;
  min-height: 0;
}

.er-doc__brand {
  padding: 1.25rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--er-line);
}

/* The visible cut is display:block (see the brand mark rules above), and a
   block box ignores the text-align that centres everything else in this bar —
   so the anchor around it is what gets centred. */
.er-doc__brand a {
  display: inline-block;
}

.er-doc__brand img {
  height: 42px;
  width: auto;
}

.er-doc__foot {
  padding: 1.25rem 1rem 2rem;
  text-align: center;
  color: var(--er-muted);
  font-size: 0.78rem;
}