/*
 * Unified Work Center — .wc-* scoped skin.
 * Rules of the house: page-scoped prefixed classes only (raw Tailwind is
 * not compiled for custom blades), CSS logical properties everywhere so
 * one sheet serves AR (RTL) and EN (LTR), no font-family (typography.css
 * is the single source), dark mode = token remap under .dark.
 * Breakpoints mirror the approved navigation redesign: 1023.98 / 767.98.
 */

.wc {
    /* Every colour here is a shared role read from the token layer
       (tokens.css, HO-3104): each resolves to the very value it replaced,
       in both themes — this sheet was already written on the same palette,
       so there is no dark block left to keep. */
    --wc-bg: transparent;
    --wc-card: var(--ho-surface);
    --wc-border: var(--ho-line);
    --wc-text: var(--ho-ink);
    --wc-muted: var(--ho-ink-muted);
    --wc-soft: var(--ho-surface-inset);
    --wc-accent: var(--ho-info-line);
    --wc-accent-soft: var(--ho-info-soft);
    --wc-danger: var(--ho-danger-line);
    --wc-danger-soft: var(--ho-danger-soft);
    --wc-warn: var(--ho-warning-line);
    --wc-warn-soft: var(--ho-warning-soft);
    --wc-ok: var(--ho-success-line);
    --wc-ok-soft: var(--ho-success-soft);
    /* Small text ON a soft tint takes the ink token, not the line one: a
       `-line` colour is tuned for bars and large figures and sits at
       3.2–4.4:1 on its own tint at badge size. */
    --wc-danger-ink: var(--ho-danger-ink);
    --wc-warn-ink: var(--ho-warning-ink);
    --wc-ok-ink: var(--ho-success-ink);
    --wc-radius: 0.625rem;

    color: var(--wc-text);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-inline-size: 80rem;
    margin-inline: auto;
    inline-size: 100%;
}


/* ── Header ─────────────────────────────────────────────────────── */
.wc-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.wc-title {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
}

.wc-date {
    color: var(--wc-muted);
    font-size: 0.8125rem;
    margin-block-start: 0.125rem;
}

.wc-head-side {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.wc-scopes {
    display: inline-flex;
    background: var(--wc-soft);
    border: 1px solid var(--wc-border);
    border-radius: 999px;
    padding: 0.1875rem;
    gap: 0.125rem;
}

.wc-scope-chip {
    padding: 0.3125rem 0.875rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wc-muted);
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}

.wc-scope-chip:hover {
    color: var(--wc-text);
}

.wc-scope-chip.is-active {
    background: var(--wc-card);
    color: var(--wc-accent);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

.wc-freshness {
    color: var(--wc-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.wc-member-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--wc-accent-soft);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
}

/* ACT-NOTIF-2: a bell deep link the write boundary refused. */
.wc-notice {
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
    color: var(--wc-warn);
    background: var(--wc-warn-soft);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
}

.wc-member-banner a {
    color: var(--wc-accent);
    font-weight: 600;
    font-size: 0.8125rem;
}

/* ── Brief strip ────────────────────────────────────────────────── */
.wc-brief {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.625rem;
}

.wc-brief-stat {
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    padding: 0.625rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-inline-size: 0;
}

.wc-brief-num {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.wc-brief-stat.is-click { cursor: pointer; text-decoration: none; color: inherit; transition: background 120ms ease, border-color 120ms ease; }
.wc-brief-stat.is-click:hover { background: var(--wc-soft); }
.wc-brief-stat.is-click:focus-visible { outline: 2px solid var(--wc-accent); outline-offset: 2px; }
.wc-brief-stat.is-active { border-color: var(--wc-accent); box-shadow: inset 0 0 0 1px var(--wc-accent); }
.wc-brief-stat.is-zero { cursor: default; }
.wc-member-num { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.wc-member-num:hover { text-decoration-style: solid; }
.wc-brief-plus { font-size: 0.75em; margin-inline-start: 1px; opacity: 0.8; }
.wc-lane-note { font-size: 0.8125rem; color: var(--wc-muted); margin: -0.25rem 0 0.5rem; }
.wc-brief-stat.overdue:not(.is-zero) .wc-brief-num { color: var(--wc-danger); }
.wc-brief-stat.attention:not(.is-zero) .wc-brief-num { color: var(--wc-warn); }
.wc-brief-stat.approvals:not(.is-zero) .wc-brief-num { color: var(--wc-accent); }
/* The approvals tile's second clock — «2 past their SLA» — under its count,
   so the lane's own overdue is read beside «Overdue — my work», not against it. */
.wc-brief-sub { font-size: var(--ho-text-xs); font-weight: 700; color: var(--wc-muted); white-space: nowrap; }
.wc-brief-sub.is-danger { color: var(--wc-danger-ink); }

.wc-brief-label {
    color: var(--wc-muted);
    font-size: var(--ho-text-xs);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Sections ───────────────────────────────────────────────────── */
.wc-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-inline-size: 0;
}

.wc-section-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--wc-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Next best action ───────────────────────────────────────────── */
.wc-next-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--wc-accent-soft);
    border: 1px solid var(--wc-accent);
    border-radius: var(--wc-radius);
    padding: 0.875rem 1rem;
    transition: filter 0.15s;
}

.wc-next-card:hover { filter: brightness(0.98); }

.wc-next-main {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-inline-size: 0;
}

/* ── Attention chips ────────────────────────────────────────────── */
.wc-attention {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.625rem;
}

.wc-attn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-inline-start: 3px solid var(--wc-warn);
    border-radius: var(--wc-radius);
    padding: 0.625rem 0.875rem;
    min-inline-size: 0;
    transition: background 0.15s;
}

.wc-attn:hover { background: var(--wc-soft); }
.wc-attn.sev-critical { border-inline-start-color: var(--wc-danger); }
.wc-attn.sev-high { border-inline-start-color: var(--wc-danger); }
.wc-attn.sev-warning { border-inline-start-color: var(--wc-warn); }
.wc-attn.sev-info { border-inline-start-color: var(--wc-accent); }

.wc-attn-count {
    font-size: 1.125rem;
    font-weight: 700;
    min-inline-size: 1.75rem;
    text-align: center;
}

.sev-critical .wc-attn-count, .sev-high .wc-attn-count { color: var(--wc-danger); }
.sev-warning .wc-attn-count { color: var(--wc-warn); }
.sev-info .wc-attn-count { color: var(--wc-accent); }

.wc-attn-body {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-inline-size: 0;
    flex: 1;
}

.wc-attn-title { font-size: 0.8125rem; font-weight: 700; }
.wc-attn-reason {
    font-size: 0.75rem;
    color: var(--wc-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc-attn-src {
    font-size: var(--ho-text-xs);
    color: var(--wc-muted);
    background: var(--wc-soft);
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
    white-space: nowrap;
}

/* ── Main grid ──────────────────────────────────────────────────── */
.wc-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.wc-col-main, .wc-col-rail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-inline-size: 0;
}

/* ── Work rows ──────────────────────────────────────────────────── */
.wc-bucket-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wc-muted);
    margin-block-start: 0.25rem;
}

.wc-bucket-label.bucket-due_overdue { color: var(--wc-danger); }

.wc-rows {
    display: flex;
    flex-direction: column;
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    overflow: hidden;
}

.wc-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-block-end: 1px solid var(--wc-border);
    min-inline-size: 0;
    transition: background 0.15s;
}

.wc-row:last-child { border-block-end: none; }
.wc-row:hover { background: var(--wc-soft); }
.wc-row.is-overdue { background: color-mix(in srgb, var(--wc-danger-soft) 45%, var(--wc-card)); }
.wc-row.is-overdue:hover { background: var(--wc-danger-soft); }

.wc-dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 999px;
    background: var(--wc-muted);
    flex-shrink: 0;
}

.wc-dot.prio-critical { background: var(--wc-danger); box-shadow: 0 0 0 3px var(--wc-danger-soft); }
.wc-dot.prio-urgent { background: var(--wc-danger); }
.wc-dot.prio-high { background: var(--wc-warn); }
.wc-dot.prio-normal { background: var(--wc-accent); }
.wc-dot.prio-low { background: var(--wc-muted); }
.wc-dot.prio-none { background: var(--wc-border); }
.wc-dot.prio-approval { background: var(--wc-accent); }

.wc-row-main {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    flex: 1;
    min-inline-size: 0;
}

