/* مظنه — the one stylesheet of the app.
   the design language is «تابلوی بازار» (step S2, owner 2026-11-09; applied in slice 15الف, 0.29.0): a dark header and a
   dark price board with bright gold, light forms and tables. every COLOUR is a token on :root and nowhere else
   (tests/Unit/PaletteTest fails on a raw colour outside that block); the values' only home is the design-language source
   prd/dm-gold-shop/_build/dm-gold-shop-design-language.src.html (vocabulary and old → new names: design-pack/tokens.md).
   App\Support\Palette mirrors the few colours needed outside CSS (manifest, icons, 503, print footer) — change both.
   this app owns the whole page, so :root and body are ours (+CSS-SCOPE does not bind a standalone app);
   every component still carries its own mz- class (+SELECTOR-SPECIFICITY) and only logical properties (+RTL). */

@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/vazirmatn/mz-vazirmatn-variable.woff2') format('woff2-variations'),
         url('../fonts/vazirmatn/mz-vazirmatn-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* shared: type, space, shape, motion */
    --mz-font: 'Vazirmatn', Tahoma, Arial, sans-serif;
    --mz-fs-xs: 13px;   /* secondary labels only — never a number (design floor) */
    --mz-fs-sm: 14px;   /* hints, table text, every small number */
    --mz-fs-md: 16px;   /* body and every input (iOS never zooms) */
    --mz-fs-lg: 18px;
    --mz-fs-xl: 20px;
    --mz-fs-2xl: 24px;
    --mz-fs-3xl: 28px;  /* slice 19: the introduction page's h1 on a phone */
    --mz-fs-4xl: 32px;  /* slice 19: the same h1 from 860 px */
    --mz-sp-1: 4px; --mz-sp-2: 8px; --mz-sp-3: 12px; --mz-sp-4: 16px; --mz-sp-5: 24px; --mz-sp-6: 32px;
    --mz-gap: var(--mz-sp-4);
    --mz-tap: 44px;
    --mz-radius: 10px;
    --mz-radius-sm: 8px;
    --mz-radius-pill: 999px;
    --mz-head-border-w: 1px;
    --mz-price-weight: 800;
    --mz-title-weight: 800;
    --mz-shadow-1: none;
    --mz-dur: 150ms;
    --mz-ease: cubic-bezier(0.2, 0, 0, 1);

    /* «تابلوی بازار» — colours */
    --mz-bg: #eceef2; --mz-surface: #ffffff; --mz-surface-2: #f2f4f7;
    --mz-ink: #151a25; --mz-muted: #525b6d; --mz-line: #d6dae2; --mz-line-strong: #aab1bf; --mz-field-line: #858d9c;
    --mz-brand: #e0b44c; --mz-on-brand: #1a1405; --mz-brand-soft: #faf0d6; --mz-brand-ink: #7a5200; --mz-brand-line: #c9962a;
    --mz-head-bg: #121826; --mz-head-ink: #f2f4f8; --mz-head-muted: #aab3c5; --mz-head-line: #121826; --mz-head-brand: #e0b44c; --mz-head-current: #e0b44c;
    --mz-console-bg: #3a2f5c; --mz-console-ink: #f4f1fb; --mz-console-muted: #cbc3e3; --mz-console-current: #ffd27a;
    --mz-board-bg: #161d2b; --mz-board-ink: #f5f7fa; --mz-board-muted: #aeb7c8; --mz-board-line: #2a3346; --mz-board-no: #ff9b8f; --mz-board-accent: #e0b44c;
    --mz-backdrop: #121826a6;
    --mz-buy: #e0b44c; --mz-on-buy: #1a1405; --mz-sell-bg: #161d2b; --mz-sell-ink: #9cc3ff; --mz-sell-line: #9cc3ff;
    --mz-ok: #0f6e37; --mz-ok-soft: #e6f4ec; --mz-ok-line: #a6d6b9;
    --mz-no: #b42318; --mz-no-soft: #fdecea; --mz-no-line: #f1b5ae; --mz-on-no: #ffffff;
    --mz-warn: #a33b00; --mz-warn-soft: #fff1e5; --mz-warn-line: #f5c49b;
    --mz-link: #1f4f8f; --mz-focus: #1f5fbf; --mz-focus-head: #9cc3ff; --mz-focus-board: #9cc3ff;
    --mz-print-head: #eef0f3;
    --mz-app-theme: #121826;
    --mz-icon-bg: #121826; --mz-icon-ring: #e0b44c; --mz-icon-ink: #f5f7fa;
}

/* the LAYER, not the language: the console never looks like a seller's panel (design floor; S2 plan question 5).
   layouts/mz puts data-layer="console" on every console page, its sign-in included */
.mz-page[data-layer="console"] {
    --mz-head-bg: var(--mz-console-bg); --mz-head-ink: var(--mz-console-ink); --mz-head-muted: var(--mz-console-muted);
    --mz-head-line: var(--mz-console-bg); --mz-head-brand: var(--mz-console-ink); --mz-head-current: var(--mz-console-current);
    --mz-focus-head: var(--mz-console-current);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--mz-bg);
    color: var(--mz-ink);
    font-family: var(--mz-font);
    font-size: var(--mz-fs-md);
    line-height: 1.8;
    direction: rtl;
    text-align: start;
    font-variant-numeric: tabular-nums;
}

