/* ==========================================================================
   Madanchi design system.

   Ported from the "Industry" token sheet used by the 26 Claude Design screens,
   with three deliberate changes:

   1. Vazirmatn replaces Barlow / Barlow Condensed. Barlow has no Persian
      coverage; every Madanchi screen already overrode it. Self-hosted, because
      the server is in Iran and Google Fonts is not reliably reachable there.

   2. The accent amber is #FFB300, sampled from the supplied logo, not the
      mockups' #F5A800. The brand asset is the fixed point; the mockup value was
      an approximation, and a 10-point red difference is visible when the logo
      sits beside an amber button in the same header.

   3. Physical properties become logical ones. The source sheet used
      border-left, margin-left and text-align:left, which all break under RTL.
      Everything here is inline-start / inline-end so the same rules serve both
      directions, which matters for the Latin-script fragments (brand names,
      model numbers) embedded throughout Persian copy.
   ========================================================================== */

/* ---- fonts --------------------------------------------------------------- */
/* The variable font covers 100..900 in one 111 KB file. Static faces are listed
   after it as a fallback for browsers without variable-font support. */
@font-face {
    font-family: 'Vazirmatn';
    src: url('../fonts/vazirmatn/Vazirmatn-Variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn Static';
    src: url('../fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn Static';
    src: url('../fonts/vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn Static';
    src: url('../fonts/vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn Static';
    src: url('../fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Vazirmatn Static';
    src: url('../fonts/vazirmatn/Vazirmatn-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

/* ---- tokens -------------------------------------------------------------- */
:root {
    /* ground */
    --mn-bg: #f2f2f3;
    --mn-surface: #e9e9ea;
    --mn-text: #1d1f20;
    --mn-divider: rgba(29, 31, 32, .16);
    --mn-divider-soft: rgba(29, 31, 32, .10);
    --mn-muted: rgba(29, 31, 32, .55);
    --mn-muted-strong: rgba(29, 31, 32, .72);

    /* steel accent, the structural colour */
    --mn-accent: #5980a6;
    --mn-accent-100: #eef6ff;
    --mn-accent-200: #d6ebff;
    --mn-accent-300: #b5d9fd;
    --mn-accent-400: #94bce3;
    --mn-accent-500: #749dc4;
    --mn-accent-600: #597ea3;
    --mn-accent-700: #416180;
    --mn-accent-800: #2c455d;
    --mn-accent-900: #1d2d3d;

    /* brand amber, sampled from the logo. Reserved for the Madanchi Verified
       badge and primary calls to action. Used sparingly on purpose: it is the
       trust signal, so spending it on ordinary buttons devalues it. */
    --mn-brand: #ffb300;
    --mn-brand-ink: #1d1f20;
    --mn-brand-tint: rgba(255, 179, 0, .14);
    --mn-brand-line: rgba(255, 179, 0, .45);

    /* dark field for top bars, footers and hero overlays */
    --mn-navy: #1d2d3d;

    /* status: the five-colour system the admin screens already use */
    --mn-ok: #2f7d4f;
    --mn-ok-tint: rgba(47, 125, 79, .14);
    --mn-warn: #8a6425;
    --mn-warn-tint: rgba(180, 134, 58, .16);
    --mn-danger: #a8433a;
    --mn-danger-tint: rgba(168, 67, 58, .12);
    --mn-info: #41617f;
    --mn-neutral: #7a7a7d;

    /* spacing: the source sheet's 0.85 density scale, rounded to whole px so
       hairline borders stay crisp instead of landing on half pixels */
    --mn-1: 3px;
    --mn-2: 7px;
    --mn-3: 10px;
    --mn-4: 14px;
    --mn-6: 20px;
    --mn-8: 27px;
    --mn-12: 40px;

    /* Square corners are the system's defining trait. The variable exists so a
       one-off exception is visible in review rather than sprinkled inline. */
    --mn-radius: 0;

    /* Ink alphas, named by the job they do. They were literals, which meant a
       dark theme could not reach them: rgba(29,31,32,.16) is a hairline on a
       light surface and invisible on a dark one. */
    /* The ground of a recessed panel: an empty thumbnail, a well. In the
       light theme it is one step BELOW the card, in the dark theme one step
       ABOVE it, because on a dark card a darker hole reads as a broken
       image rather than as a frame with nothing in it. */
    --mn-surface-2: #f2f2f3;

    --mn-hover-tint: rgba(29, 31, 32, .07);
    --mn-press-tint: rgba(29, 31, 32, .14);
    --mn-placeholder: rgba(29, 31, 32, .40);
    --mn-border-hover: rgba(29, 31, 32, .45);
    --mn-mark: rgba(29, 31, 32, .55);
    --mn-paper: #fff;
    --mn-paper-ink: var(--mn-text);

    --mn-shadow-sm: 0 1px 2px rgba(43, 43, 45, .14);
    --mn-shadow-md: 0 3px 10px rgba(43, 43, 45, .16);
    --mn-shadow-lg: 0 12px 32px rgba(43, 43, 45, .22);

    --mn-font: 'Vazirmatn', 'Vazirmatn Static', system-ui, 'Segoe UI', Tahoma, sans-serif;
    --mn-container: 1300px;
}

/* ---- the public theme ----------------------------------------------------
   The client's second mockup set (eight full screens, 16/06/1405) is the
   specification for everything below, and it is not the dark site the first
   four photos suggested. Sampled from the PNG rather than guessed:

     bars, hero overlays, footer   #081e38   a near-black navy, not a grey-blue
     page ground                   #f5f6fa   cool, a shade off white
     cards                         #ffffff   white, lifted by a soft shadow
     dashboard ground              #001122   the ONE dark surface in the set
     amber                         #fac757   lighter than the logo's #ffb300

   Three structural consequences, each of which reverses something the system
   did before:

   1. The public site is LIGHT with dark chrome, not dark throughout. The
      navy is spent on the bars, the hero and the footer, where it frames the
      content; the content itself is white cards on a cool grey ground. The
      previous round painted the whole page navy, which is why the client's
      cards read as murky.

   2. Corners are ROUNDED. `--mn-radius: 0` was called the system's defining
      trait; the client's design is round on every surface, so the token moves
      to 12px here. It is set on the body rather than :root so /admin, which
      the mockups say nothing about, keeps its square corners.

   3. The user dashboard is dark. `body.mn-dash` is the mockup's eighth screen:
      navy ground, navy panels, amber accents. _Layout sets it for any view
      that declares a PanelKind, so the panel pages get it and the public
      browse pages do not.

   The amber moves from #ffb300 (the logo) to #fac757 (the mockups). They are
   the same colour family and the logo asset is unchanged; the mockup value is
   lighter and is what every button in the client's design uses, so on a page
   where a button and the logo sit in the same bar the button now matches the
   design and the mark stays the mark. */
body.mn-public {
    color-scheme: light;

    --mn-bg: #f5f6fa;
    --mn-surface: #ffffff;
    --mn-surface-2: #f5f6fa;
    --mn-text: #152741;

    --mn-divider: #e4e8f0;
    --mn-divider-soft: #eef1f6;
    --mn-muted: #6b7b90;
    --mn-muted-strong: #46586f;

    /* The structural blue. Deeper and less grey than the steel it replaces,
       so it sits in the same family as the navy chrome instead of beside it. */
    --mn-accent: #2f5f96;
    --mn-accent-100: #eff5fc;
    --mn-accent-200: #dde9f7;
    --mn-accent-300: #bed4ec;
    --mn-accent-400: #8fb1d8;
    --mn-accent-500: #5b87bb;
    --mn-accent-600: #3d6ba4;
    --mn-accent-700: #2b5085;
    --mn-accent-800: #1d3a63;
    --mn-accent-900: #142a48;

    --mn-brand: #fac757;
    --mn-brand-ink: #0d2036;
    --mn-price: #b57614;
    --mn-brand-tint: rgba(250, 199, 87, .18);
    --mn-brand-line: rgba(250, 199, 87, .55);

    --mn-navy: #081e38;

    --mn-ok: #1f8a52;
    --mn-ok-tint: rgba(31, 138, 82, .12);
    --mn-warn: #9a6b12;
    --mn-warn-tint: rgba(250, 199, 87, .22);
    --mn-danger: #c0392b;
    --mn-danger-tint: rgba(192, 57, 43, .10);
    --mn-info: #2f5f96;
    --mn-neutral: #6b7b90;

    --mn-hover-tint: rgba(21, 39, 65, .05);
    --mn-press-tint: rgba(21, 39, 65, .10);
    --mn-placeholder: #97a4b5;
    --mn-border-hover: #b9c4d3;
    --mn-mark: #6b7b90;
    --mn-paper: #ffffff;

    /* Radius, the trait that changed. One step for surfaces, a smaller one for
       controls, and a pill for the search bar and the filter chips. */
    --mn-radius: 12px;
    --mn-radius-sm: 9px;
    --mn-radius-lg: 16px;
    --mn-radius-pill: 999px;

    /* A shadow in this design is what separates a card from the ground, since
       the borders are nearly invisible. Tinted navy rather than grey: a neutral
       shadow on a cool ground reads as dirt. */
    --mn-shadow-sm: 0 1px 2px rgba(16, 32, 56, .06);
    --mn-shadow-md: 0 4px 16px rgba(16, 32, 56, .08);
    --mn-shadow-lg: 0 16px 40px rgba(16, 32, 56, .12);
}

/* ---- the dashboard theme -------------------------------------------------
   Screen 8. The panel pages are the one dark surface in the client's set, and
   they earn it: a dashboard is a private workspace, and the navy separates it
   from the public site the user just came from. Everything below is the same
   token set with the grounds inverted, so no component rule is duplicated. */
body.mn-public.mn-dash {
    color-scheme: dark;

    --mn-bg: #001122;
    --mn-surface: #08213c;
    --mn-surface-2: #0c2a48;
    --mn-text: #eaf0f7;

    --mn-divider: rgba(255, 255, 255, .12);
    --mn-divider-soft: rgba(255, 255, 255, .07);
    --mn-muted: rgba(234, 240, 247, .60);
    --mn-muted-strong: rgba(234, 240, 247, .80);

    --mn-accent: #6ea8dd;
    --mn-accent-100: #0c2540;
    --mn-accent-200: #123152;
    --mn-accent-300: #1b4670;
    --mn-accent-400: #3d6ba4;
    --mn-accent-500: #5b8fc7;
    --mn-accent-600: #7fadd9;
    --mn-accent-700: #a5c8e8;
    --mn-accent-800: #c8ddf2;
    --mn-accent-900: #e6f0fa;

    --mn-navy: #001122;

    --mn-ok: #4fc98a;
    --mn-ok-tint: rgba(79, 201, 138, .16);
    --mn-warn: #fac757;
    --mn-warn-tint: rgba(250, 199, 87, .18);
    --mn-price: #fac757;
    --mn-danger: #e8776b;
    --mn-danger-tint: rgba(232, 119, 107, .16);
    --mn-info: #6ea8dd;
    --mn-neutral: #93a3b5;

    --mn-hover-tint: rgba(255, 255, 255, .06);
    --mn-press-tint: rgba(255, 255, 255, .12);
    --mn-placeholder: rgba(234, 240, 247, .38);
    --mn-border-hover: rgba(255, 255, 255, .40);
    --mn-mark: rgba(234, 240, 247, .55);
    --mn-paper: #08213c;

    --mn-shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
    --mn-shadow-md: 0 4px 16px rgba(0, 0, 0, .45);
    --mn-shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);
}

/* The map frame used to carry a light palette on the dark dashboard for
   the sake of its raster. The raster is gone (see the map block at the foot
   of this file); the frame is navy on every ground. */

/* Printing a dark page wastes a cartridge and reads badly. The dashboard
   reverts to the light tokens on paper; the public site is already light. */
@media print {
    body.mn-public.mn-dash {
        color-scheme: light;
        --mn-bg: #fff;
        --mn-surface: #fff;
        --mn-surface-2: #f5f6fa;
        --mn-text: #152741;
        --mn-muted: #6b7b90;
        --mn-muted-strong: #46586f;
        --mn-divider: #e4e8f0;
        --mn-divider-soft: #eef1f6;
        --mn-paper: #fff;
    }
}

/* ---- the client's component skin -----------------------------------------
   Scoped to .mn-public so /admin keeps the flat, square, grey system it was
   built with. Everything here is a restatement of a shared component in the
   client's design language: round, white, lifted, with the navy spent on
   chrome and the amber on exactly one call to action per view. */

/* The single navy bar of every mockup screen. The nav was the page ground with
   a rule under it; it is now the dark band the logo and the two buttons sit
   in, and the active link is marked with the amber underline the design uses
   in six places. */
body.mn-public .mn-nav {
    background: var(--mn-navy);
    border-bottom: 0;
    color: #fff;
}
body.mn-public .mn-nav-links a {
    color: rgba(255, 255, 255, .82);
    padding-block: 6px;
}
body.mn-public .mn-nav-links a:hover { color: #fff; box-shadow: none; }
body.mn-public .mn-nav-links a[aria-current="page"] {
    color: var(--mn-brand);
    box-shadow: inset 0 -2px 0 var(--mn-brand);
}

/* The support strip above the nav is not in the client's design: their header
   is one bar. It stays in the markup for the phone number, which ماده 8 wants
   reachable, but it is folded into the same navy so the header reads as a
   single block rather than as two. */
body.mn-public .mn-topbar {
    background: var(--mn-navy);
    color: rgba(255, 255, 255, .55);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* Controls. The pill is the design's default button shape; the amber is
   filled, the secondary is an outline on the navy, and «همه فیلترها» and
   «مشاهده پروفایل» are the filled navy the mockups use for a neutral action
   that still has to be found. */
body.mn-public .mn-btn {
    border-radius: var(--mn-radius-sm);
    font-weight: 600;
}
body.mn-public .mn-btn-brand {
    background: var(--mn-brand);
    border-color: var(--mn-brand);
    color: var(--mn-brand-ink);
    box-shadow: 0 2px 8px rgba(250, 199, 87, .35);
}
body.mn-public .mn-btn-brand:hover  { background: #f6bb3c; border-color: #f6bb3c; }
body.mn-public .mn-btn-brand:active { background: #eaad2a; border-color: #eaad2a; }

body.mn-public .mn-btn-navy {
    background: var(--mn-navy);
    border-color: var(--mn-navy);
    color: #fff;
}
body.mn-public .mn-btn-navy:hover  { background: #0d2b4c; border-color: #0d2b4c; }
body.mn-public .mn-btn-navy:active { background: #061729; border-color: #061729; }

/* On the navy bar an outline button has to be drawn against the bar, not
   against the page: the divider token is a light-theme hairline and vanishes
   there. */
body.mn-public .mn-nav .mn-btn-secondary,
body.mn-public .mn-topbar .mn-btn-secondary {
    border-color: rgba(255, 255, 255, .30);
    color: #fff;
}
body.mn-public .mn-nav .mn-btn-secondary:hover { background: rgba(255, 255, 255, .10); }

.mn-btn-pill { border-radius: var(--mn-radius-pill); padding-inline: var(--mn-6); }

/* Cards. The border is nearly invisible in the design and the shadow does the
   separating, so a card that was a hairline box becomes a white surface that
   lifts off the ground. */
body.mn-public .mn-card {
    background: var(--mn-surface);
    border-color: var(--mn-divider);
    box-shadow: var(--mn-shadow-sm);
}
body.mn-public .mn-card:hover { box-shadow: var(--mn-shadow-md); }

body.mn-public .mn-tag { border-radius: var(--mn-radius-pill); padding-inline: var(--mn-3); }
body.mn-public .mn-input { border-radius: var(--mn-radius-sm); min-height: 42px; }

/* A section heading in this design is the amber rule, the title, and the
   «all» link pushed to the far end. It appears on six of the eight screens. */
.mn-sechead {
    display: flex;
    align-items: center;
    gap: var(--mn-3);
    margin-bottom: var(--mn-4);
}
.mn-sechead h1, .mn-sechead h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
}
.mn-sechead::before {
    content: "";
    flex: none;
    width: 30px;
    height: 3px;
    border-radius: 2px;
    background: var(--mn-brand);
    order: -1;
}
.mn-sechead-all {
    margin-inline-start: auto;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--mn-muted-strong);
}
.mn-sechead-all:hover { color: var(--mn-accent); }

/* The pill search field the design puts in every hero: a white rounded bar
   with the amber button at the inline start. */
.mn-searchpill {
    display: flex;
    align-items: center;
    gap: var(--mn-2);
    background: #fff;
    border-radius: var(--mn-radius-pill);
    padding: 5px;
    box-shadow: var(--mn-shadow-md);
}
.mn-searchpill input {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    padding-inline: var(--mn-4);
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: #152741;
}
.mn-searchpill input::placeholder { color: #97a4b5; }
.mn-searchpill button {
    /* Last in the row: the design puts the amber square at the end of the
       pill. The input is first in the DOM so a keyboard reaches the field
       before the submit, which is the order that matters. */
    order: 1;
    flex: none;
    width: 46px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--mn-radius-sm);
    background: var(--mn-brand);
    color: var(--mn-brand-ink);
    cursor: pointer;
}
.mn-searchpill button:hover { background: #f6bb3c; }

/* The filter rail. Screens 2, 3, 4 and 7 all carry it: a white card at the
   inline start of the results, sections separated by hairlines, each section
   opened by the amber marker. */
.mn-rail {
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider);
    border-radius: var(--mn-radius);
    box-shadow: var(--mn-shadow-sm);
    padding: var(--mn-4);
}
.mn-rail + .mn-rail { margin-top: var(--mn-4); }
.mn-rail h3 {
    display: flex;
    align-items: center;
    gap: var(--mn-2);
    margin: 0 0 var(--mn-3);
    font-size: 14px;
    font-weight: 700;
}
.mn-rail h3::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mn-brand);
}
.mn-rail-list { list-style: none; margin: 0; padding: 0; }
.mn-rail-list li + li { border-top: 1px solid var(--mn-divider-soft); }
.mn-rail-list a, .mn-rail-list label {
    display: flex;
    align-items: center;
    gap: var(--mn-2);
    padding: var(--mn-2) 0;
    font-size: 13px;
    color: var(--mn-muted-strong);
    cursor: pointer;
}
.mn-rail-list a:hover { color: var(--mn-accent); }
.mn-rail-count { margin-inline-start: auto; font-size: 11.5px; color: var(--mn-muted); }

/* The tab strip: «همه · معادن · واگذاری · مشارکت · سرمایه‌گذاری» on screen 3,
   the four data tabs on screen 6, the four network tabs on screen 7. */
.mn-tabs {
    display: flex;
    gap: var(--mn-2);
    flex-wrap: wrap;
    align-items: center;
}
.mn-tabs a, .mn-tabs button {
    padding: var(--mn-2) var(--mn-4);
    border: 0;
    border-radius: var(--mn-radius-sm);
    background: transparent;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mn-muted-strong);
    cursor: pointer;
}
.mn-tabs a:hover, .mn-tabs button:hover { background: var(--mn-hover-tint); }
.mn-tabs [aria-current="page"], .mn-tabs [aria-selected="true"] {
    color: var(--mn-accent-800);
    background: var(--mn-surface);
    box-shadow: inset 0 -2px 0 var(--mn-brand);
}

/* The row card: photo at the inline start, facts in the middle, the amber
   action at the end. Screens 3, 4 and 7 are lists of this. */
.mn-rowcard {
    display: flex;
    gap: var(--mn-4);
    padding: var(--mn-4);
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider);
    border-radius: var(--mn-radius);
    box-shadow: var(--mn-shadow-sm);
}
.mn-rowcard + .mn-rowcard { margin-top: var(--mn-3); }
.mn-rowcard:hover { box-shadow: var(--mn-shadow-md); }
.mn-rowcard-media {
    flex: none;
    width: 168px;
    aspect-ratio: 4 / 3;
    border-radius: var(--mn-radius-sm);
    overflow: hidden;
    background: var(--mn-surface-2);
}
.mn-rowcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-rowcard-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--mn-2); }
.mn-rowcard-body h3 { margin: 0; font-size: 16px; font-weight: 700; }
/* The two-column fact grid inside the card, each fact opened by its icon. */
.mn-rowcard-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--mn-2) var(--mn-4);
    font-size: 12.5px;
    color: var(--mn-muted-strong);
}
.mn-rowcard-facts > span { display: flex; align-items: center; gap: 5px; min-width: 0; }
.mn-rowcard-facts svg { flex: none; color: var(--mn-brand); }

.mn-rowcard-body h3 a { color: inherit; text-decoration: none; }
.mn-rowcard-body h3 a:hover { color: var(--mn-accent); }
/* The frame with nothing in it. A grey box with the glyph, not a photograph of
   a different mine: the picture on this card is a claim about this project. */
.mn-rowcard-noimg { color: var(--mn-muted); display: grid; place-items: center; width: 100%; height: 100%; }
/* The button repeats the title's link for the pointer, so it is out of the tab
   order and hidden from the reader that already heard the title. */
.mn-rowcard-cta { align-self: flex-start; margin-top: var(--mn-1); }

.mn-opplist { list-style: none; margin: 0; padding: 0; }

@media (max-width: 700px) {
    .mn-rowcard { flex-direction: column; }
    .mn-rowcard-media { width: 100%; aspect-ratio: 16 / 9; }
}

/* The closing band: navy, a photo bleeding from one end, a heading with the
   amber rule under it and one amber button. Screens 1 and 5. */
.mn-ctaband {
    position: relative;
    overflow: hidden;
    border-radius: var(--mn-radius);
    background: var(--mn-navy);
    color: #fff;
    padding: var(--mn-8) var(--mn-6);
}
/* At the END edge: the heading starts at the start edge, and this is an RTL
   document, so inset-inline-start would put the photograph under the words. */
.mn-ctaband > img {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 38%;
    height: 100%;
    object-fit: cover;
    opacity: .38;
    -webkit-mask-image: linear-gradient(to right, #000 40%, transparent 100%);
            mask-image: linear-gradient(to right, #000 40%, transparent 100%);
}
.mn-ctaband-body { position: relative; z-index: 1; }
.mn-ctaband h2 { margin: 0 0 var(--mn-2); font-size: clamp(19px, 2.4vw, 26px); font-weight: 800; }
.mn-ctaband .mn-rule { width: 54px; height: 3px; border-radius: 2px; background: var(--mn-brand); margin-bottom: var(--mn-4); }

/* ---- base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--mn-bg);
    color: var(--mn-text);
    font-family: var(--mn-font);
    font-size: 15px;
    line-height: 1.75;          /* Persian needs more leading than Latin */
    font-weight: 400;
    /* Sticky footer. A short page (login, OTP, an empty result set) used to
       leave the navy footer floating mid-screen with the page background
       below it. The shell is a column that fills the viewport and <main>
       takes the slack, so the footer sits on the fold or lower, never above
       it. dvh first for mobile browsers whose toolbars change the viewport;
       vh is the fallback. The admin shell overrides display with its own
       grid, so this only governs the public layout. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

body > header,
body > nav,
body > footer { flex: none; }

body > main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mn-font);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.01em;
    margin: 0 0 var(--mn-2);
}

h1 { font-size: 29px; }
h2 { font-size: 23px; }
h3 { font-size: 19px; }
h4 { font-size: 16px; }
h5 { font-size: 14.5px; }
h6 { font-size: 12.5px; letter-spacing: .06em; }

p { margin: 0 0 var(--mn-3); }

a {
    color: var(--mn-accent-700);
    text-decoration: none;
    text-underline-offset: 3px;
}
a:hover { color: var(--mn-accent); }

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }

:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--mn-accent);
    outline-offset: 2px;
}
::selection { background: rgba(89, 128, 166, .3); }

.mn-container {
    max-width: var(--mn-container);
    margin-inline: auto;
    padding-inline: var(--mn-4);
}

.mn-muted { color: var(--mn-muted); }

/* Latin fragments inside Persian copy: brand names, model codes, invoice
   numbers. Without isolation the bidi algorithm reorders "PC300-8" against the
   surrounding text and it renders as "8-PC300". */
bdi, .mn-ltr {
    unicode-bidi: isolate;
}
.mn-num {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}

/* ---- blueprint frame ----------------------------------------------------- */
/* The registration marks that make a card read as a drawn object rather than a
   filled box. Direction-agnostic: the marks sit at physical corners by design. */
.mn-blueprint {
    position: relative;
    border: 1px solid var(--mn-divider);
    border-radius: var(--mn-radius);
    background: transparent;
}

.mn-blueprint > .corner {
    position: absolute;
    width: 11px;
    height: 11px;
    color: var(--mn-mark);
    pointer-events: none;
}
.mn-blueprint > .corner::before,
.mn-blueprint > .corner::after {
    content: "";
    position: absolute;
    background: currentColor;
}
.mn-blueprint > .corner::before { inset-inline-start: 5px; top: 0; width: 1px; height: 100%; }
.mn-blueprint > .corner::after  { top: 5px; inset-inline-start: 0; width: 100%; height: 1px; }
.mn-blueprint > .corner.tl { top: -6px; left: -6px; }
.mn-blueprint > .corner.tr { top: -6px; right: -6px; }
.mn-blueprint > .corner.bl { bottom: -6px; left: -6px; }
.mn-blueprint > .corner.br { bottom: -6px; right: -6px; }

/* Duotone image wrapper: desaturates the photo and washes it in the accent, so
   mixed-source photography reads as one set. */
.mn-duotone { position: relative; overflow: hidden; }
.mn-duotone::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--mn-accent);
    mix-blend-mode: color;
    pointer-events: none;
}

/* ---- buttons ------------------------------------------------------------- */
.mn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--mn-font);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    color: var(--mn-text);
    background: transparent;
    border: 1px solid var(--mn-divider);
    border-radius: var(--mn-radius);
    padding: var(--mn-2) var(--mn-4);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.mn-btn svg { display: block; flex: none; }
.mn-btn:disabled, .mn-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.mn-btn-primary {
    background: var(--mn-accent);
    border-color: var(--mn-accent);
    color: var(--mn-bg);
}
.mn-btn-primary:hover  { background: var(--mn-accent-600); border-color: var(--mn-accent-600); color: var(--mn-bg); }
.mn-btn-primary:active { background: var(--mn-accent-700); border-color: var(--mn-accent-700); }

/* The brand button. One per view at most. */
.mn-btn-brand {
    background: var(--mn-brand);
    border-color: var(--mn-brand);
    color: var(--mn-brand-ink);
}
.mn-btn-brand:hover  { background: #f0a800; border-color: #f0a800; color: var(--mn-brand-ink); }
.mn-btn-brand:active { background: #e09e00; border-color: #e09e00; }

.mn-btn-secondary:hover  { background: var(--mn-hover-tint); }
.mn-btn-secondary:active { background: var(--mn-press-tint); }

.mn-btn-ghost {
    border-color: transparent;
    color: var(--mn-accent-700);
    padding-inline: var(--mn-2);
}
.mn-btn-ghost:hover { background: rgba(89, 128, 166, .10); }

.mn-btn-icon { width: 36px; height: 36px; padding: 0; }
.mn-btn-block { width: 100%; }
.mn-btn-sm { font-size: 12.5px; padding: 6px var(--mn-3); }

/* ---- tags and badges ----------------------------------------------------- */
.mn-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.6;
    padding: 2px var(--mn-2);
    border-radius: var(--mn-radius);
    background: var(--mn-surface);
    color: var(--mn-muted-strong);
    white-space: nowrap;
}
.mn-tag-accent  { background: var(--mn-accent-100); color: var(--mn-accent-800); }
.mn-tag-outline { background: transparent; border: 1px solid var(--mn-accent); color: var(--mn-accent-700); }
.mn-tag-ok      { background: var(--mn-ok-tint);     color: var(--mn-ok); }
.mn-tag-warn    { background: var(--mn-warn-tint);   color: var(--mn-warn); }
.mn-tag-danger  { background: var(--mn-danger-tint); color: var(--mn-danger); }

/* Madanchi Verified. The single most meaningful mark on the platform, so it is
   the only element that gets the solid brand fill by default. */
.mn-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--mn-brand);
    color: var(--mn-brand-ink);
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    white-space: nowrap;
}