.wc-row-title {
    font-size: 0.875rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc-row-context {
    font-size: 0.75rem;
    color: var(--wc-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wc-row-side {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.wc-row-badges { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; justify-content: flex-end; }

.wc-badge {
    font-size: var(--ho-text-xs);
    font-weight: 700;
    background: var(--wc-soft);
    color: var(--wc-muted);
    border-radius: 999px;
    padding: 0.125rem 0.4375rem;
    white-space: nowrap;
}

.wc-badge.is-danger { background: var(--wc-danger-soft); color: var(--wc-danger-ink); }
.wc-badge.is-warn { background: var(--wc-warn-soft); color: var(--wc-warn-ink); }

.wc-due {
    font-size: 0.75rem;
    color: var(--wc-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.wc-due.is-danger { color: var(--wc-danger); font-weight: 700; }
/* How long an approval has waited. A week is where it turns red — not an SLA
   (none may exist for the lane), just the point past which nobody meant it. */
.wc-waiting { font-variant-numeric: tabular-nums; }

.wc-cta {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wc-accent);
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0.1875rem 0.625rem;
    white-space: nowrap;
}

.is-danger { color: var(--wc-danger); }
.wc-muted { color: var(--wc-muted); }

/* ── Members table ──────────────────────────────────────────────── */
.wc-table-wrap {
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    overflow-x: auto;
}

.wc-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.wc-table th {
    text-align: start;
    color: var(--wc-muted);
    font-size: var(--ho-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.875rem;
    border-block-end: 1px solid var(--wc-border);
    white-space: nowrap;
}

.wc-table td {
    padding: 0.5625rem 0.875rem;
    border-block-end: 1px solid var(--wc-border);
    white-space: nowrap;
}

.wc-table tr:last-child td { border-block-end: none; }
.wc-table td.is-danger { font-weight: 700; }

.wc-member-link { font-weight: 600; color: var(--wc-accent); }

/* ── Metrics / rail ─────────────────────────────────────────────── */
.wc-metrics { display: flex; flex-direction: column; gap: 0.625rem; }

.wc-metric {
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    padding: 0.75rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.wc-metric.is-risk { border-inline-start: 3px solid var(--wc-warn); }
.wc-metric.is-na { opacity: 0.85; }

.wc-metric-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.wc-metric-label { font-size: 0.8125rem; font-weight: 700; }
.wc-metric-src {
    font-size: var(--ho-text-xs);
    color: var(--wc-muted);
    background: var(--wc-soft);
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
    white-space: nowrap;
}

.wc-metric-value { display: flex; align-items: baseline; gap: 0.25rem; }
.wc-metric-actual { font-size: 1.25rem; font-weight: 700; }
.wc-metric-target { color: var(--wc-muted); font-size: 0.8125rem; }
.wc-metric-na { color: var(--wc-muted); font-weight: 700; font-size: 1rem; }
.wc-metric-reason { color: var(--wc-muted); font-size: 0.75rem; }

.wc-bar {
    block-size: 0.375rem;
    background: var(--wc-soft);
    border-radius: 999px;
    overflow: hidden;
}

.wc-bar-fill {
    block-size: 100%;
    background: var(--wc-accent);
    border-radius: 999px;
}

.wc-metric-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--wc-muted);
    font-size: var(--ho-text-xs);
}

.wc-metric-foot a { color: var(--wc-accent); font-weight: 700; }

/* ── Insights ───────────────────────────────────────────────────── */
.wc-insights { display: flex; flex-direction: column; gap: 0.5rem; }

.wc-insight {
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-radius: var(--wc-radius);
    padding: 0.625rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    transition: background 0.15s;
}

.wc-insight:hover { background: var(--wc-soft); }
.wc-insight-title { font-size: 0.8125rem; font-weight: 700; }
.wc-insight-text {
    font-size: 0.75rem;
    color: var(--wc-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.wc-insight-src {
    font-size: var(--ho-text-xs);
    color: var(--wc-muted);
}

/* ── Responsive: tablet/drawer boundary ─────────────────────────── */
@media (max-width: 1023.98px) {
    .wc-grid { grid-template-columns: minmax(0, 1fr); }
    .wc-brief { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Responsive: mobile 390 ─────────────────────────────────────── */
@media (max-width: 767.98px) {
    .wc { gap: 0.75rem; }
    .wc-title { font-size: 1.125rem; }
    .wc-brief { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
    .wc-attention { grid-template-columns: minmax(0, 1fr); }
    .wc-head { align-items: stretch; flex-direction: column; }
    .wc-scopes { inline-size: 100%; justify-content: space-between; overflow-x: auto; }
    .wc-scope-chip { flex: 1; text-align: center; padding-inline: 0.5rem; }

    .wc-row { flex-wrap: wrap; row-gap: 0.25rem; }
    .wc-row-side {
        inline-size: 100%;
        justify-content: space-between;
        padding-inline-start: 1.25rem;
    }
}

/* ── WC-START-1: start state + add-task ─────────────────────────── */
.wc-start {
    background: var(--wc-card);
    border: 1px dashed var(--wc-border);
    border-radius: var(--wc-radius);
    padding: 1.75rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}
.wc-start-title { font-weight: 700; font-size: 1rem; }
.wc-start-desc { color: var(--wc-muted); font-size: 0.8125rem; max-inline-size: 36rem; }
.wc-start-hint { color: var(--wc-muted); font-size: 0.75rem; max-inline-size: 36rem; }
.wc-start-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-block-start: 0.5rem;
}
.wc-start-link { font-size: 0.8125rem; font-weight: 600; color: var(--wc-accent); }
.wc-add-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wc-accent);
    background: var(--wc-card);
    border: 1px solid var(--wc-accent);
    border-radius: 999px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.wc-add-btn:hover { background: var(--wc-accent-soft); }
.wc-add-btn.is-primary { color: #fff; background: var(--wc-accent); }
.wc-add-btn.is-primary:hover { filter: brightness(0.95); background: var(--wc-accent); }

/* ── WC-QA-1: search & filters bar ──────────────────────────────── */
.wc-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-radius: 0.625rem;
}
.wc-filter-q {
    flex: 1 1 12rem;
    min-inline-size: 8rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--wc-text);
    background: var(--wc-soft);
    border: 1px solid var(--wc-border);
    border-radius: 0.5rem;
}
.wc-filter-select {
    padding: 0.375rem 1.75rem 0.375rem 0.625rem;
    font-size: 0.75rem;
    color: var(--wc-text);
    background-color: var(--wc-soft);
    border: 1px solid var(--wc-border);
    border-radius: 0.5rem;
}
.wc-filter-clear {
    font-size: 0.75rem;
    color: var(--wc-accent);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}
.wc-filter-count { font-size: var(--ho-text-xs); color: var(--wc-muted); }
.wc-no-results {
    padding: 0.875rem;
    font-size: 0.8125rem;
    color: var(--wc-muted);
    text-align: center;
}

/* Row link (row became a div so link + button can coexist). */
a.wc-row-main { text-decoration: none; color: inherit; }

/* ── WC-QA-1: quick-action trigger ──────────────────────────────── */
.wc-qa-open {
    flex-shrink: 0;
    padding: 0.25rem 0.625rem;
    font-size: var(--ho-text-xs);
    font-weight: 600;
    color: var(--wc-accent);
    background: var(--wc-soft);
    border: 1px solid var(--wc-border);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s;
}
.wc-qa-open:hover { background: var(--wc-border); }

/* ── WC-QA-1: quick-execution drawer ────────────────────────────── */
.wc-qa-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgb(0 0 0 / 0.35);
}
.wc-qa-drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 41;
    inline-size: min(26rem, 100vw);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    overflow-y: auto;
    background: var(--wc-card);
    border-inline-start: 1px solid var(--wc-border);
    box-shadow: 0 0 2rem rgb(0 0 0 / 0.18);
}
.wc-qa-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding-block-end: 0.625rem;
    border-block-end: 1px solid var(--wc-border);
}
.wc-qa-head-text { display: flex; flex-direction: column; gap: 0.25rem; min-inline-size: 0; }
.wc-qa-title { font-size: 0.9375rem; font-weight: 700; color: var(--wc-text); }
.wc-qa-context { font-size: 0.75rem; color: var(--wc-muted); }
.wc-qa-close {
    flex-shrink: 0;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    color: var(--wc-muted);
    background: var(--wc-soft);
    border: 1px solid var(--wc-border);
    border-radius: 999px;
    cursor: pointer;
}
.wc-qa-error {
    padding: 0.5rem 0.625rem;
    font-size: 0.75rem;
    color: var(--wc-danger);
    background: var(--wc-danger-soft);
    border-radius: 0.5rem;
}
.wc-qa-note { font-size: 0.8125rem; color: var(--wc-muted); }
.wc-qa-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.wc-qa-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wc-text);
    text-align: center;
    background: var(--wc-soft);
    border: 1px solid var(--wc-border);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s;
}
.wc-qa-btn:hover { background: var(--wc-border); }
.wc-qa-btn.is-primary { color: #fff; background: var(--wc-accent); border-color: var(--wc-accent); }
.wc-qa-btn.is-danger { color: var(--wc-danger-ink); background: var(--wc-danger-soft); border-color: transparent; }
.wc-qa-form { display: flex; flex-direction: column; gap: 0.5rem; }
.wc-qa-form-title { font-size: 0.875rem; font-weight: 700; color: var(--wc-text); }
.wc-qa-label { font-size: 0.75rem; color: var(--wc-muted); }
.wc-qa-input {
    inline-size: 100%;
    padding: 0.4375rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--wc-text);
    background: var(--wc-soft);
    border: 1px solid var(--wc-border);
    border-radius: 0.5rem;
}
.wc-qa-hint { font-size: var(--ho-text-xs); color: var(--wc-muted); }
.wc-qa-form-actions { display: flex; gap: 0.5rem; margin-block-start: 0.25rem; }
.wc-qa-form-actions .wc-qa-btn { flex: 1; }

@media (max-width: 767.98px) {
    .wc-qa-drawer { inline-size: 100vw; }
    .wc-filters { padding: 0.5rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   WC-R4 (2026-09-19) — the redesigned Work Center.
   One sheet for AR (RTL) and EN (LTR): logical properties only, so the
   navigation side, the panel side and every icon gap mirror by themselves.
   Every colour is a token (tokens.css): the HOMEi navy is `--ho-brand-*`,
   the action colour is the accent (orange). Dark mode is the token remap —
   there is no dark block here and no filter. Everything is scoped under
   `.wc-r4` / `.wc-services`, so no other rule changes meaning. It sits BEFORE
   the daily-services and attendance blocks on purpose: their guards read from
   their own marker to the end of the sheet, and must keep finding only theirs.
   ══════════════════════════════════════════════════════════════════════ */
.wc-r4 {
    /* START-HERE-FINAL §2 — every colour, size and radius of this page is one of these */
    --wc-navy: var(--ho-brand-ink);
    --wc-text: var(--ho-brand-ink);
    --wc-muted: var(--ho-brand-ink-muted);
    --wc-tint: var(--ho-brand-soft);
    --wc-soft: var(--ho-brand-soft);
    --wc-line: var(--ho-brand-line);
    --wc-border: var(--ho-brand-line);
    --wc-card: var(--ho-brand-card);
    --wc-act: var(--ho-brand-accent);
    --wc-act-ink: var(--ho-brand-accent-ink);
    --wc-act-soft: var(--ho-brand-accent-soft);
    --wc-on-act: var(--ho-brand-on-accent);
    --wc-danger: var(--ho-brand-danger);
    --wc-danger-ink: var(--ho-brand-danger);
    --wc-ok: var(--ho-brand-success);
    --wc-ok-ink: var(--ho-brand-success);
    --wc-radius: 0.75rem;          /* panels 12px */
    --wc-radius-ctl: 0.5rem;       /* fields and buttons 8px */
    --wc-radius-badge: 0.375rem;   /* status badges 6px */
    --wc-row-pad: 0.25rem;
    --wc-fs-title: 1.5rem;         /* 24 / 700 / 1.35 */
    --wc-fs-section: 1.125rem;     /* 18 / 700 / 1.4 */
    --wc-fs-task: 0.9375rem;       /* 15 / 600 / 1.45 */
    --wc-fs-body: 0.875rem;        /* 14 / 500 · text 400 / 1.5 */
    --wc-fs-second: 0.8125rem;     /* 13 / 400 / 1.45 */
    --wc-fs-badge: 0.75rem;        /* 12 / 500 / 1.4 */
    --wc-fs-figure: 1.75rem;       /* 28 / 700 / 1.2 */
    font-variant-numeric: tabular-nums;
    max-inline-size: 100rem;
    gap: 0.75rem;
}

.wc-r4.is-comfortable { --wc-row-pad: 0.8125rem; }

/* the handoff's quiet ground under the white cards — this page only, and the
   panel's own dark body is left as it is (the token equals it) */
.fi-body:has(.wc-r4) { background-color: var(--ho-brand-page); }

.wc-r4 .wc-ico { inline-size: 1.125rem; block-size: 1.125rem; flex-shrink: 0; }

.wc-sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.wc-r4 a:focus-visible,
.wc-r4 button:focus-visible,
.wc-r4 summary:focus-visible,
.wc-r4 input:focus-visible,
.wc-r4 select:focus-visible,
.wc-r4 textarea:focus-visible,
.wc-r4 .wc-panel:focus-visible {
    outline: 2px solid var(--ho-focus);
    outline-offset: 2px;
}

/* ── header ─────────────────────────────────────────────────────── */
.wc-r4 .wc-head { align-items: center; }
.wc-r4 .wc-title { font-size: var(--wc-fs-title); font-weight: 700; line-height: 1.35; color: var(--wc-navy); }
.wc-r4 .wc-welcome { color: var(--wc-muted); font-size: var(--wc-fs-second); margin-block-start: 0.125rem; }
.wc-r4 .wc-date { font-size: var(--wc-fs-second); }

.wc-r4 .wc-scopes {
    background: var(--wc-card);
    border-color: var(--wc-line);
    border-radius: 0.75rem;
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.wc-r4 .wc-scope-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.75rem;
    padding: 0.375rem 1.25rem;
    border-radius: 0;
    font-size: var(--wc-fs-body);
    color: var(--wc-navy);
    border-inline-end: 1px solid var(--wc-line);
}

.wc-r4 .wc-scope-chip:last-child { border-inline-end: 0; }
.wc-r4 .wc-scope-chip:hover { background: var(--wc-tint); }

.wc-r4 .wc-scope-chip.is-active {
    background: var(--wc-act-soft);
    color: var(--wc-act-ink);
    box-shadow: inset 0 0 0 1.5px var(--wc-act);
    border-radius: 0.75rem;
}

.wc-r4 .wc-add-btn {
    gap: 0.5rem;
    min-block-size: 2.75rem;
    padding: 0.5rem 1.375rem;
    border-radius: 0.75rem;
    font-size: var(--wc-fs-body);
    font-weight: 700;
    color: var(--wc-act-ink);
    border-color: var(--wc-act);
}

/* The brand fill: a bold 15px+ label only (3.6:1 in the light theme — the
   token layer's own rule for the brand orange); dark ink on the dark theme's
   lighter orange, where white would not read. */
.wc-r4 .wc-add-btn.is-primary,
.wc-r4 .wc-btn.is-primary {
    color: var(--wc-on-act);
    background: var(--wc-act);
    border-color: var(--wc-act);
}


.wc-r4 .wc-add-btn.is-primary:hover, .wc-r4 .wc-btn.is-primary:hover { background: var(--wc-act); border-color: var(--wc-act); filter: brightness(0.96); }

/* ── source health ──────────────────────────────────────────────── */
.wc-health {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.625rem 0.875rem;
    border-radius: var(--wc-radius);
    border: 1px solid var(--wc-danger);
    background: var(--wc-danger-soft);
    color: var(--wc-danger-ink);
    font-size: var(--wc-fs-second);
}

.wc-health.is-capped { border-color: var(--wc-warn); background: var(--wc-warn-soft); color: var(--wc-warn-ink); }
.wc-health-text { display: flex; flex-direction: column; gap: 0.125rem; min-inline-size: 0; }

.wc-health-retry {
    min-block-size: 2.25rem;
    padding: 0.25rem 0.875rem;
    border-radius: 0.625rem;
    border: 1px solid currentColor;
    background: var(--wc-card);
    color: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* ── the four figures ───────────────────────────────────────────── */
.wc-r4 .wc-brief { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }

.wc-r4 .wc-brief-stat {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-color: var(--wc-line);
    border-radius: var(--wc-radius);
}

.wc-r4 .wc-brief-text { display: flex; flex-direction: column; gap: 0.125rem; min-inline-size: 0; order: 1; }

.wc-r4 .wc-brief-icon {
    order: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 0.75rem;
    background: var(--wc-tint);
    color: var(--wc-navy);
    flex-shrink: 0;
}

.wc-r4 .wc-brief-icon .wc-ico { inline-size: 1.375rem; block-size: 1.375rem; }
.wc-r4 .wc-brief-label { font-size: var(--wc-fs-body); font-weight: 600; color: var(--wc-navy); white-space: normal; }
.wc-r4 .wc-brief-label-short { display: none; }
.wc-r4 .wc-brief-num { font-size: var(--wc-fs-figure); font-weight: 700; color: var(--wc-navy); font-variant-numeric: tabular-nums; }
.wc-r4 .wc-brief-stat.overdue .wc-brief-icon { background: var(--wc-danger-soft); color: var(--wc-danger); }
.wc-r4 .wc-brief-stat.overdue:not(.is-zero) .wc-brief-num { color: var(--wc-danger); }
.wc-r4 .wc-brief-stat.due_today .wc-brief-icon,
.wc-r4 .wc-brief-stat.approvals .wc-brief-icon { background: var(--wc-act-soft); color: var(--wc-act-ink); }
.wc-r4 .wc-brief-stat.approvals:not(.is-zero) .wc-brief-num { color: var(--wc-act-ink); }
.wc-r4 .wc-brief-stat.is-zero .wc-brief-num { color: var(--wc-muted); }
.wc-r4 .wc-brief-stat.is-click:hover { background: var(--wc-tint); }
.wc-r4 .wc-brief-stat.is-active { border-color: var(--wc-act); box-shadow: inset 0 0 0 1px var(--wc-act); }

/* ── attendance + daily services: one low strip ─────────────────── */
.wc-services { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; align-items: stretch; }

.wc-services > .wc-att {
    background: var(--wc-card);
    border: 1px solid var(--wc-line);
    border-radius: var(--wc-radius);
    padding: 0.75rem 1rem;
    gap: 0.375rem;
}

.wc-services .wc-att .wc-section-title,
.wc-services .wc-daily .wc-daily-name {
    color: var(--wc-navy);
    text-transform: none;
    letter-spacing: 0;
}

.wc-services .wc-att .wc-section-title { font-size: var(--wc-fs-section); font-weight: 700; }

.wc-services .wc-att .wc-att-card,
.wc-services .wc-att .wc-att-card.state-in,
.wc-services .wc-att .wc-att-card.state-out,
.wc-services .wc-att .wc-att-card.state-off {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    max-inline-size: none;
}

.wc-services .wc-att .wc-att-state { font-size: var(--wc-fs-badge); padding: 0.1875rem 0.625rem; }
.wc-services .wc-att .state-in .wc-att-state,
.wc-services .wc-att .state-out .wc-att-state { background: var(--wc-ok-soft); color: var(--wc-ok-ink); }
.wc-services .wc-att .wc-att-shift-name { color: var(--wc-navy); }

.wc-r4 .wc-att .wc-att-btn,
.wc-r4 .wc-att .wc-att-btn.is-in,
.wc-r4 .wc-att .wc-att-btn.is-out { background: var(--wc-act); border-radius: 0.75rem; }

.wc-r4 .wc-att .wc-att-link { color: var(--wc-act-ink); }

/* a short alert that opens on demand (the blocked-location sentence) */
.wc-r4 .wc-att .wc-att-geo { display: block; padding: 0.25rem 0.625rem; font-size: var(--wc-fs-second); }
.wc-r4 .wc-att .wc-att-geo > summary { cursor: pointer; font-weight: 600; list-style-position: inside; }
.wc-r4 .wc-att .wc-att-geo > span { display: block; margin-block-start: 0.25rem; font-weight: 400; }
.wc-r4 .wc-att .wc-att-geo[x-cloak] { display: none; }

/* «خدماتي اليومية» keeps its own block below (tested, owner-ruled); beside the
   attendance card it only becomes quieter — no heading row, tighter cards.
   These rules win by SPECIFICITY (one more class), not by source order. */
.wc-services .wc-daily > .wc-section-title {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.wc-services .wc-daily { block-size: 100%; }
.wc-services .wc-daily .wc-daily-cards { block-size: 100%; }

.wc-services .wc-daily .wc-daily-card,
.wc-services .wc-daily .wc-daily-card.state-in,
.wc-services .wc-daily .wc-daily-card.state-out {
    border-color: var(--wc-line);
    border-inline-start: 1px solid var(--wc-line);
    border-radius: var(--wc-radius);
}

.wc-services .wc-daily .wc-daily-num { color: var(--wc-navy); }

.wc-services .wc-daily .wc-daily-btn { color: var(--wc-act-ink); border-color: var(--wc-line); background: var(--wc-card); }
.wc-services .wc-daily .wc-daily-btn.is-primary { color: var(--wc-act-ink); background: var(--wc-act-soft); border-color: var(--wc-act); }

/* «checked in» reads the same on both cards of the strip */
.wc-services .wc-daily .wc-daily-card.state-in .wc-daily-state { background: var(--wc-ok-soft); color: var(--wc-ok-ink); }

/* ── density: the list is the page ──────────────────────────────────
   The reference starts its first task row under ~470px. Everything above
   the list is therefore ONE low band each — a two-line title, 72px figures,
   a ~76px attendance/services strip — so a 1366×768 laptop still opens on
   the tasks and their actions. From a tablet up; a phone keeps the phone
   reference (and the daily-services ruling) untouched. */
@media (min-width: 768px) {
    .wc-r4 { gap: 0.75rem; margin-block-start: -0.5rem; margin-inline: -0.5rem; max-inline-size: none; }

    /* title, then ONE line: welcome · date */
    .wc-r4 .wc-head-text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.5rem; row-gap: 0; }
    .wc-r4 .wc-title { flex: 1 1 100%; font-size: var(--wc-fs-title); line-height: 1.35; font-weight: 700; }
    .wc-r4 .wc-welcome { margin: 0; font-size: var(--wc-fs-second); }
    .wc-r4 .wc-date { margin: 0; font-size: var(--wc-fs-second); }
    .wc-r4 .wc-date::before { content: "·"; margin-inline-end: 0.5rem; }
    .wc-r4 .wc-scope-chip { min-block-size: 2.875rem; font-size: var(--wc-fs-body); }
    .wc-r4 .wc-scope-chip .wc-ico { inline-size: 1.375rem; block-size: 1.375rem; }
    .wc-r4 .wc-add-btn { min-block-size: 3rem; padding-inline: 1.5rem; font-size: var(--wc-fs-body); border-radius: 0.5rem; }

    /* the four figures — the reference's 78px tile: a 16px label over a 28px figure, a 44px icon tile */
    .wc-r4 .wc-brief-stat { padding: 0.625rem 1.125rem; min-block-size: 4.875rem; }
    .wc-r4 .wc-brief-icon { inline-size: 2.75rem; block-size: 2.75rem; border-radius: 0.5rem; }
    .wc-r4 .wc-brief-icon .wc-ico { inline-size: 1.5rem; block-size: 1.5rem; }
    .wc-r4 .wc-brief-label { font-size: var(--wc-fs-body); font-weight: 500; line-height: 1.3; }
    .wc-r4 .wc-brief-num { font-size: var(--wc-fs-figure); line-height: 1.2; font-weight: 700; }
    .wc-r4 .wc-brief-sub { font-size: var(--wc-fs-badge); line-height: 1.2; }
    /* the figure and what qualifies it share ONE line — a fourth tile is never taller than the rest */
    .wc-r4 .wc-brief-text { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 0.5rem; row-gap: 0; }
    .wc-r4 .wc-brief-label { grid-column: 1 / -1; }

    /* attendance: title · link / shift · state / facts — the action beside them.
       The card's own box is already flat here, so its children join ONE grid. */
    .wc-r4 .wc-services > .wc-att {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-auto-rows: min-content;
        align-content: center;
        align-items: center;
        column-gap: 0.75rem;
        row-gap: 0.125rem;
        padding: 0.5rem 0.875rem;
    }

    /* title · state · link  /  shift + hours · the action  /  facts */
    .wc-r4 .wc-services > .wc-att > .wc-att-card,
    .wc-r4 .wc-services .wc-att .wc-att-head { display: contents; }
    .wc-r4 .wc-services .wc-att > .wc-section-title { grid-column: 1; grid-row: 1; margin: 0; font-size: var(--wc-fs-section); font-weight: 700; }
    .wc-r4 .wc-services .wc-att .wc-att-state { grid-column: 2; grid-row: 1; justify-self: start; font-size: var(--wc-fs-badge); font-weight: 600; padding: 0.125rem 0.75rem; border-radius: 0.375rem; white-space: nowrap; }
    .wc-r4 .wc-services .wc-att .wc-att-link { grid-column: 3; grid-row: 1; justify-self: end; font-size: var(--wc-fs-second); white-space: nowrap; }
    .wc-r4 .wc-services .wc-att .wc-att-shift { grid-column: 1 / span 2; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 0.625rem; }
    .wc-r4 .wc-services .wc-att .wc-att-facts { grid-column: 1 / span 2; grid-row: 3; gap: 0 0.875rem; }
    .wc-r4 .wc-services .wc-att .wc-att-shift-name { font-size: var(--wc-fs-body); font-weight: 700; }
    .wc-r4 .wc-services .wc-att .wc-att-shift-time { font-size: var(--wc-fs-body); color: var(--wc-navy); }
    .wc-r4 .wc-services .wc-att .wc-att-fact dt, .wc-r4 .wc-services .wc-att .wc-att-fact dd { font-size: var(--wc-fs-second); }

    .wc-r4 .wc-services .wc-att .wc-att-btn {
        grid-column: 3;
        grid-row: 2 / span 2;
        align-self: center;
        inline-size: auto;
        min-inline-size: 10.75rem;
        min-block-size: 2.75rem;
        padding-block: 0.375rem;
        font-size: var(--wc-fs-body);
        font-weight: 700;
        border-radius: 0.5rem;
    }

    /* anything the day has to SAY (a note, the server's answer, a blocked location) takes its own full row */
    .wc-r4 .wc-services .wc-att .wc-att-note,
    .wc-r4 .wc-services .wc-att .wc-att-msg { grid-column: 1 / -1; padding: 0.25rem 0.625rem; font-size: var(--wc-fs-second); }

    /* «بصمتي» / «طلباتي»: name · state, facts under, the buttons beside them */
    .wc-r4 .wc-services .wc-daily .wc-daily-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
    .wc-r4 .wc-services .wc-daily .wc-daily-cards:has(> .wc-daily-card:only-child) { grid-template-columns: minmax(0, 1fr); }

    /* name · state, then the buttons on the SAME line when they fit and under it
       when they do not (a long English label) — never on top of the name */
    .wc-r4 .wc-services .wc-daily .wc-daily-card {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        align-content: center;
        gap: 0.25rem 0.625rem;
        padding: 0.5rem 0.75rem;
    }

    .wc-r4 .wc-services .wc-daily .wc-daily-head { flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; min-inline-size: 0; }
    .wc-r4 .wc-services .wc-daily .wc-daily-actions { flex: 0 0 auto; order: 2; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0.25rem; margin: 0; }
    .wc-r4 .wc-services .wc-daily .wc-daily-facts { flex: 1 1 100%; order: 3; gap: 0 0.75rem; }
    .wc-r4 .wc-services .wc-daily .wc-daily-name { font-size: var(--wc-fs-body); font-weight: 700; }
    .wc-r4 .wc-services .wc-daily .wc-daily-state, .wc-r4 .wc-services .wc-daily .wc-daily-count { font-size: var(--wc-fs-badge); white-space: nowrap; }
    .wc-r4 .wc-services .wc-daily .wc-daily-num { font-size: var(--wc-fs-body); font-weight: 700; }
    .wc-r4 .wc-services .wc-daily .wc-daily-fact dt, .wc-r4 .wc-services .wc-daily .wc-daily-fact dd { font-size: var(--wc-fs-second); }
    .wc-r4 .wc-services .wc-daily .wc-daily-btn { flex: 0 0 auto; min-block-size: 1.875rem; padding: 0.125rem 0.75rem; font-size: var(--wc-fs-body); border-radius: 0.375rem; white-space: nowrap; text-align: center; }

    /* the attendance card beside it already says the shift — «بصمتي» stays short */
    .wc-r4 .wc-services:has(> .wc-att) .wc-daily .wc-daily-fact:has(> .wc-daily-shift) { display: none; }

    /* the list's own chrome: search row · sections · column names — 124px, not 150 */
    .wc-r4 .wc-toolbar { padding: 0.4375rem 0.75rem; gap: 0.625rem; }
    .wc-r4 .wc-toolbar .wc-search, .wc-r4 .wc-toolbar > .wc-filter-select, .wc-r4 .wc-toolbar .wc-density, .wc-r4 .wc-toolbar .wc-filter-more { min-block-size: 2.375rem; block-size: 2.375rem; }
    .wc-r4 .wc-tabs { padding: 0 0.75rem 0.375rem; }
    .wc-r4 .wc-tab { min-block-size: 1.875rem; padding-block: 0; font-size: var(--wc-fs-body); }
}

@media (min-width: 768px) {
    /* A desktop or a tablet reads: title → the four figures → attendance &
       services → the list (the R4 reference). A phone keeps the source order —
       attendance and services first (the phone reference, and the
       daily-services ruling) — so only the VISUAL order moves here; nothing is
       duplicated. */
    .wc-r4 > .wc-head, .wc-r4 > .wc-notice, .wc-r4 > .wc-health, .wc-r4 > .wc-member-banner { order: -2; }
    .wc-r4 > .wc-brief { order: -1; }

    /* the title block gives way before the scopes and «إضافة مهمة» wrap under it */
    .wc-r4 .wc-head { flex-wrap: nowrap; }
    .wc-r4 .wc-head-text { flex: 1 1 12rem; min-inline-size: 0; }
    .wc-r4 .wc-head-side { flex: 0 0 auto; }
}

/* The strip is attendance BESIDE the services only when the CONTENT is wide
   enough for both — the panel's sidebar takes ~19rem of a desktop viewport. */
@media (min-width: 1240px) {
    .wc-services { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .wc-services:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1440px) {
    .wc-services { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* a WIDE attendance card — alone on its row, or on a wide desktop — reads on
   ONE line: shift · facts · action (the reference's strip) */
@media (min-width: 768px) and (max-width: 1239.98px), (min-width: 1440px) {
    .wc-r4 .wc-services .wc-att .wc-att-shift { grid-column: 1; grid-row: 2; }
    .wc-r4 .wc-services .wc-att .wc-att-facts { grid-column: 2; grid-row: 2; }
    .wc-r4 .wc-services .wc-att .wc-att-btn { grid-column: 3; grid-row: 2; }
}

/* a narrow content column: smaller scope chips, and the toolbar keeps ONE row */
@media (min-width: 768px) and (max-width: 1239.98px) {
    .wc-r4 .wc-scope-chip { padding-inline: 0.75rem; gap: 0.375rem; font-size: var(--wc-fs-body); }
    .wc-r4 .wc-add-btn { padding-inline: 0.875rem; }
    .wc-r4 .wc-brief-text { grid-template-columns: minmax(0, 1fr); }
    .wc-r4 .wc-brief-sub { white-space: normal; }
    .wc-r4 .wc-search { flex: 1 1 8rem; min-inline-size: 8rem; }
    .wc-r4 .wc-toolbar > .wc-filter-select { max-inline-size: 9.5rem; }
}

/* ── the board: list + panel on demand ──────────────────────────── */
.wc-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; align-items: start; }

.wc-list {
    background: var(--wc-card);
    border: 1px solid var(--wc-line);
    border-radius: var(--wc-radius);
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    overflow: hidden;
    scroll-margin-block-start: 5rem;
}

.wc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; }

.wc-search {
    flex: 1 1 14rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.5rem;
    padding-inline: 0.75rem;
    border: 1px solid var(--wc-line);
    border-radius: 0.75rem;
    background: var(--wc-card);
    color: var(--wc-muted);
    min-inline-size: 0;
}

.wc-search:focus-within { border-color: var(--wc-act); }

.wc-r4 .wc-search .wc-filter-q {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: var(--wc-fs-body);
    color: var(--wc-text);
    outline: none;
    box-shadow: none;
}

.wc-r4 .wc-filter-select {
    min-block-size: 2.5rem;
    padding-block: 0.25rem;
    padding-inline: 0.75rem 2rem;
    font-size: var(--wc-fs-body);
    font-weight: 600;
    color: var(--wc-navy);
    background-color: var(--wc-card);
    border-color: var(--wc-line);
    border-radius: 0.75rem;
    max-inline-size: 100%;
}

[dir="rtl"] .wc-r4 .wc-filter-select { background-position: left 0.5rem center; }

.wc-density { display: inline-flex; border: 1px solid var(--wc-line); border-radius: 0.75rem; overflow: hidden; background: var(--wc-tint); }

.wc-density-btn {
    min-block-size: 2.5rem;
    padding: 0.25rem 1rem;
    font-size: var(--wc-fs-body);
    font-weight: 700;
    color: var(--wc-navy);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.wc-density-btn.is-active { background: var(--wc-act); color: var(--wc-on-act); border-radius: var(--wc-radius-ctl); }

.wc-more-filters { position: relative; }
.wc-more-filters > summary { list-style: none; }
.wc-more-filters > summary::-webkit-details-marker { display: none; }

.wc-filter-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border: 1px solid var(--wc-line);
    border-radius: 0.75rem;
    color: var(--wc-navy);
    cursor: pointer;
}

.wc-more-filters-body {
    position: absolute;
    inset-block-start: calc(100% + 0.375rem);
    inset-inline-end: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-inline-size: 12rem;
    padding: 0.625rem;
    background: var(--ho-surface-raised);
    border: 1px solid var(--wc-line);
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.12);
}

.wc-tabs {
    display: flex;
    gap: 0.375rem;
    padding: 0 0.75rem 0.5rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.wc-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.25rem;
    padding: 0.25rem 0.875rem;
    border: 1px solid var(--wc-line);
    border-radius: 0.625rem;
    background: var(--wc-card);
    color: var(--wc-navy);
    font-size: var(--wc-fs-body);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.wc-tab:hover { background: var(--wc-tint); }
.wc-tab.is-active { border-color: var(--wc-act); background: var(--wc-act-soft); color: var(--wc-act-ink); font-weight: 700; }

.wc-tab-count {
    min-inline-size: 1.5rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    background: var(--wc-tint);
    color: var(--wc-navy);
    font-size: var(--wc-fs-badge);
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.wc-tab.is-active .wc-tab-count { background: var(--wc-card); color: var(--wc-act-ink); }

.wc-filter-state { display: flex; align-items: center; gap: 0.75rem; padding: 0 0.875rem 0.5rem; }
.wc-r4 .wc-lane-note { margin: 0; padding: 0 0.875rem 0.5rem; }
.wc-r4 .wc-filter-clear { color: var(--wc-act-ink); font-weight: 700; }

/* ── the table ──────────────────────────────────────────────────── */
.wc-grid-table { display: flex; flex-direction: column; border-block-start: 1px solid var(--wc-line); }

.wc-tr {
    display: grid;
    grid-template-columns: minmax(0, 2.5fr) minmax(0, 1.55fr) minmax(5.5rem, 0.9fr) minmax(7.5rem, 1.15fr) minmax(6.25rem, 0.8fr);
    align-items: center;
    column-gap: 0.75rem;
    padding: var(--wc-row-pad) 1rem;
    min-block-size: 3.125rem;
    border-block-end: 1px solid var(--wc-line);
    min-inline-size: 0;
}

.wc-thead { min-block-size: 2.0625rem; padding-block: 0.25rem; font-size: var(--wc-fs-body); font-weight: 700; color: var(--wc-navy); background: var(--wc-tint); }
.wc-tr:not(.wc-thead):hover { background: color-mix(in srgb, var(--wc-tint) 55%, var(--wc-card)); }
.wc-tr.is-selected { background: var(--wc-tint); box-shadow: inset 3px 0 0 var(--wc-act); }
[dir="rtl"] .wc-tr.is-selected { box-shadow: inset -3px 0 0 var(--wc-act); }

.wc-td { display: flex; flex-direction: column; gap: 0.0625rem; min-inline-size: 0; }
.wc-task-line { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-inline-size: 0; }

.wc-task-title {
    font-size: var(--wc-fs-task);
    font-weight: 600;
    line-height: 1.45;
    color: var(--wc-navy);
    overflow-wrap: anywhere;
}

a.wc-task-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.wc-task-next { font-size: var(--wc-fs-second); color: var(--wc-muted); line-height: 1.3; overflow-wrap: anywhere; }
.wc-task-owner, .wc-task-draft { font-size: var(--wc-fs-badge); color: var(--wc-muted); }
.wc-task-draft { color: var(--wc-act-ink); font-weight: 700; }

.wc-new {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    background: var(--wc-accent-soft);
    color: var(--ho-info-ink);
    font-size: var(--wc-fs-badge);
    font-weight: 700;
    white-space: nowrap;
}

.wc-new-dot { inline-size: 0.4375rem; block-size: 0.4375rem; border-radius: 999px; background: var(--wc-accent); }
.wc-new-dot.is-ok { background: var(--wc-ok); }

.wc-td-source { flex-direction: row; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.wc-chip {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.75rem;
    padding: 0.0625rem 0.75rem;
    border-radius: 0.375rem;
    background: var(--wc-tint);
    border: 1px solid var(--wc-line);
    color: var(--wc-navy);
    font-size: var(--wc-fs-badge);
    font-weight: 500;
    white-space: nowrap;
}

a.wc-chip:hover { border-color: var(--wc-navy); }
.wc-facts { display: flex; flex-direction: column; gap: 0; min-inline-size: 0; flex: 1 1 6rem; }
.wc-facts-rest { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.3125rem; min-inline-size: 0; }
.wc-facts-sep { color: var(--wc-muted); }
.wc-fact { font-size: var(--wc-fs-second); color: var(--wc-muted); line-height: 1.3; overflow-wrap: anywhere; }
.wc-facts .wc-fact:first-child { color: var(--wc-navy); font-weight: 600; font-size: var(--wc-fs-second); }
a.wc-fact { text-decoration: underline; text-decoration-color: var(--wc-line); text-underline-offset: 3px; }
a.wc-fact:hover { text-decoration-color: currentColor; }

.wc-r4 .wc-due { display: inline-flex; align-items: center; gap: 0.3125rem; font-size: var(--wc-fs-body); font-weight: 600; color: var(--wc-navy); white-space: normal; }
.wc-r4 .wc-due.is-danger { color: var(--wc-danger-ink); font-weight: 700; }
.wc-r4 .wc-due.wc-muted, .wc-r4 .wc-due.wc-waiting { font-size: var(--wc-fs-body); font-weight: 500; color: var(--wc-muted); }
.wc-r4 .wc-due.wc-waiting.is-danger { color: var(--wc-danger-ink); font-weight: 700; }
.wc-due-sub { font-size: var(--wc-fs-badge); font-weight: 500; line-height: 1.25; }
.wc-due-sub.is-danger { color: var(--wc-danger-ink); }

.wc-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-block-size: 1.875rem;
    padding: 0.125rem 0.875rem;
    border-radius: 0.375rem;
    font-size: var(--wc-fs-badge);
    font-weight: 600;
    text-align: center;
    background: var(--wc-soft);
    color: var(--wc-muted);
}

.wc-status.tone-decide { background: var(--wc-act-soft); color: var(--wc-act-ink); }
.wc-status.tone-progress { background: var(--wc-accent-soft); color: var(--ho-info-ink); }
.wc-status.tone-danger, .wc-status.tone-warn { background: var(--wc-danger-soft); color: var(--wc-danger-ink); }
.wc-status.tone-warn { background: var(--wc-warn-soft); color: var(--wc-warn-ink); }
.wc-status.tone-ok, .wc-status.tone-fresh { background: var(--wc-ok-soft); color: var(--wc-ok-ink); }
.wc-status-sub { font-size: var(--wc-fs-badge); color: var(--wc-muted); line-height: 1.35; }

.wc-td-action { align-items: stretch; }

.wc-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.125rem;
    padding: 0.125rem 0.75rem;
    border: 1.5px solid var(--wc-act);
    border-radius: 0.375rem;
    background: var(--wc-card);
    color: var(--wc-act-ink);
    font-size: var(--wc-fs-body);
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s;
}

.wc-act:hover { background: var(--wc-act-soft); }
.wc-act:disabled { opacity: 0.6; cursor: progress; }
.wc-tr.is-selected .wc-act { background: var(--wc-act-soft); }

.wc-r4 .wc-no-results { padding: 1.5rem 1rem; font-size: var(--wc-fs-body); }
.wc-done-title { padding: 0.625rem 0.875rem; font-size: var(--wc-fs-section); font-weight: 700; color: var(--wc-navy); border-block-end: 1px solid var(--wc-line); }
.wc-r4 .wc-rows { border: 0; border-radius: 0; border-block-start: 1px solid var(--wc-line); }
.wc-r4 a.wc-row-title { color: var(--wc-navy); }
.wc-r4 a.wc-row-title:hover { text-decoration: underline; }

.wc-pager { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.625rem 0.875rem; }
.wc-pager-nav { display: inline-flex; gap: 0.375rem; }

.wc-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.25rem;
    min-block-size: 2.25rem;
    padding: 0 0.5rem;
    border: 1px solid var(--wc-line);
    border-radius: 0.5rem;
    background: var(--wc-card);
    color: var(--wc-navy);
    font-size: var(--wc-fs-body);
    font-weight: 600;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.wc-page-btn.is-active { border-color: var(--wc-act); color: var(--wc-act-ink); box-shadow: inset 0 0 0 1px var(--wc-act); }
.wc-page-btn:disabled { opacity: 0.45; cursor: default; }
.wc-pager-count { font-size: var(--wc-fs-body); font-weight: 600; color: var(--wc-navy); font-variant-numeric: tabular-nums; }

/* ── the panel ──────────────────────────────────────────────────── */
.wc-panel {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1rem;
    background: var(--wc-card);
    border: 1px solid var(--wc-line);
    border-radius: var(--wc-radius);
    min-inline-size: 0;
}

/* the panel scrolls; its parts never squeeze (an overflow-hidden flex child would otherwise shrink and clip its rows) */
.wc-panel > * { flex-shrink: 0; }

/* A value keeps its OWN reading direction (an Arabic name in the English
   screen) but lines up with the screen — never jumps to the far edge. */
.wc-panel dd[dir="auto"], .wc-panel td[dir="auto"], .wc-panel .wc-qa-title[dir="auto"], .wc-panel .wc-attachment-name[dir="auto"], .wc-panel .wc-thread-text[dir="auto"] { text-align: -webkit-match-parent; text-align: match-parent; }

.wc-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.wc-r4 .wc-qa-title { font-size: var(--wc-fs-section); font-weight: 700; color: var(--wc-navy); line-height: 1.4; }
.wc-r4 .wc-qa-context { font-size: var(--wc-fs-second); }

.wc-r4 .wc-qa-close {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border: 0;
    background: transparent;
    color: var(--wc-navy);
    font-size: var(--wc-fs-body);
}

.wc-r4 .wc-qa-close:hover { background: var(--wc-tint); }

.wc-facts-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0.75rem; margin: 0; }
.wc-fact-row { display: flex; flex-direction: column; gap: 0.0625rem; min-inline-size: 0; }
.wc-fact-row dt { font-size: var(--wc-fs-second); color: var(--wc-muted); }
.wc-fact-row dd { margin: 0; font-size: var(--wc-fs-body); font-weight: 700; color: var(--wc-navy); overflow-wrap: anywhere; }
.wc-fact-row dd a { text-decoration: underline; text-underline-offset: 3px; }
.wc-fact-row.is-amount { grid-column: 1 / -1; }
.wc-fact-row.is-amount dd { font-size: var(--wc-fs-figure); line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; }
.wc-panel-stage { align-self: flex-start; }

.wc-body { display: flex; flex-direction: column; gap: 0.25rem; }

.wc-body-text {
    max-block-size: 16rem;
    overflow-y: auto;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--wc-line);
    border-radius: 0.625rem;
    background: var(--wc-tint);
    font-size: var(--wc-fs-body);
    line-height: 1.7;
    color: var(--wc-text);
    overflow-wrap: anywhere;
}

.wc-panel-section { border: 1px solid var(--wc-line); border-radius: 0.625rem; overflow: hidden; }

.wc-panel-section > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.5rem;
    padding: 0.25rem 0.75rem;
    font-size: var(--wc-fs-body);
    font-weight: 700;
    color: var(--ho-info-ink);
    cursor: pointer;
    list-style: none;
}

.wc-panel-section > summary::-webkit-details-marker { display: none; }
.wc-panel-section .wc-table-wrap { border: 0; border-radius: 0; border-block-start: 1px solid var(--wc-line); }
.wc-panel-table td, .wc-panel-table th { white-space: normal; padding: 0.4375rem 0.625rem; font-size: var(--wc-fs-second); }
.wc-panel-section .wc-qa-hint { padding: 0.5rem 0.75rem; }

.wc-attachments { display: flex; flex-direction: column; gap: 0.375rem; }

.wc-attachment {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.75rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--wc-line);
    border-radius: 0.625rem;
    color: var(--wc-navy);
}

.wc-attachment-name { flex: 1; min-inline-size: 0; font-size: var(--wc-fs-body); font-weight: 600; overflow-wrap: anywhere; }

.wc-attachment-act {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-block-size: 2.25rem;
    padding: 0 0.375rem;
    border: 0;
    background: transparent;
    color: var(--ho-info-ink);
    font-size: var(--wc-fs-body);
    font-weight: 700;
    cursor: pointer;
}

.wc-file-ready { display: inline-flex; align-items: center; gap: 0.3125rem; font-size: var(--wc-fs-badge); font-weight: 700; color: var(--wc-ok-ink); }
.wc-file-state { font-size: var(--wc-fs-second); color: var(--wc-muted); }

.wc-thread { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0.625rem 0.75rem; list-style: none; border-block-start: 1px solid var(--wc-line); max-block-size: 14rem; overflow-y: auto; }
.wc-thread li { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.4375rem 0.625rem; border-radius: 0.5rem; background: var(--wc-tint); }
.wc-thread li.is-mine { background: var(--wc-act-soft); }
.wc-thread-who { font-size: var(--wc-fs-badge); color: var(--wc-muted); }
.wc-thread-text { font-size: var(--wc-fs-second); color: var(--wc-text); overflow-wrap: anywhere; white-space: pre-line; }

.wc-blocked {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem;
    border-radius: 0.625rem;
    background: var(--wc-tint);
    border: 1px solid var(--wc-line);
    color: var(--wc-navy);
}

.wc-blocked > span { display: flex; flex-direction: column; gap: 0.125rem; font-size: var(--wc-fs-second); }
.wc-blocked strong { font-size: var(--wc-fs-body); }

.wc-verbs { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.wc-verb {
    flex: 1 1 auto;
    min-block-size: 2.5rem;
    padding: 0.25rem 0.875rem;
    border: 1px solid var(--wc-line);
    border-radius: 0.625rem;
    background: var(--wc-card);
    color: var(--wc-navy);
    font-size: var(--wc-fs-body);
    font-weight: 700;
    cursor: pointer;
}

.wc-verb:hover:not(:disabled) { background: var(--wc-tint); }
.wc-verb.is-danger { color: var(--wc-danger-ink); }
.wc-verb.is-active { background: var(--wc-act); border-color: var(--wc-act); color: var(--wc-on-act); }
.wc-verb:disabled { background: var(--wc-soft); color: var(--wc-muted); cursor: not-allowed; }
.wc-verb-why { display: flex; align-items: flex-start; gap: 0.375rem; font-size: var(--wc-fs-second); color: var(--wc-muted); }

.wc-r4 .wc-qa-label { font-size: var(--wc-fs-body); font-weight: 600; color: var(--wc-muted); }

.wc-r4 .wc-qa-input {
    min-block-size: 2.75rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--wc-fs-body);
    background: var(--ho-brand-inset);
    border-color: var(--wc-line);
    border-radius: 0.625rem;
}

.wc-r4 .wc-qa-input:focus { border-color: var(--wc-act); }
.wc-r4 textarea.wc-qa-input { resize: vertical; min-block-size: 5rem; line-height: 1.6; }
.wc-r4 .wc-qa-error { padding: 0.625rem 0.75rem; font-size: var(--wc-fs-body); color: var(--wc-danger-ink); border-radius: 0.625rem; }
.wc-r4 .wc-qa-hint { font-size: var(--wc-fs-second); line-height: 1.5; }
.wc-confirm-note { font-size: var(--wc-fs-body); color: var(--wc-warn-ink); background: var(--wc-warn-soft); padding: 0.5rem 0.625rem; border-radius: 0.5rem; line-height: 1.5; }
.wc-check { display: flex; align-items: flex-start; gap: 0.5rem; min-block-size: 2.75rem; font-size: var(--wc-fs-body); color: var(--wc-navy); cursor: pointer; }
.wc-check input { inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.125rem; accent-color: var(--wc-act); }

.wc-draft-line { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: var(--wc-fs-second); color: var(--wc-muted); }
.wc-draft-line.is-bad { color: var(--wc-danger-ink); justify-content: flex-start; }
.wc-draft-saved { display: inline-flex; align-items: center; gap: 0.3125rem; }

.wc-draft-discard {
    min-block-size: 2.25rem;
    padding: 0 0.375rem;
    border: 0;
    background: transparent;
    color: var(--wc-danger-ink);
    font-size: var(--wc-fs-second);
    font-weight: 700;
    cursor: pointer;
}

.wc-draft-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.625rem;
    border: 1px solid var(--wc-accent);
    background: var(--wc-accent-soft);
    color: var(--ho-info-ink);
}

.wc-draft-banner > span { display: flex; flex-direction: column; font-size: var(--wc-fs-second); }
.wc-draft-banner strong { font-size: var(--wc-fs-second); }
.wc-draft-banner.is-warn { border-color: var(--wc-warn); background: var(--wc-warn-soft); color: var(--wc-warn-ink); }

.wc-panel-cta { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.wc-btn {
    flex: 1 1 8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.875rem;
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--wc-navy);
    border-radius: 0.75rem;
    background: var(--wc-card);
    color: var(--wc-navy);
    font-size: var(--wc-fs-body);
    font-weight: 700;
    cursor: pointer;
}

.wc-btn.is-primary:hover:not(:disabled) { background: var(--wc-act-ink); border-color: var(--wc-act-ink); }
.wc-btn.is-danger { border-color: var(--wc-danger); color: var(--wc-danger-ink); background: var(--wc-danger-soft); }
.wc-btn:disabled { opacity: 0.6; cursor: progress; }

.wc-original { display: inline-flex; align-items: center; gap: 0.375rem; align-self: flex-start; min-block-size: 2.25rem; font-size: var(--wc-fs-body); font-weight: 700; color: var(--ho-info-ink); }
.wc-original:hover { text-decoration: underline; }

.wc-done { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; text-align: center; }

.wc-done-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 4rem;
    block-size: 4rem;
    border-radius: 999px;
    background: var(--wc-ok-soft);
    color: var(--wc-ok-ink);
}

.wc-done-mark .wc-ico { inline-size: 2rem; block-size: 2rem; }
.wc-done-msg { inline-size: 100%; padding: 0.625rem; border-radius: 0.625rem; background: var(--wc-ok-soft); color: var(--wc-ok-ink); font-size: var(--wc-fs-body); font-weight: 700; }
.wc-done-detail { font-size: var(--wc-fs-body); font-weight: 700; color: var(--wc-warn-ink); }
.wc-done-card { display: flex; flex-direction: column; margin: 0; border: 1px solid var(--wc-line); border-radius: 0.625rem; }
.wc-done-card > div { display: flex; flex-direction: column; gap: 0.0625rem; padding: 0.625rem 0.75rem; }
.wc-done-card > div + div { border-block-start: 1px solid var(--wc-line); }
.wc-done-card dt { font-size: var(--wc-fs-second); color: var(--wc-muted); }
.wc-done-card dd { margin: 0; font-size: var(--wc-fs-body); font-weight: 700; color: var(--wc-navy); overflow-wrap: anywhere; }
.wc-done-end { font-size: var(--wc-fs-body); font-weight: 700; color: var(--wc-muted); text-align: center; }

/* On a desktop the panel sits beside the list — no veil, the page stays live. */
.wc-r4 .wc-qa-overlay { display: none; }

@media (min-width: 1100px) {
    .wc-r4.has-panel .wc-board { grid-template-columns: minmax(0, 1fr) clamp(18.75rem, 23.6vw, 23.375rem); gap: 1rem; }

    .wc-panel {
        position: sticky;
        inset-block-start: 5rem;
        max-block-size: calc(100vh - 6rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* beside the panel the row keeps the entity and lets the rest wait for the
       panel (it is all there) — a row never grows to three lines of context */
    /* beside the editor a row stays the reference's 50px: the source chip, and who /
       how much on two short lines beside it — cut with an ellipsis, never wrapped */
    .wc-r4.has-panel .wc-td-source { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0.5rem; }
    .wc-r4.has-panel .wc-facts { flex: 1 1 0; min-inline-size: 0; }
    .wc-r4.has-panel .wc-facts .wc-fact:first-child,
    .wc-r4.has-panel .wc-facts-rest { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
    .wc-r4.has-panel .wc-facts-rest > * { display: inline; font-size: var(--wc-fs-second); }

    /* the list narrows beside the panel: the source column gives way first */
    .wc-r4.has-panel .wc-tr { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1.2fr) minmax(5rem, 0.85fr) minmax(6.75rem, 1.05fr) minmax(5.75rem, 0.8fr); column-gap: 0.5rem; }
}

/* Below that the panel is a full panel OVER the list — still the Work Center:
   closing it returns to the same search, page and scroll position. */
@media (max-width: 1099.98px) {
    .wc-r4 .wc-qa-overlay { display: block; position: fixed; inset: 0; z-index: 40; background: rgb(0 0 0 / 0.4); }

    .wc-panel {
        position: fixed;
        inset-block: 0;
        inset-inline-end: 0;
        z-index: 41;
        inline-size: min(30rem, 100vw);
        border-radius: 0;
        border-block: 0;
        border-inline-end: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-block-end: calc(1rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ── signals (attention · performance · insights · my HR) ───────── */
.wc-signals { border: 1px solid var(--wc-line); border-radius: var(--wc-radius); background: var(--wc-card); }

.wc-signals-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.75rem;
    padding: 0.375rem 0.875rem;
    font-size: var(--wc-fs-section);
    font-weight: 700;
    color: var(--wc-navy);
    cursor: pointer;
}

.wc-signals[open] > .wc-signals-summary { border-block-end: 1px solid var(--wc-line); }
.wc-signals > .wc-section, .wc-signals-grid { padding: 0.75rem 0.875rem; }
.wc-signals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.75rem; }
.wc-signals-grid:empty { display: none; }
.wc-r4 .wc-attn { border-color: var(--wc-line); }

/* ── attachment preview, inside the page ────────────────────────── */
.wc-preview {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: var(--ho-surface-raised);
}

.wc-preview-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.875rem; border-block-end: 1px solid var(--wc-line); }
.wc-preview-name { flex: 1; min-inline-size: 0; font-weight: 700; color: var(--wc-navy); overflow-wrap: anywhere; }
.wc-preview-link { font-size: var(--wc-fs-body); font-weight: 700; color: var(--ho-info-ink); }
.wc-preview-frame { flex: 1; inline-size: 100%; border: 0; background: var(--wc-soft); }
.wc-r4 [x-cloak] { display: none !important; }

/* ── tablet ─────────────────────────────────────────────────────── */
@media (max-width: 1023.98px) {
    .wc-r4 .wc-brief { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
    .wc-r4 .wc-brief-icon { display: none; }
    .wc-tr { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.3fr) minmax(5rem, 0.9fr) minmax(6.5rem, 1fr) minmax(5.5rem, 0.8fr); column-gap: 0.5rem; }
}

/* ── phone: a task CARD, not a squeezed table ───────────────────── */
@media (max-width: 767.98px) {
    .wc-r4 { gap: 0.625rem; }
    .wc-r4 .wc-head { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .wc-r4 .wc-head-text { flex: 1 1 auto; min-inline-size: 0; }
    .wc-r4 .wc-title { font-size: var(--wc-fs-title); font-weight: 700; }
    .wc-r4 .wc-welcome, .wc-r4 .wc-date { display: none; }
    .wc-r4 .wc-head-side { display: contents; }
    .wc-r4 .wc-add-btn { order: 2; min-block-size: 2.75rem; padding-inline: 1rem; }
    .wc-r4 .wc-scopes { order: 3; inline-size: 100%; display: flex; }
    .wc-r4 .wc-scope-chip { flex: 1 1 0; justify-content: center; padding-inline: 0.25rem; font-size: var(--wc-fs-body); gap: 0.3125rem; }

    .wc-r4 .wc-brief { gap: 0; border: 1px solid var(--wc-line); border-radius: var(--wc-radius); background: var(--wc-card); overflow: hidden; }

    .wc-r4 .wc-brief-stat {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.125rem;
        padding: 0.5rem 0.625rem;
        border: 0;
        border-radius: 0;
        border-inline-end: 1px solid var(--wc-line);
        min-block-size: 4rem;
    }

    .wc-r4 .wc-brief-stat:last-child { border-inline-end: 0; }
    .wc-r4 .wc-brief-label-full { display: none; }
    .wc-r4 .wc-brief-label-short { display: inline; }
    .wc-r4 .wc-brief-label { font-size: var(--wc-fs-body); }
    .wc-r4 .wc-brief-num { font-size: var(--wc-fs-figure); font-weight: 700; }
    /* one short row of four figures (the phone reference); what qualifies a figure is said on its rows */
    .wc-r4 .wc-brief-sub { display: none; }

    /* ── attendance, as the approved phone reference draws it ──────────
       title · state  /  shift · hours  /  place | check-in  /  the ONE action.
       The card's flat box lets its children join one grid (as on a desktop);
       nothing of the punch itself — button, keys, Alpine state — is touched. */
    .wc-r4 .wc-services > .wc-att {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-auto-rows: min-content;
        align-items: center;
        column-gap: 0.5rem;
        row-gap: 0.3125rem;
        padding: 0.75rem;
    }

    .wc-r4 .wc-services > .wc-att > .wc-att-card,
    .wc-r4 .wc-services .wc-att .wc-att-head { display: contents; }
    .wc-r4 .wc-services .wc-att > .wc-section-title { grid-column: 1; grid-row: 1; margin: 0; font-size: var(--wc-fs-section); font-weight: 700; }
    .wc-r4 .wc-services .wc-att .wc-att-state { grid-column: 2; grid-row: 1; justify-self: end; font-size: var(--wc-fs-badge); font-weight: 600; padding: 0.125rem 0.625rem; border-radius: 0.375rem; white-space: nowrap; }

    .wc-r4 .wc-services .wc-att .wc-att-shift { grid-column: 1 / -1; grid-row: 2; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 0.5rem; }
    .wc-r4 .wc-services .wc-att .wc-att-shift-name { font-size: var(--wc-fs-body); font-weight: 600; }
    .wc-r4 .wc-services .wc-att .wc-att-shift-time { font-size: var(--wc-fs-body); color: var(--wc-navy); }
    .wc-r4 .wc-services .wc-att .wc-att-shift-name::after { content: "·"; margin-inline-start: 0.5rem; color: var(--wc-muted); font-weight: 400; }

    .wc-r4 .wc-services .wc-att .wc-att-facts { grid-column: 1 / -1; grid-row: 3; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0; }
    .wc-r4 .wc-services .wc-att .wc-att-fact { gap: 0.3125rem; }
    .wc-r4 .wc-services .wc-att .wc-att-fact dt, .wc-r4 .wc-services .wc-att .wc-att-fact dd { font-size: var(--wc-fs-second); }
    .wc-r4 .wc-services .wc-att .wc-att-fact + .wc-att-fact::before { content: "|"; margin-inline: 0.625rem; color: var(--wc-line); }

    .wc-r4 .wc-services .wc-att .wc-att-note,
    .wc-r4 .wc-services .wc-att .wc-att-msg { grid-column: 1 / -1; padding: 0.3125rem 0.625rem; font-size: var(--wc-fs-second); }

    /* a natural button: one 44px row across the card */
    .wc-r4 .wc-services .wc-att .wc-att-btn { grid-column: 1 / -1; min-block-size: 2.75rem; padding-block: 0.375rem; font-size: var(--wc-fs-body); font-weight: 700; border-radius: 0.5rem; }

    /* «بصمتي» is the very next card — its own button opens the same page */
    .wc-r4 .wc-services:has(.wc-daily) .wc-att .wc-att-link { display: none; }

    /* ── «بصمتي» / «طلباتي»: side by side, as tall as what they say ────
       no equal-height stretch and no pushed-down buttons (owner ruling
       2026-09-20); the day's detail is in the attendance card above and the
       balances are one tap away — the reference's two short tiles. */
    .wc-r4 .wc-services .wc-daily .wc-daily-cards { align-items: start; }
    .wc-r4 .wc-services .wc-daily .wc-daily-card { padding: 0.625rem; gap: 0.375rem; }
    .wc-r4 .wc-services .wc-daily .wc-daily-head { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.125rem 0.375rem; }
    .wc-r4 .wc-services .wc-daily .wc-daily-name { font-size: var(--wc-fs-body); font-weight: 700; }
    .wc-r4 .wc-services .wc-daily .wc-daily-state, .wc-r4 .wc-services .wc-daily .wc-daily-count { font-size: var(--wc-fs-badge); padding-inline: 0.375rem; white-space: nowrap; }
    .wc-r4 .wc-services .wc-daily .wc-daily-facts { display: none; }
    .wc-r4 .wc-services .wc-daily .wc-daily-actions { flex-direction: row; flex-wrap: nowrap; gap: 0.375rem; margin-block-start: 0; }
    .wc-r4 .wc-services .wc-daily .wc-daily-btn { flex: 1 1 0; min-inline-size: 0; min-block-size: 2.75rem; padding: 0.25rem; font-size: var(--wc-fs-body); line-height: 1.2; border-radius: 0.5rem; }

    /* the reference's phone order: sections first, then search + ONE funnel.
       Source and sort join the funnel — they open with it and stay in the DOM,
       and an applied filter is always named by the «clear» row under the tabs. */
    .wc-list > .wc-tabs { order: -1; padding: 0.5rem 0.5rem 0; }
    .wc-toolbar { padding: 0.5rem; }
    .wc-search { flex: 1 1 calc(100% - 3.5rem); min-inline-size: 0; min-block-size: 2.75rem; }
    .wc-r4 .wc-search .wc-filter-q { font-size: 1rem; }
    .wc-r4 .wc-toolbar > .wc-filter-select { display: none; order: 3; flex: 1 1 40%; }
    .wc-r4 .wc-toolbar:has(.wc-more-filters[open]) > .wc-filter-select { display: block; }
    .wc-r4 .wc-filter-select { min-block-size: 2.75rem; min-inline-size: 0; font-size: 1rem; }
    .wc-density { display: none; }
    .wc-more-filters { position: static; order: 2; }
    .wc-filter-more { inline-size: 2.75rem; block-size: 2.75rem; }
    .wc-toolbar { position: relative; }
    .wc-more-filters-body { inset-inline: 0.5rem; inset-block-start: 100%; min-inline-size: 0; }
    .wc-tab { min-block-size: 2.75rem; }

    .wc-tr.wc-thead { display: none; }

    .wc-tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.375rem 0.5rem;
        padding: 0.75rem 0.625rem;
    }

    .wc-td-task { order: 1; flex: 1 1 58%; }
    .wc-td-action { order: 2; flex: 0 0 auto; }
    .wc-td-status { order: 3; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
    .wc-td-due { order: 4; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
    .wc-td-source { order: 5; flex: 1 1 100%; }
    .wc-facts { flex-direction: row; flex-wrap: wrap; gap: 0 0.5rem; }
    .wc-task-title { font-size: var(--wc-fs-task); font-weight: 600; }
    .wc-act { min-block-size: 2.75rem; min-inline-size: 5rem; font-size: var(--wc-fs-body); }
    .wc-r4 .wc-due { font-size: var(--wc-fs-body); }
    .wc-page-btn { min-inline-size: 2.75rem; min-block-size: 2.75rem; }
    /* the phone reference: previous · the current page · next — seven numbered
       44px targets do not fit 320px, and a clipped «next» is a dead end */
    .wc-pager-nav .wc-page-btn:not(.is-active):not([aria-label]) { display: none; }

    .wc-panel { inline-size: 100vw; padding: 0.875rem; }
    .wc-facts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wc-panel-cta { position: sticky; inset-block-end: 0; background: var(--wc-card); padding-block: 0.5rem; }
    .wc-verb { min-block-size: 2.75rem; }
    .wc-r4 .wc-qa-close { inline-size: 2.75rem; block-size: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .wc-r4 *, .wc-r4 *::before, .wc-r4 *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ── START-HERE-FINAL §2–§3: the cross-cutting rules of the delivered spec ──
   weights 400/500/600/700 only · controls 14/500 · fields 40px (44 on a
   phone) · panels 12 · controls 8 · badges 6 · icons 20 (16 in a badge, 24 in
   a figure or the scope switch) · rows from 52px · 1px borders, no glow. */
.wc-r4 .wc-act, .wc-r4 .wc-btn, .wc-r4 .wc-verb, .wc-r4 .wc-add-btn, .wc-r4 .wc-tab, .wc-r4 .wc-scope-chip,
.wc-r4 .wc-page-btn, .wc-r4 .wc-density-btn, .wc-r4 .wc-filter-select, .wc-r4 .wc-filter-q, .wc-r4 .wc-qa-input,
.wc-r4 .wc-services .wc-daily .wc-daily-btn, .wc-r4 .wc-services .wc-att .wc-att-btn, .wc-r4 .wc-attachment-act, .wc-r4 .wc-health-retry {
    font-size: var(--wc-fs-body);
    font-weight: 500;
    line-height: 1.5;
    border-radius: var(--wc-radius-ctl);
    box-shadow: none;
}

/* START-HERE §2: a button is 14 / 500 — the fill, not a heavier weight, says which one is primary */
.wc-r4 .wc-task-next, .wc-r4 .wc-fact, .wc-r4 .wc-welcome, .wc-r4 .wc-date, .wc-r4 .wc-qa-context { line-height: 1.45; }
.wc-r4 .wc-search, .wc-r4 .wc-density, .wc-r4 .wc-filter-more { border-radius: var(--wc-radius-ctl); }
.wc-r4 .wc-services .wc-att .wc-att-btn, .wc-r4 .wc-services .wc-att .wc-att-btn.is-in, .wc-r4 .wc-services .wc-att .wc-att-btn.is-out { color: var(--wc-on-act); background: var(--wc-act); }

.wc-r4 .wc-chip, .wc-r4 .wc-status, .wc-r4 .wc-new, .wc-r4 .wc-services .wc-att .wc-att-state, .wc-r4 .wc-services .wc-daily .wc-daily-state { border-radius: var(--wc-radius-badge); font-weight: 500; }
.wc-r4 .wc-list, .wc-r4 .wc-panel, .wc-r4 .wc-brief-stat, .wc-r4 .wc-services > .wc-att, .wc-r4 .wc-services .wc-daily .wc-daily-card, .wc-r4 .wc-signals { border-radius: var(--wc-radius); border-width: 1px; box-shadow: none; }

.wc-r4 .wc-brief-label, .wc-r4 .wc-due, .wc-r4 .wc-thead, .wc-r4 .wc-fact-row dd, .wc-r4 .wc-pager-count { font-size: var(--wc-fs-body); line-height: 1.5; }
.wc-r4 .wc-brief-label, .wc-r4 .wc-due { font-weight: 500; }
.wc-r4 .wc-thead, .wc-r4 .wc-fact-row dd, .wc-r4 .wc-due.is-danger { font-weight: 600; }
/* the editor's amount is a FIGURE (START-HERE §2: 28px / 700 / 1.2) — the body-size rule above must not flatten it */
.wc-r4 .wc-fact-row.is-amount dd { font-size: var(--wc-fs-figure); font-weight: 700; line-height: 1.2; }
.wc-r4 .wc-task-next, .wc-r4 .wc-fact, .wc-r4 .wc-welcome, .wc-r4 .wc-date { font-weight: 400; color: var(--wc-muted); }
.wc-r4 .wc-facts .wc-fact:first-child { font-size: var(--wc-fs-second); font-weight: 500; color: var(--wc-navy); }
.wc-r4 .wc-services .wc-att .wc-att-shift-name, .wc-r4 .wc-services .wc-att .wc-att-shift-time, .wc-r4 .wc-services .wc-daily .wc-daily-name { font-size: var(--wc-fs-body); font-weight: 600; }
.wc-r4 .wc-services .wc-daily .wc-daily-num { font-size: var(--wc-fs-task); font-weight: 700; }

.wc-r4 .wc-tr { min-block-size: 3.25rem; }
.wc-r4 .wc-ico { inline-size: 1.25rem; block-size: 1.25rem; }
.wc-r4 .wc-chip .wc-ico, .wc-r4 .wc-status .wc-ico, .wc-r4 .wc-new .wc-ico, .wc-r4 .wc-due .wc-ico { inline-size: 1rem; block-size: 1rem; }
.wc-r4 .wc-brief-icon .wc-ico, .wc-r4 .wc-scope-chip .wc-ico { inline-size: 1.5rem; block-size: 1.5rem; }

/* a link says it is one: navy (light ink in the dark theme), underlined on hover and focus */
.wc-r4 a.wc-task-title, .wc-r4 a.wc-fact, .wc-r4 .wc-fact-row dd a, .wc-r4 .wc-original { color: var(--wc-navy); }
.wc-r4 a.wc-task-title:hover, .wc-r4 a.wc-task-title:focus-visible, .wc-r4 .wc-original:hover, .wc-r4 .wc-original:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 768px) {
    .wc-r4 { gap: 1rem; }
    .wc-r4 .wc-brief { gap: 1rem; }
    .wc-r4 .wc-services { gap: 1rem; }
    /* the search gives way before the row of controls wraps (a list narrowed by the open editor) */
    .wc-r4 .wc-toolbar .wc-search { flex: 1 1 7rem; min-inline-size: 7rem; }
    .wc-r4.has-panel .wc-toolbar > .wc-filter-select { max-inline-size: 9.5rem; }
    /* 8 rows at 1440×900: the bands above the table give back what they do not need */
    .wc-r4 .wc-services .wc-daily .wc-daily-card { padding-block: 0.375rem; row-gap: 0.125rem; }
    .wc-r4 .wc-services .wc-daily .wc-daily-facts { line-height: 1.3; }
    .wc-r4 .wc-services > .wc-att { padding-block: 0.375rem; }
    .wc-r4 { margin-block-start: -1rem; }
    .wc-r4 .wc-toolbar { padding-block: 0.25rem; }
    .wc-r4 .wc-tabs:not(.wc-views) { padding-block-end: 0.125rem; }
    .wc-r4 .wc-tr.wc-thead { min-block-size: 2rem; padding-block: 0.125rem; }
    .wc-r4 .wc-toolbar .wc-search, .wc-r4 .wc-toolbar > .wc-filter-select, .wc-r4 .wc-toolbar .wc-density, .wc-r4 .wc-toolbar .wc-filter-more,
    .wc-r4 .wc-qa-input:not(textarea), .wc-r4 .wc-add-btn, .wc-r4 .wc-scope-chip { min-block-size: 2.5rem; block-size: 2.5rem; }
    .wc-r4 .wc-act { min-block-size: 2.25rem; }
    .wc-r4 .wc-services .wc-att .wc-att-btn { min-block-size: 2.5rem; }
    .wc-r4 .wc-brief-stat { min-block-size: 4.5rem; padding: 0.5rem 1rem; }
}

@media (max-width: 767.98px) {
    .wc-r4 { --wc-fs-title: 1.25rem; --wc-fs-figure: 1.5rem; gap: 0.75rem; margin-inline: -0.25rem; }
    .wc-r4 .wc-filter-q, .wc-r4 .wc-filter-select, .wc-r4 .wc-qa-input { font-size: 1rem; min-block-size: 2.75rem; }
    .wc-r4 .wc-act, .wc-r4 .wc-btn, .wc-r4 .wc-verb, .wc-r4 .wc-tab, .wc-r4 .wc-scope-chip, .wc-r4 .wc-page-btn, .wc-r4 .wc-add-btn,
    .wc-r4 .wc-services .wc-daily .wc-daily-btn, .wc-r4 .wc-services .wc-att .wc-att-btn { min-block-size: 2.75rem; }
}

/* ── management windows (فريقي / الإدارة) — MANAGEMENT-SCOPES-HANDOFF ──
   «المهام | الأعضاء (الفرق) | ينتظر قراري» as ONE segmented control, the due
   states as a row of filters of ONE list, an employee column, and the people
   table as a view of its own — never a stack of tables above the tasks. */
.wc-r4 .wc-views { gap: 0; padding: 0.5rem 0.75rem 0; overflow-x: auto; }
.wc-r4 .wc-views .wc-tab { gap: 0.5rem; padding-inline: 1.25rem; border-radius: 0; border-inline-end-width: 0; min-block-size: 2.5rem; font-weight: 600; }
.wc-r4 .wc-views .wc-tab:first-child { border-start-start-radius: var(--wc-radius-ctl); border-end-start-radius: var(--wc-radius-ctl); }
.wc-r4 .wc-views .wc-tab:last-child { border-inline-end-width: 1px; border-start-end-radius: var(--wc-radius-ctl); border-end-end-radius: var(--wc-radius-ctl); }
.wc-r4 .wc-views .wc-tab.is-active { background: var(--wc-act); border-color: var(--wc-act); color: var(--wc-on-act); box-shadow: none; }
.wc-r4 .wc-views .wc-tab.is-active .wc-tab-count { background: transparent; color: inherit; }
.wc-r4 .wc-states { padding-block: 0.5rem 0.375rem; }
.wc-r4 .wc-state.is-danger:not(.is-active) .wc-tab-count { color: var(--wc-danger); }

.wc-r4 .wc-grid-table.has-owner .wc-tr { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(5.5rem, 0.9fr) minmax(7rem, 1.05fr) minmax(6rem, 0.8fr); }
.wc-r4 .wc-td-owner { font-size: var(--wc-fs-body); font-weight: 500; color: var(--wc-navy); overflow-wrap: anywhere; }
/* six columns leave the source a narrow cell: the chip, then who / what on two short lines cut with an ellipsis — the row stays 52px */
.wc-r4 .wc-grid-table.has-owner .wc-td-source { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0.5rem; }
.wc-r4 .wc-grid-table.has-owner .wc-facts { flex: 1 1 0; min-inline-size: 0; }
.wc-r4 .wc-grid-table.has-owner .wc-facts .wc-fact:first-child,
.wc-r4 .wc-grid-table.has-owner .wc-facts-rest { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.wc-r4 .wc-grid-table.has-owner .wc-facts-rest > * { display: inline; }

.wc-r4 .wc-people .wc-tr { grid-template-columns: minmax(0, 2.4fr) repeat(3, minmax(3.5rem, 0.7fr)) minmax(5.5rem, 1fr) minmax(4rem, 0.7fr) minmax(7rem, 0.9fr); }
.wc-r4 .wc-team-row { background: color-mix(in srgb, var(--wc-tint) 45%, var(--wc-card)); }
.wc-r4 .wc-team-toggle { display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 2.25rem; background: transparent; border: 0; color: inherit; cursor: pointer; text-align: start; }
.wc-r4 .wc-team-member .wc-td:first-child { padding-inline-start: 1.75rem; }
.wc-r4 .wc-people-num { font-size: var(--wc-fs-body); font-weight: 600; color: var(--wc-navy); font-variant-numeric: tabular-nums; background: transparent; border: 0; padding: 0; }
.wc-r4 .wc-people-num.is-danger { color: var(--wc-danger); }
.wc-r4 .wc-people-num.is-link { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-inline-size: 2.75rem; min-block-size: 2.25rem; text-align: start; }

@media (min-width: 768px) { .wc-r4 > .wc-alerts { order: -1; } }   /* a phone keeps the source order: after the figures */
.wc-r4 .wc-alerts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; min-block-size: 2.75rem; padding: 0.375rem 1rem; background: var(--wc-card); border: 1px solid var(--wc-line); border-radius: var(--wc-radius); }
.wc-r4 .wc-alert { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--wc-fs-body); font-weight: 500; color: var(--wc-danger); }
.wc-r4 .wc-alert.is-ok { color: var(--wc-ok); }
.wc-r4 .wc-alert.is-info, .wc-r4 .wc-alert.is-low { color: var(--wc-navy); }
.wc-r4 a.wc-alert:hover, .wc-r4 a.wc-alert:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.wc-r4 .wc-alert-num { font-weight: 700; font-variant-numeric: tabular-nums; }
/* the reference's order inside a management board: the views, the search row, the due states, the table */
.wc-r4 .wc-list > .wc-views { order: -3; }
.wc-r4 .wc-list:has(> .wc-views) > .wc-toolbar { order: -2; }
.wc-r4 .wc-list > .wc-states { order: -1; }

.wc-r4 .wc-brief.is-six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wc-r4 .wc-brief.is-six .wc-brief-stat.is-zero { cursor: default; }
.wc-r4 .wc-attention-table .wc-tr { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(4rem, 0.6fr) minmax(0, 2fr) minmax(7rem, 0.8fr); }
.wc-r4 .wc-team-toggle .wc-tab-count { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.wc-r4 .wc-team-toggle .wc-tab-count .wc-ico { inline-size: 1rem; block-size: 1rem; }
@media (max-width: 1023.98px) { .wc-r4 .wc-brief.is-six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .wc-r4 .wc-brief.is-six { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; border: 0; background: transparent; overflow: visible; } .wc-r4 .wc-brief.is-six .wc-brief-stat { border: 1px solid var(--wc-line); border-radius: var(--wc-radius); } }

.wc-r4 .wc-page-size { display: inline-flex; align-items: center; margin-inline-start: auto; }
.wc-r4 .wc-page-size .wc-filter-select { min-block-size: 2.25rem; block-size: 2.25rem; inline-size: 4.5rem; }

@media (max-width: 767.98px) {
    /* a SHORT task card (START-HERE §2: 80–96px as a guide, nothing clipped): title + the one
       action, what is asked, then due · state · source on ONE wrapping line */
    .wc-r4 .wc-tr { padding: 0.5rem 0.625rem; gap: 0.25rem 0.5rem; }
    .wc-r4 .wc-td-status, .wc-r4 .wc-td-due, .wc-r4 .wc-td-source { order: 3; flex: 0 1 auto; }
    .wc-r4 .wc-td-source .wc-facts { flex: 0 1 auto; flex-direction: row; }
    .wc-r4 .wc-td-source .wc-facts-rest { display: none; }
    .wc-r4 .wc-due-sub { display: inline; }
    /* a management card: the title, WHAT IS ASKED («المطلوب: …» — owner rule 2026-09-22: every card says it), who,
       when and the one action — its state and source open in the sheet */
    .wc-r4 .wc-grid-table.has-owner .wc-td-status,
    .wc-r4 .wc-grid-table.has-owner .wc-td-source { display: none; }
    .wc-r4 .wc-grid-table.has-owner .wc-td-owner { order: 3; flex: 0 1 auto; }
    .wc-r4 .wc-grid-table.has-owner .wc-td-due { order: 4; }
    .wc-r4 .wc-page-size { display: none; }
    .wc-r4 .wc-views .wc-tab { flex: 1 1 0; justify-content: center; padding-inline: 0.5rem; }
    .wc-r4 .wc-td-owner { font-size: var(--wc-fs-second); color: var(--wc-muted); }
    /* a person or a team is a short card: the name, then the three counts and the one action */
    .wc-r4 .wc-people .wc-tr { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; row-gap: 0.25rem; }
    .wc-r4 .wc-people .wc-tr > .wc-td:first-child { grid-column: 1 / -1; }
    .wc-r4 .wc-people .wc-tr > .wc-td:nth-child(5), .wc-r4 .wc-people .wc-tr > .wc-td:nth-child(6) { display: none; }
    .wc-r4 .wc-people .wc-tr.wc-thead { display: none; }
}

/* ── WC-R4 completion round: every list is paged, lines in the side editor, company records ── */
/* a list INSIDE the panel (lines, files, notes) and an opened team's members: previous · n / N · next */
.wc-r4 .wc-mini-pager { display: flex; align-items: center; gap: 0.5rem; padding-block: 0.5rem 0.25rem; color: var(--wc-muted); font-size: var(--wc-fs-second); }
.wc-r4 .wc-mini-pager .wc-page-btn { min-inline-size: 2.25rem; min-block-size: 2.25rem; }
.wc-r4 .wc-mini-pager-at { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--wc-navy); min-inline-size: 2.75rem; text-align: center; }
.wc-r4 .wc-tr.wc-team-pager { display: block; min-block-size: 0; padding-block: 0.25rem; padding-inline-start: 1.75rem; background: transparent; }

/* `rows` field — lines the viewer adds and removes (a settlement); each line is its own small group */
.wc-r4 .wc-rows-field { border: 0; padding: 0; margin: 0; min-inline-size: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.wc-r4 .wc-rows-field > legend { padding: 0; margin-block-end: 0.25rem; }
.wc-r4 .wc-rows-row { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem; border: 1px solid var(--wc-line); border-radius: var(--wc-radius-ctl); background: var(--wc-tint); }
.wc-r4 .wc-rows-index { flex: 0 0 auto; inline-size: 1.5rem; block-size: 1.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--wc-card); border: 1px solid var(--wc-line); font-size: var(--wc-fs-badge); font-weight: 600; color: var(--wc-navy); font-variant-numeric: tabular-nums; margin-block-start: 0.125rem; }
.wc-r4 .wc-rows-cells { flex: 1 1 auto; min-inline-size: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem; }
.wc-r4 .wc-rows-cell { display: flex; flex-direction: column; gap: 0.25rem; min-inline-size: 0; }
.wc-r4 .wc-rows-cell.is-wide { grid-column: 1 / -1; }
.wc-r4 .wc-rows-label { font-size: var(--wc-fs-second); color: var(--wc-muted); }
.wc-r4 .wc-rows-cell .wc-qa-input { inline-size: 100%; }
.wc-r4 .wc-rows-remove { flex: 0 0 auto; inline-size: 2.75rem; block-size: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--wc-line); border-radius: var(--wc-radius-ctl); background: var(--wc-card); color: var(--wc-danger); cursor: pointer; }
.wc-r4 .wc-rows-remove .wc-ico { inline-size: 1.25rem; block-size: 1.25rem; }
.wc-r4 .wc-rows-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.375rem; min-block-size: 2.5rem; padding-inline: 0.75rem; border: 1px solid var(--wc-act); border-radius: var(--wc-radius-ctl); background: var(--wc-card); color: var(--wc-act-ink); font-size: var(--wc-fs-body); font-weight: 500; cursor: pointer; }
.wc-r4 .wc-rows-add .wc-ico { inline-size: 1.25rem; block-size: 1.25rem; }
.wc-r4 .wc-rows-remove:focus-visible, .wc-r4 .wc-rows-add:focus-visible { outline: 2px solid var(--wc-act); outline-offset: 2px; }

/* a Latin name inside an RTL cell keeps the cell's own edge (a flex-item <bdi> resolves `start` by its OWN direction) */
.wc-r4 .wc-td-owner > bdi { text-align: -webkit-match-parent; text-align: match-parent; }
/* however many independent indicators a viewer may read (up to six), they share the row evenly */
@media (min-width: 1024px) { .wc-r4 .wc-brief.is-six { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
/* the page-size figure is never clipped by its chevron */
.wc-r4 .wc-page-size .wc-filter-select { inline-size: 5.25rem; padding-inline: 0.75rem 1.75rem; text-align: center; }

/* «مكتمل مؤخرًا» is a page of the SAME list: its rows keep the table's 52px pitch, so eight of
   them and their pager stand where the open rows stood */
.wc-r4 #wc-done .wc-row { min-block-size: 3.25rem; padding-block: 0.3125rem; }
.wc-r4 #wc-done .wc-row-title { font-size: var(--wc-fs-task); font-weight: 600; }
.wc-r4 #wc-done .wc-row-context { font-size: var(--wc-fs-second); }
/* the active tab already names this list and its count: the heading stays for a screen reader only */
.wc-r4 #wc-done .wc-done-title { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* the company window: records (the management table's own six columns) and the departments rollup */
.wc-r4 .wc-departments .wc-tr { grid-template-columns: minmax(0, 2.4fr) repeat(5, minmax(3.5rem, 0.7fr)) minmax(7rem, 0.9fr); }
.wc-r4 .wc-records .wc-td-owner .wc-status-sub { display: block; }
.wc-r4 .wc-list > .wc-lane-note { margin-block: 0.25rem 0.5rem; }

@media (max-width: 767.98px) {
    /* the approved phone reference: the ONE action stands BESIDE the card's lines, centred — it
       never takes a row of its own. The written values all hold (a 44px target, the 15px title,
       the «المطلوب» line, nothing clipped); a one-line title now gives a card of ≈ 88px, inside
       the file's 80–96px guide. */
    .wc-r4 .wc-tr:has(> .wc-td-due) { position: relative; padding-inline-end: 6.25rem; }
    .wc-r4 .wc-tr:has(> .wc-td-due) > .wc-td-action { position: absolute; inset-inline-end: 0.625rem; inset-block-start: 50%; transform: translateY(-50%); }
    .wc-r4 .wc-tr:has(> .wc-td-due) > .wc-td-task { flex: 1 1 100%; }

    .wc-r4 .wc-rows-cells { grid-template-columns: minmax(0, 1fr); }
    .wc-r4 .wc-rows-add { min-block-size: 2.75rem; }
    .wc-r4 .wc-mini-pager .wc-page-btn { min-inline-size: 2.75rem; min-block-size: 2.75rem; }
    /* a department is a short card: its name, then open · overdue · blocked and the one action */
    .wc-r4 .wc-departments .wc-tr { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; row-gap: 0.25rem; }
    .wc-r4 .wc-departments .wc-tr > .wc-td:first-child { grid-column: 1 / -1; }
    .wc-r4 .wc-departments .wc-tr > .wc-td:nth-child(2), .wc-r4 .wc-departments .wc-tr > .wc-td:nth-child(6) { display: none; }
    .wc-r4 .wc-departments .wc-tr.wc-thead { display: none; }
}

/* ── WC-R4 final review of the comparison sheets A–M (2026-09-20) — written sizes kept, content whole ── */
/* the alerts line: its alerts share the row evenly, as the management references draw them */
@media (min-width: 1024px) { .wc-r4 .wc-alerts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); justify-items: center; gap: 0 1rem; } }
/* the three management views: long names on a desktop, the reference's short names on a phone */
.wc-r4 .wc-view-short { display: none; }
/* a company record row: its context is with the task now — the source cell is its chip again */
.wc-r4 .wc-grid-table.wc-records .wc-td-source { flex-direction: row; align-items: center; }

@media (max-width: 767.98px) {
    /* the page starts 12px under the app's own header (START-HERE §2: a phone's content margin) */
    .wc-r4 { margin-block-start: -1.5rem; }
    /* ONE scrolling line of alerts — they never push the list down by their number */
    .wc-r4 .wc-alerts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0 1.25rem; padding-inline: 0.75rem; }
    .wc-r4 .wc-alerts::-webkit-scrollbar { display: none; }
    .wc-r4 .wc-alert { flex: 0 0 auto; white-space: nowrap; }
    /* «الفرق | المهام | القرارات»: three views that fit 320px with their counts — no clipped third tab */
    .wc-r4 .wc-view-full { display: none; }
    .wc-r4 .wc-view-short { display: inline; }
    .wc-r4 .wc-views .wc-tab .wc-ico { display: none; }
}

/* four English scope names with their icons fit a 390pt phone exactly (358 of 362px) at the images' 15px
   type and 20px mark; on a NARROWER phone the icon yields — never the type size or the 44px target.
   Arabic names are short and keep their icons everywhere. */
@media (max-width: 389.98px) { .wc-r4[dir="ltr"] .wc-scope-chip .wc-ico { display: none; } }

/* ══════════════════════════════════════════════════════════════════════
   WC-R4 — VISUAL MATCH to the approved images (owner ruling 2026-09-20):
   «الصور هي المرجع لشكل الواجهة وتوزيعها، والأرقام المكتوبة وسيلة لتحقيقها».
   Every size in this block was MEASURED on the reference images at their own
   pixel size (1586×992 desktop · 390pt phone) against a capture of this page
   at the same size. Where the written figure and the image disagreed, the
   image won — the pairs are listed in the delivery report. Kept from the
   written file ON PURPOSE (legibility and touch): the dark label on the
   orange fill (white is 2.6:1), AA inks for orange and red TEXT, 44px targets
   on a phone, nothing under 12px. The block sits last in the WC-R4 sheet so
   it wins by ORDER; the daily-services and attendance blocks below it stay
   byte-for-byte theirs.
   ══════════════════════════════════════════════════════════════════════ */

/* the references' quiet ground (--ho-brand-page, light and dark) — Filament's container paints OVER the body, and
   navigation.css paints that container with `.fi-body .fi-main-ctn` (0,2,0) from a sheet loaded AFTER this one:
   so this rule needs one more class, or it loses by order (it did until 2026-09-21 — verified on the COMPUTED
   colour since). The app's own frame (topbar, sidebar) keeps its colours. */
.fi-body .fi-main-ctn:has(.wc-r4) { background-color: var(--ho-brand-page); }

.wc-r4 {
    --wc-ink-2: color-mix(in srgb, var(--wc-navy) 55%, var(--wc-muted));   /* the images' second ink: labels, captions */
    --wc-chip: color-mix(in srgb, var(--wc-tint) 70%, var(--wc-line));     /* the neutral source chip */
    --wc-figure-act: var(--ho-brand-accent-strong);
    /* outline icons this block draws itself (the attendance island keeps its own markup): heroicons-o, 1.5 stroke */
    --wc-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z'/%3E%3C/svg%3E");
    --wc-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z'/%3E%3C/svg%3E");
    --wc-i-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z'/%3E%3C/svg%3E");
    --wc-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m8.25 4.5 7.5 7.5-7.5 7.5'/%3E%3C/svg%3E");
    --wc-i-punch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9'/%3E%3C/svg%3E");
}

/* ── the type scale of the images (a desktop): 32 · 22 · 19 · 16 · 15 · 14 · 30 · 38 ── */
@media (min-width: 768px) {
    .wc-r4 {
        --wc-fs-title: 2rem;           /* written 24 · image 31–32 */
        --wc-fs-task: 1rem;            /* written 15 · image 16–17 */
        --wc-fs-second: 0.9375rem;     /* written 13 · image 15 */
        --wc-fs-badge: 0.875rem;       /* written 12 · image 14 */
        --wc-fs-figure: 1.875rem;      /* written 28 · image 29–30 */
        gap: 0.75rem;
        --wc-row-pad: 0.1875rem;       /* «مختصر»: the image's 50px row */
        inline-size: auto;             /* 24px on BOTH sides: with a fixed 100% the negative margin only moved the page sideways */
    }

    .wc-r4.is-comfortable { --wc-row-pad: 0.75rem; }   /* «مريح» still opens the rows */

    /* ── header: the title block (three lines) · the scopes in the MIDDLE · «إضافة مهمة» at the end ── */
    .wc-r4 .wc-head { margin-block-end: -0.375rem; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; column-gap: 1rem; }
    .wc-r4 .wc-head-text { display: block; flex: none; }
    .wc-r4 .wc-head-side { display: contents; }
    .wc-r4 .wc-title { font-size: var(--wc-fs-title); line-height: 1.2; font-weight: 700; }
    .wc-r4 .wc-welcome { margin-block-start: 0.125rem; font-size: 1rem; line-height: 1.4; color: var(--wc-ink-2); }
    .wc-r4 .wc-date { font-size: 0.9375rem; line-height: 1.4; color: var(--wc-ink-2); }
    .wc-r4 .wc-date::before { content: none; }
    .wc-r4 .wc-scopes { grid-column: 2; margin-block-start: 0.5rem; border-radius: 0.625rem; }
    .wc-r4 .wc-scope-chip { justify-content: center; gap: 0.625rem; min-inline-size: 8.5rem; min-block-size: 2.875rem; block-size: 2.875rem; padding-inline: 1.25rem; font-size: 1.0625rem; font-weight: 500; }
    .wc-r4 .wc-scope-chip.is-active { border-radius: 0.625rem; font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--wc-act); }
    .wc-r4 .wc-add-btn { grid-column: 3; justify-self: end; margin-block-start: 0.5rem; gap: 0.625rem; min-inline-size: 11.375rem; min-block-size: 3rem; block-size: 3rem; padding-inline: 1.5rem; font-size: 1.0625rem; font-weight: 700; border-radius: 0.625rem; }
    .wc-r4 .wc-add-btn .wc-ico { inline-size: 1.5rem; block-size: 1.5rem; }

    /* ── the four figures: «أنا» and «فريقي» keep ONE physical order in both languages (their images do not mirror it) — the icon
       tile on the right: first in an Arabic tile with its text beside it, last in an English one ── */
    .wc-r4 .wc-brief { gap: 0.75rem; }
    .wc-r4.is-scope-me .wc-brief, .wc-r4.is-scope-team .wc-brief { direction: ltr; }   /* the department and company images mirror; these two do not */
    .wc-r4[dir="rtl"] .wc-brief-stat { direction: rtl; justify-content: flex-start; }
    .wc-r4[dir="rtl"] .wc-brief-icon { order: 0; }
    .wc-r4[dir="rtl"] .wc-brief-text { order: 1; }
    .wc-r4 .wc-brief-stat { min-block-size: 4.875rem; padding: 0.625rem 1.25rem; gap: 1.25rem; }
    .wc-r4 .wc-brief-icon { inline-size: 3rem; block-size: 3rem; border-radius: 0.625rem; }
    .wc-r4 .wc-brief-icon .wc-ico { inline-size: 1.625rem; block-size: 1.625rem; }
    .wc-r4 .wc-brief-label { font-size: 1.0625rem; font-weight: 500; line-height: 1.35; color: var(--wc-ink-2); }
    .wc-r4 .wc-brief-num { font-size: var(--wc-fs-figure); line-height: 1.15; }
}

/* a segmented control is cut by STRAIGHT hairlines (a rounded chip drew brackets between its neighbours) */
.wc-r4 .wc-scope-chip:not(.is-active) { border-radius: 0; }
@media (max-width: 767.98px) { .wc-r4 .wc-brief-stat { border-radius: 0; } }

/* the images draw their large outline icons a little heavier than the library's 1.5 */
.wc-r4 .wc-brief-icon svg, .wc-r4 .wc-scope-chip svg, .wc-r4 .wc-daily-ico svg, .wc-r4 .wc-add-btn svg { stroke-width: 1.8; }

/* the figures' inks, as drawn: a blue list, orange calendar and person, a red clock; the decision count in orange */
.wc-r4 .wc-brief-stat.open .wc-brief-icon, .wc-r4 .wc-brief-stat.teams .wc-brief-icon { background: var(--wc-accent-soft); color: var(--wc-accent); }
.wc-r4 .wc-brief-stat.due_today .wc-brief-icon, .wc-r4 .wc-brief-stat.approvals .wc-brief-icon { color: var(--wc-act); }
.wc-r4 .wc-brief-stat.approvals:not(.is-zero) .wc-brief-num { color: var(--wc-figure-act); }

/* ── attendance + services: ONE card (the approved strip) — the attendance island at the start, a hairline,
   then the mini cards. The island's own markup, keys and Alpine state are untouched: only boxes and places. ── */
.wc-r4 .wc-services .wc-att > .wc-section-title { display: flex; align-items: center; gap: 0.5rem; }
.wc-r4 .wc-services .wc-att > .wc-section-title::before { content: ""; flex: 0 0 auto; inline-size: 1.625rem; block-size: 1.625rem; background: currentColor; -webkit-mask: var(--wc-i-clock) center / contain no-repeat; mask: var(--wc-i-clock) center / contain no-repeat; }
.wc-r4 .wc-services .wc-att .wc-att-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; }
.wc-r4 .wc-services .wc-att .wc-att-btn::before { content: ""; flex: 0 0 auto; inline-size: 1.375rem; block-size: 1.375rem; background: currentColor; -webkit-mask: var(--wc-i-punch) center / contain no-repeat; mask: var(--wc-i-punch) center / contain no-repeat; }
.wc-r4[dir="rtl"] .wc-services .wc-att .wc-att-btn::before { transform: scaleX(-1); }
/* the day's state: a dot, then the words */
.wc-r4 .wc-services .wc-att .wc-att-state { display: inline-flex; align-items: center; gap: 0.5rem; }
.wc-r4 .wc-services .wc-att .wc-att-state::before { content: ""; flex: 0 0 auto; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 999px; background: currentColor; }