/* «پویش ظاهر» (0.30.1): a link standing alone (not inside running text) measured 22–23 px tall; one pixel above and
   below brings a 14 px link to the 24 px floor without moving any line (inline padding never grows the line box) */
:where(.mz-page) a { color: var(--mz-link); padding-block: 1px; }
/* the ring reads --mz-focus where it lands: the dark header and the dark price board redefine it (light blue) */
:focus-visible { outline: 3px solid var(--mz-focus); outline-offset: 2px; }

.mz-page { min-height: 100vh; display: flex; flex-direction: column; }

/* slice 15الف: the header is its own surface (dark in «تابلوی بازار»; violet on the console layer) */
.mz-header {
    --mz-focus: var(--mz-focus-head);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mz-sp-2) var(--mz-gap);
    padding-block: var(--mz-sp-3);
    padding-inline: var(--mz-gap);
    background: var(--mz-head-bg);
    color: var(--mz-head-ink);
    border-block-end: var(--mz-head-border-w) solid var(--mz-head-line);
}
.mz-brand { font-weight: 800; font-size: var(--mz-fs-xl); color: var(--mz-head-brand); text-decoration: none; }
.mz-brand__seller { font-weight: 600; font-size: var(--mz-fs-sm); color: var(--mz-head-muted); }
/* «کنسول پلتفرم» beside the word mark on every console page (the layer, in words — never told by colour alone) */
.mz-layer-badge { display: inline-block; padding-inline: var(--mz-sp-2); border: 1px solid currentColor; border-radius: var(--mz-radius-pill);
                  font-size: var(--mz-fs-xs); font-weight: 700; color: var(--mz-head-current); }
.mz-nav { display: flex; flex-wrap: wrap; gap: var(--mz-sp-1) var(--mz-sp-3); align-items: center; margin: 0; padding: 0; list-style: none; }
.mz-nav__link { color: var(--mz-head-ink); text-decoration: none; padding-block: var(--mz-sp-1); border-block-end: 2px solid transparent; }
/* the current item is told by WEIGHT and a RULE, never by colour alone (+A11Y) */
.mz-nav__link[aria-current="page"] { color: var(--mz-head-current); font-weight: 700; border-block-end-color: currentColor; }
.mz-header .mz-btn--quiet { color: var(--mz-head-ink); border-color: var(--mz-head-muted); }

.mz-main { flex: 1; width: 100%; max-width: 960px; margin-inline: auto; padding: var(--mz-gap); }
.mz-title { font-size: var(--mz-fs-2xl); font-weight: var(--mz-title-weight); line-height: 1.5; margin-block: var(--mz-sp-2) var(--mz-sp-4); }
.mz-lead { color: var(--mz-muted); margin-block: 0 var(--mz-sp-4); }

.mz-card {
    background: var(--mz-surface);
    border: 1px solid var(--mz-line);
    border-radius: var(--mz-radius);
    padding: var(--mz-gap);
    margin-block-end: var(--mz-gap);
    min-width: 0;
    box-shadow: var(--mz-shadow-1);
}
.mz-card__title { font-size: var(--mz-fs-lg); font-weight: var(--mz-title-weight); margin-block: 0 var(--mz-sp-2); }

.mz-choices { display: grid; gap: var(--mz-gap); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

.mz-form { display: grid; gap: var(--mz-gap); }
/* S5 14ب۲ (measured at 375 on the customer page, 433 wide): an implicit grid track is `auto`, so a select's widest
   option — a long category name — was its floor; the field's one column may shrink to its box like any other
   (+STYLE-FOUNDATIONS 3; slice 10 fixed only the archive filter's selects, this is the family) */
.mz-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mz-sp-1); min-width: 0; }
.mz-label { font-weight: 600; }
.mz-hint { color: var(--mz-muted); font-size: var(--mz-fs-sm); }
.mz-error { color: var(--mz-no); font-size: var(--mz-fs-sm); margin: 0; }
.mz-select {
    font: inherit;
    font-size: var(--mz-fs-md);
    min-height: var(--mz-tap);
    padding-inline: var(--mz-sp-3);
    border: 1px solid var(--mz-field-line);
    border-radius: var(--mz-radius-sm);
    background: var(--mz-surface);
    color: var(--mz-ink);
    max-width: min(320px, 100%);
}
/* a refused field: the colour AND a thicker edge, never the colour alone (+A11Y); the error text names it */
.mz-select[aria-invalid="true"] { border-color: var(--mz-no); border-width: 2px; }
.mz-input {
    font: inherit;
    font-size: var(--mz-fs-md);
    min-height: var(--mz-tap);
    padding-inline: var(--mz-sp-3);
    border: 1px solid var(--mz-field-line);
    border-radius: var(--mz-radius-sm);
    background: var(--mz-surface);
    color: var(--mz-ink);
    width: 100%;
    max-width: min(420px, 100%);
}
.mz-input[aria-invalid="true"] { border-color: var(--mz-no); border-width: 2px; }
/* Latin values (username, mobile, database names) inside the RTL page: typed and read left to right */
.mz-input--ltr { direction: ltr; text-align: start; }
.mz-input--code { font-size: var(--mz-fs-2xl); letter-spacing: 0.3em; max-width: min(220px, 100%); }
.mz-form--narrow { max-width: 480px; }
.mz-fieldset { display: grid; gap: var(--mz-gap); }
.mz-fieldset__legend { padding-inline: var(--mz-sp-1); }
.mz-card__head { display: flex; flex-wrap: wrap; gap: var(--mz-sp-2) var(--mz-gap); align-items: center; justify-content: space-between; margin-block-end: var(--mz-sp-2); }
.mz-card__head .mz-card__title { margin: 0; }
.mz-row-form { display: grid; gap: var(--mz-sp-1); justify-items: start; margin: 0; }
.mz-check { display: flex; gap: 6px; align-items: flex-start; font-size: var(--mz-fs-sm); }
.mz-check__box { inline-size: 20px; block-size: 20px; margin: 2px 0 0; flex: none; }
.mz-btn:disabled { opacity: 0.55; cursor: not-allowed; }
[x-cloak] { display: none; }

