/* ─────────────────────────────────────────────────────────────────────
   HOMEi Live Manager — «المدير اللحظي» split page (LM-SPLIT-1, 2026-09-23)

   The approved design (homei-smart-manager-handoff: the two PNGs, the two
   HTML files and tokens.css): the list on the right (~42%), the line opened
   beside it (~58%, sticky, its own scroll, buttons pinned at its foot); a
   drawer from 768 to 1199px; a bottom sheet under 768px.

   Literal to the design at the owner's instruction: its colours (the
   --lm-d-* tokens in tokens.css — no hex here, the ratchet holds this sheet
   at zero), its type (Cairo, scoped to this screen; the panel keeps IBM Plex
   everywhere else), its sizes, weights, radii and spacing. RTL-safe: logical
   properties only, so the same sheet serves Arabic and English.

   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 (agent-operating-memory §8.8).
   ──────────────────────────────────────────────────────────────────── */

@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/cairo/Cairo-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/cairo/Cairo-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/cairo/Cairo-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/cairo/Cairo-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/cairo/Cairo-ExtraBold.ttf') format('truetype'); }

/* ── the page ground: the design's light blue-grey, this screen only ── */
body:has(.lms) { background: var(--lm-d-page); }
body:has(.lms) .fi-main-ctn { background: transparent; }
html.lms-locked, html.lms-locked body { overflow: hidden; }
/* the drawer and the sheet sit above the page (45); an action's modal opened from them must sit above both */
body:has(.lms) .fi-modal-close-overlay, body:has(.lms) .fi-modal-window-ctn { z-index: 60; }

.lms {
    --lms-radius: 14px;
    --lms-shadow: 0 1px 2px var(--lm-d-shadow);
    --lms-sticky-top: 73px;
    --lms-pane-h: calc(100dvh - var(--lms-sticky-top) - 24px);

    font-family: 'Cairo', var(--font-family, system-ui), sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--lm-d-ink);
    -webkit-font-smoothing: antialiased;
}
.lms [x-cloak] { display: none !important; }
.lms-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; }
.lms-ic { inline-size: 18px; block-size: 18px; flex: none; stroke-width: 1.8; }
.lms bdi { unicode-bidi: isolate; }
.lms .lms-num { font-feature-settings: "tnum"; }
.lms-grow { flex: 1; }
.lms :focus-visible { outline: 2px solid var(--lm-d-accent); outline-offset: 2px; }
[dir="ltr"] .lms .lms-flip { transform: scaleX(-1); }

/* ── head: title + lead, the four numbers, «السياسات» ──────────────── */
.lms-head { display: flex; align-items: center; gap: 16px; margin-block-end: 16px; }
.lms-head-text { min-inline-size: 0; }
.lms-title { font-size: 30px; font-weight: 800; line-height: 1.3; color: var(--lm-d-ink); margin: 0; }
.lms-lead { font-size: 15px; color: var(--lm-d-muted); margin: 4px 0 0; }
.lms-lead-phone { display: none; }

.lms-card { background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: var(--lms-radius); box-shadow: var(--lms-shadow); }

.lms-pulse { display: flex; align-items: stretch; padding: 2px 6px; }
.lms-pulse-item { flex: 1; text-align: center; padding: 6px 12px; border-inline-start: 1px solid var(--lm-d-divider); margin-block: 4px; }
.lms-pulse-item:first-child { border-inline-start: 0; }
.lms-pulse-own { display: flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 13px; font-weight: 800; color: var(--lm-d-muted); white-space: nowrap; }
.lms-pulse-own .lms-ic { inline-size: 15px; block-size: 15px; }
.lms-pulse-own + .lms-pulse-item { border-inline-start: 1px solid var(--lm-d-divider); }
.lms-pulse-v { display: block; font-size: 18px; font-weight: 800; line-height: 1.2; }
.lms-pulse-l { display: block; font-size: 12px; color: var(--lm-d-muted); white-space: nowrap; }
.lms-pulse-sub { display: block; font-size: var(--ho-text-xs); line-height: 1.3; color: var(--lm-d-muted); white-space: nowrap; }

/* Owner 23-9 (review round): no READABLE text in the design's light grey (--lm-d-subtle) on white — every word and
   figure that used it (tab counts, day groups, row meta, the fractions, the scale, placeholders) reads --lm-d-muted;
   --lm-d-subtle now colours icons only: the chevrons, the empty-state icons, the reply field's icon. */
/* text tones — words and figures only; components carry their own compound tones */
.lms .lms-t-ink { color: var(--lm-d-ink); }
.lms .lms-t-muted { color: var(--lm-d-muted); }
.lms .lms-t-ok { color: var(--lm-d-ok); }
.lms .lms-t-warn { color: var(--lm-d-warn); }
.lms .lms-t-danger { color: var(--lm-d-danger); }
.lms .lms-t-info { color: var(--lm-d-info); }

/* ── buttons ────────────────────────────────────────────────────────── */
.lms-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; block-size: 42px; padding: 0 18px; border-radius: 10px; font-family: inherit; font-weight: 700; font-size: 14px; border: 1px solid transparent; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s; }
.lms-btn:disabled { opacity: .6; cursor: default; }
.lms-btn-s { background: var(--lm-d-surface); color: var(--lm-d-ink); border-color: var(--lm-d-control-edge); }
.lms-btn-s:hover { background: var(--lm-d-hover); }
.lms-btn-p { background: var(--lm-d-accent); color: var(--lm-d-on-accent); }
.lms-btn-p:hover { filter: brightness(0.96); }
.lms-btn-i { inline-size: 42px; padding: 0; background: var(--lm-d-surface); color: var(--lm-d-ink); border-color: var(--lm-d-control-edge); }
.lms-btn-i:hover { background: var(--lm-d-hover); }
.lms-btn-sm { block-size: 36px; padding: 0 14px; font-size: 13.5px; }
.lms-btn-sm.lms-btn-i { inline-size: 36px; padding: 0; }