/* the mini cards: an icon in the corner, a small label, the value, a caption — the WHOLE card is its link */
.wc-r4 .wc-services .wc-daily .wc-daily-card { position: relative; }
.wc-r4 .wc-services .wc-daily .wc-daily-ico { position: absolute; inset-block-start: 0.625rem; inset-inline-start: 0.75rem; display: inline-flex; color: var(--wc-ink-2); pointer-events: none; }
.wc-r4 .wc-services .wc-daily .wc-daily-card.is-requests .wc-daily-ico { color: var(--wc-accent); }
.wc-r4 .wc-services .wc-daily .wc-daily-ico .wc-ico { inline-size: 1.625rem; block-size: 1.625rem; }
.wc-r4 .wc-services .wc-daily .wc-daily-btn.is-cover { position: absolute; inset: 0; inline-size: auto; min-inline-size: 0; min-block-size: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; color: transparent; overflow: hidden; white-space: nowrap; text-indent: 100%; filter: none; }
.wc-r4 .wc-services .wc-daily .wc-daily-card:has(.is-cover:hover) { border-color: var(--wc-act); }
/* the approved English sheet marks a card that IS a link with a chevron at its far end */
.wc-r4 .wc-services .wc-daily .wc-daily-card:has(.is-cover)::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: 0.625rem; inline-size: 1.125rem; block-size: 1.125rem; margin-block-start: -0.5625rem; background: var(--wc-muted); -webkit-mask: var(--wc-i-chevron) center / contain no-repeat; mask: var(--wc-i-chevron) center / contain no-repeat; pointer-events: none; }
.wc-r4[dir="rtl"] .wc-services .wc-daily .wc-daily-card:has(.is-cover)::after { transform: scaleX(-1); }
/* «إنشاء طلب» stays one tap away: a + in the card's far corner (its words are read, and shown as its tooltip) */
.wc-r4 .wc-services .wc-daily .wc-daily-btn.is-plus { position: absolute; z-index: 1; inset-block-end: 0.375rem; inset-inline-start: 0.375rem; display: inline-flex; align-items: center; justify-content: center; inline-size: 2rem; min-inline-size: 2rem; block-size: 2rem; min-block-size: 2rem; padding: 0; border-radius: 0.5rem; border: 1px solid var(--wc-act); background: var(--wc-card); color: var(--wc-act-ink); }
.wc-r4 .wc-services .wc-daily .wc-daily-btn.is-plus .wc-ico { inline-size: 1.25rem; block-size: 1.25rem; }
.wc-r4 .wc-services .wc-daily .wc-daily-btn.is-plus:hover { background: var(--wc-act-soft); filter: none; }
.wc-r4 .wc-services .wc-daily .wc-daily-btn-text { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wc-r4 .wc-services .wc-daily .wc-daily-actions { display: contents; }
.wc-r4 .wc-services .wc-daily .wc-daily-facts { order: 0; flex: none; }
.wc-r4 .wc-services .wc-daily .wc-daily-head { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; text-align: center; min-inline-size: 0; }
.wc-r4 .wc-services .wc-daily .wc-daily-kicker, .wc-r4 .wc-services .wc-daily .wc-daily-caption { font-size: var(--wc-fs-second); font-weight: 400; line-height: 1.4; color: var(--wc-ink-2); }
.wc-r4 .wc-services .wc-daily .wc-daily-name { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; color: var(--wc-navy); }
.wc-r4 .wc-services .wc-daily .wc-daily-card .wc-daily-state,
.wc-r4 .wc-services .wc-daily .wc-daily-card.state-in .wc-daily-state,
.wc-r4 .wc-services .wc-daily .wc-daily-card.state-out .wc-daily-state { padding: 0; background: transparent; font-size: var(--wc-fs-second); font-weight: 400; line-height: 1.4; color: var(--wc-ink-2); white-space: normal; }
/* «طلباتي»: here the NAME is the small label and the count is the value */
.wc-r4 .wc-services .wc-daily .wc-daily-card.is-requests .wc-daily-name { font-size: var(--wc-fs-second); font-weight: 500; line-height: 1.4; color: var(--wc-ink-2); }
.wc-r4 .wc-services .wc-daily .wc-daily-count { display: flex; flex-direction: column; align-items: center; gap: 0; }
.wc-r4 .wc-services .wc-daily .wc-daily-num { font-size: 1.375rem; font-weight: 700; line-height: 1.2; color: var(--wc-navy); }
.wc-r4 .wc-services .wc-daily .wc-daily-count.is-zero .wc-daily-num { color: var(--wc-muted); }

@media (min-width: 768px) {
    .wc-r4 .wc-services { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.75rem 1rem; padding: 0.75rem 1rem; background: var(--wc-card); border: 1px solid var(--wc-line); border-radius: var(--wc-radius); }
    .wc-r4 .wc-services > .wc-att { flex: 1 1 28rem; padding: 0; border: 0; border-radius: 0; background: transparent; column-gap: 1.5rem; row-gap: 0; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "title state" "shift shift" "facts facts"; }
    .wc-r4 .wc-services > .wc-att:has(.wc-att-btn) { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "title title state" "btn shift shift" "btn facts facts"; }
    .wc-r4 .wc-services > .wc-daily { flex: 0 1 auto; display: flex; padding-inline-start: 1rem; border-inline-start: 1px solid var(--wc-line); }
    .wc-r4 .wc-services > .wc-daily:only-child { padding-inline-start: 0; border-inline-start: 0; }

    .wc-r4 .wc-services .wc-att > .wc-section-title { grid-area: title; margin: 0 0 0.375rem; font-size: 1.1875rem; line-height: 1.35; }
    .wc-r4 .wc-services .wc-att .wc-att-btn { grid-area: btn; align-self: center; min-inline-size: 10.75rem; min-block-size: 2.8125rem; block-size: 2.8125rem; padding-inline: 1.25rem; font-size: 1rem; font-weight: 600; border-radius: 0.625rem; }
    .wc-r4 .wc-services .wc-att .wc-att-shift { grid-area: shift; align-self: end; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; }
    .wc-r4 .wc-services .wc-att .wc-att-shift::before { content: ""; flex: 0 0 auto; inline-size: 1.25rem; block-size: 1.25rem; background: var(--wc-ink-2); -webkit-mask: var(--wc-i-pin) center / contain no-repeat; mask: var(--wc-i-pin) center / contain no-repeat; }
    .wc-r4 .wc-services .wc-att .wc-att-shift-name { font-size: 1rem; font-weight: 500; }
    .wc-r4 .wc-services .wc-att .wc-att-shift-name::after { content: "·"; margin-inline-start: 0.5rem; color: var(--wc-muted); }
    .wc-r4 .wc-services .wc-att .wc-att-shift-time { font-size: 1rem; font-weight: 600; }
    .wc-r4 .wc-services .wc-att .wc-att-facts { grid-area: facts; align-self: start; display: flex; flex-wrap: wrap; gap: 0; }
    .wc-r4 .wc-services .wc-att .wc-att-fact + .wc-att-fact::before { content: "·"; margin-inline: 0.5rem; color: var(--wc-muted); }
    .wc-r4 .wc-services .wc-att .wc-att-fact dt, .wc-r4 .wc-services .wc-att .wc-att-fact dd { font-size: var(--wc-fs-second); }
    .wc-r4 .wc-services .wc-att .wc-att-state { grid-area: state; justify-self: end; align-self: start; min-block-size: 2rem; padding: 0 0.875rem; border-radius: 0.5rem; font-size: var(--wc-fs-second); font-weight: 500; }
    .wc-r4 .wc-services .wc-att .wc-att-link { grid-area: title; justify-self: end; align-self: center; }
    .wc-r4 .wc-services:has(.wc-daily-card.is-punch) .wc-att .wc-att-link { display: none; }   /* «بصمتي» is in the same strip */
    .wc-r4 .wc-services .wc-att .wc-att-note, .wc-r4 .wc-services .wc-att .wc-att-msg { grid-column: 1 / -1; grid-row: auto; margin-block-start: 0.375rem; }

    .wc-r4 .wc-services .wc-daily .wc-daily-cards { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: auto; align-items: stretch; gap: 0.875rem; block-size: auto; inline-size: 100%; }
    .wc-r4 .wc-services .wc-daily .wc-daily-cards:has(> .wc-daily-card:only-child) { grid-template-columns: none; }
    .wc-r4 .wc-services .wc-daily .wc-daily-card,
    .wc-r4 .wc-services .wc-daily .wc-daily-card.state-in,
    .wc-r4 .wc-services .wc-daily .wc-daily-card.state-out { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; align-items: center; gap: 0 1rem; min-inline-size: 10.5rem; min-block-size: 5.5rem; padding: 0.375rem 2.5rem; background: color-mix(in srgb, var(--wc-tint) 60%, var(--wc-card)); border: 1px solid var(--wc-line); border-radius: 0.625rem; }
    /* «طلباتي» also says what is left: a quiet second column — the height of the strip never grows for it */
    .wc-r4 .wc-services .wc-daily .wc-daily-card.is-requests:has(.wc-daily-facts) { grid-template-columns: auto auto; padding-inline-end: 2.75rem; }
    .wc-r4 .wc-services .wc-daily .wc-daily-card.is-requests .wc-daily-facts { max-inline-size: 11rem; display: flex; flex-direction: column; gap: 0.125rem; margin: 0; padding-inline-start: 1rem; border-inline-start: 1px solid var(--wc-line); text-align: start; line-height: 1.35; }
    .wc-r4[dir="ltr"] .wc-services .wc-daily .wc-daily-card.is-requests .wc-daily-facts { max-inline-size: 13.75rem; }   /* the English labels are longer */
    .wc-r4 .wc-services .wc-daily .wc-daily-card.is-requests .wc-daily-fact { display: flex; flex-direction: column; gap: 0; }
    .wc-r4 .wc-services .wc-daily .wc-daily-card.is-requests .wc-daily-fact dt { font-size: 0.8125rem; color: var(--wc-ink-2); }
    .wc-r4 .wc-services .wc-daily .wc-daily-card.is-requests .wc-daily-fact dd { font-size: 0.875rem; font-weight: 600; color: var(--wc-navy); }
    /* the attendance card beside it already says the day's hours — «بصمتي» stays the approved three lines */
    .wc-r4 .wc-services:has(> .wc-att) .wc-daily .wc-daily-card.is-punch .wc-daily-facts { display: none; }
    .wc-r4 .wc-services .wc-daily .wc-daily-card.is-punch .wc-daily-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 0.75rem; margin: 0; }
}