.mz-btn {
    font: inherit;
    font-weight: 700;
    min-height: var(--mz-tap);
    padding-inline: 20px;
    border: 1px solid var(--mz-brand);
    border-radius: var(--mz-radius-sm);
    background: var(--mz-brand);
    color: var(--mz-on-brand);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--mz-dur) var(--mz-ease), border-color var(--mz-dur) var(--mz-ease);
}
/* bright gold is a FILL; as text on white it is the darker brand ink (7.1:1), its edge the brand line */
.mz-btn--quiet { background: transparent; color: var(--mz-brand-ink); border-color: var(--mz-brand-line); }
.mz-actions { display: flex; flex-wrap: wrap; gap: var(--mz-sp-2) var(--mz-sp-3); align-items: center; }
.mz-inline-form { display: inline; margin: 0; }

/* slice 15الف: every notice carries a 4px start edge in its own colour; the WARNING has its own hue, apart from the
   brand (debt 84: it was the brand gold, so a warning read as decoration) */
.mz-notice { border-radius: var(--mz-radius-sm); padding: 10px 14px; margin-block-end: var(--mz-gap); border: 1px solid var(--mz-line);
             border-inline-start-width: 4px; background: var(--mz-surface); }
.mz-notice--ok { background: var(--mz-ok-soft); border-color: var(--mz-ok-line); border-inline-start-color: var(--mz-ok); color: var(--mz-ok); }
.mz-notice--no { background: var(--mz-no-soft); border-color: var(--mz-no-line); border-inline-start-color: var(--mz-no); color: var(--mz-no); }
.mz-notice--warn { background: var(--mz-warn-soft); border-color: var(--mz-warn-line); border-inline-start-color: var(--mz-warn); color: var(--mz-warn); }

.mz-table-wrap { overflow-x: auto; }
.mz-table { width: 100%; border-collapse: collapse; font-size: var(--mz-fs-sm); }
.mz-table__cell { border: 1px solid var(--mz-line); padding: var(--mz-sp-2); text-align: start; vertical-align: top; }
/* «پویش ظاهر» (0.30.1): a link alone in a cell — an order number «۱۷» measured 20 × 23 — is a target of at least
   24 × 24 (+A11Y); `:where` keeps the rule at zero specificity, so a button-link in a cell keeps its own size */
:where(.mz-table__cell) a { display: inline-block; min-inline-size: var(--mz-sp-5); min-block-size: var(--mz-sp-5); text-align: center; }
.mz-table__head { background: var(--mz-surface-2); font-weight: 700; }

/* slice 11 (پ۱۱-۱, measured at 375): a statement on a phone is a column of cards, never a table to swipe sideways —
   each cell carries its column's name (data-label) beside its value; the head stays for screen readers only, clipped
   in place (+OFFSCREEN). wider than 600 px it is the ordinary table again */
@media (max-width: 600px) {
    .mz-table--stack, .mz-table--stack tbody, .mz-table--stack tr, .mz-table--stack td { display: block; inline-size: 100%; }
    .mz-table--stack thead { position: absolute; inset-inline-start: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .mz-table--stack tr { border: 1px solid var(--mz-line); border-radius: var(--mz-radius-sm); padding-block: var(--mz-sp-1); margin-block-end: var(--mz-sp-2); }
    .mz-table--stack td { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); gap: var(--mz-sp-2); border: 0; padding-block: var(--mz-sp-1); overflow-wrap: break-word; }
    .mz-table--stack td::before { content: attr(data-label); color: var(--mz-muted); font-size: var(--mz-fs-xs); }
    .mz-table-wrap:has(> .mz-table--stack) { overflow-x: visible; }
}

/* S5 14ب: the term column is AT MOST half the list, then the term wraps — `max-content` never wrapped, so one long term
   («پاک‌کردنی از (۹۰ روز پس از پایان)», 206 px) pushed the console's seller page 13 px off a 375 screen (+STYLE-FOUNDATIONS 3) */