/* ── badges and chips ───────────────────────────────────────────────── */
.lms-badge { display: inline-flex; align-items: center; gap: 5px; block-size: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.lms-badge .lms-ic { inline-size: 13px; block-size: 13px; }
.lms-badge.is-warn { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }
.lms-badge.is-info { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.lms-badge.is-ok { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.lms-badge.is-danger { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.lms-badge.is-quiet { background: var(--lm-d-quiet-bg); color: var(--lm-d-muted); }

.lms-type { inline-size: 40px; block-size: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.lms-type.is-warn { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }
.lms-type.is-info { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.lms-type.is-danger { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.lms-type.is-quiet { background: var(--lm-d-quiet-bg); color: var(--lm-d-muted); }

/* ── the split ──────────────────────────────────────────────────────── */
.lms-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }

/* ── the list ───────────────────────────────────────────────────────── */
/* sideways only: the «تصفية» menu may hang below a short list (a tab with one row) */
.lms-list { overflow-x: clip; }
.lms-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-block-end: 1px solid var(--lm-d-border); }
.lms-tabs { display: flex; gap: 4px; }
.lms-tab { block-size: 36px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 9px; font-family: inherit; font-weight: 700; font-size: 13.5px; color: var(--lm-d-muted); background: transparent; border: 0; cursor: pointer; white-space: nowrap; }
.lms-tab:hover { color: var(--lm-d-ink); }
.lms-tab-c { font-size: 12px; color: var(--lm-d-muted); }
.lms-tab.is-on { background: var(--lm-d-tab-on-bg); color: var(--lm-d-tab-on-ink); }
.lms-tab.is-on .lms-tab-c { color: var(--lm-d-tab-on-count); }

/* Business Owner 25-9: the filters are shown — search beside the tabs, then the window and the types with their counts */
.lms-search-field { margin-inline-start: auto; inline-size: min(360px, 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); }
.lms-search-field .lms-ic { inline-size: 16px; block-size: 16px; flex: none; }
.lms-search-field input { flex: 1; min-inline-size: 0; block-size: 34px; border: 0; outline: 0; background: transparent; color: var(--lm-d-ink); font-family: inherit; font-size: 13.5px; }
.lms-search-field input::placeholder { color: var(--lm-d-muted); }
.lms-search-field:focus-within { border-color: var(--lm-d-accent); box-shadow: 0 0 0 3px var(--lm-d-accent-soft); }
.lms-search-clear { inline-size: 26px; block-size: 26px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--lm-d-muted); cursor: pointer; }
.lms-search-clear:hover { background: var(--lm-d-hover); color: var(--lm-d-ink); }
.lms-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 12px; border-block-end: 1px solid var(--lm-d-border); }
.lms-filterbar-l { font-size: 12.5px; font-weight: 700; color: var(--lm-d-muted); }
.lms-filterbar-sep { inline-size: 1px; block-size: 22px; background: var(--lm-d-border); margin-inline: 4px; }
.lms-seg { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--lm-d-border); border-radius: 10px; background: var(--lm-d-surface); }
.lms-seg-b { 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-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.lms-seg-b:hover { color: var(--lm-d-ink); }
.lms-seg-b.is-on { background: var(--lm-d-chip-bg); color: var(--lm-d-ink); font-weight: 800; }
.lms-seg-b .lms-ic { inline-size: 14px; block-size: 14px; }
.lms-typechips { display: flex; flex-wrap: wrap; gap: 6px; }
.lms-typechip { block-size: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--lm-d-border); border-radius: 999px; background: var(--lm-d-surface); color: var(--lm-d-ink); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.lms-typechip .lms-num { font-size: 12px; color: var(--lm-d-muted); }
.lms-typechip:hover { border-color: var(--lm-d-control-edge); }
.lms-typechip.is-on { background: var(--lm-d-tab-on-bg); border-color: var(--lm-d-tab-on-bg); color: var(--lm-d-tab-on-ink); font-weight: 700; }
.lms-typechip.is-on .lms-num { color: var(--lm-d-tab-on-count); }
.lms-typechip-ic { display: inline-grid; place-items: center; }
.lms-typechip-ic .lms-ic { inline-size: 15px; block-size: 15px; }
.lms-typechip-ic.is-warn { color: var(--lm-d-warn); }
.lms-typechip-ic.is-info { color: var(--lm-d-info); }
.lms-typechip-ic.is-danger { color: var(--lm-d-danger); }
.lms-typechip-ic.is-quiet { color: var(--lm-d-muted); }
.lms-typechip.is-on .lms-typechip-ic { color: inherit; }

.lms-select { position: relative; display: inline-flex; align-items: center; }
.lms-select select { appearance: none; -webkit-appearance: none; block-size: 34px; border: 1px solid var(--lm-d-border); border-radius: 9px; background: var(--lm-d-surface); color: var(--lm-d-ink); font-family: inherit; font-weight: 600; font-size: 13.5px; padding-block: 0; padding-inline: 12px 32px; cursor: pointer; }
.lms-select .lms-ic { position: absolute; inset-inline-end: 10px; inline-size: 15px; block-size: 15px; color: var(--lm-d-subtle); pointer-events: none; }
.lms-select select:hover { border-color: var(--lm-d-control-edge); }
.lms-select select:focus, .lms-drop:focus-visible, .lms-field:focus-within { outline: none; border-color: var(--lm-d-accent); box-shadow: 0 0 0 3px var(--lm-d-accent-soft); }
.lms-icon-btn { inline-size: 34px; block-size: 34px; border-radius: 10px; border: 1px solid var(--lm-d-control-edge); background: var(--lm-d-surface); color: var(--lm-d-ink); display: grid; place-items: center; cursor: pointer; }
.lms-icon-btn:hover, .lms-icon-btn[aria-expanded="true"] { background: var(--lm-d-hover); }

/* Business Owner 25-9: what needs you first («ينتظر قرارك», «لم تُشاهد بعد»), then the rest by day */
.lms-day { font-size: 12.5px; font-weight: 800; color: var(--lm-d-muted); padding: 0 18px; block-size: 28px; display: flex; align-items: center; gap: 7px; background: var(--lm-d-hover); border-block-end: 1px solid var(--lm-d-divider); }
.lms-day .lms-ic { inline-size: 14px; block-size: 14px; }
.lms-day-c { font-weight: 600; }
.lms-day.is-decide { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }
.lms-day.is-unseen { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.lms-cols { display: grid; grid-template-columns: var(--lms-row-cols); column-gap: 14px; align-items: center; block-size: 32px; padding: 0 18px; font-size: 12.5px; font-weight: 700; color: var(--lm-d-muted); border-block-end: 1px solid var(--lm-d-border); }

.lms-list { --lms-row-cols: 18px 32px minmax(0, 1fr) 186px 168px 52px 112px; }
.lms-row { position: relative; display: grid; grid-template-columns: var(--lms-row-cols); column-gap: 14px; align-items: center; min-block-size: 50px; padding: 5px 18px; border-block-end: 1px solid var(--lm-d-divider); color: inherit; text-decoration: none; cursor: pointer; transition: background-color .12s; }
.lms-group:last-child .lms-row:last-child { border-block-end: 0; }
.lms-row:hover { background: var(--lm-d-hover); }
.lms-row.is-awaiting { background: var(--lm-d-row-hl); }
.lms-row.is-open { background: var(--lm-d-accent-soft); }
.lms-row.is-open::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px; background: var(--lm-d-accent); }
.lms-row .lms-type { inline-size: 30px; block-size: 30px; border-radius: 9px; }
.lms-row .lms-type .lms-ic { inline-size: 16px; block-size: 16px; }
.lms-row-main { min-inline-size: 0; display: flex; flex-direction: column; gap: 1px; }
.lms-row-line2 { display: flex; align-items: center; gap: 6px; min-inline-size: 0; overflow: hidden; white-space: nowrap; font-size: 12.5px; color: var(--lm-d-muted); }
.lms-row-line2 > * { flex: none; }
.lms-row-about { flex: 0 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.lms-row-to { color: var(--lm-d-ink); font-weight: 800; }
.lms-row-chip { block-size: 20px; display: inline-flex; align-items: center; padding: 0 7px; border-radius: 6px; background: var(--lm-d-chip-bg); color: var(--lm-d-ink); font-weight: 600; }
.lms-row-auto { block-size: 20px; display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border-radius: 6px; background: var(--lm-d-warn-soft); color: var(--lm-d-warn); font-weight: 700; }
.lms-row-auto .lms-ic { inline-size: 12px; block-size: 12px; }
.lms-row-replies { display: inline-flex; align-items: center; gap: 4px; color: var(--lm-d-info); font-weight: 700; }
.lms-row-replies .lms-ic { inline-size: 13px; block-size: 13px; }
.lms-row-figm { display: none; }
.lms-row-fig { min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.lms-row-fig-top { display: flex; align-items: baseline; gap: 6px; min-inline-size: 0; font-size: 12.5px; color: var(--lm-d-muted); white-space: nowrap; overflow: hidden; }
.lms-row-fig-top b { font-size: 15px; font-weight: 800; }
.lms-row-fig-sub { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--lm-d-muted); }
.lms-minibar { position: relative; inline-size: 56px; block-size: 6px; flex: none; border-radius: 3px; background: var(--lm-d-quiet-bg); overflow: hidden; }
.lms-minibar i { position: absolute; inset-block: 0; inset-inline-start: 0; }
.lms-minibar i.is-expected { background: var(--lm-d-track-expected); }
.lms-minibar .lms-bg-danger { background: var(--lm-d-danger); }
.lms-minibar .lms-bg-warn { background: var(--lm-d-warn); }
.lms-minibar .lms-bg-ok { background: var(--lm-d-ok); }
.lms-minibar .lms-bg-info, .lms-minibar .lms-bg-quiet, .lms-minibar .lms-bg-ink { background: var(--lm-d-info); }
.lms-row-state { min-inline-size: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.lms-row-time { font-size: 12px; color: var(--lm-d-muted); white-space: nowrap; }
.lms-row-since { font-size: 12.5px; color: var(--lm-d-muted); white-space: nowrap; }
a.lms-row-title { text-decoration: none; }
a.lms-row-title:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── act on a row without opening it (Business Owner 25-9) ── */
/* the phone's swipe wrapper is invisible elsewhere */
.lms-swipe { display: contents; }
.lms-swipe-acts { display: none; }
.lms-row-sel { display: grid; place-items: center; }
.lms-row-sel input { inline-size: 16px; block-size: 16px; margin: 0; accent-color: var(--lm-d-tab-on-bg); cursor: pointer; opacity: 0; transition: opacity .12s; }
.lms-row:hover .lms-row-sel input, .lms-row-sel input:focus-visible, .lms-row-sel input:checked, .lms-list.has-selection .lms-row-sel input { opacity: 1; }
.lms-row.is-selected { background: var(--lm-d-info-soft); }
.lms-row.is-pending { opacity: .55; }
.lms-row-acts { display: flex; justify-content: flex-end; }
.lms-row-acts-in { display: flex; align-items: center; gap: 6px; opacity: 0; transition: opacity .12s; }
.lms-row:hover .lms-row-acts-in, .lms-row:focus-within .lms-row-acts-in, .lms-row.is-awaiting .lms-row-acts-in, .lms-row-acts-in:has([aria-expanded="true"]) { opacity: 1; }
.lms-q { inline-size: 32px; block-size: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--lm-d-control-edge); background: var(--lm-d-surface); color: var(--lm-d-ink); cursor: pointer; font-family: inherit; }
.lms-q .lms-ic { inline-size: 16px; block-size: 16px; }
.lms-q:hover, .lms-q[aria-expanded="true"] { border-color: var(--lm-d-accent); box-shadow: 0 2px 8px var(--lm-d-sheet-shadow); }
.lms-q.is-ok { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); border-color: transparent; }
.lms-q.is-no { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); border-color: transparent; }
.lms-q.is-undo { inline-size: auto; padding: 0 10px; display: inline-flex; gap: 6px; font-size: 13px; font-weight: 800; color: var(--lm-d-accent-ink); border-color: var(--lm-d-accent-line); }
.lms-q-wrap { position: relative; }
.lms-pop { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; z-index: 35; min-inline-size: 170px; display: flex; flex-direction: column; padding: 6px; background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 12px; box-shadow: 0 12px 32px var(--lm-d-sheet-shadow); }
.lms-pop.is-menu { min-inline-size: 260px; }
.lms-pop-sec { display: flex; flex-direction: column; padding-block: 2px; }
.lms-pop-sec + .lms-pop-sec, .lms-pop-sec + .lms-pop-item.is-link { border-block-start: 1px solid var(--lm-d-divider); margin-block-start: 4px; padding-block-start: 6px; }
.lms-pop-item { display: block; inline-size: 100%; text-align: start; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--lm-d-ink); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.lms-pop-item:hover:not(:disabled) { background: var(--lm-d-hover); }
.lms-pop-item:disabled { color: var(--lm-d-muted); cursor: default; white-space: normal; }
.lms-pop-item.is-link { color: var(--lm-d-info); font-weight: 700; }
.lms-pop-note { padding: 8px 10px; font-size: 13px; color: var(--lm-d-muted); }

.lms-toast { position: fixed; inset-block-end: 24px; inset-inline-start: 50%; translate: 50% 0; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 12px; background: var(--lm-d-tab-on-bg); color: var(--lm-d-tab-on-ink); font-size: 13.5px; font-weight: 700; box-shadow: 0 10px 28px var(--lm-d-sheet-shadow); max-inline-size: min(620px, calc(100vw - 32px)); }
[dir="ltr"] .lms-toast { translate: -50% 0; }
.lms-toast-ic { inline-size: 24px; block-size: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--lm-d-ok); flex: none; }
.lms-toast-ic .lms-ic { inline-size: 14px; block-size: 14px; }
.lms-toast-msg { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lms-toast-undo { display: inline-flex; align-items: center; gap: 6px; block-size: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--lm-d-surface); color: var(--lm-d-ink); font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.lms-toast-undo .lms-ic { inline-size: 15px; block-size: 15px; }
.lms-toast-left { font-size: 12.5px; color: var(--lm-d-tab-on-count); }
.lms-bulkbar { position: fixed; inset-block-end: 24px; inset-inline-start: 50%; translate: 50% 0; z-index: 55; display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 14px; box-shadow: 0 12px 32px var(--lm-d-sheet-shadow); white-space: nowrap; }
[dir="ltr"] .lms-bulkbar { translate: -50% 0; }
.lms-bulkbar-n { min-inline-size: 28px; block-size: 28px; border-radius: 14px; display: grid; place-items: center; background: var(--lm-d-tab-on-bg); color: var(--lm-d-tab-on-ink); font-size: 13px; }
.lms-bulk-ack { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); border-color: transparent; }
.lms-bulk-clear { display: inline-flex; align-items: center; gap: 6px; block-size: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--lm-d-muted); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.lms-bulk-clear:hover { color: var(--lm-d-ink); }
.lms-row-title { display: block; font-size: 13.5px; font-weight: 700; color: var(--lm-d-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lms-row-meta { display: block; font-size: 12px; color: var(--lm-d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lms-dot { display: inline-block; inline-size: 3px; block-size: 3px; border-radius: 50%; background: var(--lm-d-dot); margin: 0 6px; vertical-align: middle; }
.lms-go { color: var(--lm-d-subtle); display: grid; place-items: center; }
.lms-go .lms-ic { inline-size: 16px; block-size: 16px; }
.lms-row.is-open .lms-go { color: var(--lm-d-accent-ink); }

.lms-pager { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 13px; color: var(--lm-d-muted); border-block-start: 1px solid var(--lm-d-divider); }

.lms-empty { text-align: center; padding: 36px 20px 40px; }
.lms-empty-ic { inline-size: 48px; block-size: 48px; border-radius: 14px; background: var(--lm-d-page); color: var(--lm-d-subtle); display: grid; place-items: center; margin: 0 auto 10px; }
.lms-empty-ic .lms-ic { inline-size: 22px; block-size: 22px; }
.lms-empty-t { font-size: 15px; font-weight: 700; color: var(--lm-d-ink); margin: 0; }
.lms-empty-b { font-size: 13px; color: var(--lm-d-muted); margin: 4px auto 0; max-inline-size: 34ch; }
.lms-empty .lms-btn { margin-block-start: 14px; }

/* ── clickable data (Business Owner 23-9): every number, card, chip and badge that opens its details says so ──
   A button keeps its component's look — the reset has no specificity, the component's class wins. */
:where(button.lms-hit) { appearance: none; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; line-height: inherit; text-align: inherit; }
.lms-hit { cursor: pointer; transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease; }
.lms-pulse-item.lms-hit { border-radius: 10px; }
.lms-pulse-item.lms-hit:hover { background: var(--lm-d-quiet-bg); }
.lms-pulse-item.lms-hit:hover .lms-pulse-l { color: var(--lm-d-ink); }
.lms-tile.lms-hit, .lms-meter.lms-hit, .lms-fact.lms-hit { inline-size: 100%; text-align: start; }
.lms-tile.lms-hit:hover, .lms-meter.lms-hit:hover, .lms-fact.lms-hit:hover { border-color: var(--lm-d-control-edge); background: var(--lm-d-hover); box-shadow: 0 2px 10px var(--lm-d-sheet-shadow); }
.lms-tile.tone-danger.lms-hit:hover { border-color: var(--lm-d-danger); background: var(--lm-d-danger-soft); box-shadow: 0 2px 10px var(--lm-d-sheet-shadow); }
.lms-track.lms-hit { border-radius: 8px; }
.lms-track.lms-hit:hover .lms-rail { box-shadow: 0 0 0 2px var(--lm-d-control-edge); }
.lms-chip.lms-hit:hover { background: var(--lm-d-quiet-bg); }
.lms-badge.lms-hit:hover { box-shadow: inset 0 0 0 1px currentColor; }
/* words that open something: a quiet dotted underline, full on hover */
.lms-hit-text { text-decoration: underline dotted var(--lm-d-control-edge); text-underline-offset: 4px; }
.lms-hit-text:hover { text-decoration-color: currentColor; }
button.lms-box-t.lms-hit, button.lms-sub.lms-hit { display: block; inline-size: 100%; text-align: start; }
.lms-follow li.lms-hit:hover { text-decoration: underline; text-underline-offset: 3px; }
.lms-table tr.lms-hit:hover td { background: var(--lm-d-hover); }
.lms-table tr.is-worst.lms-hit:hover td { background: var(--lm-d-danger-soft); }
.lms-link-plain { color: inherit; text-decoration: none; }
.lms-link-plain:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the place a click brought into view, for a moment */
.lms .is-flash { animation: lms-flash 1.6s ease-out; }
@keyframes lms-flash {
    0%, 35% { box-shadow: 0 0 0 3px var(--lm-d-accent-soft), 0 0 0 1px var(--lm-d-accent-line); }
    100% { box-shadow: 0 0 0 3px transparent, 0 0 0 1px transparent; }
}
@media (prefers-reduced-motion: reduce) { .lms .is-flash { animation: none; box-shadow: 0 0 0 1px var(--lm-d-accent-line); } }
.lms-calc { display: grid; gap: 10px; }

/* a number's side panel — the lines it counts, in the list's own rows */
.lms-details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }   /* one column that may shrink: long titles ellipsize, as in the list */
.lms-details-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.lms-details-v { font-size: 28px; font-weight: 800; line-height: 1.2; }
.lms-details-group h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--lm-d-ink); margin: 0 0 8px; }
.lms-details-list { border: 1px solid var(--lm-d-border); border-radius: 12px; overflow: hidden; }
.lms-details-list .lms-row:last-child { border-block-end: 0; }
.lms-details .lms-note { margin: 6px 0 0; }

/* skeletons — Loading for the list and the panel */
.lms-skel { display: block; border-radius: 8px; background: var(--lm-d-divider); animation: lms-pulse 1.4s ease-in-out infinite; }
@keyframes lms-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .lms-skel { animation: none; } }
.lms-skel-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-block-end: 1px solid var(--lm-d-divider); }
.lms-skel-row > .lms-skel:first-child { inline-size: 36px; block-size: 36px; border-radius: 11px; flex: none; }
.lms-skel-lines { flex: 1; display: grid; gap: 7px; }