/* a narrower desktop: the strip stays ONE band — the balances are one tap away inside «طلباتي», and the
   mini cards give their padding back before anything wraps to a second row */
@media (min-width: 768px) and (max-width: 1359.98px) {
    .wc-r4 .wc-services .wc-daily .wc-daily-card.is-requests .wc-daily-facts { display: none; }
    .wc-r4 .wc-services .wc-daily .wc-daily-card,
    .wc-r4 .wc-services .wc-daily .wc-daily-card.state-in,
    .wc-r4 .wc-services .wc-daily .wc-daily-card.state-out,
    .wc-r4 .wc-services .wc-daily .wc-daily-card.is-requests:has(.wc-daily-facts) { grid-template-columns: minmax(0, 1fr); min-inline-size: 8.5rem; padding-inline: 2.25rem; }
    .wc-r4 .wc-services .wc-daily .wc-daily-cards { gap: 0.625rem; }
    .wc-r4 .wc-services > .wc-daily { padding-inline-start: 0.875rem; }
}

/* wide enough for the whole strip: each of the day's items keeps its own words together; the lines break only
   BETWEEN items, and only when the block has no room (usability fix 2026-09-21: nowrap on the whole line let the
   English line push the check-in button under the services cards at 1500–1660px) */
@media (min-width: 1360px) {
    .wc-r4 .wc-services .wc-att .wc-att-facts, .wc-r4 .wc-services .wc-att .wc-att-shift { flex-wrap: wrap; }
    .wc-r4 .wc-services .wc-att .wc-att-fact { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; }
    .wc-r4 .wc-services .wc-att .wc-att-shift > * { white-space: nowrap; }
}

/* the image's width: the state sits beside the day's lines, the action under the title */
@media (min-width: 1500px) {
    /* the day's column takes its own width when there is room and gives way when there is not — the grid never
       grows past its box, so the action and the state always stay in view. ONE template: an English page is the
       Arabic one mirrored (the owner's ruling, 2026-09-21), the action at the start of the line in both. */
    .wc-r4 .wc-services > .wc-att:has(.wc-att-btn) { grid-template-columns: auto minmax(min-content, max-content) auto; column-gap: 1.25rem; justify-content: start; grid-template-areas: "title title title" "btn shift state" "btn facts state"; }
    /* the block never gets narrower than its grid needs (the widest single item of the day, never less): below
       that the mini cards take the next row — so nothing ever runs under them */
    .wc-r4 .wc-services > .wc-att { min-inline-size: min-content; }

    .wc-r4 .wc-services > .wc-att { grid-template-columns: minmax(0, auto) auto; justify-content: start; grid-template-areas: "title title" "shift state" "facts state"; }
    .wc-r4 .wc-services .wc-att .wc-att-state { justify-self: start; align-self: center; min-block-size: 2.125rem; padding-inline: 1rem; margin-inline-start: 0.75rem; }
}

/* ── the list: the toolbar, the rows, the pager — as the approved table draws them ── */
.wc-r4 .wc-chip { min-block-size: 1.75rem; padding: 0 0.875rem; border: 0; background: var(--wc-chip); color: var(--wc-ink-2); font-size: var(--wc-fs-badge); font-weight: 500; }
.wc-r4 a.wc-chip:hover { background: var(--wc-line); color: var(--wc-navy); }
.wc-r4 .wc-status { min-block-size: 1.75rem; padding: 0 0.875rem; font-size: var(--wc-fs-badge); font-weight: 500; }
.wc-r4 .wc-status.tone-neutral { background: var(--wc-chip); color: var(--wc-ink-2); }
.wc-r4 .wc-tr.is-selected, [dir="rtl"] .wc-r4 .wc-tr.is-selected { box-shadow: none; background: color-mix(in srgb, var(--wc-accent-soft) 70%, var(--wc-tint)); }
.wc-r4 .wc-task-title { font-weight: 700; line-height: 1.4; }
.wc-r4 .wc-task-next { color: var(--wc-ink-2); line-height: 1.4; }
.wc-r4 .wc-task-next .wc-fact { font-size: inherit; color: inherit; font-weight: 400; }
.wc-r4 .wc-task-next a.wc-fact { color: var(--wc-navy); }
.wc-r4 .wc-act { border-width: 1.5px; font-weight: 700; }
.wc-r4 .wc-page-btn.is-active { border-color: var(--wc-act); border-width: 2px; box-shadow: none; color: var(--wc-act-ink); font-weight: 700; }
.wc-r4 .wc-pager-count { font-weight: 500; }
.wc-r4 .wc-pager-nav { margin-inline-start: auto; }
.wc-r4 .wc-page-size { margin-inline-start: 0; }