/* ---- forms --------------------------------------------------------------- */
.mn-field { display: block; margin-bottom: var(--mn-3); }
.mn-field > label {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    margin-bottom: 5px;
    color: var(--mn-muted-strong);
}

.mn-input {
    width: 100%;
    min-height: 38px;
    padding: 6px var(--mn-3);
    font: inherit;
    font-size: 14px;
    color: var(--mn-text);
    caret-color: var(--mn-accent);
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider);
    border-radius: var(--mn-radius);
}
.mn-input::placeholder { color: var(--mn-placeholder); }
.mn-input:hover { border-color: var(--mn-border-hover); }
.mn-input:focus-visible { border-color: var(--mn-accent); outline-offset: 0; }
textarea.mn-input { min-height: 96px; resize: vertical; }

/* Numeric and phone inputs stay LTR even inside an RTL form, because a phone
   number or a price typed right-to-left is unreadable. */
.mn-input-ltr { direction: ltr; text-align: start; }

.mn-field-error { color: var(--mn-danger); font-size: 12px; margin-top: 4px; }
.mn-input-invalid, .input-validation-error { border-color: var(--mn-danger); }

/* ---- tables -------------------------------------------------------------- */
.mn-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mn-table th {
    text-align: start;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mn-muted);
    padding: var(--mn-2) var(--mn-3);
    border-bottom: 1px solid var(--mn-divider);
    white-space: nowrap;
}
.mn-table td {
    padding: var(--mn-3);
    border-bottom: 1px solid var(--mn-divider-soft);
    vertical-align: middle;
}
.mn-table tbody tr:hover { background: rgba(89, 128, 166, .07); }
.mn-table-numeric { text-align: end; font-variant-numeric: tabular-nums; }

/* A table is the one place horizontal scroll is allowed; the page itself must
   never scroll sideways. */
.mn-table-wrap { overflow-x: auto; }

/* ---- cards --------------------------------------------------------------- */
.mn-card {
    border: 1px solid var(--mn-divider);
    border-radius: var(--mn-radius);
    background: transparent;
}
.mn-card-pad { padding: var(--mn-4); }
.mn-elev-sm { box-shadow: var(--mn-shadow-sm); }
.mn-elev-md { box-shadow: var(--mn-shadow-md); }
.mn-elev-lg { box-shadow: var(--mn-shadow-lg); }

/* ---- empty state --------------------------------------------------------- */
/* A marketplace launches with nothing in it. Every list needs a designed zero
   state or day one looks broken. */
.mn-empty {
    text-align: center;
    padding: var(--mn-12) var(--mn-4);
    color: var(--mn-muted);
}
.mn-empty svg { margin-inline: auto; margin-bottom: var(--mn-3); opacity: .5; }
.mn-empty-title { font-size: 15px; font-weight: 600; color: var(--mn-text); margin-bottom: var(--mn-1); }

/* ---- utilities ----------------------------------------------------------- */
.mn-hr { height: 1px; border: 0; margin: var(--mn-4) 0; background: var(--mn-divider); }
.mn-stack > * + * { margin-top: var(--mn-3); }
.mn-row { display: flex; align-items: center; gap: var(--mn-3); }
.mn-row-end { margin-inline-start: auto; }
.mn-grid { display: grid; gap: var(--mn-4); }
.mn-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- htmx ---------------------------------------------------------------- */
/* Any element mid-request dims slightly, so a filter change reads as "working"
   without needing a spinner per component. */
.htmx-request, .htmx-request.mn-input { opacity: .6; transition: opacity .1s ease; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-flex; }

/* ---- print --------------------------------------------------------------- */
@media print {
    .mn-no-print { display: none !important; }
    body { background: #fff; }
}

/* ---- chrome: top bar, nav, footer ---------------------------------------- */
.mn-topbar {
    background: var(--mn-navy);
    color: rgba(255, 255, 255, .72);
}
.mn-topbar a:hover { color: #fff; }

.mn-nav {
    background: var(--mn-bg);
    border-bottom: 1px solid var(--mn-divider);
}
.mn-nav-links a { color: var(--mn-text); padding-block: 4px; }
.mn-nav-links a:hover,
.mn-nav-links a[aria-current="page"] {
    color: var(--mn-text);
    box-shadow: inset 0 -2px 0 var(--mn-brand);
}

/* ---- toast ---------------------------------------------------------------
   Confirmation for an action whose result is otherwise invisible: saving a
   search reloads the same page, so without this the user cannot tell a success
   from a no-op. Bottom-start rather than top, where it cannot cover the header
   or the primary button of the form just submitted. */
.mn-toast {
    position: fixed;
    inset-block-end: var(--mn-6);
    inset-inline-start: var(--mn-6);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: var(--mn-3);
    max-width: min(420px, calc(100vw - 2 * var(--mn-6)));
    padding: var(--mn-3) var(--mn-4);
    border-radius: var(--mn-radius);
    border-inline-start: 3px solid currentColor;
    background: var(--mn-paper);
    box-shadow: var(--mn-shadow-lg);
    font-size: 13.5px;
    line-height: 1.6;
}
.mn-toast > span { color: var(--mn-text); }
.mn-toast-ok    { color: var(--mn-ok); }
.mn-toast-error { color: var(--mn-danger); }

.mn-toast-close {
    margin-inline-start: auto;
    padding: 2px;
    border: 0;
    background: none;
    color: var(--mn-muted);
    cursor: pointer;
    line-height: 0;
}
.mn-toast-close:hover { color: var(--mn-text); }

/* Without JavaScript, Alpine never runs and the toast simply stays for the
   life of the page. TempData is already consumed, so it is gone on the next
   navigation either way. */
@media (prefers-reduced-motion: reduce) {
    .mn-toast { transition: none; }
}

.mn-footer {
    background: var(--mn-navy);
    color: rgba(255, 255, 255, .6);
    padding-block: var(--mn-12) var(--mn-6);
    margin-top: var(--mn-12);
}
.mn-footer a { color: inherit; text-decoration: none; }
.mn-footer a:hover { color: var(--mn-brand); }

/* The brand block takes twice the width of a link column, which is what stops
   the four of them from reading as one undifferentiated row of links. */
.mn-footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: var(--mn-8) var(--mn-6);
    font-size: 12.5px;
}
@media (max-width: 860px) { .mn-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .mn-footer-grid { grid-template-columns: minmax(0, 1fr); } }

.mn-footer-brand p { margin: var(--mn-3) 0 0; line-height: 2; max-width: 44ch; }
.mn-footer-support { color: rgba(255, 255, 255, .78); }

.mn-footer-col { display: flex; flex-direction: column; gap: var(--mn-2); }
.mn-footer-col h2 {
    margin: 0 0 var(--mn-1);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.mn-footer-legal {
    margin-top: var(--mn-8);
    padding-top: var(--mn-4);
    border-top: 1px solid rgba(255, 255, 255, .10);
    font-size: 12px;
}

/* ---- responsive ---------------------------------------------------------- */
/* Mobile layouts are goodwill, not a contract obligation, but B2B users will
   open this on a phone, so the chrome at least has to hold together. */
@media (max-width: 900px) {
    /* The links used to be display:none here, which left a phone with no
       navigation at all: from a listing page the only control was the logo.
       بند 1 names these eight categories as the way into the platform, so
       they move to a scrollable strip under the logo instead of disappearing. */
    .mn-nav .mn-container { flex-wrap: wrap; padding-block: var(--mn-2); }
    .mn-nav-links {
        order: 3;
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: var(--mn-4);
        padding-block: var(--mn-2);
        border-top: 1px solid var(--mn-divider-soft);
        /* Momentum scrolling without a visible bar: the strip is obviously
           scrollable because the last item is cut off at the edge. */
        scrollbar-width: none;
    }
    .mn-nav-links::-webkit-scrollbar { display: none; }
    .mn-nav-links a { white-space: nowrap; flex: none; }
}
@media (max-width: 640px) {
    body { font-size: 14.5px; }
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    .mn-container { padding-inline: var(--mn-3); }

    .mn-topbar .mn-container { font-size: 11.5px; gap: var(--mn-2); }
    /* The support number and the نشان اعتبار pill both survive; the
       separator and the guide link are the ones a phone can spare. */
    .mn-topbar .mn-container > span[style*="opacity"] { display: none; }

    /* «ثبت آگهی» is the primary action and keeps its full label; the user
       chip drops to the avatar so the two fit on one line. */
    .mn-usermenu-btn bdi { display: none; }
}

/* ---- auth screens (design screen 06) ------------------------------------- */
.mn-auth-wrap { padding-block: var(--mn-12); display: flex; justify-content: center; }
.mn-auth-card { padding: var(--mn-8); width: 100%; max-width: 440px; background: var(--mn-bg); }
.mn-auth-wide .mn-auth-card { max-width: 860px; }
.mn-auth-title { font-size: 22px; margin-bottom: var(--mn-2); }
.mn-auth-subtitle { font-size: 18px; margin-top: var(--mn-8); margin-bottom: var(--mn-2); }
.mn-auth-lead { font-size: 13.5px; margin-bottom: var(--mn-6); }
.mn-auth-legal { font-size: 12px; color: var(--mn-muted); margin-top: var(--mn-4); margin-bottom: 0; }
.mn-auth-banner { display: block; padding: var(--mn-2) var(--mn-3); margin-bottom: var(--mn-3); }
.mn-auth-resend { margin-top: var(--mn-3); text-align: center; }
.mn-auth-submit { margin-top: var(--mn-6); }

/* The code input. Wide tracking and a large size because a six-digit code is
   read back off a phone screen one glyph at a time. */
.mn-otp-input {
    font-size: 22px;
    letter-spacing: .5em;
    text-align: center;
    padding-inline-start: .5em;   /* offset the trailing letter-space */
    font-variant-numeric: tabular-nums;
}

/* ---- stepper ------------------------------------------------------------- */
.mn-stepper {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--mn-3);
    padding: 0;
    margin: 0 0 var(--mn-6);
    font-size: 12.5px;
}
.mn-step { display: flex; align-items: center; gap: 6px; color: var(--mn-muted); }
.mn-step + .mn-step::before {
    content: "";
    width: 18px;
    height: 1px;
    background: var(--mn-divider);
    margin-inline-end: 6px;
}
.mn-step-mark {
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border: 1px solid var(--mn-divider);
    font-size: 11px; font-weight: 600;
    flex: none;
}
.mn-step-current { color: var(--mn-text); font-weight: 600; }
.mn-step-current .mn-step-mark { border-color: var(--mn-brand); background: var(--mn-brand); color: var(--mn-brand-ink); }
.mn-step-done .mn-step-mark { border-color: var(--mn-ok); background: var(--mn-ok); color: #fff; }
.mn-step-done { color: var(--mn-muted-strong); }

/* ---- choice grid: purposes and roles ------------------------------------- */
.mn-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--mn-2);
}
.mn-choice-grid-roles { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

.mn-choice {
    display: flex;
    align-items: flex-start;
    gap: var(--mn-2);
    padding: var(--mn-3);
    border: 1px solid var(--mn-divider);
    cursor: pointer;
    font-size: 13.5px;
    line-height: 1.7;
    transition: border-color .15s ease, background .15s ease;
}
.mn-choice:hover { border-color: var(--mn-accent); background: rgba(89, 128, 166, .05); }
.mn-choice input { margin-top: 5px; accent-color: var(--mn-accent); flex: none; }

/* :has lets the whole card show selection without any JavaScript, which keeps
   the no-Node-build rule intact. */
.mn-choice:has(input:checked) {
    border-color: var(--mn-brand);
    background: var(--mn-brand-tint);
}
.mn-choice:has(input:focus-visible) { outline: 2px solid var(--mn-accent); outline-offset: 2px; }

.mn-choice-role span { display: block; }
.mn-choice-title { font-weight: 600; }
.mn-choice-hint { font-size: 11.5px; color: var(--mn-muted); }

/* ---- development notice -------------------------------------------------- */
.mn-dev-note {
    border: 1px dashed var(--mn-warn);
    background: var(--mn-warn-tint);
    color: var(--mn-warn);
    padding: var(--mn-3);
    margin-bottom: var(--mn-4);
    font-size: 13px;
}
.mn-dev-code { font-size: 20px; font-weight: 700; letter-spacing: .15em; }
.mn-dev-note-why { font-size: 11.5px; margin-top: var(--mn-1); opacity: .85; }

/* ---- listing wizard (design screen 15) ----------------------------------- */
.mn-wizard { padding-block: var(--mn-8); max-width: 900px; }
.mn-wizard-head { margin-bottom: var(--mn-6); }

/* Deliberately quiet: leaving is always available but never the suggestion,
   so it must not compete with «ادامه». */
.mn-wizard-exit {
    margin-inline-start: var(--mn-4);
    font-size: 12px;
    color: var(--mn-muted);
    text-decoration: none;
    white-space: nowrap;
}
.mn-wizard-exit:hover {
    color: var(--mn-text);
    text-decoration: underline;
}
.mn-wizard-kicker {
    font: 600 11px/1 var(--mn-font);
    letter-spacing: .12em;
    color: var(--mn-accent);
}
.mn-wizard-title { font-size: 22px; margin-bottom: var(--mn-2); }
.mn-wizard-subtitle {
    font-size: 17px;
    margin-top: var(--mn-8);
    margin-bottom: var(--mn-3);
    padding-bottom: var(--mn-2);
    border-bottom: 1px solid var(--mn-divider);
}
.mn-wizard-actions {
    display: flex;
    gap: var(--mn-3);
    justify-content: flex-end;
    margin-top: var(--mn-8);
    padding-top: var(--mn-4);
    border-top: 1px solid var(--mn-divider);
}

.mn-wizard-steps {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--mn-4);
    padding: 0;
    margin: 0;
    font-size: 12.5px;
    flex-wrap: wrap;
}
.mn-wstep { display: flex; align-items: center; gap: 6px; color: var(--mn-muted); }
.mn-wstep-mark {
    width: 24px; height: 24px;
    display: grid; place-items: center;
    border: 1px solid var(--mn-divider);
    font-size: 11px; font-weight: 600; flex: none;
}
.mn-wstep-current { color: var(--mn-text); font-weight: 600; }
.mn-wstep-current .mn-wstep-mark {
    border-color: var(--mn-brand); background: var(--mn-brand); color: var(--mn-brand-ink);
}
.mn-wstep-done .mn-wstep-mark { border-color: var(--mn-ok); background: var(--mn-ok); color: #fff; }

.mn-grid-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mn-field-hint { font-size: 11.5px; color: var(--mn-muted); margin-top: 4px; }
.mn-required { color: var(--mn-danger); }
.mn-danger { color: var(--mn-danger); }
.mn-choice-inline { display: inline-flex; align-items: center; margin-bottom: var(--mn-3); }

/* ---- media tiles --------------------------------------------------------- */
.mn-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--mn-3);
    margin-bottom: var(--mn-4);
}
.mn-media-tile {
    position: relative;
    margin: 0;
    border: 1px solid var(--mn-divider);
    background: var(--mn-surface);
}
.mn-media-tile img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.mn-media-cover { border-color: var(--mn-brand); border-width: 2px; }
.mn-media-badge {
    position: absolute;
    inset-block-start: var(--mn-2);
    inset-inline-start: var(--mn-2);
    background: var(--mn-brand);
    color: var(--mn-brand-ink);
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
}
.mn-media-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--mn-1);
    padding: var(--mn-1) var(--mn-2);
    border-top: 1px solid var(--mn-divider);
}