/* ── the panel ──────────────────────────────────────────────────────── */
/* no overflow clipping on the pane itself — «المزيد» opens over its edges; the body scrolls, the foot keeps the corners */
.lms-pane { position: sticky; inset-block-start: var(--lms-sticky-top); max-block-size: var(--lms-pane-h); display: flex; flex-direction: column; }
.lms-handle { display: none; }
.lms-pane-head { padding: 16px 20px 12px; border-block-end: 1px solid var(--lm-d-border); display: flex; align-items: flex-start; gap: 12px; flex: none; }
.lms-pane-titles { flex: 1; min-inline-size: 0; }
.lms-pane-titleline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lms-pane-title { font-size: 18px; font-weight: 800; line-height: 1.45; color: var(--lm-d-ink); margin: 0; }
.lms-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-block-start: 6px; }
.lms-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--lm-d-muted); background: var(--lm-d-chip-bg); border-radius: 8px; padding: 3px 9px; }
.lms-chip .lms-ic { inline-size: 13px; block-size: 13px; }
.lms-chip.is-ok { color: var(--lm-d-ok); }
.lms-chip.is-warn { color: var(--lm-d-warn); }
.lms-chip.is-danger { color: var(--lm-d-danger); }
.lms-x { inline-size: 34px; block-size: 34px; border-radius: 9px; border: 1px solid var(--lm-d-border); display: grid; place-items: center; color: var(--lm-d-muted); background: var(--lm-d-surface); flex: none; cursor: pointer; }
.lms-x:hover { background: var(--lm-d-hover); color: var(--lm-d-ink); }

