/* ─────────────────────────────────────────────────────────────────────
   HOMEi Marketing — «فلو التسويق» (MKT-DS-1, HO-3339; design approved by
   Islam 30-9-2026 on the house design system, from the DS v1.0 starter).

   Screens: the strategy library (marketing-strategy), the monthly plan
   (growth-monthly-plans/{id}), the content item (growth-content-items/{id})
   and the proposal review (growth-plan-proposals/{id}).

   Colours: the house tokens (--lm-d-* in resources/css/tokens.css, with
   their dark mirror); no colour literal here — the ratchet holds this sheet
   at zero. Text never under 12px. RTL-safe: logical properties only.
   Scoped by `.mk-page` (the page class) and `.mk`.

   Registered as a Filament asset — a change here ships NOTHING until
   `php artisan filament:assets` is run and public/css/app/ is committed in
   the same change.
   ──────────────────────────────────────────────────────────────────── */

/* ── 1. the ground and the head ── */
body:has(.mk-page) { background: var(--lm-d-page); }
body:has(.mk-page) .fi-main-ctn { background: transparent; }
.mk-page .fi-header-heading { font-size: 28px; font-weight: 700; line-height: 1.25; color: var(--lm-d-ink); }
.mk-page .fi-header-subheading { margin-block-start: 4px; font-size: 14px; color: var(--lm-d-muted); }

.mk { display: flex; flex-direction: column; gap: 14px; color: var(--lm-d-ink); }
.mk :focus-visible { outline: 2px solid var(--lm-d-info); outline-offset: 2px; }
.mk .mk-num { font-variant-numeric: tabular-nums; }
.mk bdi { unicode-bidi: isolate; }

/* the page's header actions (Filament): outline buttons, the main decision is the orange */
.mk-page .fi-header-actions-ctn .fi-btn {
    min-block-size: 44px;
    border-radius: 12px;
    padding-inline: 16px;
    background: var(--lm-d-surface);
    color: var(--lm-d-ink);
    box-shadow: inset 0 0 0 1px var(--lm-d-control-edge);
    font-weight: 700;
}
.mk-page .fi-header-actions-ctn .fi-btn .fi-icon { color: currentColor; }
.mk-page .fi-header-actions-ctn .fi-btn:is(.fi-color-primary, .fi-color-success) { background: var(--lm-d-accent); color: var(--lm-d-on-accent); box-shadow: 0 4px 12px var(--lm-d-accent-soft); }
.mk-page .fi-header-actions-ctn .fi-btn.fi-color-danger { color: var(--lm-d-danger); box-shadow: inset 0 0 0 1px var(--lm-d-gap-edge); }

/* the HR/marketing section strip (project-360.css, HR-SECTIONS-1) visually hides the page heading under it;
   the house header keeps its title — the approved design carries the status tag in it */
.mk-page.fi-page:has(.hr-strip) .fi-header-heading { position: static; inline-size: auto; block-size: auto; overflow: visible; clip: auto; white-space: normal; }
/* … and hides the whole header when the page has no actions (project-360.css:1497) — a house page always shows its title */
.mk-page.fi-page:has(.hr-strip) .fi-header:not(:has(button, a)) { display: flex; }

/* ── 2. text tones (words and figures only) ── */
.mk .is-ink { color: var(--lm-d-ink); }
.mk .is-muted { color: var(--lm-d-muted); }
.mk .is-ok { color: var(--lm-d-ok); }
.mk .is-warn { color: var(--lm-d-warn); }
.mk .is-danger { color: var(--lm-d-danger); }
.mk .is-accent { color: var(--lm-d-accent-ink); }
.mk .is-info { color: var(--lm-d-info); }