/* ---- upload drop zone ---------------------------------------------------- */
.mn-upload { margin-bottom: var(--mn-4); }
.mn-upload-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mn-1);
    padding: var(--mn-8);
    border: 1px dashed var(--mn-divider);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, background .15s ease;
}
.mn-upload-drop:hover { border-color: var(--mn-accent); background: rgba(89, 128, 166, .04); }
.mn-upload-drop input[type=file] { display: none; }
.mn-upload-title { font-weight: 600; font-size: 14px; }
.mn-upload-hint { font-size: 12px; color: var(--mn-muted); }

.mn-doc-row {
    padding: var(--mn-3);
    border-bottom: 1px solid var(--mn-divider-soft);
    font-size: 13.5px;
}
.mn-doc-row:last-child { border-bottom: 0; }

/* ---- review -------------------------------------------------------------- */
.mn-review {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: var(--mn-6);
    align-items: start;
    border: 1px solid var(--mn-divider);
    padding: var(--mn-4);
}
.mn-review-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mn-review-price { font-size: 20px; font-weight: 700; margin-bottom: var(--mn-3); }
.mn-review-note { padding: var(--mn-4); margin-top: var(--mn-6); }
.mn-review-errors.validation-summary-errors {
    display: block;
    border: 1px solid var(--mn-danger);
    background: var(--mn-danger-tint);
    padding: var(--mn-3);
    margin-bottom: var(--mn-4);
}
.mn-review-errors ul { margin: 0; padding-inline-start: var(--mn-4); }

.mn-success-mark {
    width: 56px; height: 56px;
    margin: 0 auto var(--mn-4);
    display: grid; place-items: center;
    background: var(--mn-ok-tint);
    color: var(--mn-ok);
    border-radius: 50%;
}

@media (max-width: 700px) {
    .mn-review { grid-template-columns: 1fr; }
}

/* ---- admin shell (design screens 12-14, 21-22) --------------------------- */
.mn-admin { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }

.mn-admin-side {
    background: var(--mn-navy);
    color: rgba(255, 255, 255, .72);
    display: flex;
    flex-direction: column;
    padding: var(--mn-4) 0;
    /* Sticky, not static. The moderation workspace is taller than the viewport,
       so a static sidebar scrolls away and leaves the reviewer with a dark empty
       column and no navigation exactly where they spend the most time. Its own
       overflow-y keeps a long nav reachable on a short screen. */
    position: sticky;
    top: 0;
    align-self: start;
    /* A fixed viewport height, not max-height. With max-height the column was
       only as tall as the nav, so on a page taller than the screen the grid
       track below «خروج» fell back to the page background and the navy rail
       stopped in mid-air. Pinned at 100dvh the rail covers the viewport at
       every scroll position, and .mn-admin-nav's flex:1 puts the user block
       on the bottom edge where an admin shell expects it. */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
}
.mn-admin-brand {
    display: flex; align-items: center; gap: var(--mn-2);
    padding: 0 var(--mn-4) var(--mn-4);
    color: #fff; font-weight: 700; font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.mn-admin-nav { display: flex; flex-direction: column; padding-top: var(--mn-3); flex: 1; }
.mn-admin-link {
    padding: var(--mn-2) var(--mn-4);
    color: rgba(255, 255, 255, .68);
    font-size: 13.5px;
    border-inline-start: 2px solid transparent;
}
.mn-admin-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.mn-admin-link.is-active {
    background: rgba(255, 255, 255, .09);
    color: #fff;
    border-inline-start-color: var(--mn-brand);
    font-weight: 600;
}
.mn-admin-user {
    padding: var(--mn-3) var(--mn-4) 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 12.5px;
}
.mn-admin-user-name { color: #fff; margin-bottom: var(--mn-1); }
.mn-admin-user .mn-btn { color: rgba(255, 255, 255, .7); padding-inline: 0; }
.mn-admin-user .mn-btn:hover { color: #fff; background: transparent; }

.mn-admin-main { padding: var(--mn-6); min-width: 0; }
/* The page-level notice. Named for the admin layout it was written for, but
   used on the panel and on public pages too, so it has to behave everywhere.
   .mn-tag sets white-space: nowrap, which is right for a one-word status chip
   and wrong for a sentence: on /prices the demo-data notice pushed the whole
   document 38px wider than a phone screen. */
.mn-admin-banner {
    display: block;
    padding: var(--mn-2) var(--mn-3);
    margin-bottom: var(--mn-4);
    white-space: normal;
    line-height: 1.85;
}

/* ---- moderation queue (screen 13) --------------------------------------- */
.mn-mod-head { display: flex; align-items: flex-end; gap: var(--mn-4); margin-bottom: var(--mn-4); }
.mn-mod-title { font-size: 20px; margin: 0; }

.mn-mod-grid {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: var(--mn-4);
    align-items: start;
}

.mn-mod-queue { border: 1px solid var(--mn-divider); background: var(--mn-bg); }
.mn-mod-filters {
    display: flex; align-items: center; gap: var(--mn-2);
    padding: var(--mn-3);
    border-bottom: 1px solid var(--mn-divider);
}
.mn-mod-filters .mn-tag { cursor: pointer; }

.mn-mod-row {
    display: flex; align-items: center; gap: var(--mn-2);
    padding: var(--mn-2) var(--mn-3);
    border-bottom: 1px solid var(--mn-divider-soft);
}
.mn-mod-row:hover { background: rgba(89, 128, 166, .06); }
.mn-mod-row.is-selected {
    background: rgba(89, 128, 166, .10);
    border-inline-end: 2px solid var(--mn-accent);
}
.mn-mod-check { accent-color: var(--mn-accent); flex: none; }
.mn-mod-row-body {
    display: flex; align-items: center; gap: var(--mn-3);
    flex: 1; min-width: 0; color: inherit;
}
.mn-mod-thumb { width: 52px; height: 40px; object-fit: cover; flex: none; border: 1px solid var(--mn-divider); }
.mn-mod-thumb-empty { display: block; background: var(--mn-surface); }
.mn-mod-row-text { min-width: 0; }
.mn-mod-row-title {
    display: block; font-size: 13.5px; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mn-mod-row-meta { display: block; font-size: 11.5px; color: var(--mn-muted); }
.mn-mod-urgent { flex: none; }

.mn-mod-detail {
    border: 1px solid var(--mn-divider);
    background: var(--mn-bg);
    padding: var(--mn-4);
}
.mn-mod-detail-title { font-size: 19px; margin: var(--mn-2) 0; }
.mn-mod-actions {
    display: flex; gap: var(--mn-2); flex-wrap: wrap;
    padding-bottom: var(--mn-4);
    border-bottom: 1px solid var(--mn-divider);
    margin-bottom: var(--mn-4);
}
.mn-btn-approve { background: var(--mn-ok); border-color: var(--mn-ok); color: #fff; }
.mn-btn-approve:hover { background: #276741; border-color: #276741; color: #fff; }

.mn-mod-section {
    font-size: 15px; margin-top: var(--mn-6); margin-bottom: var(--mn-2);
    padding-bottom: var(--mn-1); border-bottom: 1px solid var(--mn-divider-soft);
}
.mn-mod-gallery { display: flex; gap: var(--mn-2); align-items: center; flex-wrap: wrap; }
.mn-mod-gallery img {
    width: 108px; height: 81px; object-fit: cover;
    border: 1px solid var(--mn-divider);
}
.mn-mod-gallery-more {
    width: 108px; height: 81px;
    display: grid; place-items: center;
    background: var(--mn-surface); border: 1px solid var(--mn-divider);
    font-size: 12px; color: var(--mn-muted);
}
.mn-mod-specs th { font-weight: 500; color: var(--mn-muted); }
.mn-mod-seller-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--mn-3); margin-top: var(--mn-3);
    padding-top: var(--mn-3); border-top: 1px solid var(--mn-divider-soft);
    font-size: 12.5px;
}
.mn-mod-seller-stats strong { display: block; font-size: 17px; }
.mn-mod-checklist { padding: var(--mn-3); }
.mn-mod-checklist .mn-choice { border: 0; padding: var(--mn-1) 0; }
.mn-mod-checklist .mn-choice:hover { background: transparent; border-color: transparent; }
.mn-mod-reject {
    margin-top: var(--mn-4); padding: var(--mn-3);
    border: 1px solid var(--mn-danger); background: var(--mn-danger-tint);
}

@media (max-width: 1100px) {
    .mn-mod-grid { grid-template-columns: 1fr; }
    .mn-admin { grid-template-columns: 1fr; }
    .mn-admin-side {
        flex-direction: row; flex-wrap: wrap; align-items: center;
        position: static; height: auto; overflow-y: visible;
    }
    .mn-admin-nav { flex-direction: row; flex-wrap: wrap; }
}

/* The reviewer's reason, shown to the seller on a returned listing. */
.mn-revision-note {
    border: 1px solid var(--mn-warn);
    background: var(--mn-warn-tint);
    color: var(--mn-warn);
    padding: var(--mn-3) var(--mn-4);
    margin-bottom: var(--mn-4);
    font-size: 13.5px;
    line-height: 1.9;
}
.mn-revision-hint { margin: var(--mn-2) 0 0; font-size: 12px; opacity: .8; }

/* ---- signed-in nav menu -------------------------------------------------
   Without this the nav offers «ورود» to a user who is already signed in and
   there is no خروج control anywhere outside the admin layout.               */
/* Alpine sets x-cloak only after it boots, so without this the panel is
   painted open on first render and then snaps shut. */
[x-cloak] { display: none !important; }

.mn-usermenu { position: relative; flex: none; }

.mn-usermenu-btn { gap: 6px; max-width: 190px; }
.mn-usermenu-btn bdi {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mn-usermenu-pop {
    position: absolute;
    /* inset-inline-end, not right: the nav is RTL and `right` would hang the
       panel off the wrong edge. */
    inset-inline-end: 0;
    top: calc(100% + 6px);
    z-index: 40;
    min-width: 200px;
    padding: var(--mn-1);
    /* A floating panel takes its colours from the PAGE, never from the bar
       it hangs off. This one is a child of the navy nav, which sets
       `color: #fff` for the links beside it, and the items below are
       written `color: inherit` -- so the whole menu rendered as white text
       on a near-white panel. It was invisible on the public layout only,
       because the admin nav is light and inherits dark ink, which is why
       it survived review there. */
    background: var(--mn-paper);
    color: var(--mn-text);
    border: 1px solid var(--mn-divider);
    border-radius: var(--mn-radius);
    box-shadow: var(--mn-shadow-lg);
}

.mn-usermenu-pop a,
.mn-usermenu-pop button {
    display: block;
    width: 100%;
    padding: var(--mn-2) var(--mn-3);
    border: 0;
    border-radius: var(--mn-radius);
    background: none;
    color: inherit;
    font: inherit;
    font-size: 13px;
    text-align: start;
    cursor: pointer;
}

/* The panel is --mn-paper now, and --mn-surface is the same white on the
   public theme, so the hover has to be a tint rather than another surface. */
.mn-usermenu-pop a:hover,
.mn-usermenu-pop button:hover { background: var(--mn-hover-tint); }

.mn-usermenu-pop form {
    margin: var(--mn-1) 0 0;
    padding-top: var(--mn-1);
    border-top: 1px solid var(--mn-divider-soft);
}
.mn-usermenu-pop form button { color: var(--mn-danger); }

/* ========================================================================
   Search, screen 02.
   Filter rail first in DOM order; dir="rtl" puts it on the right without a
   single left/right property anywhere in this block.
   ======================================================================== */

.mn-search { padding-block: var(--mn-6) var(--mn-12); }

.mn-search-bar {
    display: flex;
    align-items: center;
    gap: var(--mn-2);
    padding: var(--mn-2) var(--mn-3);
    margin-bottom: var(--mn-4);
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider);
}
.mn-search-bar input[type="search"] {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    padding: var(--mn-2) 0;
    color: var(--mn-text);
}
.mn-search-bar input[type="search"]:focus { outline: none; }
.mn-search-bar .mn-search-icon { flex: none; color: var(--mn-muted); }

.mn-search-grid {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    gap: var(--mn-6);
    align-items: start;
}

/* ---- filter rail ---- */

/* The rail of screens 2, 3, 4 and 7: a white card that lifts off the ground,
   its sections separated by hairlines and each one opened by the amber dot. */
.mn-filters {
    position: sticky;
    top: var(--mn-3);
    max-height: calc(100vh - var(--mn-6));
    overflow-y: auto;
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider);
    border-radius: var(--mn-radius);
    box-shadow: var(--mn-shadow-sm);
    padding: var(--mn-4);
}

.mn-filter-head { margin-bottom: var(--mn-3); font-size: 14px; font-weight: 700; }
.mn-filter-clear { font-size: 12px; color: var(--mn-danger); font-weight: 500; }

.mn-filter-block { padding-block: var(--mn-4); border-top: 1px solid var(--mn-divider-soft); }
.mn-filter-block:first-of-type { border-top: 0; padding-top: 0; }
.mn-filter-block h3 {
    display: flex;
    align-items: center;
    gap: var(--mn-2);
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 var(--mn-3);
    color: var(--mn-text);
}
.mn-filter-block h3::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mn-brand);
}

.mn-facet { list-style: none; margin: 0; padding: 0; }
.mn-facet-item {
    display: flex;
    align-items: center;
    gap: var(--mn-2);
    padding: 5px var(--mn-2);
    font-size: 13px;
    color: inherit;
    text-decoration: none;
}
.mn-facet-item:hover { background: var(--mn-bg); }
.mn-facet-item.is-on { color: var(--mn-accent-700); font-weight: 600; }

/* margin-inline-start pushes the count to the far edge in either direction. */
.mn-facet-count { margin-inline-start: auto; font-size: 11.5px; color: var(--mn-muted); }

.mn-facet-check {
    flex: none;
    width: 13px; height: 13px;
    border: 1px solid var(--mn-divider);
    background: var(--mn-bg);
}
.mn-facet-item.is-on .mn-facet-check {
    background: var(--mn-accent-600);
    border-color: var(--mn-accent-700);
}

.mn-price-range { display: flex; flex-direction: column; gap: var(--mn-2); }
.mn-price-range input {
    width: 100%;
    min-width: 0;
    padding: var(--mn-2);
    font: inherit;
    font-size: 12.5px;
    border: 1px solid var(--mn-divider);
    background: var(--mn-bg);
    color: var(--mn-text);
}

/* ---- results column ---- */

.mn-results-head { margin-bottom: var(--mn-3); font-size: 13.5px; flex-wrap: wrap; gap: var(--mn-2); }
.mn-sorts { display: flex; gap: var(--mn-1); flex-wrap: wrap; }
.mn-sort {
    padding: 4px var(--mn-2);
    font-size: 12.5px;
    color: var(--mn-muted-strong);
    text-decoration: none;
    border: 1px solid transparent;
}
.mn-sort:hover { border-color: var(--mn-divider); }
.mn-sort.is-on {
    color: var(--mn-accent-800);
    border-color: var(--mn-accent-400);
    background: var(--mn-accent-100);
    font-weight: 600;
}

.mn-pills { display: flex; flex-wrap: wrap; gap: var(--mn-2); margin-bottom: var(--mn-3); }
.mn-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px var(--mn-2);
    font-size: 12px;
    text-decoration: none;
    color: var(--mn-text);
    background: var(--mn-accent-100);
    border: 1px solid var(--mn-accent-300);
}
.mn-pill:hover { background: var(--mn-accent-200); }
.mn-pill-x { color: var(--mn-muted); font-size: 14px; line-height: 1; }

.mn-search-note { margin-bottom: var(--mn-3); font-size: 12.5px; }
.mn-syn {
    display: inline-block;
    padding: 1px 6px;
    margin-inline-end: 4px;
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider-soft);
}

.mn-empty { padding: var(--mn-12) var(--mn-6); text-align: center; }
.mn-empty p { margin: 0 0 var(--mn-2); }

/* ---- cards ---- */

/* The client's design lays listings out as a grid of upright cards with the
   photograph on top, not as a column of wide rows. The grid is the default now
   rather than an `is-grid` opt-in, because every screen in the set that shows
   listings uses it; the modifier survives as an alias so the markup that
   carries it keeps working. */
.mn-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--mn-4);
}

.mn-card { background: var(--mn-surface); border: 1px solid var(--mn-divider); overflow: hidden; }
.mn-card:hover { border-color: var(--mn-divider); }
/* The featured marker was a rule down the starting edge, which a rounded card
   clips into a stub. It becomes the amber outline the mockups draw. */
.mn-card.is-featured { border-color: var(--mn-brand-line); box-shadow: 0 0 0 1px var(--mn-brand-line), var(--mn-shadow-sm); }

.mn-card-link {
    display: flex;
    flex-direction: column;
    gap: var(--mn-3);
    padding: 0 0 var(--mn-4);
    color: inherit;
    text-decoration: none;
    height: 100%;
}