.lms-pane-live { flex: 1; min-block-size: 0; display: flex; flex-direction: column; }
.lms-pane-body { flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.lms-pane-foot { flex: none; padding: 12px 20px; border-block-start: 1px solid var(--lm-d-border); display: flex; gap: 8px; align-items: center; background: var(--lm-d-surface); border-end-start-radius: calc(var(--lms-radius) - 1px); border-end-end-radius: calc(var(--lms-radius) - 1px); }

.lms-headline { font-size: 15.5px; font-weight: 800; line-height: 1.5; color: var(--lm-d-ink); margin: 0; }
.lms-points { margin: 6px 0 0; padding-inline-start: 18px; font-size: 13.5px; }
.lms-ai { margin-block-start: 10px; background: var(--lm-d-ai-bg); border: 1px solid var(--lm-d-divider); border-radius: 12px; padding: 10px 14px; }
.lms-ai-l { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--lm-d-ai); }
.lms-ai-l .lms-ic { inline-size: 15px; block-size: 15px; }
.lms-ai p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.8; color: var(--lm-d-ai-ink); white-space: pre-line; }
.lms-ai b { font-weight: 700; }
/* a brief's «هل مطلوب مني إجراء؟»: the answer, then whom to follow up */
.lms-follow-l { margin-block-start: 8px; }
.lms-follow { margin: 4px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.7; color: var(--lm-d-ink); }
/* who owns the line's answer, in words («المستلم هو من يتخذ القرار») — under the name, as the line's page said it */
.lms-who-role { display: block; margin-block-start: 2px; font-weight: 400; }
/* an AI suggestion's caution — read where the suggestion is (the line's page said it; the panel is its only reader now) */
.lms-ai .lms-ai-caution { margin-block-start: 6px; font-size: 12.5px; line-height: 1.6; color: var(--lm-d-muted); white-space: normal; }