/* ── 3. the numbers strip (KPI row): label · big figure · one line under it ── */
.mk-strip {
    display: grid;
    grid-template-columns: repeat(var(--mk-cols, 6), minmax(0, 1fr));
    background: var(--lm-d-surface);
    border: 1px solid var(--lm-d-border);
    border-radius: 16px;
    box-shadow: 0 1px 2px var(--lm-d-shadow);
}
.mk-strip-c { padding: 12px 18px; border-inline-start: 1px solid var(--lm-d-divider); min-inline-size: 0; }
.mk-strip-c:first-child { border-inline-start: 0; }
a.mk-strip-c, button.mk-strip-c { color: inherit; text-decoration: none; background: none; border-block: 0; border-inline-end: 0; text-align: start; font: inherit; cursor: pointer; }
a.mk-strip-c:hover, button.mk-strip-c:hover { background: var(--lm-d-hover); }
.mk-k-l { font-size: 13px; color: var(--lm-d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-k-v { font-size: 26px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-k-s { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 4. the card with the blue rule (the page's main surface) ── */
.mk-card {
    background: var(--lm-d-surface);
    border: 1px solid var(--lm-d-border);
    border-block-start: 3px solid var(--lm-d-info);
    border-radius: 16px;
    box-shadow: 0 1px 2px var(--lm-d-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mk-card--plain { border-block-start-width: 1px; border-block-start-color: var(--lm-d-border); }
.mk-card-h {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 12px 18px;
    border-block-end: 1px solid var(--lm-d-divider);
}
.mk-card-t { font-size: 20px; font-weight: 700; margin: 0; }
.mk-card-t span { font-size: 14px; font-weight: 500; color: var(--lm-d-muted); }
.mk-card-b { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }

/* ── 5. view pills (the page's views / tabs): navy when on ── */
.mk-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mk-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 40px;
    padding-inline: 16px;
    border-radius: 20px;
    border: 1px solid var(--lm-d-border);
    background: var(--lm-d-surface);
    color: var(--lm-d-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}
.mk-pill:hover { border-color: var(--lm-d-control-edge); }
.mk-pill.is-on { background: var(--lm-d-tab-on-bg); border-color: var(--lm-d-tab-on-bg); color: var(--lm-d-tab-on-ink); }
.mk-pill-n { font-variant-numeric: tabular-nums; }
/* a pill that leaves the page (the flow's door beside the views): quiet, dashed edge */
.mk-pill--link { border-style: dashed; color: var(--lm-d-muted); font-weight: 500; }
.mk-pill--link:hover { color: var(--lm-d-ink); }
/* a collapsible plain card (details/summary): the head is the summary, the marker sits at the end */
.mk-details > summary { list-style: none; cursor: pointer; }
.mk-details > summary::-webkit-details-marker { display: none; }
.mk-details > summary::after { content: '⌄'; color: var(--lm-d-subtle); font-size: 18px; line-height: 1; margin-inline-start: auto; }
.mk-details[open] > summary::after { content: '⌃'; }
/* a journey line in a card head (a title, not a choice): numbered steps with quiet arrows */
.mk-journey { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--lm-d-muted); counter-reset: mkj; }
.mk-journey li { counter-increment: mkj; white-space: nowrap; }
.mk-journey li::before { content: counter(mkj) '. '; font-variant-numeric: tabular-nums; }
.mk-journey li + li::after { content: ''; }
.mk-journey li + li { padding-inline-start: 18px; position: relative; }
.mk-journey li + li::before { content: '←'; position: absolute; inset-inline-start: 0; color: var(--lm-d-dot); }
[dir='ltr'] .mk-journey li + li::before { content: '→'; }
.mk-journey li + li span::before { content: counter(mkj) '. '; font-variant-numeric: tabular-nums; }
.mk-dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--lm-d-info); flex: none; }
.mk-dot.is-accent { background: var(--lm-d-accent); }
.mk-dot.is-ok { background: var(--lm-d-ok); }
.mk-dot.is-danger { background: var(--lm-d-danger); }
.mk-pill.is-on .mk-dot { background: var(--lm-d-accent); }

/* ── 6. status chips with counts (filters on the list's toolbar row) ── */
.mk-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mk-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 34px;
    padding-inline: 12px;
    border: 1px solid var(--lm-d-border);
    border-radius: 10px;
    background: var(--lm-d-page);
    color: var(--lm-d-muted);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.mk-chip b { color: var(--lm-d-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.mk-chip:hover { background: var(--lm-d-chip-bg); }
.mk-chip.is-on { background: var(--lm-d-info-soft); border-color: var(--lm-d-info-soft); color: var(--lm-d-info); }
.mk-chip.is-on b { color: var(--lm-d-info); }

/* ── 7. toolbar: search (the panel-wide dictation mic attaches itself) + a small segmented toggle ── */
.mk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 18px; border-block-end: 1px solid var(--lm-d-divider); }
.mk-search { margin-inline-start: auto; inline-size: min(320px, 100%); block-size: 38px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--lm-d-control-edge); border-radius: 10px; background: var(--lm-d-surface); color: var(--lm-d-muted); }
.mk-search .mk-ic { inline-size: 16px; block-size: 16px; flex: none; }
.mk-search input { flex: 1; min-inline-size: 0; block-size: 34px; border: 0; outline: 0; background: transparent; color: var(--lm-d-ink); font: inherit; font-size: 13.5px; }
.mk-search input::placeholder { color: var(--lm-d-muted); }
.mk-search:focus-within { border-color: var(--lm-d-accent); box-shadow: 0 0 0 3px var(--lm-d-accent-soft); }
.mk-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--lm-d-border); border-radius: 10px; background: var(--lm-d-surface); }
.mk-seg button { block-size: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--lm-d-muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.mk-seg button:hover { color: var(--lm-d-ink); }
.mk-seg button.is-on { background: var(--lm-d-chip-bg); color: var(--lm-d-ink); font-weight: 700; }

/* ── 8. the split: the list (start) and the item opened beside it (end) ── */
.mk-split { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.mk-split.has-open { grid-template-columns: minmax(0, 1fr) 360px; }
.mk-split:not(.has-open) .mk-panel { display: none; }
.mk-list { min-inline-size: 0; }
.mk-split.has-open .mk-list { border-inline-end: 1px solid var(--lm-d-divider); }

/* a Filament table flattened into the card */
:is(.mk-list, .mk-doc-main) .fi-ta-ctn { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
:is(.mk-list, .mk-doc-main) .fi-ta-header-ctn { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding-inline: 18px 12px; border-block-end: 1px solid var(--lm-d-divider); }
:is(.mk-list, .mk-doc-main) .fi-ta-header-ctn > * { border: 0; }
:is(.mk-list, .mk-doc-main) .fi-ta-header { padding: 10px 0; flex: 1 1 auto; min-inline-size: 0; }
:is(.mk-list, .mk-doc-main) .fi-ta-header-toolbar { padding: 8px 0; flex: 0 0 auto; border: 0; }
:is(.mk-list, .mk-doc-main) .fi-ta-search-field { max-inline-size: 260px; }
:is(.mk-list, .mk-doc-main) .fi-ta-header-cell { background: var(--lm-d-surface); color: var(--lm-d-ink); font-size: 13.5px; font-weight: 700; padding-inline: 8px; white-space: nowrap; }
:is(.mk-list, .mk-doc-main) .fi-ta-cell { padding-inline: 8px; color: var(--lm-d-ink); }
:is(.mk-list, .mk-doc-main) .fi-ta-row:hover > td { background: var(--lm-d-hover); }
.mk-list .fi-ta-row { cursor: pointer; }
.mk-list .fi-ta-row.mk-row-open > td { background: var(--lm-d-row-hl); }
.mk-list .fi-ta-row.mk-row-open > td:first-child { box-shadow: inset -3px 0 0 var(--lm-d-accent); }
[dir='ltr'] .mk-list .fi-ta-row.mk-row-open > td:first-child { box-shadow: inset 3px 0 0 var(--lm-d-accent); }
:is(.mk-list, .mk-doc-main) .fi-ta-actions .fi-btn:is(.fi-color-success, .fi-color-primary) { background: var(--lm-d-accent); color: var(--lm-d-on-accent); }

/* a hand-built table (when the list is not a Filament table) */
.mk-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.mk-table th { text-align: start; padding: 10px 12px; color: var(--lm-d-ink); font-weight: 700; font-size: 13.5px; border-block-end: 1px solid var(--lm-d-border); white-space: nowrap; }
.mk-table td { padding: 10px 12px; border-block-end: 1px solid var(--lm-d-divider); color: var(--lm-d-ink); vertical-align: middle; }
.mk-table tbody tr { cursor: pointer; }
.mk-table tbody tr:hover > td { background: var(--lm-d-hover); }
.mk-table tbody tr.is-open > td { background: var(--lm-d-row-hl); }
.mk-table tbody tr.is-open > td:first-child { box-shadow: inset -3px 0 0 var(--lm-d-accent); }
[dir='ltr'] .mk-table tbody tr.is-open > td:first-child { box-shadow: inset 3px 0 0 var(--lm-d-accent); }
.mk-table td.is-name { font-weight: 700; }
.mk-table tfoot td { background: var(--lm-d-info-soft); font-weight: 700; border: 0; }
.mk-dim { color: var(--lm-d-muted); font-size: 12.5px; }

/* ── 9. the panel (the opened item): head · own scroll · buttons pinned at the foot ── */
.mk-panel { position: sticky; inset-block-start: 12px; display: flex; flex-direction: column; background: var(--lm-d-surface); max-block-size: calc(100dvh - 120px); min-block-size: 420px; }
.mk-p { display: flex; flex-direction: column; min-block-size: 0; flex: 1 1 auto; }
.mk-p-h { padding: 14px 18px 12px; border-block-end: 1px solid var(--lm-d-divider); }
.mk-p-t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; }
.mk-p-x { margin-inline-start: auto; inline-size: 32px; block-size: 32px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--lm-d-border); background: var(--lm-d-surface); color: var(--lm-d-muted); font: inherit; font-size: 13px; cursor: pointer; }
.mk-p-s { margin-block-start: 2px; font-size: 13px; color: var(--lm-d-muted); }
.mk-p-b { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.mk-p-f { padding: 12px 18px; border-block-start: 1px solid var(--lm-d-divider); display: flex; gap: 8px; }
.mk-p-f > .mk-btn { flex: 1 1 0; justify-content: center; }

/* ── 10. status tag (a dot + a word) ── */
.mk-tag { display: inline-flex; align-items: center; gap: 6px; min-block-size: 26px; padding-inline: 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.mk-tag::before { content: ''; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }
.mk-tag.is-info { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.mk-tag.is-ok { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.mk-tag.is-warn { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }
.mk-tag.is-danger { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.mk-tag.is-accent { background: var(--lm-d-accent-soft); color: var(--lm-d-accent-ink); }
.mk-tag.is-quiet { background: var(--lm-d-quiet-bg); color: var(--lm-d-muted); }

/* ── 11. the stages of a record ── */
.mk-steps { display: flex; justify-content: space-between; position: relative; margin: 0; padding: 4px 0 0; list-style: none; }
.mk-steps::before { content: ''; position: absolute; inset-block-start: 12px; inset-inline: 14px; border-block-start: 2px solid var(--lm-d-divider); }
.mk-steps li { position: relative; flex: 1; text-align: center; font-size: 12px; color: var(--lm-d-muted); }
.mk-steps li i { display: block; inline-size: 16px; block-size: 16px; margin: 0 auto 4px; border-radius: 50%; background: var(--lm-d-surface); border: 2px solid var(--lm-d-control-edge); }
.mk-steps li.is-done i { background: var(--lm-d-ok); border-color: var(--lm-d-ok); }
.mk-steps li.is-now { color: var(--lm-d-ink); font-weight: 700; }
.mk-steps li.is-now i { background: var(--lm-d-accent); border-color: var(--lm-d-accent); box-shadow: 0 0 0 4px var(--lm-d-accent-soft); }
.mk-steps li.is-stop { color: var(--lm-d-danger); font-weight: 700; }
.mk-steps li.is-stop i { background: var(--lm-d-danger); border-color: var(--lm-d-danger); }

/* ── 12. figures inside a panel / card ── */
.mk-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mk-money > div { border: 1px solid var(--lm-d-border); border-radius: 10px; padding: 8px 10px; display: grid; min-inline-size: 0; }
.mk-money span { font-size: 12px; color: var(--lm-d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-money b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mk-net { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--lm-d-ok-soft); color: var(--lm-d-ok); font-size: 13.5px; font-weight: 700; }
.mk-net b { font-variant-numeric: tabular-nums; }
.mk-sec { font-size: 14px; font-weight: 700; margin-block-end: 6px; }
.mk-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-block-end: 1px solid var(--lm-d-divider); font-size: 13.5px; }
.mk-line:last-child { border-block-end: 0; }
.mk-line b { font-variant-numeric: tabular-nums; }
.mk-note { border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.6; border: 1px solid var(--lm-d-divider); }
.mk-note.is-info { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.mk-note.is-warn { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }
.mk-note.is-danger { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.mk-note.is-ok { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }

/* ── 13. buttons: one orange primary per area, the rest outline ── */
.mk-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 42px;
    padding-inline: 16px;
    border-radius: 10px;
    border: 1px solid var(--lm-d-control-edge);
    background: var(--lm-d-surface);
    color: var(--lm-d-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.mk-btn:hover { background: var(--lm-d-hover); }
.mk-btn.is-primary { background: var(--lm-d-accent); border-color: var(--lm-d-accent); color: var(--lm-d-on-accent); }
.mk-btn.is-primary:hover { filter: brightness(0.96); }
.mk-btn.is-danger { color: var(--lm-d-danger); border-color: var(--lm-d-gap-edge); }
.mk-btn.is-sm { min-block-size: 36px; padding-inline: 14px; font-size: 13.5px; }
.mk-btn.is-icon { inline-size: 42px; padding: 0; justify-content: center; }
.mk-btn:disabled { opacity: .6; cursor: default; }
.mk-btn-ico, .mk-ic { inline-size: 18px; block-size: 18px; flex: none; }

/* ── 14. empty state ── */
.mk-empty { flex: 1 1 auto; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 32px 24px; text-align: center; color: var(--lm-d-muted); font-size: 13px; }
.mk-empty b { color: var(--lm-d-ink); font-size: 15px; }
.mk-empty-ico { inline-size: 36px; block-size: 36px; color: var(--lm-d-subtle); }

/* ── 15. a record page (Filament view/edit): ruled main card, tabs as pills ── */
.mk-doc-page .fi-page-content { gap: 16px; }
.mk-doc-page .fi-section { border-radius: 16px; box-shadow: 0 1px 2px var(--lm-d-shadow); }
.mk-doc-page .fi-section-header-heading { color: var(--lm-d-ink); font-weight: 700; }
.mk-doc-main {
    background: var(--lm-d-surface);
    border: 1px solid var(--lm-d-border);
    border-block-start: 3px solid var(--lm-d-info);
    border-radius: 16px;
    box-shadow: 0 1px 2px var(--lm-d-shadow);
}
.mk-doc-main .fi-tabs { gap: 8px; padding: 12px 16px; border-block-end: 1px solid var(--lm-d-divider); justify-content: flex-start; background: transparent; box-shadow: none; border-radius: 0; }
.mk-doc-main .fi-tabs .fi-tabs-item { min-block-size: 42px; padding-inline: 16px; border-radius: 21px; border: 1px solid var(--lm-d-border); background: var(--lm-d-surface); color: var(--lm-d-ink); font-weight: 700; }
.mk-doc-main .fi-tabs .fi-tabs-item .fi-tabs-item-label { color: inherit; }
.mk-doc-main .fi-tabs .fi-tabs-item .fi-icon { color: var(--lm-d-muted); }
.mk-doc-main .fi-tabs .fi-tabs-item.fi-active { background: var(--lm-d-tab-on-bg); border-color: var(--lm-d-tab-on-bg); color: var(--lm-d-tab-on-ink); }
.mk-doc-main .fi-tabs .fi-tabs-item.fi-active :is(.fi-tabs-item-label, .fi-icon) { color: var(--lm-d-tab-on-ink); }
.mk-doc-main .fi-sc-tabs-tab { padding: 16px; }
.mk-doc-main .fi-sc-tabs-tab .fi-section { box-shadow: none; }

/* ── 16. under 1024px: the page scrolls, the panel becomes a bottom sheet ── */
@media (max-width: 1023.98px) {
    .mk-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mk-strip-c:nth-child(3n + 1) { border-inline-start: 0; }
    .mk-strip-c:nth-child(n + 4) { border-block-start: 1px solid var(--lm-d-divider); }
    .mk-split, .mk-split.has-open { grid-template-columns: minmax(0, 1fr); }
    .mk-split.has-open .mk-list { border-inline-end: 0; }
    .mk-panel { display: none; }
    .mk-split.has-open .mk-panel {
        display: flex;
        position: fixed;
        inset-inline: 0;
        inset-block: auto 0;
        z-index: 45;
        min-block-size: 0;
        max-block-size: 82dvh;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -10px 40px var(--lm-d-sheet-shadow);
    }
    .mk-card-h { align-items: stretch; }
    .mk-pills, .mk-doc-main .fi-tabs { flex-wrap: nowrap; overflow-x: auto; padding-block-end: 2px; scrollbar-width: none; }
    .mk-page .fi-header-heading { font-size: 22px; }
}
@media (max-width: 640px) {
    .mk-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mk-strip-c:nth-child(n) { border-inline-start: 0; border-block-start: 1px solid var(--lm-d-divider); }
    .mk-strip-c:nth-child(-n + 2) { border-block-start: 0; }
    .mk-strip-c:nth-child(2n) { border-inline-start: 1px solid var(--lm-d-divider); }
    .mk-k-v { font-size: 22px; }
    .mk-search { inline-size: 100%; margin-inline-start: 0; block-size: 44px; }
    .mk-money { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* touch: every control at least 44px tall on a phone */
    .mk-pill, .mk-chip, .mk-btn, .mk-seg button, .mk-p-x { min-block-size: 44px; }
    .mk-p-x { inline-size: 44px; }
    .mk-table thead { display: none; }
    .mk-table, .mk-table tbody, .mk-table tr, .mk-table td { display: block; inline-size: 100%; }
    .mk-table tbody tr { padding: 10px 12px; border-block-end: 1px solid var(--lm-d-divider); }
    .mk-table td { padding: 2px 0; border: 0; }
    .mk-table td[data-label]::before { content: attr(data-label) ' · '; color: var(--lm-d-muted); font-size: 12.5px; }
}

/* ── 14. marketing-only parts (tokens only) ── */
/* the AI box: what the model wrote, marked violet — beside the deterministic numbers, never instead of them */
.mk .mk-ai { border: 1px solid var(--lm-d-border); border-inline-start: 3px solid var(--lm-d-ai); border-radius: 12px; background: var(--lm-d-ai-bg); color: var(--lm-d-ai-ink); padding: 10px 12px; font-size: 13px; line-height: 1.6; }
.mk .mk-ai b { color: var(--lm-d-ai); font-size: 12.5px; letter-spacing: .02em; }
/* «when» beside an occasion topic, a quiet hint */
.mk .mk-when { color: var(--lm-d-muted); font-size: 12.5px; }
/* a title tag next to the page heading (Filament renders the heading as text; the tag rides in it) */
.mk-page .fi-header-heading .mk-tag { vertical-align: middle; margin-inline-start: 8px; font-size: 12.5px; }
/* the secondary columns of a wide list step aside on a laptop */
@media (max-width: 1279.98px) { .mk .mk-table .is-2nd { display: none; } }
/* hand-rendered Filament actions inside the page (not the header): the same buttons */
.mk .mk-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mk .mk-actions .fi-btn { min-block-size: 42px; border-radius: 10px; padding-inline: 16px; background: var(--lm-d-surface); color: var(--lm-d-ink); box-shadow: inset 0 0 0 1px var(--lm-d-control-edge); font-weight: 700; }
.mk .mk-actions .fi-btn:is(.fi-color-primary, .fi-color-success) { background: var(--lm-d-accent); color: var(--lm-d-on-accent); box-shadow: none; }
.mk .mk-actions .fi-btn.fi-color-danger { color: var(--lm-d-danger); box-shadow: inset 0 0 0 1px var(--lm-d-gap-edge); }
.mk .mk-actions .fi-btn .fi-icon { color: currentColor; }
/* the sections an older tab keeps inside the ruled card lose their own chrome */
.mk .mk-card-b .fi-section { box-shadow: none; border: 1px solid var(--lm-d-divider); border-radius: 12px; }
/* a row link in a hand-built table keeps the ink */
.mk .mk-table a { color: inherit; text-decoration: none; }
.mk .mk-table a:hover { text-decoration: underline; }
/* the panel opens for a row: the same tint the split gives a Filament row */
.mk .mk-p-b .mk-steps { padding-block-end: 4px; }

/* ── 15. the plan's rows (MKT-UX-1 compact toggle) and the targets tab ── */
.mk .mk-table-wrap { inline-size: 100%; overflow-x: auto; }
.mk .mk-table--compact th, .mk .mk-table--compact td { padding: 6px 10px; font-size: 13px; }
.mk .mk-table--compact .is-2nd { display: none; }
.mk .mk-splits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
@media (max-width: 1023.98px) { .mk .mk-splits { grid-template-columns: minmax(0, 1fr); } }
/* a hand-rendered Filament action inside a table cell or a line keeps its size */
.mk .mk-line .fi-btn, .mk .mk-table .fi-btn { min-block-size: 32px; }
/* MKT-CAMP-22 (HO-3433): «صفوف الشهر» — the legend under the toolbar, the «الخطوات» cell (the dots of 19, the step · its
   owner, its due), «الخطوات الست للصف» under the table; the plans list's published meter and its months with no plan */
.mk .mk-rows-legend { padding: 8px 18px; border-block-end: 1px solid var(--lm-d-divider); }
.mk .mk-steps-cell { min-inline-size: 150px; }
.mk .mk-table tbody tr.is-mine > td { background: var(--lm-d-row-hl); }
.mk .mk-step-who { margin-block-start: 4px; font-size: 12.5px; color: var(--lm-d-muted); }
.mk .mk-step-who b { color: var(--lm-d-ink); }
.mk .mk-rows-how { margin: 12px 18px 16px; }
.mk .mk-bar.mk-plan-meter { display: block; inline-size: 72px; block-size: 6px; margin-block-start: 4px; }
.mk .mk-plan-gaps .mk-line { flex-wrap: wrap; }
@media (max-width: 640px) {
    .mk .mk-rows-legend { padding-inline: 12px; }
    .mk .mk-rows-how { margin-inline: 12px; }
    .mk .mk-plan-gaps .mk-btn { min-block-size: 44px; }
}

/* ── 16. the shared flow thread (MKT-FLOW-1 component, `x-growth.thread`) — MKT-FLOW-1 follow-up (PO 05/10 «الجزء ده
   واكل الصفحة»): ONE compact line under the page's header, never a panel band: the chain breadcrumb, the numbers as
   small inline chips, the neighbours' named chips; it wraps on a phone. Unscoped (the component also sits on the older
   growth pages, outside `.mk`); tokens only, 12px floor, logical properties, 44px links on a phone. ── */
.mk-thread { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 8px; padding: 0; font-size: 12.5px; line-height: 1.6; color: var(--lm-d-muted); }
.mk-thread-chain { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.mk-thread-sep { color: var(--lm-d-subtle); }
.mk-thread-k { color: var(--lm-d-muted); }
.mk-thread-v { color: var(--lm-d-ink); font-weight: 700; text-decoration: none; }
a.mk-thread-v:hover { text-decoration: underline; }
.mk-thread-step.is-current .mk-thread-v { color: var(--lm-d-info); }
.mk-thread-nums, .mk-thread-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.mk-thread-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 10px; border: 1px solid var(--lm-d-border); border-radius: 999px; background: var(--lm-d-chip-bg); color: var(--lm-d-muted); font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.mk-thread-chip.is-link { color: var(--lm-d-info); background: var(--lm-d-surface); }
.mk-thread-chip.is-link:hover { border-color: var(--lm-d-info); }
.mk-thread-n { color: var(--lm-d-ink); font-variant-numeric: tabular-nums; }
.mk-thread-chip.is-link .mk-thread-n { color: var(--lm-d-info); }
/* on a house page the line sits right under the header's meta line, so the numbers strip moves up under it */
.mk-page .mk > .mk-thread:first-child { margin-block: -20px -6px; }
@media (max-width: 640px) {
    .mk-thread a.mk-thread-chip, .mk-thread a.mk-thread-v { min-block-size: 44px; display: inline-flex; align-items: center; }
    .mk-page .mk > .mk-thread:first-child { margin-block-start: -12px; }
}
.mk .mk-card-b--top { padding-block-end: 0; }
.mk bdi { white-space: nowrap; }

/* ── 17. MKT-DS-2 (HO-3341): the adapter — the older growth / campaign / item skins read the house tokens
   under a marketing page, light and dark alike, so no screen carries two systems. Layout stays theirs;
   only colour, radius and font come from here. Specificity `.fi-page.mk-page …` beats the sheets' own
   `.dark …` patches whatever the load order. ── */

/* 17a. project-360.css families (`.p360`, `.mcp`, `.cid`) paint through custom properties — re-point them */
.fi-page.mk-page :is(.p360, .mcp) {
    font-family: inherit;
    --navy: var(--lm-d-tab-on-bg); --navy-deep: var(--lm-d-tab-on-bg); --navy-tint: var(--lm-d-info-soft);
    --orange: var(--lm-d-accent); --orange-deep: var(--lm-d-accent-ink); --orange-tint: var(--lm-d-accent-soft);
    --orange-tint-2: var(--lm-d-row-hl); --orange-border: var(--lm-d-accent-line);
    --good: var(--lm-d-ok); --good-tint: var(--lm-d-ok-soft); --good-solid-tint: var(--lm-d-ok-soft); --good-edge: var(--lm-d-ok-soft);
    --red: var(--lm-d-danger); --red-tint: var(--lm-d-danger-soft); --red-border: var(--lm-d-gap-edge);
    --verify: var(--lm-d-ai); --verify-tint: var(--lm-d-ai-bg); --verify-border: var(--lm-d-border);
    --override: var(--lm-d-ai); --override-tint: var(--lm-d-ai-bg); --override-border: var(--lm-d-border);
    --bg: var(--lm-d-page); --surface: var(--lm-d-surface); --surface-2: var(--lm-d-quiet-bg);
    --border: var(--lm-d-border); --border-soft: var(--lm-d-divider); --border-strong: var(--lm-d-control-edge);
    --ink: var(--lm-d-ink); --t2: var(--lm-d-ink); --t3: var(--lm-d-muted); --muted: var(--lm-d-muted); --faint: var(--lm-d-subtle);
    --on-navy: var(--lm-d-tab-on-ink); --on-navy-muted: var(--lm-d-tab-on-count); --on-navy-soft: var(--lm-d-tab-on-count);
    --on-orange: var(--lm-d-on-accent); --on-good: var(--lm-d-on-accent);
    --amber-tint: var(--lm-d-warn-soft); --amber-ink: var(--lm-d-warn); --amber-border: var(--lm-d-warn-soft); --reserved-tint: var(--lm-d-warn-soft);
    --grey-tint: var(--lm-d-quiet-bg); --avail-ink: var(--lm-d-subtle); --hero-a: var(--lm-d-tab-on-bg); --hero-b: var(--lm-d-tab-on-bg);
    --shadow: var(--lm-d-shadow); --shadow-focus: var(--lm-d-sheet-shadow); --shadow-menu: var(--lm-d-sheet-shadow); --shadow-soft: var(--lm-d-shadow);
    --mcp-navy: var(--lm-d-tab-on-bg); --mcp-orange: var(--lm-d-accent);
    --mcp-bg: var(--lm-d-page); --mcp-surface: var(--lm-d-surface); --mcp-surface-2: var(--lm-d-quiet-bg); --mcp-panel: var(--lm-d-surface);
    --mcp-text: var(--lm-d-ink); --mcp-text-2: var(--lm-d-ink); --mcp-muted: var(--lm-d-muted);
    --mcp-border: var(--lm-d-border); --mcp-border-soft: var(--lm-d-divider); --mcp-border-strong: var(--lm-d-control-edge);
    --mcp-selected: var(--lm-d-info-soft); --mcp-hover: var(--lm-d-hover); --mcp-focus: var(--lm-d-info); --mcp-input-bg: var(--lm-d-surface);
    --mcp-navy-ink: var(--lm-d-tab-on-bg); --mcp-navy-soft: var(--lm-d-info-soft); --mcp-on-navy: var(--lm-d-tab-on-ink); --mcp-on-orange: var(--lm-d-on-accent);
    --mcp-orange-ink: var(--lm-d-accent-ink); --mcp-orange-bg: var(--lm-d-accent-soft); --mcp-orange-border: var(--lm-d-accent-line);
    --mcp-red: var(--lm-d-danger); --mcp-red-bg: var(--lm-d-danger-soft);
    --mcp-green: var(--lm-d-ok); --mcp-green-bg: var(--lm-d-ok-soft); --mcp-green-border: var(--lm-d-ok-soft);
    --mcp-warn: var(--lm-d-warn-soft); --mcp-warn-border: var(--lm-d-warn-soft); --mcp-warn-ink: var(--lm-d-warn);
    --mcp-verify: var(--lm-d-ai); --mcp-verify-bg: var(--lm-d-ai-bg);
    --mcp-shadow: var(--lm-d-shadow); --mcp-shadow-menu: var(--lm-d-sheet-shadow);
}
.fi-page.mk-page .p360-pill { font-size: 12px; }
.fi-page.mk-page .p360-note { font-size: 12px; }
.fi-page.mk-page :is(.mcp-surface, .mcp-kpi, .mcp-card, .mcp-tablewrap) { border-radius: 16px; box-shadow: 0 1px 2px var(--lm-d-shadow); }
.fi-page.mk-page :is(.mcp-btn, .cid-btn, .mcp-iconbtn) { border-radius: 12px; }
.fi-page.mk-page .mcp-btn--navy, .fi-page.mk-page .mcp-btn--orange { background: var(--lm-d-accent); border-color: var(--lm-d-accent); color: var(--lm-d-on-accent); }
.fi-page.mk-page .mcp-seg button.is-on { background: var(--lm-d-tab-on-bg); color: var(--lm-d-tab-on-ink); }

/* 17b. growth.css paints in literals — the colour-bearing rules read the tokens here */
.fi-page.mk-page :is(.growth-field__label, .growth-note, .growth-subtitle, .growth-row__meta, .growth-table thead th, .growth-kpi__label, .growth-hero-meta, .growth-stepper__step) { color: var(--lm-d-muted); }
.fi-page.mk-page :is(.growth-kpi__hint, .growth-kpi__value--na) { color: var(--lm-d-subtle); }
.fi-page.mk-page :is(.growth-field__value, .growth-kpi__value, .growth-card__body, .growth-card__title, .growth-row) { color: var(--lm-d-ink); }
.fi-page.mk-page .growth-table thead th { border-block-end-color: var(--lm-d-border); }
.fi-page.mk-page .growth-table tbody tr + tr td, .fi-page.mk-page .growth-rows > * + * { border-color: var(--lm-d-divider); }
.fi-page.mk-page :is(.growth-panel, .growth-card, .growth-kpi) { border-color: var(--lm-d-border); background: var(--lm-d-surface); }
.fi-page.mk-page .growth-kpi { border-inline-start-color: var(--lm-d-dot); border-radius: 12px; }
.fi-page.mk-page .growth-kpi--good { border-inline-start-color: var(--lm-d-ok); }
.fi-page.mk-page .growth-kpi--warn { border-inline-start-color: var(--lm-d-warn); }
.fi-page.mk-page .growth-kpi--bad { border-inline-start-color: var(--lm-d-danger); }
.fi-page.mk-page .growth-kpi--info { border-inline-start-color: var(--lm-d-info); }
.fi-page.mk-page .growth-card, .fi-page.mk-page .growth-panel { border-radius: 14px; }
.fi-page.mk-page .growth-card--warn { border-inline-start-color: var(--lm-d-warn); }
.fi-page.mk-page .growth-card--bad { border-inline-start-color: var(--lm-d-danger); }
.fi-page.mk-page .growth-card--good { border-inline-start-color: var(--lm-d-ok); }
.fi-page.mk-page .growth-health::before { background: var(--lm-d-subtle); }
.fi-page.mk-page .growth-health--healthy::before { background: var(--lm-d-ok); }
.fi-page.mk-page .growth-health--warning::before { background: var(--lm-d-warn); }
.fi-page.mk-page .growth-health--critical::before { background: var(--lm-d-danger); }
.fi-page.mk-page .growth-stepper__step--done { color: var(--lm-d-ok); }
.fi-page.mk-page .growth-stepper__step--current { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.fi-page.mk-page .growth-stepper__sep { color: var(--lm-d-dot); }
.fi-page.mk-page .growth-review-row input[type=text] { border-color: var(--lm-d-control-edge); color: var(--lm-d-ink); background: var(--lm-d-surface); }
.fi-page.mk-page .growth-btn { border-color: var(--lm-d-control-edge); color: var(--lm-d-ink); background: var(--lm-d-surface); border-radius: 12px; font-weight: 700; }
.fi-page.mk-page .growth-btn--primary { background: var(--lm-d-accent); border-color: var(--lm-d-accent); color: var(--lm-d-on-accent); }
.fi-page.mk-page .growth-btn--danger { color: var(--lm-d-danger); border-color: var(--lm-d-gap-edge); background: var(--lm-d-surface); }
.fi-page.mk-page .growth-btn--success { color: var(--lm-d-ok); border-color: var(--lm-d-ok-soft); background: var(--lm-d-surface); }
.fi-page.mk-page .growth-ai-panel { border-color: var(--lm-d-ai); background: var(--lm-d-ai-bg); color: var(--lm-d-ai-ink); }
.fi-page.mk-page .growth-mix--historical_data { background: var(--lm-d-ok); }
.fi-page.mk-page .growth-mix--external_research { background: var(--lm-d-info); }
.fi-page.mk-page .growth-mix--assumption { background: var(--lm-d-warn); }

/* 17c. Filament's own surfaces inside a marketing page: sections, tabs, forms — the card look */
.fi-page.mk-page .fi-section { border-radius: 16px; border: 1px solid var(--lm-d-border); box-shadow: 0 1px 2px var(--lm-d-shadow); background: var(--lm-d-surface); }
.fi-page.mk-page .fi-section-header-heading { color: var(--lm-d-ink); font-weight: 700; }
.fi-page.mk-page .fi-section-header-description { color: var(--lm-d-muted); }
.fi-page.mk-page .fi-tabs { gap: 8px; background: transparent; box-shadow: none; border: 0; }
.fi-page.mk-page .fi-tabs .fi-tabs-item { min-block-size: 42px; padding-inline: 16px; border-radius: 21px; border: 1px solid var(--lm-d-border); background: var(--lm-d-surface); color: var(--lm-d-ink); font-weight: 700; }
.fi-page.mk-page .fi-tabs .fi-tabs-item .fi-icon { color: var(--lm-d-muted); }
.fi-page.mk-page .fi-tabs .fi-tabs-item.fi-active { background: var(--lm-d-tab-on-bg); border-color: var(--lm-d-tab-on-bg); color: var(--lm-d-tab-on-ink); }
.fi-page.mk-page .fi-tabs .fi-tabs-item.fi-active :is(.fi-tabs-item-label, .fi-icon, .fi-badge) { color: var(--lm-d-tab-on-ink); }
.fi-page.mk-page .fi-fo-field-wrp-label { color: var(--lm-d-ink); font-weight: 700; }
.fi-page.mk-page .fi-fo-field-wrp-helper-text { color: var(--lm-d-muted); }
.fi-page.mk-page .fi-input-wrp { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--lm-d-control-edge); background: var(--lm-d-surface); }
.fi-page.mk-page .fi-input-wrp:focus-within { box-shadow: inset 0 0 0 2px var(--lm-d-info); }
.fi-page.mk-page .fi-fo-actions .fi-btn, .fi-page.mk-page .fi-form-actions .fi-btn { min-block-size: 44px; border-radius: 12px; font-weight: 700; }

/* ── 17d. MKT-DS-4 (HO-3343): the detail / tool pages — their KPI tiles read as the house numbers strip,
   their first surface as the ruled card, their own title block gives way to the Filament header ── */
.fi-page.mk-page :is(.growth-kpis, .mcp-kpis) {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0;
    background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 16px;
    box-shadow: 0 1px 2px var(--lm-d-shadow); overflow: hidden;
}
.fi-page.mk-page :is(.growth-kpi, .mcp-kpi) {
    border: 0; border-radius: 0; box-shadow: none; background: transparent;
    border-inline-start: 1px solid var(--lm-d-divider); padding: 12px 18px; min-inline-size: 0;
    display: flex; flex-direction: column; gap: 2px; text-align: start; font: inherit;
}
.fi-page.mk-page :is(.growth-kpi, .mcp-kpi):first-child { border-inline-start: 0; }
.fi-page.mk-page .mcp-kpi .b { display: contents; }
.fi-page.mk-page .mcp-kpi .ic { display: none; }
.fi-page.mk-page :is(.growth-kpi__label, .mcp-kpi .k) { order: -1; font-size: 12.5px; font-weight: 500; color: var(--lm-d-muted); text-transform: none; letter-spacing: 0; }
.fi-page.mk-page :is(.growth-kpi__value, .mcp-kpi .v) { font-size: 26px; font-weight: 700; line-height: 1.3; color: var(--lm-d-ink); font-variant-numeric: tabular-nums; }
.fi-page.mk-page :is(.growth-kpi__hint, .mcp-kpi .n) { font-size: 12.5px; color: var(--lm-d-muted); }
.fi-page.mk-page .growth-kpi--info .growth-kpi__value { color: var(--lm-d-info); }
.fi-page.mk-page .growth-kpi--good .growth-kpi__value { color: var(--lm-d-ok); }
.fi-page.mk-page .growth-kpi--warn .growth-kpi__value { color: var(--lm-d-warn); }
.fi-page.mk-page .growth-kpi--bad .growth-kpi__value { color: var(--lm-d-danger); }
.fi-page.mk-page .growth-kpi__value--na { color: var(--lm-d-subtle); }
.fi-page.mk-page .mcp-kpi.tone-orange .v { color: var(--lm-d-accent-ink); }
.fi-page.mk-page .mcp-kpi.tone-good .v { color: var(--lm-d-ok); }
.fi-page.mk-page .mcp-kpi.tone-red .v { color: var(--lm-d-danger); }
.fi-page.mk-page .mcp-kpi:not(.is-static) { cursor: pointer; }
.fi-page.mk-page .mcp-kpi:not(.is-static):hover { background: var(--lm-d-hover); }
.fi-page.mk-page .mcp-kpi.is-on { background: var(--lm-d-row-hl); box-shadow: inset 0 -3px 0 var(--lm-d-accent); }
/* the page's first surface is the ruled card; the rest stay plain */
.fi-page.mk-page .mcp > .mcp-surface:first-of-type,
.fi-page.mk-page .fi-page-content > .fi-section:first-of-type,
.fi-page.mk-page .mk-doc-main { border-block-start: 3px solid var(--lm-d-info); }
/* the module's own title block gives way to the Filament header — its actions stay as a row at the end */
.fi-page.mk-page .mcp-top { justify-content: flex-end; }
.fi-page.mk-page .mcp-top > div:first-child:has(.mcp-title) { display: none; }
.fi-page.mk-page .mcp-top-actions .mcp-btn--navy { background: var(--lm-d-accent); border-color: var(--lm-d-accent); color: var(--lm-d-on-accent); }
/* growth section headings inside the page read as card titles */
.fi-page.mk-page .fi-section-header-heading { font-size: 16px; }
.fi-page.mk-page .growth-subtitle { display: none; } /* the subtitle lives in the Filament header now (getSubheading) */
.fi-page.mk-page .growth-hero-meta { gap: 8px 14px; font-size: 13px; }
/* the policies screen (LiveManagerPolicies view) prints its intro in the body too — the header carries it now */
.fi-page.mk-page .lm-policies-intro { display: none; }
/* MKT-AI-4: a proposed row / campaign the reviewer removed — still on record, struck through */
.mk .mk-table tbody tr.is-removed > td, .mk .mk-line.is-removed > span:first-child { opacity: .55; }
.mk .mk-table tbody tr.is-removed td.is-name, .mk .mk-line.is-removed > span:first-child > b { text-decoration: line-through; }
.mk .mk-line .mk-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* MKT-AI-5: the execution prompt in its modal — monospace-ish, own scroll, copyable */
.mk .mk-prompt { inline-size: 100%; min-block-size: 320px; padding: 12px 14px; border: 1px solid var(--lm-d-border); border-radius: 12px; background: var(--lm-d-quiet-bg); color: var(--lm-d-ink); font: inherit; font-size: 13px; line-height: 1.65; white-space: pre-wrap; resize: vertical; }
.mk .mk-prompt:focus { outline: 2px solid var(--lm-d-info); outline-offset: 2px; }

/* MKT-PANEL-1 (HO-3354): the row's panel carries the flow — brief · delivery · channels · result (tokens only) */
.mk .mk-p-b { gap: 14px; }
.mk .mk-sec { display: flex; align-items: center; gap: 8px; }
.mk .mk-sec .mk-tag { margin-inline-start: auto; }
.mk .mk-brief { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--lm-d-ink); }
.mk .mk-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 6px; }
.mk .mk-facts span { font-size: 12.5px; color: var(--lm-d-muted); background: var(--lm-d-quiet-bg); border-radius: 999px; padding: 2px 10px; }
.mk .mk-facts span b { color: var(--lm-d-ink); font-weight: 600; }
.mk .mk-spec { font-size: 12.5px; color: var(--lm-d-muted); border: 1px solid var(--lm-d-border); border-radius: 10px; padding: 8px 12px; margin-block: 6px; }
.mk .mk-spec summary { cursor: pointer; color: var(--lm-d-ink); font-weight: 600; font-size: 13px; }
.mk .mk-spec ul { margin: 6px 0 0; padding-inline-start: 18px; }
.mk .mk-chan { display: flex; flex-direction: column; gap: 8px; margin-block: 6px; }
.mk .mk-ch { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--lm-d-border); border-radius: 10px; background: var(--lm-d-surface); font-size: 13px; }
.mk .mk-ch.is-own { border-inline-start: 3px solid var(--lm-d-accent); }
.mk .mk-ch-t { display: flex; flex-direction: column; min-inline-size: 0; }
.mk .mk-ch-t b { font-weight: 600; }
.mk .mk-ch-t small { color: var(--lm-d-muted); font-size: 12px; overflow-wrap: anywhere; }
/* MKT-COPY-1: what breaks the post shape — named under the channel's text */
.mk .mk-ch-t small.mk-shape { color: var(--lm-d-warn); }
.mk .mk-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-block: 6px; }
.mk .mk-kv > div { border: 1px solid var(--lm-d-border); border-radius: 10px; padding: 8px 10px; }
.mk .mk-kv span { display: block; font-size: 12px; color: var(--lm-d-muted); }
.mk .mk-kv b { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mk .mk-link { color: var(--lm-d-info); text-decoration: none; }
.mk .mk-link:hover { text-decoration: underline; }

/* MKT-BALANCE-1 (HO-3356): the month's balance above the rows; the coverage map in the bank (tokens only) */
.mk .mk-balance { margin-block-end: 10px; }
.mk .mk-balance summary .is-warn { color: var(--lm-d-warn); }
.mk .mk-balance summary .is-ok { color: var(--lm-d-ok); }
.mk .mk-balance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-block-start: 10px; }
@media (max-width: 1023.98px) { .mk .mk-balance-grid { grid-template-columns: minmax(0, 1fr); } }
.mk .mk-balance .mk-sec small { font-weight: 400; font-size: 12px; }
.mk .mk-cover { inline-size: 100%; border-collapse: separate; border-spacing: 4px; font-size: 13px; }
.mk .mk-cover th { text-align: start; color: var(--lm-d-muted); font-weight: 600; padding: 4px 6px; white-space: nowrap; }
.mk .mk-cover td { text-align: center; padding: 0; }
.mk .mk-cover button { inline-size: 100%; min-block-size: 34px; border: 1px solid var(--lm-d-border); border-radius: 8px; background: var(--lm-d-surface); color: var(--lm-d-ink); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.mk .mk-cover button.is-gap { background: var(--lm-d-warn-soft); border-color: var(--lm-d-warn); color: var(--lm-d-warn); font-weight: 600; }
.mk .mk-cover button.is-on { outline: 2px solid var(--lm-d-info); outline-offset: 1px; }
.mk .mk-cover button:hover { border-color: var(--lm-d-control-edge); }
.mk .mk-cover-wrap { overflow-x: auto; padding: 10px 14px; }
.mk .mk-cover button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; }
.mk .mk-cover button small { font-size: 12px; font-weight: 400; color: var(--lm-d-muted); }
.mk .mk-cover button.is-gap small { color: var(--lm-d-warn); }
.mk .mk-cover button.is-paper { background: var(--lm-d-info-soft); border-color: var(--lm-d-info); color: var(--lm-d-info); }
.mk .mk-cover button.is-paper small { color: var(--lm-d-info); }

/* MKT-BALANCE-1 (HO-3356): «الميزان والتكرار» on the plan's overview — bars with the target marked, the weeks strip (tokens only) */
.mk .mk-bal { display: flex; flex-direction: column; gap: 12px; margin-block: 14px; }
.mk .mk-bal-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mk .mk-bal-h h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--lm-d-ink); }
.mk .mk-bal-h small { margin-inline-start: auto; }
.mk .mk-bal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1023.98px) { .mk .mk-bal-grid { grid-template-columns: minmax(0, 1fr); } }
.mk .mk-bal-box { border: 1px solid var(--lm-d-border); border-radius: 12px; background: var(--lm-d-surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; }
.mk .mk-bal-box .mk-sec small { font-weight: 400; font-size: 12px; }
.mk .mk-bar-row { display: grid; grid-template-columns: minmax(90px, 30%) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.mk .mk-bar-l { color: var(--lm-d-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk .mk-bar-row b { font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk .mk-bar { position: relative; block-size: 10px; border-radius: 999px; background: var(--lm-d-quiet-bg); overflow: visible; }
.mk .mk-bar-fill { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 999px; background: var(--lm-d-info); }
.mk .mk-bar-fill.is-ok { background: var(--lm-d-ok); }
.mk .mk-bar-fill.is-warn { background: var(--lm-d-warn); }
.mk .mk-bar-fill.is-quiet { background: var(--lm-d-control-edge); }
.mk .mk-bar-target { position: absolute; inset-block: -3px; inline-size: 2px; background: var(--lm-d-ink); border-radius: 1px; }
.mk .mk-bar-row b.is-ok { color: var(--lm-d-ok); }
.mk .mk-bar-row b.is-warn { color: var(--lm-d-warn); }
.mk .mk-weeks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; align-items: end; }
.mk .mk-week { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--lm-d-muted); }
.mk .mk-week b { color: var(--lm-d-ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.mk .mk-week-bar { position: relative; inline-size: 100%; block-size: 56px; border-radius: 8px; background: var(--lm-d-quiet-bg); display: flex; align-items: flex-end; overflow: hidden; }
.mk .mk-week-bar i { display: block; inline-size: 100%; background: var(--lm-d-info); border-radius: 8px 8px 0 0; }
.mk .mk-week.is-empty .mk-week-bar { background: var(--lm-d-warn-soft); outline: 1px dashed var(--lm-d-warn); }
.mk .mk-week.is-empty b { color: var(--lm-d-warn); }
.mk .mk-rep { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--lm-d-border); border-inline-start: 3px solid var(--lm-d-warn); border-radius: 10px; text-decoration: none; color: var(--lm-d-ink); font-size: 13px; }
.mk .mk-rep span { color: var(--lm-d-muted); font-size: 12.5px; }
.mk .mk-rep:hover { background: var(--lm-d-hover); }
.mk .mk-bal .is-ok.mk-dim { color: var(--lm-d-ok); }

/* MKT-READY-1 */
.mk .mk-ready-list { margin: 6px 0 0; padding-inline-start: 18px; list-style: disc; display: grid; gap: 2px; }
.mk .mk-ready-list a { text-decoration: underline; color: inherit; }

/* ── 18. MKT-CAMP-7 (HO-3403): «حملة جديدة» — the campaign builder, mockup v3 built literally (tokens only) ──
   the chain strip with its arrows and the main cell · the card beside the 360px sticky panel · the clickable
   four-step stepper · automatic | manual (navy, aria-pressed) · field rows · automatic values with their source
   chips · manual controls · objective cards · the targets table with sub-rows · the assumptions · the ad rows ·
   the panel tree · «بعد النشر». The panel drops below the card under 1024px; controls are 44px on a phone. */
.mk .mk-strip-h { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--lm-d-muted); margin-block-end: -8px; }
.mk .mk-strip--chain { --mk-cols: 5; grid-template-columns: repeat(var(--mk-cols), minmax(0, 1fr)); }
.mk .mk-strip--chain .mk-strip-c { position: relative; }
.mk .mk-strip--chain .mk-strip-c + .mk-strip-c::before { content: '←'; position: absolute; inset-inline-start: -9px; inset-block-start: 14px; inline-size: 18px; block-size: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--lm-d-page); color: var(--lm-d-subtle); font-size: 12px; }
[dir='ltr'] .mk .mk-strip--chain .mk-strip-c + .mk-strip-c::before { content: '→'; }
.mk .mk-strip--chain .mk-strip-c.is-main { background: var(--lm-d-row-hl); }
.mk .mk-strip--chain .mk-strip-c.is-main .mk-k-v { color: var(--lm-d-accent-ink); }
.mk .mk-strip--chain .mk-k-v.is-muted { font-size: 18px; color: var(--lm-d-muted); }
.mk .mk-strip--chain .mk-k-s { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; white-space: normal; color: var(--lm-d-muted); }
.mk .mk-k-u { font-size: 14px; font-weight: 500; }

.mk .mk-bsplit { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.mk .mk-bsplit > .mk-card { min-inline-size: 0; }
.mk .mk-card-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mk .mk-card-b--builder { padding: 16px 18px 18px; gap: 16px; }
.mk .mk-seg-l { font-size: 12.5px; color: var(--lm-d-muted); }
.mk .mk-seg--mode button { block-size: auto; min-block-size: 34px; color: var(--lm-d-muted); font-weight: 700; }
.mk .mk-seg--mode button.is-on, .mk .mk-seg--mode button[aria-pressed='true'] { background: var(--lm-d-tab-on-bg); color: var(--lm-d-tab-on-ink); }
.mk .mk-seg--mode button:disabled { cursor: default; opacity: .6; }

/* the stepper — every step a button */
.mk .mk-wsteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px 18px; margin: 0; border-block-end: 1px solid var(--lm-d-divider); list-style: none; }
.mk .mk-wsteps button { inline-size: 100%; display: flex; align-items: center; gap: 10px; min-block-size: 52px; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--lm-d-border); background: var(--lm-d-surface); color: var(--lm-d-ink); font: inherit; text-align: start; cursor: pointer; }
.mk .mk-wsteps button:hover { background: var(--lm-d-hover); }
.mk .mk-wsteps i { flex: none; inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 700; border: 2px solid var(--lm-d-control-edge); color: var(--lm-d-muted); background: var(--lm-d-surface); }
.mk .mk-wsteps span { min-inline-size: 0; }
.mk .mk-wsteps b { display: block; font-size: 14px; }
.mk .mk-wsteps small { display: block; font-size: 12px; color: var(--lm-d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .mk-wsteps .is-done i { background: var(--lm-d-ok); border-color: var(--lm-d-ok); color: var(--lm-d-on-accent); }
.mk .mk-wsteps .is-now button { border-color: var(--lm-d-accent-line); background: var(--lm-d-row-hl); }
.mk .mk-wsteps .is-now i { background: var(--lm-d-accent); border-color: var(--lm-d-accent); color: var(--lm-d-on-accent); box-shadow: 0 0 0 4px var(--lm-d-accent-soft); }

/* a step: its head, its fields */
.mk .mk-wstep { display: flex; flex-direction: column; gap: 16px; }
.mk .mk-step-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.mk .mk-step-h h2 { margin: 0; font-size: 17px; font-weight: 700; }
.mk .mk-step-h p { margin: 2px 0 0; font-size: 13px; color: var(--lm-d-muted); }
.mk .mk-fld { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 16px; align-items: start; padding-block: 12px; border-block-start: 1px solid var(--lm-d-divider); }
.mk .mk-fld:first-of-type { border-block-start: 0; padding-block-start: 0; }
.mk .mk-fld-l { display: flex; flex-direction: column; gap: 4px; padding-block-start: 8px; font-size: 14px; font-weight: 700; }
.mk .mk-fld-l small { font-size: 12.5px; font-weight: 400; color: var(--lm-d-muted); }
.mk .mk-fld-v { min-inline-size: 0; display: flex; flex-direction: column; gap: 8px; }
.mk .mk-stack { display: flex; flex-direction: column; gap: 8px; }
.mk .mk-nav { display: flex; justify-content: space-between; gap: 8px; padding-block-start: 4px; }

/* an automatic value and where it came from */
.mk .mk-auto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-block-size: 42px; padding: 8px 12px; border-radius: 10px; background: var(--lm-d-page); border: 1px dashed var(--lm-d-control-edge); }
.mk .mk-auto strong { font-size: 14.5px; }
.mk .mk-src { display: inline-flex; align-items: center; gap: 5px; min-block-size: 24px; padding-inline: 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.mk .mk-src::before { content: ''; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }
.mk .mk-src.is-sys { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.mk .mk-src.is-lib { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.mk .mk-src.is-ai { background: var(--lm-d-ai-bg); color: var(--lm-d-ai); border: 1px solid var(--lm-d-border); }
.mk .mk-src.is-asm { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }
.mk .mk-src.is-lock { background: var(--lm-d-quiet-bg); color: var(--lm-d-muted); }
.mk .mk-src.is-lock::before { display: none; }
.mk .mk-why { font-size: 12.5px; color: var(--lm-d-muted); }

/* manual controls */
.mk .mk-ctl { inline-size: 100%; min-block-size: 42px; padding: 8px 12px; border: 1px solid var(--lm-d-control-edge); border-radius: 10px; background: var(--lm-d-surface); color: var(--lm-d-ink); font: inherit; }
.mk textarea.mk-ctl { min-block-size: 84px; resize: vertical; line-height: 1.6; }
.mk .mk-ctl:disabled { background: var(--lm-d-page); color: var(--lm-d-muted); }
.mk .mk-ctl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mk .mk-ctl-row .mk-ctl { inline-size: auto; flex: 1 1 140px; }
.mk .mk-hint { font-size: 12.5px; color: var(--lm-d-muted); }
.mk .mk-hint b { color: var(--lm-d-ink); }
.mk .mk-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.mk .mk-check { display: inline-flex; align-items: center; gap: 8px; min-block-size: 40px; padding-inline: 12px; border: 1px solid var(--lm-d-border); border-radius: 10px; background: var(--lm-d-surface); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.mk .mk-check input, .mk .mk-row input { accent-color: var(--lm-d-info); inline-size: 16px; block-size: 16px; }
.mk .mk-check:has(input:disabled) { cursor: not-allowed; opacity: .62; background: var(--lm-d-page); }

/* the objective cards */
.mk .mk-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mk .mk-opt { position: relative; display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; padding: 12px 14px; border: 1px solid var(--lm-d-border); border-radius: 12px; background: var(--lm-d-surface); color: var(--lm-d-ink); font: inherit; text-align: start; cursor: pointer; }
.mk .mk-opt:hover { background: var(--lm-d-hover); }
.mk .mk-opt-t { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; }
.mk .mk-opt-t::before { content: ''; flex: none; inline-size: 16px; block-size: 16px; border-radius: 50%; border: 2px solid var(--lm-d-control-edge); background: var(--lm-d-surface); }
.mk .mk-opt-d { font-size: 13px; color: var(--lm-d-muted); }
.mk .mk-opt-m { font-size: 12px; color: var(--lm-d-subtle); }
.mk .mk-opt-m code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--lm-d-muted); }
.mk .mk-opt.is-on { border-color: var(--lm-d-info); box-shadow: inset 0 0 0 1px var(--lm-d-info); background: var(--lm-d-info-soft); }
.mk .mk-opt.is-on .mk-opt-t::before { border-color: var(--lm-d-info); background: var(--lm-d-info); box-shadow: inset 0 0 0 3px var(--lm-d-surface); }
.mk .mk-opt:disabled { cursor: not-allowed; opacity: .62; background: var(--lm-d-page); }
.mk .mk-opt .mk-sugg { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; }

/* the targets table: the main row, its sub-rows, the read-only rows */
.mk .mk-tbl-wrap { overflow-x: auto; border: 1px solid var(--lm-d-border); border-radius: 12px; }
.mk .mk-ttable { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.mk .mk-ttable th { text-align: start; padding: 9px 12px; font-size: 12.5px; font-weight: 700; color: var(--lm-d-muted); background: var(--lm-d-page); border-block-end: 1px solid var(--lm-d-divider); white-space: nowrap; }
.mk .mk-ttable td { padding: 10px 12px; border-block-end: 1px solid var(--lm-d-divider); vertical-align: middle; }
.mk .mk-ttable tr:last-child td { border-block-end: 0; }
.mk .mk-ttable td small { display: block; font-size: 12.5px; color: var(--lm-d-muted); }
.mk .mk-ttable td .mk-src + .mk-src { margin-inline-start: 4px; }
.mk .mk-ttable td.mk-t-num { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk .mk-ttable tr.is-main td { background: var(--lm-d-row-hl); }
.mk .mk-ttable tr.is-main td:first-child { box-shadow: inset -3px 0 0 var(--lm-d-accent); }
[dir='ltr'] .mk .mk-ttable tr.is-main td:first-child { box-shadow: inset 3px 0 0 var(--lm-d-accent); }
.mk .mk-ttable tr.is-sub td { padding-block: 7px; font-size: 13px; color: var(--lm-d-muted); }
.mk .mk-ttable tr.is-sub td:first-child { padding-inline-start: 28px; }
.mk .mk-ttable tr.is-off td { color: var(--lm-d-muted); }
.mk .mk-t-in { inline-size: 96px; min-block-size: 38px; padding: 6px 10px; border: 1px solid var(--lm-d-control-edge); border-radius: 8px; background: var(--lm-d-surface); color: var(--lm-d-ink); font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; }
.mk .mk-diff { font-size: 12px; font-weight: 700; }
.mk .mk-diff.is-down { color: var(--lm-d-warn); }
.mk .mk-diff.is-up { color: var(--lm-d-info); }

/* the assumptions under the numbers */
.mk .mk-asm { border: 1px solid var(--lm-d-border); border-radius: 12px; overflow: hidden; }
.mk .mk-asm-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 12px; background: var(--lm-d-page); border-block-end: 1px solid var(--lm-d-divider); font-size: 12.5px; font-weight: 700; color: var(--lm-d-muted); }
.mk .mk-asm-r { display: grid; grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1.6fr) auto; gap: 6px 12px; align-items: center; padding: 9px 12px; border-block-end: 1px solid var(--lm-d-divider); font-size: 13.5px; }
.mk .mk-asm-r:last-child { border-block-end: 0; }
.mk .mk-asm-r b { font-variant-numeric: tabular-nums; }
.mk .mk-asm-r small { font-size: 12.5px; color: var(--lm-d-muted); }

/* the ad rows */
.mk .mk-rows { display: flex; flex-direction: column; gap: 8px; }
.mk .mk-row { display: grid; grid-template-columns: auto 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--lm-d-border); border-radius: 12px; background: var(--lm-d-surface); cursor: pointer; }
.mk .mk-row:has(input:disabled) { cursor: default; }
.mk .mk-row input { inline-size: 18px; block-size: 18px; }
.mk .mk-thumb { inline-size: 64px; block-size: 48px; border-radius: 8px; background: var(--lm-d-quiet-bg); display: grid; place-items: center; color: var(--lm-d-subtle); font-size: 12px; font-weight: 700; }
.mk .mk-row-m { min-inline-size: 0; }
.mk .mk-row-t { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk .mk-row-s { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--lm-d-muted); }
.mk .mk-row-s code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.mk .mk-line small { display: block; font-size: 12.5px; color: var(--lm-d-muted); }
.mk .mk-line > span { min-inline-size: 0; }

/* the panel «اللي هيتعمل على ميتا» */
.mk .mk-bpanel { position: sticky; inset-block-start: 12px; display: flex; flex-direction: column; max-block-size: calc(100dvh - 24px); overflow: hidden; background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 16px; box-shadow: 0 1px 2px var(--lm-d-shadow); }
.mk .mk-bpanel .mk-p-h { display: flex; flex-direction: column; gap: 10px; }
.mk .mk-bpanel .mk-p-t .mk-tag { margin-inline-start: auto; }
.mk .mk-bpanel .mk-p-b { gap: 14px; }
.mk .mk-bpanel .mk-p-f .mk-btn { flex: 1 1 auto; justify-content: center; }
.mk .mk-bpanel .mk-sec { margin: 0 0 6px; }
.mk .mk-tree { display: flex; flex-direction: column; border: 1px solid var(--lm-d-border); border-radius: 12px; overflow: hidden; }
.mk .mk-tree > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-block-end: 1px solid var(--lm-d-divider); }
.mk .mk-tree > div:last-child { border-block-end: 0; }
.mk .mk-tree > div.is-d2 { padding-inline-start: 26px; }
.mk .mk-tree > div.is-d3 { padding-inline-start: 40px; }
.mk .mk-tree-l { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--lm-d-muted); }
.mk .mk-tree-v { font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.mk .mk-tree-s { font-size: 12.5px; color: var(--lm-d-muted); overflow-wrap: anywhere; }
.mk .mk-tree bdi { white-space: normal; }
.mk .mk-after { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--lm-d-muted); }
.mk .mk-after li { position: relative; padding-inline-start: 14px; }
.mk .mk-after li::before { content: '•'; position: absolute; inset-inline-start: 0; color: var(--lm-d-subtle); }

@media (max-width: 1180px) {
    .mk .mk-strip--chain { --mk-cols: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mk .mk-strip--chain .mk-strip-c:nth-child(4) { border-inline-start: 0; }
    .mk .mk-strip--chain .mk-strip-c:nth-child(n + 4) { border-block-start: 1px solid var(--lm-d-divider); }
    .mk .mk-strip--chain .mk-strip-c:nth-child(4)::before { display: none; }
}
@media (max-width: 1023.98px) {
    .mk .mk-bsplit { grid-template-columns: minmax(0, 1fr); }
    .mk .mk-bpanel { position: static; max-block-size: none; }
}
@media (max-width: 760px) {
    .mk .mk-wsteps { gap: 6px; padding: 10px 12px; }
    .mk .mk-wsteps button { flex-direction: column; justify-content: center; gap: 4px; min-block-size: 64px; padding: 6px 4px; text-align: center; }
    .mk .mk-wsteps small { display: none; }
    .mk .mk-wsteps b { font-size: 12.5px; }
    .mk .mk-fld { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .mk .mk-fld-l { padding-block-start: 0; }
    .mk .mk-opts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .mk .mk-strip--chain { --mk-cols: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mk .mk-strip--chain .mk-strip-c, .mk .mk-strip--chain .mk-strip-c:nth-child(4) { border-inline-start: 0; border-block-start: 1px solid var(--lm-d-divider); }
    .mk .mk-strip--chain .mk-strip-c:nth-child(2n) { border-inline-start: 1px solid var(--lm-d-divider); }
    .mk .mk-strip--chain .mk-strip-c:first-child, .mk .mk-strip--chain .mk-strip-c:nth-child(2) { border-block-start: 0; }
    .mk .mk-strip--chain .mk-strip-c + .mk-strip-c::before { display: none; }
    .mk .mk-strip--chain .mk-strip-c:last-child { grid-column: 1 / -1; border-inline-start: 0; }
    .mk .mk-card-b--builder { padding-inline: 14px; }
    .mk .mk-wsteps button, .mk .mk-seg--mode button, .mk .mk-check, .mk .mk-ctl { min-block-size: 44px; }
    .mk .mk-row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .mk .mk-row .mk-thumb { display: none; }
    .mk .mk-asm-r { grid-template-columns: minmax(0, 1fr) auto; }
    .mk .mk-bpanel .mk-money { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* the crumb above the builder's title (the panel keeps Filament's breadcrumbs off) */
.mk-page .mk-crumb { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 6px; font-size: 13px; color: var(--lm-d-muted); }
.mk-page .mk-crumb a { color: inherit; text-decoration: none; }
.mk-page .mk-crumb a:hover { color: var(--lm-d-ink); text-decoration: underline; }

/* ── MKT-CAMP-11 (HO-3420): «أهداف حجوزات المشاريع» — a project's last months of bookings as tiny bars
   (each bar's height is set inline in px from the count; the colour stays the token) ── */
.mk .mk-hist { display: inline-flex; align-items: flex-end; gap: 3px; block-size: 24px; vertical-align: middle; margin-inline-end: 6px; }
.mk .mk-hist i { display: block; inline-size: 7px; min-block-size: 2px; border-radius: 2px; background: var(--lm-d-info); }
.mk .mk-hist i.is-zero { background: var(--lm-d-divider); }

/* ── 19. MKT-CAMP-14 (HO-3423): «حملات المستهدفات» — mockup v3, screen 2 (tokens only, logical properties) ──
   «إزاي الحملات بتشتغل؟» · the month's budget bar · one card per project: its head, the six-step rail, the done line,
   the current step's box, «الجاي:» · the table's step dots. Controls are 44px on a phone. */
.mk .mk-how > summary { border-block-end: 0; }
.mk .mk-how[open] > summary { border-block-end: 1px solid var(--lm-d-divider); }
.mk .mk-how-flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.mk .mk-how-flow li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; min-inline-size: 0; }
.mk .mk-how-flow li + li { border-inline-start: 1px solid var(--lm-d-divider); }
.mk .mk-how-flow b { font-size: 14px; }
.mk .mk-how-n { font-size: 12px; font-weight: 700; color: var(--lm-d-subtle); }
.mk .mk-how-where { font-size: 12px; font-weight: 600; color: var(--lm-d-info); }
.mk .mk-how-who { font-size: 12px; color: var(--lm-d-muted); }
.mk .mk-how-foot { margin: 0; padding: 10px 18px 14px; border-block-start: 1px solid var(--lm-d-divider); font-size: 12.5px; color: var(--lm-d-muted); }
.mk .mk-ctl--inline { inline-size: auto; min-block-size: 38px; padding-block: 4px; }
.mk .mk-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--lm-d-muted); }

/* the month's budget against the cap: spent · held · left */
.mk .mk-budget { display: flex; flex-direction: column; gap: 6px; }
.mk .mk-budget-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; font-size: 14px; }
.mk .mk-bbar { display: flex; block-size: 12px; border-radius: 999px; overflow: hidden; background: var(--lm-d-divider); }
.mk .mk-bbar .is-spent, .mk .mk-blegend .is-spent { background: var(--lm-d-info); }
.mk .mk-bbar .is-held, .mk .mk-blegend .is-held { background: var(--lm-d-info); opacity: .35; }
.mk .mk-blegend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--lm-d-muted); }
.mk .mk-blegend i { display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 2px; margin-inline-end: 4px; vertical-align: -1px; }
.mk .mk-blegend .is-free { background: var(--lm-d-divider); border: 1px solid var(--lm-d-control-edge); }

/* the table's step dots */
.mk .mk-dots { display: inline-flex; gap: 4px; align-items: center; }
.mk .mk-dots i { inline-size: 10px; block-size: 10px; border-radius: 50%; border: 2px solid var(--lm-d-control-edge); }
.mk .mk-dots i.is-done { background: var(--lm-d-ok); border-color: var(--lm-d-ok); }
.mk .mk-dots i.is-current { background: var(--lm-d-accent-soft); border-color: var(--lm-d-accent); }
.mk .mk-dots i.is-blocked { background: var(--lm-d-warn-soft); border-color: var(--lm-d-warn); }

/* the project's card */
.mk .mk-camps { display: flex; flex-direction: column; gap: 14px; }
.mk .mk-camp { border: 1px solid var(--lm-d-border); border-radius: 12px; background: var(--lm-d-surface); overflow: hidden; scroll-margin-block-start: 16px; }
.mk .mk-camp.is-mine { border-color: var(--lm-d-accent-line); box-shadow: 0 0 0 3px var(--lm-d-accent-soft); }
.mk .mk-camp.is-stuck { border-color: var(--lm-d-warn); }
.mk .mk-camp.is-focus { box-shadow: 0 0 0 3px var(--lm-d-info-soft); border-color: var(--lm-d-info); }
.mk .mk-camp-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 12px 16px; border-block-end: 1px solid var(--lm-d-divider); }
.mk .mk-camp-h h3 { margin: 0; font-size: 17px; font-weight: 700; }
.mk .mk-camp-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; color: var(--lm-d-muted); }
.mk .mk-camp-sum b { color: var(--lm-d-ink); font-variant-numeric: tabular-nums; }

/* the six-step rail */
.mk .mk-wf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 12px 16px 4px; list-style: none; }
.mk .mk-wf li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-inline: 4px; text-align: center; min-inline-size: 0; }
.mk .mk-wf li::before { content: ''; position: absolute; inset-block-start: 13px; inset-inline-start: 50%; inline-size: 100%; block-size: 2px; background: var(--lm-d-divider); }
.mk .mk-wf li:last-child::before { display: none; }
.mk .mk-wf li.is-done::before { background: var(--lm-d-ok); }
.mk .mk-wf-dot { position: relative; inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--lm-d-surface); border: 2px solid var(--lm-d-control-edge); color: var(--lm-d-subtle); }
.mk .mk-wf li.is-done .mk-wf-dot { background: var(--lm-d-ok); border-color: var(--lm-d-ok); color: var(--lm-d-surface); }
.mk .mk-wf li.is-current .mk-wf-dot { border-color: var(--lm-d-accent); color: var(--lm-d-accent-ink); background: var(--lm-d-accent-soft); }
.mk .mk-wf li.is-blocked .mk-wf-dot { border-color: var(--lm-d-warn); color: var(--lm-d-warn); background: var(--lm-d-warn-soft); }
.mk .mk-wf b { font-size: 12.5px; }
.mk .mk-wf small { font-size: 12px; color: var(--lm-d-muted); overflow-wrap: anywhere; }

