/* ─────────────────────────────────────────────────────────────────────
   HOMEi Tasks — «المهام» (TASKS-HUB-1, design round 2 approved by Kamal
   2026-09-28 on the house design system: the tenders / extracts pattern).

   ONE screen for every task in the company: the head row (the title and
   the one-line add), the numbers strip that IS the filter, one card with a
   blue rule (the four views as pills, the search), and the view — by
   department, by person, the board, or the list with the task open beside
   it (its facts, its conversation with @, its three buttons).

   Colours: the design system's own tokens (--lm-d-* in 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 `.tq-page` (the page class) and `.tq`.

   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.
   ──────────────────────────────────────────────────────────────────── */

/* ── the ground ── */
body:has(.tq-page) { background: var(--lm-d-page); }
body:has(.tq-page) .fi-main-ctn { background: transparent; }
.tq-page .fi-page-header-main-ctn, .tq-page .fi-page-main { row-gap: 14px; }

.tq { display: flex; flex-direction: column; gap: 14px; color: var(--lm-d-ink); }
.tq-ico { inline-size: 18px; block-size: 18px; flex: none; }
.tq-ico.is-xs { inline-size: 14px; block-size: 14px; }
.tq-muted { color: var(--lm-d-muted); font-weight: 500; }

/* ── the head row: the title and the one-line add ── */
.tq-head { display: flex; align-items: flex-start; gap: 18px; color: var(--lm-d-ink); }
.tq-title { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.2; color: var(--lm-d-ink); padding-block-start: 8px; white-space: nowrap; }
.tq-qa-wrap { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: 8px; }
.tq-qa {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--lm-d-surface);
    border: 1px solid var(--lm-d-border);
    border-radius: 14px;
    padding: 7px;
    box-shadow: 0 1px 2px var(--lm-d-shadow);
}
.tq-qa:focus-within { border-color: var(--lm-d-accent); box-shadow: 0 0 0 3px var(--lm-d-accent-soft); }
.tq-qa-plus {
    inline-size: 28px;
    block-size: 28px;
    border-radius: 8px;
    background: var(--lm-d-accent-soft);
    color: var(--lm-d-accent-ink);
    display: grid;
    place-items: center;
    flex: none;
    margin-inline-start: 6px;
}
.tq-qa-plus .fi-icon, .tq-qa-plus svg { inline-size: 16px; block-size: 16px; }
/* the HOMEi mic is painted at the field's end (dictation.js) — room for it */
.tq-qa-in {
    flex: 1 1 auto;
    min-inline-size: 0;
    min-block-size: 42px;
    border: 0;
    outline: 0;
    background-color: transparent;
    color: var(--lm-d-ink);
    font-size: 15px;
    padding-inline: 6px 34px;
}
.tq-qa-in::placeholder { color: var(--lm-d-muted); }
.tq-qa-slot { position: relative; flex: none; }
.tq-qa-pick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 42px;
    max-inline-size: 200px;
    padding-inline: 12px;
    border: 1px solid var(--lm-d-border);
    border-radius: 10px;
    background: var(--lm-d-page);
    color: var(--lm-d-muted);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.tq-qa-pick-t { overflow: hidden; text-overflow: ellipsis; }
.tq-qa-pick:hover { border-color: var(--lm-d-control-edge); }
.tq-qa-pick.is-set { color: var(--lm-d-info); background: var(--lm-d-info-soft); border-color: var(--lm-d-info-soft); }
.tq-qa-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-inline: 12px; font-size: 13px; }
.tq-qa-err { color: var(--lm-d-danger); font-weight: 600; font-size: 13px; }
.tq-qa-guard { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.tq-qa-guard.is-warn { color: var(--lm-d-warn); }
.tq-qa-guard.is-danger { color: var(--lm-d-danger); }
.tq-qa-why {
    flex: 1 1 260px;
    min-block-size: 36px;
    border: 1px solid var(--lm-d-control-edge);
    border-radius: 10px;
    padding-inline: 10px 34px;
    background-color: var(--lm-d-surface);
    color: var(--lm-d-ink);
    font-size: 13.5px;
}
.tq-qa-hint { color: var(--lm-d-muted); font-size: 12.5px; }

/* the people / date drop-downs */
.tq-dd {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-end: 0;
    inline-size: 320px;
    max-block-size: 360px;
    overflow-y: auto;
    background: var(--lm-d-surface);
    border: 1px solid var(--lm-d-border);
    border-radius: 14px;
    box-shadow: 0 14px 36px var(--lm-d-sheet-shadow);
    padding: 6px;
    z-index: 30;
}
.tq-dd.is-narrow { inline-size: 220px; }
.tq-dd-s {
    inline-size: 100%;
    min-block-size: 38px;
    border: 1px solid var(--lm-d-accent);
    border-radius: 10px;
    padding-inline: 10px;
    margin-block-end: 6px;
    background-color: var(--lm-d-surface);
    color: var(--lm-d-ink);
    font-size: 14px;
}
.tq-dd-r {
    inline-size: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--lm-d-ink);
    font-size: 13.5px;
    text-align: start;
    cursor: pointer;
}
.tq-dd-r:hover, .tq-dd-r:focus-visible { background: var(--lm-d-info-soft); outline: 0; }
.tq-dd-r.is-me { border-block-end: 1px solid var(--lm-d-divider); border-radius: 10px 10px 0 0; }
.tq-grow { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; }
.tq-grow b { font-size: 14px; font-weight: 700; }
.tq-grow span { font-size: 12.5px; color: var(--lm-d-muted); }
.tq-dd-none { padding: 10px; color: var(--lm-d-muted); font-size: 13px; }
.tq-dd-date { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-block-start: 1px solid var(--lm-d-divider); font-size: 12.5px; color: var(--lm-d-muted); }
.tq-dd-date input { min-block-size: 36px; border: 1px solid var(--lm-d-control-edge); border-radius: 8px; padding-inline: 8px; background: var(--lm-d-surface); color: var(--lm-d-ink); }

/* ── buttons ── */
.tq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: 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-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.tq-btn:hover { border-color: var(--lm-d-muted); }
.tq-btn.is-primary { background: var(--lm-d-accent); border-color: var(--lm-d-accent); color: var(--lm-d-on-accent); padding-inline: 22px; }
.tq-btn.is-icon { inline-size: 42px; padding-inline: 0; color: var(--lm-d-muted); }
.tq-btn.is-sm { min-block-size: 34px; padding-inline: 12px; font-size: 13px; }
.tq-btn:focus-visible, .tq-pill:focus-visible, .tq-strip-c:focus-visible, .tq-qa-pick:focus-visible { outline: 2px solid var(--lm-d-info); outline-offset: 2px; }
.tq-link { border: 0; background: none; padding: 0; color: var(--lm-d-info); font-weight: 700; font-size: 12.5px; cursor: pointer; text-decoration: none; }