.mn-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--mn-surface-2);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.mn-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-card-noimg { color: var(--mn-muted); }

/* The mode chip rides on the photograph, at the top of the starting edge, as
   it does in all three card grids of the client's set. */
.mn-card-media .mn-tag-mode {
    position: absolute;
    inset-block-start: var(--mn-2);
    inset-inline-start: var(--mn-2);
    background: rgba(8, 30, 56, .82);
    color: #fff;
    backdrop-filter: blur(2px);
}

.mn-card-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-inline: var(--mn-4); flex: 1; }


/* ---- the project gallery, stepper and stats ------------------------------ */
/* The gallery is driven by radio inputs rather than script: the CSP forbids an
   inline handler, and a picture strip is exactly the case :checked was made
   for. The inputs are visually hidden but focusable, so a keyboard walks the
   strip with the arrow keys for free. */
.mn-projgallery { position: relative; }
.mn-projgallery-shot { display: none; margin: 0; }
.mn-projgallery input:checked + .mn-projgallery-shot { display: block; }
.mn-projgallery-shot img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--mn-radius);
    background: var(--mn-surface-2);
    display: block;
}
.mn-projgallery-shot figcaption {
    margin-top: var(--mn-2);
    font-size: 12.5px;
    color: var(--mn-muted);
}
.mn-projgallery-strip {
    display: flex;
    gap: var(--mn-2);
    margin-top: var(--mn-3);
    overflow-x: auto;
    padding-bottom: 2px;
}
.mn-projgallery-thumb {
    flex: none;
    width: 96px;
    cursor: pointer;
    border-radius: var(--mn-radius-sm);
    overflow: hidden;
    border: 2px solid transparent;
}
.mn-projgallery-thumb img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}
.mn-projgallery-thumb:hover { border-color: var(--mn-brand-line); }
/* :has, so the thumbnail of the shown picture is the one marked. Without it the
   strip gives no clue which of the pictures is on screen. */
.mn-projgallery:has(#mn-gal-0:checked) .mn-projgallery-thumb:nth-of-type(1),
.mn-projgallery:has(#mn-gal-1:checked) .mn-projgallery-thumb:nth-of-type(2),
.mn-projgallery:has(#mn-gal-2:checked) .mn-projgallery-thumb:nth-of-type(3),
.mn-projgallery:has(#mn-gal-3:checked) .mn-projgallery-thumb:nth-of-type(4),
.mn-projgallery:has(#mn-gal-4:checked) .mn-projgallery-thumb:nth-of-type(5),
.mn-projgallery:has(#mn-gal-5:checked) .mn-projgallery-thumb:nth-of-type(6),
.mn-projgallery:has(#mn-gal-6:checked) .mn-projgallery-thumb:nth-of-type(7),
.mn-projgallery:has(#mn-gal-7:checked) .mn-projgallery-thumb:nth-of-type(8),
.mn-projgallery:has(#mn-gal-8:checked) .mn-projgallery-thumb:nth-of-type(9),
.mn-projgallery:has(#mn-gal-9:checked) .mn-projgallery-thumb:nth-of-type(10) {
    border-color: var(--mn-brand);
}
.mn-projgallery input:focus-visible + .mn-projgallery-shot img {
    outline: 2px solid var(--mn-accent);
    outline-offset: 2px;
}

/* «وضعیت پیشرفت پروژه»: four stages, the reached ones filled. No percentage,
   because no field measures one. */
.mn-projsteps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--mn-2);
}
.mn-projsteps li { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.mn-projsteps-dot {
    height: 5px;
    border-radius: 3px;
    background: var(--mn-divider);
}
.mn-projsteps li.is-done .mn-projsteps-dot { background: var(--mn-brand); }
.mn-projsteps-name { color: var(--mn-muted); }
.mn-projsteps li.is-done .mn-projsteps-name { color: var(--mn-text); font-weight: 600; }

.mn-projstats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--mn-4);
    margin-top: var(--mn-8);
    padding: var(--mn-6);
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider);
    border-radius: var(--mn-radius);
    box-shadow: var(--mn-shadow-sm);
    text-align: center;
}
.mn-projstats strong { display: block; font-size: 20px; font-weight: 700; }
.mn-projstats span { font-size: 12px; color: var(--mn-muted); }

.mn-detail-acts { margin-top: var(--mn-3); }

/* The wizard's own view of the gallery. */
.mn-photogrid {
    list-style: none;
    margin: var(--mn-3) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--mn-3);
}
.mn-photogrid li {
    border: 1px solid var(--mn-divider);
    border-radius: var(--mn-radius-sm);
    overflow: hidden;
    background: var(--mn-surface);
}
.mn-photogrid li.is-cover { border-color: var(--mn-brand); }
.mn-photogrid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.mn-photogrid-cap { display: block; padding: var(--mn-2); font-size: 11.5px; color: var(--mn-muted); }
.mn-photogrid-acts {
    display: flex;
    align-items: center;
    gap: var(--mn-2);
    padding: var(--mn-2);
    border-top: 1px solid var(--mn-divider-soft);
}

@media (max-width: 620px) {
    .mn-projsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- provider cards ------------------------------------------------------ */
/* A provider card carries a logo, not a photograph of a machine, so it gets the
   round mark of the client's seventh screen rather than the landscape frame a
   listing needs. At the listing size an unset logo is a large grey rectangle
   repeated down the whole page, which reads as a broken image rather than as a
   company without a mark yet. */
.mn-rowcard-avatar {
    flex: none;
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--mn-surface-2);
    border: 1px solid var(--mn-divider);
    font-size: 26px;
    font-weight: 700;
    color: var(--mn-muted);
    line-height: 1;
}
.mn-rowcard-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The action at the far end of the row, vertically centred against the block
   of text rather than pinned to its first line. */
.mn-rowcard-end { flex: none; align-self: center; margin-inline-start: auto; }

/* The same card laid out downwards, for the narrow columns of a grid. */
.is-stacked .mn-rowcard { flex-direction: column; align-items: flex-start; }
.is-stacked .mn-rowcard-end { align-self: stretch; margin-inline-start: 0; }
.is-stacked .mn-rowcard-facts { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 720px) {
    .mn-rowcard-avatar { width: 56px; height: 56px; font-size: 20px; }
    .mn-rowcard-end { align-self: flex-start; margin-inline-start: 0; }
}

.mn-card-title {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.5;
    /* Two lines then ellipsis: Persian titles in this market run long, and a
       third line breaks the fixed card height the image relies on. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mn-card-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 12px; }
.mn-card-place { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.mn-card-place svg { flex: none; color: var(--mn-brand); }
.mn-tag-mode { padding: 2px 9px; background: var(--mn-accent-100); color: var(--mn-accent-800); font-weight: 600; }

.mn-card-specs { display: flex; flex-wrap: wrap; gap: var(--mn-3); font-size: 12px; }
.mn-spec { display: inline-flex; gap: 4px; }

.mn-card-foot {
    margin-top: auto;
    padding-top: var(--mn-3);
    border-top: 1px solid var(--mn-divider-soft);
    align-items: center;
    gap: var(--mn-2);
}
/* The price is the amber of the design, darkened. #fac757 on white is 1.7:1
   and unreadable at 14px; this is the same hue at the smallest step that
   clears AA for body text, so the card still reads as the mockup's.

   At the START of the foot, which in this RTL document is the right: that is
   where the client's card puts it, with anything else pushed to the far end. */
.mn-card-price { font-size: 15px; font-weight: 700; color: var(--mn-price); }
.mn-card-foot > :not(.mn-card-price):last-child { margin-inline-start: auto; }
/* The bookmark and heart the design puts opposite the price. They are drawn
   here and wired where the page has somewhere for them to go; a card in a
   grid of twenty is not the place to discover that a control does nothing. */
/* The heart the client's card carries.

   Positioned rather than flowed because it cannot live inside the card's own
   <a>: a form inside a link is invalid HTML and a button inside one is not
   something a browser can render.

   In the photograph's free corner, not on the foot where the design draws it.
   Their foot holds two icons and a price; ours also carries «نردبان‌شده», and
   overlaying a third control on that crowds the price it sits next to. The
   mode chip already owns the start corner, so the heart takes the other one. */
.mn-card-listing { position: relative; }
.mn-card-acts {
    position: absolute;
    inset-block-start: var(--mn-2);
    inset-inline-end: var(--mn-2);
    z-index: 1;
    display: flex;
    gap: var(--mn-2);
}
.mn-card-acts form { margin: 0; }
.mn-card-fav {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* On a photograph, so it carries its own ground: a bordered white circle
       disappears against a bright sky and a bare glyph disappears against
       anything. */
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(2px);
    color: var(--mn-muted-strong);
    cursor: pointer;
}
.mn-card-fav:hover { background: #fff; color: var(--mn-danger); }
.mn-card-fav.is-on { color: var(--mn-danger); }
.mn-tag-featured { padding: 1px 6px; background: var(--mn-brand-tint); color: var(--mn-warn); font-size: 11.5px; }

.mn-badge-verified {
    flex: none;
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 6px;
    font-size: 11px;
    background: var(--mn-brand-tint);
    color: var(--mn-warn);
    border: 1px solid var(--mn-brand-line);
}

.mn-pager { gap: var(--mn-3); justify-content: center; margin-top: var(--mn-6); }

@media (max-width: 900px) {
    .mn-search-grid { grid-template-columns: 1fr; }
    .mn-filters { position: static; max-height: none; }
}

/* Save-this-search sits with the sorts but reads as an action, not a sort. */
.mn-save-search { margin: 0; }
.mn-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--mn-brand-line);
    background: var(--mn-brand-tint);
    color: var(--mn-warn);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}
.mn-save-btn:hover { border-color: var(--mn-brand); }

.mn-saved-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mn-2); }
.mn-saved {
    padding: var(--mn-3);
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider);
}
.mn-saved-title { display: block; font-weight: 600; font-size: 14px; color: inherit; margin-bottom: 3px; }
.mn-saved select {
    padding: 4px var(--mn-2);
    font: inherit;
    font-size: 12.5px;
    border: 1px solid var(--mn-divider);
    background: var(--mn-bg);
    color: var(--mn-text);
}

/* ========================================================================
   Listing detail, screen 03.
   ======================================================================== */

.mn-detail { padding-block: var(--mn-4) var(--mn-12); }
.mn-detail-banner { display: block; margin-bottom: var(--mn-3); }

.mn-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; margin-bottom: var(--mn-3); }
.mn-crumbs a { color: inherit; }

.mn-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--mn-6);
    align-items: start;
}

.mn-detail-head { margin-bottom: var(--mn-4); }
.mn-detail-title { margin: 0 0 var(--mn-2); font-size: 21px; line-height: 1.55; }
.mn-detail-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; }

.mn-detail-block { margin-top: var(--mn-8); }
.mn-detail-block h2 {
    font-size: 15px;
    margin: 0 0 var(--mn-3);
    padding-bottom: var(--mn-2);
    border-bottom: 1px solid var(--mn-divider);
}

/* Seller descriptions arrive with real line breaks. Razor encodes the text,
   so preserving them in CSS never risks letting markup through. */
.mn-prewrap { white-space: pre-line; margin: 0; line-height: 1.9; }

/* ---- gallery ---- */

.mn-gallery { background: var(--mn-surface); border: 1px solid var(--mn-divider); padding: var(--mn-2); }
.mn-gallery-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--mn-2);
    min-height: 260px;
    color: var(--mn-muted);
}
.mn-gallery-stage {
    background: var(--mn-bg);
    /* Capped, not purely aspect-driven: 4:3 on a 936px column is a 702px-tall
       image that pushes the specs, the description and the price card below the
       fold on every desktop. The ratio still governs on narrow screens. */
    aspect-ratio: 4 / 3;
    max-height: 440px;
    min-height: 240px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.mn-gallery-stage img { width: 100%; height: 100%; object-fit: contain; }

.mn-gallery-thumbs {
    list-style: none; margin: var(--mn-2) 0 0; padding: 0;
    display: flex; gap: var(--mn-2); flex-wrap: wrap;
}
.mn-gallery-thumb {
    display: block; width: 68px; height: 52px;
    border: 1px solid var(--mn-divider);
    overflow: hidden;
}
.mn-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-gallery-thumb.is-on { border-color: var(--mn-brand); border-width: 2px; }

.mn-gallery-videos { margin-top: var(--mn-3); }
.mn-gallery-videos video { width: 100%; background: #000; }

/* ---- spec tabs ---- */

.mn-spectabs { display: flex; gap: var(--mn-1); flex-wrap: wrap; margin-bottom: var(--mn-3); }
.mn-spectab {
    padding: 5px var(--mn-3);
    font: inherit; font-size: 12.5px;
    border: 1px solid var(--mn-divider);
    background: var(--mn-bg);
    color: var(--mn-muted-strong);
    cursor: pointer;
}
.mn-spectab.is-on {
    background: var(--mn-accent-100);
    border-color: var(--mn-accent-400);
    color: var(--mn-accent-800);
    font-weight: 600;
}

/* Only shown with scripting off, where every panel renders stacked and each
   needs its own heading to be readable. */
.mn-specpanel-head { display: none; font-size: 13px; margin: var(--mn-3) 0 var(--mn-2); }
.no-js .mn-specpanel-head { display: block; }
.no-js .mn-spectabs { display: none; }

.mn-spectable { margin: 0; }
.mn-specrow {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: var(--mn-3);
    padding: var(--mn-2) var(--mn-2);
    border-bottom: 1px solid var(--mn-divider-soft);
    font-size: 13px;
}
.mn-specrow:nth-child(odd) { background: var(--mn-surface); }
.mn-specrow dt { color: var(--mn-muted); margin: 0; }
.mn-specrow dd { margin: 0; }
.mn-specrow dd .mn-muted { margin-inline-start: 4px; font-size: 12px; }

/* ---- documents ---- */

.mn-doclist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mn-2); }
.mn-doclist a {
    display: inline-flex; align-items: center; gap: var(--mn-2);
    padding: var(--mn-2) var(--mn-3);
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider);
    color: inherit; font-size: 13px;
}
.mn-doclist a:hover { border-color: var(--mn-accent-400); }

/* ---- side column ---- */

.mn-detail-side { position: sticky; top: var(--mn-3); display: flex; flex-direction: column; gap: var(--mn-3); }

.mn-pricecard { padding: var(--mn-4); display: flex; flex-direction: column; gap: var(--mn-2); }
.mn-pricecard-amount { font-size: 20px; font-weight: 700; margin-bottom: var(--mn-2); }

.mn-btn-block { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }

.mn-contact-shown {
    display: flex; flex-direction: column; gap: 4px;
    padding: var(--mn-3);
    background: var(--mn-brand-tint);
    border: 1px solid var(--mn-brand-line);
}
.mn-contact-number { font-size: 19px; font-weight: 700; color: inherit; letter-spacing: .5px; }

/* details/summary as a disclosure: no script needed to open the RFQ form. */
.mn-rfq summary { list-style: none; cursor: pointer; }
.mn-rfq summary::-webkit-details-marker { display: none; }
.mn-rfq-form { display: flex; flex-direction: column; gap: var(--mn-2); margin-top: var(--mn-2); }
.mn-rfq-form input, .mn-rfq-form select, .mn-rfq-form textarea {
    width: 100%; min-width: 0;
    padding: var(--mn-2);
    font: inherit; font-size: 12.5px;
    border: 1px solid var(--mn-divider);
    background: var(--mn-bg);
    color: var(--mn-text);
}
.mn-rfq-form textarea { resize: vertical; }

#mn-fav.is-on { color: var(--mn-danger); }

.mn-sellercard { padding: var(--mn-4); background: var(--mn-surface); border: 1px solid var(--mn-divider); }
.mn-sellercard-head { font-size: 12.5px; color: var(--mn-muted); margin: 0 0 var(--mn-2); font-weight: 600; }
.mn-sellerfacts { margin: var(--mn-3) 0; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.mn-sellerfacts > div { display: flex; justify-content: space-between; gap: var(--mn-2); }
.mn-sellerfacts dt { color: var(--mn-muted); margin: 0; }
.mn-sellerfacts dd { margin: 0; }

@media (max-width: 900px) {
    .mn-detail-grid { grid-template-columns: 1fr; }
    .mn-detail-side { position: static; }
    .mn-specrow { grid-template-columns: 1fr; gap: 2px; }
}

/* ========================================================================
   Messages (screen 20) and inquiries.
   ======================================================================== */

.mn-threads, .mn-rfqlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mn-2); }

.mn-thread, .mn-rfqrow { background: var(--mn-surface); border: 1px solid var(--mn-divider); }
.mn-thread:hover, .mn-rfqrow:hover { border-color: var(--mn-accent-400); }
.mn-thread.is-unread { border-inline-start: 3px solid var(--mn-brand); }

.mn-thread > a { display: flex; gap: var(--mn-3); padding: var(--mn-3); color: inherit; }
.mn-rfqrow > a { display: block; padding: var(--mn-3); color: inherit; }

.mn-thread-media { flex: none; width: 56px; height: 42px; background: var(--mn-bg); }
.mn-thread-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-thread-body { min-width: 0; flex: 1; }

.mn-thread-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--mn-brand); color: var(--mn-brand-ink);
    font-size: 11px; font-weight: 700;
}

/* One line then ellipsis: a preview that wraps turns the list into a wall. */
.mn-thread-preview {
    font-size: 12.5px;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- thread view ---- */

.mn-thread-page { padding-block: var(--mn-4) var(--mn-12); max-width: 760px; }
.mn-thread-head { padding-block: var(--mn-3); border-bottom: 1px solid var(--mn-divider); margin-bottom: var(--mn-4); }

.mn-msgs { list-style: none; margin: 0 0 var(--mn-4); padding: 0; display: flex; flex-direction: column; gap: var(--mn-2); }
.mn-msg { display: flex; }

/* margin-inline-start pushes my own messages to the far edge, correctly in
   either direction, without a single left/right property. */
.mn-msg.is-mine { margin-inline-start: auto; }

.mn-msg-bubble {
    max-width: 78ch;
    padding: var(--mn-2) var(--mn-3);
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider);
    font-size: 13.5px;
    line-height: 1.85;
}
.mn-msg.is-mine .mn-msg-bubble { background: var(--mn-accent-100); border-color: var(--mn-accent-300); }
.mn-msg.is-hidden .mn-msg-bubble { background: var(--mn-bg); color: var(--mn-muted); font-style: italic; }

.mn-msg-meta {
    display: flex; gap: var(--mn-2); align-items: center;
    margin-top: 4px;
    font-size: 11px;
    color: var(--mn-muted);
}

.mn-msg-files { list-style: none; margin: var(--mn-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }

.mn-msg-form { display: flex; flex-direction: column; gap: var(--mn-2); }
.mn-msg-form textarea {
    width: 100%;
    padding: var(--mn-3);
    font: inherit; font-size: 13.5px;
    border: 1px solid var(--mn-divider);
    background: var(--mn-surface);
    color: var(--mn-text);
    resize: vertical;
}

/* ---- offers ---- */

.mn-offers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mn-2); }
.mn-offer {
    padding: var(--mn-3);
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider);
    border-inline-start: 3px solid var(--mn-ok);
    font-size: 13px;
}

/* ========================================================================
   Projects (screen 04) and investment opportunities (screen 05).
   ======================================================================== */

.mn-permits { list-style: none; margin: 0 0 var(--mn-3); padding: 0; display: flex; flex-direction: column; gap: var(--mn-2); }
.mn-permit {
    padding: var(--mn-3);
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider);
    border-inline-start: 3px solid var(--mn-accent-500);
    font-size: 13px;
}

/* A confidential document the viewer may not open: the title is shown so they
   know what is behind the gate, the file id is not in the HTML at all. */
.mn-doc-locked {
    display: inline-flex; align-items: center; gap: var(--mn-2);
    padding: var(--mn-2) var(--mn-3);
    background: var(--mn-bg);
    border: 1px dashed var(--mn-divider);
    color: var(--mn-muted);
    font-size: 13px;
}

.mn-oppgrid {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--mn-3);
}

.mn-opp { background: var(--mn-surface); border: 1px solid var(--mn-divider); }
.mn-opp:hover { border-color: var(--mn-accent-400); }
.mn-opp > a { display: block; padding: var(--mn-3); color: inherit; }