/* the done steps on one line, the current step's box, what comes next */
.mk .mk-doneline, .mk .mk-nextline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 6px 16px; font-size: 12.5px; color: var(--lm-d-muted); }
.mk .mk-ck { color: var(--lm-d-ok); font-weight: 700; }
.mk .mk-nextline b { color: var(--lm-d-ink); }
.mk .mk-cur { display: flex; flex-direction: column; gap: 8px; margin: 6px 16px 12px; padding: 12px 14px; border: 1px solid var(--lm-d-accent-line); border-radius: 10px; background: var(--lm-d-row-hl); }
.mk .mk-cur.is-warn { border-color: var(--lm-d-warn); background: var(--lm-d-warn-soft); }
.mk .mk-cur-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.mk .mk-cur-t b { font-size: 14px; }
.mk .mk-owner { font-size: 12.5px; color: var(--lm-d-muted); }
.mk .mk-owner.is-me { color: var(--lm-d-accent-ink); font-weight: 700; }
.mk .mk-cur .mk-kv { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block: 0; }
.mk .mk-cur .mk-kv > div { background: var(--lm-d-surface); }
.mk .mk-cur .mk-kv b { font-size: 14px; }

/* 19b. MKT-CAMP-15 (HO-3424): the ads step's box — each ad (title · format · designer · state / due), the bank's ready ideas */
.mk .mk-ads { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--lm-d-divider); border-radius: 10px; background: var(--lm-d-surface); }
.mk .mk-ads li { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); align-items: center; gap: 4px 12px; padding: 8px 12px; font-size: 13px; }
.mk .mk-ads li + li { border-block-start: 1px solid var(--lm-d-divider); }
.mk .mk-ads-t { color: var(--lm-d-ink); text-decoration: none; overflow-wrap: anywhere; }
.mk .mk-ads-t:hover { text-decoration: underline; }
.mk .mk-ads-s { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mk .mk-ads-s small { font-size: 12px; }
.mk .mk-ads-ideas { display: flex; flex-direction: column; gap: 6px; padding-block-start: 8px; border-block-start: 1px dashed var(--lm-d-divider); font-size: 13px; }
.mk .mk-ads-ideas ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mk .mk-ads-ideas li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }

/* 19c. MKT-CAMP-16 (HO-3425): a step's deadline — «الميعاد 06/10 · بعد يومين» / «متأخرة يوم · اتصعّدت»; a late step on the
   rail and in the table's dots reads like a stuck one («! واقفة أو متأخرة»); the panel's deadline line; the cards' filter */
.mk .mk-due { font-size: 12.5px; font-weight: 600; color: var(--lm-d-muted); white-space: nowrap; }
.mk .mk-due.is-soon { color: var(--lm-d-warn); }
.mk .mk-due.is-late { color: var(--lm-d-danger); font-weight: 700; white-space: normal; }
.mk .mk-cur-t .mk-due { margin-inline-start: auto; }
.mk .mk-camp.is-late { border-color: var(--lm-d-danger); }
.mk .mk-wf li.is-late .mk-wf-dot { border-color: var(--lm-d-danger); color: var(--lm-d-danger); background: var(--lm-d-danger-soft); }
.mk .mk-dots i.is-late { background: var(--lm-d-danger-soft); border-color: var(--lm-d-danger); }
.mk .mk-how-sla { font-size: 12px; font-weight: 700; color: var(--lm-d-ink); }
.mk .mk-camps-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }

/* 19d. MKT-CAMP-17 (HO-3426): a running campaign's follow-up — the line under each figure («المتوقع لحد النهارده 14» ·
   «ناقص 45%» · «المفترض 100 ج»), red when it is the alert's side, green when it is ahead */