/* ── the numbers strip — every cell is a filter ── */
.tq-strip {
    display: grid;
    grid-template-columns: repeat(var(--tq-cols, 7), 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);
    overflow: hidden;
}
.tq-strip-c {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 18px;
    border: 0;
    border-inline-start: 1px solid var(--lm-d-divider);
    border-block-end: 3px solid transparent;
    background: transparent;
    color: var(--lm-d-ink);
    text-align: start;
    min-inline-size: 0;
    cursor: pointer;
}
.tq-strip-c:first-child { border-inline-start: 0; }
.tq-strip-c:hover { background: var(--lm-d-hover); }
.tq-strip-c.is-on { background: var(--lm-d-info-soft); border-block-end-color: var(--lm-d-info); }
.tq-k-l { font-size: 13.5px; color: var(--lm-d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 100%; }
.tq-k-v { font-size: 28px; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; }
.tq-k-v.is-danger { color: var(--lm-d-danger); }
.tq-k-v.is-ink { color: var(--lm-d-ink); }
.tq-k-s { font-size: 12.5px; color: var(--lm-d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 100%; }

/* ── the card with the blue rule ── */
.tq-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;
}
.tq-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);
}
.tq-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tq-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 44px;
    padding-inline: 18px;
    border-radius: 22px;
    border: 1px solid var(--lm-d-border);
    background: var(--lm-d-surface);
    color: var(--lm-d-ink);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.tq-pill:hover { border-color: var(--lm-d-control-edge); }
.tq-pill .tq-ico { color: var(--lm-d-muted); }
.tq-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); }
.tq-pill.is-on .tq-ico { color: var(--lm-d-tab-on-ink); }
.tq-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 440px;
    min-inline-size: 220px;
    min-block-size: 46px;
    padding-inline: 14px;
    border: 1px solid var(--lm-d-border);
    border-radius: 12px;
    background: var(--lm-d-surface);
    color: var(--lm-d-muted);
}
.tq-search:focus-within { border-color: var(--lm-d-info); }
.tq-search input { flex: 1 1 auto; min-inline-size: 0; border: 0; outline: 0; background-color: transparent; color: var(--lm-d-ink); font-size: 14.5px; padding-inline-end: 26px; }
.tq-scope { display: flex; flex-wrap: wrap; gap: 8px; }
.tq-select {
    min-block-size: 44px;
    border: 1px solid var(--lm-d-border);
    border-radius: 12px;
    padding-inline: 12px 32px;
    background-color: var(--lm-d-surface);
    color: var(--lm-d-ink);
    font-size: 14px;
    font-weight: 700;
}
.tq-narrow { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px 0; }
.tq-nchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 30px;
    padding-inline: 10px;
    border: 1px solid var(--lm-d-info-soft);
    border-radius: 999px;
    background: var(--lm-d-info-soft);
    color: var(--lm-d-info);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