.mn-opp-title { margin: var(--mn-2) 0 3px; font-size: 14.5px; line-height: 1.55; }

.mn-opp-summary {
    font-size: 12.5px;
    margin: var(--mn-2) 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mn-oppfacts {
    margin: var(--mn-3) 0 0;
    display: flex; flex-wrap: wrap; gap: var(--mn-3);
    font-size: 12.5px;
}
.mn-oppfacts > div { display: flex; flex-direction: column; gap: 2px; }
.mn-oppfacts dt { color: var(--mn-muted); margin: 0; font-size: 11.5px; }
.mn-oppfacts dd { margin: 0; font-weight: 600; }

/* بند 8's «وضعیت اعتبارسنجی» and «دریافت اطلاعات سرمایه‌گذاری», outside the card
   link because a link cannot nest inside a link. Its own border so the card reads
   as content above and actions below rather than one long tap target. */
.mn-opp-foot {
    gap: var(--mn-2);
    flex-wrap: wrap;
    padding: var(--mn-2) var(--mn-3) var(--mn-3);
    border-top: 1px solid var(--mn-divider-soft);
}

.mn-check { display: flex; align-items: flex-start; gap: var(--mn-2); font-size: 13px; cursor: pointer; }
.mn-check input { margin-top: 3px; flex: none; }

/* ---- panel shell --------------------------------------------------------- */
/* Two columns, sidebar first: under dir="rtl" that puts the menu on the right,
   which is where the design has it and where an Iranian user looks for it. */
.mn-panel { padding-block: var(--mn-6) var(--mn-12); }

.mn-panel-grid {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    gap: var(--mn-6);
    align-items: start;
}

.mn-panel-nav {
    position: sticky;
    top: var(--mn-3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider-soft);
    border-radius: var(--mn-radius);
}

.mn-panel-link {
    padding: var(--mn-3) var(--mn-4);
    font-size: 13px;
    color: var(--mn-muted-strong);
    border-inline-start: 3px solid transparent;
    text-decoration: none;
}
.mn-panel-link:hover { background: var(--mn-hover-tint); color: var(--mn-text); }
.mn-panel-link.is-active {
    background: var(--mn-hover-tint);
    color: var(--mn-text);
    font-weight: 600;
    border-inline-start-color: var(--mn-brand);
}
/* On the dashboard the selected row is amber, as the client draws it: on navy
   the light-theme treatment (a slightly different dark) is invisible. */
body.mn-dash .mn-panel-link.is-active { color: var(--mn-brand); }

/* ---- dashboard tiles ----------------------------------------------------- */
.mn-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: var(--mn-3);
    margin-bottom: var(--mn-6);
}

.mn-tile {
    display: block;
    padding: var(--mn-4);
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider-soft);
    border-radius: var(--mn-radius);
    color: inherit;
    text-decoration: none;
}
.mn-tile:hover { border-color: var(--mn-divider); background: var(--mn-surface-2); }
/* The figure is the point of the tile, and on the client's dashboard it is
   amber. Only the real ones: a zero keeps the muted treatment below, or an
   empty dashboard lights up as if something needed doing. */
body.mn-dash .mn-tile:not(.is-zero) .mn-tile-value { color: var(--mn-brand); }

.mn-tile-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    min-height: 30px;
}
.mn-tile-label { font-size: 12.5px; color: var(--mn-muted-strong); margin-top: 2px; }
.mn-tile-hint  { font-size: 11px; color: var(--mn-muted); margin-top: 4px; }

/* A zero is not a problem, so it must not read as one. Only a tile that is
   actually waiting on the user gets the amber rule. */
.mn-tile.is-action { border-inline-start: 3px solid var(--mn-brand); }

/* The Persian zero is a small ring, not a full-height glyph like Latin 0. Muted
   to --mn-muted at this size it stops reading as a number at all and looks like
   a stray bullet, so a zero tile is dimmed only to --mn-muted-strong and keeps
   its weight. The label carries the meaning; the digit only has to stay
   legible. */
.mn-tile.is-zero .mn-tile-value { color: var(--mn-muted-strong); }

.mn-panel-section { margin-bottom: var(--mn-8); }
.mn-panel-section > h2 {
    font-size: 14px;
    margin: 0 0 var(--mn-3);
    display: flex;
    align-items: center;
    gap: var(--mn-2);
}
.mn-panel-section > h2 a { font-size: 12px; font-weight: 400; margin-inline-start: auto; }

/* ---- simple panel table -------------------------------------------------- */
.mn-panel-list { list-style: none; margin: 0; padding: 0; }
.mn-panel-row {
    display: flex;
    gap: var(--mn-3);
    align-items: center;
    padding: var(--mn-3) var(--mn-4);
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider-soft);
    border-block-end: 0;
    font-size: 13px;
}
.mn-panel-row:last-child { border-block-end: 1px solid var(--mn-divider-soft); }
.mn-panel-row .mn-thumb {
    width: 52px; height: 40px; flex: none;
    background: var(--mn-bg);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.mn-panel-row .mn-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mn-panel-row .mn-grow { flex: 1 1 auto; min-width: 0; }
.mn-panel-row .mn-trunc {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A favourite whose listing has gone stays in the list, dimmed. Dropping it
   silently reads as the platform losing what the user saved. */
.mn-panel-row.is-gone { opacity: .55; }

@media (max-width: 900px) {
    .mn-panel-grid { grid-template-columns: minmax(0, 1fr); }
    .mn-panel-nav {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        overflow-x: auto;
    }
    .mn-panel-link {
        border-inline-start: 0;
        border-block-end: 3px solid transparent;
        white-space: nowrap;
    }
    .mn-panel-link.is-active {
        border-inline-start: 0;
        border-block-end-color: var(--mn-brand);
    }
}

/* ---- stats ---------------------------------------------------------------- */
.mn-chart { background: var(--mn-surface); border: 1px solid var(--mn-divider-soft); padding: var(--mn-3); }
.mn-delta-up   { color: var(--mn-ok); }
.mn-delta-down { color: var(--mn-danger); }

/* ---- verification stages -------------------------------------------------- */
/* Each stage is a bounded block, because the applicant works one at a time and
   the reviewer decides one at a time. A flat list of five would let a rejection
   note on stage 3 read as though it belonged to stage 4. */
.mn-stage {
    padding: var(--mn-4);
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider-soft);
    margin-bottom: var(--mn-3);
}
.mn-stage .mn-panel-row { background: var(--mn-bg); }

/* A بند 12 duty that block K has not built yet: visible so the client can see
   the inventory is planned, inert so it never 404s. */
.mn-admin-link.is-soon {
    display: flex;
    align-items: center;
    gap: var(--mn-2);
    opacity: .45;
    cursor: default;
}
.mn-admin-link.is-soon em {
    font-style: normal;
    font-size: 10px;
    padding: 1px 5px;
    border: 1px solid currentColor;
    margin-inline-start: auto;
}

/* ---- file field ----------------------------------------------------------- */
/* The native file input renders «Choose File / No file chosen» in English and
   neither string is addressable from CSS. The input keeps its name, its
   required flag and its accessible label; only the visible chrome is a label
   the page can write in Persian. */
.mn-file {
    display: inline-flex;
    align-items: center;
    gap: var(--mn-2);
    padding: 6px var(--mn-3);
    border: 1px solid var(--mn-divider);
    background: var(--mn-bg);
    font-size: 12.5px;
    cursor: pointer;
    max-width: 260px;
}
.mn-file:hover { border-color: var(--mn-accent-500); }
.mn-file span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mn-file input[type="file"] {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
/* Keyboard focus lands on the hidden input, so the label has to show it. */
.mn-file:focus-within { outline: 2px solid var(--mn-accent-500); outline-offset: 1px; }

/* ---- analytics ------------------------------------------------------------ */
.mn-analytics-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--mn-6);
}

.mn-breakdown { list-style: none; margin: 0; padding: 0; }
.mn-breakdown li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 52px;
    align-items: center;
    gap: var(--mn-3);
    padding: 5px 0;
    font-size: 12.5px;
}
.mn-breakdown-bar {
    display: block;
    height: 6px;
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider-soft);
}
.mn-breakdown-bar i { display: block; height: 100%; background: var(--mn-accent-500); }
.mn-breakdown-count { text-align: end; color: var(--mn-muted-strong); }

@media (max-width: 640px) {
    .mn-breakdown li { grid-template-columns: minmax(0, 1fr) 52px; }
    .mn-breakdown-bar { display: none; }
}

/* ---- forms ---------------------------------------------------------------- */
/* `.mn-form`, `.mn-formblock`, `.mn-formgrid` and `.mn-formactions` were used by
   fourteen views from block G onward but never existed in this sheet, so every
   wizard rendered as one unstyled column with browser-default controls. They are
   defined here once rather than per page.

   Controls inside `.mn-field` are styled by ELEMENT, not by an added class: the
   views were written with bare <input>/<select>/<textarea>, and asking each of
   them to carry `.mn-input` is fourteen edits that a fifteenth view will forget.
   `.mn-input` keeps working for the places that already use it. */
.mn-form { max-width: 860px; }

.mn-formblock {
    padding: var(--mn-4) 0 var(--mn-2);
    border-top: 1px solid var(--mn-divider-soft);
}
.mn-formblock:first-of-type { border-top: 0; padding-top: 0; }
.mn-formblock > h2 {
    font-size: 14px;
    margin: 0 0 var(--mn-3);
}

/* Two columns where there is room, one where there is not. A three-column form
   on a wide screen puts related fields too far apart to scan. */
.mn-formgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0 var(--mn-4);
}

.mn-formactions {
    padding-top: var(--mn-4);
    margin-top: var(--mn-2);
    border-top: 1px solid var(--mn-divider-soft);
}

.mn-field > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.mn-field > select,
.mn-field > textarea,
.mn-field > div > input:not([type="file"]),
.mn-field > div > textarea {
    width: 100%;
    min-height: 38px;
    padding: 6px var(--mn-3);
    font: inherit;
    font-size: 14px;
    color: var(--mn-text);
    caret-color: var(--mn-accent);
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider);
    border-radius: var(--mn-radius);
}
.mn-field textarea { min-height: 88px; resize: vertical; }
.mn-field > input::placeholder,
.mn-field > textarea::placeholder,
.mn-field > div > input::placeholder,
.mn-field > div > textarea::placeholder { color: var(--mn-placeholder); }
.mn-field > input:hover,
.mn-field > select:hover,
.mn-field > textarea:hover { border-color: var(--mn-border-hover); }
.mn-field > input:focus-visible,
.mn-field > select:focus-visible,
.mn-field > textarea:focus-visible { border-color: var(--mn-accent); outline-offset: 0; }

/* A checkbox row reads as one line, not as a label above a control. */
.mn-check {
    display: flex;
    align-items: center;
    gap: var(--mn-2);
    font-size: 13px;
    margin-bottom: var(--mn-2);
    cursor: pointer;
}
.mn-check input { margin: 0; flex: none; }

/* Numbers, codes and phone numbers stay LTR inside an RTL form: a price or a
   registration number typed right-to-left is unreadable. */
.mn-field > input[type="number"],
.mn-field > input[type="tel"],
.mn-field > input[type="url"],
.mn-field > input[type="email"] { direction: ltr; text-align: start; }

@media (max-width: 640px) {
    .mn-formgrid { grid-template-columns: minmax(0, 1fr); }
}

/* Controls that sit directly in a stage block rather than inside .mn-field:
   the option list editor, and the note boxes on the verification review. */
.mn-stage > form > textarea,
.mn-stage > form > input[type="text"] {
    width: 100%;
    padding: 6px var(--mn-3);
    font: inherit;
    font-size: 13.5px;
    background: var(--mn-bg);
    border: 1px solid var(--mn-divider);
    border-radius: var(--mn-radius);
}
.mn-stage > form > textarea { min-height: 96px; resize: vertical; }


/* ---- homepage (بند 1, direction 1a) -------------------------------------- */
/* Content-dense over art-directed. The hero is a dark field with the search box
   in it, and everything below is the same card components the rest of the site
   uses, so a change to a listing card reaches the homepage without a second
   implementation to keep in step. */

/* The photograph the client's mockup opens on. Two stops of navy over it: the
   first is a flat wash that guarantees a floor of contrast wherever the crop
   lands, the second a gradient that darkens the foot so the search box and the
   chips sit on ink rather than on sky. Without the flat layer a light patch of
   the photo can put white text on a pale ground, which is a contrast failure
   that only shows up on one crop at one width. */
.mn-hero.has-photo {
    background-image:
        linear-gradient(180deg, rgba(3, 13, 25, .58) 0%, rgba(3, 13, 25, .78) 60%, rgba(3, 13, 25, .92) 100%),
        url('../img/showcase/haul-truck-hero.webp');
    background-size: cover;
    background-position: center 38%;
    padding-block: 76px var(--mn-12);
    margin-bottom: 0;
}

/* Centred, as the design has it, and capped so a long Persian headline breaks
   into two balanced lines instead of one wall. */
.mn-hero-inner { text-align: center; }
.mn-hero-inner .mn-hero-title,
.mn-hero-inner .mn-hero-lead { margin-inline: auto; }
.mn-hero-inner .mn-hero-kick,
.mn-hero-inner .mn-hero-cta,
.mn-hero-inner .mn-hero-chips { justify-content: center; }
.mn-hero-inner .mn-hero-title { max-width: 26ch; }
.mn-hero-inner .mn-hero-lead { max-width: 74ch; }

.mn-hero-pill { max-width: 720px; margin: var(--mn-6) auto var(--mn-4); }

.mn-hero {
    background: var(--mn-navy);
    color: #fff;
    padding-block: var(--mn-12) var(--mn-8);
    margin-bottom: var(--mn-8);
}
.mn-hero-kicker {
    font: 600 11px/1 var(--mn-font);
    letter-spacing: .12em;
    color: var(--mn-brand);
}
.mn-hero-title {
    color: #fff;
    font-size: clamp(24px, 3.4vw, 38px);
    line-height: 1.45;
    margin: 0 0 var(--mn-3);
    max-width: 22ch;
}
.mn-hero-title span { color: var(--mn-brand); }
.mn-hero-lead {
    color: rgba(255, 255, 255, .74);
    font-size: 14.5px;
    line-height: 2;
    max-width: 62ch;
    margin: 0 0 var(--mn-6);
}
/* The search box overrides the page-level .mn-search-bar surface, which is
   tuned for the light results page and vanishes against the navy. */
.mn-hero-search {
    max-width: 760px;
    margin-bottom: var(--mn-6);
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .22);
}
.mn-hero-search input[type="search"] { color: #fff; }
.mn-hero-search input[type="search"]::placeholder { color: rgba(255, 255, 255, .45); }
.mn-hero-search .mn-search-icon { color: rgba(255, 255, 255, .55); }

/* The two بند 1 calls to action. The secondary one needs its own variant: the
   standard secondary button is a dark border on a light surface, and on the
   navy hero that is a rectangle nobody can see. */
.mn-hero-cta { display: flex; flex-wrap: wrap; gap: var(--mn-3); margin-bottom: var(--mn-6); }

.mn-btn-hero-ghost {
    border-color: rgba(255, 255, 255, .42);
    color: #fff;
    background: transparent;
}
.mn-btn-hero-ghost:hover {
    border-color: var(--mn-brand);
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

/* The example searches. Deliberately not buttons: each one goes to a different
   section, and dressing them as buttons under a search box implies they search. */
.mn-hero-chips {
    list-style: none;
    margin: 0 0 var(--mn-6);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mn-2);
    max-width: 760px;
}
.mn-hero-chips a {
    display: block;
    padding: 5px var(--mn-3);
    font-size: 12px;
    color: rgba(255, 255, 255, .78);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    text-decoration: none;
}
.mn-hero-chips a:hover {
    color: #fff;
    border-color: var(--mn-brand-line);
    background: rgba(255, 255, 255, .12);
}

.mn-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mn-8);
    padding-top: var(--mn-6);
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.mn-hero-stats strong { display: block; font-size: 22px; font-weight: 700; color: var(--mn-brand); }
.mn-hero-stats span { font-size: 12.5px; color: rgba(255, 255, 255, .62); }

.mn-home-section { margin-bottom: var(--mn-12); }
.mn-home-h2 { font-size: 19px; font-weight: 700; margin: 0 0 var(--mn-4); letter-spacing: -.01em; }

/* Every section heading in the client's design opens with a short amber rule
   and closes with the «all» link at the far end. Putting the rule on the head
   rather than in each view means the eleven sections of this page, and the
   heads on the other seven screens, all get it from one place. */
.mn-home-head {
    display: flex;
    align-items: center;
    gap: var(--mn-3);
    margin-bottom: var(--mn-4);
}
.mn-home-head::before {
    content: "";
    flex: none;
    order: -1;
    width: 30px;
    height: 3px;
    border-radius: 2px;
    background: var(--mn-brand);
}
.mn-home-head .mn-home-h2 { margin: 0; }
.mn-home-more { margin-inline-start: auto; font-size: 12.5px; font-weight: 500; color: var(--mn-muted-strong); }
.mn-home-more:hover { color: var(--mn-accent); }

/* The eight بند 1 categories, four across two rows.
   A fixed four rather than auto-fit: auto-fit put six on the first row and two
   on the second, and eight items in a ragged 6+2 reads as "the row ran out"
   rather than as a set of eight. */
/* All eight of بند 1 in ONE row, on the hero's dark band. The client's first
   screen puts them there, right under the chips, and that is what makes the
   band read as the way into the marketplace rather than as a photograph with a
   search box on it. Eight across needs a narrow minimum; below 1100px they
   wrap to four and then two, which is the same set in fewer rows rather than a
   different design. */
.mn-cattiles {
    list-style: none;
    margin: var(--mn-8) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--mn-3);
    text-align: start;
}
@media (max-width: 1180px) { .mn-cattiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .mn-cattiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The tile: the amber outline icon and the wording at the top, a photograph
   filling the floor. It sits on the hero band, so it is a shade darker than
   the wash behind it rather than lighter, which is how the client's screen
   separates the two.

   The floor is reserved with padding-bottom and the photograph is positioned
   into it. It used to be a flow child pulled out with negative inline margins,
   and one of the two margins was landing differently under RTL, so every
   picture sat a few pixels off the starting edge. Positioned, it cannot. */
.mn-cattiles a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mn-1);
    padding: var(--mn-4) var(--mn-4) 104px;
    min-height: 232px;
    overflow: hidden;
    border-radius: var(--mn-radius);
    background: rgba(3, 13, 25, .72);
    border: 1px solid rgba(255, 255, 255, .10);
    color: #fff;
    text-decoration: none;
    height: 100%;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mn-cattiles a:hover {
    transform: translateY(-2px);
    border-color: var(--mn-brand-line);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
}
.mn-cattiles a.is-soon { opacity: .72; }

.mn-cattile-icon { flex: none; display: flex; color: var(--mn-brand); margin-bottom: var(--mn-2); }
.mn-cattiles a.is-soon .mn-cattile-icon { color: rgba(255, 255, 255, .45); }
.mn-cattile-icon svg { width: 30px; height: 30px; stroke-width: 1.5; }

.mn-cattile-name { font-size: 13.5px; font-weight: 700; line-height: 1.6; }
.mn-cattile-sub  { font-size: 11px; color: rgba(255, 255, 255, .62); line-height: 1.7; }
.mn-cattile-count {
    position: relative;
    z-index: 1;
    margin-inline-start: 0;
    margin-top: auto;
    padding-top: var(--mn-2);
    font-size: 11.5px;
    color: var(--mn-brand);
    flex: none;
}

/* The photograph is the floor of the tile: pinned to the bottom across the
   full width, in the space padding-bottom reserved for it. */
.mn-cattile-photo {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    width: 100%;
    height: 96px;
    object-fit: cover;
    display: block;
    opacity: .85;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 42%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 42%);
}
.mn-cattiles a:hover .mn-cattile-photo { opacity: 1; }

/* «شما در معدنچی چه کسی هستید؟». Nine tiles, so a narrow minimum: three rows of
   three at desktop rather than one row of nine at 140px each, which is narrower
   than «تأمین‌کننده تجهیزات» wants to be. */