.lms-links-inline { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-block-start: 8px; }
.lms-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--lm-d-info); background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; text-decoration: none; }
.lms-link .lms-ic { inline-size: 13px; block-size: 13px; }
.lms-link:hover { text-decoration: underline; }
.lms-link[aria-expanded="true"] { color: var(--lm-d-ink); }

.lms-sec { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lms-sec h3 { font-size: 14px; font-weight: 700; color: var(--lm-d-ink); margin: 0; }
.lms-sec .lms-link .lms-ic { inline-size: 14px; block-size: 14px; }
.lms-sub { font-size: 12.5px; color: var(--lm-d-muted); margin: 2px 0 0; }

/* «المطلوب من المسؤول» — for the lines that ask for something */
.lms-box { border: 1px solid var(--lm-d-border); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; }
.lms-box-t { font-size: 14px; font-weight: 700; color: var(--lm-d-ink); white-space: pre-line; margin: 0; }
.lms-box-note { font-size: 13px; color: var(--lm-d-ink); white-space: pre-line; margin: 0; }
.lms-suggest { border: 1px dashed var(--lm-d-control-edge); border-radius: 10px; padding: 8px 12px; background: var(--lm-d-ai-bg); }
.lms-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0; }
.lms-kv dt { font-size: 12px; font-weight: 600; color: var(--lm-d-muted); }
.lms-kv dd { margin: 1px 0 0; font-size: 13.5px; color: var(--lm-d-ink); }
.lms-kv dd.is-set { font-weight: 600; }
.lms-hint { font-size: 12.5px; color: var(--lm-d-muted); margin: 0; }