/* ── small words on a row ── */
.tq-av {
    inline-size: 30px;
    block-size: 30px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    flex: none;
    background: var(--lm-d-accent-soft);
    color: var(--lm-d-accent-ink);
    font-size: 13px;
    font-weight: 800;
}
.tq-av.is-sm { inline-size: 26px; block-size: 26px; font-size: 12px; }
.tq-av .fi-icon, .tq-av svg { inline-size: 14px; block-size: 14px; }
.tq-dp {
    display: inline-flex;
    align-items: center;
    min-block-size: 22px;
    padding-inline: 7px;
    border-radius: 6px;
    background: var(--lm-d-info-soft);
    color: var(--lm-d-info);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.tq-peer {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-block-size: 22px;
    padding-inline: 7px;
    border-radius: 6px;
    border: 1px dashed var(--lm-d-control-edge);
    background: var(--lm-d-chip-bg);
    color: var(--lm-d-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.tq-post {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-block-size: 22px;
    padding-inline: 7px;
    border-radius: 6px;
    background: var(--lm-d-warn-soft);
    color: var(--lm-d-warn);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.tq-from { color: var(--lm-d-muted); font-size: 12.5px; white-space: nowrap; }
.tq-due { font-weight: 700; font-size: 14px; white-space: nowrap; }
.tq-due.is-danger, .tq-facts dd.is-danger { color: var(--lm-d-danger); }
.tq-due.is-warn, .tq-facts dd.is-warn { color: var(--lm-d-warn); }
.tq-due.is-ok, .tq-facts dd.is-ok { color: var(--lm-d-ok); }
.tq-due.is-muted { color: var(--lm-d-muted); font-weight: 500; }
.tq-due.is-ink { color: var(--lm-d-ink); font-weight: 500; }
.tq-st {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 28px;
    padding-inline: 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.tq-st::before { content: ''; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }
.tq-st.is-info { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.tq-st.is-ok { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.tq-st.is-danger { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.tq-st.is-warn { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }
.tq-st.is-muted { background: var(--lm-d-quiet-bg); color: var(--lm-d-muted); }
/* TASKS-HUB-3: the deploy stages — «جاهزة للرفع» violet, «اترفعت» orange (design 09 dots) */
.tq-st.is-ai { background: var(--lm-d-quiet-bg); color: var(--lm-d-ai); }
.tq-st.is-accent { background: var(--lm-d-accent-soft); color: var(--ho-accent-ink); }
.tq-last { font-size: 13px; color: var(--lm-d-muted); }
.tq-last.is-warn { color: var(--lm-d-warn); font-weight: 700; }
.tq-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--lm-d-subtle); flex: none; }
.tq-dot.is-info { background: var(--lm-d-info); }
.tq-dot.is-ok { background: var(--lm-d-ok); }
.tq-dot.is-danger { background: var(--lm-d-danger); }
.tq-dot.is-warn { background: var(--lm-d-warn); }
.tq-dot.is-ai { background: var(--lm-d-ai); }
.tq-dot.is-accent { background: var(--lm-d-accent); }

/* ── «حسب القسم» / «حسب الشخص» ── */
.tq-tw { overflow-x: auto; }
.tq-dt { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.tq-dt th { text-align: start; padding: 12px 14px; color: var(--lm-d-ink); font-weight: 700; font-size: 14px; border-block-end: 1px solid var(--lm-d-border); white-space: nowrap; }
.tq-dt td { padding: 12px 14px; border-block-end: 1px solid var(--lm-d-divider); color: var(--lm-d-ink); vertical-align: middle; }
.tq-dt :is(td, th).num { text-align: center; font-variant-numeric: tabular-nums; }
.tq-dt tr.tq-dg { cursor: pointer; }
.tq-dt tr.tq-dg td { font-weight: 700; }
.tq-dt tr.tq-dg:hover td, .tq-dt tr.tq-pp:hover td { background: var(--lm-d-hover); }
.tq-dt tr.tq-dg.is-exp td { background: var(--lm-d-row-hl); }
.tq-dt tr.tq-pp { cursor: pointer; }
.tq-dt tr.tq-pp td { background: var(--lm-d-page); font-size: 14px; }
.tq-dt tr.tq-pp td:first-child { padding-inline-start: 40px; }
.tq-dt .n-late { color: var(--lm-d-danger); font-weight: 800; }
.tq-dt .n-zero { color: var(--lm-d-subtle); font-weight: 500; }
.tq-dname { display: flex; align-items: center; gap: 10px; }
.tq-dname > div { display: flex; flex-direction: column; }
.tq-dname span { font-size: 13px; font-weight: 500; color: var(--lm-d-muted); }
.tq-chev { color: var(--lm-d-muted); }
.tq-pname { display: flex; align-items: center; gap: 10px; }
.tq-pname-t { display: flex; flex-direction: column; }
.tq-pname-t span { font-size: 12.5px; font-weight: 500; color: var(--lm-d-muted); }
.tq-mb { display: flex; align-items: center; gap: 8px; min-inline-size: 140px; }
.tq-mb b { font-size: 13px; font-variant-numeric: tabular-nums; min-inline-size: 26px; }
.tq-bar { flex: 1 1 auto; block-size: 7px; border-radius: 99px; background: var(--lm-d-quiet-bg); overflow: hidden; }
.tq-bar i { display: block; block-size: 100%; inline-size: var(--tq-p, 0%); border-radius: 99px; background: var(--lm-d-ok); }
.tq-top { font-size: 13px; color: var(--lm-d-muted); font-weight: 500; line-height: 1.5; }
.tq-top b { color: var(--lm-d-danger); font-weight: 700; }
.tq-empty-row { text-align: center; color: var(--lm-d-muted); padding: 40px 16px; }

/* ── «لوحة» ── */
.tq-board { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 12px; padding: 14px; overflow-x: auto; background: var(--lm-d-page); }
.tq-col { display: flex; flex-direction: column; min-inline-size: 0; border-radius: 14px; background: var(--lm-d-quiet-bg); border: 2px dashed transparent; }
.tq-col.is-over { border-color: var(--lm-d-info); background: var(--lm-d-info-soft); }
.tq-col-h { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; font-size: 15px; }
.tq-col-n { margin-inline-start: auto; min-inline-size: 28px; padding-inline: 8px; border-radius: 99px; background: var(--lm-d-surface); color: var(--lm-d-muted); font-size: 12.5px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.tq-col-b { display: flex; flex-direction: column; gap: 10px; padding: 4px 10px 12px; }
.tq-bcard {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--lm-d-border);
    background: var(--lm-d-surface);
    box-shadow: 0 1px 2px var(--lm-d-shadow);
    cursor: grab;
}
.tq-bcard:hover { border-color: var(--lm-d-control-edge); }
.tq-bcard.is-late { border-inline-start: 3px solid var(--lm-d-danger); }
.tq-bcard-t { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.5; color: var(--lm-d-ink); }
.tq-blk { font-size: 12.5px; color: var(--lm-d-danger); background: var(--lm-d-danger-soft); border-radius: 6px; padding: 3px 8px; }
.tq-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tq-bcard-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tq-bcard-f .tq-due { font-size: 13px; }
.tq-bcard-f .tq-mini + .tq-av { margin-inline-start: 0; }
.tq-col-empty { padding: 14px; text-align: center; color: var(--lm-d-muted); font-size: 13px; }
.tq-more { border: 0; background: transparent; color: var(--lm-d-muted); font-size: 13px; font-weight: 700; padding: 6px; cursor: pointer; }
.tq-more:hover { color: var(--lm-d-info); }

/* ── TASKS-HUB-3: a department with deploy stages (design 09) — six columns, tech cards ── */
.tq-board.is-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.tq-i { inline-size: 18px; block-size: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tq-i.is-sm { inline-size: 15px; block-size: 15px; }
.tq-i.is-xs { inline-size: 13px; block-size: 13px; }
.tq-bcard.is-tech { gap: 6px; padding: 9px 10px; border-radius: 10px; }
.tq-bcard.is-tech .tq-bcard-t { font-size: 13.5px; font-weight: 600; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tq-bcard.is-done .tq-bcard-t { color: var(--lm-d-muted); }
.tq-bcard-top { display: flex; align-items: center; gap: 6px; }
.tq-bcard-top .tq-pri { margin-inline-start: auto; }
.tq-bcard.is-tech .tq-bcard-f { justify-content: flex-start; }
.tq-bcard.is-tech .tq-bcard-f .tq-av { margin-inline-start: auto; }
.tq-bcard.is-tech .tq-bcard-f .tq-due { font-size: 12px; font-weight: 700; }
.tq-ty { inline-size: 20px; block-size: 20px; border-radius: 5px; display: inline-grid; place-items: center; flex: none; color: var(--lm-d-on-accent); }
.tq-ty .tq-i { inline-size: 13px; block-size: 13px; stroke-width: 2.4; }
.tq-ty.is-story { background: var(--lm-d-ok); }
.tq-ty.is-task { background: var(--lm-d-info); }
.tq-ty.is-bug { background: var(--lm-d-danger); }
.tq-ty.is-sub { background: var(--lm-d-subtle); }
.tq-key { font-weight: 700; font-size: 12.5px; color: var(--lm-d-muted); font-variant-numeric: tabular-nums; }
.tq-pri { display: inline-flex; align-items: center; color: var(--lm-d-danger); }
.tq-gate { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--lm-d-danger); background: var(--lm-d-danger-soft); border-radius: 6px; padding-inline: 6px; min-block-size: 22px; white-space: nowrap; }
.tq-prb { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; border-radius: 6px; padding-inline: 6px; min-block-size: 22px; white-space: nowrap; background: var(--lm-d-quiet-bg); color: var(--lm-d-muted); text-decoration: none; }
.tq-prb.is-ready { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.tq-prb.is-merged { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.tq-mini { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--lm-d-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.tq-note { display: flex; align-items: flex-start; gap: 6px; margin: 10px 14px 0; border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.6; border: 1px solid var(--lm-d-divider); }
.tq-note .tq-i { margin-block-start: 4px; }
.tq-note.is-info { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.tq-note.is-warn { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }

/* ── «قائمة»: the list (start) and the open task (end) ── */
.tq-split { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.tq-split.has-open { grid-template-columns: minmax(0, 1fr) 400px; }
.tq-list { min-inline-size: 0; }
.tq-split.has-open .tq-list { border-inline-end: 1px solid var(--lm-d-divider); }

/* the Filament table, flattened into the card */
.tq-list .fi-ta-ctn { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.tq-list .fi-ta-header-ctn { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-inline: 18px 12px; border-block-end: 1px solid var(--lm-d-divider); }
.tq-list .fi-ta-header-ctn > * { border: 0; }
.tq-list .fi-ta-header-toolbar { padding: 8px 0; border: 0; }
/* the search lives in the card's head (every view reads it) — not twice; the
   strip, the views and the search replace the filter panel (a filter arriving
   on an old link still applies and shows its removable chip); the toolbar row
   appears only while rows are selected — it holds the bulk buttons */
.tq-list .fi-ta-search-field, .tq-list .fi-ta-filters-dropdown { display: none; }
.tq-list .fi-ta-header-ctn:not(:has(.fi-ac-btn-action:not([style*='display: none']))) { display: none; }
.tq-list .fi-ta-header-cell { background: var(--lm-d-surface); color: var(--lm-d-ink); font-size: 14px; font-weight: 700; padding-inline: 10px; white-space: nowrap; }
.tq-list .fi-ta-cell { padding-inline: 10px; color: var(--lm-d-ink); vertical-align: middle; }
.tq-list .fi-ta-row { cursor: pointer; }
.tq-list .fi-ta-row:hover > td { background: var(--lm-d-hover); }
.tq-list .fi-ta-row.tq-row-open > td { background: var(--lm-d-row-hl); }
.tq-list .fi-ta-row.tq-row-open > td:first-child { box-shadow: inset -3px 0 0 var(--lm-d-accent); }
[dir='ltr'] .tq-list .fi-ta-row.tq-row-open > td:first-child { box-shadow: inset 3px 0 0 var(--lm-d-accent); }
/* the one-click actions: squares, the «خلصت» one green */
.tq-list .fi-ta-actions { gap: 4px; }
.tq-list .fi-ta-actions .fi-icon-btn {
    inline-size: 34px;
    block-size: 34px;
    border-radius: 8px;
    border: 1px solid var(--lm-d-border);
    background: var(--lm-d-surface);
    color: var(--lm-d-muted);
}
.tq-list .fi-ta-actions .fi-icon-btn.fi-color-success { background: var(--lm-d-ok-soft); border-color: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.tq-cell-t { display: flex; flex-direction: column; gap: 4px; min-inline-size: 220px; white-space: normal; }
.tq-cell-title { font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--lm-d-ink); }
.tq-cell-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tq-cell-p { display: flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; }
/* beside the open task the list keeps every column: tighter cells, and the «…»
   menu leaves the row (the panel and the task page carry those moves) */
.tq-split.has-open .tq-cell-t { min-inline-size: 170px; }
.tq-split.has-open .tq-list .fi-ta-cell { padding-inline: 6px; }
.tq-split.has-open .tq-list .fi-ta-actions .fi-dropdown { display: none; }
.tq-split.has-open .tq-list .fi-ta-actions .fi-icon-btn { inline-size: 32px; block-size: 32px; }

/* ── the open task ── */
.tq-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: 460px;
}
.tq-pn { display: flex; flex-direction: column; min-block-size: 0; flex: 1 1 auto; }
.tq-pn-h { display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px 12px; border-block-end: 1px solid var(--lm-d-divider); }
.tq-pn-hl { flex: 1 1 auto; min-inline-size: 0; }
.tq-pn-title { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.4; }
.tq-pn-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: 6px; font-size: 13px; color: var(--lm-d-muted); }
.tq-x {
    inline-size: 34px;
    block-size: 34px;
    display: grid;
    place-items: center;
    flex: none;
    border-radius: 8px;
    border: 1px solid var(--lm-d-border);
    background: var(--lm-d-surface);
    color: var(--lm-d-muted);
    cursor: pointer;
}
.tq-pn-b { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.tq-facts { margin: 0; display: flex; flex-direction: column; }
.tq-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-block-end: 1px solid var(--lm-d-divider); }
.tq-facts dt { color: var(--lm-d-muted); font-size: 13.5px; }
.tq-facts dd { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; font-size: 14px; font-weight: 700; text-align: end; }
.tq-desc { font-size: 13.5px; line-height: 1.7; color: var(--lm-d-ink); background: var(--lm-d-page); border-radius: 10px; padding: 10px 12px; }
.tq-pn-t { margin: 4px 0 0; font-size: 16px; font-weight: 800; }
.tq-talk { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tq-msg { border: 1px solid var(--lm-d-border); border-radius: 12px; padding: 10px 12px; background: var(--lm-d-surface); }
.tq-msg.is-sys { background: var(--lm-d-page); border-style: dashed; }
.tq-msg-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.tq-msg-h .tq-link { margin-inline-start: auto; }
.tq-kind { font-size: 12px; font-weight: 700; color: var(--lm-d-accent-ink); background: var(--lm-d-accent-soft); border-radius: 6px; padding-inline: 6px; }
.tq-msg-b { margin: 6px 0 0; font-size: 14px; line-height: 1.7; white-space: normal; overflow-wrap: anywhere; }
.tq-men { color: var(--lm-d-info); font-weight: 700; }
.tq-talk-empty { color: var(--lm-d-muted); font-size: 13px; padding: 8px 0; }
.tq-ta {
    inline-size: 100%;
    border: 1px solid var(--lm-d-control-edge);
    border-radius: 12px;
    padding: 10px 12px 10px 34px;
    background-color: var(--lm-d-surface);
    color: var(--lm-d-ink);
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
}
[dir='ltr'] .tq-ta { padding: 10px 34px 10px 12px; }
.tq-ta:focus { outline: 0; border-color: var(--lm-d-info); box-shadow: 0 0 0 3px var(--lm-d-info-soft); }
.tq-compose { position: relative; display: flex; flex-direction: column; gap: 8px; }
.tq-compose-a, .tq-edit-a { display: flex; justify-content: flex-end; gap: 8px; }
.tq-edit { display: flex; flex-direction: column; gap: 8px; margin-block-start: 8px; }
.tq-men-dd {
    position: absolute;
    inset-block-end: calc(100% - 20px);
    inset-inline-start: 0;
    inline-size: 260px;
    max-block-size: 260px;
    overflow-y: auto;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--lm-d-border);
    background: var(--lm-d-surface);
    box-shadow: 0 14px 36px var(--lm-d-sheet-shadow);
    z-index: 30;
}
.tq-pn-f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px; border-block-start: 1px solid var(--lm-d-divider); }
.tq-pn-f .fi-btn { flex: 1 1 0; justify-content: center; min-block-size: 46px; border-radius: 12px; font-weight: 700; }
.tq-pn-f .fi-btn.fi-color-primary, .tq-pn-f .fi-btn.fi-color-success { background: var(--lm-d-accent); color: var(--lm-d-on-accent); }
.tq-pn-open { flex-basis: 100%; text-align: center; }

/* ── TASKS-HUB-2: follow-up ── */
.tq-pend { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--lm-d-warn-soft); color: var(--lm-d-warn); font-size: 13.5px; }
.tq-pend b { font-weight: 700; line-height: 1.6; }
.tq-pend-a { display: flex; gap: 8px; }
.tq-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 12px 18px 0; padding: 14px 16px; border-radius: 14px; background: var(--lm-d-warn-soft); color: var(--lm-d-ink); }
.tq-banner > .tq-ico { color: var(--lm-d-warn); }
.tq-banner-t { flex: 1 1 320px; display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.tq-banner-t b { font-size: 15.5px; font-weight: 800; }
.tq-banner-t span { font-size: 13px; color: var(--lm-d-muted); }
.tq-banner-a { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tq-leave { display: inline-flex; align-items: center; min-block-size: 22px; padding-inline: 7px; border-radius: 6px; background: var(--lm-d-warn-soft); color: var(--lm-d-warn); font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ── TASKS-HUB-3: a page head (title, a line under it, the buttons) ── */
.tq-mk-head { display: flex; align-items: flex-start; gap: 16px; }
.tq-mk-head h1 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.25; color: var(--lm-d-ink); }
.tq-mk-head p { margin: 4px 0 0; font-size: 14px; color: var(--lm-d-muted); }
.tq-mk-head .pre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--lm-d-muted); margin-block-end: 4px; }
.tq-mk-head .pre bdi { font-weight: 700; color: var(--lm-d-ink); }
.tq-mk-head .acts { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.tq-mk-head .acts .tq-btn { min-block-size: 44px; border-radius: 12px; }
.tq-mk-head .acts .tq-btn.is-primary { box-shadow: 0 4px 12px var(--lm-d-accent-soft); }

/* ── a switch (design 11 .sw): green when on ── */
.tq-sw {
    inline-size: 38px;
    block-size: 22px;
    border-radius: 99px;
    background: var(--lm-d-quiet-bg);
    border: 1px solid var(--lm-d-border);
    position: relative;
    display: inline-block;
    flex: none;
    padding: 0;
    cursor: pointer;
    vertical-align: middle;
}
.tq-sw::after {
    content: '';
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 2px;
    inline-size: 16px;
    block-size: 16px;
    border-radius: 50%;
    background: var(--lm-d-surface);
    box-shadow: 0 1px 2px var(--lm-d-shadow);
}
.tq-sw.is-on { background: var(--lm-d-ok); border-color: var(--lm-d-ok); }
.tq-sw.is-on::after { inset-inline-start: auto; inset-inline-end: 2px; }
.tq-sw:focus-visible { outline: 2px solid var(--lm-d-info); outline-offset: 2px; }

/* ── «إعدادات المهام» (design 11) ── */
.tq-set-grid { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 14px; align-items: start; }
.tq-set-t { margin: 0; font-size: 20px; font-weight: 700; }
.tq-set-t span { font-size: 14px; font-weight: 500; color: var(--lm-d-muted); }
.tq-set-scroll { overflow-x: auto; }
.tq-set-table { font-size: 14px; }
.tq-set-table th { font-size: 13px; padding: 10px 12px; }
.tq-set-table td { padding: 10px 12px; }
.tq-set-table :is(th, td).c { text-align: center; }
.tq-set-table tbody tr:hover > td { background: var(--lm-d-hover); }
.tq-set-table tbody tr.is-open > td { background: var(--lm-d-row-hl); }
.tq-set-table tbody tr.is-open > td:first-child { box-shadow: inset -3px 0 0 var(--lm-d-accent); }
[dir='ltr'] .tq-set-table tbody tr.is-open > td:first-child { box-shadow: inset 3px 0 0 var(--lm-d-accent); }
.tq-set-rv { display: flex; align-items: center; gap: 8px; }
.tq-set-sel {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--lm-d-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 4px 6px;
    border-radius: 8px;
    max-inline-size: 170px;
    cursor: pointer;
}
.tq-set-sel:hover, .tq-set-sel:focus { border-color: var(--lm-d-border); outline: 0; }
.tq-set-sel.is-default { color: var(--lm-d-muted); font-weight: 500; }
.tq-rules { display: flex; flex-direction: column; padding: 2px 18px; overflow: auto; }
.tq-rule { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 0; border-block-end: 1px solid var(--lm-d-divider); }
.tq-rule:last-child { border: 0; }
.tq-rule b { display: block; font-size: 14.5px; }
.tq-rule span { font-size: 13px; color: var(--lm-d-muted); }
.tq-rule .val { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; }
.tq-rule-link { color: inherit; text-decoration: none; }
.tq-rule-link:hover b { color: var(--lm-d-info); }
[dir='ltr'] .tq-rule-link .val .tq-ico { transform: scaleX(-1); }

/* ── the task page (design 10) ── */
.tq-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tq-task-head .pre .tq-ty { inline-size: 20px; block-size: 20px; }
.tq-task-head .pre .wf-num { font-weight: 700; color: var(--lm-d-ink); font-size: 13px; }
.tq-task-head h1.wf-hero-name { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.25; color: var(--lm-d-ink); }
.tq-task-head .acts .fi-ac { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tq-task-head .acts .fi-btn { min-block-size: 44px; border-radius: 12px; }
.tq-task-head .tq-more-btn { inline-size: 44px; block-size: 44px; border-radius: 12px; border: 1px solid var(--lm-d-border); background: var(--lm-d-surface); color: var(--lm-d-muted); }
.tq-task { gap: 14px; }
.tq-steps-card { padding: 12px 18px; border-block-start-width: 1px; border-block-start-color: var(--lm-d-border); }
.tq-steps { display: flex; justify-content: space-between; position: relative; margin: 0; padding: 4px 0 0; list-style: none; }
.tq-steps::before { content: ''; position: absolute; inset-block-start: 12px; inset-inline: 14px; border-block-start: 2px solid var(--lm-d-divider); }
.tq-steps li { position: relative; flex: 1; text-align: center; font-size: 12.5px; color: var(--lm-d-muted); }
.tq-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); }
.tq-steps li.is-done i { background: var(--lm-d-ok); border-color: var(--lm-d-ok); }
.tq-steps li.is-now { color: var(--lm-d-ink); font-weight: 700; }
.tq-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); }
.tq-steps li.is-stop { color: var(--lm-d-danger); font-weight: 700; }
.tq-steps li.is-stop i { background: var(--lm-d-danger); border-color: var(--lm-d-danger); }
.tq-steps-card .tq-note { margin: 10px 0 0; }
.tq-note.is-danger { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.tq-task > .tq-note { margin: 0; }
.tq-task-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.tq-task-main { min-inline-size: 0; }
.tq-task-tabs { 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); }
.tq-watchers { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--lm-d-muted); }
.tq-task-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; }
.tq-task-rm { padding: 8px 12px 12px; }
.tq-task-rm .fi-ta-ctn { border: 0; box-shadow: none; }
.tq-empty-desc { margin: 0; }
.tq-md { display: flex; flex-direction: column; gap: 16px; }
.tq-md.wf-hero-desc-body { white-space: normal; }
.tq-md-sec + .tq-md-sec { border-block-start: 1px solid var(--lm-d-divider); padding-block-start: 14px; }
.tq-md-h { margin: 0 0 6px; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--lm-d-ink); }
.tq-md-h span { font-size: 12.5px; font-weight: 500; color: var(--lm-d-muted); }
.tq-md p { margin: 0; font-size: 14px; line-height: 1.75; white-space: pre-line; }
.tq-md p + p { margin-block-start: 8px; }
.tq-md :is(ul, ol) { margin: 0; padding-inline-start: 20px; font-size: 14px; line-height: 1.8; }
.tq-md li { white-space: pre-line; }
.tq-md a { color: var(--lm-d-info); font-weight: 600; }
.tq-md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--lm-d-chip-bg); border-radius: 5px; padding-inline: 5px; direction: ltr; unicode-bidi: isolate; }
.tq-md pre { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--lm-d-chip-bg); overflow-x: auto; direction: ltr; text-align: left; }
.tq-md pre code { background: transparent; padding: 0; white-space: pre; }
.tq-md li:has(> input[type='checkbox']) { list-style: none; display: flex; align-items: flex-start; gap: 8px; margin-inline-start: -20px; padding-block: 3px; }
.tq-md li:has(> input[type='checkbox']:checked) { color: var(--lm-d-muted); }
.tq-md input[type='checkbox'] { appearance: none; inline-size: 18px; block-size: 18px; border-radius: 5px; border: 2px solid var(--lm-d-control-edge); margin: 4px 0 0; flex: none; display: inline-grid; place-items: center; background: var(--lm-d-surface); }
.tq-md input[type='checkbox']:checked { background: var(--lm-d-ok); border-color: var(--lm-d-ok); }
.tq-md input[type='checkbox']:checked::after { content: ''; inline-size: 5px; block-size: 9px; border: solid var(--lm-d-on-accent); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.tq-subs { display: flex; flex-direction: column; }
.tq-subs-list { border: 1px solid var(--lm-d-border); border-radius: 12px; overflow: hidden; }
.tq-sub { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-block-end: 1px solid var(--lm-d-divider); font-size: 13.5px; color: var(--lm-d-ink); text-decoration: none; }
.tq-sub:last-child { border: 0; }
.tq-sub:hover { background: var(--lm-d-hover); }
.tq-sub-t { flex: 1 1 auto; min-inline-size: 0; }
.tq-task-side { display: flex; flex-direction: column; gap: 12px; min-inline-size: 0; }
.tq-task-side .tq-card { border-block-start-width: 1px; border-block-start-color: var(--lm-d-border); }
.tq-task-side .tq-card-h { padding: 10px 16px; }
.tq-task-side .tq-set-t { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.tq-facts2 { padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.tq-f { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 8px; min-block-size: 32px; font-size: 13.5px; }
.tq-f .wf-fact-label { color: var(--lm-d-muted); font-size: 13px; font-weight: 500; margin: 0; }
.tq-f .wf-fact-value { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-inline-size: 0; font-weight: 600; color: var(--lm-d-ink); font-size: 13.5px; }
.tq-f .wf-fact-value.is-late { color: var(--lm-d-danger); }
.tq-gates .tq-muted { font-size: 12.5px; }
.tq-mono { font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tq-code-edit { display: flex; justify-content: flex-end; padding-block-start: 4px; }

/* ── «مفاتيح المساعد» (TASKS-HUB-4) ── */
.tq-ai-by { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--lm-d-ai); background: var(--lm-d-ai-bg); border: 1px solid var(--lm-d-border); border-radius: 999px; padding-inline: 8px; min-block-size: 22px; }
.tq-key-b { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.tq-key-row { display: flex; align-items: flex-start; gap: 8px; }
.tq-key-code { flex: 1 1 auto; min-inline-size: 0; margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--lm-d-chip-bg); color: var(--lm-d-ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; white-space: pre-wrap; word-break: break-all; text-align: left; }
.tq-key-how { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.tq-key-fresh { border-block-start-color: var(--lm-d-accent); }
.tq-key-foot { font-size: 13px; margin: 0; }
.tq-keys .tq-dp { margin-inline-end: 4px; }

/* ── under 1024px: the page scrolls, the open task is a bottom sheet ── */
@media (max-width: 1023.98px) {
    .tq-head { flex-direction: column; gap: 10px; }
    .tq-title { font-size: 26px; padding-block-start: 0; }
    .tq-qa-wrap { inline-size: 100%; }
    .tq-qa { flex-wrap: wrap; }
    .tq-qa-in { flex-basis: calc(100% - 50px); }
    .tq-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tq-strip-c:nth-child(4n + 1) { border-inline-start: 0; }
    .tq-strip-c:nth-child(n + 5) { border-block-start: 1px solid var(--lm-d-divider); }
    .tq-split, .tq-split.has-open { grid-template-columns: minmax(0, 1fr); }
    .tq-split.has-open .tq-list { border-inline-end: 0; }
    .tq-split.has-open .tq-panel {
        position: fixed;
        inset-inline: 0;
        inset-block: auto 0;
        z-index: 45;
        min-block-size: 0;
        max-block-size: 86dvh;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -10px 40px var(--lm-d-sheet-shadow);
    }
    .tq-card-h { align-items: stretch; }
    .tq-pills { flex-wrap: nowrap; overflow-x: auto; padding-block-end: 2px; }
    .tq-search { flex-basis: 100%; }
    .tq-board { grid-template-columns: repeat(5, minmax(240px, 1fr)); }
    .tq-board.is-6 { grid-template-columns: repeat(6, minmax(220px, 1fr)); }
    .tq-set-grid { grid-template-columns: minmax(0, 1fr); }
    .tq-mk-head { flex-direction: column; gap: 8px; }
    .tq-mk-head h1 { font-size: 22px; }
    .tq-mk-head .acts { margin: 0; inline-size: 100%; }
    .tq-task-grid { grid-template-columns: minmax(0, 1fr); }
    .tq-task-head h1.wf-hero-name { font-size: 22px; }
    .tq-steps li { font-size: 12px; }
}
@media (max-width: 640px) {
    .tq-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tq-strip-c:nth-child(n) { border-inline-start: 0; border-block-start: 1px solid var(--lm-d-divider); }
    .tq-strip-c:nth-child(-n + 2) { border-block-start: 0; }
    .tq-strip-c:nth-child(2n) { border-inline-start: 1px solid var(--lm-d-divider); }
    .tq-k-v { font-size: 22px; }
    .tq-dd { inline-size: min(320px, calc(100vw - 32px)); }
}

/* ═══ TASKS-HUB-FIT-1 — «المهام» on the house type scale, on one screen ═══
   Kamal 2026-09-30: every number and row on the screen without scrolling
   the page, and the type sizes of the house system (title 28/700, figure
   26/700, label 13, pill and body 14, table head 13.5; weight tops at 700).
   Declared after the rules above on purpose — same selectors, house values. */
.tq-title { font-size: 28px; font-weight: 700; line-height: 1.25; padding-block-start: 6px; }
.tq-qa-in, .tq-search input { font-size: 14px; }
.tq-strip-c { padding-block: 8px 6px; gap: 0; }
.tq-k-l { font-size: 13px; }
.tq-k-v { font-size: 26px; font-weight: 700; line-height: 1.2; }
.tq-pill { min-block-size: 40px; padding-inline: 16px; border-radius: 20px; font-size: 14px; }
.tq-card-h { padding-block: 10px; }
.tq-av { font-weight: 700; }
.tq-dt { font-size: 14px; }
.tq-dt th { font-size: 13.5px; padding-block: 10px; background: var(--lm-d-surface); }
.tq-dt td { padding-block: 5px; }
.tq-dt b, .tq-dt .n-late { font-weight: 700; }
.tq-col-h { font-size: 14px; }
.tq-bcard-t { font-size: 14px; }
.tq-list .fi-ta-header-cell { font-size: 13.5px; padding-block: 10px; }
.tq-list .fi-ta-cell > *, .tq-list .fi-ta-cell .fi-ta-col { padding-block: 0; }
.tq-list .fi-ta-cell { padding-block: 5px; }
/* the empty toolbar row over the column heads: the filter panel's own button
   (hidden with its dropdown) kept it open — only the bulk buttons count */
.tq-list .fi-ta-header-ctn:not(:has(.fi-ta-header-toolbar > .fi-ta-actions .fi-ac-btn-action:not([style*='display: none']))) { display: none; }
.tq-cell-t { gap: 2px; }
.tq-cell-title { font-size: 14px; line-height: 1.4; }
.tq-cell-p { font-size: 14px; font-weight: 600; }
.tq-pn-title { font-size: 18px; font-weight: 700; }
.tq-pn-t { font-size: 15px; font-weight: 700; }
.tq-banner-t b { font-size: 14px; font-weight: 700; }
.tq-rule b { font-size: 14px; }
@media (max-width: 1023.98px) {
    .tq-title { font-size: 22px; padding-block-start: 0; }
}
@media (max-width: 640px) {
    .tq-k-v { font-size: 22px; }
}

/* the board's cards, compact (Kamal 2026-09-30: «صغّر الكارتات — عايز يظهر
   عدد أكتر»): title up to two lines, the tags and the foot share one row when
   they fit, tighter spacing. Same content — nothing leaves the card. */
.tq-col-h { padding: 8px 10px 6px; }
.tq-col-b { gap: 6px; padding: 2px 8px 8px; }
.tq-bcard { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 5px 6px; padding: 8px 10px; border-radius: 10px; }
.tq-bcard > * { min-inline-size: 0; }
.tq-bcard > :is(.tq-bcard-top, .tq-bcard-t, .tq-blk) { flex: 1 1 100%; }
.tq-bcard > .tq-tags { flex: 0 1 auto; gap: 4px; }
.tq-bcard > .tq-bcard-f { flex: 1 1 auto; flex-wrap: wrap; gap: 4px 6px; }
.tq-bcard-t { font-size: 13.5px; font-weight: 600; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tq-bcard-f .tq-due { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.tq-bcard-f .tq-av.is-sm { inline-size: 22px; block-size: 22px; }
.tq-bcard:not(.is-tech) .tq-bcard-f .tq-av { margin-inline-start: auto; }
.tq-blk { padding: 2px 6px; }
.tq-bcard.is-tech { gap: 4px 6px; padding: 7px 9px; }

/* one screen, from 1024px: the page stands still — the list, the board's
   columns, the departments / people table and the open task scroll inside
   the card (the extracts pattern). A very short window keeps the page scroll. */
@media (min-width: 1024px) and (min-height: 620px) {
    html:has(.tq-page .tq-strip), html:has(.tq-page .tq-strip) body { overflow: hidden; }

    body:has(.tq-page .tq-strip) .fi-main-ctn { min-inline-size: 0; }
    body:has(.tq-page .tq-strip) .fi-main {
        block-size: calc(100dvh - var(--hn-topbar-h, 68px) - 1px);
        display: flex;
        flex-direction: column;
        padding-block: 12px;
        min-inline-size: 0;
        overflow: hidden;
    }
    .tq-page:has(.tq-strip),
    .tq-page:has(.tq-strip) .fi-page-header-main-ctn,
    .tq-page:has(.tq-strip) .fi-page-main,
    .tq-page:has(.tq-strip) .fi-page-content,
    .tq-page .tq:has(> .tq-strip) {
        flex: 1 1 auto;
        min-block-size: 0;
        min-inline-size: 0;
        display: flex;
        flex-direction: column;
    }
    .tq-page:has(.tq-strip) .fi-page-header-main-ctn { gap: 12px; padding-block: 0; }
    .tq-page:has(.tq-strip) .fi-page-content { gap: 0; }
    .tq-page .tq:has(> .tq-strip) { gap: 12px; }
    .tq:has(> .tq-strip) > .tq-strip { flex: none; }
    .tq:has(> .tq-strip) > .tq-card { flex: 1 1 auto; min-block-size: 0; }
    .tq:has(> .tq-strip) > .tq-card > :not(.tq-tw, .tq-board, .tq-split) { flex: none; }

    /* «حسب القسم» / «حسب الشخص» */
    .tq:has(> .tq-strip) .tq-tw { flex: 1 1 auto; min-block-size: 0; overflow: auto; overscroll-behavior: contain; }
    .tq:has(> .tq-strip) .tq-dt thead th { position: sticky; inset-block-start: 0; z-index: 2; }

    /* «لوحة»: each stage scrolls its own cards */
    .tq:has(> .tq-strip) .tq-board { flex: 1 1 auto; min-block-size: 0; grid-template-rows: minmax(0, 1fr); padding: 12px; }
    .tq:has(> .tq-strip) .tq-col { min-block-size: 0; }
    .tq:has(> .tq-strip) .tq-col-b { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; }

    /* «قائمة»: the rows scroll, the column heads and the pages row stay */
    .tq:has(> .tq-strip) .tq-split { flex: 1 1 auto; min-block-size: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
    .tq:has(> .tq-strip) .tq-list,
    .tq:has(> .tq-strip) .tq-list :is(.fi-ta, .fi-ta-ctn, .fi-ta-main) {
        flex: 1 1 auto;
        min-block-size: 0;
        min-inline-size: 0;
        display: flex;
        flex-direction: column;
    }
    .tq:has(> .tq-strip) .tq-list :is(.fi-ta-header-ctn, .fi-ta-filter-indicators, .fi-ta-footer, .fi-pagination) { flex: none; }
    .tq:has(> .tq-strip) .tq-list .fi-ta-content-ctn { flex: 1 1 auto; min-block-size: 0; overflow: auto; overscroll-behavior: contain; }
    .tq:has(> .tq-strip) .tq-list .fi-ta-table thead { position: sticky; inset-block-start: 0; z-index: 2; }
    .tq:has(> .tq-strip) .tq-list .fi-pagination { padding-block: 8px; }
    .tq:has(> .tq-strip) .tq-panel { position: static; min-block-size: 0; max-block-size: none; block-size: 100%; }
}

/* ═══ TASKS-HUB-PHONE-1 — «المهام» on a phone (Kamal 2026-09-30 «راجع
   التصميم على الموبايل»). The house rule for ≤640px: hand-built tables become
   stacked cards, every control ≥ 44px, nothing leaves the screen sideways. ═══ */
@media (max-width: 640px) {
    /* the numbers strip: an odd last cell takes the whole row */
    .tq-strip-c:last-child:nth-child(odd) { grid-column: 1 / -1; }

    /* «لمين» / «إمتى»: a bottom sheet instead of a box that ran off the screen */
    .tq-dd, .tq-dd.is-narrow {
        position: fixed;
        inset-inline: 0;
        inset-block: auto 0;
        inline-size: auto;
        max-block-size: 72dvh;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -10px 40px var(--lm-d-sheet-shadow);
        z-index: 60;
    }
    .tq-dd-s, .tq-dd-r, .tq-dd-date input { min-block-size: 44px; }

    /* «قائمة»: a row is a card — the task on top, then who / when, then the
       stage and the buttons. The column heads go; the row says it all. */
    .tq-list .fi-ta-content-ctn { overflow-x: visible; }
    .tq-list .fi-ta-table, .tq-list .fi-ta-table tbody { display: block; inline-size: 100%; }
    .tq-list .fi-ta-table thead { display: none; }
    .tq-list .fi-ta-row {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr) auto;
        grid-template-areas: "sel title title" ". who due" ". stage acts";
        align-items: center;
        gap: 6px 10px;
        padding: 12px 14px;
        border-block-end: 1px solid var(--lm-d-divider);
    }
    .tq-list .fi-ta-row > td { display: block; padding: 0; border: 0; background: transparent; min-inline-size: 0; }
    .tq-list .fi-ta-row:hover > td, .tq-list .fi-ta-row.tq-row-open > td { background: transparent; }
    .tq-list .fi-ta-row:hover, .tq-list .fi-ta-row.tq-row-open { background: var(--lm-d-row-hl); }
    .tq-list .fi-ta-row.tq-row-open > td:first-child { box-shadow: none; }
    .tq-list .fi-ta-row.tq-row-open { box-shadow: inset -3px 0 0 var(--lm-d-accent); }
    [dir='ltr'] .tq-list .fi-ta-row.tq-row-open { box-shadow: inset 3px 0 0 var(--lm-d-accent); }
    .tq-list .fi-ta-row > .fi-ta-selection-cell { grid-area: sel; align-self: start; padding-block-start: 2px; }
    .tq-list .fi-ta-row > .fi-ta-cell-title { grid-area: title; }
    .tq-list .fi-ta-row > .fi-ta-cell-assignee { grid-area: who; }
    .tq-list .fi-ta-row > .fi-ta-cell-due-date { grid-area: due; justify-self: end; }
    .tq-list .fi-ta-row > .fi-ta-cell-status { grid-area: stage; }
    .tq-list .fi-ta-row > td:has(> .fi-ta-actions) { grid-area: acts; justify-self: end; }
    .tq-list .fi-ta-row > .fi-ta-cell-last { display: none; }
    .tq-list .fi-ta-row .fi-ta-col { padding: 0; }
    .tq-cell-t { min-inline-size: 0; }
    .tq-list .fi-ta-actions .fi-icon-btn { inline-size: 40px; block-size: 40px; }
    .tq-list .fi-pagination :is(.fi-btn, .fi-input-wrp, .fi-pagination-item-btn) { min-block-size: 44px; }

    /* «حسب القسم» / «حسب الشخص»: a row is a card — the name, then the four
       counts side by side with their names, then the week and the oldest */
    .tq:has(> .tq-strip) .tq-tw { overflow: visible; }
    .tq-dt, .tq-dt tbody { display: block; }
    .tq-dt thead { display: none; }
    .tq-dt tr {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        padding: 12px 14px;
        border-block-end: 1px solid var(--lm-d-divider);
    }
    .tq-dt td { display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; background: transparent; min-inline-size: 0; }
    .tq-dt :is(td, th).num { text-align: start; }
    .tq-dt td:is(.is-name, .is-bar, .is-oldest) { grid-column: 1 / -1; }
    .tq-dt td.is-oldest:empty { display: none; }
    .tq-dt td[data-label]::before { content: attr(data-label); font-size: 12px; font-weight: 500; color: var(--lm-d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tq-dt tr.tq-pp { gap: 8px 6px; }
    .tq-dt tr.tq-dg:hover, .tq-dt tr.tq-pp:hover { background: var(--lm-d-hover); }
    .tq-dt tr.tq-dg:hover td, .tq-dt tr.tq-pp:hover td, .tq-dt tr.tq-dg.is-exp td, .tq-dt tr.tq-pp td { background: transparent; }
    .tq-dt tr.tq-dg.is-exp { background: var(--lm-d-row-hl); }
    .tq-dt tr.tq-pp { background: var(--lm-d-page); padding-inline-start: 28px; }
    .tq-dt tr.tq-pp td:first-child { padding-inline-start: 0; }
    .tq-mb { min-inline-size: 0; }
    .tq-dt td .tq-empty-row, .tq-dt td[colspan] { grid-column: 1 / -1; }

    /* the open task (a bottom sheet): its buttons are finger-sized too */
    .tq-panel .tq-btn { min-block-size: 44px; }
    .tq-panel .tq-x { inline-size: 44px; block-size: 44px; }
    .tq-panel .tq-pn-open { display: block; min-block-size: 44px; line-height: 44px; }
}

/* ═══ TASK-CREATE-DS-1 — «إضافة مهمة» (body.hm-task-create) ═══
   The page the «تفاصيل أكتر» button of the one-line add opens. Kamal
   2026-09-30: its type read larger than the «المهام» screen it comes from —
   so it wears the same house system: a record-size title, ONE ruled card
   (the two sections are its parts), 13.5px labels, 14px controls, the orange
   primary. Layout only — same fields, same validation, same writer.
   Scoped by the body class CreateTask sets; nothing reaches another page. */
body.hm-task-create { background: var(--lm-d-page); }
body.hm-task-create .fi-main-ctn { background: transparent; }
body.hm-task-create .fi-page-content { max-inline-size: 48rem; margin-inline: auto; }
body.hm-task-create .fi-page-header-main-ctn, body.hm-task-create .fi-page-main { row-gap: 14px; }
body.hm-task-create .fi-page .fi-header-heading { font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--lm-d-ink); }
body.hm-task-create .fi-page .fi-header-subheading { margin-block-start: 2px; font-size: 13.5px; font-weight: 400; color: var(--lm-d-muted); }
body.hm-task-create .fi-header-actions-ctn .fi-btn {
    min-block-size: 40px;
    border-radius: 10px;
    padding-inline: 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--lm-d-ink);
    background: var(--lm-d-surface);
    box-shadow: inset 0 0 0 1px var(--lm-d-control-edge);
}

/* one card with the blue rule; the sections are its parts */
body.hm-task-create .fi-sc-form > .fi-sc:first-child > .fi-grid-col > .fi-sc-component > .fi-sc {
    gap: 0;
    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);
}
body.hm-task-create .fi-sc-form .fi-section { border: 0; border-radius: 0; box-shadow: none; outline: 0; background: transparent; }
body.hm-task-create .fi-sc-form > .fi-sc:first-child > .fi-grid-col > .fi-sc-component > .fi-sc > .fi-grid-col + .fi-grid-col .fi-section { border-block-start: 1px solid var(--lm-d-divider); }
body.hm-task-create .fi-section-header { padding: 12px 18px 0; }
body.hm-task-create .fi-section-header-text-ctn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
body.hm-task-create .fi-section-header-heading { font-size: 15px; font-weight: 700; color: var(--lm-d-ink); }
body.hm-task-create .fi-section-header-description { font-size: 12.5px; color: var(--lm-d-muted); }
body.hm-task-create .fi-section-content-ctn { border: 0; }
body.hm-task-create .fi-section-content { padding: 10px 18px 16px; }
body.hm-task-create .fi-section-content .fi-sc { gap: 12px 16px; }

/* fields */
body.hm-task-create .fi-fo-field { gap: 4px; }
body.hm-task-create .fi-fo-field-label-content { font-size: 13.5px; font-weight: 700; color: var(--lm-d-ink); }
body.hm-task-create .fi-fo-field-label-required-mark { color: var(--lm-d-danger); font-weight: 700; font-size: 12px; }
body.hm-task-create .fi-input-wrp { border-radius: 10px; min-block-size: 40px; box-shadow: inset 0 0 0 1px var(--lm-d-control-edge); background: var(--lm-d-surface); }
body.hm-task-create .fi-input-wrp:focus-within { box-shadow: inset 0 0 0 2px var(--lm-d-info); }
body.hm-task-create .fi-input, body.hm-task-create .fi-select-input, body.hm-task-create .fi-fo-textarea textarea { font-size: 14px; color: var(--lm-d-ink); }
body.hm-task-create .fi-fo-field-wrp-helper-text, body.hm-task-create .fi-sc-text { font-size: 12.5px; color: var(--lm-d-muted); }

/* foot: sticky (never fixed) — always reachable, never covering inputs */
body.hm-task-create .fi-sc-form { gap: 14px; }
body.hm-task-create .fi-sc-actions {
    position: sticky;
    inset-block-end: 0;
    z-index: 5;
    padding: 10px 18px;
    background: var(--lm-d-surface);
    border: 1px solid var(--lm-d-border);
    border-radius: 16px;
    box-shadow: 0 1px 2px var(--lm-d-shadow);
}
body.hm-task-create .fi-sc-actions .fi-btn { min-block-size: 40px; border-radius: 10px; padding-inline: 18px; font-size: 14px; font-weight: 700; }
body.hm-task-create .fi-sc-actions .fi-btn.fi-color-primary { background: var(--lm-d-accent); color: var(--lm-d-on-accent); padding-inline: 22px; }
body.hm-task-create .fi-sc-actions .fi-btn:not(.fi-color-primary) { background: var(--lm-d-surface); color: var(--lm-d-ink); box-shadow: inset 0 0 0 1px var(--lm-d-control-edge); }

@media (max-width: 767.98px) {
    body.hm-task-create .fi-page-content { max-inline-size: 100%; }
    body.hm-task-create .fi-page .fi-header-heading { font-size: 20px; }
    body.hm-task-create .fi-input-wrp, body.hm-task-create .fi-header-actions-ctn .fi-btn { min-block-size: 44px; }
    body.hm-task-create .fi-input-wrp .fi-icon-btn { inline-size: 44px; block-size: 44px; }
    body.hm-task-create .fi-sc-actions .fi-btn { flex: 1 1 45%; justify-content: center; min-block-size: 44px; }
    /* Fields fill the width — no side-by-side squeeze, no horizontal scroll. */
    body.hm-task-create .fi-section-content { overflow-x: clip; }
}