/* The Workflow board in the redesign (Hallmark, Rami 2 November 2026: the approved mockup, review/hallmark/workflow-rethink.html).
   public/workflow.js. Cadence tokens, so light and dark follow by themselves; a phone of 400px with no sideways scroll (Every cell
   scrolls inside its own box there); Arabic mirrors (logical properties). Every rule is scoped to #wfPage .wf-hall so nothing else moves.
   The top: Social media and its two tabs (Workflow, Client setup, with counts) on one line, ⋯ at its end. One toolbar under it.
   Steps: one row per client (name, the steps line, where it is, status, the step's button, ⋯). Every cell: the cells under their steps. */

/* ---------- the top ---------- */
html body #wfPage .wf-hall .wf-head:not(#_):not(#_){margin:0 0 18px;align-items:center;border-bottom:1px solid var(--border);flex-wrap:nowrap}
html body #wfPage .wf-hall .wf-head .hl-head-l:not(#_):not(#_){flex-wrap:nowrap;gap:12px 28px;min-width:0;flex:1 1 auto;align-items:flex-end}
html body #wfPage .wf-hall .wf-head .hl-title:not(#_):not(#_):not(#_){font-size:30px;letter-spacing:-.02em;flex:none;padding-bottom:10px}
html body #wfPage .wf-tabs:not(#_):not(#_){display:flex;align-items:stretch;gap:4px 22px;min-width:0;overflow-x:auto;scrollbar-width:none;margin:0;padding:0;border:0}
html body #wfPage .wf-tabs::-webkit-scrollbar{display:none}
html body #wfPage .wf-tabs button:not(#_):not(#_):not(#_){display:inline-flex;align-items:center;gap:8px;flex:none;padding:8px 0 11px;margin:0 0 -1px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;font:600 15px/1.2 var(--font-sans);color:var(--ink-muted);cursor:pointer;white-space:nowrap}
html body #wfPage .wf-tabs button:hover:not(#_):not(#_):not(#_){color:var(--c-ink)}
html body #wfPage .wf-tabs button.on:not(#_):not(#_):not(#_){color:var(--c-ink);border-bottom-color:var(--c-ink)}
html body #wfPage .wf-tabs button i:not(#_):not(#_){display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 7px;box-sizing:border-box;border-radius:999px;background:var(--surface-sunken);color:var(--ink-muted);font:600 12px/1 var(--font-sans);font-style:normal}
html body #wfPage .wf-tabs button.on i:not(#_):not(#_){background:var(--c-ink);color:var(--surface)}
html body #wfPage .wf-tabs button:focus-visible:not(#_){outline:2px solid var(--focus);outline-offset:2px}
html body #wfPage .wf-head .hl-head-r:not(#_):not(#_){padding-bottom:8px}
html body #wfPage .wf-pmore:not(#_):not(#_):not(#_){width:40px;height:40px;min-height:40px;padding:0;display:inline-grid;place-items:center;font-size:18px}

/* ---------- the toolbar ---------- */
html body #wfPage .wf-bar:not(#_):not(#_){display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
html body #wfPage .wf-grow:not(#_){flex:1 1 auto}
html body #wfPage .wf-vsep:not(#_){width:1px;height:24px;background:var(--border);margin:0 2px}
html body #wfPage .wf-seg:not(#_){display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--surface-sunken)}
html body #wfPage .wf-seg button:not(#_):not(#_){display:inline-flex;align-items:center;height:34px;padding:0 14px;border:0;border-radius:8px;background:transparent;font:600 13.5px/1 var(--font-sans);color:var(--ink-muted);cursor:pointer;white-space:nowrap}
html body #wfPage .wf-seg button[aria-pressed="true"]:not(#_):not(#_){background:var(--surface);color:var(--c-ink);box-shadow:0 1px 2px rgb(0 0 0 / .08)}
html body #wfPage .wf-seg button:focus-visible:not(#_){outline:2px solid var(--focus);outline-offset:2px}
html body #wfPage .wf-bar .hl-mswitch:not(#_):not(#_){height:40px;padding:0 4px;border-radius:10px;background:var(--surface-sunken)}
html body #wfPage .wf-bar .hl-mlabel:not(#_):not(#_):not(#_){font-size:17px;font-weight:600;min-width:150px;justify-content:center}
html body #wfPage .wf-tgl:not(#_):not(#_){display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border:1.5px solid var(--border-strong);border-radius:999px;background:var(--surface);font:600 13.5px/1 var(--font-sans);color:var(--c-ink);cursor:pointer;white-space:nowrap}
html body #wfPage .wf-tgl:hover:not(#_):not(#_){background:var(--surface-hover)}
html body #wfPage .wf-tgl.on:not(#_):not(#_){background:var(--c-ink);border-color:var(--c-ink);color:var(--surface)}
html body #wfPage .wf-tgl:focus-visible:not(#_){outline:2px solid var(--focus);outline-offset:2px}
html body #wfPage .wf-tn:not(#_){font-size:12px;font-weight:700;opacity:.7}
html body #wfPage .wf-findw:not(#_){position:relative;display:inline-flex;align-items:center;margin-inline-start:auto}
html body #wfPage .wf-findw>svg:not(#_){position:absolute;inset-inline-start:12px;width:15px;height:15px;fill:none;stroke:var(--ink-subtle);stroke-width:2;stroke-linecap:round;pointer-events:none}
html body #wfPage .wf-find:not(#_):not(#_):not(#_){width:220px;height:40px;min-height:40px;box-sizing:border-box;padding-inline:36px 12px!important;border-radius:10px}