/* performance: four tiles, the rail, four tracks */
.lms-perf { display: flex; flex-direction: column; gap: 12px; }
.lms-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lms-tile { border: 1px solid var(--lm-d-border); border-radius: 12px; padding: 10px 12px; min-inline-size: 0; }
.lms-tile-l { display: block; font-size: 13px; font-weight: 600; color: var(--lm-d-muted); }
.lms-tile-v { display: block; font-size: 22px; font-weight: 800; line-height: 1.25; margin-block-start: 4px; color: var(--lm-d-ink); overflow-wrap: anywhere; }
.lms-tile-u { font-size: 13px; font-weight: 700; color: var(--lm-d-muted); margin-inline-start: 3px; }
.lms-tile.tone-danger { background: var(--lm-d-danger-soft); border-color: var(--lm-d-gap-edge); }
.lms-tile.tone-danger .lms-tile-l, .lms-tile.tone-danger .lms-tile-v, .lms-tile.tone-danger .lms-tile-u { color: var(--lm-d-danger); }
.lms-tile.tone-ok .lms-tile-v { color: var(--lm-d-ok); }

.lms-track { display: block; inline-size: 100%; margin-block-start: 8px; }
.lms-rail { display: block; block-size: 12px; border-radius: 8px; background: var(--lm-d-divider); position: relative; margin: 26px 0 6px; }
.lms-rail-exp { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 8px; background: var(--lm-d-track-expected); }
.lms-rail-exp.is-ahead { background: var(--lm-d-ok-soft); }
.lms-rail-act { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 8px; background: var(--lm-d-ink); }
.lms-mark { position: absolute; inset-block-start: -30px; display: flex; flex-direction: column; align-items: center; font-size: 12px; font-weight: 700; white-space: nowrap; line-height: 1.2; translate: 50% 0; }
[dir="ltr"] .lms-mark { translate: -50% 0; }
.lms-mark::after { content: ''; inline-size: 2px; block-size: 18px; background: currentColor; margin-block-start: 2px; }
.lms-mark.is-start { translate: 0 0; align-items: flex-start; }
.lms-mark.is-end { translate: 100% 0; align-items: flex-end; }
[dir="ltr"] .lms-mark.is-end { translate: -100% 0; }
.lms-mark.is-below { inset-block-start: 8px; flex-direction: column-reverse; }
.lms-mark.is-below::after { margin-block: 0 2px; }
.lms-mark.is-actual { color: var(--lm-d-ink); }
.lms-mark.is-expected { color: var(--lm-d-danger); }
.lms-mark.is-expected.is-ahead { color: var(--lm-d-ok); }
.lms-mark.is-target { color: var(--lm-d-muted); }
.lms-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--lm-d-muted); }
.lms-track.has-below .lms-scale { margin-block-start: 22px; }

.lms-meters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lms-meter { border: 1px solid var(--lm-d-border); border-radius: 12px; padding: 8px 12px; min-inline-size: 0; }
.lms-meter-top { display: flex; align-items: center; gap: 8px; }
.lms-meter-top .lms-meter-h { font-size: 13px; font-weight: 700; flex: 1; margin: 0; color: var(--lm-d-ink); }
.lms-meter-v { font-size: 16px; font-weight: 800; }
.lms-bar { display: block; block-size: 6px; background: var(--lm-d-divider); border-radius: 6px; position: relative; margin-block-start: 6px; }
.lms-bar > i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 6px; display: block; }
.lms-bar > i.is-ok { background: var(--lm-d-ok); }
.lms-bar > i.is-warn { background: var(--lm-d-warn); }
.lms-bar > i.is-danger { background: var(--lm-d-danger); }
.lms-bar > i.is-ink { background: var(--lm-d-ink); }
.lms-ref { position: absolute; inset-block: -5px; inline-size: 2px; background: var(--lm-d-ink); border-radius: 2px; translate: 50% 0; }
[dir="ltr"] .lms-ref { translate: -50% 0; }