@media (min-width: 768px) {
    .wc-r4 .wc-board { gap: 0.9375rem; }
    .wc-r4.has-panel .wc-board { gap: 0.9375rem; }
    .wc-r4 .wc-toolbar { padding: 0.625rem 0.75rem; gap: 0.625rem; }
    .wc-r4 .wc-toolbar .wc-search, .wc-r4 .wc-toolbar > .wc-filter-select, .wc-r4 .wc-toolbar .wc-density, .wc-r4 .wc-toolbar .wc-filter-more { min-block-size: 2.25rem; block-size: 2.25rem; }
    .wc-r4 .wc-toolbar .wc-search { flex: 1 1 10rem; max-inline-size: 18rem; min-inline-size: 7rem; }
    .wc-r4 .wc-toolbar > .wc-filter-select { flex: 0 1 auto; min-inline-size: 0; max-inline-size: 11.5rem; text-overflow: ellipsis; }
    .wc-r4 .wc-toolbar .wc-density { margin-inline-start: auto; order: 9; flex: 0 0 auto; }
    .wc-r4 .wc-density-btn { min-block-size: 0; block-size: 100%; min-inline-size: 4.75rem; padding-inline: 0.875rem; }
    .wc-r4 .wc-density-btn.is-active { font-weight: 600; }
    /* «أنا»: the views are ONE select in the toolbar (the approved desktop has no second row); a phone keeps its chips */
    .wc-r4 .wc-me-tabs { display: none; }
    .wc-r4 .wc-tabs:not(.wc-views) { padding: 0 0.75rem 0.5rem; }
    .wc-r4 .wc-tabs:not(.wc-views) .wc-tab { min-block-size: 1.875rem; block-size: 1.875rem; padding-inline: 0.75rem; }

    /* five columns, the last four centred under their names */
    /* the row pitch of the image is 50px (written: 52 minimum) — a two-line row is 16/1.35 + 15/1.35 + 6 */
    .wc-r4 .wc-tr { grid-template-columns: minmax(0, 2.3fr) minmax(5.5rem, 1fr) minmax(6.5rem, 1.1fr) minmax(7.5rem, 1.2fr) minmax(6.5rem, 0.95fr); column-gap: 0.75rem; min-block-size: 3.125rem; padding: var(--wc-row-pad) 1.25rem; }
    .wc-r4 .wc-grid-table .wc-task-title, .wc-r4 .wc-grid-table .wc-task-next { line-height: 1.35; }
    .wc-r4 .wc-grid-table .wc-status { min-inline-size: 6.875rem; }
    .wc-r4.has-panel .wc-tr { grid-template-columns: minmax(0, 2.1fr) minmax(5.5rem, 1fr) minmax(6.5rem, 1.1fr) minmax(7.5rem, 1.2fr) minmax(6.5rem, 0.95fr); column-gap: 0.5rem; }
    .wc-r4 .wc-grid-table .wc-tr > :not(:first-child) { align-items: center; justify-content: center; text-align: center; }
    .wc-r4 .wc-grid-table .wc-td-source { flex-direction: column; }
    .wc-r4 .wc-grid-table .wc-status { align-self: center; }
    .wc-r4 .wc-tr.wc-thead { min-block-size: 1.875rem; padding-block: 0.25rem; font-size: 0.9375rem; font-weight: 700; }
    .wc-r4 .wc-td { gap: 0; }
    /* what is asked is never cut; the context after it gives way with an ellipsis (whole in the tooltip and the editor) */
    .wc-r4 .wc-grid-table .wc-task-next { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .wc-r4 .wc-due { font-size: 1rem; font-weight: 500; }
    .wc-r4 .wc-due.is-danger { font-weight: 600; }
    .wc-r4 .wc-due .wc-ico { inline-size: 1.25rem; block-size: 1.25rem; }
    .wc-r4 .wc-due-sub { font-size: var(--wc-fs-badge); line-height: 1.3; }
    .wc-r4 .wc-act { min-inline-size: 6rem; min-block-size: 2.25rem; padding-inline: 0.75rem; font-size: 1rem; border-radius: 0.5rem; }
    .wc-r4 .wc-td-action { align-items: center; }

    .wc-r4 .wc-pager { padding: 1rem 1.25rem; gap: 0.625rem; }
    .wc-r4 .wc-pager-count { font-size: 1rem; }
    .wc-r4 .wc-pager-nav { gap: 0.625rem; }
    .wc-r4 .wc-page-btn { min-inline-size: 2.375rem; min-block-size: 2.375rem; font-size: 1rem; }

    /* ── the editor: a 22px title, facts, the amount as the figure it is, 44px actions ── */
    .wc-r4 .wc-panel { padding: 1rem 1.25rem 1.25rem; gap: 0.75rem; }
    .wc-r4 .wc-qa-title { font-size: 1.375rem; line-height: 1.3; }
    .wc-r4 .wc-qa-context { font-size: 1rem; color: var(--wc-ink-2); }
    .wc-r4 .wc-qa-close { font-size: 1.25rem; }
    .wc-r4 .wc-fact-row dt { font-size: var(--wc-fs-second); color: var(--wc-ink-2); }
    .wc-r4 .wc-fact-row dd { font-size: 1rem; font-weight: 600; line-height: 1.4; }
    .wc-r4 .wc-fact-row.is-amount dd { font-size: 2.375rem; font-weight: 700; line-height: 1.15; }   /* written 28 · image ≈ 38–39 */
    .wc-r4 .wc-panel-stage { min-block-size: 1.875rem; padding-inline: 0.875rem; border-radius: 0.5rem; font-size: var(--wc-fs-second); }
    .wc-r4 .wc-panel-stage:not(.tone-danger):not(.tone-warn) { background: var(--wc-accent-soft); color: var(--wc-navy); }   /* the stage is a fact, drawn on the quiet blue */
    .wc-r4 .wc-panel-section > summary { font-size: 1rem; font-weight: 500; }
    /* closed, a section reads as the image's link («عرض بنود المستخلص»); it takes its frame when it opens */
    .wc-r4 .wc-panel-section:not([open]) { border-color: transparent; }
    .wc-r4 .wc-panel-section:not([open]) > summary { padding-inline: 0; min-block-size: 2.25rem; }
    .wc-r4 .wc-attachment-name { font-size: 1rem; }
    .wc-r4 .wc-attachment-act { font-size: 1rem; font-weight: 500; }
    .wc-r4 .wc-qa-label { font-size: 1.0625rem; font-weight: 500; color: var(--wc-ink-2); }
    .wc-r4 .wc-qa-input { font-size: 1rem; }
    .wc-r4 .wc-draft-line { font-size: var(--wc-fs-second); }
    .wc-r4 .wc-btn { min-block-size: 2.75rem; font-size: 1.0625rem; font-weight: 600; border-radius: 0.5rem; }
    .wc-r4 .wc-verb { min-block-size: 2.5rem; font-size: 1rem; }
    .wc-r4 .wc-original { font-size: 1rem; font-weight: 500; color: var(--ho-info-ink); }
}


@media (min-width: 1024px) { .wc-r4 .wc-toolbar { flex-wrap: nowrap; } }

/* ── the management windows, as their images draw them ── */
/* the alerts line: a red mark, the words in the page's ink, hairlines between them */
.wc-r4 .wc-alert { color: var(--wc-navy); font-weight: 500; }
.wc-r4 .wc-alert .wc-ico { color: var(--wc-danger); }
.wc-r4 .wc-alert.is-ok .wc-ico { color: var(--wc-ok); }
.wc-r4 .wc-alert-num { color: var(--wc-danger); }
@media (min-width: 768px) {
    .wc-r4 .wc-alerts { min-block-size: 3rem; padding-block: 0.5rem; }
    .wc-r4 .wc-alert { font-size: 1rem; gap: 0.625rem; }
    .wc-r4 .wc-alert .wc-ico { inline-size: 1.5rem; block-size: 1.5rem; stroke-width: 1.8; }
    .wc-r4 .wc-alerts > * + * { position: relative; }
    .wc-r4 .wc-states { display: none; }   /* the due states are ONE select in the toolbar (a phone keeps its chips) */
    .wc-r4 .wc-views { padding: 0.625rem 0.75rem 0; }
    .wc-r4 .wc-views .wc-tab { min-inline-size: 9.5rem; justify-content: center; min-block-size: 2.75rem; block-size: 2.75rem; font-size: 1rem; font-weight: 500; }
    .wc-r4 .wc-views .wc-tab.is-active { font-weight: 700; }
    .wc-r4.is-scope-department .wc-views .wc-tab { flex: 1 1 0; min-block-size: 2.25rem; block-size: 2.25rem; }   /* its image: three equal parts across the card */
    .wc-r4 .wc-td-owner { font-size: 0.9375rem; text-align: center; }
}
@media (min-width: 1024px) {
    .wc-r4 .wc-alerts > * + *::before { content: ""; position: absolute; inset-block: 0.125rem; inset-inline-start: -0.5rem; border-inline-start: 1px solid var(--wc-line); }
}
/* the company's independent indicators: a plain navy mark, the count in the brand's orange (its image) — a tile
   without a link is still a COUNT, never greyed like a zero */
.wc-r4 .wc-brief.is-six .wc-brief-icon, .wc-r4 .wc-brief.is-six .wc-brief-stat.overdue .wc-brief-icon { background: transparent; color: var(--wc-navy); }
.wc-r4 .wc-brief.is-six .wc-brief-stat .wc-brief-num, .wc-r4 .wc-brief.is-six .wc-brief-stat.is-zero .wc-brief-num, .wc-r4 .wc-brief.is-six .wc-brief-stat.overdue:not(.is-zero) .wc-brief-num { color: var(--wc-figure-act); }
@media (min-width: 768px) {
    .wc-r4 .wc-brief.is-six .wc-brief-icon .wc-ico { inline-size: 2rem; block-size: 2rem; }
    .wc-r4 .wc-brief.is-six .wc-brief-icon { inline-size: 2.25rem; }
    .wc-r4 .wc-brief.is-six .wc-brief-stat { gap: 0.875rem; padding-inline: 1rem; }
    .wc-r4 .wc-brief.is-six .wc-brief-label { font-size: 0.9375rem; }
}
/* the company board's first row, as drawn: the search and its selects at the start, the three views at the end */
@media (min-width: 1240px) {
    .wc-r4.is-scope-company .wc-list { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .wc-r4.is-scope-company .wc-list > * { grid-column: 1 / -1; }
    .wc-r4.is-scope-company .wc-list > .wc-toolbar { grid-column: 1; grid-row: 1; }
    .wc-r4.is-scope-company .wc-list > .wc-views { grid-column: 2; grid-row: 1; padding: 0.5rem 0.75rem; order: 0; }
    .wc-r4.is-scope-company .wc-list:not(:has(> .wc-toolbar)) > .wc-views { grid-column: 1 / -1; justify-self: end; }
    .wc-r4.is-scope-company .wc-views .wc-tab { min-inline-size: 0; padding-inline: 1.125rem; }
}

/* inside «المزيد» the density keeps a control's height and its full width; the funnel stands at the bar's end */
.wc-r4 .wc-more-filters-body .wc-density { display: flex; margin: 0; min-block-size: 2.5rem; }
.wc-r4 .wc-more-filters-body .wc-density-btn { flex: 1 1 0; }
.wc-r4 .wc-more-filters-body > .wc-filter-select { max-inline-size: none; inline-size: 100%; }
@media (min-width: 768px) { .wc-r4 .wc-list:has(> .wc-views) .wc-more-filters { margin-inline-start: auto; } }
@media (max-width: 767.98px) { .wc-r4 .wc-more-filters-body .wc-density { display: none; } .wc-r4 .wc-state-select, .wc-r4 .wc-toolbar > .wc-filter-select.wc-state-select { display: none; } }
/* a tablet keeps the desktop tile, smaller */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .wc-r4 .wc-brief-icon { display: inline-flex; inline-size: 2.5rem; block-size: 2.5rem; }
    .wc-r4 .wc-brief-stat { padding-inline: 0.75rem; gap: 0.625rem; }
    .wc-r4 .wc-scope-chip { min-inline-size: 0; padding-inline: 0.75rem; font-size: 0.9375rem; }
    .wc-r4 .wc-add-btn { min-inline-size: 0; padding-inline: 1rem; font-size: 0.9375rem; }
}
@media (min-width: 1024px) and (max-width: 1239.98px) {
    .wc-r4 .wc-scope-chip { min-inline-size: 6.5rem; padding-inline: 0.875rem; font-size: 1rem; }
    .wc-r4 .wc-add-btn { min-inline-size: 9.5rem; padding-inline: 1rem; font-size: 1rem; }
}

/* ── the approved PHONE (revision-3 phone sheets with revision-4 behaviour). Its drawn controls are 31–36pt tall;
   every touch target here stays 44px and no text goes under 13px — so a block is a few points taller than drawn,
   never smaller to read or to hit. ── */
@media (max-width: 767.98px) {
    .wc-r4 { --wc-fs-title: 1.375rem; --wc-fs-task: 1rem; inline-size: auto; margin-inline: -0.125rem; gap: 0.5rem; }
    .wc-r4 .wc-head { gap: 0.25rem 0.5rem; }   /* P1: title row → scopes 8 → 4 */
    .wc-r4 .wc-services { gap: 0.5rem; }
    .wc-r4 .wc-view-select, .wc-r4 .wc-toolbar > .wc-filter-select.wc-view-select { display: none; }
    .wc-r4 .wc-title { line-height: 1.25; }
    .wc-r4 .wc-add-btn { gap: 0.5rem; min-inline-size: 8.125rem; font-size: 0.9375rem; font-weight: 700; border-radius: 0.625rem; }
    .wc-r4 .wc-scopes, .wc-r4 .wc-scope-chip.is-active { border-radius: 0.625rem; }
    /* the phone sheets draw the scope mark at ~20px, not the desktop's 24 — that is what lets four English
       names keep their icons AND their 15px at 390pt (the type and the 44px target never give way) */
    .wc-r4 .wc-scope-chip { font-size: 0.9375rem; gap: 0.25rem; }
    .wc-r4 .wc-scope-chip .wc-ico { inline-size: 1.25rem; block-size: 1.25rem; }
    .wc-r4 .wc-scope-chip.is-active { font-weight: 700; }

    /* attendance: title · state / shift · hours / place | check-in · pin / the ONE action */
    .wc-r4 .wc-services > .wc-att { padding: 0.5rem 0.625rem; row-gap: 0.125rem; }   /* P1: 8/10 → 8/8 */
    .wc-r4 .wc-services .wc-att > .wc-section-title { font-size: 1.0625rem; }
    .wc-r4 .wc-services .wc-att > .wc-section-title::before { inline-size: 1.5rem; block-size: 1.5rem; }
    .wc-r4 .wc-services .wc-att .wc-att-state { min-block-size: 1.625rem; padding: 0 0.625rem; font-size: 0.8125rem; border-radius: 0.5rem; }
    .wc-r4 .wc-services .wc-att .wc-att-facts { align-items: center; }
    .wc-r4 .wc-services .wc-att .wc-att-facts::after { content: ""; flex: 0 0 auto; inline-size: 1.125rem; block-size: 1.125rem; margin-inline-start: 0.375rem; background: var(--wc-navy); -webkit-mask: var(--wc-i-pin) center / contain no-repeat; mask: var(--wc-i-pin) center / contain no-repeat; }
    .wc-r4 .wc-services .wc-att .wc-att-btn { margin-block-start: 0; font-size: 1rem; font-weight: 600; border-radius: 0.625rem; }   /* P1: 3 → 0 */

    /* the two mini cards, as drawn: «بصمتي / سجل الحضور» · «طلباتي / n / قيد المراجعة» */
    .wc-r4 .wc-services .wc-daily .wc-daily-cards { align-items: stretch; gap: 0.5rem; }
    .wc-r4 .wc-services .wc-daily .wc-daily-card,
    .wc-r4 .wc-services .wc-daily .wc-daily-card.state-in,
    .wc-r4 .wc-services .wc-daily .wc-daily-card.state-out { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center; gap: 0; min-block-size: 4.125rem; padding: 0.25rem 2.5rem; background: var(--wc-card); border: 1px solid var(--wc-line); border-inline-start: 1px solid var(--wc-line); border-radius: var(--wc-radius); }
    .wc-r4 .wc-services .wc-daily .wc-daily-ico { inset-block-start: 0.5rem; inset-inline-start: 0.5rem; }
    .wc-r4 .wc-services .wc-daily .wc-daily-card.is-punch .wc-daily-kicker { order: 2; }
    .wc-r4 .wc-services .wc-daily .wc-daily-card.is-punch .wc-daily-state { order: 3; }
    .wc-r4 .wc-services:has(> .wc-att) .wc-daily .wc-daily-card.is-punch .wc-daily-state { display: none; }   /* said by the card above */
    .wc-r4 .wc-services .wc-daily .wc-daily-name { font-size: 1.0625rem; }
    .wc-r4 .wc-services .wc-daily .wc-daily-kicker, .wc-r4 .wc-services .wc-daily .wc-daily-caption,
    .wc-r4 .wc-services .wc-daily .wc-daily-card.is-requests .wc-daily-name { font-size: 0.8125rem; }
    .wc-r4 .wc-services .wc-daily .wc-daily-btn.is-plus { inset-block-end: 0.125rem; inset-inline-start: 0.125rem; inline-size: 2.75rem; min-inline-size: 2.75rem; block-size: 2.75rem; min-block-size: 2.75rem; border-color: transparent; background: transparent; }
    .wc-r4 .wc-services .wc-daily .wc-daily-btn.is-plus .wc-ico { inline-size: 1.5rem; block-size: 1.5rem; padding: 0.125rem; border: 1px solid var(--wc-act); border-radius: 0.375rem; background: var(--wc-card); }

    /* the four figures: icon + label, the number under them — centred */
    .wc-r4 .wc-brief-stat { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; align-content: center; gap: 0.125rem 0.375rem; padding: 0.5rem 0.625rem; min-block-size: 4rem; text-align: start; }
    .wc-r4 .wc-brief-text { display: contents; }
    .wc-r4 .wc-brief-icon, .wc-r4 .wc-brief-stat.overdue .wc-brief-icon, .wc-r4 .wc-brief-stat.open .wc-brief-icon, .wc-r4 .wc-brief-stat.teams .wc-brief-icon,
    .wc-r4 .wc-brief-stat.due_today .wc-brief-icon, .wc-r4 .wc-brief-stat.approvals .wc-brief-icon { display: inline-flex; order: 0; inline-size: auto; block-size: auto; background: transparent; border-radius: 0; }
    .wc-r4 .wc-brief-icon .wc-ico { inline-size: 1rem; block-size: 1rem; }
    .wc-r4 .wc-brief-label { order: 1; font-size: 0.8125rem; font-weight: 500; color: var(--wc-ink-2); white-space: nowrap; overflow: visible; text-overflow: clip; }
    .wc-r4 .wc-brief-num { order: 2; grid-column: 1 / -1; justify-self: start; }

    /* the list: its name, the chips, search + ONE funnel, then SEPARATE task cards with a document mark */
    .wc-r4 .wc-grid-table { gap: 0.5rem; padding: 0 0.5rem 0.5rem; border-block-start: 0; }
    .wc-r4 .wc-grid-table .wc-tr:not(.wc-thead) { border: 1px solid var(--wc-line); border-radius: 0.75rem; background: var(--wc-card); padding-block: 0.4375rem; padding-inline-start: 2.625rem; }
    .wc-r4 .wc-toolbar { padding-block: 0.375rem; }
    .wc-r4 .wc-list > .wc-tabs { padding-block-start: 0.5rem; }   /* P2: the tabs open the list card now */
    .wc-r4 .wc-grid-table .wc-tr:not(.wc-thead)::before { content: ""; position: absolute; inset-block-start: 0.625rem; inset-inline-start: 0.625rem; inline-size: 1.5rem; block-size: 1.5rem; background: var(--wc-navy); -webkit-mask: var(--wc-i-doc) center / contain no-repeat; mask: var(--wc-i-doc) center / contain no-repeat; }
    .wc-r4 .wc-grid-table .wc-tr.is-selected { border-color: var(--wc-act); }
    /* the title and what is asked share the first line with the ONE action (top-aligned, 44px); due · state · source
       take the card's whole width under them — three chips no longer wrap beside a button */
    .wc-r4 .wc-tr:has(> .wc-td-due) { padding-inline-end: 0.625rem; }
    .wc-r4 .wc-tr:has(> .wc-td-due) > .wc-td-task { order: 1; flex: 1 1 calc(100% - 6.5rem); min-inline-size: 0; }
    .wc-r4 .wc-tr:has(> .wc-td-due) > .wc-td-action { position: static; transform: none; order: 2; flex: 0 0 auto; align-self: flex-start; }
    .wc-r4 .wc-grid-table .wc-td-due { order: 3; }
    .wc-r4 .wc-grid-table .wc-td-status { order: 4; }
    .wc-r4 .wc-grid-table .wc-td-source { order: 5; flex: 0 1 auto; }
    .wc-r4 .wc-grid-table .wc-td-due .wc-due { min-block-size: 1.625rem; }
    .wc-r4 .wc-task-next { font-size: 0.8125rem; }
    .wc-r4 .wc-chip, .wc-r4 .wc-status { font-size: 0.8125rem; min-block-size: 1.625rem; padding-inline: 0.625rem; }
    .wc-r4 .wc-act { font-size: 0.9375rem; font-weight: 700; border-radius: 0.5rem; }
    .wc-r4 .wc-pager { padding: 0.5rem 0.625rem 0.625rem; }
    .wc-r4 .wc-pager-count { font-size: 0.9375rem; }
}

/* a phone's management windows, as their sheet draws them */
@media (max-width: 767.98px) {
    /* the three views: the active one is TINTED with the brand's edge (the desktop fills it) */
    .wc-r4 .wc-views .wc-tab .wc-ico { display: inline-flex; }
    .wc-r4 .wc-views .wc-tab.is-active { background: var(--wc-act-soft); border-color: var(--wc-act); color: var(--wc-act-ink); box-shadow: inset 0 0 0 1px var(--wc-act); font-weight: 700; }
    /* a team / a member / a department: its name, then its counts EACH UNDER ITS OWN NAME, and the one action */
    .wc-r4 .wc-people .wc-tr:not(.wc-thead), .wc-r4 .wc-departments .wc-tr:not(.wc-thead) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; gap: 0.25rem 0.5rem; padding: 0.625rem; }
    .wc-r4 .wc-people .wc-tr:not(.wc-thead)::before, .wc-r4 .wc-departments .wc-tr:not(.wc-thead)::before { content: none; }
    .wc-r4 .wc-people .wc-td[data-label], .wc-r4 .wc-departments .wc-td[data-label] { flex-direction: column; align-items: flex-start; gap: 0; }
    .wc-r4 .wc-people .wc-td[data-label]::before, .wc-r4 .wc-departments .wc-td[data-label]::before { content: attr(data-label); font-size: 0.75rem; line-height: 1.3; color: var(--wc-muted); }
    .wc-r4 .wc-people .wc-people-num, .wc-r4 .wc-departments .wc-people-num { font-size: 1.125rem; font-weight: 700; }
    .wc-r4 .wc-people .wc-tr.wc-team-pager { display: block; }
}
/* 320px: the words keep their size — the small marks give way */
@media (max-width: 359.98px) {
    .wc-r4 .wc-views .wc-tab .wc-ico, .wc-r4 .wc-brief-icon, .wc-r4 .wc-brief-stat.open .wc-brief-icon, .wc-r4 .wc-brief-stat.overdue .wc-brief-icon,
    .wc-r4 .wc-brief-stat.due_today .wc-brief-icon, .wc-r4 .wc-brief-stat.approvals .wc-brief-icon, .wc-r4 .wc-brief-stat.teams .wc-brief-icon { display: none; }
    .wc-r4 .wc-services .wc-att .wc-att-facts::after { content: none; }
    .wc-r4 .wc-services .wc-att > .wc-section-title { font-size: 1rem; white-space: nowrap; }
    .wc-r4 .wc-services .wc-att .wc-att-state { padding-inline: 0.5rem; font-size: 0.75rem; }
    .wc-r4 .wc-services .wc-daily .wc-daily-card { padding-inline: 2rem; }
}

/* ── item 5 (owner ruling 2026-09-21): the company's status line under its indicators — when it was read, and
   how many records need attention (the «يحتاج انتباهك» tab's own number) ── */
.wc-r4 .wc-company-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; margin: 0; padding: 0.5rem 1rem; background: var(--wc-card); border: 1px solid var(--wc-line); border-radius: var(--wc-radius); font-size: var(--wc-fs-second); line-height: 1.45; color: var(--wc-ink-2); }
.wc-r4 .wc-company-status-item { display: inline-flex; align-items: center; gap: 0.5rem; min-inline-size: 0; }
.wc-r4 .wc-company-status-item strong { color: var(--wc-navy); font-weight: 600; font-variant-numeric: tabular-nums; }
.wc-r4 .wc-company-status-item .wc-ico { inline-size: 1.25rem; block-size: 1.25rem; color: var(--wc-muted); }
.wc-r4 .wc-company-status-item.is-attention { color: var(--wc-navy); font-weight: 500; }
.wc-r4 .wc-company-status-item.is-attention .wc-ico { color: var(--wc-danger); }
.wc-r4 .wc-company-status-item.is-ok .wc-ico { color: var(--wc-ok); }
@media (min-width: 768px) {
    .wc-r4 > .wc-company-status { order: -1; }   /* right under the indicators (the figures carry order -1 too; DOM order keeps it after them) */
    .wc-r4 .wc-company-status-item + .wc-company-status-item { padding-inline-start: 1.5rem; border-inline-start: 1px solid var(--wc-line); }
}
@media (max-width: 767.98px) {
    .wc-r4 .wc-company-status { gap: 0.25rem 1rem; padding: 0.5rem 0.75rem; }
}

/* an item only its own adapter may act on, which declined it: the reason, inside the panel */
.wc-r4 .wc-panel-refusal { margin: 0.875rem; line-height: 1.6; }

/* review 2026-09-21: the phone's three views (company · team · department) never run past their strip — three equal
   columns; the count may drop under its name, a name is never cut; icons give way under 430px (as the scope switch
   does); 13px under 360px (above the 12px floor); every tab a 44px target */
@media (max-width: 767.98px) {
    .wc-r4 .wc-views .wc-tab { flex: 1 1 0; min-inline-size: 0; min-block-size: 2.75rem; block-size: auto; padding: 0.25rem; gap: 0 0.25rem; flex-wrap: wrap; align-content: center; justify-content: center; text-align: center; line-height: 1.2; }
    .wc-r4 .wc-views .wc-tab > span { white-space: nowrap; }
    .wc-r4.is-scope-department .wc-views .wc-tab { min-block-size: 2.75rem; block-size: auto; }
}
@media (max-width: 429.98px) { .wc-r4 .wc-views .wc-tab .wc-ico { display: none; } }
@media (max-width: 359.98px) { .wc-r4 .wc-views .wc-tab { font-size: 0.8125rem; } }

/* review 2026-09-21: the app's dictation glyph (homei-dictation.js) is painted 7px from the PAGE's inline end — the
   left in Arabic — on every text field, and reserves no room: a number typed in a dir="auto" field ran under it.
   The panel's fields keep 28px free on the glyph's side. */
html[dir="rtl"] .wc-r4 .wc-panel .wc-qa-input:is(input[type="text"], input[type="search"], textarea) { padding-left: 1.75rem; }
html:not([dir="rtl"]) .wc-r4 .wc-panel .wc-qa-input:is(input[type="text"], input[type="search"], textarea) { padding-right: 1.75rem; }

/* usability fix 2026-09-21 — the action in the panel is always reachable: the open form's button (and its draft
   line) is a footer pinned to the bottom of the panel; beside the list the panel ends at the bottom of the screen
   (--wc-panel-max, set from where the panel really starts), so the footer is on the first screen */
.wc-r4 .wc-panel-footer { position: sticky; inset-block-end: 0; z-index: 2; display: flex; flex-direction: column; gap: 0.375rem; margin-inline: -1rem; padding: 0.625rem 1rem; background: var(--wc-card); border-block-start: 1px solid var(--wc-line); }
.wc-r4 .wc-panel-footer .wc-panel-cta { position: static; padding-block: 0; background: none; }
.wc-r4 .wc-panel-footer .wc-draft-line { margin: 0; }
@media (min-width: 768px) {
    .wc-r4 .wc-panel-footer { margin-inline: -1.25rem; padding-inline: 1.25rem; }
}
@media (min-width: 1100px) {
    .wc-r4 .wc-panel { max-block-size: var(--wc-panel-max, calc(100vh - 6rem)); }
}
/* the footer meets the panel's bottom edge — no strip of content shows under it */
.wc-r4 .wc-panel:has(> .wc-panel-footer) { padding-block-end: 0; }
.wc-r4 .wc-panel:has(> .wc-panel-footer) > .wc-panel-footer { padding-block-end: calc(0.75rem + env(safe-area-inset-bottom, 0px)); }
.wc-r4 .wc-panel:has(> .wc-panel-footer) > .wc-original { margin-block-end: 1rem; }

/* usability fix 2026-09-21 — the toolbar never cuts a word to «…»: the search takes the free room, a select is as
   wide as its own words, and when the bar is short of room (the editor is open beside the list) the order and the
   density move into the named «فلاتر إضافية» menu — the SAME methods. The width that decides it is the LIST's own. */
.wc-r4 .wc-list { container: wc-list / inline-size; }
@media (min-width: 768px) {
    .wc-r4 .wc-toolbar .wc-search { flex: 1 1 17.5rem; max-inline-size: none; min-inline-size: 17.5rem; }
    .wc-r4[dir="ltr"] .wc-toolbar .wc-search { flex-basis: 21rem; min-inline-size: 21rem; }   /* its hint is longer in English */
    .wc-r4 .wc-toolbar > .wc-filter-select { flex: 0 0 auto; max-inline-size: none; text-overflow: clip; }
    .wc-r4 .wc-filter-more { inline-size: auto; gap: 0.375rem; padding-inline: 0.75rem; white-space: nowrap; font-size: var(--wc-fs-second); font-weight: 500; }
    .wc-r4 .wc-more-filters .wc-menu-secondary { display: none; }
    @container wc-list (max-width: 1199.98px) {
        .wc-r4 .wc-toolbar > .wc-bar-secondary { display: none; }
        .wc-r4 .wc-more-filters .wc-density.wc-menu-secondary { display: flex; }
        .wc-r4 .wc-more-filters select.wc-menu-secondary { display: block; }
    }
    /* English words are longer: the same move happens on a wider list */
    @container wc-list (max-width: 1399.98px) {
        .wc-r4[dir="ltr"] .wc-toolbar > .wc-bar-secondary { display: none; }
        .wc-r4[dir="ltr"] .wc-more-filters .wc-density.wc-menu-secondary { display: flex; }
        .wc-r4[dir="ltr"] .wc-more-filters select.wc-menu-secondary { display: block; }
        .wc-r4.is-scope-company[dir="ltr"] .wc-list > .wc-toolbar, .wc-r4.is-scope-company[dir="ltr"] .wc-list > .wc-views { grid-column: 1 / -1; grid-row: auto; justify-self: stretch; }
    }
    /* the company board: when the list is too narrow for its views AND its tools on one row, each takes its own */
    @container wc-list (max-width: 1149.98px) {
        .wc-r4.is-scope-company .wc-list > .wc-toolbar, .wc-r4.is-scope-company .wc-list > .wc-views { grid-column: 1 / -1; grid-row: auto; justify-self: stretch; }
    }
}
@media (max-width: 767.98px) {
    /* a phone keeps its square funnel (the label is still read out) — its menu already holds the selects */
    .wc-r4 .wc-filter-more-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .wc-r4 .wc-more-filters .wc-menu-secondary { display: none; }
}
/* the menu is as wide as its widest control — a select inside it never ends in «…» either */
@media (min-width: 768px) {
    .wc-r4 .wc-more-filters-body { inline-size: max-content; min-inline-size: 14rem; max-inline-size: min(26rem, 90vw); }
    .wc-r4 .wc-more-filters-body .wc-filter-select { inline-size: 100%; max-inline-size: none; text-overflow: clip; }
}