/* ---------- both tables: the page scrolls, no box of its own; rules between rows only ---------- */
html body #wfPage .wf-hall .wf-wrap:not(#_):not(#_){background:transparent;border:0;border-radius:0;overflow-x:auto;overflow-y:visible}
html body #wfPage .wf-hall :is(.wf-t,.wf-st):not(#_):not(#_){border-collapse:separate;border-spacing:0;min-width:100%}
html body #wfPage .wf-hall :is(.wf-t,.wf-st) :is(th,td):not(#_):not(#_){border:0;border-bottom:1px solid var(--border);height:auto}
html body #wfPage .wf-hall :is(.wf-t,.wf-st) thead th:not(#_):not(#_):not(#_){background:var(--page,var(--surface));font:600 12.5px/1.2 var(--font-sans);color:var(--ink-muted);padding:11px 10px;text-align:start}
html body #wfPage .wf-hall .wf-t thead th:not(.wf-first):not(#_):not(#_):not(#_){text-align:center}
html body #wfPage .wf-hall :is(.wf-t,.wf-st) th.lt-pth:hover:not(#_):not(#_){color:var(--c-ink)}
html body #wfPage .wf-hall :is(.wf-t,.wf-st) td.wf-first:not(#_):not(#_):not(#_),html body #wfPage .wf-hall :is(.wf-t,.wf-st) th.wf-first:not(#_):not(#_):not(#_){min-width:220px;box-shadow:none;border-inline-end:0;background:var(--page,var(--surface))}
html body #wfPage .wf-hall .wf-row td:not(#_):not(#_):not(#_){border-top:0;padding:10px}
html body #wfPage .wf-hall .wf-row:hover td:not(#_):not(#_):not(#_){background:var(--surface-hover)}
html body #wfPage .wf-hall .wf-r-active td.wf-first:not(#_):not(#_),html body #wfPage .wf-hall .wf-r-new td.wf-first:not(#_):not(#_){box-shadow:none}
/* a group's heading */
html body #wfPage .wf-hall .wf-grp td:not(#_):not(#_):not(#_){height:auto;padding:22px 4px 8px;background:transparent;border-bottom:1px solid var(--border)}
html body #wfPage .wf-hall .wf-grp:first-child td:not(#_):not(#_):not(#_){padding-top:10px}
html body #wfPage .wf-hall .wf-gt:not(#_):not(#_){padding:0;font-size:15px;gap:8px}
html body #wfPage .wf-hall .wf-g-active .wf-gt:not(#_):not(#_){color:var(--c-ink)}
html body #wfPage .wf-hall .wf-g-new .wf-gt:not(#_):not(#_){color:var(--accent-violet)}
html body #wfPage .wf-hall .wf-grp[hidden]:not(#_),html body #wfPage .wf-hall .wf-row[hidden]:not(#_){display:none}
/* the client: initials in a circle, the name (it opens the month), the team under it */
html body #wfPage .wf-hall .wf-cl:not(#_):not(#_):not(#_){display:flex;align-items:center;gap:10px;height:auto;padding:0;color:var(--c-ink);text-decoration:none;min-width:0}
html body #wfPage .wf-av:not(#_):not(#_){flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font:700 11px/1 var(--font-sans);font-style:normal;background:hsl(var(--wf-h) 75% 88%);color:hsl(var(--wf-h) 55% 24%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body #wfPage .wf-av:not(#_):not(#_){background:hsl(var(--wf-h) 32% 30%);color:#f1f2f4}}
:root[data-theme="dark"] body #wfPage .wf-av:not(#_):not(#_){background:hsl(var(--wf-h) 32% 30%);color:#f1f2f4}
html body #wfPage .wf-cnm:not(#_){display:flex;flex-direction:column;gap:3px;min-width:0}
html body #wfPage .wf-hall .wf-cnm b:not(#_):not(#_){font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body #wfPage .wf-hall .wf-cnm small:not(#_):not(#_){margin:0;font-size:12.5px;color:var(--ink-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body #wfPage .wf-hall .wf-cl:hover b:not(#_):not(#_){text-decoration:underline;text-underline-offset:.2em}
html body #wfPage .wf-hall .wf-cl:focus-visible:not(#_){outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
html body #wfPage .wf-hall .wf-ghost:not(#_):not(#_){position:static;font-style:normal;color:var(--ink-muted);font-size:13px;padding:0;white-space:normal}
html body #wfPage .wf-hall .wf-t td.wf-later:not(#_):not(#_){text-align:start;white-space:nowrap}