.lms-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lms-fact { border: 1px solid var(--lm-d-border); border-radius: 12px; padding: 8px 12px; min-inline-size: 0; }
.lms-fact-l { display: block; font-size: 12.5px; font-weight: 600; color: var(--lm-d-muted); }
.lms-fact-v { display: block; font-size: 16px; font-weight: 800; color: var(--lm-d-ink); overflow-wrap: anywhere; }
.lms-fact-s { display: inline-block; margin-block-start: 4px; font-size: var(--ho-text-xs); font-weight: 700; color: var(--lm-d-muted); background: var(--lm-d-quiet-bg); border-radius: 999px; padding: 0 8px; }

/* the three folds */
.lms-more { display: flex; gap: 16px; flex-wrap: wrap; }
.lms-fold { border: 1px solid var(--lm-d-border); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; font-size: 13px; color: var(--lm-d-ink); }
.lms-fold h4 { font-size: 13px; font-weight: 700; margin: 0; color: var(--lm-d-ink); }
.lms-fold ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; }
.lms-fold p { margin: 0; }
.lms-note { font-size: 12.5px; line-height: 1.65; color: var(--lm-d-muted); }
.lms-note-box { border-radius: 10px; padding: 8px 12px; background: var(--lm-d-info-soft); color: var(--lm-d-ink); font-size: 12.5px; line-height: 1.65; }
.lms-measure { border: 1px solid var(--lm-d-divider); border-radius: 10px; padding: 8px 10px; }
.lms-measure-top { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; }
.lms-table-wrap { overflow-x: auto; }
.lms-table { inline-size: 100%; border-collapse: collapse; font-size: 12.5px; }
.lms-table th { text-align: start; font-weight: 700; color: var(--lm-d-muted); padding: 6px 8px; border-block-end: 1px solid var(--lm-d-border); white-space: nowrap; }
.lms-table td { padding: 6px 8px; border-block-end: 1px solid var(--lm-d-divider); white-space: nowrap; }
.lms-table tr.is-worst td { background: var(--lm-d-danger-soft); }
.lms-dl { display: grid; gap: 8px; margin: 0; }
.lms-dl dt { font-size: 12px; font-weight: 600; color: var(--lm-d-muted); }
.lms-dl dd { margin: 1px 0 0; font-size: 13px; color: var(--lm-d-ink); white-space: pre-line; overflow-wrap: anywhere; }

/* replies + the reply field */
.lms-thread { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lms-reply { border: 1px solid var(--lm-d-divider); border-radius: 10px; padding: 8px 12px; }
.lms-reply-h { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; }
.lms-reply-h b { color: var(--lm-d-ink); }
.lms-reply-h span { color: var(--lm-d-muted); }
.lms-reply p { margin: 4px 0 0; font-size: 13.5px; white-space: pre-line; }
.lms-field { display: flex; align-items: flex-end; gap: 10px; min-block-size: 40px; border: 1px solid var(--lm-d-border); border-radius: 10px; padding-block: 7px; padding-inline: 12px 8px; background: var(--lm-d-surface); color: var(--lm-d-subtle); }
.lms-field > .lms-ic { margin-block-end: 3px; }
.lms-field textarea { flex: 1; min-inline-size: 0; border: 0; outline: 0; resize: none; background: transparent; color: var(--lm-d-ink); font-family: inherit; font-size: 14px; line-height: 1.6; padding: 0; max-block-size: 140px; }
.lms-field textarea::placeholder { color: var(--lm-d-muted); }
.lms-field button { flex: none; inline-size: 30px; block-size: 30px; border-radius: 8px; border: 0; background: var(--lm-d-accent); color: var(--lm-d-on-accent); display: grid; place-items: center; cursor: pointer; }
.lms-field button .lms-ic { inline-size: 15px; block-size: 15px; }
.lms-error { font-size: 12.5px; color: var(--lm-d-danger); margin: 4px 0 0; }

/* «المزيد» */
.lms-menu { position: relative; }
.lms-menu-list { position: absolute; inset-block-end: calc(100% + 6px); inset-inline-start: 0; z-index: 30; min-inline-size: 230px; max-block-size: 60vh; overflow-y: auto; background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 12px; box-shadow: 0 10px 30px var(--lm-d-sheet-shadow); padding: 6px; }
.lms-menu-list.is-down { inset-block-end: auto; inset-block-start: calc(100% + 6px); }
.lms-menu-sec + .lms-menu-sec { border-block-start: 1px solid var(--lm-d-divider); margin-block-start: 6px; padding-block-start: 6px; }
.lms-menu-item { display: flex; inline-size: 100%; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 0; background: none; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--lm-d-ink); text-align: start; cursor: pointer; text-decoration: none; }
.lms-menu-item:hover, .lms-menu-item:focus-visible { background: var(--lm-d-hover); }

/* panel states: empty, error, loading */
.lms-pane-state { padding: 48px 24px; text-align: center; }
.lms-pane-skel { padding: 16px 20px; display: grid; gap: 14px; }

.lms-overlay { display: none; }

