/**
 * System states — «صفحه پیدا نشد» and «دسترسی به این بخش ممکن نیست» — the v3 conversion (spec §9).
 *
 * Both are one `.sys` card so every system state feels like one family: the illustration at the
 * inline end (the pot for a missing page, the hands holding a seed for a refused one), a gentle line,
 * and the doors back in as `.sys__routes` pills. The denied card keeps its facts table — that table
 * is how somebody understands why they were refused.
 *
 * Loaded on every page rather than conditionally: the denied part is rendered from inside five
 * account templates, and a 404 can be served for any URL at all, so there is no page list to gate it
 * on. It is small.
 *
 * The 404 now uses `.public-wrap`, the container every other public page uses, so it no longer sets a
 * `--chrome-width` of its own — one fewer of the four page widths known-issues.md records.
 *
 * Logical properties throughout: this site is RTL and has no LTR variant.
 */

/* ---------------------------------------------------------------------
 * v3 — 404 and access-denied. `.sys` and its parts are ported from
 * Claude outputs/design-system-v3/css/public-v3.css, which is one file for every
 * public surface; the theme serves them on different routes, so it is split the
 * way the site is actually loaded.
 * --------------------------------------------------------------------- */
.sys { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(var(--space-4), 4vw, var(--space-6)); align-items: center; max-width: 900px; margin-inline: auto; padding: clamp(var(--space-4), 5vw, var(--space-6)); border-radius: 28px; background: linear-gradient(160deg, #fff, var(--surface-blue)); border: 1px solid var(--iz-line-soft); }
/* Two classes, for the same reason `.sys .sys__note` below carries two: the code is a `<p>` inside
   `.sys > div`, so `.sys > div > p` — declared on the next line and more specific than a lone class —
   was painting it as reading copy. The ported rule only won on `letter-spacing`, `direction` and
   `text-align`, the three properties the paragraph rule does not set. Measured on the 404 before this
   change: computed colour `rgb(67, 91, 99)` at 15.5px/400, i.e. «۴۰۴» rendered as a body sentence
   rather than the small green code label spec §9 puts above the heading.

   `--secondary-700`, not the ported `--secondary-500`: tokens.css calls 500 «the only Secondary tone
   approved for white text», i.e. it is a background, and every other `color: var(--secondary-500)`
   in this theme paints an icon, never words. As text on the card it measured 4.67:1 — inside WCAG AA
   but above this project's #58707a lightness floor. 700 is the tone the theme already uses for green
   text and measures 7.09:1 here. Same green, same role, one step darker. */
/* The code is a numeral, weight 700 rather than the ported 780. */
.sys .sys__code { margin: 0; color: var(--secondary-700); font: var(--text-body-s); font-weight: 700; letter-spacing: .1em; direction: ltr; text-align: end; }
.sys h1 { margin: var(--gap-title) 0 0; color: var(--iz-ink); font: var(--text-h1); text-wrap: balance; }
.sys > div > p { margin: var(--gap-title) 0 0; color: var(--iz-text); font: var(--text-body); }
.sys__routes { display: flex; flex-wrap: wrap; gap: var(--gap-inline); margin-top: var(--space-head); }
.sys__routes a { display: inline-flex; align-items: center; gap: var(--gap-inline); min-height: 44px; padding: var(--pad-chip-y) var(--space-3); /* 44px: the pills were 40, under the touch floor */ border-radius: 999px; background: #fff; border: 1px solid var(--iz-line); color: var(--iz-ink); font: var(--text-button); text-decoration: none; transition: border-color .16s var(--iz-ease), background-color .16s var(--iz-ease); }
.sys__routes a i { color: var(--primary-500); }
.sys .art { width: clamp(130px, 18vw, 180px); aspect-ratio: 1; }
.sys__facts { display: grid; gap: 0; margin: var(--space-head) 0 0; padding: var(--space-0) var(--pad-row); border-radius: 14px; background: #fff; border: 1px solid var(--iz-line-soft); }
.sys__facts div { display: flex; justify-content: space-between; gap: var(--space-2); min-height: 42px; align-items: center; font: var(--text-body-s); font-weight: 500; }
.sys__facts div + div { border-top: 1px dashed var(--iz-line-soft); }
.sys__facts dt { color: var(--iz-ink-soft); }
/* `overflow-wrap` and `text-align` are not in the ported rule: a facts value can be a reference or a
   name somebody typed, and without them it pushed the row wide instead of breaking. Carried over from
   the rule this replaces, `.system-denied__row strong`. */
.sys__facts dd { margin: 0; color: var(--iz-ink); font-weight: 600; overflow-wrap: anywhere; text-align: end; }
/* The pills are plain anchors, so nothing else gives them the kit's ring. */
.sys__routes a:focus-visible { outline: none; box-shadow: var(--iz-focus); }
@media (hover: hover) and (pointer: fine) {
	.sys__routes a:hover { border-color: var(--primary-200); background: var(--primary-50); }
}
@media (max-width: 640px) {
	.sys { grid-template-columns: 1fr; }
	.sys .art { grid-row: 1; width: 130px; justify-self: center; }
	.sys .sys__code { text-align: center; }
	.sys h1, .sys > div > p { text-align: center; }
	.sys__routes { justify-content: center; }
}

/* ------------------------------------------------------------------ what the ported CSS leaves out */

/* The 404's own page padding. `.iz-pagestack` pays for the top and the gap between the card and the
   field under it; only the foot is left. */
.sys-page { padding-block-end: var(--space-band); }

/* The search field under the 404 card, lined up with the card's own text column: same 900px box, same
   padding, so the field starts where the heading starts. */
.sys-find { width: min(900px, 100%); margin-inline: auto; padding-inline: clamp(var(--space-4), 5vw, var(--space-6)); }
.sys-find p { margin: 0 0 var(--gap-field); color: var(--iz-ink-soft); font: var(--text-body-s); }

/* The line under the denied page's facts table, saying that this is everything we know and that
   nothing from another account is shown. Two classes so it beats `.sys > div > p`, which would
   otherwise print a footnote at reading size. */
.sys .sys__note { margin: var(--space-1) 0 0; color: var(--iz-ink-soft); font: var(--text-caption); }

@media (max-width: 640px) {
	.sys-find { text-align: center; }
	.sys-find .search-big { text-align: start; }
}