/* ---------- Steps ---------- */
html body #wfPage .wf-st th:nth-child(2):not(#_):not(#_),html body #wfPage .wf-st td.wf-sl:not(#_):not(#_){width:300px;min-width:280px}
html body #wfPage .wf-st td.wf-where:not(#_):not(#_){min-width:200px}
html body #wfPage .wf-st td.wf-stat:not(#_):not(#_){min-width:140px;white-space:nowrap}
html body #wfPage .wf-st .hl-dw:not(#_):not(#_){font-size:13.5px;font-weight:700;gap:8px}
html body #wfPage .wf-st .hl-dw>i:not(#_):not(#_){width:10px;height:10px}
html body #wfPage .wf-st td.wf-gocell:not(#_):not(#_){width:180px;padding-inline:6px}
html body #wfPage .wf-st td.wf-mo:not(#_):not(#_),html body #wfPage .wf-st th.wf-mo:not(#_):not(#_){width:40px;padding-inline:0}
/* the step's button: a pale block with → (where that step is done) */
html body #wfPage .wf-go:not(#_):not(#_):not(#_){display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-width:158px;height:36px;padding:0 12px;box-sizing:border-box;border-radius:8px;font:700 13.5px/1 var(--font-sans);white-space:nowrap;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--sg-ink) 35%,transparent)}
html body #wfPage .wf-rmore:not(#_):not(#_):not(#_){width:32px;height:32px;min-height:32px;padding:0;display:inline-grid;place-items:center;border-color:transparent;background:transparent}
/* the steps line: round circles joined by a line, green up to the step it is at */
html body #wfPage .wf-line:not(#_){position:relative;display:flex;align-items:center;justify-content:space-between;padding-inline:2px}
html body #wfPage .wf-line::before{content:"";position:absolute;inset-inline:13px;top:50%;height:2px;background:var(--border);transform:translateY(-50%)}
html body #wfPage .wf-fill:not(#_){position:absolute;inset-inline-start:13px;top:50%;height:2px;width:calc((100% - 26px) * var(--wf-f));background:var(--accent-green);transform:translateY(-50%)}
html body #wfPage .wf-sd:not(#_):not(#_){position:relative;z-index:1;flex:none;display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:50%;font:700 10.5px/1 var(--font-sans);font-variant-numeric:tabular-nums;background:var(--surface-sunken);color:var(--ink-muted);cursor:pointer;transition:transform 120ms cubic-bezier(.16,1,.3,1)}
html body #wfPage .wf-sd:hover:not(#_):not(#_),html body #wfPage .wf-sd.open:not(#_):not(#_){transform:scale(1.15)}
html body #wfPage .wf-sd:focus-visible:not(#_){outline:2px solid var(--focus);outline-offset:2px}
html body #wfPage .wf-sd.done:not(#_):not(#_){background:var(--accent-green);color:var(--surface)}
html body #wfPage .wf-sd.now:not(#_):not(#_){background:#fbe08a;color:#3b2b00;box-shadow:0 0 0 2px var(--surface),0 0 0 4px #c99a06}
html body #wfPage .wf-sd.now.late:not(#_):not(#_){background:var(--status-stuck-bg);color:var(--status-stuck-fg);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--status-stuck-fg)}
html body #wfPage .wf-sd.bad:not(#_):not(#_){background:var(--status-stuck-bg);color:var(--status-stuck-fg)}
html body #wfPage .wf-sd.off:not(#_):not(#_){background:var(--surface);color:var(--ink-subtle);box-shadow:inset 0 0 0 1.5px var(--border)}
@media (prefers-reduced-motion:reduce){html body #wfPage .wf-sd:not(#_):not(#_){transition:none}}
/* where it is: the step's number and name, who has it since when, its due day */
html body #wfPage .wf-where:not(#_) b:not(#_){display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--c-ink)}
html body #wfPage .wf-where:not(#_)>span:not(.wf-wst):not(#_){display:block;margin-top:3px;font-size:13px;color:var(--ink-muted)}
html body #wfPage .wf-where .wf-late:not(#_):not(#_){display:inline;color:var(--status-stuck-fg);font-weight:600;white-space:nowrap}
html body #wfPage .wf-n:not(#_){display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:5px;background:#fbe08a;color:#3b2b00;font:700 11.5px/1 var(--font-sans);font-style:normal}
html body #wfPage .wf-n.late:not(#_){background:var(--status-stuck-bg);color:var(--status-stuck-fg)}
/* a circle pressed: the step, who, its cells, Open the month */
html body #wfPage .wf-pop:not(#_):not(#_){position:fixed;z-index:60;width:min(330px,calc(100vw - 16px));box-sizing:border-box;background:var(--surface);border-radius:12px;box-shadow:var(--shadow-menu);padding:6px}
html body #wfPage .wf-ph:not(#_){display:flex;flex-direction:column;gap:3px;padding:8px 10px 4px}
html body #wfPage .wf-ph small:not(#_){font-size:12px;font-weight:600;color:var(--ink-muted)}
html body #wfPage .wf-ph b:not(#_){font-size:15px;color:var(--c-ink)}
html body #wfPage .wf-ph span:not(#_){font-size:13px;color:var(--ink-muted)}
html body #wfPage .wf-pcs:not(#_){display:flex;flex-wrap:wrap;gap:10px;padding:8px 10px 10px}
html body #wfPage .wf-pc:not(#_){display:flex;flex-direction:column;gap:5px;font-size:11.5px;font-weight:600;color:var(--ink-muted)}
html body #wfPage .wf-pc small:not(#_){font-size:11.5px}
html body #wfPage .wf-pnone:not(#_){font-size:13px;color:var(--ink-muted)}
html body #wfPage .wf-pgo:not(#_):not(#_){display:block;margin:0;padding:11px 10px;border-top:1px solid var(--border);font-weight:600;color:var(--c-ink);text-decoration:none;border-radius:0 0 8px 8px}
html body #wfPage .wf-pgo:hover:not(#_):not(#_){background:var(--surface-hover)}

/* ---------- Every cell: the step's number and name over its cells ---------- */
html body #wfPage .wf-t .wf-gh th:not(#_):not(#_):not(#_){padding:10px 6px 0;border-bottom:0;color:var(--ink-2,var(--c-ink));font-size:12px}
html body #wfPage .wf-t .wf-gh th.wf-g span:not(#_){display:block;padding-bottom:6px;border-bottom:2px solid var(--border);white-space:nowrap}
html body #wfPage .wf-t .wf-gh th.wf-g i:not(#_){display:inline-grid;place-items:center;width:18px;height:18px;margin-inline-end:6px;border-radius:50%;background:var(--surface-sunken);color:var(--ink-muted);font:700 10px/1 var(--font-sans);font-style:normal}
html body #wfPage .wf-hall .wf-t td.wf-td:not(#_):not(#_):not(#_){padding:10px 8px;text-align:center}
html body #wfPage .wf-hall .wf-t th.wf-first:not(#_):not(#_):not(#_),html body #wfPage .wf-hall .wf-t td.wf-first:not(#_):not(#_):not(#_){position:sticky;inset-inline-start:0;z-index:2;box-shadow:inset -1px 0 0 var(--border)}
html body #wfPage .wf-hall .wf-t thead th.wf-first:not(#_):not(#_):not(#_){z-index:5}
html body #wfPage .wf-hall .wf-t .wf-c:not(#_):not(#_){height:28px;border-radius:7px;font-weight:700;font-size:12.5px}

/* narrower (the Clients column beside it, a smaller screen): the columns give room, then Status goes (its dot is on the step) */
html body #wfPage .wf-hall .wf-swrap:not(#_):not(#_){container-type:inline-size}
@container (max-width:1120px){
  html body #wfPage .wf-st th:nth-child(2):not(#_):not(#_),html body #wfPage .wf-st td.wf-sl:not(#_):not(#_){width:236px;min-width:236px}
  html body #wfPage .wf-hall .wf-st td.wf-first:not(#_):not(#_):not(#_),html body #wfPage .wf-hall .wf-st th.wf-first:not(#_):not(#_):not(#_){min-width:170px}
  html body #wfPage .wf-st td.wf-where:not(#_):not(#_){min-width:170px}
  html body #wfPage .wf-st td.wf-gocell:not(#_):not(#_){width:auto}
  html body #wfPage .wf-go:not(#_):not(#_):not(#_){min-width:0}
  html body #wfPage .wf-st .wf-sd:not(#_):not(#_){width:20px;height:20px;font-size:10px}
}
html body #wfPage .wf-where .wf-wst:not(#_):not(#_):not(#_){display:none}
@container (max-width:980px){
  html body #wfPage .wf-st :is(th,td):nth-child(4):not(#_):not(#_):not(#_){display:none}
  html body #wfPage .wf-where .wf-wst:not(#_):not(#_):not(#_){display:block;margin-top:6px}
}

/* ---------- a phone: Steps as one card per client; Every cell and Client setup scroll sideways in their box ---------- */
@media (max-width:860px){
  html body #wfPage .wf-hall .wf-head:not(#_):not(#_){flex-wrap:wrap;flex-direction:row;align-items:center;border-bottom:0;margin-bottom:10px}
  html body #wfPage .wf-hall .wf-head .hl-head-l:not(#_):not(#_):not(#_){display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;flex:1 1 100%;gap:4px;border-bottom:1px solid var(--border)}
  html body #wfPage .wf-hall .wf-head .hl-title:not(#_):not(#_):not(#_){font-size:26px;width:auto;max-width:calc(100% - 52px);padding-bottom:4px;text-align:start}
  html body #wfPage .wf-tabs:not(#_):not(#_):not(#_){justify-content:flex-start;width:100%}
  html body #wfPage .wf-hall .wf-head .hl-head-r:not(#_):not(#_):not(#_){position:absolute;top:0;inset-inline-end:0;padding:0}
  html body #wfPage .wf-hall .wf-head:not(#_):not(#_):not(#_){position:relative}
  html body #wfPage .wf-bar:not(#_):not(#_){gap:8px}
  html body #wfPage .wf-seg:not(#_){flex:1 1 100%}
  html body #wfPage .wf-seg button:not(#_):not(#_){flex:1 1 0;justify-content:center;height:38px}
  html body #wfPage .wf-vsep:not(#_),html body #wfPage .wf-grow:not(#_){display:none}
  html body #wfPage .wf-bar .hl-mswitch:not(#_):not(#_){flex:1 1 100%;justify-content:space-between}
  html body #wfPage .wf-tgl:not(#_):not(#_){flex:1 1 auto;justify-content:center;height:40px;padding:0 8px;font-size:12.5px}
  html body #wfPage .wf-findw:not(#_),html body #wfPage .wf-find:not(#_):not(#_):not(#_){flex:1 1 100%;width:100%}
  html body #wfPage .wf-hall .wf-swrap:not(#_):not(#_){overflow:visible}
  html body #wfPage .wf-st:not(#_):not(#_),html body #wfPage .wf-st tbody:not(#_){display:block;min-width:0;width:100%}
  html body #wfPage .wf-st thead:not(#_):not(#_){display:none}
  html body #wfPage .wf-st tr.wf-grp:not(#_):not(#_),html body #wfPage .wf-st tr.wf-grp td:not(#_):not(#_){display:block}
  html body #wfPage .wf-st tr.wf-row:not(#_):not(#_){display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:8px;padding:14px 0;border-bottom:1px solid var(--border)}
  html body #wfPage .wf-st tr.wf-row[hidden]:not(#_):not(#_){display:none}
  html body #wfPage .wf-hall .wf-st tr.wf-row td:not(#_):not(#_):not(#_){display:block;padding:0;border:0;min-width:0;width:auto;background:transparent}
  html body #wfPage .wf-st td.wf-first:not(#_):not(#_):not(#_){grid-column:1;grid-row:1;min-width:0}
  html body #wfPage .wf-st td.wf-mo:not(#_):not(#_):not(#_){grid-column:2;grid-row:1}
  html body #wfPage .wf-st :is(td.wf-sl,td.wf-where,td.wf-gocell):not(#_):not(#_):not(#_){grid-column:1/-1}
  html body #wfPage .wf-hall .wf-st tr.wf-row td.wf-stat:not(#_):not(#_):not(#_):not(#_){display:none}
  /* big enough for a thumb (28px), over the narrow-screen 20px above (robot, 3 November 2026: they were 20 by 20 on a phone) */
  html body #wfPage .wf-sd:not(#_):not(#_):not(#_):not(#_){width:28px;height:28px;font-size:11.5px}
  html body #wfPage .wf-go:not(#_):not(#_):not(#_){display:flex;width:100%;height:42px}
}