.mn-roletiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--mn-4);
}
.mn-roletiles a {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: var(--mn-radius);
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider);
    box-shadow: var(--mn-shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mn-roletiles a:hover {
    transform: translateY(-2px);
    border-color: var(--mn-brand-line);
    box-shadow: var(--mn-shadow-md);
}
.mn-roletile-photo {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}
.mn-roletile-body { display: flex; flex-direction: column; gap: 3px; padding: var(--mn-4); }
.mn-roletile-name { font-size: 14.5px; font-weight: 700; }
.mn-roletile-sub  { font-size: 11.5px; color: var(--mn-muted); line-height: 1.8; }

.mn-cathead { margin-bottom: var(--mn-3); }
.mn-cathead:not(:first-child) { margin-top: var(--mn-8); }
.mn-cathead-kicker { font-size: 12px; }

/* ---- the four-panel band ------------------------------------------------- */
/* Equal columns rather than auto-fit: the mockup's four panels read as one
   instrument, and letting them reflow to three-plus-one breaks that. They drop
   to two, then one, on the way down. */
.mn-home-band {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--mn-3);
}
@media (max-width: 1100px) { .mn-home-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .mn-home-band { grid-template-columns: minmax(0, 1fr); } }

.mn-bandcard {
    display: flex;
    flex-direction: column;
    gap: var(--mn-3);
    padding: var(--mn-4);
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider);
}

/* The amber rule before each panel title, from the mockup. */
.mn-band-head h2 {
    margin: 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: var(--mn-2);
}
.mn-band-head h2::before {
    content: "";
    width: 3px;
    height: 14px;
    background: var(--mn-brand);
    flex: none;
}

.mn-band-more {
    margin-top: auto;
    font-size: 12px;
    color: var(--mn-brand);
    text-decoration: none;
}
.mn-band-more:hover { text-decoration: underline; }

.mn-band-project { display: block; color: inherit; text-decoration: none; }
.mn-band-photo {
    position: relative;
    display: block;
    margin-bottom: var(--mn-3);
    background: var(--mn-surface-2);
}
.mn-band-photo img { width: 100%; height: 132px; object-fit: cover; display: block; }
.mn-band-flag { position: absolute; top: var(--mn-2); inset-inline-end: var(--mn-2); }
.mn-band-project-title { display: block; font-size: 13.5px; line-height: 1.7; }
.mn-band-project:hover .mn-band-project-title { color: var(--mn-accent-700); }
.mn-band-project-meta { display: block; font-size: 12px; margin-bottom: var(--mn-3); }

/* Four segments, one per ProjectStage. Filled to the stage the project is at,
   labelled underneath: the shape carries the progress, the word carries the
   meaning, and neither claims a percentage. */
.mn-band-progress { display: flex; gap: 3px; }
.mn-band-progress > span {
    height: 5px;
    flex: 1;
    background: var(--mn-divider);
}
.mn-band-progress > span.is-on { background: var(--mn-brand); }
.mn-band-stage { display: block; font-size: 11.5px; color: var(--mn-muted); margin-top: 5px; }

.mn-band-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mn-3);
}
.mn-band-stats strong { display: block; font-size: 19px; font-weight: 700; color: var(--mn-brand); }
.mn-band-stats span { font-size: 11.5px; color: var(--mn-muted); line-height: 1.6; }
.mn-band-note { font-size: 11px; margin: 0; }

.mn-band-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mn-band-rows a {
    display: flex;
    gap: var(--mn-2);
    align-items: center;
    padding: var(--mn-2) 0;
    border-bottom: 1px solid var(--mn-divider-soft);
    color: inherit;
    text-decoration: none;
}
.mn-band-rows li:last-child a { border-bottom: 0; }
.mn-band-thumb {
    flex: none;
    width: 56px; height: 42px;
    background: var(--mn-surface-2);
    overflow: hidden;
}
.mn-band-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-band-row-body { min-width: 0; }
.mn-band-row-body strong {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mn-band-rows a:hover .mn-band-row-body strong { color: var(--mn-accent-700); }
.mn-band-row-body span { font-size: 11.5px; }

/* ---- a section's own hero band -------------------------------------------- */
/* The mockups open every section the way they open the homepage: a photograph,
   an amber rule, the title and one line saying what the page is. Same recipe as
   .mn-hero and the same two-stop overlay, at about half the height. */
/* The dark band that opens screens 2 to 7 of the client's set: a photograph,
   a navy wash over it, the title, and at most one action.

   The photograph is a custom property so a page picks its own subject without
   another class and another rule; the wash is two stops so the text at the
   start edge sits on ink whatever the crop does, and it ends on navy rather
   than on the page ground, which on a light page faded the picture to white. */
.mn-page-hero {
    --mn-hero-photo: url('../img/showcase/sungun-02-hero.webp');
    background-image:
        linear-gradient(to left, rgba(8, 30, 56, .95) 0%, rgba(8, 30, 56, .74) 52%, rgba(8, 30, 56, .38) 100%),
        var(--mn-hero-photo);
    background-size: cover;
    background-position: center 42%;
    background-color: var(--mn-navy);
    color: #fff;
    padding-block: var(--mn-12);
    margin-bottom: var(--mn-8);
}
.mn-page-hero h1 { margin: 0 0 var(--mn-2); font-size: clamp(22px, 3vw, 34px); font-weight: 800; color: #fff; }
.mn-page-hero p {
    margin: 0;
    max-width: 72ch;
    font-size: 14.5px;
    line-height: 2;
    color: rgba(255, 255, 255, .80);
}
.mn-page-hero .mn-btn-brand { margin-top: var(--mn-4); }

/* The breadcrumb the client puts above the title on the inner pages. */
.mn-crumb { font-size: 12px; color: rgba(255, 255, 255, .62); margin-bottom: var(--mn-3); }
.mn-crumb a { color: inherit; }
.mn-crumb a:hover { color: var(--mn-brand); }

/* The hero search sits at the foot of the band, overlapping the fold, which is
   what screens 2 and 3 do. */
.mn-page-hero .mn-searchpill { max-width: 660px; margin-top: var(--mn-6); }

/* ---- «دسته‌های اصلی» ------------------------------------------------------- */
/* The mockup centres the title between two rules with a glyph on them. Drawn in
   CSS rather than shipped as two more images: it is a line, a dot and a gap. */
.mn-cat-hero { padding-block: var(--mn-12); }
.mn-cat-title {
    color: var(--mn-brand);
    font-size: clamp(24px, 3vw, 34px);
    margin: var(--mn-3) 0;
}
.mn-cat-orn {
    display: block;
    width: 190px;
    height: 1px;
    margin: 0 auto;
    background: linear-gradient(90deg,
        transparent 0%, var(--mn-brand-line) 30%, var(--mn-brand-line) 70%, transparent 100%);
    position: relative;
}
.mn-cat-orn::after {
    content: "";
    position: absolute;
    top: -3px;
    left: 50%;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    background: var(--mn-brand);
    transform: rotate(45deg);
}

.mn-cattiles-photo {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--mn-3);
}
@media (max-width: 640px) {
    .mn-cattiles-photo { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

.mn-cattiles-photo a {
    position: relative;
    display: block;
    height: 180px;
    overflow: hidden;
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider);
    border-bottom: 2px solid transparent;
    color: inherit;
    text-decoration: none;
}
.mn-cattiles-photo a:hover { border-bottom-color: var(--mn-brand); }

.mn-cattiles-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Held back so the amber badge and the name stay the brightest things on the
       tile, and lifted on hover so the tile answers the pointer. */
    filter: brightness(.62) saturate(.92);
    transition: filter .18s, transform .18s;
}
.mn-cattiles-photo a:hover img { filter: brightness(.78) saturate(1); transform: scale(1.03); }

/* The icon badge, top-start, as the mockup has it. */
.mn-cattile-badge {
    position: absolute;
    top: var(--mn-3);
    inset-inline-start: var(--mn-3);
    display: flex;
    padding: 7px;
    color: var(--mn-brand);
    background: rgba(3, 13, 25, .72);
    border: 1px solid var(--mn-brand-line);
}
.mn-cattile-badge svg { width: 20px; height: 20px; }

/* The name is a LABEL that carries its own ground, not text laid over the
   picture. It was a gradient washing up from the foot of the tile, which
   works only while there IS a photograph: `is-plain` below switched the
   gradient off and left white text on a near-white surface, so a page of
   categories with no images uploaded yet -- every category on a fresh
   install -- was twenty-one unreadable tiles.

   A box also survives the case the gradient was written for, a light crop
   at the foot of a photograph. The text is on its own ink either way. */
.mn-cattile-photo-body {
    position: absolute;
    inset-inline: var(--mn-2);
    bottom: var(--mn-2);
    padding: var(--mn-2) var(--mn-3);
    background: rgba(3, 13, 25, .84);
    border-radius: var(--mn-radius-sm);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
}
.mn-cattile-photo-body strong { display: block; font-size: 13.5px; color: #fff; }
.mn-cattile-photo-body .mn-muted { font-size: 11px; color: rgba(255, 255, 255, .60); }
.mn-cattiles-photo a:hover .mn-cattile-photo-body strong { color: var(--mn-brand); }

/* No photograph yet: the icon grows into the space instead of leaving a hole.
   Every category starts here, before an admin uploads anything. */
.mn-cattiles-photo a.is-plain {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mn-surface-2);
}
.mn-cattiles-photo a.is-plain .mn-cattile-badge {
    position: static;
    background: transparent;
    border: 0;
    padding: 0;
    margin-bottom: var(--mn-8);
}
.mn-cattiles-photo a.is-plain .mn-cattile-badge svg { width: 34px; height: 34px; }

/* ---- a horizontal filter bar ---------------------------------------------- */
/* Above the results, not beside them. A table of six comparable columns needs
   its width; a sidebar would take a quarter of it to hold three dropdowns. */
/* The client's fourth screen puts these in the rail beside the results rather
   than in a bar above them, so the bar is a single column inside .mn-filters,
   which already supplies the card, and a responsive grid anywhere else. */
.mn-filterbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: var(--mn-3);
    align-items: end;
    padding: var(--mn-4);
    margin-bottom: var(--mn-4);
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider);
    border-radius: var(--mn-radius);
}
.mn-filters .mn-filterbar {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mn-4);
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
}
.mn-filters .mn-filterbar .mn-field > span {
    display: flex;
    align-items: center;
    gap: var(--mn-2);
    font-size: 13px;
    font-weight: 700;
    color: var(--mn-text);
    margin-bottom: var(--mn-2);
}
.mn-filters .mn-filterbar .mn-field > span::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mn-brand);
}
.mn-filterbar .mn-field { margin: 0; }
.mn-filterbar .mn-input { width: 100%; }
.mn-filterbar-go { display: flex; flex-direction: column; gap: 4px; }
.mn-filterbar-go .mn-btn { gap: var(--mn-2); }
.mn-filterbar-go .mn-filter-clear { font-size: 11.5px; text-align: center; }

/* ---- the بند 8 opportunity card -------------------------------------------- */
/* The IRR is the figure an investor scans the list for, so it is the one number
   on the card given weight and the structural blue. */
.mn-opp-capital { margin: 0; display: flex; align-items: baseline; gap: var(--mn-2); font-size: 13.5px; }
.mn-opp-capital .mn-muted { font-size: 12px; }
.mn-opp-irr { font-weight: 700; color: var(--mn-accent-700); }
.mn-oppcard .mn-opp-name { font-weight: 700; }

/* ---- the بند 8 opportunity table ------------------------------------------- */
.mn-tablewrap { overflow-x: auto; }

.mn-opptable { width: 100%; border-collapse: collapse; font-size: 13px; }
.mn-opptable th {
    text-align: start;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mn-muted);
    padding: var(--mn-3);
    background: var(--mn-surface-2);
    border-bottom: 1px solid var(--mn-divider);
    white-space: nowrap;
}
.mn-opptable td {
    padding: var(--mn-3);
    border-bottom: 1px solid var(--mn-divider-soft);
    vertical-align: middle;
}
.mn-opptable tbody tr:hover { background: var(--mn-hover-tint); }
.mn-opptable tbody tr:last-child td { border-bottom: 0; }

.mn-opp-name { font-weight: 600; color: inherit; text-decoration: none; }
.mn-opp-name:hover { color: var(--mn-accent-700); text-decoration: underline; }
.mn-opp-province { display: block; font-size: 11.5px; }

/* Stacked cards below 900px. Same markup: each cell prints the column heading
   it was given in data-label, so there is no second template to keep in step
   with the first. */
@media (max-width: 900px) {
    .mn-opptable thead { display: none; }
    .mn-opptable, .mn-opptable tbody, .mn-opptable tr, .mn-opptable td { display: block; width: 100%; }
    .mn-opptable tr {
        margin-bottom: var(--mn-3);
        background: var(--mn-surface);
        border: 1px solid var(--mn-divider);
    }
    .mn-opptable td { display: flex; gap: var(--mn-3); align-items: baseline; }
    .mn-opptable td::before {
        content: attr(data-label);
        flex: none;
        width: 40%;
        font-size: 11.5px;
        color: var(--mn-muted);
    }
    .mn-opptable td:last-child::before { content: none; }
    .mn-opptable td:last-child .mn-btn { width: 100%; }
}

/* ---- the closing value strip --------------------------------------------- */
.mn-props {
    background: var(--mn-navy);
    color: #fff;
    padding-block: var(--mn-6);
    margin-bottom: var(--mn-8);
}
.mn-props-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--mn-4);
}
@media (max-width: 900px) { .mn-props-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mn-props-grid { grid-template-columns: minmax(0, 1fr); } }

.mn-prop {
    display: flex;
    gap: var(--mn-3);
    align-items: flex-start;
    color: inherit;
    text-decoration: none;
}
.mn-prop-icon { flex: none; color: var(--mn-brand); }
.mn-prop-icon svg { width: 24px; height: 24px; }
.mn-prop strong { display: block; font-size: 13px; line-height: 1.7; }
.mn-prop .mn-muted { color: rgba(255, 255, 255, .60); font-size: 11.5px; line-height: 1.7; }
.mn-prop:hover strong { color: var(--mn-brand); }

/* Kept as an alias: .mn-cards is a grid everywhere now. */
.mn-cards.is-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.mn-home-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--mn-8);
}

.mn-home-list { list-style: none; margin: 0; padding: 0; }
.mn-home-list a {
    display: block;
    padding: var(--mn-3) 0;
    border-bottom: 1px solid var(--mn-divider-soft);
    color: inherit;
    text-decoration: none;
}
.mn-home-list li:last-child a { border-bottom: 0; }
.mn-home-list a:hover .mn-home-list-title { color: var(--mn-accent-700); }
.mn-home-list-title {
    display: flex; align-items: center; gap: var(--mn-2);
    font-size: 13.5px; font-weight: 600; margin-bottom: 4px;
}
.mn-home-list-meta { display: block; font-size: 12px; color: var(--mn-muted); }

/* ---- نقشه معادن و پروژه‌ها ------------------------------------------------ */
/* «۰۴ — پراکندگی» from the design canvas, rebuilt against the tokens. The
   canvas writes #e9e9ea, #5980a6, #1d2d3d and rgba(29,31,32,.16) as literals;
   those are --mn-surface, --mn-accent, --mn-navy and --mn-divider here, so a
   change to the palette reaches this section like every other one.

   One deliberate deviation: the canvas amber is #F5A800 and the platform's is
   --mn-brand (#ffb300, sampled from the logo). Two ambers on one page reads as
   a mistake, so the pins use the platform's. */
.mn-minemap-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 40px;
    align-items: start;
}
.mn-minemap-aside { padding-top: 52px; }

@media (max-width: 900px) {
    .mn-minemap-split { grid-template-columns: minmax(0, 1fr); gap: var(--mn-6); }
    /* The 52px exists to drop the rail level with the map's first pin. Stacked,
       it is just a gap in the wrong place. */
    .mn-minemap-aside { padding-top: 0; }
}

.mn-home-kicker {
    font: 600 11px/1 var(--mn-font);
    letter-spacing: .12em;
    color: var(--mn-accent);
    margin-bottom: 9px;
}
.mn-minemap-h2 { font-size: 30px; font-weight: 700; margin: 0 0 18px; }

.mn-minemap-frame { background: var(--mn-surface); padding: 12px; }

.mn-minemap { position: relative; }
/* The pin percentages are relative to this exact frame, so the image is never
   cropped or letterboxed: width 100%, natural height, nothing else. */
.mn-minemap img { width: 100%; height: auto; display: block; opacity: .62; }

/* `left`, never `inset-inline-start`. The percentages are geography: on an RTL
   page the logical property resolves to `right` and mirrors the country, which
   puts سونگون in Khorasan and فیروزه نیشابور in Azerbaijan.

   A link, not a marker. Every pin is a real published project, so the obvious
   thing to do with one is open it. */
.mn-minemap-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    color: inherit;
    text-decoration: none;
}
.mn-minemap-pin:hover { z-index: 2; }
.mn-minemap-pin:focus-visible { outline: 2px solid var(--mn-accent); outline-offset: 4px; }

/* The one round thing in a square system. A map pin that is not a dot does not
   read as a map pin, so --mn-radius is overridden here on purpose. */
.mn-minemap-dot {
    display: block;
    width: 11px;
    height: 11px;
    background: var(--mn-accent);
    border: 2px solid var(--mn-navy);
    border-radius: 50%;
}
.mn-minemap-pin.is-primary .mn-minemap-dot {
    width: 13px;
    height: 13px;
    background: var(--mn-brand);
}

.mn-minemap-label {
    position: absolute;
    top: 14px;
    right: 50%;
    transform: translateX(50%);
    white-space: nowrap;
    font-size: 11.5px;
    font-weight: 600;
    /* The page ground at 90%, so a label over a province border stays readable
       without hiding the border entirely. */
    background: rgba(242, 242, 243, .9);
    padding: 1px 5px;
}
.mn-minemap-pin.is-primary .mn-minemap-label { top: 15px; }

/* Pins cluster: two mines in one province land a few pixels apart and their
   labels overlap. Hovering lifts one clear of the other and darkens it, which
   is cheaper and steadier than trying to lay the labels out without collisions. */
.mn-minemap-pin:hover .mn-minemap-label {
    background: var(--mn-navy);
    color: #fff;
}
.mn-minemap-pin:hover .mn-minemap-dot { border-color: var(--mn-accent-700); }

/* The open pin drops its label: the card beside it carries the full name, the
   label would be the same word twice, and a label is wider than the dot it
   belongs to so the card clipped it. The dot grows instead, which is what marks
   which pin the card belongs to. */
.mn-minemap-pin.is-open .mn-minemap-label { opacity: 0; }
.mn-minemap-pin.is-open .mn-minemap-dot {
    width: 15px;
    height: 15px;
    border-color: var(--mn-navy);
    box-shadow: 0 0 0 4px var(--mn-brand-tint);
}

/* ---- the card behind a pin ------------------------------------------------ */
/* Anchored to the pin's own point, which is why it shares the pin's left/top and
   then translates itself clear. Which way it translates is decided server-side
   from the pin's position (is-east/is-west, is-above/is-below), so a mine on the
   eastern border opens westward and never pushes its card off the picture. No
   measuring, no reflow, correct on the first frame. */
.mn-minecard {
    position: absolute;
    z-index: 5;
    width: 300px;
    max-width: 78vw;
    background: var(--mn-bg);
    border: 1px solid var(--mn-divider);
    box-shadow: var(--mn-shadow-lg);
    text-align: start;
}
/* Offsets on the `translate` property, NOT on `transform`.
   x-transition writes an inline `transform: scale(1)` while it animates, which
   silently overwrote the translate that positions this card: every card landed
   on top of its own pin, and a pin near the border put its card off the picture.
   `translate` is a separate property Alpine never touches, so the two cannot
   collide again. The transition was dropped as well; see the view.
   The 10-12px clears the pin's own dot and halo. */
.mn-minecard.is-east  { margin-left: 10px; }
.mn-minecard.is-west  { margin-left: -10px; translate: -100% 0; }
.mn-minecard.is-below { margin-top: -12px; }
.mn-minecard.is-above { margin-top: 12px; translate: 0 -100%; }
.mn-minecard.is-west.is-above { translate: -100% -100%; }