.mk .mk-follow small { display: block; margin-block-start: 2px; font-size: 12px; color: var(--lm-d-muted); }
.mk .mk-follow small.is-bad { color: var(--lm-d-danger); font-weight: 600; }
.mk .mk-follow small.is-good { color: var(--lm-d-ok); font-weight: 600; }

/* 19e. MKT-CAMP-18 (HO-3427): «السجل والتعليقات (N)» — the card's (and the campaign page's) log: the system's lines quiet on
   the chip ground, people's comments ruled on the surface; «كل السجل»; the comment box with the @ picker (its people as
   44px buttons, the picked ones as chips) and «ابعت» */
.mk .mk-log { margin: 0 16px 12px; border-block-start: 1px solid var(--lm-d-divider); }
.mk .mk-log > summary { display: flex; align-items: center; gap: 8px; min-block-size: 44px; font-size: 12.5px; font-weight: 700; color: var(--lm-d-muted); }
.mk .mk-log-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0 0 8px; list-style: none; }
.mk .mk-log-list li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; }
.mk .mk-log-list time { padding-block-start: 6px; font-size: 12px; color: var(--lm-d-muted); font-variant-numeric: tabular-nums; }
.mk .mk-log-c { border-radius: 8px; padding: 6px 10px; line-height: 1.6; overflow-wrap: anywhere; }
.mk .mk-log-c.is-system { background: var(--lm-d-chip-bg); color: var(--lm-d-ink); }
.mk .mk-log-c.is-note { background: var(--lm-d-surface); border: 1px solid var(--lm-d-accent-line); }
.mk .mk-log-body { white-space: pre-line; }
.mk .mk-log-c small { display: block; }
.mk .mk-log-who { font-size: 12px; color: var(--lm-d-muted); font-weight: 600; }
.mk .mk-log-c.is-system .mk-log-who::after { content: ' ·'; }
.mk .mk-log-money { font-variant-numeric: tabular-nums; }
.mk .mk-log .mk-btn { min-block-size: 44px; }
.mk .mk-log-more { margin-block-end: 8px; }
.mk .mk-log-compose { display: flex; flex-direction: column; gap: 8px; padding-block-end: 12px; }
.mk .mk-log-compose textarea.mk-ctl { min-block-size: 64px; }
.mk .mk-log-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.mk .mk-log-pick { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; padding-inline: 12px; border-radius: 999px; border: 1px solid var(--lm-d-accent-line); background: var(--lm-d-accent-soft); color: var(--lm-d-accent-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.mk .mk-log-who-box { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--lm-d-divider); border-radius: 10px; background: var(--lm-d-surface); }
.mk .mk-log-who-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mk .mk-log-card { padding-block-start: 4px; }
.mk .mk-log-card .mk-log { margin-block-end: 4px; border-block-start: 0; }

/* 19f. MKT-CAMP-19 (HO-3428): the month-end review under the budget bar — «مراجعة سبتمبر: …», each key on one line of the
   note (reality · its volume · the policy) separated by «·», the close ones last; who updates which key beside the two
   presses (44px); «إزاي اتحسبت؟». The note keeps the mockup's green ground with the ink's words. */
.mk .mk-note.mk-review { display: flex; flex-direction: column; gap: 6px; color: var(--lm-d-ink); border-color: var(--lm-d-ok); }
.mk .mk-review-keys { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--lm-d-muted); font-variant-numeric: tabular-nums; }
.mk .mk-review-keys li + li::before { content: '·'; padding-inline: 8px; }
.mk .mk-review-keys li.is-differs { color: var(--lm-d-ink); font-weight: 600; }
.mk .mk-review .mk-actions { align-items: center; }
.mk .mk-review .mk-btn { min-block-size: 44px; }
.mk .mk-review-how { margin: 0; }
.mk .mk-sr { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mk [x-cloak] { display: none !important; }

@media (max-width: 1023.98px) {
    .mk .mk-ads li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .mk .mk-how-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mk .mk-how-flow li:nth-child(3n + 1) { border-inline-start: 0; }
    .mk .mk-how-flow li:nth-child(n + 4) { border-block-start: 1px solid var(--lm-d-divider); }
    .mk .mk-cur .mk-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .mk .mk-how-flow { grid-template-columns: minmax(0, 1fr); }
    .mk .mk-how-flow li, .mk .mk-how-flow li:nth-child(n) { border-inline-start: 0; border-block-start: 1px solid var(--lm-d-divider); }
    .mk .mk-how-flow li:first-child { border-block-start: 0; }
    .mk .mk-wf { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; }
    .mk .mk-wf li:nth-child(3)::before { display: none; }
    .mk .mk-how > summary, .mk .mk-ctl--inline { min-block-size: 44px; }
    .mk .mk-cur { margin-inline: 12px; }
    .mk .mk-ads li { grid-template-columns: minmax(0, 1fr); }
    .mk .mk-ads-ideas .mk-btn { min-block-size: 44px; }
    .mk .mk-log { margin-inline: 12px; }
    .mk .mk-log-list li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .mk .mk-log-list time { padding-block-start: 0; }
}

/* ── 19c. MKT-CAMP-14 follow-up (PO 05/10): a two-line option — the «حملة جديدة» project picker (the dropdown sits outside
   .mk, so these two are unscoped; tokens only). Line 1 the project, line 2 its month small and muted. ── */
.mk-pick { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.mk-pick-t { font-weight: 600; color: var(--lm-d-ink); }
.mk-pick-s { font-size: 12px; line-height: 1.5; color: var(--lm-d-muted); white-space: normal; }

/* ── 19g. MKT-CAMP-14 follow-up (PO 05/10 «لو فيه حملات حالتها اتحركت خلي ترتيبها الاول»): «اتحركت من ساعتين» — a tiny line
   beside the card's code / region (and under the table's project) on a campaign that moved; the cards that moved come
   first. Tokens only, 12px floor. ── */
.mk .mk-moved { font-size: 12px; font-weight: 600; color: var(--lm-d-info); white-space: nowrap; }
.mk .mk-camp-h .mk-moved { margin-inline-start: 8px; }

/* ── 20. MKT-CAMP-20 (HO-3430, mockup v4 screen 4 «صفحة الحملة»): a target campaign's page — the stage's tags under the
   breadcrumb, the card's rail a little larger (`mk-wf--big`) on its own plain card, the chain table (its main steps bold,
   its source muted), the sub-cards of a tab (`mk-cp-sub`), «إعداد الحملة على ميتا» (`mk-setup`: number · step + summary ·
   mode · «عدّل»), the built record (`mk-cp-kv`), the pace chart (inline SVG — every stroke and label a theme token; 12px
   floor), the details' two columns. Tokens only, logical properties, 44px controls on a phone, no horizontal scroll at
   375px (the chain table scrolls inside its own wrapper). ── */
.mk .mk-cp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mk .mk-cp-rail { padding-block-end: 4px; }
.mk .mk-wf--big { padding: 16px 16px 6px; }
.mk .mk-wf--big .mk-wf-dot { inline-size: 32px; block-size: 32px; }
.mk .mk-wf--big li::before { inset-block-start: 15px; }
.mk .mk-cp-chain tr.is-strong td:first-child, .mk .mk-cp-chain tr.is-strong td.mk-t-num { font-weight: 700; color: var(--lm-d-ink); }
.mk .mk-cp-src { font-size: 12.5px; color: var(--lm-d-muted); }
.mk .mk-cp-stack { display: flex; flex-direction: column; gap: 12px; min-inline-size: 0; }
.mk .mk-cp-sec { display: flex; flex-direction: column; gap: 10px; }
.mk .mk-cp-h { margin: 0; font-size: 15px; font-weight: 700; color: var(--lm-d-ink); }
.mk .mk-cp-sub { display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; padding: 10px 12px; border: 1px solid var(--lm-d-divider); border-radius: 10px; background: var(--lm-d-surface); }
.mk .mk-cp-sub-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.mk .mk-cp-sub-h.is-end { justify-content: flex-end; }
.mk .mk-cp-act .fi-btn { min-block-size: 36px; }
.mk .mk-cp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }

/* «إعداد الحملة على ميتا» */
.mk .mk-setup { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mk .mk-setup li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--lm-d-divider); border-radius: 8px; }
.mk .mk-setup-n { inline-size: 24px; block-size: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--lm-d-chip-bg); color: var(--lm-d-muted); }
.mk .mk-setup-t { display: flex; flex-direction: column; gap: 1px; min-inline-size: 0; }
.mk .mk-setup-t span { font-size: 12.5px; color: var(--lm-d-muted); overflow-wrap: anywhere; }
.mk .mk-setup-t b { font-size: 13.5px; }
.mk .mk-setup-edit { font-size: 12.5px; font-weight: 600; }
.mk .mk-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* the built record */
.mk .mk-cp-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13px; }
.mk .mk-cp-kv dt { color: var(--lm-d-muted); }
.mk .mk-cp-kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* the pace chart — drawn to scale by TargetCampaignView; the strokes and labels follow the theme */
/* capped so its 12px labels stay near 12px; the drawing reads left to right (day 1 → the last day) whatever the page's direction */
.mk .mk-chart { display: flex; flex-direction: column; gap: 6px; margin: 0; min-inline-size: 0; max-inline-size: 760px; }
.mk .mk-chart svg { display: block; inline-size: 100%; block-size: auto; max-inline-size: 100%; direction: ltr; unicode-bidi: isolate; }
.mk .mk-chart-grid line { stroke: var(--lm-d-divider); stroke-width: 1; }
.mk .mk-chart-ax text { fill: var(--lm-d-muted); font-size: 12px; font-family: inherit; }
.mk .mk-chart-lbl { fill: var(--lm-d-ink); font-size: 12px; font-weight: 600; font-family: inherit; }
.mk .mk-chart-target { stroke: var(--lm-d-control-edge); stroke-width: 1.5; stroke-dasharray: 2 4; }
.mk .mk-chart-exp { stroke: var(--lm-d-subtle); stroke-width: 2; stroke-dasharray: 6 4; fill: none; }
.mk .mk-chart-fc { stroke: var(--lm-d-warn); stroke-width: 2; stroke-dasharray: 3 4; fill: none; }
.mk .mk-chart-act { stroke: var(--lm-d-info); stroke-width: 3; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.mk .mk-chart-area { fill: var(--lm-d-info-soft); stroke: none; }
.mk .mk-chart-actdot { fill: var(--lm-d-info); }
.mk .mk-chart-expdot { fill: var(--lm-d-subtle); }
.mk .mk-lg { display: inline-block; inline-size: 16px; block-size: 3px; margin-inline-end: 6px; border-radius: 2px; vertical-align: middle; }
.mk .mk-lg.is-act { background: var(--lm-d-info); }
.mk .mk-lg.is-exp { background: var(--lm-d-subtle); }
.mk .mk-lg.is-fc { background: var(--lm-d-warn); }

@media (max-width: 1023.98px) {
    .mk .mk-cp-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .mk .mk-setup li { grid-template-columns: 28px minmax(0, 1fr); }
    .mk .mk-setup-edit, .mk .mk-cp-tags .mk-tag + .mk-due { min-block-size: 44px; display: inline-flex; align-items: center; }
    .mk .mk-cp-act .fi-btn, .mk .mk-cp-sub .mk-btn { min-block-size: 44px; }
    .mk .mk-cp-kv { grid-template-columns: minmax(0, 1fr); gap: 0 12px; }
    .mk .mk-cp-kv dd { margin-block-end: 6px; }
}

/* MKT-CAMP-21 (HO-3432): a track's outcome number on «الأهداف والفعلي» — the number + its KPI + its state, «ليه» (small),
   «إزاي بيتقاس؟» (one line, opened on demand), the owner's presses; the actual beside it and last month's, compact */
.mk .mk-tt { display: flex; flex-direction: column; gap: 4px; min-inline-size: 220px; }
.mk .mk-tt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mk .mk-tt-why { font-size: 12.5px; line-height: 1.6; color: var(--lm-d-muted); }
.mk .mk-tt-why b { color: var(--lm-d-ink); font-weight: 600; }
.mk .mk-tt-how > summary { list-style: none; cursor: pointer; font-size: 12.5px; color: var(--lm-d-info); min-block-size: 24px; display: inline-flex; align-items: center; }
.mk .mk-tt-how > summary::-webkit-details-marker { display: none; }
.mk .mk-tt-how[open] > summary { color: var(--lm-d-ink); font-weight: 600; }
.mk .mk-tt-how > div { font-size: 12.5px; line-height: 1.6; color: var(--lm-d-muted); }
.mk .mk-tt-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mk .mk-tt-last { font-size: 12.5px; color: var(--lm-d-muted); border-block-start: 1px dashed var(--lm-d-divider); padding-block-start: 4px; margin-block-start: 2px; }
.mk .mk-tt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-end: 8px; }
@media (max-width: 640px) {
    .mk .mk-tt { min-inline-size: 0; }
    .mk .mk-tt-how > summary, .mk .mk-tt-acts .fi-btn, .mk .mk-tt-acts .fi-link { min-block-size: 44px; }
}