/* ── 1200px and up: the line opens in a drawer over the list's end side; the list stays as it is and stays
   clickable (no veil) — Business Owner 25-9 ────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
    .lms-pane { position: fixed; inset-block: var(--lms-sticky-top) 16px; inset-inline-end: 24px; inset-inline-start: auto; inline-size: min(680px, 50vw); max-block-size: none; z-index: 40; translate: calc(-100% - 48px) 0; visibility: hidden; transition: translate .22s ease, visibility 0s linear .22s; box-shadow: 0 0 44px var(--lm-d-sheet-shadow); }
    [dir="ltr"] .lms-pane { translate: calc(100% + 48px) 0; }
    .lms-pane.is-open, .lms-pane.is-pending { translate: 0 0; visibility: visible; transition-delay: 0s; }
    .lms-pane-state.is-idle { display: none; }
}
@media (min-width: 1200px) and (prefers-reduced-motion: reduce) { .lms-pane { transition: none; } }

/* ── 768–1199px: the panel is a drawer from the inline end ─────────── */
@media (max-width: 1199.98px) {
    .lms-split { grid-template-columns: minmax(0, 1fr); }
    .lms-pane { position: fixed; inset-block: 0; inset-inline-end: 0; inset-inline-start: auto; inline-size: min(620px, 92vw); max-block-size: none; border-radius: 0; z-index: 45; translate: -105% 0; transition: translate .22s ease; box-shadow: 0 0 34px var(--lm-d-sheet-shadow); }
    [dir="ltr"] .lms-pane { translate: 105% 0; }
    .lms-pane.is-open, .lms-pane.is-pending { translate: 0 0; }
    .lms-overlay { display: block; position: fixed; inset: 0; z-index: 44; background: var(--lm-d-overlay); }
    .lms-pane-state.is-idle { display: none; }
}

/* ── under 768px: the list is the page, the line opens in a bottom sheet ── */
@media (max-width: 767.98px) {
    .lms-head { flex-wrap: wrap; gap: 12px; margin-block-end: 12px; }
    .lms-head-text { flex-basis: 100%; }
    .lms-title { font-size: 24px; }
    .lms-lead { font-size: 13.5px; }
    .lms-lead-desk { display: none; }
    .lms-lead-phone { display: inline; }
    .lms-pulse { flex-basis: 100%; flex-wrap: wrap; padding: 6px 8px; }
    /* the phone design: «أرقامك» on its own line, the four numbers share the row under it */
    .lms-pulse-own { flex-basis: 100%; padding: 4px 6px 0; font-size: 12.5px; }
    .lms-pulse-own + .lms-pulse-item { border-inline-start: 0; }
    .lms-pulse-item { min-inline-size: 0; padding: 8px 6px; }
    .lms-pulse-v { font-size: 22px; }
    .lms-policies { display: none; }

    .lms-toolbar { padding: 10px 12px; }
    .lms-tabs { flex-basis: 100%; }
    .lms-search-field { margin-inline-start: 0; inline-size: 100%; }
    /* the window and the types in one row that scrolls sideways (Business Owner 25-9) */
    .lms-filterbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .lms-filterbar::-webkit-scrollbar { display: none; }
    .lms-filterbar-l { display: none; }
    .lms-typechips { flex-wrap: nowrap; }
    .lms-seg, .lms-typechip { flex: none; }
    /* a row: its title and badge, then its number, whom and facts — the columns fold away */
    .lms-list { --lms-row-cols: 30px minmax(0, 1fr) auto; }
    .lms-cols, .lms-row-fig, .lms-row-since, .lms-row-time, .lms-row-sel, .lms-row-acts { display: none; }
    .lms-row { padding: 8px 14px; align-items: start; }
    .lms-row-figm { display: inline; font-weight: 800; }
    /* Business Owner 25-9: swipe a row to reach its answers (no buttons drawn in the row) */
    .lms-swipe { display: block; position: relative; overflow: hidden; }
    .lms-swipe .lms-row { background: var(--lm-d-surface); transition: translate .18s ease; touch-action: pan-y; }
    .lms-swipe .lms-row.is-awaiting { background: var(--lm-d-row-hl); }
    .lms-swipe.is-swiped .lms-row { translate: 168px 0; }
    [dir="ltr"] .lms-swipe.is-swiped .lms-row { translate: -168px 0; }
    .lms-swipe-acts { display: flex; position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 168px; }
    .lms-swipe-acts button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; color: var(--lm-d-on-accent); font-family: inherit; font-size: 12px; font-weight: 800; }
    .lms-swipe-acts button .lms-ic { inline-size: 18px; block-size: 18px; }
    .lms-swipe-acts .is-ok { background: var(--lm-d-ok); }
    .lms-swipe-acts .is-no { background: var(--lm-d-danger); }
    .lms-swipe-acts .is-wait { background: var(--lm-d-warn); }
    .lms-swipe-acts .is-more { background: var(--lm-d-tab-on-bg); }
    .lms-row-state { padding-block-start: 2px; }

    .lms-pane { inset-block: auto 0; inset-inline: 0; inline-size: auto; max-block-size: 92dvh; border-radius: 20px 20px 0 0; translate: 0 105%; box-shadow: 0 -10px 30px var(--lm-d-sheet-shadow); }
    [dir="ltr"] .lms-pane { translate: 0 105%; }
    .lms-pane.is-open, .lms-pane.is-pending { translate: 0 0; }
    .lms-handle { display: block; flex: none; padding: 10px 0 2px; touch-action: none; cursor: grab; }
    .lms-handle::before { content: ''; display: block; inline-size: 44px; block-size: 5px; border-radius: 3px; background: var(--lm-d-handle); margin: 0 auto; }
    .lms-pane-head { padding: 12px 16px 10px; touch-action: none; }
    .lms-pane-title { font-size: 16px; }
    /* the design's phone chips are 11.5px; the panel's type floor is 12px (TypeFloorTest) — the floor wins, +0.5px */
    .lms-chip { font-size: var(--ho-text-xs); }
    .lms-pane-body { padding: 14px 16px; gap: 12px; }
    .lms-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .lms-meters { gap: 8px; }
    .lms-meter { padding: 8px 10px; }
    .lms-meter-top h4 { font-size: 12px; }
    .lms-sec .lms-perf-file { display: none; }
    .lms-sec h3 { flex: 1; }
    .lms-more { gap: 8px 14px; }
    .lms-pane-foot { padding: 10px 16px 18px; flex-wrap: wrap; }
    .lms-pane-foot .lms-btn-p { flex-basis: 100%; order: 9; }
    .lms-kv { grid-template-columns: minmax(0, 1fr); }
}