.mn-minecard-close {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    z-index: 1;
    width: 28px;
    height: 28px;
    border: 0;
    background: rgba(29, 31, 32, .55);
    color: #fff;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.mn-minecard-close:hover { background: var(--mn-navy); }

.mn-minecard-photo {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    background: var(--mn-surface);
}

.mn-minecard-body { padding: var(--mn-3) var(--mn-4) var(--mn-4); }

.mn-minecard-title {
    display: flex;
    align-items: center;
    gap: var(--mn-2);
    flex-wrap: wrap;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 4px;
}

/* Commodity · stage · province, separated by the dot rather than by a border:
   three short words do not need three boxes. */
.mn-minecard-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--mn-2);
    font-size: 12px;
    color: var(--mn-muted);
    margin-bottom: var(--mn-2);
}
.mn-minecard-meta span + span::before { content: "·"; margin-inline-end: var(--mn-2); }

.mn-minecard-note {
    margin: 0 0 var(--mn-3);
    font-size: 12.5px;
    line-height: 1.95;
    color: var(--mn-muted-strong);
}

/* Two columns, label then value, and only the rows that have a value. A spec
   list padded out with «—» makes the card look unfinished. */
.mn-minecard-specs {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px var(--mn-3);
    margin: 0 0 var(--mn-3);
    font-size: 12px;
}
.mn-minecard-specs dt { color: var(--mn-muted); }
.mn-minecard-specs dd { margin: 0; font-weight: 600; }
.mn-minecard-specs:empty { display: none; }

/* On a phone the map is about 350px wide and a card anchored to a pin covers
   most of it wherever it opens. Docked to the bottom of the map instead: it is
   the same card, it just stops playing at being a tooltip. */
@media (max-width: 620px) {
    .mn-minecard,
    .mn-minecard.is-east,
    .mn-minecard.is-west,
    .mn-minecard.is-above,
    .mn-minecard.is-below,
    .mn-minecard.is-west.is-above,
    .mn-minecard.is-east.is-above,
    .mn-minecard.is-west.is-below {
        position: fixed;
        inset: auto 0 0 0;
        width: auto;
        max-width: none;
        margin: 0;
        transform: none;
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* ---- the admin side of the map -------------------------------------------- */
/* A card per project, not a table row: the photo and the note do not fit a cell,
   and cramming them in produced a row too tall to scan anyway. */
.mn-mapadmin { display: flex; flex-direction: column; gap: var(--mn-3); }

.mn-mapadmin-row {
    border: 1px solid var(--mn-divider);
    background: var(--mn-bg);
    padding: var(--mn-3) var(--mn-4) var(--mn-4);
}
/* Pinned rows carry the brand edge, so «what is on the map» is answerable by
   scrolling rather than by reading every checkbox. */
.mn-mapadmin-row.is-pinned { border-inline-start: 3px solid var(--mn-brand); }

.mn-mapadmin-head {
    display: flex;
    align-items: center;
    gap: var(--mn-3);
    flex-wrap: wrap;
    padding-bottom: var(--mn-3);
    border-bottom: 1px solid var(--mn-divider-soft);
    margin-bottom: var(--mn-3);
}

.mn-mapadmin-body { display: flex; gap: var(--mn-4); align-items: flex-start; }
@media (max-width: 900px) { .mn-mapadmin-body { flex-wrap: wrap; } }

.mn-mapadmin-photo {
    flex: none;
    width: 160px;
    display: flex;
    flex-direction: column;
    gap: var(--mn-2);
}
.mn-mapadmin-photo img {
    display: block;
    width: 160px;
    height: 107px;
    object-fit: cover;
    border: 1px solid var(--mn-divider);
}
.mn-mapadmin-nophoto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 107px;
    border: 1px dashed var(--mn-divider);
    color: var(--mn-muted);
    font-size: 12px;
}
.mn-mapadmin-photo input[type="file"] { font-size: 11.5px; max-width: 160px; }

.mn-mapadmin-fields {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--mn-3);
}
@media (max-width: 760px) { .mn-mapadmin-fields { grid-template-columns: 1fr 1fr; } }
.mn-mapadmin-fields .mn-input { min-height: 32px; font-size: 12.5px; }
/* The fields here are <label class="mn-field"><span>caption</span><input></label>,
   so the wrapper IS the label and the caption is a span. .mn-field > label does
   not reach it. */
.mn-mapadmin-fields .mn-field { margin-bottom: 0; }
.mn-mapadmin-fields .mn-field > span {
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 4px;
    color: var(--mn-muted-strong);
}
/* The note spans the row under the three short fields. */
.mn-mapadmin-note { grid-column: 1 / -1; }
.mn-mapadmin-note textarea { min-height: 62px; }


.mn-minemap-rail { border: 1px solid var(--mn-divider); }
.mn-minemap-rail-head {
    padding: 13px 16px;
    border-bottom: 1px solid var(--mn-divider);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--mn-muted);
}
/* A button now, not a row of text. It was inert because it had nowhere to go;
   بند 6 gave it one -- it selects the province and the panel above answers with
   five numbers. */
.mn-minemap-rail-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 16px;
    border: 0;
    border-bottom: 1px solid var(--mn-divider-soft);
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
}
.mn-minemap-rail-row:hover:not(:disabled) { background: var(--mn-hover-tint); }
.mn-minemap-rail-row:disabled { cursor: default; }
.mn-minemap-rail-row:last-child { border-bottom: 0; }
.mn-minemap-rail-name { font-size: 14.5px; font-weight: 500; }
.mn-minemap-rail-count {
    margin-inline-start: auto;
    font-size: 13px;
    color: var(--mn-muted);
}

/* The navy band that closes the client's first screen: a photograph bleeding
   in from one end, the promise, one amber button, and the counters. */
.mn-home-cta {
    position: relative;
    overflow: hidden;
    background: var(--mn-navy);
    color: #fff;
    padding-block: var(--mn-12);
    margin-bottom: var(--mn-8);
}
/* The photograph sits at the END edge, away from the heading, which starts at
   the start edge. inset-inline-START would put it under the title: this is an
   RTL document, so the start edge is the right one. */