.mz-figures { display: grid; grid-template-columns: fit-content(50%) minmax(0, 1fr); gap: var(--mz-sp-1) var(--mz-sp-4); margin: 0; }
/* «پویش ظاهر» (0.30.1): a form right after a list of figures (the console's seller page) measured 0 px apart */
.mz-figures + .mz-form { margin-block-start: var(--mz-gap); }
.mz-figures__term { color: var(--mz-muted); min-width: 0; overflow-wrap: break-word; }
.mz-figures__value { margin: 0; font-weight: 600; min-width: 0; }

.mz-ltr { direction: ltr; unicode-bidi: isolate; font-family: Consolas, monospace; font-size: var(--mz-fs-sm); }
/* «پویش تجربه» 0.35.3: a long machine text with no spaces (a failed migration's reason) breaks anywhere, never past the page */
.mz-break { display: block; overflow-wrap: anywhere; }

/* slice 15ب (debt 50): the pieces of one line — time and date, number and product — split by a DRAWN rule, never by a
   «·» glyph, which Vazirmatn draws almost exactly as the Persian zero «۰» (App\Support\Meta, <x-mz-meta>) */
.mz-meta { display: inline-flex; flex-wrap: wrap; align-items: baseline; min-width: 0; }
.mz-meta__item { min-width: 0; overflow-wrap: anywhere; }
.mz-meta__item + .mz-meta__item::before { content: ""; display: inline-block; inline-size: 1px; block-size: 0.9em; margin-inline: var(--mz-sp-2);
                                          background: var(--mz-line-strong); vertical-align: -0.1em; }
/* on the dark board and header the rule reads the board's own muted ink */
.mz-price .mz-meta__item + .mz-meta__item::before, .mz-header .mz-meta__item + .mz-meta__item::before { background: var(--mz-board-muted); }
/* slice 15ب (debt 79): ONE phone shape — the house face's Persian digits, 4·3·4 groups, isolated left to right
   (Display::phone, <x-mz-phone>); never broken across lines */
.mz-phone { direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mz-input--short { max-width: min(140px, 100%); }

/* state pills (open / closed, active / inactive): the word carries the state, the colour only repeats it (+A11Y) */
/* «پویش ظاهر» (0.30.1): a pill carries numbers («۲ دقیقه پیش», a count) — 14 px like every number, never 13 */
.mz-pill { display: inline-block; padding-inline: var(--mz-sp-2); border-radius: var(--mz-radius-pill); font-size: var(--mz-fs-sm); font-weight: 700;
           border: 1px solid var(--mz-line); background: var(--mz-surface-2); color: var(--mz-ink); }
.mz-pill--ok { background: var(--mz-ok-soft); color: var(--mz-ok); border-color: var(--mz-ok-line); }
.mz-pill--no { background: var(--mz-no-soft); color: var(--mz-no); border-color: var(--mz-no-line); }

.mz-list-plain { margin: 0; padding: 0; list-style: none; }

/* the colleague's seller chooser (flow ج۱): the seller's mark is its initial until a logo exists (doc §10) */
.mz-seller { display: flex; gap: var(--mz-gap); align-items: flex-start; }
.mz-seller__mark {
    flex: none;
    inline-size: 48px;
    block-size: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mz-brand-soft);
    color: var(--mz-brand-ink);
    font-weight: 800;
    font-size: var(--mz-fs-2xl);
}
.mz-seller__body { min-width: 0; }

/* the price cards (flow ج۲): two buttons named from the customer's view (demo #3), a closed one with its reason */
.mz-cards { display: grid; gap: var(--mz-gap); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
/* slice 15الف: the price card IS the board — dark in «تابلوی بازار» — so everything inside reads the BOARD roles */
.mz-price { --mz-focus: var(--mz-focus-board); margin: 0; background: var(--mz-board-bg); color: var(--mz-board-ink); border-color: var(--mz-board-line); }
.mz-price .mz-hint { color: var(--mz-board-muted); }
/* slice 11 (measured at 375 with real figures): a price is ONE number. `overflow-wrap:anywhere` split «۲۶۱٬۱۱۲٬۳۴۵٫۶ تومان»
   at the decimal sign into two lines that read as two amounts; and once the number was kept whole, a long one widened its
   `1fr` column (whose minimum is its content) and pushed the pair 19 px past the card. now the two columns never grow
   (minmax(0,1fr)), the line breaks at the space before the unit, and the size follows the width so a 13-character number
   (up to «۹۹۹٬۹۹۹٬۹۹۹٫۹», ten billion rials a unit — far above any gram, mesghal or coin) fits a button at any width
   from 320 px: 17 px at 375 and wider, 13.5 px at 320 (a Persian digit or separator ≈ 0.59 em, measured). a still longer
   number breaks inside the button as a last resort, never past it */
.mz-price__sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mz-sp-3); margin-block-start: var(--mz-sp-2); }
.mz-price__side { display: grid; gap: var(--mz-sp-1); margin: 0; min-width: 0; }
.mz-price__btn { flex-direction: column; min-height: 64px; padding-inline: var(--mz-sp-2); inline-size: 100%; line-height: 1.5; }
/* «خرید» a filled gold, «فروش» an outlined light blue: told apart by place, word and fill — never green and red, red
   is «رد» here (S2 plan question 7) */