/* usability fix 2026-09-21 — a phone task card on three short lines: the title, what is asked, then ONE line of
   when · state · source. Nothing is smaller (fonts and the 44px action keep their sizes) and nothing is lost:
   «المطلوب:» stays printed on every card (the owner's ruling: what is asked must read as an action); an overdue
   task's date is said by its lateness and is still read out and in the tooltip — it is just not printed twice. */
@media (max-width: 767.98px) {
    .wc-r4 .wc-grid-table:not(.has-owner) .wc-td-due .wc-due.is-danger > span[dir] { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .wc-r4 .wc-grid-table:not(.has-owner) .wc-tr { row-gap: 0.25rem; }
    .wc-r4 .wc-grid-table:not(.has-owner) .wc-td-due,
    .wc-r4 .wc-grid-table:not(.has-owner) .wc-td-status,
    .wc-r4 .wc-grid-table:not(.has-owner) .wc-td-source { flex: 0 0 auto; }
}
@media (max-width: 767.98px) {
    /* the document mark sits beside the title only: its indent belongs to the title's cell, so the
       when · state · source line takes the card's whole width (the mark itself is placed absolutely) */
    .wc-r4 .wc-grid-table:not(.has-owner) .wc-tr:not(.wc-thead) { padding-inline-start: 0.625rem; }
    .wc-r4 .wc-grid-table:not(.has-owner) .wc-tr:not(.wc-thead) > .wc-td-task { padding-inline-start: 2rem; }
}

/* usability fix 2026-09-21 — a phone's chip rows (the «أنا» sections, the due states, the company filters) never run
   off the screen: the first chips and the active one stay in the row, the rest open from ONE named chip
   «المزيد (n)»; a chip keeps its whole words and its 44px */
.wc-r4 .wc-chips-more { position: relative; display: flex; }
.wc-r4 .wc-chips-more > summary { list-style: none; cursor: pointer; }
.wc-r4 .wc-chips-more > summary::-webkit-details-marker { display: none; }
.wc-r4 .wc-chips-more[open] > summary { border-color: var(--wc-act); }
.wc-r4 .wc-chips-more-body { position: absolute; inset-block-start: calc(100% + 0.375rem); inset-inline-end: 0; z-index: 6; display: flex; flex-direction: column; gap: 0.375rem; min-inline-size: 13rem; max-inline-size: calc(100vw - 2rem); padding: 0.5rem; background: var(--ho-surface-raised); border: 1px solid var(--wc-line); border-radius: 0.75rem; box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.14); }
.wc-r4 .wc-chips-more-body .wc-tab { justify-content: space-between; inline-size: 100%; white-space: nowrap; }
@media (max-width: 767.98px) {
    .wc-r4 .wc-chip-row { flex-wrap: wrap; overflow: visible; }
    .wc-r4 .wc-chip-row > .wc-tab, .wc-r4 .wc-chip-row > .wc-chips-more { flex: 1 1 auto; }
    .wc-r4 .wc-chip-row > .wc-tab, .wc-r4 .wc-chip-row > .wc-chips-more > summary { justify-content: center; min-block-size: 2.75rem; white-space: nowrap; }
    .wc-r4 .wc-chip-row > .wc-chips-more > summary { inline-size: 100%; }
    .wc-r4 .wc-chips-more-body .wc-tab { min-block-size: 2.75rem; }
}
.wc-r4 .wc-chips-more-caret { inline-size: 1rem; block-size: 1rem; transition: transform 0.15s; }
.wc-r4 .wc-chips-more[open] .wc-chips-more-caret { transform: rotate(180deg); }
@media (max-width: 767.98px) {
    /* 10px of side room in a phone's chip rows (the words and the 44px height unchanged) — the rows fit one line */
    .wc-r4 .wc-chip-row > .wc-tab, .wc-r4 .wc-chip-row > .wc-chips-more > summary { padding-inline: 0.625rem; gap: 0.375rem; }
}
/* the search keeps room for the app's dictation glyph too — the words never run under it; a phone gets the short
   hint («ابحث في القائمة»), so no word is cut at 320px (the field's own label still names what it searches) */
html[dir="rtl"] .wc-r4 .wc-search .wc-filter-q { padding-left: 1.75rem; }
html:not([dir="rtl"]) .wc-r4 .wc-search .wc-filter-q { padding-right: 1.75rem; }

/* usability fix 2026-09-22 — a phone's four figures keep whole names. As the approved Arabic phone draws them, each
   cell is as wide as its own name (the longest gets the widest cell) with 8px of side room; where mark + name still do
   not fit, the small mark gives way and the name keeps its 13px (the 320px rule — reached sooner by the English names) */
@media (max-width: 767.98px) {
    .wc-r4 .wc-brief:not(.is-six) { grid-template-columns: repeat(4, auto); }
    .wc-r4 .wc-brief:not(.is-six) .wc-brief-stat { padding-inline: 0.5rem; }
}
@media (max-width: 379.98px) {
    html:not([dir="rtl"]) .wc-r4 .wc-brief:not(.is-six) .wc-brief-icon { display: none; }
}
/* 320px: the attendance title never runs under its state — its clock mark gives way, and a name that is still too long
   wraps whole words instead of sliding beneath the pill */
@media (max-width: 359.98px) {
    .wc-r4 .wc-services .wc-att > .wc-section-title::before { content: none; }
    .wc-r4 .wc-services .wc-att > .wc-section-title { white-space: normal; }
}
/* a phone's «المطلوب: …» line wraps BETWEEN its facts, never inside one: a code (TSK-0001), an amount (EGP 4,600) or a
   name moves to the next line whole; only a fact longer than the whole line wraps inside itself */
@media (max-width: 767.98px) {
    .wc-r4 .wc-task-next .wc-fact, .wc-r4 .wc-task-next > bdi { display: inline-block; max-inline-size: 100%; }
}
@media (max-width: 767.98px) {
    /* the company's indicators are phrases, not one-word figures: on a phone a name wraps whole words and never runs
       past its cell («Approvals past their SLA» was cut to «…their SL» at 360) */
    .wc-r4 .wc-brief.is-six .wc-brief-label { white-space: normal; }
}

/* ── خدماتي اليومية / My Daily Services ─────────────────────────────
   RESTORED 2026-09-09. The markup for these two cards reached `main`
   without its stylesheet: the branch commits carried blade + CSS
   together, but the commit that landed the feature on main
   (33af5eca4, #1196) contains the blade, the provider, the language
   files and the tests — and no CSS hunk at all. With no rule matching
   `.wc-daily*`, the `dl`/`dd` markup fell back to browser defaults and
   the punch and requests cards rendered as bare stacked text with the
   em-dashes stretched across the page (production screenshot,
   2026-09-09). Nothing about the data changed — shift, flexible
   schedule, states and links are the provider's, untouched.

   Layout: ONE column on phones, two balanced equal-height columns from
   640px. Component-scoped: every selector here starts at `.wc-daily`
   or one of its own `.wc-daily-*` children, so no other Work Center
   surface can be reached. Logical properties only — one sheet serves
   AR (RTL) and EN (LTR) — and nothing sets a minimum inline size, so a
   card shrinks with the viewport instead of pushing it. */
.wc-daily-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.625rem;
    align-items: stretch;
}

@media (min-width: 640px) {
    .wc-daily-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wc-daily-card {
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-inline-start: 3px solid var(--wc-accent);
    border-radius: var(--wc-radius);
    padding: 0.75rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-inline-size: 0;
}

.wc-daily-card.state-in { border-inline-start-color: var(--wc-warn); }
.wc-daily-card.state-out { border-inline-start-color: var(--wc-ok); }

.wc-daily-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wc-daily-name { font-size: 0.9375rem; font-weight: 700; }

.wc-daily-state {
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
    background: var(--wc-soft);
    color: var(--wc-muted);
}

.wc-daily-card.state-in .wc-daily-state { background: var(--wc-warn-soft); color: var(--wc-warn-ink); }
.wc-daily-card.state-out .wc-daily-state { background: var(--wc-ok-soft); color: var(--wc-ok-ink); }

/* Each fact is a compact label/value pair. `dt` and `dd` are block-level
   by default, which is exactly what stretched a lone “—” across the
   whole card; here the pair sits inline and only the row wraps. */
.wc-daily-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1rem;
    margin: 0;
}

.wc-daily-fact { display: flex; gap: 0.375rem; align-items: baseline; min-inline-size: 0; }
.wc-daily-fact dt { color: var(--wc-muted); font-size: 0.75rem; }
.wc-daily-fact dd { margin: 0; font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wc-daily-shift { overflow-wrap: anywhere; }

.wc-daily-count { font-size: 0.8125rem; color: var(--wc-muted); display: inline-flex; align-items: baseline; gap: 0.25rem; }
.wc-daily-num { font-size: 1.125rem; font-weight: 700; color: var(--wc-accent); }
.wc-daily-count.is-zero .wc-daily-num { color: var(--wc-muted); }

/* Actions sit at the bottom of the card, so the two cards' buttons keep
   one baseline however tall their content is. */
.wc-daily-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: auto;
}

.wc-daily-btn {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--wc-accent);
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0.375rem 0.875rem;
    text-align: center;
    flex: 1 1 auto;
    min-inline-size: 0;
}