.mn-home-cta > img {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 34%;
    height: 100%;
    object-fit: cover;
    opacity: .30;
    -webkit-mask-image: linear-gradient(to right, #000 30%, transparent 100%);
            mask-image: linear-gradient(to right, #000 30%, transparent 100%);
}
.mn-home-cta-body { position: relative; z-index: 1; }
.mn-home-cta h2 { font-size: clamp(20px, 2.6vw, 27px); font-weight: 800; margin: 0 0 var(--mn-2); }
.mn-home-cta .mn-rule {
    display: block;
    width: 54px; height: 3px;
    border-radius: 2px;
    background: var(--mn-brand);
    margin-bottom: var(--mn-4);
}
.mn-home-cta p {
    max-width: 74ch; margin: 0;
    font-size: 14px; line-height: 2; color: rgba(255, 255, 255, .78);
}
.mn-home-cta .mn-btn-secondary { border-color: rgba(255, 255, 255, .30); color: #fff; }
.mn-home-cta .mn-btn-secondary:hover { background: rgba(255, 255, 255, .10); }

/* The counters along the foot of the band. A definition list, because that is
   what a figure and its label are. */
.mn-ctastats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--mn-6);
    margin: var(--mn-12) 0 0;
    padding-top: var(--mn-6);
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.mn-ctastats > div { display: flex; flex-direction: column; gap: 2px; }
.mn-ctastat-icon { color: var(--mn-brand); }
.mn-ctastat-icon svg { width: 22px; height: 22px; stroke-width: 1.6; }
.mn-ctastats dt { font-size: 22px; font-weight: 700; margin-top: var(--mn-2); }
.mn-ctastats dd { margin: 0; font-size: 12px; color: rgba(255, 255, 255, .62); }
.mn-ctastats-note { margin-top: var(--mn-3) !important; font-size: 11.5px !important; color: rgba(255, 255, 255, .48) !important; }

@media (max-width: 720px) {
    .mn-hero { padding-block: var(--mn-8) var(--mn-6); }
    .mn-hero-stats { gap: var(--mn-6); }
    .mn-hero-stats strong { font-size: 18px; }
    .mn-cards, .mn-cards.is-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Numbered explainer steps, used by /guide and /verified. Counter rather than
   list-style so the marker can be styled and sit in the RTL start margin. */
.mn-guide-steps { list-style: none; margin: 0; padding: 0; counter-reset: mn-step; }
.mn-guide-steps li {
    counter-increment: mn-step;
    position: relative;
    padding: var(--mn-3) 0 var(--mn-3) 0;
    padding-inline-start: 34px;
    border-bottom: 1px solid var(--mn-divider-soft);
}
.mn-guide-steps li:last-child { border-bottom: 0; }
.mn-guide-steps li::before {
    content: counter(mn-step);
    position: absolute;
    inset-inline-start: 0;
    top: var(--mn-3);
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: var(--mn-accent-100);
    border: 1px solid var(--mn-accent-300);
    color: var(--mn-accent-700);
    font-size: 11.5px; font-weight: 700;
}
.mn-guide-steps strong { display: block; font-size: 13.5px; margin-bottom: 3px; }
.mn-guide-steps span { display: block; font-size: 13px; line-height: 1.95; color: var(--mn-muted-strong); }

/* Status pages. The code is large and quiet rather than alarming: most people
   who see it arrived at a listing that has been sold. */
.mn-errcode {
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    color: var(--mn-accent-300);
    margin-bottom: var(--mn-4);
}

/* ---- notifications ------------------------------------------------------- */
.mn-bell {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    color: var(--mn-muted-strong);
    border: 1px solid var(--mn-divider);
    background: var(--mn-surface);
    flex: none;
}
.mn-bell:hover { color: var(--mn-text); border-color: var(--mn-accent-400); }
.mn-bell-dot {
    position: absolute;
    top: -6px; inset-inline-end: -6px;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
    background: var(--mn-brand); color: var(--mn-brand-ink);
    font-size: 10.5px; font-weight: 700; line-height: 1;
}

.mn-notifs { list-style: none; margin: 0; padding: 0; }
.mn-notifs li {
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider);
    border-bottom: 0;
}
.mn-notifs li:last-child { border-bottom: 1px solid var(--mn-divider); }
/* Unread is a border and a weight, not a colour block: most of what lands here
   is routine, and a page of alarm-coloured rows hides the one that matters. */
.mn-notifs li.is-unread { border-inline-start: 3px solid var(--mn-brand); }
.mn-notifs li.is-unread .mn-notif-title { font-weight: 700; }

.mn-notif-btn {
    display: block; width: 100%;
    padding: var(--mn-3) var(--mn-4);
    background: none; border: 0; font: inherit; color: inherit;
    text-align: start; cursor: pointer;
}
.mn-notif-btn:hover:not(:disabled) { background: var(--mn-accent-100); }
.mn-notif-btn:disabled { cursor: default; }
.mn-notif-title { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 3px; }
.mn-notif-body { display: block; font-size: 12.5px; line-height: 1.9; color: var(--mn-muted-strong); }
.mn-notif-time { display: block; font-size: 11.5px; color: var(--mn-muted); margin-top: 5px; }


/* ---- the smart map: بند 6 ---------------------------------------------------
   Clickable provinces over the raster, commodity chips above it, and a panel of
   five counts beside it. */

/* The overlay sits in the image's own coordinate space, so a province outline
   and a pin cannot drift apart: both are placed by the same projection. SVG
   space is not mirrored under RTL, which is why the generated paths need no
   flipping. */
.mn-minemap-provinces {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Under the pins: a pin is the smaller target and has to win the click. */
    z-index: 1;
}
.mn-minemap-provinces path {
    fill: transparent;
    stroke: rgba(21, 39, 65, .26);
    stroke-width: 1;
    /* So the outline stays hairline whatever the image is scaled to. */
    vector-effect: non-scaling-stroke;
    pointer-events: all;
    cursor: pointer;
    transition: fill .12s ease;
}
.mn-minemap-provinces a:hover path,
.mn-minemap-provinces a:focus-visible path { fill: rgba(47, 95, 150, .16); }
.mn-minemap-provinces a:focus-visible { outline: none; }
.mn-minemap-provinces a:focus-visible path {
    stroke: var(--mn-accent-700);
    stroke-width: 2;
}
.mn-minemap-provinces a.is-selected path {
    fill: rgba(250, 199, 87, .30);
    stroke: var(--mn-accent-700);
    stroke-width: 1.5;
}

.mn-minemap-chips { margin-bottom: var(--mn-3); }

.mn-minemap-panel {
    border: 1px solid var(--mn-divider);
    border-radius: var(--mn-radius);
    background: var(--mn-surface);
    margin-bottom: var(--mn-4);
    overflow: hidden;
}
.mn-minemap-panel-head {
    display: flex;
    align-items: center;
    gap: var(--mn-2);
    padding: 12px 16px;
    border-bottom: 1px solid var(--mn-divider-soft);
    font-size: 14.5px;
}
.mn-minemap-panel-reset {
    margin-inline-start: auto;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    color: var(--mn-accent);
    cursor: pointer;
}
.mn-minemap-panel-reset:hover { text-decoration: underline; }

/* Each row is a link to the list it counts, so the number can be checked. A
   count nobody can verify is a claim. */
.mn-minemap-stat {
    display: flex;
    align-items: center;
    gap: var(--mn-2);
    padding: 11px 16px;
    border-bottom: 1px solid var(--mn-divider-soft);
    font-size: 13.5px;
    color: inherit;
    text-decoration: none;
}
.mn-minemap-stat:last-child { border-bottom: 0; }
.mn-minemap-stat:hover { background: var(--mn-hover-tint); }
.mn-minemap-stat .mn-num {
    margin-inline-start: auto;
    font-size: 15px;
    font-weight: 700;
    color: var(--mn-accent-800);
}

/* ==========================================================================
   Corners, combo boxes and the closing block

   Three things the client asked for in one round, شهریور ۱۴۰۵:

     1. NO SHARP EDGES anywhere on the public site. The system was designed
        square (`--mn-radius: 0`) and the light theme later set 12px, but only
        the components that actually READ the token became round; everything
        drawn with a bare `background` or `border` stayed at the browser's
        default of zero. This section is the sweep. The staff panel keeps its
        square corners: it is a different product for a different reader, and
        the client asked for it to stay as it is.
     2. The combo boxes are to stop looking like browser defaults, staff
        screens included.
     3. The strip that closes the homepage is to read as ONE block instead of
        three navy bands separated by slivers of white page.
   ========================================================================== */

/* The caret drawn back onto a <select> after appearance:none takes the native
   one away. A data: URI rather than a file, because it is one path and would
   otherwise be one more request; img-src in SecurityHeadersMiddleware allows
   data: for exactly this kind of inline SVG. It cannot inherit currentColor,
   so there is one per ground. */
:root {
    --mn-caret: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4a4d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    /* Named explicitly so the sweep below resolves to a real length on the
       admin panel too, and resolves to ZERO. An undefined var() makes the
       whole declaration invalid, which happens to give the same answer for
       the wrong reason and would break the moment one of these is used in a
       shorthand. */
    --mn-radius-sm: 0;
    --mn-radius-lg: 0;
    --mn-radius-pill: 0;
}
body.mn-public { --mn-caret: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2341546f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
body.mn-public.mn-dash { --mn-caret: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9c0da' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }

/* ---- every combo box in the application ---------------------------------- */

/* By ELEMENT, not by class. Twenty-two views write a bare <select>, and asking
   each of them to carry `.mn-select` is twenty-two edits that a twenty-third
   view will forget.

   A select with `multiple` or `size` is a LIST box: it has no closed state, so
   a caret there would be a lie and is not drawn. */
select:not([multiple]):not([size]) {
    appearance: none;
    -webkit-appearance: none;
    min-height: 40px;
    padding-block: 6px;
    padding-inline-start: var(--mn-3);
    /* Room for the caret, at the inline END. On this always-RTL document that
       is the left, which is where the native control puts it and where a
       Persian reader looks for it. */
    padding-inline-end: 34px;
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mn-text);
    background-color: var(--mn-surface);
    background-image: var(--mn-caret);
    background-repeat: no-repeat;
    background-position: left var(--mn-3) center;
    background-size: 15px 15px;
    border: 1px solid var(--mn-divider);
    border-radius: var(--mn-radius-sm);
    cursor: pointer;
    text-overflow: ellipsis;
    transition: border-color .15s ease, box-shadow .2s ease, background-color .15s ease;
}
select:not([multiple]):not([size]):hover { border-color: var(--mn-border-hover); }
select:not([multiple]):not([size]):focus-visible {
    border-color: var(--mn-accent);
    outline: 0;
    box-shadow: 0 0 0 3px var(--mn-brand-tint);
}
select:disabled { opacity: .55; cursor: not-allowed; }

/* The dropdown list itself is drawn by the operating system and cannot be
   styled. What can be fixed is that its rows inherit the page's font and its
   ground rather than the browser's, which on the dark dashboard is the
   difference between black-on-white and a list that matches the control it
   came out of. */
select option { font: inherit; color: var(--mn-text); background: var(--mn-surface); }

/* A combo box standing on its own in a filter block or a form field fills the
   column it is in. Left to itself it sizes to its widest option, which is why
   three filters in one rail used to be three different widths. Toolbars are
   left alone: there a select sits in a row of controls and must not stretch. */
.mn-filter-block > select,
.mn-field > select,
.mn-field > div > select,
.mn-filterbar select,
.mn-form select,
.mn-formgrid select,
.mn-rfq-form select,
.mn-saved select,
.mn-price-range select { width: 100%; }

/* ---- the search button is a circle --------------------------------------- */
/* The client's own screen draws it round. 42px keeps the pill exactly the
   height it was: the input beside it is 40 and the pill pads by 5. */
body.mn-public .mn-searchpill button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

/* ---- the closing block --------------------------------------------------- */

/* The value strip, the verification band and the footer are three navy
   sections in a row. Each carried its own bottom margin, so the page ended
   navy, white, navy, white, navy. They are one block now, parted by a hairline
   rather than by a sliver of the page showing through. */
body.mn-public .mn-props { margin-bottom: 0; padding-block: var(--mn-8); }
body.mn-public .mn-home-cta {
    margin-bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
}
body.mn-public .mn-footer { border-top: 1px solid rgba(255, 255, 255, .09); }

/* The footer keeps its breathing room after ordinary white content, and gives
   it up when the page already ended on a navy band. The footer is a sibling of
   <main> rather than of the section, so the test has to be «does main end on
   the closing band», which is what :has asks. */
body.mn-public main:has(> .mn-home-cta:last-child) + .mn-footer { margin-top: 0; }

/* ==========================================================================
   The sweep: no sharp edges
   ========================================================================== */

/* Pills: anything that is a word or two on a tinted ground. */
body.mn-public .mn-hero-chips a,
body.mn-public .mn-sort,
body.mn-public .mn-pill,
body.mn-public .mn-syn,
body.mn-public .mn-spectab,
body.mn-public .mn-tag-mode,
body.mn-public .mn-tag-featured,
body.mn-public .mn-badge-verified,
body.mn-public .mn-verified,
body.mn-public .mn-media-badge,
body.mn-public .mn-thread-badge,
body.mn-public .mn-band-flag,
body.mn-public .mn-minemap-label,
body.mn-public .mn-contact-shown,
body.mn-public .mn-notif-btn,
body.mn-public .mn-save-btn,
body.mn-public .mn-filter-clear,
body.mn-public .mn-bell-dot,
body.mn-public .mn-band-progress > span,
body.mn-public .mn-breakdown-bar,
body.mn-public .mn-breakdown-bar i {
    border-radius: var(--mn-radius-pill);
}

/* Round, because these are counters and markers rather than boxes. */
body.mn-public .mn-step-mark,
body.mn-public .mn-wstep-mark,
body.mn-public .mn-guide-steps li::before,
body.mn-public .mn-facet-check,
body.mn-public .mn-minecard-close {
    border-radius: 50%;
}

/* Controls, thumbnails and small surfaces. */
body.mn-public .mn-search-bar,
body.mn-public .mn-price-range input,
body.mn-public .mn-gallery-thumb,
body.mn-public .mn-gallery-stage,
body.mn-public .mn-gallery-videos video,
body.mn-public .mn-media-tile,
body.mn-public .mn-upload-drop,
body.mn-public .mn-msg-form textarea,
body.mn-public .mn-rfq-form input,
body.mn-public .mn-rfq-form select,
body.mn-public .mn-rfq-form textarea,
body.mn-public .mn-saved select,
body.mn-public .mn-doclist a,
body.mn-public .mn-file,
body.mn-public .mn-home-list img,
body.mn-public .mn-bell,
body.mn-public .mn-cattile-badge,
body.mn-public .mn-projsteps-dot {
    border-radius: var(--mn-radius-sm);
}

/* The map raster carries its corners itself. Rounding the frame and clipping
   it would work for the picture and cut the province labels that sit against
   the border, so the radius goes on the image and the pins stay unclipped. */
body.mn-public .mn-minemap img { border-radius: var(--mn-radius-sm); }

/* The zebra rows of a spec table. Rounding each stripe would draw a stack of
   separate boxes; the radius belongs to the table, which then clips the first
   and last stripe into the corner. */
body.mn-public .mn-spectable {
    border-radius: var(--mn-radius-sm);
    overflow: hidden;
}
body.mn-public .mn-specrow:last-child { border-bottom: 0; }

/* A frame around a photograph has to CLIP as well as round, or the picture
   keeps its own square corners inside a rounded box. */
body.mn-public .mn-band-thumb,
body.mn-public .mn-band-photo,
body.mn-public .mn-thread-media,
body.mn-public .mn-minecard-photo,
body.mn-public .mn-panel-row .mn-thumb,
body.mn-public .mn-rowcard-media {
    border-radius: var(--mn-radius-sm);
    overflow: hidden;
}

/* Panels, cards, and anything the eye reads as a sheet of paper. */
body.mn-public .mn-bandcard,
body.mn-public .mn-auth-card,
body.mn-public .mn-choice,
body.mn-public .mn-dev-note,
body.mn-public .mn-review,
body.mn-public .mn-review-errors,
body.mn-public .mn-sellercard,
body.mn-public .mn-thread,
body.mn-public .mn-rfqrow,
body.mn-public .mn-offer,
body.mn-public .mn-permit,
body.mn-public .mn-doc-locked,
body.mn-public .mn-opp,
body.mn-public .mn-panel-link,
body.mn-public .mn-tile,
body.mn-public .mn-chart,
body.mn-public .mn-stage,
body.mn-public .mn-hero-search,
body.mn-public .mn-cattiles-photo a,
body.mn-public .mn-minemap-frame,
body.mn-public .mn-minemap-rail,
body.mn-public .mn-minecard,
body.mn-public .mn-notifs li,
body.mn-public .mn-saved,
body.mn-public .mn-gallery,
body.mn-public .mn-msg-bubble,
body.mn-public .mn-table-wrap,
body.mn-public .mn-tablewrap,
body.mn-public .mn-revision-note {
    border-radius: var(--mn-radius);
}

/* The trend column on the homepage price table. It is the first thing to go
   on a narrow screen: four columns of numbers matter more than the shape. */
.mn-price-spark { width: 132px; }
@media (max-width: 700px) { .mn-price-spark { display: none; } }


/* ==========================================================================
   Roles, the navy map, the navy rail and the price board

   The client's third round of notes, شهریور ۱۴۰۵, six items:
     1. «شما در معدنچی چه کسی هستید؟» must not look like listing cards, and
        each role gets an icon of its own.
     2. The خدمات تخصصی strip: navy cards, amber «مشاهده پروفایل».
     3. The map: the whole thing navy, a province or a mine turns amber when
        clicked, and the data opens in a box beside the point. Twenty-seven
        named mines are on it.
     4. The price board gets its own glyphs, a taller chart, visible up/down,
        and «مشاوره هوشمند خرید و فروش» above the table.
     5. The filter rail is navy and «اعمال» is amber.
     6. A house beside the logo on every inner page.
   ========================================================================== */

/* ---- 1. the role picker --------------------------------------------------- */
/* Icon tiles laid across: glyph on a navy square at the inline start, the name
   and the one-line description after it, a chevron at the end. Nothing here
   is shaped like .mn-card, which is the point: with photographs on top the
   nine tiles were nine more listing cards under the eight real ones. */
.mn-roletiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .mn-roletiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mn-roletiles { grid-template-columns: minmax(0, 1fr); } }
.mn-roletiles a {
    flex-direction: row;
    align-items: center;
    gap: var(--mn-3);
    padding: var(--mn-3) var(--mn-4);
    height: auto;
    background: var(--mn-surface);
    border: 1px solid var(--mn-divider);
    box-shadow: none;
}
.mn-roletiles a:hover {
    transform: none;
    border-color: var(--mn-brand);
    box-shadow: var(--mn-shadow-sm);
}
.mn-roletile-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: var(--mn-radius-sm);
    background: var(--mn-navy);
    color: var(--mn-brand);
    transition: background .15s ease;
}
.mn-roletile-icon svg { width: 28px; height: 28px; stroke-width: 1.5; }
.mn-roletiles a:hover .mn-roletile-icon { background: var(--mn-brand); color: var(--mn-brand-ink); }
.mn-roletile-body { padding: 0; min-width: 0; flex: 1; }
.mn-roletile-name { font-size: 14px; }
.mn-roletile-sub  { font-size: 11.5px; line-height: 1.7; }
.mn-roletile-go {
    flex: none;
    display: flex;
    color: var(--mn-muted);
    transition: color .15s ease, translate .15s ease;
}
.mn-roletiles a:hover .mn-roletile-go { color: var(--mn-brand); translate: -3px 0; }

/* ---- 2. the خدمات تخصصی strip ------------------------------------------- */
/* The provider card on the homepage only: navy ground, light text, and the
   card's own tokens re-pointed so the badge, the facts and the tags inside it
   follow without a second rule each. /services keeps the light card. */
.mn-home-providers .mn-provider-card {
    --mn-surface: #0e2a4a;
    --mn-surface-2: #163a63;
    --mn-text: #eaf0f7;
    --mn-muted: rgba(234, 240, 247, .62);
    --mn-muted-strong: rgba(234, 240, 247, .82);
    --mn-divider: rgba(255, 255, 255, .14);
    --mn-accent: #fac757;
    --mn-hover-tint: rgba(255, 255, 255, .06);
    background: var(--mn-navy);
    border-color: rgba(255, 255, 255, .10);
    color: var(--mn-text);
}
.mn-home-providers .mn-provider-card:hover { border-color: var(--mn-brand-line); }
.mn-home-providers .mn-rowcard-avatar {
    background: rgba(255, 255, 255, .08);
    color: var(--mn-brand);
    border-color: rgba(255, 255, 255, .14);
}
.mn-home-providers .mn-tag-outline {
    color: var(--mn-muted-strong);
    border-color: rgba(255, 255, 255, .22);
    background: transparent;
}
.mn-home-providers .mn-badge-verified {
    background: rgba(250, 199, 87, .16);
    color: var(--mn-brand);
    border-color: rgba(250, 199, 87, .45);
}

/* ---- 3. the navy map ------------------------------------------------------ */
/* Drawn, not pictured: the province outlines on a navy ground. The frame's
   tokens are re-pointed for a dark surface so the labels on it read without
   one override per element. */
.mn-minemap-frame {
    --mn-text: #eaf0f7;
    --mn-muted: rgba(234, 240, 247, .62);
    --mn-muted-strong: rgba(234, 240, 247, .82);
    --mn-divider: rgba(255, 255, 255, .14);
    background: var(--mn-navy);
    padding: 14px;
    color: var(--mn-text);
}
.mn-minemap-frame > .corner::before,
.mn-minemap-frame > .corner::after { background: var(--mn-brand); }

/* The frame keeps the raster's aspect (set inline from IranMapImage) so the
   pin percentages still land where they were computed for. */
.mn-minemap { width: 100%; }

/* Provinces: a lighter navy on the navy ground, a hairline between them, a
   lift on hover, and AMBER when selected, which is the client's instruction. */
.mn-minemap-provinces path {
    fill: #1a3d66;
    stroke: rgba(255, 255, 255, .28);
    stroke-width: 1;
    transition: fill .15s ease;
}
.mn-minemap-provinces a:hover path,
.mn-minemap-provinces a:focus-visible path { fill: #2a5a8f; }
.mn-minemap-provinces a:focus-visible path { stroke: var(--mn-brand); stroke-width: 2; }
.mn-minemap-provinces a.is-selected path {
    fill: var(--mn-brand);
    stroke: #0b1f38;
    stroke-width: 1.5;
}

/* Pins: a pale dot, and amber once opened. The verified project pin used to
   be the amber one; amber now means «selected», so it carries a white ring
   instead. A landmark's dot is a shade smaller than a project's, since there
   are twenty-seven of them. */
.mn-minemap-pin { z-index: 2; }
.mn-minemap-dot {
    width: 10px;
    height: 10px;
    background: #cfe0f5;
    border: 2px solid #0b1f38;
    box-shadow: 0 0 0 1.5px rgba(207, 224, 245, .55);
    transition: background .15s ease, box-shadow .15s ease, width .15s ease, height .15s ease;
}
.mn-minemap-pin.is-landmark .mn-minemap-dot { width: 9px; height: 9px; }
.mn-minemap-pin.is-primary .mn-minemap-dot {
    width: 12px;
    height: 12px;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
}
.mn-minemap-pin:hover .mn-minemap-dot { background: #ffffff; border-color: #0b1f38; }
.mn-minemap-pin.is-open .mn-minemap-dot,
.mn-minemap-pin.is-primary.is-open .mn-minemap-dot {
    width: 15px;
    height: 15px;
    background: var(--mn-brand);
    border-color: #0b1f38;
    box-shadow: 0 0 0 5px rgba(250, 199, 87, .30);
}
.mn-minemap-pin:focus-visible { outline: 2px solid var(--mn-brand); }

/* Labels over navy: a translucent navy plate with light text, amber when the
   pin is hovered, and hidden once the card is open (the card carries the full
   name). */
.mn-minemap-label {
    top: 13px;
    background: rgba(8, 30, 56, .82);
    color: #eaf0f7;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 3px;
}
.mn-minemap-pin.is-landmark .mn-minemap-label { top: 12px; font-size: 10.5px; font-weight: 500; }

/* Labels are wider than the dots they name, so in a cluster one mine's label
   lies over the next mine's dot and takes its click. The label does not take
   clicks unless its own pin is already hovered: arriving from outside, a
   click passes through the label to the dot beneath; arriving from the dot,
   the pin is hovered and its label stays live. The dot itself gets a 25px hit
   area behind it so a finger can land on it. */
.mn-minemap-label { pointer-events: none; }
.mn-minemap-pin:hover .mn-minemap-label,
.mn-minemap-pin:focus-visible .mn-minemap-label { pointer-events: auto; }
.mn-minemap-dot { position: relative; }
.mn-minemap-dot::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
}
.mn-minemap-pin:hover { z-index: 3; }
.mn-minemap-pin.is-label-above .mn-minemap-label { top: auto; bottom: 12px; }
.mn-minemap-pin.is-label-beside .mn-minemap-label {
    top: 50%;
    right: auto;
    left: 11px;
    transform: translateY(-50%);
}
.mn-minemap-pin:hover .mn-minemap-label { background: var(--mn-brand); color: var(--mn-brand-ink); }

/* The legend under the frame. */
.mn-minemap-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mn-2) var(--mn-4);
    margin-top: var(--mn-3);
    font-size: 12px;
    color: var(--mn-muted);
}
.mn-minemap-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mn-minemap-legend .mn-minemap-dot { display: inline-block; box-shadow: none; }
.mn-minemap-legend .is-legend-landmark { background: #cfe0f5; border-color: var(--mn-navy); width: 9px; height: 9px; }
.mn-minemap-legend .is-legend-project  { background: #ffffff; border-color: var(--mn-navy); box-shadow: 0 0 0 2px rgba(29, 45, 61, .35); }
.mn-minemap-legend .is-legend-selected { background: var(--mn-brand); border-color: var(--mn-navy); }

/* The card beside a pin keeps the light surface: it is a reading surface,
   and light-on-navy for two paragraphs is harder work than a white box on
   the dark map. It carries the frame's tokens back to the light values. */
.mn-minecard {
    --mn-text: #152741;
    --mn-muted: #6b7b90;
    --mn-muted-strong: #46586f;
    --mn-divider: #e4e8f0;
    background: #ffffff;
    color: var(--mn-text);
    border: 0;
    border-top: 3px solid var(--mn-brand);
}
.mn-minecard-kicker {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--mn-warn);
    margin-bottom: 3px;
}
.mn-minecard-links { display: flex; flex-wrap: wrap; gap: var(--mn-2); }
.mn-minecard-links .mn-btn { flex: 1 1 auto; justify-content: center; }
.mn-minecard.is-landmark { width: 290px; }

/* The named mines inside a province's panel: the other way to open a card.
   Amber text, not an amber ground, when its card is the open one. */
.mn-minemap-mines { border-top: 1px solid var(--mn-divider-soft); }
.mn-minemap-mines-head {
    display: flex;
    align-items: center;
    gap: var(--mn-2);
    padding: 10px 16px 6px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--mn-muted);
}
.mn-minemap-mines-head .mn-num { margin-inline-start: auto; font-weight: 700; color: var(--mn-accent-800); }
.mn-minemap-mine {
    display: flex;
    align-items: baseline;
    gap: var(--mn-2);
    width: 100%;
    padding-block: 8px;
    padding-inline: 30px 16px;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
    position: relative;
}
.mn-minemap-mine::before {
    content: "";
    position: absolute;
    inset-inline-start: 16px;
    top: 14px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mn-accent-400);
}
.mn-minemap-mine:hover { background: var(--mn-hover-tint); }
.mn-minemap-mine.is-on { color: var(--mn-warn); font-weight: 600; }
.mn-minemap-mine.is-on::before { background: var(--mn-brand); box-shadow: 0 0 0 3px var(--mn-brand-tint); }
.mn-minemap-mine-name { font-size: 13px; }
.mn-minemap-mine-what { margin-inline-start: auto; font-size: 11.5px; color: var(--mn-muted); font-weight: 400; }

/* ---- 5. the navy filter rail --------------------------------------------- */
/* Every rail on the platform (/search, /services, /projects, /investment) in
   one rule: the card is navy, its tokens are re-pointed so the facets, the
   inputs and the combo boxes inside follow, and «اعمال» is the amber button
   in the views. */
.mn-filters {
    --mn-surface: #0e2a4a;
    --mn-surface-2: #163a63;
    --mn-bg: #0e2a4a;
    --mn-text: #eaf0f7;
    --mn-muted: rgba(234, 240, 247, .62);
    --mn-muted-strong: rgba(234, 240, 247, .82);
    --mn-divider: rgba(255, 255, 255, .16);
    --mn-divider-soft: rgba(255, 255, 255, .10);
    --mn-accent: #fac757;
    --mn-accent-600: #fac757;
    --mn-accent-700: #fac757;
    --mn-hover-tint: rgba(255, 255, 255, .07);
    --mn-placeholder: rgba(234, 240, 247, .40);
    --mn-border-hover: rgba(255, 255, 255, .40);
    --mn-danger: #ffb4a8;
    --mn-caret: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eaf0f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background: var(--mn-navy);
    border-color: rgba(255, 255, 255, .10);
    color: var(--mn-text);
    color-scheme: dark;
}
.mn-filters .mn-facet-item.is-on { color: var(--mn-brand); }
.mn-filters .mn-facet-item.is-on .mn-facet-check { background: var(--mn-brand); border-color: var(--mn-brand); }
.mn-filters .mn-facet-check { background: rgba(255, 255, 255, .06); }
.mn-filters .mn-price-range input,
.mn-filters .mn-input,
.mn-filters select:not([multiple]):not([size]) {
    background-color: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .18);
    color: var(--mn-text);
}
.mn-filters select option { color: #152741; background: #ffffff; }
.mn-filters .mn-btn-secondary { border-color: rgba(255, 255, 255, .28); color: var(--mn-text); }

/* ---- 4. the price board --------------------------------------------------- */
.mn-home-h2-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--mn-radius-sm);
    background: var(--mn-navy);
    color: var(--mn-brand);
}
.mn-home-h2-icon svg { width: 20px; height: 20px; }
/* The head's amber rule sits before the icon now, not before the heading. */
.mn-home-head .mn-home-h2-icon { order: -1; }

.mn-price-name { display: inline-flex; align-items: center; gap: var(--mn-2); }
.mn-ore-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--mn-accent-100);
    color: var(--mn-accent-700);
}
.mn-ore-icon svg { width: 17px; height: 17px; }

.mn-delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; }
.mn-delta svg { display: block; flex: none; }
.mn-delta-flat { color: var(--mn-muted); }

/* The chart: 132 x 44, twice the height it was, area filled under the line,
   coloured by the direction of the change. */
.mn-spark { display: block; width: 132px; height: 44px; }
.mn-spark-line { stroke: var(--mn-accent-500); stroke-width: 1.6; }
.mn-spark-area { fill: var(--mn-accent-500); fill-opacity: .14; }
.mn-spark.is-up   .mn-spark-line { stroke: var(--mn-ok); }
.mn-spark.is-up   .mn-spark-area { fill: var(--mn-ok); }
.mn-spark.is-down .mn-spark-line { stroke: var(--mn-danger); }
.mn-spark.is-down .mn-spark-area { fill: var(--mn-danger); }
.mn-pricetable td { vertical-align: middle; }

/* «مشاوره هوشمند خرید و فروش»: a navy strip over the table, one card per
   mineral, three labelled rows in each. */
.mn-advice {
    margin-bottom: var(--mn-4);
    padding: var(--mn-4);
    background: var(--mn-navy);
    color: #eaf0f7;
    border-radius: var(--mn-radius);
}
.mn-advice-head { display: flex; align-items: center; gap: var(--mn-3); margin-bottom: var(--mn-4); }
.mn-advice-head strong { display: block; font-size: 15px; }
.mn-advice-head span { display: block; font-size: 12px; color: rgba(234, 240, 247, .66); }
.mn-advice-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--mn-brand);
    color: var(--mn-brand-ink);
}
.mn-advice-icon svg { width: 22px; height: 22px; }
.mn-advice-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--mn-3);
}
.mn-advice-card {
    padding: var(--mn-3) var(--mn-4);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--mn-radius-sm);
}
.mn-advice-mineral {
    display: flex;
    align-items: center;
    gap: var(--mn-2);
    padding-bottom: var(--mn-2);
    margin-bottom: var(--mn-2);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: 14px;
}
.mn-advice-mineral .mn-ore-icon { background: rgba(255, 255, 255, .10); color: var(--mn-brand); }
.mn-advice-rows { margin: 0; display: flex; flex-direction: column; gap: var(--mn-2); }
.mn-advice-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--mn-2); font-size: 12.5px; }
.mn-advice-row dt { color: rgba(234, 240, 247, .66); font-size: 11.5px; padding-top: 2px; }
.mn-advice-row dd { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.mn-advice-row a { color: #ffffff; font-weight: 600; text-decoration: none; }
.mn-advice-row a:hover { color: var(--mn-brand); }
.mn-advice-price { color: var(--mn-brand); font-size: 14px; }
.mn-advice-meta { flex-basis: 100%; font-size: 11.5px; color: rgba(234, 240, 247, .62); }
.mn-advice-meta a { font-weight: 500; color: var(--mn-brand); }
.mn-advice-row.is-none dd > span:first-child { color: rgba(234, 240, 247, .82); }
.mn-advice .mn-badge-verified {
    background: rgba(250, 199, 87, .16);
    color: var(--mn-brand);
    border-color: rgba(250, 199, 87, .45);
}

/* ---- 6. the house beside the logo ---------------------------------------- */
.mn-nav-home {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--mn-radius-sm);
    color: var(--mn-brand);
    background: rgba(255, 255, 255, .08);
    transition: background .15s ease, color .15s ease;
}
.mn-nav-home:hover { background: var(--mn-brand); color: var(--mn-brand-ink); }
.mn-nav-home svg { width: 19px; height: 19px; }