.mz-price__btn--buy { background: var(--mz-buy); border-color: var(--mz-buy); color: var(--mz-on-buy); }
.mz-price__btn--sell { background: var(--mz-sell-bg); border-color: var(--mz-sell-line); color: var(--mz-sell-ink); }
.mz-price__word { font-size: var(--mz-fs-sm); }
.mz-price__amount { font-size: clamp(13px, 6.5vw - 7.3px, 17px); font-weight: var(--mz-price-weight); overflow-wrap: break-word; }
.mz-price__why { margin: 0; font-size: var(--mz-fs-xs); color: var(--mz-board-no); }
.mz-offline .mz-price { opacity: 0.6; }

/* the order sheet and its confirmation (flow ج۳, slice 2) */
/* slice 15الف: the locked price on the order sheet is a piece of the same board, so the price the customer is about to
   take reads as the one on the price cards; its lock line in the board's gold */
.mz-quote { --mz-focus: var(--mz-focus-board); background: var(--mz-board-bg); color: var(--mz-board-ink); border-color: var(--mz-board-line); }
.mz-quote__price { margin: 0; }
.mz-lock { margin: var(--mz-sp-1) 0 0; color: var(--mz-brand-ink); font-weight: 600; }
.mz-quote .mz-lock { color: var(--mz-board-accent); }
.mz-words { display: block; overflow-wrap: anywhere; }
.mz-words:empty, .mz-error:empty { display: none; }
.mz-summary { border-block-start: 1px solid var(--mz-line); padding-block-start: var(--mz-sp-3); min-width: 0; }
.mz-figures__value--total { font-size: var(--mz-fs-lg); }
.mz-pill--warn { background: var(--mz-warn-soft); color: var(--mz-warn); border-color: var(--mz-warn-line); }

/* the seller's live queue and the customer's waiting window (flows م۲ and ج۴, slice 3) */
.mz-btn--no { background: var(--mz-no); border-color: var(--mz-no); color: var(--mz-on-no); }
.mz-textarea { min-height: 120px; padding-block: var(--mz-sp-2); line-height: 1.8; resize: vertical; }
.mz-queue__cards { display: grid; gap: var(--mz-gap); grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); margin-block-end: var(--mz-gap); }
.mz-queue__card { margin: 0; border-inline-start: 4px solid var(--mz-brand); }
.mz-queue__who { margin: 0 0 var(--mz-sp-2); font-weight: 600; }
.mz-queue__now, .mz-queue__left { margin: var(--mz-sp-2) 0 0; }
.mz-queue__actions { margin-block-start: var(--mz-sp-3); align-items: flex-start; }
.mz-queue__today-title { margin-block-start: var(--mz-sp-5); }
.mz-offline .mz-queue__card { opacity: 0.6; }
.mz-countdown { font-size: var(--mz-fs-lg); }
.mz-reject { min-width: 0; }
.mz-reject__open { list-style: none; }
.mz-reject__open::-webkit-details-marker { display: none; }
.mz-reject__form { display: grid; gap: var(--mz-sp-2); margin-block-start: var(--mz-sp-2); justify-items: start; }
.mz-presence { margin: var(--mz-sp-2) 0 0; }

/* the seller's price warnings above every panel page and the health line beside the queue (slice 6ب, پ۶-۲) */
.mz-price-alert__box { display: grid; gap: 10px; }
.mz-price-alert__title { margin: 0; font-size: var(--mz-fs-md); }
.mz-price-alert__hint { margin: 0; font-size: var(--mz-fs-sm); color: var(--mz-ink); }
.mz-price-alert__row { display: flex; flex-wrap: wrap; gap: var(--mz-sp-2) var(--mz-sp-3); align-items: center; margin: 0; padding-block-start: 10px; border-block-start: 1px solid var(--mz-line); }
.mz-price-alert__label { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; color: var(--mz-ink); }
/* «آخرین قیمت سالم ساعت ۱۴:۰۲» carries a number: 14 px (design floor) */
.mz-price-alert__since, .mz-price-alert__unit { display: block; font-size: var(--mz-fs-sm); color: var(--mz-muted); }
.mz-price-alert__input { flex: 0 1 180px; min-width: 0; inline-size: auto; }
.mz-price-alert__error { flex-basis: 100%; margin: 0; }
.mz-price-health { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0 0 var(--mz-gap); font-size: var(--mz-fs-sm); }
.mz-price-health__title { font-weight: 700; }
.mz-price-health__item { min-width: 0; overflow-wrap: anywhere; }
.mz-history__row { padding-block: var(--mz-sp-1); border-block-end: 1px solid var(--mz-line); font-size: var(--mz-fs-sm); }
.mz-pending { display: flex; flex-wrap: wrap; gap: var(--mz-sp-2) var(--mz-sp-3); align-items: center; justify-content: space-between; }
.mz-wait { margin: 0 0 var(--mz-sp-2); }
.mz-result { font-weight: 700; }