.wc-daily-btn.is-primary { background: var(--wc-accent); color: #fff; border-color: var(--wc-accent); }
.wc-daily-btn:hover { filter: brightness(0.95); }

/* ── My Daily Services · phone layout (< 640px) ─────────────────────
   TWO equal columns (owner ruling 2026-09-19, reversing the one-column
   ruling of 2026-09-09): «بصمتي» and «طلباتي» sit side by side on 360px
   and 390px, because the attendance card above them now carries the
   day's detail and the pair only needs to be compact. Everything here is
   scoped under `.wc-daily` and lives ONLY inside this max-width block —
   nothing at 640px and above changes by a single declaration. Cards
   stretch to equal height with the actions at the bottom; facts stack so
   a 160px column never squeezes a label against its value. Buttons keep a
   44px touch target and may wrap to two lines; the shift name clamps to
   two lines visually while its value stays whole. */
@media (max-width: 639.98px) {
    .wc-daily .wc-daily-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        align-items: stretch;
    }

    .wc-daily .wc-daily-card {
        padding: 0.625rem;
        gap: 0.375rem;
        min-inline-size: 0;
    }

    .wc-daily .wc-daily-head { flex-direction: column; align-items: flex-start; gap: 0.25rem; }

    .wc-daily .wc-daily-name { font-size: 0.875rem; }

    .wc-daily .wc-daily-state {
        font-size: var(--ho-text-xs);
        padding: 0.0625rem 0.4375rem;
        max-inline-size: 100%;
        overflow-wrap: anywhere;
    }

    .wc-daily .wc-daily-facts { flex-direction: column; gap: 0.125rem; }
    .wc-daily .wc-daily-fact { flex-wrap: wrap; gap: 0.25rem; }
    .wc-daily .wc-daily-fact dt { font-size: var(--ho-text-xs); }
    .wc-daily .wc-daily-fact dd { font-size: 0.75rem; overflow-wrap: anywhere; min-inline-size: 0; }

    .wc-daily .wc-daily-shift {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .wc-daily .wc-daily-count { flex-wrap: wrap; font-size: 0.75rem; }
    .wc-daily .wc-daily-num { font-size: 1rem; }

    .wc-daily .wc-daily-actions {
        flex-direction: column;
        gap: 0.375rem;
        margin-block-start: auto;
    }

    .wc-daily .wc-daily-btn {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        min-block-size: 2.75rem;
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   WC-DIRECT-1 — the «أنا» window as the owner's direct board
   (homei-work-center-handoff, 23-9-2026). Every colour is a token: the
   design's palette is the Live Manager's (--lm-d-*, dark mirror included)
   plus the few roles it lacks (--wcd-*, tokens.css). Sizes are the
   reference's (1440 desktop / 390 phone), except the 11–11.5px captions, lifted to the 12px floor (TypeFloorTest).
   ══════════════════════════════════════════════════════════════════════ */
body:has(.wcd) { background: var(--lm-d-page); }
body:has(.wcd) .fi-main-ctn { background: transparent; }
/* the row panel's modals and the drawer sit above the page; an action's modal above both */
body:has(.wcd) .fi-modal-close-overlay, body:has(.wcd) .fi-modal-window-ctn { z-index: 60; }
.wc.is-direct { max-inline-size: none; }

.wcd {
    --wcd-r: 14px;
    font-family: 'Cairo', var(--font-family, system-ui), sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--lm-d-ink);
    display: flex;
    flex-direction: column;
    gap: 16px;
    -webkit-font-smoothing: antialiased;
}
.wcd [x-cloak] { display: none !important; }
.wcd-ic { inline-size: 18px; block-size: 18px; flex: none; stroke-width: 1.8; }
.wcd-num { font-feature-settings: "tnum"; }
.wcd bdi { unicode-bidi: isolate; }
.wcd-grow { flex: 1; }
.wcd-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.wcd :focus-visible { outline: 2px solid var(--lm-d-accent); outline-offset: 2px; }
[dir="ltr"] .wcd .wcd-flip { transform: scaleX(-1); }
.wcd button { font-family: inherit; }

/* buttons */
.wcd-btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; block-size: 42px; padding: 0 18px; border-radius: 10px; font-weight: 700; font-size: 14px; border: 1px solid transparent; white-space: nowrap; cursor: pointer; background: transparent; color: var(--lm-d-ink); }
.wcd-btn:disabled { opacity: .5; cursor: default; }
.wcd-btn-sm { block-size: 36px; padding: 0 14px; font-size: 13.5px; }
.wcd-btn-xs { block-size: 28px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.wcd-btn-row { block-size: 32px; padding: 0 12px; font-size: 13.5px; border-radius: 8px; }
.wcd-btn-p { background: var(--lm-d-accent); color: var(--lm-d-on-accent); border-color: var(--lm-d-accent); }
.wcd-btn-s { background: var(--lm-d-surface); color: var(--lm-d-ink); border-color: var(--lm-d-control-edge); }
.wcd-btn-s.is-danger { color: var(--lm-d-danger); border-color: var(--lm-d-gap-edge); }
.wcd-btn-danger { background: var(--lm-d-danger); color: var(--lm-d-on-accent); border-color: var(--lm-d-danger); }
.wcd-btn-g { background: transparent; color: var(--lm-d-tab-on-ink); border-color: var(--wcd-bar-edge); }
.wcd-btn-i { inline-size: 34px; block-size: 34px; padding: 0; background: var(--lm-d-surface); border-color: var(--lm-d-control-edge); position: relative; }
.wcd-link { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 700; color: var(--lm-d-info); background: none; border: 0; cursor: pointer; text-decoration: none; }
.wcd-link .wcd-ic { inline-size: 14px; block-size: 14px; }
.wcd-card { background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: var(--wcd-r); box-shadow: 0 1px 2px var(--lm-d-shadow); }
.wcd-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; }
.tone-warn.wcd-badge { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }
.tone-danger.wcd-badge { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.tone-ok.wcd-badge { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.tone-info.wcd-badge { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.tone-quiet.wcd-badge { background: var(--lm-d-quiet-bg); color: var(--lm-d-muted); }

/* ── head ── */
.wcd-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wcd-head-text { min-inline-size: 0; flex: 1 1 18rem; }
@media (min-width: 1024px) { .wcd-head { flex-wrap: nowrap; } .wcd-head > .wcd-grow { display: none; } .wcd-att-strip { max-inline-size: 30rem; } }
.wcd-title { font-size: 28px; font-weight: 800; line-height: 1.3; color: var(--lm-d-ink); margin: 0; }
.wcd-lead { font-size: 14px; color: var(--lm-d-muted); margin: 2px 0 0; }
.wcd-scopes { display: inline-flex; gap: 2px; background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 10px; padding: 3px; }
.wcd-scope { block-size: 30px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: var(--lm-d-muted); text-decoration: none; }
.wcd-scope.is-on { background: var(--lm-d-accent-soft); color: var(--lm-d-accent-ink); }
.wcd-att { display: contents; }
.wcd-att-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 12px; padding: 6px 14px 6px 6px; min-block-size: 54px; }
[dir="rtl"] .wcd-att-strip { padding: 6px 6px 6px 14px; }
.wcd-att-ico { inline-size: 38px; block-size: 38px; border-radius: 10px; background: var(--lm-d-warn-soft); color: var(--lm-d-warn); display: grid; place-items: center; }
.wcd-att-strip.state-in .wcd-att-ico, .wcd-att-strip.state-out .wcd-att-ico { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.wcd-att-text b { display: block; font-size: 13.5px; line-height: 1.3; white-space: nowrap; }
.wcd-att-text span { font-size: 12px; color: var(--lm-d-muted); white-space: nowrap; }
.wcd-att-msgs { flex-basis: 100%; display: contents; }
.wcd-att-msg { flex-basis: 100%; margin: 0; font-size: 12px; font-weight: 600; padding-inline: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcd-att-msg.is-ok { color: var(--lm-d-ok); }
.wcd-att-msg.is-bad { color: var(--lm-d-danger); }
.wcd-att-msg.is-warn { color: var(--lm-d-warn); }

.wcd-note { display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 10px 14px; font-size: 13.5px; background: var(--lm-d-info-soft); color: var(--lm-d-ink); border: 1px solid var(--wcd-info-line); }
.wcd-note.is-warn { background: var(--lm-d-warn-soft); border-color: var(--lm-d-accent-line); }
.wcd-note.is-danger { background: var(--lm-d-danger-soft); border-color: var(--lm-d-gap-edge); color: var(--lm-d-danger); }

/* ── the five cards ── */
.wcd-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.wcd-k { display: flex; align-items: center; gap: 12px; text-align: start; background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: var(--wcd-r); padding: 12px 16px; cursor: pointer; color: var(--lm-d-ink); min-inline-size: 0; }
.wcd-k:disabled { cursor: default; }
.wcd-k.is-on { border-color: var(--lm-d-accent-line); box-shadow: inset -3px 0 0 var(--lm-d-accent); }
[dir="ltr"] .wcd-k.is-on { box-shadow: inset 3px 0 0 var(--lm-d-accent); }
.wcd-k-ico { inline-size: 40px; block-size: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.wcd-k.tone-accent .wcd-k-ico { background: var(--lm-d-accent-soft); color: var(--lm-d-accent-ink); }
.wcd-k.tone-info .wcd-k-ico { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.wcd-k.tone-ai .wcd-k-ico { background: var(--wcd-ai-soft); color: var(--lm-d-ai); }
.wcd-k.tone-danger .wcd-k-ico { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.wcd-k.tone-ok .wcd-k-ico { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.wcd-k-body { display: flex; flex-direction: column; min-inline-size: 0; }
.wcd-k-l { font-size: 13px; color: var(--lm-d-muted); font-weight: 600; line-height: 1.3; }
.wcd-k-v { font-size: 24px; font-weight: 800; line-height: 1.2; display: inline-flex; align-items: baseline; gap: 6px; }
.wcd-k-v.is-text { font-size: 17px; line-height: 1.5; }
.wcd-k-dot { color: var(--lm-d-muted); font-size: 16px; }
.wcd-k-unit { font-size: 12.5px; font-weight: 600; color: var(--lm-d-muted); }
.wcd-k-plus { font-size: 14px; color: var(--lm-d-muted); }
.wcd-k-s { font-size: 12px; font-weight: 700; }
.wcd-k-s.tone-danger { color: var(--lm-d-danger); }
.wcd-k-s.tone-ok { color: var(--lm-d-ok); }
.wcd-k-s.tone-info { color: var(--lm-d-info); }
.wcd-k-s.tone-quiet { color: var(--lm-d-subtle); font-weight: 500; }
.wcd-k-go { margin-inline-start: auto; color: var(--lm-d-subtle); }
.wcd-k-go .wcd-ic { inline-size: 16px; block-size: 16px; }

/* ── the grid: table | side ── */
.wcd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.wcd-col { display: flex; flex-direction: column; gap: 16px; min-inline-size: 0; }

/* table toolbar */
.wcd-tb { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-block-end: 1px solid var(--lm-d-border); }
.wcd-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-inline-size: 0; }
.wcd-tab { block-size: 34px; display: flex; align-items: center; gap: 6px; padding: 0 11px; border-radius: 9px; font-weight: 700; color: var(--lm-d-muted); font-size: 13px; white-space: nowrap; border: 0; background: transparent; cursor: pointer; }
.wcd-tab-c { font-size: 12px; color: var(--lm-d-subtle); }
.wcd-tab.is-lm { color: var(--lm-d-ai); }
.wcd-tab.is-on { background: var(--lm-d-tab-on-bg); color: var(--lm-d-tab-on-ink); }
.wcd-tab.is-on .wcd-tab-c { color: var(--lm-d-tab-on-count); }
.wcd-search { display: flex; align-items: center; gap: 8px; inline-size: 150px; block-size: 34px; border: 1px solid var(--lm-d-border); border-radius: 10px; padding: 0 10px; color: var(--lm-d-subtle); background: var(--lm-d-surface); }
.wcd-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; inline-size: 100%; min-inline-size: 0; color: var(--lm-d-ink); padding: 0; box-shadow: none; }
.wcd-search .wcd-ic { inline-size: 16px; block-size: 16px; }
.wcd-filter { position: relative; }
.wcd-filter-n { position: absolute; inset-block-start: -6px; inset-inline-end: -6px; min-inline-size: 18px; block-size: 18px; border-radius: 9px; background: var(--lm-d-accent); color: var(--lm-d-on-accent); font-size: 12px; display: grid; place-items: center; }
.wcd-menu { position: absolute; z-index: 30; inset-block-start: calc(100% + 6px); inset-inline-end: 0; background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 12px; box-shadow: 0 8px 24px var(--wcd-toast-shadow); padding: 8px; display: flex; flex-direction: column; gap: 4px; min-inline-size: 190px; }
.wcd-filter-menu { min-inline-size: 240px; gap: 8px; padding: 12px; }
.wcd-filter-menu label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--lm-d-muted); }
.wcd-filter-menu select, .wcd-snooze-date input { block-size: 34px; border: 1px solid var(--lm-d-border); border-radius: 8px; background: var(--lm-d-surface); color: var(--lm-d-ink); font: inherit; font-size: 13px; padding: 0 8px; }
.wcd-menu > button { text-align: start; background: transparent; border: 0; border-radius: 8px; padding: 8px 10px; font-size: 13.5px; font-weight: 600; color: var(--lm-d-ink); cursor: pointer; }
.wcd-menu > button:hover { background: var(--lm-d-hover); }

.wcd-strip { display: flex; align-items: flex-start; gap: 10px; margin: 12px 14px 0; padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; }
.wcd-strip.is-danger { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.wcd-strip.is-ok { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.wcd-strip.is-warn { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }
.wcd-strip.is-info { background: var(--lm-d-info-soft); color: var(--lm-d-ink); font-weight: 600; }
/* phase 2 */
.wcd-today { display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
.wcd-today-body { flex: 1; min-inline-size: 0; }
.wcd-today-t { display: block; font-size: 13px; font-weight: 700; color: var(--lm-d-ai); }
.wcd-today-body p { margin: 2px 0 0; font-size: 14px; line-height: 1.75; color: var(--lm-d-ai-ink); }
.wcd-group { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-block-end: 1px solid var(--lm-d-divider); font-size: 13px; font-weight: 700; }
.wcd-group::before { content: ''; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }
.wcd-group.is-info, .wcd-group.is-following { color: var(--lm-d-info); }
.wcd-group.is-late { color: var(--lm-d-danger); }
.wcd-group.is-late .wcd-group-c { background: var(--lm-d-danger-soft); }
.wcd-group.is-decide { color: var(--lm-d-warn); }
.wcd-group.is-decide .wcd-group-c { background: var(--lm-d-warn-soft); }
.wcd-group.is-today, .wcd-group.is-rest { color: var(--lm-d-muted); }
.wcd-group.is-today .wcd-group-c, .wcd-group.is-rest .wcd-group-c { background: var(--lm-d-quiet-bg); }
.wcd-group-c { font-size: 12px; background: var(--lm-d-info-soft); border-radius: 6px; padding: 0 6px; }
.wcd-note-lm { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-block: 8px 12px; padding: 9px 12px; border-radius: 10px; font-size: 13px; border: 1px solid var(--lm-d-gap-edge); background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.wcd-note-lm.tone-warn { border-color: var(--lm-d-accent-line); background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }
.wcd-note-lm span { color: var(--lm-d-muted); font-size: 12.5px; }
.wcd-note-lm .wcd-ic { inline-size: 16px; block-size: 16px; }
.wcd-strip .wcd-link { margin-inline-start: auto; }
.wcd-menu-views { display: flex; flex-direction: column; gap: 2px; border-block-start: 1px solid var(--lm-d-divider); padding-block-start: 6px; }
.wcd-menu-views button { display: flex; justify-content: space-between; text-align: start; background: transparent; border: 0; border-radius: 8px; padding: 7px 8px; font-size: 13px; font-weight: 600; color: var(--lm-d-ink); cursor: pointer; }
.wcd-menu-views button.is-on { background: var(--lm-d-accent-soft); color: var(--lm-d-accent-ink); }
.wcd-t1.is-static { cursor: default; }
@media (max-width: 767.98px) { .wcd-today { flex-wrap: wrap; } .wcd-today .wcd-btn { inline-size: 100%; } }
.wcd-t1.is-static:hover { text-decoration: none; }
.wcd-strip-body { flex: 1; min-inline-size: 0; }
.wcd-fails { margin: 4px 0 0; padding-inline-start: 18px; font-weight: 500; color: var(--lm-d-ink); }
.wcd-x { background: none; border: 0; color: inherit; cursor: pointer; padding: 2px; }

/* the table (a grid of rows, so a row can open under itself) */
.wcd-table { display: flex; flex-direction: column; }
.wcd-tr { display: grid; grid-template-columns: 34px minmax(0, 1fr) 156px 90px 100px 192px; align-items: center; border-block-end: 1px solid var(--lm-d-divider); }
.wcd-thead { background: var(--lm-d-hover); border-block-end-color: var(--lm-d-border); }
.wcd-thead .wcd-td { font-size: 12px; font-weight: 700; color: var(--lm-d-muted); padding-block: 9px; }
.wcd-td { padding: 9px 10px; min-inline-size: 0; }
.wcd-ck { padding-inline-end: 0; }
.wcd-cb { inline-size: 18px; block-size: 18px; border: 1.5px solid var(--wcd-cb-edge); border-radius: 5px; accent-color: var(--lm-d-accent); cursor: pointer; margin: 0; }
.wcd-tr.is-hl { background: var(--wcd-row-hl); }
.wcd-tr.is-sel { background: var(--wcd-row-sel); }
.wcd-tr.is-exp { background: var(--lm-d-hover); }
.wcd-tr.is-pending { opacity: .62; }
.wcd-tr.is-cluster { background: var(--lm-d-hover); }
.wcd-due small.wcd-cluster-total { color: var(--lm-d-ink); font-weight: 700; }
.wcd-keys { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 14px; border-block-start: 1px solid var(--lm-d-divider); font-size: 12px; color: var(--lm-d-muted); }
.wcd-keys span { display: inline-flex; align-items: center; gap: 6px; }
.wcd kbd { font-family: inherit; font-size: 12px; font-weight: 700; min-inline-size: 22px; text-align: center; padding: 0 6px; border: 1px solid var(--lm-d-control-edge); border-radius: 6px; background: var(--lm-d-surface); color: var(--lm-d-ink); direction: ltr; }
.wcd-keys-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wcd-keys-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
@media (hover: none) { .wcd-keys { display: none; } }
.wcd-tr.is-member > .wcd-td:nth-child(2) { padding-inline-start: 26px; }
.wcd-tr.is-kb { box-shadow: inset 3px 0 0 var(--lm-d-accent); }
[dir="ltr"] .wcd-tr.is-kb { box-shadow: inset -3px 0 0 var(--lm-d-accent); }
.wcd-task { overflow: hidden; }
.wcd-t1 { display: block; max-inline-size: 100%; font-weight: 700; font-size: 14px; color: var(--lm-d-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: none; border: 0; padding: 0; cursor: pointer; text-align: start; }
.wcd-t1:hover { text-decoration: underline; }
.wcd-t2 { display: block; font-size: 12px; color: var(--lm-d-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcd-scope-b { font-size: 12px; font-weight: 700; border-radius: 6px; padding: 0 6px; line-height: 18px; background: var(--lm-d-quiet-bg); color: var(--lm-d-muted); margin-inline-end: 6px; display: inline-block; }
.wcd-new { font-size: 12px; font-weight: 700; color: var(--lm-d-accent-ink); margin-inline-end: 6px; }
.wcd-draft { display: block; font-size: 12px; color: var(--lm-d-warn); }
/* «الشخص»: initials, the full name (never cut), how they stand to the row under it */
.wcd-person { display: flex; align-items: center; gap: 10px; min-inline-size: 0; }
.wcd-ava { inline-size: 36px; block-size: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.wcd-ava.is-me { background: var(--lm-d-tab-on-bg); color: var(--lm-d-tab-on-ink); }
.wcd-person-t { display: flex; flex-direction: column; min-inline-size: 0; }
.wcd-person-t b { font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--lm-d-ink); overflow-wrap: anywhere; }
.wcd-person-t small { font-size: 12px; color: var(--lm-d-muted); }
.wcd-t2-src { display: inline-flex; align-items: center; gap: 4px; }
.wcd-t2-src .wcd-ic { inline-size: 13px; block-size: 13px; }
.wcd-t2-src.is-lm { color: var(--lm-d-ai); }
.wcd-src { font-size: 12px; font-weight: 600; color: var(--lm-d-muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.wcd-src .wcd-ic { inline-size: 15px; block-size: 15px; color: var(--lm-d-subtle); }
.wcd-src.is-lm, .wcd-src.is-lm .wcd-ic { color: var(--lm-d-ai); }
.wcd-due { font-size: 12.5px; font-weight: 700; white-space: nowrap; line-height: 1.35; display: block; }
.wcd-due small { display: block; font-weight: 500; font-size: 12px; white-space: normal; }
.wcd-due.is-late { color: var(--lm-d-danger); }
.wcd-due.is-soon { color: var(--lm-d-warn); }
.wcd-due.is-quiet, .wcd-due small.is-quiet { color: var(--lm-d-subtle); }
.wcd-qa { white-space: nowrap; }
.wcd-qa-set { display: flex; gap: 4px; align-items: center; }
.wcd-qa-b { inline-size: 30px; block-size: 30px; border-radius: 8px; border: 1px solid var(--lm-d-border); display: grid; place-items: center; background: var(--lm-d-surface); cursor: pointer; padding: 0; }
.wcd-qa-b .wcd-ic { inline-size: 15px; block-size: 15px; }
.wcd-qa-b.is-ok { color: var(--lm-d-ok); }
.wcd-qa-b.is-no { color: var(--lm-d-danger); }
.wcd-qa-b.is-later { color: var(--lm-d-muted); }
.wcd-qa-b.is-open { color: var(--lm-d-ink); }
.wcd-qa-b.is-open.is-on { background: var(--lm-d-tab-on-bg); color: var(--lm-d-tab-on-ink); border-color: var(--lm-d-tab-on-bg); }
.wcd-snooze { position: relative; }
.wcd-more { position: relative; }
.wcd-qa-b.is-more { color: var(--lm-d-muted); }
.wcd-more-menu { inset-inline-end: auto; inset-inline-start: 0; min-inline-size: 150px; }
.wcd-more-menu a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--lm-d-ink); text-decoration: none; }
.wcd-more-menu a:hover { background: var(--lm-d-hover); }
.wcd-att-link { font-size: 12px; font-weight: 700; color: var(--lm-d-info); text-decoration: none; white-space: nowrap; }
.wcd-snooze-menu { inset-inline-end: auto; inset-inline-start: 0; }
.wcd-snooze-date { display: flex; gap: 6px; padding: 6px 4px 2px; border-block-start: 1px solid var(--lm-d-divider); margin-block-start: 2px; }
.wcd-pending-note { font-size: 12px; font-weight: 700; color: var(--lm-d-ok); }

/* the row opened under itself — the WC-R4 panel, framed by the row */
.wcd-exp { display: block; background: var(--lm-d-hover); border-block-end: 1px solid var(--lm-d-border); }
.wcd-exp-cell { padding: 6px 14px 14px; }
.wcd .wc-panel.is-inline { position: static; inset: auto; max-block-size: none; inline-size: auto; overflow: visible; background: transparent; border: 0; border-radius: 0; padding: 0; z-index: auto; }
.wcd .wc-panel.is-inline .wc-panel-head { display: none; }
.wcd .wc-panel.is-inline .wc-facts-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; margin: 0; }
.wcd .wc-panel.is-inline .wc-fact-row { display: flex; flex-direction: column; gap: 0; min-inline-size: 0; }
.wcd .wc-panel.is-inline .wc-fact-row dt { font-size: 12px; color: var(--lm-d-subtle); font-weight: 500; }
.wcd .wc-panel.is-inline .wc-fact-row dd { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--lm-d-ink); overflow-wrap: anywhere; }
.wcd .wc-panel.is-inline .wc-fact-row.is-long { grid-column: 1 / -1; background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 10px; padding: 10px 12px; }
.wcd .wc-panel.is-inline .wc-fact-row.is-long dd { font-weight: 500; font-size: 13px; line-height: 1.7; color: var(--lm-d-ai-ink); }
.wcd .wc-panel.is-inline .wc-body { background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 10px; padding: 10px 12px; }
/* the design's expanded row is compact: small decision buttons, a short comment, the send button at the row's end — nothing pinned */
.wc-r4 .wcd .wc-panel.is-inline .wc-panel-footer { position: static; margin: 0; padding: 0; border: 0; background: transparent; }
.wcd .wc-panel.is-inline .wc-panel-cta { position: static; justify-content: flex-end; padding: 0; background: transparent; }
.wcd .wc-panel.is-inline .wc-btn { flex: 0 0 auto; min-inline-size: 11rem; min-block-size: 36px; block-size: 36px; padding: 0 18px; border-radius: 10px; font-size: 13.5px; }
.wcd .wc-panel.is-inline .wc-btn.is-primary { background: var(--lm-d-accent); border-color: var(--lm-d-accent); color: var(--lm-d-on-accent); }
.wcd .wc-panel.is-inline .wc-verbs { justify-content: flex-start; }
.wcd .wc-panel.is-inline .wc-verb { flex: 0 0 auto; min-block-size: 36px; block-size: 36px; padding: 0 14px; font-size: 13.5px; border-color: var(--lm-d-control-edge); }
.wcd .wc-panel.is-inline .wc-verb.is-active { background: var(--lm-d-tab-on-bg); border-color: var(--lm-d-tab-on-bg); color: var(--lm-d-tab-on-ink); }
.wc-r4 .wcd .wc-panel.is-inline textarea.wc-qa-input { min-block-size: 2.625rem; block-size: 2.625rem; }

/* a panel that belongs to no row on the screen: a drawer from the inline end (left in Arabic) */
.wcd-floating .wc-qa-overlay { display: block; position: fixed; inset: 0; z-index: 44; background: var(--lm-d-overlay); }
.wcd-floating .wc-panel { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 45; inline-size: min(460px, 100vw); max-block-size: none; border-radius: 0; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 0 34px var(--lm-d-sheet-shadow); }

.wcd-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 40px 16px; text-align: center; color: var(--lm-d-muted); }
.wcd-empty b { color: var(--lm-d-ink); font-size: 15px; }
.wcd-empty-next { margin-block-start: 6px; color: var(--lm-d-ai-ink); }
.wcd-empty-ic { inline-size: 32px; block-size: 32px; color: var(--lm-d-ok); }

.wcd-pager { display: flex; align-items: center; padding: 10px 14px; gap: 6px; font-size: 12.5px; color: var(--lm-d-muted); }
.wcd-pg { inline-size: 30px; block-size: 30px; border-radius: 8px; border: 1px solid var(--lm-d-border); font-weight: 700; color: var(--lm-d-ink); font-size: 12.5px; background: var(--lm-d-surface); cursor: pointer; }
.wcd-pg.is-on { border-color: var(--lm-d-accent); color: var(--lm-d-accent-ink); }
.wcd-pg-gap { color: var(--lm-d-subtle); }

/* the bulk bar */
.wcd-bulk { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--lm-d-tab-on-bg); color: var(--lm-d-tab-on-ink); border-radius: 0 0 var(--wcd-r) var(--wcd-r); font-size: 13px; font-weight: 700; }
.wcd-bulk-codes { color: var(--lm-d-tab-on-count); font-weight: 500; }
.wcd-bulk .wcd-btn-sm { block-size: 34px; font-size: 13px; }

/* ── beside the table ── */
.wcd-side-hd { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; }
.wcd-side-hd h3 { font-size: 15px; font-weight: 700; margin: 0; }
.wcd-side-ico { inline-size: 34px; block-size: 34px; border-radius: 10px; display: grid; place-items: center; }
.wcd-side-ico.tone-ai { background: var(--wcd-ai-soft); color: var(--lm-d-ai); }
.wcd-side-ico.tone-ok { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.wcd-ministats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 12px 16px 0; border: 1px solid var(--lm-d-divider); border-radius: 12px; }
.wcd-ministats > div { padding: 8px 10px; border-inline-start: 1px solid var(--lm-d-divider); text-align: center; }
.wcd-ministats > div:first-child { border-inline-start: 0; }
.wcd-ministats b { display: block; font-size: 17px; font-weight: 800; line-height: 1.3; }
.wcd-ministats b.tone-ok { color: var(--lm-d-ok); }
.wcd-ministats b.tone-warn { color: var(--lm-d-warn); }
.wcd-ministats b.tone-danger { color: var(--lm-d-danger); }
.wcd-ministats span { font-size: 12px; color: var(--lm-d-muted); }
.wcd-lines { padding: 6px 16px 12px; }
.wcd-ln { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-block-end: 1px solid var(--lm-d-divider); }
.wcd-ln:last-child { border-block-end: 0; }
.wcd-ln-d { inline-size: 30px; block-size: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.wcd-ln-d.tone-danger { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.wcd-ln-d.tone-warn { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }
.wcd-ln-d.tone-ai { background: var(--wcd-ai-soft); color: var(--lm-d-ai); }
.wcd-ln-d .wcd-ic { inline-size: 15px; block-size: 15px; }
.wcd-ln-m { flex: 1; min-inline-size: 0; background: none; border: 0; padding: 0; text-align: start; cursor: pointer; color: var(--lm-d-ink); }
.wcd-ln-m b { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcd-ln-m span { font-size: 12px; color: var(--lm-d-subtle); }
.wcd-ln-acts { display: flex; gap: 4px; }
.wcd-ln-acts button { inline-size: 28px; block-size: 28px; border-radius: 7px; border: 1px solid var(--lm-d-border); display: grid; place-items: center; color: var(--lm-d-muted); background: var(--lm-d-surface); cursor: pointer; padding: 0; }
.wcd-ln-acts .wcd-ic { inline-size: 13px; block-size: 13px; }
.wcd-side-empty { margin: 0; padding: 10px 0; font-size: 12.5px; color: var(--lm-d-muted); }
.wcd-alert { display: flex; align-items: center; gap: 10px; margin: 12px 16px 0; padding: 9px 12px; border-radius: 10px; background: var(--lm-d-danger-soft); color: var(--lm-d-danger); font-size: 13px; font-weight: 700; }
.wcd-alert .wcd-ic { inline-size: 16px; block-size: 16px; }
.wcd-perf-list { padding: 4px 16px 14px; }
.wcd-pr { padding: 9px 0; border-block-end: 1px solid var(--lm-d-divider); }
.wcd-pr:last-child { border-block-end: 0; }
.wcd-pr-top { display: flex; align-items: baseline; gap: 8px; margin-block-end: 6px; }
.wcd-pr-top b { font-size: 13px; font-weight: 700; flex: 1; }
.wcd-pr-tag { font-size: 12px; color: var(--lm-d-subtle); }
.wcd-pr-v { font-size: 15px; font-weight: 800; }
.wcd-pr-v small { color: var(--lm-d-subtle); font-size: 12.5px; }
.wcd-pr-v.is-quiet { color: var(--lm-d-subtle); font-size: 13px; }
.wcd-bar { block-size: 6px; background: var(--lm-d-divider); border-radius: 6px; position: relative; overflow: hidden; }
.wcd-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 6px; background: var(--lm-d-ok); display: block; }

/* the confirmation */
.wcd-dialog-wrap { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; }
.wcd-dialog-veil { position: absolute; inset: 0; background: var(--lm-d-overlay); }
.wcd-dialog { position: relative; inline-size: min(440px, 100%); background: var(--lm-d-surface); border-radius: var(--wcd-r); padding: 20px; box-shadow: 0 8px 30px var(--lm-d-sheet-shadow); display: flex; flex-direction: column; gap: 10px; }
.wcd-dialog h3 { margin: 0; font-size: 16px; font-weight: 800; }
.wcd-dialog p { margin: 0; font-size: 13.5px; color: var(--lm-d-muted); }
.wcd-dialog-list { margin: 0; padding-inline-start: 18px; font-size: 13px; max-block-size: 160px; overflow-y: auto; }
.wcd-dialog-skip { color: var(--lm-d-warn) !important; }
.wcd-dialog-reason { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--lm-d-muted); }
.wcd-dialog-reason textarea { border: 1px solid var(--lm-d-border); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; background: var(--lm-d-surface); color: var(--lm-d-ink); }
.wcd-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; margin-block-start: 6px; }

/* toasts — bottom of the inline end (left in Arabic), above the bulk bar */
.wcd-toasts { position: fixed; inset-inline-end: 28px; inset-block-end: 28px; z-index: 65; display: flex; flex-direction: column; gap: 8px; max-inline-size: min(560px, calc(100vw - 32px)); }
.wcd-toast { display: flex; align-items: center; gap: 12px; background: var(--lm-d-tab-on-bg); color: var(--lm-d-tab-on-ink); border-radius: 12px; padding: 12px 16px; font-size: 13.5px; font-weight: 700; box-shadow: 0 8px 24px var(--wcd-toast-shadow); }
.wcd-toast-ok { inline-size: 26px; block-size: 26px; border-radius: 50%; background: var(--lm-d-ok); color: var(--lm-d-on-accent); display: grid; place-items: center; flex: none; font-size: 12px; }
.wcd-toast-ok .wcd-ic { inline-size: 14px; block-size: 14px; stroke-width: 3; }
.wcd-toast-ok.is-wait { background: var(--lm-d-accent); }
.wcd-toast.is-error .wcd-toast-ok, .wcd-toast.is-warn .wcd-toast-ok { background: var(--lm-d-danger); }
.wcd-toast-msg { flex: 1; min-inline-size: 0; }
.wcd-toast-undo { background: none; border: 0; color: var(--wcd-bar-link); font-weight: 700; cursor: pointer; font-size: 13.5px; }
.wcd-toast-x { background: none; border: 0; color: var(--lm-d-tab-on-count); cursor: pointer; padding: 0; }

/* the Live Manager drawer: PR 1541's pane, a drawer from the inline end at every desktop width */
@media (min-width: 768px) {
    .wcd-lm-host .lms-pane { position: fixed; inset-block: 0; inset-inline-end: 0; inset-inline-start: auto; inline-size: min(460px, 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"] .wcd-lm-host .lms-pane { translate: 105% 0; }
    .wcd-lm-host .lms-pane.is-open, .wcd-lm-host .lms-pane.is-pending { translate: 0 0; }
    .wcd-lm-host .lms-overlay { display: block; position: fixed; inset: 0; z-index: 44; background: var(--lm-d-overlay); }
}
.wcd-lm-host .lms-pane:not(.is-open):not(.is-pending) .lms-pane-state.is-idle { display: none; }
.wcd-lm-host .lms-pane:not(.is-open):not(.is-pending) { visibility: hidden; }

/* ── narrower screens ── */
@media (max-width: 1279.98px) {
    .wcd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wcd-grid { grid-template-columns: minmax(0, 1fr); }
    .wcd-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023.98px) {
    .wcd-tr { grid-template-columns: 34px minmax(0, 1fr) minmax(140px, 0.8fr) 100px 210px; }
    .wcd-tr > .wcd-td:nth-child(5) { display: none; }
}

/* ── phone: rows are cards, the bulk bar sits at the bottom of the screen ── */
@media (max-width: 767.98px) {
    .wcd-title { font-size: 24px; }
    .wcd-head { gap: 10px; }
    .wcd-head > .wcd-grow { display: none; }
    .wcd-att-strip { inline-size: 100%; }
    .wcd-att-strip .wcd-btn { margin-inline-start: auto; }
    .wcd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .wcd-k[data-card="balance"] { grid-column: 1 / -1; }
    .wcd-k-ico, .wcd-k-go { display: none; }
    .wcd-col { display: flex; }
    .wcd-tb { flex-wrap: wrap; }
    .wcd-tabs { order: 3; flex-basis: 100%; gap: 6px; }
    .wcd-tab { border: 1px solid var(--lm-d-border); border-radius: 999px; }
    .wcd-search { inline-size: auto; flex: 1; }
    .wcd-thead { display: none; }
    .wcd-tr { grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "ck task status" "ck person person" "ck due due" "qa qa qa"; padding: 12px 14px; row-gap: 6px; }
    .wcd-tr > .wcd-td:nth-child(5) { display: block; }
    .wcd-tr > .wcd-td { padding: 0; }
    .wcd-tr > .wcd-td:nth-child(1) { grid-area: ck; }
    .wcd-tr > .wcd-td:nth-child(2) { grid-area: task; }
    .wcd-tr > .wcd-td:nth-child(3) { grid-area: person; display: block; }
    .wcd-tr > .wcd-td:nth-child(4) { grid-area: due; }
    .wcd-tr > .wcd-td:nth-child(5) { grid-area: status; }
    .wcd-tr > .wcd-td:nth-child(6) { grid-area: qa; }
    .wcd-due small { display: inline; margin-inline-start: 6px; }
    .wcd-qa-set .wcd-btn-p.wcd-btn-row { flex: 1; block-size: 40px; }
    .wcd-qa-b { inline-size: 36px; block-size: 36px; }
    .wcd .wc-panel.is-inline .wc-facts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wcd-bulk { position: fixed; inset-inline: 0; inset-block-end: var(--wcd-bottom, 0px); z-index: 42; border-radius: 16px 16px 0 0; padding: 12px 16px; }
    .wcd-bulk-codes, .wcd-bulk .wcd-btn-g:nth-of-type(2) { display: none; }
    .wcd-toasts { inset-inline: 16px; inset-block-end: calc(var(--wcd-bottom, 0px) + 72px); }
    .wcd-floating .wc-panel { inline-size: 100vw; }
}
@media (prefers-reduced-motion: reduce) { .wcd-lm-host .lms-pane { transition: none; } }


/* ── WC-ONE-PAGE part 1 · «تقييمي» (owner ruling 24-9) ───────────────
   The viewer's own month under the cards. Bands: ≥70 ok · 50–69 mid · <50 bad — the design's palette
   through the --lm-d-* tokens (dark mode follows them). */
.wce { margin-block-end: 14px; border-color: var(--lm-d-accent-line); overflow: hidden; }
.wce .tone-ok { color: var(--lm-d-ok); } .wce .tone-mid { color: var(--lm-d-accent); } .wce .tone-bad { color: var(--lm-d-danger); } .wce .tone-none { color: var(--lm-d-subtle); }
.wce-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; border-block-end: 1px solid var(--lm-d-divider); }
.wce-title { margin: 0; font-size: 16px; font-weight: 800; color: var(--lm-d-ink); }
.wce-sub { font-size: 12px; color: var(--lm-d-muted); }
.wce-chip { background: var(--lm-d-chip-bg); color: var(--lm-d-muted); border-radius: 8px; padding: 2px 10px; font-size: 12px; }
.wce-chip.is-quiet { background: var(--lm-d-quiet-bg); }
.wce-info { font-style: normal; font-size: 12px; color: var(--lm-d-subtle); cursor: help; margin-inline-start: 2px; }
.wce-info:focus-visible { outline: 2px solid var(--lm-d-info); border-radius: 50%; }
.wce-none { display: flex; flex-direction: column; gap: 2px; padding: 16px; font-size: 13px; color: var(--lm-d-muted); }
.wce-none b { color: var(--lm-d-ink); }
.wce-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.1fr); }
.wce-col { padding: 12px 16px; border-inline-start: 1px solid var(--lm-d-divider); min-inline-size: 0; }
.wce-col:first-child { border-inline-start: 0; }
.wce-score-top { display: flex; gap: 14px; align-items: center; }
.wce-ring { --p: 0; inline-size: 92px; block-size: 92px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: conic-gradient(currentColor calc(var(--p) * 1%), var(--lm-d-quiet-bg) 0); }
.wce-ring > span { inline-size: 74px; block-size: 74px; border-radius: 50%; background: var(--lm-d-surface); display: grid; place-items: center; align-content: center;
    font-size: 26px; font-weight: 800; line-height: 1; color: inherit; }
.wce-ring small { display: block; font-size: 12px; font-weight: 600; color: var(--lm-d-subtle); margin-block-start: 3px; }
.wce-ring.tone-ok { color: var(--lm-d-ok); } .wce-ring.tone-mid { color: var(--lm-d-accent); } .wce-ring.tone-bad { color: var(--lm-d-danger); }
.wce-score-side { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; font-size: 12px; color: var(--lm-d-muted); }
.wce-delta { font-size: 13px; color: var(--lm-d-muted); white-space: nowrap; }
.wce-delta.is-up { color: var(--lm-d-ok); } .wce-delta.is-down { color: var(--lm-d-danger); }
.wce-track { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.wce-track > span { inline-size: 40px; }
.wce-bar { display: block; inline-size: 60px; block-size: 6px; border-radius: 9px; background: var(--lm-d-quiet-bg); overflow: hidden; font-style: normal; }
.wce-bar.is-wide { inline-size: 100%; block-size: 8px; margin-block: 5px 3px; }
.wce-bar em { display: block; block-size: 100%; background: currentColor; }
.wce-hist { display: flex; align-items: flex-end; gap: 4px; block-size: 36px; }
.wce-hist > span { inline-size: 14px; border-radius: 4px 4px 0 0; background: var(--lm-d-quiet-bg); }
.wce-hist > span.is-now { background: var(--lm-d-accent); }
.wce-hist small { font-size: 12px; color: var(--lm-d-subtle); margin-inline-start: 4px; align-self: center; }
.wce-pace { margin-block-start: 10px; padding-block-start: 8px; border-block-start: 1px dashed var(--lm-d-divider); font-size: 12px; color: var(--lm-d-muted); }
.wce-pace-l { display: flex; justify-content: space-between; gap: 8px; }
.wce-pace-l b { color: var(--lm-d-ink); }
.wce-pace-n { font-weight: 700; }
.wce-h { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--lm-d-ink); }
.wce-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--lm-d-subtle); }
.wce-dot.tone-ok { background: var(--lm-d-ok); } .wce-dot.tone-mid { background: var(--lm-d-accent); }
.wce-count { background: var(--lm-d-quiet-bg); color: var(--lm-d-muted); border-radius: 999px; padding: 0 7px; font-size: 12px; font-weight: 700; }
.wce-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: baseline; border-radius: 9px; padding: 5px 10px; margin-block-end: 4px; font-size: 13px; }
.wce-item b { color: var(--lm-d-ink); min-inline-size: 0; }
.wce-item > span { font-size: 12px; font-weight: 700; white-space: nowrap; }
.wce-item.is-good { background: var(--lm-d-ok-soft); }
.wce-item.is-focus { background: var(--lm-d-accent-soft); }
/* the design: name and figure on one line, the first step on ONE line under them (the whole step on hover) */
.wce-step { grid-column: 1 / -1; font-size: 12px; color: var(--lm-d-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wce-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wce-hist-l, .wce-m, .wce-mfull, .wce-more-m, .wce-back { display: none; }
.wce-step::before { content: "← "; color: var(--lm-d-accent); font-weight: 800; }
.wce-foot, .wce-empty { margin: 6px 0 0; font-size: 12px; color: var(--lm-d-muted); }
.wce-note { background: var(--lm-d-warn-soft); border-radius: 9px; padding: 5px 10px; font-size: 12px; color: var(--lm-d-ink); margin-block-end: 6px; }
.wce-ai { background: var(--wcd-ai-soft); border-radius: 9px; padding: 5px 10px; font-size: 12px; color: var(--lm-d-ink); margin-block-end: 6px; }
.wce-note small, .wce-ai small { display: block; font-size: 12px; color: var(--lm-d-muted); }
.wce-ai small { color: var(--lm-d-ai); font-weight: 700; }
.wce-facts { margin: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.wce-facts div { display: flex; justify-content: space-between; gap: 8px; }
.wce-facts dt { color: var(--lm-d-muted); } .wce-facts dd { margin: 0; font-weight: 700; color: var(--lm-d-ink); text-align: end; }
.wce-full { padding: 4px 0 10px; overflow-x: auto; }
.wce-table { inline-size: 100%; border-collapse: collapse; font-size: 13px; }
.wce-table th, .wce-table td { padding: 8px 14px; border-block-end: 1px solid var(--lm-d-divider); text-align: start; vertical-align: middle; }
.wce-table thead th { font-size: 12px; font-weight: 600; color: var(--lm-d-subtle); }
.wce-table tbody th { font-weight: 700; color: var(--lm-d-ink); }
.wce-att { display: flex; align-items: center; gap: 8px; }
.wce-muted { color: var(--lm-d-muted); font-size: 12px; }
@media (max-width: 1279.98px) { .wce-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wce-col:nth-child(3) { border-inline-start: 0; } .wce-col:nth-child(n+3) { border-block-start: 1px solid var(--lm-d-divider); } }
@media (max-width: 767.98px) { .wce-grid { grid-template-columns: minmax(0, 1fr); } .wce-col { border-inline-start: 0; border-block-start: 1px solid var(--lm-d-divider); } .wce-col:first-child { border-block-start: 0; } }

/* ── WC-ONE-PAGE part 2 · the level cards (owner ruling 24-9) ─────────
   «أنا» · «المدير اللحظي» · «فريقي» · «الإدارة» · «الشركة» — separate cards side by side. ONE open signal: the
   open card is filled with --lm-d-info-soft, bordered --lm-d-info, with a ▼ pointer; its panel shares the blue
   top edge. «أنا»'s orange mark is the table's filter, not «open». Phones: one row that swipes. */
/* the approved design: ONE row — «أنا» twice as wide as the others; it wraps only on a narrow screen */
.wcl { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-block-end: 14px; }
.wcl-card { position: relative; display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; padding: 10px 12px;
    background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: var(--wcd-r); box-shadow: 0 1px 2px var(--lm-d-shadow); }
.wcl-card.is-me { grid-column: span 2; }
.wcl-card.is-open { background: var(--lm-d-info-soft); border-color: var(--lm-d-info); }
.wcl-card.is-open::after { content: ""; position: absolute; inset-block-end: -9px; inset-inline: 0; margin-inline: auto; inline-size: 18px; block-size: 9px;
    background: var(--lm-d-info); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.wcl-h { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.wcl-h > b, .wcl-title { font-size: 15px; font-weight: 800; color: var(--lm-d-ink); }
.wcl-title { background: none; border: 0; padding: 0; font-family: inherit; line-height: inherit; cursor: pointer; text-decoration: none; }
.wcl-title:hover, .wcl-title:focus-visible { text-decoration: underline; }
.wcl-fv .is-zero { color: var(--lm-d-ok); }
.wcl-sh, .wcd-sh, .wcd-lead-date, .wlp-ph, .wlp-upd { display: none; }
.wcl-c { font-size: 12px; color: var(--lm-d-muted); min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.wcl-h { min-inline-size: 0; } .wcl-h > b { flex: none; } .wcl-go { flex: none; }
.wcl-go { font-size: 12px; font-weight: 700; color: var(--lm-d-info); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.wcl-go:hover, .wcl-go:focus-visible { text-decoration: underline; }
.wcl-f { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.wcl-fig { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-inline-size: 0; padding: 4px 6px; border: 0; border-radius: 9px;
    background: none; color: inherit; font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.wcl-fig:hover, .wcl-fig:focus-visible { background: var(--lm-d-row-hl); }
.wcl-fig.is-static { cursor: default; } .wcl-fig.is-static:hover { background: none; }
.wcl-fig.is-on { background: var(--lm-d-accent-soft); box-shadow: inset 0 -2px 0 var(--lm-d-accent); }
.wcl-fig:disabled { cursor: default; }
.wcl-fl { font-size: 12px; color: var(--lm-d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 100%; }
.wcl-fv { font-size: 20px; font-weight: 800; line-height: 1.3; color: var(--lm-d-ink); white-space: nowrap; text-decoration: underline dotted var(--lm-d-border); text-underline-offset: 5px; }
.wcl-fig.is-static .wcl-fv { text-decoration: none; }
.wcl-fv.is-text { font-size: 15px; }
.wcl-fv.is-zero { color: var(--lm-d-ok); text-decoration: none; }
.wcl-fs { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 100%; }
.wcl .tone-ok { color: var(--lm-d-ok); } .wcl .tone-mid { color: var(--lm-d-accent); } .wcl .tone-bad, .wcl .tone-danger { color: var(--lm-d-danger); }
.wcl .tone-warn { color: var(--lm-d-warn); } .wcl .tone-info { color: var(--lm-d-info); } .wcl .tone-quiet, .wcl .tone-none { color: var(--lm-d-subtle); } .wcl .tone-ink { color: var(--lm-d-ink); }
.wcl-top { margin: 0; font-size: 12px; color: var(--lm-d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcl-top b { color: var(--lm-d-ink); }
.wcl-upd { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--lm-d-info); cursor: pointer; }
.wcl-panel { margin-block-end: 14px; background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-block-start: 3px solid var(--lm-d-info); border-radius: var(--wcd-r); padding: 12px 14px; }
.wcl-ph { display: flex; align-items: center; gap: 8px; margin-block-end: 8px; }
.wcl-ph h2 { margin: 0; font-size: 16px; font-weight: 800; color: var(--lm-d-ink); }
.wcl-lm-g { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; margin-block-start: 8px; }
.wcl-lm-side { border-inline-start: 1px solid var(--lm-d-divider); padding-inline-start: 14px; font-size: 13px; color: var(--lm-d-ink); }
.wcl-lm-side h3 { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--lm-d-ai); }
.wcl-lm-side p { margin: 0 0 8px; }
.wcl-hidden-note { margin: 0 0 14px; font-size: 12px; color: var(--lm-d-muted); }
.wcd-grid.is-full { grid-template-columns: minmax(0, 1fr); }
/* beside the sidebar the small cards are narrow: their ⓘ steps aside (the label keeps the same words on hover) */
@media (max-width: 1499.98px) { .wcl-card:not(.is-me) .wcl-fl .wce-info { display: none; } .wcl-fv { font-size: 19px; } .wcl-fig { padding-inline: 4px; } }
@media (max-width: 1199.98px) { .wcl { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } .wcl-card.is-me { grid-column: 1 / -1; } }
@media (max-width: 767.98px) {
    .wcl { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding-inline: 16px; padding-block-end: 12px; }
    .wcl-card { flex: 0 0 72%; scroll-snap-align: start; } .wcl-card.is-me { flex-basis: 88%; }
    .wcl-lm-g { grid-template-columns: minmax(0, 1fr); } .wcl-lm-side { border-inline-start: 0; padding-inline-start: 0; }
}

/* WC-ONE-PAGE part 2 — the WC-R4 board inside an opened level wears the one page's look (styles only): compact
   figures, the alert strip folded away (its figures repeat the «متأخر» figure), small pill tabs, quiet row buttons,
   score colours by band. */
.wc-r4 .wcl-panel .wc-brief { gap: 8px; margin-block-end: 10px; }
.wc-r4 .wcl-panel .wc-brief-stat { padding: 6px 12px; border-radius: 12px; box-shadow: none; }
.wc-r4 .wcl-panel .wc-brief-icon { inline-size: 32px; block-size: 32px; border-radius: 10px; }
.wc-r4 .wcl-panel .wc-brief-num { font-size: 20px; }
.wc-r4 .wcl-panel .wc-alerts { display: none; }
.wc-r4 .wcl-panel .wc-views { display: flex; gap: 6px; border: 0; background: none; padding: 0; margin-block-end: 8px; }
.wc-r4 .wcl-panel .wc-views .wc-tab { flex: 0 0 auto; min-block-size: 30px; padding: 2px 12px; border: 1px solid var(--lm-d-border); border-radius: 999px;
    background: var(--lm-d-surface); color: var(--lm-d-muted); font-size: 13px; box-shadow: none; }
.wc-r4 .wcl-panel .wc-views .wc-tab.is-active { background: var(--lm-d-ink); border-color: var(--lm-d-ink); color: var(--lm-d-surface); }
.wc-r4 .wcl-panel .wc-act { min-block-size: 28px; border: 1px solid var(--lm-d-border); border-radius: 8px; background: var(--lm-d-surface); color: var(--lm-d-ink); font-size: 12.5px; }
.wc-r4 .wcl-panel .wc-act:hover { background: var(--lm-d-row-hl); }
.wc-score.tone-ok { color: var(--lm-d-ok); } .wc-score.tone-mid { color: var(--lm-d-accent); } .wc-score.tone-bad { color: var(--lm-d-danger); }
.wc-score { font-weight: 800; }

.wcl-stale { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-block-end: 10px; padding: 8px 12px; border-radius: 10px;
    background: var(--lm-d-warn-soft); color: var(--lm-d-warn); font-size: 13px; }
.wcl-stale .wcd-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; }

/* ── WC-ONE-PAGE (approved design) · the opened panels («أنا» · «المدير اللحظي» · «فريقي» · «الإدارة» · «الشركة») ──
   head (title · tabs · search) · seven figures · the level's table beside a side column. Phones: the panel takes the
   whole screen with a back button, and a table reads as cards. */
.wlp { padding: 0; overflow: hidden; }
.wlp-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border-block-end: 1px solid var(--lm-d-divider); }
.wlp-h h2 { margin: 0; font-size: 17px; font-weight: 800; color: var(--lm-d-ink); }
.wlp-sub { font-size: 12px; font-weight: 600; color: var(--lm-d-muted); }
.wlp-ttl { display: flex; align-items: center; gap: 10px; min-inline-size: 0; }
.wlp-back { display: none; inline-size: 34px; block-size: 34px; border: 1px solid var(--lm-d-border); border-radius: 10px; background: var(--lm-d-surface);
    color: var(--lm-d-ink); font-size: 16px; place-items: center; text-decoration: none; cursor: pointer; }
.wlp-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-inline-start: auto; }
.wlp-tab { display: inline-flex; align-items: center; gap: 6px; min-block-size: 30px; padding: 2px 12px; border: 1px solid var(--lm-d-border); border-radius: 999px;
    background: var(--lm-d-surface); color: var(--lm-d-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.wlp-tab b { font-weight: 800; color: inherit; }
.wlp-tab.is-on { background: var(--lm-d-ink); border-color: var(--lm-d-ink); color: var(--lm-d-surface); }
.wlp-search { display: inline-flex; align-items: center; gap: 6px; min-inline-size: 220px; padding: 2px 10px; border: 1px solid var(--lm-d-border); border-radius: 9px; color: var(--lm-d-subtle); }
.wlp-search input { border: 0; background: none; outline: 0; font: inherit; font-size: 13px; color: var(--lm-d-ink); inline-size: 100%; padding: 4px 0; }
.wlp-search:focus-within { border-color: var(--lm-d-info); }
.wlp-f { display: grid; grid-template-columns: repeat(var(--wlp-n, 7), minmax(0, 1fr)); border-block-end: 1px solid var(--lm-d-divider); }
.wlp-fig { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-inline-size: 0; padding: 8px 14px; border: 0;
    border-inline-start: 1px solid var(--lm-d-divider); background: none; font: inherit; color: inherit; text-align: start; }
.wlp-fig:first-child { border-inline-start: 0; }
.wlp-fig.is-link { cursor: pointer; } .wlp-fig.is-link:hover, .wlp-fig.is-link:focus-visible { background: var(--lm-d-row-hl); }
.wlp-fig small { font-size: 12px; color: var(--lm-d-muted); white-space: nowrap; }
.wlp-v { font-size: 21px; font-weight: 800; line-height: 1.3; color: var(--lm-d-ink); white-space: nowrap; }
.wlp-v.is-zero { color: var(--lm-d-ok); } .wlp-v.is-none { color: var(--lm-d-subtle); }
.wlp-u { font-size: 12px; font-weight: 700; }
.wlp-fig em { font-style: normal; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 100%; }
.wlp .tone-ok, .wce .tone-ok { color: var(--lm-d-ok); } .wlp .tone-mid { color: var(--lm-d-accent); } .wlp .tone-bad, .wlp .tone-danger { color: var(--lm-d-danger); }
.wlp .tone-warn { color: var(--lm-d-warn); } .wlp .tone-info { color: var(--lm-d-info); } .wlp .tone-mu, .wlp .tone-none { color: var(--lm-d-muted); } .wlp .tone-ink { color: var(--lm-d-ink); }
.wlp-stale { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 7px 16px; background: var(--lm-d-warn-soft); color: var(--lm-d-warn); font-size: 13px;
    border-block-end: 1px solid var(--lm-d-divider); }
.wlp-stale .wcd-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; }
.wlp-g { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.wlp-main { min-inline-size: 0; overflow-x: auto; }
.wlp-table { inline-size: 100%; border-collapse: collapse; font-size: 13px; }
.wlp-table th, .wlp-table td { padding: 8px 12px; border-block-end: 1px solid var(--lm-d-divider); text-align: start; vertical-align: middle; }
.wlp-table thead th { font-size: 12px; font-weight: 600; color: var(--lm-d-subtle); white-space: nowrap; }
.wlp-table tbody th { font-weight: 700; color: var(--lm-d-ink); }
.wlp-table tbody th small { display: block; font-size: 12px; font-weight: 400; color: var(--lm-d-muted); }
.wlp-table tr.wlp-sub-row > * { background: var(--lm-d-chip-bg); }
.wlp-table tr.wlp-sub-row th { padding-inline-start: 32px; }
.wlp-who { display: inline-flex; align-items: center; gap: 8px; }
.wlp-who small { display: block; font-size: 12px; font-weight: 400; color: var(--lm-d-muted); }
.wlp-av { inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--lm-d-info-soft); color: var(--lm-d-info); display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: none; }
.wlp-team-b, .wlp-name-link, .wlp-num-link, .wlp-line { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: start; }
.wlp-team-b { display: inline-flex; align-items: baseline; gap: 6px; } .wlp-team-b small { font-size: 12px; color: var(--lm-d-muted); font-weight: 600; }
.wlp-num-link { font-weight: 800; text-decoration: underline dotted; text-underline-offset: 4px; }
.wlp-name-link { font-weight: 700; } .wlp-name-link:hover, .wlp-team-b:hover b, .wlp-line:hover b { text-decoration: underline; }
.wlp-line b { display: block; } .wlp-line small { display: block; font-size: 12px; font-weight: 400; color: var(--lm-d-muted); }
.wlp-zero { color: var(--lm-d-ok); font-weight: 800; }
.wlp-muted { color: var(--lm-d-muted); font-size: 12px; }
.wlp-chip { display: inline-block; border-radius: 7px; padding: 1px 8px; font-size: 12px; font-weight: 700; background: var(--lm-d-chip-bg); color: var(--lm-d-muted); white-space: nowrap; }
.wlp-chip.is-present { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.wlp-chip.is-not_in { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.wlp-chip.is-danger { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.wlp-chip.is-ok { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); } .wlp-chip.is-ai { background: var(--wcd-ai-soft); color: var(--lm-d-ai); }
.wlp-chip.is-warn { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); } .wlp-chip.is-info { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.wlp-score { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.wlp-score .wce-bar { inline-size: 64px; }
.wlp-score .wce-bar em.tone-ok { background: var(--lm-d-ok); } .wlp-score .wce-bar em.tone-mid { background: var(--lm-d-accent); } .wlp-score .wce-bar em.tone-bad { background: var(--lm-d-danger); }
.wlp-d { font-size: 12px; font-weight: 700; } .wlp-d.is-up { color: var(--lm-d-ok); } .wlp-d.is-down { color: var(--lm-d-danger); }
/* the design's table: «يركّز على» is plain words («كويس في» green); on a phone they become chips */
.wlp-focus { display: inline-block; font-size: 12px; color: var(--lm-d-ink); }
.wlp-good { display: inline-block; color: var(--lm-d-ok); font-size: 12px; }
.wlp-act { text-align: end; white-space: nowrap; } .wlp-acts { display: inline-flex; gap: 4px; align-items: center; }
.wlp-empty { color: var(--lm-d-muted); font-size: 13px; padding: 16px 12px; }
.wlp-more { margin: 0; padding: 8px 12px; }
.wlp-side { border-inline-start: 1px solid var(--lm-d-divider); min-inline-size: 0; }
.wlp-block { padding: 10px 14px; border-block-end: 1px solid var(--lm-d-divider); font-size: 13px; }
.wlp-block:last-child { border-block-end: 0; }
.wlp-block h3 { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--lm-d-ink); }
.wlp-block.is-ai h3 { color: var(--lm-d-ai); }
.wlp-block p { margin: 0 0 6px; }
.wlp-it { display: block; padding: 4px 0; background: none; border: 0; font: inherit; color: inherit; text-align: start; text-decoration: none; inline-size: 100%; }
.wlp-it.is-link { cursor: pointer; } .wlp-it.is-link:hover b { text-decoration: underline; }
.wlp-it b { display: block; font-size: 13px; color: var(--lm-d-ink); } .wlp-it span { font-size: 12px; }
.wlp-it .wcd-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; }
.wlp-rank { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 2px 0; font-size: 13px; }
.wlp-rank > span:first-child { inline-size: 70px; flex: none; font-weight: 700; font-size: 12px; }
.wlp-rank b { font-weight: 700; color: var(--lm-d-ink); }
.wlp-old { padding: 10px 14px; }
/* the WC-R4 list under the one head: its own figures, alerts, view tabs and signals are the head's now */
.wc-r4 .wlp-old .wc-brief, .wc-r4 .wlp-old .wc-alerts, .wc-r4 .wlp-old .wc-views, .wc-r4 .wlp-old .wc-signals, .wc-r4 .wlp-old .wc-freshness { display: none; }
.wcl-dots { display: none; }
/* «تقييمي» per the approved image */
.wce-star { inline-size: 28px; block-size: 28px; border-radius: 8px; background: var(--lm-d-ok-soft); color: var(--lm-d-ok); display: grid; place-items: center; font-size: 15px; }
.wce-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.wce-tabs { display: inline-flex; gap: 6px; }
.wce-bar.is-pace { position: relative; overflow: visible; }
.wce-bar.is-pace em { border-radius: 9px; }
.wce-bar.is-pace s { position: absolute; inset-block: -3px; inline-size: 2px; background: var(--lm-d-ink); }
.wce.is-full .wce-hd { border-block-end: 1px solid var(--lm-d-divider); }
.wce-full.wlp-g { display: grid; }
@media (max-width: 1279.98px) {
    .wlp-f { grid-template-columns: repeat(4, minmax(0, 1fr)); } .wlp-fig:nth-child(4n+1) { border-inline-start: 0; }
    .wlp-g, .wce-full.wlp-g { grid-template-columns: minmax(0, 1fr); } .wlp-side { border-inline-start: 0; border-block-start: 1px solid var(--lm-d-divider); }
}
@media (max-width: 767.98px) {
    /* a panel opened on a phone takes the whole screen, with a back button (approved phone design) */
    .wcl-panel.wlp { position: fixed; inset: 0; z-index: 40; border-radius: 0; border: 0; overflow-y: auto; margin: 0; padding-block-end: 80px; }
    .wlp-back { display: inline-grid; }
    .wlp-tabs { margin-inline-start: 0; inline-size: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .wlp-f { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 12px; border: 0; }
    .wlp-fig, .wlp-fig:first-child { border: 1px solid var(--lm-d-border); border-radius: 14px; padding: 8px 12px; background: var(--lm-d-surface); }
    .wlp-table thead { display: none; }
    .wlp-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: 4px 12px; margin: 8px 12px; padding: 10px 12px;
        border: 1px solid var(--lm-d-border); border-radius: 14px; background: var(--lm-d-surface); }
    .wlp-table th, .wlp-table td { padding: 0; border: 0; }
    .wlp-table tbody th { grid-column: 1 / -1; }
    .wlp-table td[data-label]::before { content: attr(data-label) " "; font-size: 12px; font-weight: 400; color: var(--lm-d-muted); }
    .wlp-table td.wlp-act { grid-column: 1 / -1; text-align: start; }
    .wlp-table tr.wlp-sub-row { margin-inline-start: 28px; }
    .wlp-side { border: 0; }
    .wcl-dots { display: flex; justify-content: center; gap: 5px; margin-block: -6px 12px; }
    .wcl-dots i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--lm-d-border); }
    .wcl-dots i.is-on { inline-size: 16px; border-radius: 9px; background: var(--lm-d-ink); }
}

/* ── WC-ONE-PAGE · the approved phone design (HOMEi-WC-design-v3-mobile · HOMEi-WC-phone-1…6) ──────────
   The page: title with «+ مهمة» beside it, the date line, the attendance under; the cards swipe, each short (the «أنا»
   card: قراري · مطلوب · متأخر). «تقييمي»: the short card. An opened level: its own screen — back · title · six figures
   (a department: «محتاج انتباهك» next), the tabs, each row a card. «أنا»: its own screen too, around the page's table. */
@media (max-width: 767.98px) {
    /* the page head */
    .wcd-head > .wcd-head-text { order: 0; flex: 1 1 0; }
    .wcd-head > #wc-act-new-task { order: 1; }
    .wcd-head > :not(.wcd-head-text):not(#wc-act-new-task):not(.wcd-grow), .wcd-head > #wc-attendance > * { order: 2; flex-basis: 100%; }
    .wcd-lead-hi, .wcd-lg { display: none; }
    .wcd-lead-date, .wcd-sh { display: inline; }

    /* the cards: short — no small lines, no ⓘ, the «أنا» card's three figures, the Live Manager's two rates */
    .wcl-fs, .wcl-top, .wcl-card .wce-info, .wcl-2nd { display: none; }
    .wcl-lg { display: none; } .wcl-sh { display: inline; }
    .wcl-card.is-me .wcl-fig:not([data-card="decide"]):not([data-card="mine"]):not([data-card="late"]) { display: none; }
    .wcl-card.is-lm .wcl-fig:nth-child(n+3) { display: none; }
    .wcl-fv { font-size: 22px; }

    /* «تقييمي» — the short card */
    .wce-hd { padding: 10px 14px 0; border-block-end: 0; }
    .wce-hd .wce-star, .wce-hd > .wce-info, .wce-hd .wce-chip, .wce-hd .wce-chips, .wce-hd .wce-tabs, .wce-more { display: none; }
    .wce .wce-grid, .wce .wce-full.wlp-g { display: none; }
    .wce-more-m { display: inline; background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--lm-d-info); cursor: pointer; }
    .wce-m { display: block; padding: 8px 14px 14px; }
    .wce-m-top { display: flex; gap: 14px; align-items: center; }
    .wce-m .wce-ring { inline-size: 78px; block-size: 78px; }
    .wce-m .wce-ring > span { inline-size: 62px; block-size: 62px; font-size: 22px; }
    .wce-m-side { display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; font-size: 14px; color: var(--lm-d-muted); }
    .wce-m-chip { margin: 10px 0 0; border-radius: 10px; padding: 7px 12px; font-size: 14px; color: var(--lm-d-ink); }
    .wce-m-chip.is-good { background: var(--lm-d-ok-soft); } .wce-m-chip.is-focus { background: var(--lm-d-accent-soft); }
    .wce-m-chip b { font-weight: 800; }
    .wce-m-chip .wce-step { display: block; font-size: 13px; }

    /* «تقييمي» — «التفاصيل»: its own screen */
    .wce.is-full { position: fixed; inset: 0; z-index: 40; margin: 0; border: 0; border-radius: 0; overflow-y: auto; background: var(--lm-d-page); padding-block-end: 80px; }
    .wce.is-full .wce-hd { position: sticky; inset-block-start: 0; z-index: 2; background: var(--lm-d-page); padding: 12px 16px 8px; }
    .wce.is-full .wce-title { font-size: 22px; }
    .wce.is-full .wce-sub { flex-basis: 100%; order: 3; font-size: 13px; }
    .wce-back { display: inline-grid; order: 2; margin-inline-start: auto; }
    .wce-mfull { display: block; padding: 0 16px 16px; }
    .wce-m-exp { margin: 0 0 10px; border-radius: 9px; padding: 5px 12px; background: var(--lm-d-quiet-bg); color: var(--lm-d-muted); font-size: 13px; }
    .wce-m-card, .wce-mi { display: block; margin: 0 0 10px; padding: 12px 14px; background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 14px; font-size: 14px; color: var(--lm-d-ink); }
    .wce-m-card .wce-score-top { align-items: flex-start; }
    .wce-m-card .wce-score-side { flex: 1 1 auto; font-size: 13px; }
    .wce-m-card .wce-track { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
    .wce-m-card .wce-track > b { grid-row: 1; grid-column: 2; }
    .wce-m-card .wce-track .wce-bar { grid-column: 1 / -1; inline-size: 100%; }
    .wce-m-card .wce-track > span { inline-size: auto; }
    .wce-m-card .wce-hist { display: block; block-size: auto; }
    .wce-m-card .wce-hist > span, .wce-m-card .wce-hist small.wcd-num { display: none; }
    .wce-m-card .wce-hist-l { display: inline; margin: 0; font-size: 13px; color: var(--lm-d-muted); }
    .wce-m-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 0 8px; }
    .wce-m-h h3 { margin: 0; font-size: 17px; font-weight: 800; color: var(--lm-d-ink); display: flex; gap: 8px; align-items: center; }
    .wce-mi-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
    .wce-mi-h b { font-size: 16px; } .wce-mi-h span { font-weight: 800; }
    .wce-mi-l { margin: 4px 0; font-size: 13px; color: var(--lm-d-muted); }
    .wce-mi .wce-bar.is-wide { margin-block: 6px; }
    .wce-mi .wce-step, .wce-mfull .wce-step { white-space: normal; font-size: 13px; margin: 2px 0 0; }
    .wce-mfull .wce-note, .wce-mfull .wce-ai { padding: 10px 14px; font-size: 14px; margin-block-end: 10px; }

    /* an opened level / the Live Manager: its own screen — the head's parts laid out in the design's order */
    .wcl-panel.wlp { display: flex; flex-direction: column; background: var(--lm-d-page); }
    .wcl-panel.wlp .wlp-h, .wcl-panel.wlp .wlp-g, .wcl-panel.wlp .wlp-side { display: contents; }
    .wlp-ttl { order: 0; position: sticky; inset-block-start: 0; z-index: 2; background: var(--lm-d-page); padding: 12px 16px 6px; }
    .wlp-ttl h2 { font-size: 24px; }
    .wlp-ttl .wlp-sub { display: block; font-size: 13px; font-weight: 400; }
    .wlp-ttl .wlp-back { order: 2; margin-inline-start: auto; flex: none; }
    .wlp-upd { display: inline; } .wlp-upd b { color: var(--lm-d-info); } .wlp-lg { display: none; }
    .wlp-f { order: 1; }
    /* six figures: the seventh steps aside — a department's «أنجز», a company's score (the design's phone screens) */
    .wlp:not([data-level="department"]) .wlp-f .wlp-fig:nth-child(n+7), .wlp[data-level="department"] .wlp-fig[data-fig="done"], .wlp[data-level="company"] .wlp-fig[data-fig="score"] { display: none; }
    .wlp-v { font-size: 24px; }
    .wlp-stale { order: 2; margin: 0 12px 10px; border: 1px solid var(--lm-d-warn); border-radius: 14px; padding: 10px 14px; }
    .wlp-tabs { order: 4; padding: 4px 12px 10px; }
    .wlp-tab { min-block-size: 36px; padding: 2px 16px; font-size: 14px; }
    .wcl-panel.wlp .wlp-search { display: none; }
    .wcl-panel.wlp .wlp-main, .wcl-panel.wlp .wlp-old { order: 5; overflow: visible; }
    .wcl-panel.wlp .wlp-block { order: 7; border: 0; padding: 8px 16px; }
    .wlp-block h3 { font-size: 17px; display: flex; gap: 8px; align-items: center; }
    .wlp[data-level="department"] .wlp-block[data-side="attention"] { order: 3; }
    .wlp[data-level="team"] .wlp-block, .wlp[data-level="company"] .wlp-block:not([data-side="records"]) { display: none; }
    .wlp-block .wlp-it { margin-block-end: 8px; padding: 10px 14px; background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 14px; }
    .wlp-block .wlp-it b { font-size: 15px; } .wlp-block .wlp-it span { font-size: 13px; }
    .wlp-ph { display: inline; } td.wlp-ph, small.wlp-ph { display: block; }
    .wlp-block .wlp-it .wlp-it-go { display: inline-block; margin-block-start: 8px; padding: 3px 14px; border: 1px solid var(--lm-d-border); border-radius: 9px;
        font-size: 14px; font-weight: 700; color: var(--lm-d-ink); }

    /* each row a card: the name and its score badge, a line of counts, its focus chip, its buttons */
    .wlp-table, .wlp-table tbody { display: block; }
    .wlp-table tbody tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 6px; margin: 0 12px 10px; padding: 12px 14px; font-size: 14px; }
    .wlp-table tbody tr > * { flex: none; order: 2; }
    .wlp-table tbody tr > th { flex: 1 1 calc(100% - 110px); order: 0; min-inline-size: 0; font-size: 16px; }
    .wlp-table tbody tr > .wlp-badge-c { order: 1; }
    .wlp-table tbody tr > .wlp-fc, .wlp-table tbody tr > .wlp-act { flex-basis: 100%; order: 3; }
    .wlp-table tbody tr > .wlp-act { order: 4; }
    .wlp-table tbody tr > .wlp-att, .wlp-table tbody tr > .wlp-sc, .wlp-table tbody tr > .wlp-old-c, .wlp-table tbody tr > .wlp-m-x,
    .wlp-table tbody tr > .wlp-m-open, .wlp-table tbody tr > .wlp-fc.is-empty { display: none; }
    .wlp-table tbody tr > th small { font-size: 13px; }
    .wlp-table .wlp-fc > span { display: block; border-radius: 10px; padding: 6px 12px; font-size: 14px; color: var(--lm-d-ink); }
    .wlp-table .wlp-fc > .wlp-weak, .wlp-table .wlp-fc > .wlp-focus { background: var(--lm-d-accent-soft); }
    .wlp-table .wlp-fc > .wlp-good { background: var(--lm-d-ok-soft); }
    .wlp-table td.wlp-fc::before, .wlp-table td.wlp-ln-type::before { content: none; }
    .wlp-table td[data-label]::before { font-size: 14px; }
    .wlp-av { inline-size: 40px; block-size: 40px; font-size: 16px; }
    .wlp-badge { display: inline-block; min-inline-size: 44px; text-align: center; border-radius: 10px; padding: 3px 10px; font-size: 15px; font-weight: 800;
        background: var(--lm-d-quiet-bg); color: var(--lm-d-subtle); }
    .wlp-badge.tone-ok { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
    .wlp-badge.tone-mid { background: var(--lm-d-accent-soft); color: var(--lm-d-accent); }
    .wlp-badge.tone-bad { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
    .wlp-badge small { font-size: 13px; font-weight: 700; }
    .wlp-table tr.wlp-sub-row { margin-block: -4px 10px; margin-inline: 28px 12px; padding: 8px 12px; border: 0; background: var(--lm-d-chip-bg); }
    .wlp-table tr.wlp-sub-row > th { font-size: 14px; }

    /* the Live Manager: four rates in one row, the day's summary, the tabs, each line a card with its kind */
    .wlp[data-level="lm"] .wlp-f { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 6px 12px 10px; padding: 8px 0;
        background: var(--lm-d-surface); border: 1px solid var(--lm-d-border); border-radius: 14px; }
    .wlp[data-level="lm"] .wlp-fig, .wlp[data-level="lm"] .wlp-fig:first-child { flex-direction: column-reverse; align-items: center; border: 0; border-radius: 0; padding: 2px 4px; background: none; }
    .wlp[data-level="lm"] .wlp-fig:nth-child(n+5), .wlp[data-level="lm"] .wlp-fig em { display: none; }
    .wlp[data-level="lm"] .wlp-block[data-side="today"] { order: 2; margin: 0 12px 10px; padding: 10px 14px; border-radius: 14px; background: var(--wcd-ai-soft); }
    .wlp[data-level="lm"] .wlp-tabs { order: 3; }
    .wlp[data-level="lm"] .wlp-block[data-side="waiting"] { order: 6; } .wlp[data-level="lm"] .wlp-block[data-side="topic"] { order: 7; }
    .wlp[data-level="lm"] .wlp-table tbody tr > .wlp-ln-type { order: 1; }
    .wlp[data-level="lm"] .wlp-table tbody tr > .wlp-ln-about, .wlp[data-level="lm"] .wlp-table tbody tr > .wlp-ln-since { font-size: 13px; color: var(--lm-d-muted); }
    .wlp[data-level="lm"] .wlp-table tbody tr > .wlp-act { order: 4; }

    /* «أنا»: its own screen around the page's table — back · title · six figures · the table · the side after it */
    .wcd.is-me-open { display: flex; flex-direction: column; }
    .wcd.is-me-open > .wcd-head, .wcd.is-me-open > .wcl-wrap, .wcd.is-me-open > #wc-evaluation, .wcd.is-me-open > .wcl-hidden-note { display: none; }
    .wcl-panel.wlp[data-level="me"] { position: static; display: contents; }
    #wc-me-panel .wlp-ttl { order: 1; position: static; padding-inline: 0; }
    #wc-me-panel .wlp-f { order: 2; padding-inline: 0; }
    .wcd.is-me-open > .wcd-grid { order: 3; }
    #wc-me-panel .wlp-tabs, #wc-me-panel .wlp-main { display: none; }
    #wc-me-panel .wlp-block { order: 4; padding-inline: 0; }
}

/* ── الحضور والانصراف / Attendance card ─────────────────────────────
   Mobile-first and self-contained: every selector is under .wc-att, so no
   other Work Center card or grid is reachable from here. Logical
   properties only (RTL = LTR). Nothing sets a minimum inline size; long
   shift and site names wrap. The action is a full-width 48px touch target
   on phones and an ordinary button beside the facts from 640px. */
.wc-att .wc-att-card {
    background: var(--wc-card);
    border: 1px solid var(--wc-border);
    border-inline-start: 3px solid var(--wc-accent);
    border-radius: var(--wc-radius);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-inline-size: 0;
}

.wc-att .wc-att-card.state-in { border-inline-start-color: var(--wc-warn); }
.wc-att .wc-att-card.state-out { border-inline-start-color: var(--wc-ok); }
.wc-att .wc-att-card.state-off { border-inline-start-color: var(--wc-border); }

.wc-att .wc-att-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wc-att .wc-att-shift { display: flex; flex-direction: column; gap: 0.125rem; min-inline-size: 0; flex: 1 1 10rem; }
.wc-att .wc-att-shift-name { font-size: 0.9375rem; font-weight: 700; overflow-wrap: anywhere; }
.wc-att .wc-att-shift-time { font-size: 0.8125rem; color: var(--wc-muted); font-variant-numeric: tabular-nums; text-align: start; }

.wc-att .wc-att-state {
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
    background: var(--wc-soft);
    color: var(--wc-muted);
}

.wc-att .state-in .wc-att-state { background: var(--wc-warn-soft); color: var(--wc-warn); }
.wc-att .state-out .wc-att-state { background: var(--wc-ok-soft); color: var(--wc-ok); }

.wc-att .wc-att-facts { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; }
.wc-att .wc-att-fact { display: flex; flex-wrap: wrap; gap: 0.25rem 0.375rem; align-items: baseline; min-inline-size: 0; }
.wc-att .wc-att-fact dt { color: var(--wc-muted); font-size: 0.75rem; }
.wc-att .wc-att-fact dd { margin: 0; font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-inline-size: 0; }

.wc-att .wc-att-msg {
    border-radius: 0.5rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.wc-att .wc-att-msg.is-ok { background: var(--wc-ok-soft); color: var(--wc-ok); }
.wc-att .wc-att-msg.is-bad { background: var(--wc-danger-soft); color: var(--wc-danger); }
.wc-att .wc-att-msg.is-warn { background: var(--wc-warn-soft); color: var(--wc-warn); }

.wc-att .wc-att-btn {
    border: 0;
    border-radius: 0.625rem;
    min-block-size: 3rem;
    padding: 0.625rem 1rem;
    inline-size: 100%;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    white-space: normal;
}

.wc-att .wc-att-btn.is-in { background: var(--wc-ok); }
.wc-att .wc-att-btn.is-out { background: var(--wc-accent); }
.wc-att .wc-att-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.wc-att .wc-att-btn:not(:disabled):hover { filter: brightness(0.95); }

.wc-att .wc-att-link { font-size: 0.75rem; font-weight: 700; color: var(--wc-accent); align-self: flex-start; }
.wc-att [x-cloak] { display: none; }

@media (min-width: 640px) {
    .wc-att .wc-att-card { padding: 0.75rem 0.875rem; max-inline-size: 40rem; }
    .wc-att .wc-att-btn { inline-size: auto; align-self: flex-start; min-inline-size: 12rem; min-block-size: 2.75rem; }
}
.wc-att .wc-att-note { font-size: 0.75rem; color: var(--wc-muted); line-height: 1.5; overflow-wrap: anywhere; }