/* balances and statement (flow ج۵, slice 4الف): the state is a WORD in a pill, the colour only repeats it */
.mz-balance { min-width: 0; }
.mz-balance__figure { display: flex; flex-wrap: wrap; gap: var(--mz-sp-2); align-items: center; margin: var(--mz-sp-1) 0; font-size: var(--mz-fs-xl); }

/* the statement's filter and its printable copy (flow ج۵, slice 4ج). the printable page is a document of its own
   (resources/views/ledger/print.blade.php); its @page lives in THAT document's style, never here (+CSS-SCOPE) */
.mz-filter__fields { display: grid; gap: var(--mz-gap); grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); align-items: start; }
.mz-filter .mz-hint { margin-block: var(--mz-sp-2); }
/* slice 10 (measured on the rig at 492 px): a select's widest option is its min-content, and in this grid it pushed the
   whole page sideways (the archive's customer list); it fills its cell instead and may shrink (+STYLE-FOUNDATIONS) */
.mz-filter .mz-select { width: 100%; min-width: 0; }
.mz-input--date { max-width: min(200px, 100%); }
.mz-print { background: var(--mz-surface); }
.mz-print__page { max-width: 1000px; margin-inline: auto; padding: var(--mz-gap); }
.mz-print__tools { margin-block-end: var(--mz-gap); }
.mz-print__head { display: flex; flex-wrap: wrap; gap: var(--mz-sp-2) var(--mz-sp-6); justify-content: space-between; align-items: flex-start; border-block-end: 2px solid var(--mz-ink); padding-block-end: var(--mz-sp-3); margin-block-end: var(--mz-sp-3); }
.mz-print__title { font-size: var(--mz-fs-2xl); margin: 0; }
.mz-print__line { margin: 0; }
.mz-print__facts { font-size: var(--mz-fs-sm); }
.mz-print__count { margin-block-start: var(--mz-sp-2); }
/* «پویش ظاهر» (0.30.1): on the SCREEN copy every number is 14 px (it measured 13); paper keeps its 10pt below */
.mz-print .mz-table { font-size: var(--mz-fs-sm); }
@media print {
    .mz-print__tools { display: none; }
    .mz-print__page { max-width: none; padding: 0; }
    .mz-print__table { overflow: visible; }
    .mz-print .mz-table { font-size: 10pt; }
    .mz-print .mz-table__head { background: var(--mz-print-head); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .mz-print .mz-table thead { display: table-header-group; }
    .mz-print .mz-table tr { break-inside: avoid; }
}

/* the seller's message (flow ج۷, slice 5ج۱): once a window, then a folded box. without the script the window is an
   OPEN dialog in the page, so it is laid out as a box in the flow; only a real modal is centred over the page */
.mz-dialog {
    border: 1px solid var(--mz-line);
    border-radius: var(--mz-radius);
    padding: var(--mz-gap);
    background: var(--mz-surface);
    color: var(--mz-ink);
    max-inline-size: min(560px, calc(100% - 32px));
}
.mz-dialog:not(:modal) { position: static; inline-size: auto; max-inline-size: none; margin: 0 0 var(--mz-gap); border-inline-start: 4px solid var(--mz-brand); }
.mz-dialog::backdrop { background: var(--mz-backdrop); }
.mz-message__head { cursor: pointer; font-weight: 700; min-height: 24px; }
.mz-message__text { white-space: pre-line; overflow-wrap: anywhere; margin-block: var(--mz-sp-2) var(--mz-sp-3); }
.mz-message-reach { margin: 0; }

/* the customer's note on an order (slice 5ج۲): his own words, line breaks kept, a long unbroken run wrapped. the
   words sit in a <bdi>, so a Latin note keeps its own direction inside the RTL page (+RTL) */
/* «پویش ظاهر» (0.30.1): the note measured 0 px above the buttons and the void form after it — a gap on both sides */
.mz-note { white-space: pre-line; overflow-wrap: anywhere; margin-block: var(--mz-sp-2); margin-inline: 0; }
.mz-note__label { font-weight: 700; }
.mz-queue__note { margin: var(--mz-sp-2) 0 0; padding: var(--mz-sp-2) var(--mz-sp-3); border-radius: var(--mz-radius); background: var(--mz-brand-soft); }

/* «معاملات من» (flow ج۴, slice 5ج۲): a list of linked rows, not a wide table, so a phone never scrolls sideways */
.mz-trades { display: grid; gap: var(--mz-sp-2); margin: 0; padding: 0; list-style: none; }
.mz-trades__item { min-width: 0; }
.mz-trades__link { display: grid; gap: var(--mz-sp-1); margin: 0; color: var(--mz-ink); text-decoration: none; }
.mz-trades__link:hover { border-color: var(--mz-brand-line); }
.mz-trades__head { font-weight: 700; overflow-wrap: anywhere; }
.mz-trades__foot { display: flex; flex-wrap: wrap; gap: var(--mz-sp-1) var(--mz-sp-3); align-items: center; justify-content: space-between; }
.mz-trades__reason { overflow-wrap: anywhere; }

/* «تاریخچهٔ عملیات» (flow م۱۱, slice 7): a list of cards, not a wide table — what, by whom, when, every «از … به …» pair.
   a long text (a message, the reject reasons) sits in a closed <details>, never cut; every run wraps at 375 */
/* «پویش ظاهر» (0.30.1): the pager buttons after the list measured 0 px below the last card — the list keeps a gap */
.mz-history { display: grid; gap: var(--mz-sp-2); margin: 0 0 var(--mz-gap); padding: 0; list-style: none; }
.mz-history__item { display: grid; gap: var(--mz-sp-1); margin: 0; min-width: 0; }
.mz-history__head { display: flex; flex-wrap: wrap; gap: var(--mz-sp-1) var(--mz-sp-3); align-items: center; justify-content: space-between; }
.mz-history__what { font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.mz-history__actor-link { color: inherit; }
.mz-history__when, .mz-history__summary, .mz-history__reason { margin: 0; overflow-wrap: anywhere; }
.mz-history__changes { display: grid; gap: 2px; margin: 0; padding-inline-start: 18px; }
.mz-history__change { overflow-wrap: anywhere; }
.mz-history__label { font-weight: 600; }
.mz-history__long summary { cursor: pointer; }
.mz-history__text { white-space: pre-line; margin: var(--mz-sp-1) 0 0; }
.mz-history__link { justify-self: start; }

/* «پیامک به مشتری» (slice 8): one block per notice — switch, text, what the customer reads */
.mz-sms-notice { border-block-start: 1px solid var(--mz-line); padding-block-start: var(--mz-gap); margin: 0; min-width: 0; }
.mz-sms-preview { padding: var(--mz-sp-2) var(--mz-sp-3); border-radius: var(--mz-radius); background: var(--mz-brand-soft); min-width: 0; }
.mz-sms-preview .mz-hint { margin: 0; }
.mz-sms-alert__text { margin: 0 0 var(--mz-sp-2); overflow-wrap: anywhere; }

/* «نوار اشتراک» (slice 12, flow ک۲): the subscription bar above every panel page — «رو به پایان», «در مهلت», «بسته».
   min-width 0 and a wrapping text so a long date and a phone number never widen the page at 375 (+STYLE-FOUNDATIONS) */
.mz-subscription-alert { min-width: 0; }
.mz-subscription-alert__text { margin: 0 0 var(--mz-sp-2); overflow-wrap: anywhere; }
.mz-subscription-alert .mz-actions { margin: 0; }

/* «حسابداری» (slice 9): a key shown once, and an event's body — Latin code, left to right, wrapped so 375 never scrolls */
.mz-code { direction: ltr; text-align: start; unicode-bidi: isolate; font-family: ui-monospace, Consolas, monospace; font-size: var(--mz-fs-xs);
    white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--mz-sp-2) 0 0; padding: var(--mz-sp-2) var(--mz-sp-3); border-radius: var(--mz-radius);
    background: var(--mz-brand-soft); min-width: 0; max-width: 100%; }
.mz-code--key { font-size: var(--mz-fs-sm); font-weight: 700; user-select: all; }
.mz-acc-key { border-block-start: 1px solid var(--mz-line); padding-block-start: var(--mz-gap); margin-block-start: var(--mz-gap); min-width: 0; }

/* «حساب» (flow م۱۱, slice 7): a few name ⇒ value facts */
.mz-facts { display: grid; gap: var(--mz-sp-1); margin: 0 0 var(--mz-sp-2); }
.mz-facts__row { display: flex; flex-wrap: wrap; gap: var(--mz-sp-1) var(--mz-sp-3); }
.mz-facts__row dt { color: var(--mz-muted); }
.mz-facts__row dd { margin: 0; font-weight: 700; }

/* «نصب روی گوشی» (flow ج۷, slice 11): the guides in one column; on an iPhone its guide comes first (the script marks
   it); inside the installed app the menu line is gone (the guide itself says «نصب است») */
.mz-install-list { display: flex; flex-direction: column; }
.mz-install--first { order: -1; }
.mz-install__steps { margin: 0; padding-inline-start: 22px; display: grid; gap: 6px; }
.mz-install__icon { vertical-align: middle; color: var(--mz-link); }
.mz-install-link { margin-block-start: var(--mz-gap); }
@media (display-mode: standalone) {
    .mz-nav__install, .mz-install-link { display: none; }
}

/* text for a screen reader only: clipped in place, never parked at a physical offset (+OFFSCREEN) */
.mz-visually-hidden { position: absolute; inset-inline-start: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.mz-foot { padding: var(--mz-gap); text-align: center; color: var(--mz-muted); font-size: var(--mz-fs-xs); }

/* ── slice 19 (0.35.0): the public introduction page (resources/views/landing.blade.php), from the approved mockup
      prd/dm-gold-shop/dm-gold-shop-landing.html — class names VERBATIM; every value a token ── */
/* the skip link: the FIRST focusable element, out of sight until it has focus (guides/scan-seo.md DOC-SHELL) */
.mz-skip { position: absolute; inset-inline-start: var(--mz-sp-2); inset-block-start: -100px; z-index: 10; }
.mz-skip:focus { inset-block-start: var(--mz-sp-2); }
.mz-landing { flex: 1; width: 100%; max-width: 1040px; margin-inline: auto; padding: var(--mz-sp-5) var(--mz-gap) var(--mz-sp-6);
              display: grid; gap: var(--mz-sp-6); }
.mz-landing__hero { display: grid; gap: var(--mz-sp-5); align-items: center; }
.mz-landing__title { font-size: var(--mz-fs-3xl); font-weight: var(--mz-title-weight); line-height: 1.5; margin: 0; }
.mz-landing__lead { font-size: var(--mz-fs-lg); color: var(--mz-muted); margin: 0; }
.mz-landing__hero-text { display: grid; gap: var(--mz-sp-4); }
.mz-landing__board { --mz-focus: var(--mz-focus-board); background: var(--mz-board-bg); color: var(--mz-board-ink); border-radius: var(--mz-radius);
                     padding: var(--mz-gap); display: grid; gap: var(--mz-sp-3); margin: 0; }
.mz-landing__board-head { display: flex; justify-content: space-between; gap: var(--mz-sp-2); color: var(--mz-board-muted); font-size: var(--mz-fs-sm); }
.mz-landing__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--mz-sp-2); align-items: center;
                   padding-block-start: var(--mz-sp-3); border-block-start: 1px solid var(--mz-board-line); }
.mz-landing__item { font-weight: 700; }
.mz-landing__unit { display: block; color: var(--mz-board-muted); font-size: var(--mz-fs-sm); font-weight: 400; }
.mz-landing__price { min-width: 112px; min-height: var(--mz-tap); padding: var(--mz-sp-1) var(--mz-sp-3); border-radius: var(--mz-radius-sm);
                     display: grid; text-align: center; font-weight: var(--mz-price-weight); font-size: var(--mz-fs-md); line-height: 1.4; }
.mz-landing__price-word { font-size: var(--mz-fs-xs); font-weight: 700; }
.mz-landing__price--buy { background: var(--mz-buy); color: var(--mz-on-buy); }
.mz-landing__price--sell { background: var(--mz-sell-bg); color: var(--mz-sell-ink); border: 1px solid var(--mz-sell-line); }
.mz-landing__board-note { color: var(--mz-board-muted); font-size: var(--mz-fs-sm); margin: 0; }
.mz-landing__section { display: grid; gap: var(--mz-sp-4); }
.mz-landing__h2 { font-size: var(--mz-fs-2xl); font-weight: var(--mz-title-weight); line-height: 1.5; margin: 0; }
.mz-landing__intro { color: var(--mz-muted); margin: 0; }
.mz-landing__grid { display: grid; gap: var(--mz-gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 0; padding: 0; list-style: none; }
.mz-landing__feature { display: grid; gap: var(--mz-sp-2); align-content: start; margin: 0; }
.mz-landing__h3 { font-size: var(--mz-fs-lg); font-weight: 700; margin: 0; }
.mz-landing__text { margin: 0; color: var(--mz-muted); }
.mz-landing__steps { margin: 0; padding-inline-start: var(--mz-sp-5); display: grid; gap: var(--mz-sp-3); }
.mz-landing__faq { display: grid; gap: var(--mz-sp-2); }
.mz-landing__q { background: var(--mz-surface); border: 1px solid var(--mz-line); border-radius: var(--mz-radius-sm); padding: var(--mz-sp-2) var(--mz-gap); }
.mz-landing__q-sum { font-weight: 700; cursor: pointer; min-height: var(--mz-tap); display: flex; align-items: center; }
.mz-landing__q-text { margin: 0 0 var(--mz-sp-2); color: var(--mz-muted); }
.mz-landing__contact { background: var(--mz-brand-soft); border: 1px solid var(--mz-brand-line); border-radius: var(--mz-radius); padding: var(--mz-sp-5) var(--mz-gap);
                       display: grid; gap: var(--mz-sp-3); justify-items: start; }
.mz-landing__phone { font-size: var(--mz-fs-xl); font-weight: 800; direction: ltr; unicode-bidi: isolate; }
.mz-landing__foot { --mz-focus: var(--mz-focus-head); background: var(--mz-head-bg); color: var(--mz-head-muted); padding: var(--mz-sp-5) var(--mz-gap); font-size: var(--mz-fs-sm); }
.mz-landing__foot-inner { max-width: 1040px; margin-inline: auto; display: flex; flex-wrap: wrap; gap: var(--mz-sp-3) var(--mz-sp-5); justify-content: space-between; align-items: center; }
.mz-landing__foot-links { display: flex; flex-wrap: wrap; gap: var(--mz-sp-2) var(--mz-sp-4); margin: 0; padding: 0; list-style: none; }
.mz-landing__foot-link { color: var(--mz-head-ink); }
@media (min-width: 860px) {
    .mz-landing__hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
    .mz-landing__title { font-size: var(--mz-fs-4xl); }
}
/* on a phone the in-page section links step aside: the header keeps the two sign-in buttons, the footer every page link */
@media (max-width: 520px) {
    .mz-landing__nav { display: none; }
    .mz-landing__price { min-width: 92px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}