/* Cadence, Circle Hub's design system (Rami, October 2026: https://claude.ai/artifact/Nv1yjfV3AakFMxmqThXkRa).
   Loaded last, after app.css and day.css: it sets the Cadence tokens, points the Hub's own tokens at them, and restyles every shared
   part (menu, buttons, fields, status, lists, groups, cards, the side panel) to match. Rules of the system, in short:
   - Archivo for everything; numbers and dates with tabular figures.
   - Canvas `bg`; tables, cards and panels on `surface`; header rows on `surface-sunken`. The menu is dark in both themes.
   - Colour fills are pastel with dark text (`on-status`, `on-primary`). Status is a solid block with its word; in a list it fills
     the cell edge to edge. Coloured text uses `accent-*`; control edges `border-strong`; focus a 2px `focus` ring, 2px offset.
   - Every group has one accent: its name in that colour and a 4px rail down its rows.
   - 1px lines: `border` between cells and rows, `border-strong` around tables, groups and controls. Shadows only on what floats.
   - Motion, "Grow from the button": a panel opened from a floating button (Kasper, Feedback, Escalate) grows out of that button and
     shrinks back into it, its corners turning from the button's into the panel's; its contents then fade in and slide up in turn.
     Timings are GROW in panel.js; a button joins with data-morph. Nothing moves under prefers-reduced-motion. */

:root{
  --font-sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Cadence colour, light */
  --c-bg:#efeff0;--surface:#ffffff;--surface-sunken:#e8e9eb;--surface-hover:#e9eaec; /* the page is light grey and lists sit on it in white (Rami, 15 October 2026) */--border:#cfd2d7;--border-strong:#7c818a;
  --c-ink:#17181a;--ink-muted:#4b4f57;--ink-subtle:#666b74;
  --primary:#a9c4f7;--primary-hover:#93b4f3;--on-primary:#17181a;--primary-soft:#e6edfc;--focus:#2b5fd9;
  --status-done-fg:#1d55b3;--status-done-bg:#e1ebfb;--status-working-fg:#8f4a00;--status-working-bg:#fbecd5;--status-stuck-fg:#b01e4f;--status-stuck-bg:#fbe2ea;
  --status-review-fg:#5b3fae;--status-review-bg:#ebe5fa;--status-idle-fg:#4b4f57;--status-idle-bg:#e9ebee;
  --status-done-fill:#a9d3f5;--status-working-fill:#fbc99a;--status-stuck-fill:#f7b3c6;--status-review-fill:#cfb8f3;--status-idle-fill:#d9dce1;--on-status:#17181a;
  --row-alt:#fafafb;
  --side-bg:#efeff0;--side-ink:#17181a;--side-ink-muted:#4b4f56;--side-active:rgba(23,24,26,.06);--side-border:#dcdde0; /* a light menu on the page's grey */
  --accent-violet:#7a2fd0;--accent-violet-soft:#f1e8fc;--accent-sky:#0b74c9;--accent-sky-soft:#e3f1fd;--accent-orange:#c2540a;--accent-orange-soft:#fdeede;
  --accent-rose:#cf2456;--accent-rose-soft:#fde6ee;--accent-green:#14804a;--accent-green-soft:#e2f5ea;
  --accent-sky-pastel:#a9d3f5;--accent-orange-pastel:#fbc99a;--accent-rose-pastel:#f7b3c6;--accent-violet-pastel:#cfb8f3;--accent-green-pastel:#a8dcc0;--on-accent:#17181a;
  --scrim:rgba(15,16,17,.45);
  --shadow-raised:0 1px 2px rgba(28,27,24,.08);--shadow-menu:0 8px 24px rgba(28,27,24,.14);--shadow-modal:0 24px 64px rgba(28,27,24,.22);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;
  --row-height:36px;--row-height-compact:28px;--row-height-touch:44px;
  --radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-pill:999px;
  --dur-fast:120ms;--dur-base:200ms;--dur-slow:320ms;--ease-out:cubic-bezier(.2,0,0,1);--ease-in:cubic-bezier(.4,0,1,1);--ease-spring:cubic-bezier(.34,1.4,.64,1);
  /* the → of a status that takes you somewhere and the ▾ of one you set here, drawn (used as a mask, so they take the words' colour) */
  --arrow-go:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E");
  --caret-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --c-bg:#0f1011;--surface:#18191b;--surface-sunken:#121315;--surface-hover:#232528;--border:#3a3d42;--border-strong:#858a93;
  --c-ink:#f1f2f3;--ink-muted:#b9bdc4;--ink-subtle:#9a9fa8;
  --primary-hover:#c0d4fa;--primary-soft:#1a2747;--focus:#7ea6ff;
  --status-done-fg:#8fb8ff;--status-done-bg:#17294a;--status-working-fg:#f5b963;--status-working-bg:#3d2a0c;--status-stuck-fg:#ff8fb0;--status-stuck-bg:#47162a;
  --status-review-fg:#bfa8ff;--status-review-bg:#2a2150;--status-idle-fg:#b9bdc4;--status-idle-bg:#2a2c30;
  --row-alt:#1d1e21;--side-bg:#08090a;--side-active:#1f2124;--side-ink:#f1f2f3;--side-ink-muted:#a3a8b0;--side-border:#2e3136;
  --accent-violet:#b98cff;--accent-violet-soft:#2a1a45;--accent-sky:#5db4ff;--accent-sky-soft:#0f2a42;--accent-orange:#ff9d4d;--accent-orange-soft:#3d2410;
  --accent-rose:#ff7fa3;--accent-rose-soft:#42172a;--accent-green:#4fd18b;--accent-green-soft:#103222;
  --scrim:rgba(0,0,0,.6);--shadow-raised:0 1px 2px rgba(0,0,0,.5);--shadow-menu:0 8px 24px rgba(0,0,0,.6);--shadow-modal:0 24px 64px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  --c-bg:#0f1011;--surface:#18191b;--surface-sunken:#121315;--surface-hover:#232528;--border:#3a3d42;--border-strong:#858a93;
  --c-ink:#f1f2f3;--ink-muted:#b9bdc4;--ink-subtle:#9a9fa8;
  --primary-hover:#c0d4fa;--primary-soft:#1a2747;--focus:#7ea6ff;
  --status-done-fg:#8fb8ff;--status-done-bg:#17294a;--status-working-fg:#f5b963;--status-working-bg:#3d2a0c;--status-stuck-fg:#ff8fb0;--status-stuck-bg:#47162a;
  --status-review-fg:#bfa8ff;--status-review-bg:#2a2150;--status-idle-fg:#b9bdc4;--status-idle-bg:#2a2c30;
  --row-alt:#1d1e21;--side-bg:#08090a;--side-active:#1f2124;--side-ink:#f1f2f3;--side-ink-muted:#a3a8b0;--side-border:#2e3136;
  --accent-violet:#b98cff;--accent-violet-soft:#2a1a45;--accent-sky:#5db4ff;--accent-sky-soft:#0f2a42;--accent-orange:#ff9d4d;--accent-orange-soft:#3d2410;
  --accent-rose:#ff7fa3;--accent-rose-soft:#42172a;--accent-green:#4fd18b;--accent-green-soft:#103222;
  --scrim:rgba(0,0,0,.6);--shadow-raised:0 1px 2px rgba(0,0,0,.5);--shadow-menu:0 8px 24px rgba(0,0,0,.6);--shadow-modal:0 24px 64px rgba(0,0,0,.7);
}

/* the Hub's own tokens, pointed at Cadence (both themes follow, since the Cadence values above switch) */
html:root:not(#_),html body aside.sp.k-inv:not(#_){
  --page:var(--c-bg);--sheet:var(--surface);--bg:var(--surface);--panel:var(--surface-sunken);--panel-2:var(--surface-sunken);--side:var(--surface-sunken);
  --soft:var(--status-idle-bg);--hover:var(--surface-hover);--sel:var(--primary-soft);--lane:var(--surface-sunken);
  --field:var(--surface);--field-2:var(--surface-sunken);--field-hi:var(--surface-hover);--well:var(--surface-sunken);
  --line:var(--border);--line-2:var(--border-strong);--grid:var(--border);
  --ink:var(--c-ink);--ink-2:var(--ink-muted);--muted:var(--ink-muted);--faint:var(--ink-subtle);--on-ink:var(--surface);--mark:var(--c-ink);
  --info:var(--focus);--info-bg:var(--primary-soft);--info-ink:var(--status-done-fg);--info-line:var(--primary);
  --ok:var(--accent-green);--ok-bg:var(--accent-green-soft);--ok-ink:var(--accent-green);--ok-line:var(--accent-green-pastel);
  --warn:var(--accent-orange);--warn-bg:var(--accent-orange-soft);--warn-ink:var(--status-working-fg);--warn-line:var(--accent-orange-pastel);
  --bad:var(--status-stuck-fg);--bad-bg:var(--status-stuck-bg);--bad-ink:var(--status-stuck-fg);--bad-line:var(--status-stuck-fill);
  --review:var(--status-review-fg);--review-bg:var(--status-review-bg);--review-ink:var(--status-review-fg);--review-line:var(--status-review-fill);
  --accent:var(--accent-green-soft);--accent-ink:var(--accent-green);--client:var(--accent-violet);
  --day-blue:var(--focus);--day-blue-bg:var(--primary-soft);
  --tint-amber:var(--surface);--tint-blue:var(--surface);--tint-green:var(--surface);--tint-rose:var(--surface);--tint-violet:var(--surface);
  --soft-aurora:var(--surface-sunken);--soft-aurora-2:var(--surface-sunken);
  --radius:var(--radius-md);--radius-card:var(--radius-lg);--shadow-card:none;
  /* statuses: pastel fills, dark words (Cadence's five plus the Hub's "requested" blue) */
  --s-none:var(--status-idle-fill);--s-blue:var(--primary);--s-orange:var(--status-working-fill);--s-purple:var(--status-review-fill);
  --s-red:var(--status-stuck-fill);--s-green:var(--accent-green-pastel);--s-dark-green:var(--accent-green-pastel);--s-teal:var(--status-done-fill);--s-slate:var(--status-idle-fill);
}

/* ---------- type: Archivo everywhere (Arabic keeps its own face; the Vault keeps its terminal) ---------- */
html:not(.ar) body,html:not(.ar) body :where(button,input,select,textarea,h1,h2,h3,h4,h5,h6,b,strong,small,em,i,span,a,p,label,th,td,div,li){font-family:var(--font-sans)}
html:not(.ar) body *:not(.vt-term):not(.vt-term *):not(code):not(pre):not(kbd):not(svg *){font-family:var(--font-sans)!important}
html body{background:var(--page);color:var(--ink);font-size:14px;line-height:20px}
:where(time,.cd-num,input[type=date],input[type=number],input[type=time]){font-variant-numeric:tabular-nums}
html body :focus-visible{outline:2px solid var(--focus)!important;outline-offset:2px}

/* ---------- the menu: dark in both themes ---------- */
html body #app>aside{background:var(--side-bg)!important;color:var(--side-ink-muted);border-inline-end:1px solid var(--side-border)!important;box-shadow:none!important}
html body #app>aside .logo,html body #app>aside .logo *{color:var(--side-ink)!important}
html body #app>aside .logo svg{filter:none}
html body #app>aside :is(.nav a,.nav-more,.theme,.nav-qk){color:var(--side-ink-muted)!important;background:none!important;border-radius:var(--radius-md)!important;font-weight:500!important;font-size:14px!important;min-height:var(--row-height);box-shadow:none!important}
html body #app>aside :is(.nav a,.nav-more,.theme,.nav-qk):hover{background:var(--side-active)!important;color:var(--side-ink)!important}
html body #app>aside .nav a.on{background:var(--side-active)!important;color:var(--side-ink)!important;font-weight:600!important}
html body #app>aside .nav a svg,html body #app>aside .nav-more svg,html body #app>aside .theme svg,html body #app>aside .nav-qk svg{color:inherit!important;stroke:currentColor}
html body #app>aside .nav-more{font-size:12px!important;font-weight:600!important;letter-spacing:.02em;color:var(--side-ink-muted)!important}
html body #app>aside .nav-qk{border:1px solid var(--side-border)!important}
html body #app>aside .nav-kbd{background:none!important;border:1px solid var(--side-border)!important;color:var(--side-ink-muted)!important}
html body #app>aside .nav :is(span[id^=c],#navTmN) :is(b,i,em),html body #app>aside .nav :is(span[id^=c]){color:var(--side-ink)}
html body #app>aside .side-k{background:var(--side-active)!important;border:1px solid var(--side-border)!important;color:var(--side-ink)!important;box-shadow:none!important}
html body #app>aside .side-k :is(b,small,em){color:var(--side-ink)!important}
html body #app>aside .side-k small{color:var(--side-ink-muted)!important}
html body #app>aside .me{background:none!important;color:var(--side-ink)!important;border-top:1px solid var(--side-border)}
html body #app>aside .me :is(b,small){color:var(--side-ink)!important}html body #app>aside .me small{color:var(--side-ink-muted)!important}
html body #app>aside .ui-size{color:var(--side-ink-muted)}html body #app>aside .ui-size button{background:none;border-color:var(--side-border);color:var(--side-ink-muted)}

/* ---------- buttons: one solid ink primary, plain secondary, ghost in toolbars, danger in rose ---------- */
html body :is(.btn-s,.btn,.wk-btn):not(#_){height:var(--row-height-compact);min-height:var(--row-height-compact);padding:0 var(--space-3);border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font:600 14px/20px var(--font-sans);box-shadow:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
html body :is(.btn-s,.btn,.wk-btn):not(#_):hover{background:var(--surface-hover)}
html body :is(.btn-s,.btn,.wk-btn):not(#_):active{transform:scale(.97)}
html body :is(.btn-s.pri,.btn.pri,.btn-pri,.bk-new,.wk-btn.pri,button.pri):not(#_){background:var(--nav-on-bg,var(--ink))!important;color:var(--nav-on-ink,var(--on-ink))!important;border-color:transparent!important} /* solid ink, like the lit menu item, so the main button stands apart from the pale "Requested" status (Rami, 19 October 2026) */
html body :is(.btn-s.pri,.btn.pri,.btn-pri,.bk-new,.wk-btn.pri,button.pri):not(#_):hover{background:color-mix(in srgb,var(--nav-on-bg,var(--ink)) 84%,var(--nav-on-ink,var(--on-ink)))!important}
html body :is(.btn-s.pri,.btn.pri,.bk-new) svg{stroke:currentColor;color:inherit}
html body :is(.btn-s.danger,.btn.danger,.danger.btn-s):not(#_){background:none!important;color:var(--status-stuck-fg)!important;border-color:var(--status-stuck-fg)!important}
html body :is(.btn-s.danger,.btn.danger):not(#_):hover{background:var(--status-stuck-bg)!important}
html body :is(.btn-s,.btn,.wk-btn):disabled{opacity:.45;pointer-events:none}
html body .bk-h .bk-new:not(#_){height:var(--row-height);padding:0 var(--space-3)}

/* ---------- fields: 36px, border-strong edge, surface ---------- */
html body :is(input.find,select.find,textarea.find,.wk-in,.ed-f input,.ed-f textarea,.ed-f select,input.cd-input):not([type=checkbox]):not([type=radio]):not([data-sv]):not(#_){border:1px solid var(--border-strong)!important;border-radius:var(--radius-md)!important;background-color:var(--surface)!important;color:var(--ink)!important;box-shadow:none!important;font:400 14px/20px var(--font-sans)}
html body :is(input.find,select.find,.wk-in):not([type=checkbox]):not([type=radio]):not(textarea):not(#_){height:var(--row-height);min-height:var(--row-height)}
html body :is(input.find,select.find,textarea.find,.wk-in):not([data-sv]):not(#_):hover{border-color:var(--ink)!important}
html body :is(input.find,textarea.find,.wk-in)::placeholder{color:var(--ink-subtle)}
html body label:is(.ed-f label),html body .ed-f>label{font:600 12px/16px var(--font-sans);letter-spacing:.02em;color:var(--ink-muted)}
html body input[type=checkbox]:not(.cd-toggle):not(#_){accent-color:var(--primary);width:18px;height:18px}

/* ---------- status: a pastel block with its word, dark text; fills its cell in a list ---------- */
html body select[data-sv]:not(#_):not(#_){color:var(--on-status)!important;-webkit-text-fill-color:var(--on-status)!important;font:600 14px/20px var(--font-sans)!important;border-radius:var(--radius-pill)!important}
html body .wk-tag:not(#_):is(.none,.requested,.doing,.review,.changes,.approved,.stuck,.done,.ok,.confirmed,.open,.waiting,.declined,.hot,.warn,.sv-todo,.sv-doing,.sv-done){color:var(--on-status)!important;font-weight:600}
html body .wk-tag.none:not(#_){background:var(--status-idle-fill)!important}
html body .wk-tag:is(.requested,.open,.waiting):not(#_){background:var(--s-blue)!important}
html body .wk-tag:is(.doing,.confirmed,.warn,.sv-doing):not(#_){background:var(--status-working-fill)!important}
html body .wk-tag.review:not(#_){background:var(--status-review-fill)!important}
html body .wk-tag:is(.changes,.stuck,.hot,.declined):not(#_){background:var(--status-stuck-fill)!important}
html body .wk-tag:is(.approved,.done,.ok,.sv-done):not(#_){background:var(--accent-green-pastel)!important}
html body .wk-tag.sv-todo:not(#_){background:var(--status-idle-fill)!important}
/* inside a list cell: edge to edge, square, full height */
html body :is(.wk-r1,.ct-tr)>*:has(>select[data-sv]):not(#_):not(#_),html body :is(.wk-r1,.ct-tr)>*:has(>i.wk-tag:only-child):not(#_):not(#_){padding:0!important}
html body :is(.wk-r1,.ct-tr)>*>select[data-sv]:not(#_):not(#_){border-radius:0!important;height:100%!important;min-height:100%!important;width:100%!important}
html body .wk-r1>span>i.wk-tag:only-child:not(#_):not(#_){border-radius:0!important;height:100%!important;min-height:100%!important;width:100%!important;margin:0!important}

/* ---------- the canvas: pages sit on `bg`; a list page's wrapper card disappears, its groups are the surfaces ---------- */
html body #app>main,html body #app>main .page{background:var(--page)!important}
html body .bk-h:not(#_){background:var(--page)!important;border-bottom:1px solid var(--border)!important;box-shadow:none!important}
html body .bk-h .h1:not(#_){font:700 22px/28px var(--font-sans)!important;letter-spacing:-.01em;color:var(--ink)}
html body .bk-eye:not(#_),html body .bk-eye span{font:500 14px/20px var(--font-sans);color:var(--ink-muted)}
html body .card:has(>.bk-bar):not(#_),html body .card:has(>.bk-bar):not(#_):hover{background:transparent!important;border:0!important;box-shadow:none!important;padding:var(--space-2) 0 0!important}
html body .card:not(:has(>.bk-bar)):not(#_){background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:none}

/* ---------- the toolbar: views as underline tabs on the left, tools on the right ---------- */
html body .bk-bar:not(#_){border-bottom:1px solid var(--border);padding-bottom:var(--space-2);gap:var(--space-2)}
html body .bk-tabs.wk-sbar:not(#_){background:none!important;border:0!important;box-shadow:none!important;padding:0!important;gap:var(--space-4);border-radius:0!important}
html body .bk-tabs.wk-sbar>button:not(#_){position:relative;height:var(--row-height);padding:0 var(--space-1)!important;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;font:600 14px/20px var(--font-sans);color:var(--ink-muted)!important}
html body .bk-tabs.wk-sbar>button:not(#_):hover{color:var(--ink)!important}
html body .bk-tabs.wk-sbar>button.on:not(#_){color:var(--ink)!important}
html body .bk-tabs.wk-sbar>button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--primary);transform:scaleX(0);transition:transform var(--dur-base) var(--ease-out)}
html body .bk-tabs.wk-sbar>button.on::after{transform:scaleX(1)}
/* two-way switches (Mine / Everyone, and the like): one edged control, the chosen side on primary-soft */
html body .wk-sbar:not(.bk-tabs):not(#_){height:var(--row-height);padding:0!important;gap:0!important;background:var(--surface)!important;border:1px solid var(--border-strong)!important;border-radius:var(--radius-md)!important;box-shadow:none!important;overflow:hidden}
html body .wk-sbar:not(.bk-tabs)>button:not(#_){height:100%!important;padding:0 var(--space-3)!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:var(--ink-muted)!important;font:500 14px/20px var(--font-sans)}
html body .wk-sbar:not(.bk-tabs)>button+button:not(#_){border-inline-start:1px solid var(--border)!important}
html body .wk-sbar:not(.bk-tabs)>button.on:not(#_){background:var(--primary-soft)!important;color:var(--ink)!important;font-weight:600}
/* icon tools in the toolbar (Filter, Columns, Views, ⋯): edged, 36px */
html body .bk-r>:is(button,.lt-fb,.lt-cw,.lt-vw>button,.bk-more>button):not(.bk-mine):not(#_),html body .bk-r .lt-bar>button:not(#_){height:var(--row-height);min-height:var(--row-height);border:1px solid var(--border-strong)!important;border-radius:var(--radius-md)!important;background:var(--surface)!important;color:var(--ink)!important;box-shadow:none!important;font:600 14px/20px var(--font-sans)}
@media (min-width:861px){html body .bk-q:not(#_){min-width:180px}}

/* ---------- a group: its own framed table. Title row (chevron, name in the group's accent, count), then the column titles on
   surface-sunken, then rows alternating surface / row-alt with 1px hairlines and a 4px accent rail ---------- */
html body .bk-gbox:not(#_){--acc:var(--ink-muted);background:var(--surface)!important;border:1px solid var(--border-strong)!important;border-radius:var(--radius-lg)!important;box-shadow:none!important;padding:0!important;margin:0 0 var(--space-6)!important;overflow:hidden}
html body .bk-gbox.t-work:not(#_){--acc:var(--accent-sky)}html body .bk-gbox.t-client:not(#_){--acc:var(--accent-violet)}html body .bk-gbox.t-bad:not(#_){--acc:var(--accent-rose)}
html body .bk-gbox.t-ok:not(#_){--acc:var(--accent-green)}html body .bk-gbox.t-warn:not(#_){--acc:var(--accent-orange)}
html body .bk-gbox>.wk-gh:not(#_){height:44px!important;margin:0!important;padding:0 var(--space-3)!important;background:var(--surface)!important;border-radius:0!important;border-bottom:1px solid var(--border-strong)!important;min-width:0!important}
html body .bk-gbox>.wk-gh>button:not(#_){color:var(--acc)!important;font:500 16px/22px var(--font-sans)!important;gap:var(--space-2);padding:0 var(--space-1)!important}
html body .bk-gbox>.wk-gh>button b:not(#_){color:var(--acc)!important;font:500 16px/22px var(--font-sans)!important}
html body .bk-gbox>.wk-gh>button>i:not(#_){display:none!important}
html body .bk-gbox>.wk-gh>button em:not(#_){background:none!important;padding:0!important;color:var(--ink-muted)!important;font:400 12px/16px var(--font-sans)!important}
html body .bk-gbox>.wk-gh svg:not(#_){color:var(--acc)}
/* the rows */
html body .bk-gbox :is(.wk-r1,.ct-tr):not(#_){border-radius:0!important;margin:0!important;box-shadow:none!important;border:0!important;border-bottom:1px solid var(--border)!important;background:var(--surface)!important;min-height:var(--row-height)!important}
html body .bk-gbox .wk-r1.head:not(#_),html body .bk-gbox .wk-r1.lt-hclone:not(#_),html body .bk-gbox .ct-tr.ct-head2:not(#_){background:var(--surface-sunken)!important;min-height:var(--row-height)!important;height:var(--row-height)!important}
html body .bk-gbox :is(.wk-r1.head,.ct-head2)>*:not(#_),html body .bk-gbox :is(.wk-r1.head,.ct-head2)>* *:not(svg):not(svg *){color:var(--ink-muted)!important;font:600 12px/16px var(--font-sans)!important;letter-spacing:.02em}
html body .bk-gbox :is(.wk-r1.head,.ct-head2)>*:not(#_){background:var(--surface-sunken)!important}
html body .bk-gbox :is(.wk-r1:not(.head),.ct-tr:not(.ct-head2)):nth-of-type(even):not(.sel):not(#_){background:var(--row-alt)!important}
html body .bk-gbox :is(.wk-r1:not(.head),.ct-tr:not(.ct-head2)):not(#_):hover{background:var(--surface-hover)!important}
html body .bk-gbox .wk-r1.sel:not(#_){background:var(--primary-soft)!important}
html body .bk-gbox :is(.wk-r1,.ct-tr)>*:not(#_){border-inline-start:1px solid var(--border);min-height:var(--row-height);background:inherit}
html body .bk-gbox :is(.wk-r1,.ct-tr)>:first-child:not(#_){border-inline-start:0}
html body .bk-gbox :is(.wk-r1:not(.head):not(.bk-add),.ct-tr:not(.ct-head2):not(.bk-add))>:first-child:not(#_){box-shadow:inset 4px 0 0 var(--acc)!important;padding-inline-start:var(--space-3)!important}
[dir=rtl] .bk-gbox :is(.wk-r1:not(.head):not(.bk-add),.ct-tr:not(.ct-head2):not(.bk-add))>:first-child:not(#_){box-shadow:inset -4px 0 0 var(--acc)!important}
html body .bk-gbox .wk-r1.unas:not(#_){background:inherit}
html body .bk-gbox .wk-r1.unas>span:nth-child(2) b:not(#_){color:var(--ink)!important}
html body .bk-gbox .wk-r1:not(.head) b:not(#_){font-weight:600;color:var(--ink)}
/* the "+ New …" line */
html body .bk-gbox .bk-add:not(#_){background:var(--surface)!important;border-bottom:0!important}
html body .bk-gbox .bk-add input:not(#_),html body .bk-gbox .bk-add select:not(#_){border-color:transparent!important;background:none!important}
html body .bk-gbox .bk-add .bk-add-n input:not(#_){color:var(--ink)}
/* fields inside a list's cells read as the cell: no edge until pointed at or used */
html body .bk-gbox :is(.wk-r1:not(.head),.ct-tr:not(.ct-head2)) :is(input.find,input.wk-in,select.find,select.wk-in,textarea.find):not([data-sv]):not([type=checkbox]):not(#_){border-color:transparent!important;background-color:transparent!important;border-radius:var(--radius-sm)!important;height:calc(var(--row-height) - 4px);min-height:0}
html body .bk-gbox :is(.wk-r1:not(.head),.ct-tr:not(.ct-head2)) :is(input.find,input.wk-in,select.find,select.wk-in,textarea.find):not([data-sv]):not([type=checkbox]):not(#_):hover{border-color:var(--border-strong)!important;background-color:var(--surface)!important}
html body .bk-gbox :is(.wk-r1:not(.head),.ct-tr:not(.ct-head2)) :is(input.find,input.wk-in,select.find,select.wk-in,textarea.find):not([data-sv]):not([type=checkbox]):focus{border-color:var(--focus)!important;background-color:var(--surface)!important}
/* the status in a list fills its cell; unassigned work keeps its status colour */
html body select.wk-st.wk-unas:not(#_):not(#_){box-shadow:none!important;background-color:var(--s-blue)!important;color:var(--on-status)!important}
/* rows count under a list */
html body .lt-count:not(#_),html body .lt-n:not(#_){color:var(--ink-muted);font:400 12px/16px var(--font-sans)}

/* ---------- boards (columns): a column on surface-sunken opens with its title, then cards on surface ---------- */
html body .mw-col:not(#_){background:var(--surface-sunken)!important;border:1px solid var(--border)!important;border-radius:var(--radius-lg)!important;box-shadow:none!important;padding:var(--space-2)!important}
html body .bk-ch:not(#_){--acc:var(--ink-muted);background:none!important;border-radius:var(--radius-md)!important;padding:0 var(--space-1)!important;min-height:var(--row-height)}
html body .bk-ch.t-work:not(#_){--acc:var(--accent-sky)}html body .bk-ch.t-client:not(#_){--acc:var(--accent-violet)}html body .bk-ch.t-bad:not(#_){--acc:var(--accent-rose)}html body .bk-ch.t-ok:not(#_){--acc:var(--accent-green)}html body .bk-ch.t-warn:not(#_){--acc:var(--accent-orange)}
html body .bk-ch b:not(#_){color:var(--acc)!important;font:500 16px/22px var(--font-sans)!important}
html body .bk-ch>i:not(#_){display:none!important}
html body .bk-ch em:not(#_){background:none!important;color:var(--ink-muted)!important;font:400 12px/16px var(--font-sans)!important;padding:0!important;border:0!important;box-shadow:none!important;outline:0!important}
html body :is(.mw-card,.sl-card,.jc,.br-card,.st-card):not(#_){background:var(--surface)!important;border:1px solid var(--border-strong)!important;border-radius:var(--radius-md)!important;box-shadow:none!important}
html body :is(.mw-card,.sl-card,.jc,.br-card,.st-card):not(#_):hover{border-color:var(--ink)!important}
html body .wk-plus:not(#_){width:var(--row-height-compact);height:var(--row-height-compact);border:0!important;background:none!important;color:var(--ink-muted)!important;border-radius:var(--radius-md)!important}
html body .wk-plus:not(#_):hover{background:var(--surface-hover)!important;color:var(--ink)!important}

/* ---------- the column beside the menu (Clients, or Filter by): a quiet list; the chosen one on primary-soft ---------- */
html body .crail:not(#_){border-inline-end:1px solid var(--border)!important}
html body .crail-h b:not(#_){font:600 12px/16px var(--font-sans);letter-spacing:.02em;color:var(--ink-muted)}
html body .crail-l button:not(#_){height:var(--row-height-compact);min-height:var(--row-height-compact);padding:0 var(--space-2)!important;border-radius:var(--radius-md)!important;font:400 14px/20px var(--font-sans);color:var(--ink)}
html body .crail-l button:not(#_):hover{background:var(--surface-hover)!important}
html body .crail-l button.on:not(#_){background:var(--primary-soft)!important;color:var(--ink)!important;font-weight:600}
html body .crail-l button i:not(#_){background:var(--status-idle-bg)!important;color:var(--ink-muted)!important;border:0!important;border-radius:var(--radius-sm)!important}
html body .crail-l button.on i:not(#_){background:var(--primary)!important;color:var(--on-primary)!important}
html body .crail-l.fa-l button i:not(#_){width:18px;height:18px;flex-basis:18px;background:var(--surface)!important;border:1px solid var(--border-strong)!important}
html body .crail-l.fa-l button.on i:not(#_){background:var(--primary)!important;border-color:var(--border-strong)!important}
html body .crail-chip:not(#_){background:var(--primary-soft);color:var(--ink);font:600 12px/16px var(--font-sans);border-radius:var(--radius-pill)}

/* ---------- chips on a month's line (posts.js): pastel dots with dark marks ---------- */
html body .mb-c:not(#_){border-color:var(--border-strong);background:var(--surface);color:var(--ink);font:600 12px/16px var(--font-sans);height:var(--row-height-compact)}
html body .mb-c i:not(#_){color:var(--on-status)}
html body .mb-c i.t-green:not(#_){--pc:var(--accent-green-pastel)}html body .mb-c i.t-blue:not(#_){--pc:var(--primary)}html body .mb-c i.t-purple:not(#_){--pc:var(--status-review-fill)}html body .mb-c i.t-orange:not(#_){--pc:var(--status-working-fill)}html body .mb-c i.t-none:not(#_){--pc:var(--status-idle-fill)}
html body .mb-st:not(#_){color:var(--on-status)!important;background:var(--status-idle-fill)!important;border-radius:var(--radius-pill)!important}
html body .mb-st.t-green:not(#_){background:var(--accent-green-pastel)!important}html body .mb-st.t-blue:not(#_){background:var(--primary)!important}html body .mb-st.t-purple:not(#_){background:var(--status-review-fill)!important}
html body .mb-st::before{display:none!important}

/* ---------- page titles: `title` (22/700); Home's greeting is `display` (32/700) ---------- */
html body #app>main .page :is(h1,.h1):not(.bf-ti):not(#_){font:700 22px/28px var(--font-sans)!important;letter-spacing:-.01em!important;color:var(--ink)}
/* …except a deck's cover title (a strategy or discovery read as slides), which keeps Circle's deck style: big and white on black (circledeck.css). Rami, 18 October 2026: the client's name on the brand strategy cover was hard to read */
html body #app>main .page .deck .slide.cover h1:not(#_):not(#_){font:600 clamp(56px,9vw,128px)/.9 var(--cd-font)!important;letter-spacing:-.045em!important;color:var(--cd-white,#fff)!important}
html body #app>main .page .deck:is([lang="ar"],[dir="rtl"]) .slide.cover h1:not(#_):not(#_){letter-spacing:0!important;line-height:1.1!important}
html body #app>main .page :is(h2,h3):not(#_){letter-spacing:-.01em}
html body .card>h3:not(#_),html body .card h3:first-child:not(#_){font:500 16px/22px var(--font-sans)!important;color:var(--ink)}

/* ---------- Home: no gradient or glow; the greeting on a plain surface ---------- */
html body .bf-hero:not(#_){background:var(--surface)!important;background-image:none!important;color:var(--ink)!important;border:1px solid var(--border-strong)!important;border-radius:var(--radius-lg)!important;box-shadow:none!important;min-height:0!important}
html body .bf-hero::before,html body .bf-hero::after,html body .bf-hero :is(canvas,.bf-glow,.bf-arc,.aurora){display:none!important}
html body .bf-hero *:not(.bf-card):not(.bf-card *):not(.btn-s):not(.btn-s *):not(svg):not(svg *){color:var(--ink)!important}
html body .bf-hero .bf-day:not(#_),html body .bf-hero .bf-k:not(#_){color:var(--ink-muted)!important;font:600 12px/16px var(--font-sans)!important;letter-spacing:.02em}
html body .bf-hero :is(h1,h2,.bf-hi h2,.say):not(#_){font:700 32px/38px var(--font-sans)!important;letter-spacing:-.02em!important;color:var(--ink)!important}
html body .bf-hero a:not(.bf-card):not(.bf-card a):not(#_),html body .bf-hero .bf-all:not(#_){background:var(--primary)!important;color:var(--on-primary)!important;border:0!important;border-radius:var(--radius-md)!important;font:600 14px/20px var(--font-sans)!important;letter-spacing:0!important;text-transform:none!important}
html body .bf-card:not(#_){background:var(--surface-sunken)!important;border:1px solid var(--border)!important;color:var(--ink)!important;box-shadow:none!important}
html body .bf-card :is(.bf-ti,p,b):not(#_){color:var(--ink)!important}
html body .bf-card .bf-act:not(#_),html body .bf-card a:not(#_){background:var(--primary)!important;color:var(--on-primary)!important;border-radius:var(--radius-md)!important}
html body .bf-hero .buddy:not(#_) .k,html body .bf-hero svg.buddy:not(#_){color:var(--ink)}
html body :is(.bf-tiles,.bf-tile):not(#_){background:var(--surface)!important;border-color:var(--border)!important}
html body .bf-tile b:not(#_){font:700 22px/28px var(--font-sans)!important;font-variant-numeric:tabular-nums;color:var(--ink)}

/* ---------- the side panel: 400px on the right, title 22/700, framed, one shadow ---------- */
html body aside.sp:not(.sp-dock):not(#_){width:min(400px,calc(100vw - 20px))!important;border:1px solid var(--border-strong)!important;border-radius:var(--radius-lg)!important;background:var(--surface)!important;box-shadow:var(--shadow-modal)!important}
html body .sp-h:not(#_){border-bottom:1px solid var(--border)!important;padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4)!important}
html body .sp-h b:not(#_){font:700 22px/28px var(--font-sans)!important;letter-spacing:-.01em!important;color:var(--ink)}
html body .sp-h small:not(#_){font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
html body .sp-x:not(#_){width:var(--row-height-compact);height:var(--row-height-compact);border:0!important;background:none!important;border-radius:var(--radius-md)!important;color:var(--ink)}
html body .sp-x:not(#_):hover{background:var(--surface-hover)!important}
html body .sp-back:not(#_){background:var(--scrim)!important}
html body .sp-b:not(#_){padding:var(--space-4)!important}

html body .bf-hero svg.buddy:not(#_),html body .bf-hero .bf-k>svg:not(#_){display:none!important} /* the mark on the greeting: decoration, the menu already has it */
html body .bf-card .bf-act:not(#_){display:inline-flex;align-items:center;gap:var(--space-1);height:var(--row-height-compact);padding:0 var(--space-3)}
html body .bf-tag:not(#_){background:var(--surface)!important;border:1px solid var(--border-strong)!important;color:var(--ink)!important;border-radius:var(--radius-pill)!important;font:600 12px/16px var(--font-sans)!important}
/* a status cell is as tall as its line */
html body :is(.wk-r1,.ct-tr,.wk-lr)>*:has(>select[data-sv]):not(#_){align-self:stretch!important;display:flex!important;align-items:stretch!important}
html body :is(.wk-r1,.ct-tr,.wk-lr)>*>select[data-sv]:not(#_):not(#_){flex:1 1 auto;height:auto!important;min-height:var(--row-height)!important;border-radius:0!important}
/* any other list's in-cell fields (a month's posts, the editor's lists) read as the cell too */
html body :is(.wk-lr,.wk-plist .wk-r1:not(.head)) :is(input.find,input.wk-in,input.wk-tx,select.find,select.wk-in,textarea.find):not([data-sv]):not([type=checkbox]):not(#_){border-color:transparent!important;background-color:transparent!important;border-radius:var(--radius-sm)!important}
html body :is(.wk-lr,.wk-plist .wk-r1:not(.head)) :is(input.find,input.wk-in,input.wk-tx,select.find,select.wk-in,textarea.find):not([data-sv]):not([type=checkbox]):not(#_):hover{border-color:var(--border-strong)!important;background-color:var(--surface)!important}
html body :is(.wk-lr,.wk-plist .wk-r1:not(.head)) :is(input,select,textarea):not([data-sv]):not([type=checkbox]):focus{border-color:var(--focus)!important;background-color:var(--surface)!important}
html body .wk-plist:not(#_){background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);overflow:hidden}
html body .wk-plist .wk-lr:not(#_),html body .wk-plist .wk-r1:not(#_){border-bottom:1px solid var(--border)!important;border-radius:0!important;box-shadow:none!important;margin:0!important}
html body .wk-plist .wk-r1.head:not(#_){background:var(--surface-sunken)!important}
html body .wk-plist .wk-lr:nth-of-type(even):not(#_){background:var(--row-alt)}

/* ---------- one primary per view: row actions (Done, Open, Set up…) are secondary ---------- */
html body :is(.mw-row,.mw-card,.wk-r1,.ct-tr,.wk-lr,.hh-item,.bn-it) .btn-s.pri:not(.bk-new):not(#_){background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--border-strong)!important;box-shadow:none!important}
html body :is(.mw-row,.mw-card,.wk-r1,.ct-tr,.wk-lr,.hh-item,.bn-it) .btn-s.pri:not(.bk-new):not(#_):hover{background:var(--surface-hover)!important}

/* ---------- the Clients overview: each step is a status cell, a pastel fill with dark words ---------- */
html body .ob-c:not(#_){border-radius:0!important;color:var(--on-status)!important;font:600 12px/16px var(--font-sans)!important;min-height:var(--row-height)}
html body .ob-c.ok:not(#_){background:var(--accent-green-pastel)!important}html body .ob-c.wait:not(#_){background:var(--primary)!important}
html body .ob-c.bad:not(#_){background:var(--status-stuck-fill)!important}html body .ob-c.hold:not(#_){background:var(--status-working-fill)!important}
html body .ob-c.none:not(#_){background:var(--surface)!important;color:var(--ink-muted)!important;font-weight:400!important}
html body .ob-c :is(small,em,i):not(#_){color:inherit!important;opacity:.8}

/* ---------- report tiles: a tinted ground, the label in the accent, the figure in ink (AccentCard) ---------- */
html body .hh-tile b:not(#_){color:var(--ink)!important;font:700 32px/38px var(--font-sans)!important;letter-spacing:-.02em!important}
html body .hh-tile.red:not(#_){background:var(--accent-rose-soft)!important;color:var(--accent-rose)!important}html body .hh-tile.yellow:not(#_){background:var(--accent-violet-soft)!important;color:var(--accent-violet)!important}
html body .hh-tile.green:not(#_){background:var(--accent-green-soft)!important;color:var(--accent-green)!important}
html body .hh-tile span:not(#_){font:600 12px/16px var(--font-sans);letter-spacing:.02em}

/* ---------- selected states: never an ink fill. A chosen tab, segment, chip or row is primary-soft with ink words ---------- */
html body :is(.ed-steps button.on,.ed-sec button.on,.ds-nav button.on,.pv-seg button.on,.pv-months>button.on,.wk-tabs a.on,.lb-tag.on,.wk-fc.on,.more a.on,.mw-views button.on,.ch-libbar .wk-sbar button.on,.sd-person.on,.sd-tabs button.on,.ct-views a.on,.ob-over .wk-sbar label.on,.lt-chip.on,.ui-size button.on,.ui-lang button.on,.rt-pin.on,.cx-row.on,.wi-nav a[aria-current],.filters span.on,.ed-tool.on,.stg-s.sel>button,.lt-fb.on,.bk-jm .btn-s.on,.wk-sbar:not(.bk-tabs) .on,.mw-g.todo i,.sl-steps button.n):not(#_):not(#_){background:var(--primary-soft)!important;color:var(--ink)!important;border-color:var(--focus)!important}
html body :is(.ed-steps button.on,.ds-nav button.on,.stg-s.sel>button) :is(i,b,span,small):not(#_){color:var(--ink)!important}
html body :is(.ed-steps button.on,.ed-sec button.on,.ds-nav button.on,.ed-tool.on,.stg-s.sel>button) svg:not(#_){color:var(--ink)!important;stroke:currentColor}
/* the item pages' own tabs (a shoot's Brief / Plan / Scripts, a project's Details / Activity…) read as Cadence tabs */
html body :is(.sd-tabs,.ed-sec,.br-tabs,.st-tabs,.ct-views,.wk-tabs):not(#_){background:none!important;box-shadow:none!important;border-bottom:1px solid var(--border);border-radius:0!important;gap:var(--space-4)}
html body :is(.sd-tabs button,.ed-sec button,.br-tabs button,.st-tabs button,.ct-views a,.wk-tabs a):not(#_){background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:var(--ink-muted)!important;font:600 14px/20px var(--font-sans)!important;padding:0 var(--space-1)!important;height:var(--row-height);position:relative}
html body :is(.sd-tabs button.on,.ed-sec button.on,.br-tabs button.on,.st-tabs button.on,.ct-views a.on,.wk-tabs a.on):not(#_):not(#_){background:none!important;color:var(--ink)!important;box-shadow:inset 0 -2px 0 var(--primary)!important}
/* today, in every calendar: the date on primary */
html body :is(.wk-cell.today .wk-dn,.pc-day.today .pc-dh span,.tm-h span.today b,.cal-today):not(#_){background:var(--primary)!important;color:var(--on-primary)!important;font-weight:700}
/* small "done / approved" pills: a pastel fill */
html body :is(.ct-pill.s-approved,.ct-pill.s-ok,.wk-chip.confirmed,.wk-tag.ok,.wk-tag.done,.wk-tag.confirmed):not(#_){background:var(--accent-green-pastel)!important;color:var(--on-status)!important}
/* people's initials: pastel rounds (Avatar) */
html body :is(.av,.cav,.ob-av,.am-av,.sl-av):not(.me .av):not(#_){background:var(--status-review-bg)!important;color:var(--status-review-fg)!important;border:2px solid var(--surface)}
html body #app>aside .me .av:not(#_){background:var(--side-active)!important;color:var(--side-ink)!important;border:1px solid var(--side-border)!important}
/* buttons that were ink: the pastel primary */
html body :is(.ch-send,.rt-go,.bf-bell,.gbtn,.ask .go,.k-load .go):not(#_){background:var(--primary)!important;color:var(--on-primary)!important;border:0!important}

html body .annbar:not(#_){background:var(--primary-soft)!important;color:var(--ink)!important;border-bottom:1px solid var(--border)!important}
html body .annbar *:not(#_){color:var(--ink)!important}
/* switches: Cadence toggle, primary when on */
html body input[type=checkbox]:is(.switch,.tg,.wk-sw,.br-on,[role=switch]):not(#_){accent-color:var(--primary)}
html body :is(.br-sw,.wk-switch,.tg-s) :is(input:checked+i,input:checked+span):not(#_){background:var(--primary)!important;border-color:var(--border-strong)!important}
/* the phone's bar at the bottom: the Cadence command bar */
html body .wk-float:not(#_){background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--border-strong)!important;border-radius:calc(var(--radius-lg) + 2px)!important;box-shadow:var(--shadow-menu)!important}
html body .wk-float :is(input,.fl-q):not(#_){background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--border-strong)!important;border-radius:var(--radius-md)!important}
html body .wk-float button:not(#_){color:var(--ink)!important}
html body .wk-float .fl-n:not(#_){background:var(--primary)!important;color:var(--on-primary)!important}
html body .tabbar a.on:not(#_){background:var(--primary-soft)!important;color:var(--ink)!important}
/* Kasper's docked panel: a plain surface, no gradient */
html body aside.sp.sp-dock:not(#_){background:var(--surface)!important;background-image:none!important;border-color:var(--border-strong)!important}
html body aside.sp.sp-dock :is(.sp-h,.hp-top,.hp-head):not(#_){background:var(--surface)!important;background-image:none!important;color:var(--ink)!important}
html body aside.sp.sp-dock :is(.sp-h,.hp-top,.hp-head) *:not(svg):not(svg *):not(#_){color:var(--ink)!important}
/* "Not started" is grey; "Requested" stays the pastel blue */
html body select[data-sv=todo]:not(#_):not(#_):not(#_){background-color:var(--status-idle-fill)!important}
html body .wk-tag.sv-todo:not(#_),html body .wk-tag.todo:not(#_){background:var(--status-idle-fill)!important;color:var(--on-status)!important}
html body .sw input:checked+i:not(#_){background:var(--primary)!important;box-shadow:inset 0 0 0 1px var(--border-strong)}
html body .sw input+i:not(#_){background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-strong)}
html body .sw input+i::after{background:var(--border-strong)!important}html body .sw input:checked+i::after{background:var(--on-primary)!important}
html body .day input:checked+span:not(#_){background:var(--primary)!important;border-color:var(--border-strong)!important;color:var(--on-primary)!important}
/* phones: the top bar leaves room for Kasper, who sits at its right end */
/* a month's posts toolbar sits in a row with Preview: it takes the room it needs (it was squeezed to nothing on phones) */
html body .wk-views:not(#_){flex-wrap:wrap;gap:var(--space-2)}
html body .wk-views>.bk-bar:not(#_){flex:1 1 100%;min-width:0}
@media (max-width:860px){html body .wk-views>.bk-bar .bk-r:not(#_){flex-wrap:wrap;justify-content:flex-start}}
@media (max-width:860px){html body .wk-views>.wk-prev:not(#_){order:2}html body .wk-views>.bk-bar .bk-r>:is(input,select):not(#_){flex:1 1 140px}}
/* a client list on a phone or tablet is cards, not a table: its status is a pill again */
@media (max-width:860px){
html body .ct-tr>*:has(>select[data-sv]):not(#_):not(#_){padding:0!important;display:block!important;align-self:auto!important}
html body .ct-tr>*>select[data-sv]:not(#_):not(#_):not(#_){width:auto!important;min-width:120px;height:var(--row-height-compact)!important;min-height:0!important;border-radius:var(--radius-pill)!important;flex:none}
}
/* a board's lines on a phone are cards: statuses go back to pills */
@media (max-width:860px){
html body .wk-r1>*:has(>select[data-sv]):not(#_):not(#_),html body .wk-r1>*:has(>i.wk-tag:only-child):not(#_):not(#_){padding:0!important;display:block!important;align-self:auto!important}
html body .wk-r1>*>select[data-sv]:not(#_):not(#_):not(#_),html body .wk-r1>span>i.wk-tag:only-child:not(#_):not(#_):not(#_){width:auto!important;min-width:120px;height:var(--row-height-compact)!important;min-height:0!important;border-radius:var(--radius-pill)!important;flex:none;display:inline-flex!important;align-items:center}
}
@media (max-width:860px){
html body .wk-r1 button.pk-mbtn:not(#_):not(#_){height:var(--row-height)!important;min-height:0!important;flex:none!important;align-self:stretch!important}
html body .wk-r1>span:has(>select[data-sv]):not(#_)::before,html body .wk-r1>span:has(>i.wk-tag:only-child):not(#_)::before{display:block!important}
}
/* on a phone board, Feedback and Escalate float above the Quick find bar, never over it */
@media (max-width:860px){
html body.fl-on .esc-fab:not(#_){bottom:calc(156px + env(safe-area-inset-bottom,0px))!important}
html body.fl-on .fb-fab:not(#_){bottom:calc(200px + env(safe-area-inset-bottom,0px))!important}
html body :is(.esc-fab,.fb-fab):not(#_){box-shadow:var(--shadow-float,0 4px 12px rgba(0,0,0,.12))!important;border:1px solid var(--border-strong)!important}
}
/* the shoot calendar is the planner's calendar: a shoot is a card like a post */
html body .sh-card:not(#_){cursor:pointer;touch-action:none}
html body .sh-card .sh-cn:not(#_){font:600 12.5px/16px var(--font-sans);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .sh-card.declined:not(#_){opacity:.6;text-decoration:line-through}
html body .sh-card.wk-lifted:not(#_){opacity:.3}
html body .sh-card.wk-landed:not(#_){animation:landed .38s cubic-bezier(.2,.8,.2,1)}
html body :is(.pc-day,.pc-un).drop-over:not(#_){outline:2px solid var(--primary);outline-offset:-2px;background:var(--primary-soft,var(--surface-hover))!important}
html body .pc-day.sh-off:not(#_){background:repeating-linear-gradient(135deg,transparent 0 6px,var(--surface-sunken) 6px 8px)!important}
@media (hover:none){html body .sh-card:not(#_){touch-action:auto}}
@media (max-width:860px){html body .pc-day.today .pc-dh span:not(#_){display:inline-flex;align-items:center;gap:6px;padding:0 8px}html body .pc-day.today .pc-dh span .pc-wd:not(#_){margin:0}}
/* Clients as cards: the same groups, columns and in-place editing as the list, each client a card */
html body .ct-cardv:not(#_){overflow:visible}
html body .ct-cardv :is(.bk-gbox):not(#_),html body .ct-cardv:not(:has(.bk-gbox)):not(#_){display:grid!important;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-3);padding-bottom:var(--space-3)}
html body .ct-cardv .bk-gbox>:not(.ct-tr):not(#_),html body .ct-cardv .bk-gbox>.ct-tr.bk-add:not(#_){grid-column:1/-1}
html body .ct-cardv .ct-tr:not(.ct-head2):not(#_):not(#_){margin:0!important}
html body .ct-cardv .bk-gbox:not(#_):not(#_):not(#_){padding:0 var(--space-3) var(--space-3)!important}
html body .ct-cardv .bk-gbox>.wk-gh:not(#_):not(#_):not(#_){margin:0 calc(-1 * var(--space-3))!important}
html body .ct-cardv .ct-head2:not(#_){display:none!important}
html body .ct-cardv .ct-tr:not(.ct-head2):not(.bk-add):not(#_){display:grid!important;grid-template-columns:1fr 1fr!important;gap:var(--space-2) var(--space-3)!important;min-width:0!important;padding:var(--space-3)!important;background:var(--surface)!important;border:1px solid var(--border-strong)!important;border-radius:var(--radius-lg)!important;box-shadow:none!important;align-content:start}
html body .ct-cardv .ct-tr:not(.ct-head2):not(.bk-add):hover:not(#_){border-color:var(--ink-muted)!important}
html body .ct-cardv .ct-tr:not(.ct-head2)>*:not(#_):not(#_){border:0!important;box-shadow:none!important;padding:0!important;min-width:0;white-space:normal!important;position:static!important;background:none!important}
html body .ct-cardv .ct-tr:not(.ct-head2)>.ct-name:not(#_):not(#_){grid-column:1/-1;font:600 16px/22px var(--font-sans)}
html body .ct-cardv .ct-tr:not(.ct-head2)>.ct-name:not(#_)::before{content:"";display:inline-block;width:4px;height:16px;border-radius:2px;background:var(--acc,var(--primary));margin-inline-end:var(--space-2);vertical-align:-2px}
html body .ct-cardv .ct-cell:not(#_)::before{content:attr(data-l);display:block;font:500 11px/14px var(--font-sans);color:var(--ink-muted);margin-bottom:2px}
html body .ct-cardv .ct-cell:has(.ct-dash):not(#_){display:none}
html body .ct-cardv .ct-status:empty:not(#_){display:none}
html body .ct-cardv .ct-tr>*:has(>select[data-sv]):not(#_):not(#_){display:block!important;align-self:auto!important}
html body .ct-cardv .ct-tr>*>select[data-sv]:not(#_):not(#_):not(#_){width:auto!important;min-width:120px;height:var(--row-height-compact)!important;min-height:0!important;border-radius:var(--radius-pill)!important;flex:none}
/* the menu (October 2026): Everyday, then Work, Insight and Team under small headings; no folding groups */
html body #app>aside .nav-sec:not(#_){font:600 11px/16px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--side-ink-muted);opacity:.75;padding:var(--space-4) var(--space-3) var(--space-1)}
html.nav-mini body #app>aside .nav-sec:not(#_){font-size:0;padding:var(--space-2) 0;border-top:1px solid var(--side-border);margin:var(--space-1) var(--space-2) 0}
html body #app>aside .nav-in:not(#_){padding-inline-start:0!important}
html body #app>aside .nav a.dot:not(#_)::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary);margin-inline-start:auto}
/* a menu item's own pages, as tabs on top: Social media · Campaigns · Strategy; Results · Client health · Routines; Wiki · Playbooks · … */
html body .area-tabs:not(#_){display:flex;gap:var(--space-6);border-bottom:1px solid var(--border);margin:0 0 var(--space-4);overflow-x:auto;scrollbar-width:none}
html body .area-tabs a:not(#_){color:var(--ink-muted);text-decoration:none;font:500 14px/20px var(--font-sans);padding:var(--space-2) 0 10px;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
html body .area-tabs a:hover:not(#_){color:var(--ink)}
html body .area-tabs a.on:not(#_){color:var(--ink);font-weight:600;border-bottom-color:var(--primary)}
@media (max-width:860px){html body .area-tabs:not(#_){gap:var(--space-4);margin:0 0 var(--space-3)}}
/* a wider side panel, for a client's month of results */
@media (min-width:861px){html body aside.sp.sp-wide:not(.sp-dock):not(#_){width:min(920px,calc(100vw - 48px))!important;max-width:none!important}}
/* Social media's month bar (October 2026): five stages, then what Send to client waits for and the month's tools */
html body .mb-bar.mb2:not(#_){display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0!important;border-bottom:1px solid var(--border);background:var(--surface)}
html body .mb-stages:not(#_){display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
html body .mb-stages.four:not(#_){grid-template-columns:repeat(4,minmax(0,1fr))}
html body .mb-stg:not(#_){display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:var(--space-3) var(--space-4);border:0;border-inline-end:1px solid var(--border);background:none;font:inherit;color:var(--ink);text-align:start;cursor:pointer;min-width:0}
html body .mb-stg:last-child:not(#_){border-inline-end:0}
html body .mb-stg:hover:not(#_){background:var(--surface-hover)}
html body .mb-stg .mb-k:not(#_){display:flex;align-items:center;gap:6px;font:600 12px/16px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}
html body .mb-n:not(#_){width:18px;height:18px;border-radius:999px;display:grid;place-items:center;font:700 11px/1 var(--font-sans);font-style:normal;background:var(--status-idle-fill);color:var(--on-status)}
html body .mb-n.ok:not(#_){background:var(--accent-green-pastel)}html body .mb-n.wk:not(#_){background:var(--status-working-fill)}
html body .mb-stg small:not(#_){font:400 12px/16px var(--font-sans);color:var(--ink-muted);white-space:normal}
html body .mb-lanerow:not(#_){padding:0 var(--space-4) var(--space-2);display:flex;justify-content:flex-end}
html body .mb-lanes:not(#_){display:flex;flex-wrap:wrap;gap:4px;align-items:center}
html body .mb-l:not(#_){font:600 11px/16px var(--font-sans);font-style:normal;padding:1px 8px;border-radius:999px;background:var(--surface-sunken);color:var(--ink-muted);border:1px solid var(--border)}
html body .mb-l.l-ok:not(#_){background:var(--accent-green-soft);color:var(--accent-green);border-color:var(--accent-green-pastel)}
html body .mb-l.l-wait:not(#_){background:var(--status-working-bg);color:var(--status-working-fg);border-color:var(--status-working-fill)}
html body .mb-l.l-no:not(#_){background:var(--status-stuck-bg);color:var(--status-stuck-fg);border-color:var(--status-stuck-fill)}
html body .mb-foot:not(#_){display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-top:1px solid var(--border);background:var(--surface-sunken)}
html body .mb-gate:not(#_){flex:1 1 280px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-muted);min-width:0}
html body .mb-gate b:not(#_){color:var(--ink);font-weight:600}
html body .mb-gate svg:not(#_),html body .mb-lock svg:not(#_){width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
html body .mb-lock:not(#_){background:var(--surface-sunken)!important;color:var(--ink-subtle)!important;border-color:var(--border)!important;cursor:not-allowed;opacity:1!important}
/* Locked (public/kit.js locked, 21 October 2026): an action this person can't do, greyed with a lock; pressing it says who can (.hk-why).
   Over every button look (.pri, .danger) on purpose: it reads the same wherever it is. */
html body .hk-lock.hk-lock.hk-lock:not(#_){display:inline-flex;align-items:center;gap:6px;background:var(--surface-sunken)!important;color:var(--ink-subtle)!important;border:1px solid var(--border)!important;cursor:not-allowed;opacity:1!important;box-shadow:none!important;transform:none!important}
html body .hk-lock.hk-lock.hk-lock:not(.btn-s):not(#_){padding:2px 8px;border-radius:var(--radius-md);font:inherit;font-size:12px}
html body .hk-lock.hk-lock.hk-lock:not(#_):hover{background:var(--surface-hover)!important}
html body .hk-lock.hk-lock.hk-lock:not(#_):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
html body :is(.hk-lock,.hk-why) svg.hk-lk:not(#_){width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
html body .hk-why:not(#_){position:fixed;z-index:9000;display:flex;align-items:flex-start;gap:8px;max-width:min(320px,calc(100vw - 16px));box-sizing:border-box;padding:8px 12px;border-radius:var(--radius-md);background:var(--surface);color:var(--ink);border:1px solid var(--border-strong);box-shadow:var(--shadow-menu);font-size:13px;line-height:1.45;text-align:start}
html body .sl-ro+.hk-lock:not(#_){margin-inline-start:8px}
html body .hk-why svg.hk-lk:not(#_){margin-top:2px;color:var(--ink-subtle)}
@media (max-width:860px){html body .mb-stages:not(#_),html body .mb-stages.four:not(#_){grid-template-columns:1fr}html body .mb-stg:not(#_){flex-direction:row;align-items:center;justify-content:space-between;border-inline-end:0;border-bottom:1px solid var(--border);padding:10px var(--space-3)}html body .mb-stg small:not(#_){display:none}html body .mb-lanerow:not(#_){justify-content:flex-start;padding-top:var(--space-2)}}
/* the month panel */
html body .mp-tabs:not(#_){display:flex;gap:var(--space-4);border-bottom:1px solid var(--border);margin:0 0 var(--space-4)}
html body .mp-tabs button:not(#_){border:0;background:none;font:500 14px/20px var(--font-sans);color:var(--ink-muted);padding:var(--space-2) 0 10px;margin-bottom:-1px;border-bottom:2px solid transparent;cursor:pointer}
html body .mp-tabs button.on:not(#_){color:var(--ink);font-weight:600;border-bottom-color:var(--primary)}
html body .mp-steps:not(#_){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--border-strong);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--space-2)}
html body .mp-steps button:not(#_){border:0;border-inline-end:1px solid var(--border);background:var(--surface);font:600 12px/16px var(--font-sans);color:var(--ink-muted);padding:10px 6px;cursor:pointer}
html body .mp-steps button:last-child:not(#_){border-inline-end:0}
html body .mp-steps button.done:not(#_){background:var(--accent-green-pastel);color:var(--on-accent)}
html body .mp-steps button.on:not(#_){background:var(--primary);color:var(--on-primary)}
html body .mp-sent:not(#_){display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-3)}
html body .mp-sent .sub:not(#_){flex:1 1 200px}
/* the month's hand-offs on the Brief and Plan tabs (Brief ready, Plan ready for approval, Approve / Send back) */
html body .mp-flow:not(#_){display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin:0 0 var(--space-3);font-size:13.5px}
html body .mp-flow .sub:not(#_),html body .mp-flow small:not(#_){flex:1 1 220px;color:var(--ink-muted)}
html body .mp-flow.ok:not(#_){color:var(--ok-ink, var(--ink))}
html body .mp-flow .mp-act:not(#_){display:flex;gap:8px;flex-wrap:wrap}
html body .mp-lane:not(#_){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px var(--space-3);align-items:center;padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:var(--space-2)}
html body .mp-lane small:not(#_),html body .mp-lane .mp-note:not(#_),html body .mp-lane .mp-act:not(#_){grid-column:1/-1}
html body .mp-lane small:not(#_){font-size:12px;color:var(--ink-muted)}
html body .mp-note:not(#_){margin:0;background:var(--status-working-bg);border-radius:var(--radius-md);padding:6px 10px;font-size:13px}
html body .mp-act:not(#_){display:flex;gap:var(--space-2);flex-wrap:wrap}
html body .mp-again:not(#_){display:flex;flex-direction:column;gap:6px;padding:var(--space-3);border:1px solid var(--border-strong);border-radius:var(--radius-lg);margin-bottom:var(--space-3)}
html body .mp-h:not(#_){font:600 12px/16px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted);margin:var(--space-4) 0 var(--space-2)}
html body .mp-gate:not(#_){display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--border)}
html body .mp-gate i:not(#_){width:20px;height:20px;border-radius:999px;display:grid;place-items:center;font:700 12px/1 var(--font-sans);font-style:normal;flex:none;color:var(--on-status)}
html body .mp-gate i.ok:not(#_){background:var(--accent-green-pastel)}html body .mp-gate i.no:not(#_){background:var(--status-stuck-fill)}
html body .mp-gate span:not(#_){display:flex;flex-direction:column}html body .mp-gate small:not(#_){font-size:12px;color:var(--ink-muted)}
/* a month's workspace (its calendar, campaigns, preview), wide over the Planner */
@media (min-width:861px){html body aside.sp.sp-full:not(.sp-dock):not(#_){width:min(1320px,calc(100vw - 48px))!important;max-width:none!important}}
/* the month's tools in the wide side panel: Checks, Export and Send to client are on the month bar already (Share, for the client's link, stays) */
html body aside.sp.sp-full .ed-top :is(#edPub,#edExport,[data-wb="pop"],.wk-pop):not(#_){display:none!important}
html body aside.sp.sp-full .ed-top:not(:has(#edShare:not([hidden]))):not(#_){display:none!important}
/* phones and tablets: the side panel is a sheet across the whole width (it was held to 400px at the left on tablets) */
@media (max-width:860px){html body aside.sp:not(.sp-dock):not(#_){width:auto!important;max-width:none!important}}
/* the month bar above the calendar: a card of its own, not pinned to a scrolling list */
html body .mb-calwrap .mb-bar.mb2:not(#_){position:static;width:auto;left:auto;border:1px solid var(--border-strong);border-radius:var(--radius-lg);overflow:hidden;margin:0 0 var(--space-3)}
html body .ed-stratbox:not(#_){border:1px solid var(--border-strong);border-radius:var(--radius-lg);padding:var(--space-4);margin:0 0 var(--space-4);max-height:50vh;overflow:auto;background:var(--surface-sunken)}
/* the start-up screen (Kasper while the Hub loads, the first thing a phone shows on a reload), sign-in, the help panel's header and the
   old page headers still had the previous look's gradient: now the page colour, like the rest of the Hub (October 2026) */
html body :is(.boot,.signin):not(#_){background:var(--page)!important;color:var(--ink)!important}
html body :is(.boot,.signin) .buddy:not(#_){--mark:var(--ink);--eye:var(--page)}
html body .boot .k-txt:not(#_){color:var(--ink-muted)!important}html body .boot .k-shadow:not(#_){background:var(--ink)!important;opacity:.15}
html body .signin .say:not(#_){color:var(--ink)!important}html body .signin .fine:not(#_){color:var(--ink-muted)!important}
html body .signin .gbtn:not(#_){background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--border-strong)!important;border-radius:var(--radius-md)!important}
html body .sp:has(.hp-panel)>.sp-h:not(#_){background:var(--surface)!important;color:var(--ink)!important;border-bottom:1px solid var(--border)!important}
html body .sp:has(.hp-panel)>.sp-h *:not(svg):not(svg *):not(#_){color:var(--ink)!important}
html body .sp-sweep:not(#_){display:none!important}
/* phones and tablets: the bar on top names the page, so the small "Work / Insight" line above a title goes (it was left alone over Reports) */
@media (max-width:860px){html body .bk-eye:not(#_){display:none!important}html body #p-rp .bk-h:not(#_){justify-content:flex-end}}
/* Home on a phone (Rami, October 2026): the greeting is plain text on the page, not a card; only the to-dos are cards, side by side to swipe */
@media (max-width:860px){
  html body .bf-hero:not(#_){background:transparent!important;border:0!important;border-radius:0!important;padding:var(--space-2) 0 0!important;margin:0!important;min-height:0!important;display:flex!important;flex-direction:column;align-items:stretch!important;gap:var(--space-4)}
  html body .bf-hero>*:not(#_){width:auto!important;max-width:none!important;margin:0!important}
  html body .bf-hero .bf-hi:not(#_){padding:0!important;text-align:start!important;align-items:flex-start!important}
  html body .bf-hero :is(h1,h2,.bf-hi h2,.say):not(#_){font:700 28px/34px var(--font-sans)!important}
  html body .bf-hero .bf-dk:not(#_){margin:0!important;padding:0!important;width:auto!important}
  html body .bf-hero .bf-deck:not(#_){display:flex!important;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 var(--space-2)!important;scrollbar-width:none}
  html body .bf-hero .bf-deck::-webkit-scrollbar{display:none}
  html body .bf-hero .bf-card:not(#_){flex:0 0 min(84%,320px)!important;width:auto!important;min-height:0!important;height:auto!important;scroll-snap-align:start;background:var(--surface)!important;border:1px solid var(--border-strong)!important;border-radius:var(--radius-lg)!important;padding:var(--space-4)!important;display:flex!important;flex-direction:column;gap:var(--space-2);position:static!important;transform:none!important;opacity:1!important}
  html body .bf-hero .bf-card:only-child:not(#_){flex-basis:100%!important}
  html body .bf-hero .bf-card .bf-act:not(#_){align-self:flex-start;margin-top:var(--space-2)}
  html body .bf-hero .bf-arr:not(#_){display:none!important}
}
/* the Planner: the client's answer on each post, and the post's discussion (comments; red while an edit request is open) */
html body .ps-r:not(#_){--c:62px minmax(240px,2fr) 170px 110px 150px 120px minmax(180px,1.3fr) minmax(150px,1fr) 140px 170px 170px 110px 170px}
@media (min-width:861px){html body .ps-r:not(#_){min-width:1980px}} /* the columns' own width: two dropped columns (copy status, publishing status) had left 300px of empty space at the end (Rami, 10 October 2026) */
html body .ps-talk:not(#_){display:inline-flex;align-items:center;gap:3px;font:600 12px/16px var(--font-sans);font-style:normal;color:var(--ink-muted);padding:1px 6px;border-radius:999px;background:var(--surface-sunken);flex:none}
html body .ps-talk svg:not(#_){width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
html body .ps-talk.open:not(#_){background:var(--status-stuck-bg);color:var(--status-stuck-fg)}
html body .ps-chg.on:not(#_){background:var(--status-stuck-fill)!important;border-color:var(--status-stuck-fill)!important;color:var(--on-status)!important}
html body .pc-ans:not(#_){display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:2px}
html body .pc-ans .wk-tag:not(#_){font-size:11px;height:18px;padding:0 6px}
/* the clients column in Social media and Campaigns (October 2026 mockup): a dot for each client's month, and the picked client's months under it */
html body .crail-l .crail-dot:not(#_){width:7px;height:7px;border-radius:999px;background:var(--d);flex:none;margin-inline-start:auto}
html body .crail-l .crail-all i:not(#_){font-style:normal}
html body .crail-ms:not(#_){display:flex;flex-direction:column;gap:1px;margin:2px 0 6px}
html body .crail-l button.crail-mo:not(#_){display:flex;align-items:center;gap:8px;width:100%;height:30px;min-height:30px;padding:0 8px 0 34px!important;border:0;background:none;font:400 13px/18px var(--font-sans);color:var(--ink-muted);text-align:start;cursor:pointer}
html body .crail-l button.crail-mo .crail-dot:not(#_){margin:0}
html body .crail-l button.crail-mo span:not(#_){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .crail-l button.crail-mo em:not(#_){font-style:normal;font-size:11px;color:var(--ink-muted);white-space:nowrap}
html body .crail-l button.crail-mo.on:not(#_){background:var(--primary)!important;color:var(--on-primary)!important;font-weight:600}
html body .crail-l button.crail-mo.on em:not(#_){color:var(--on-primary)}
/* the Planner's month, pinned at the top (October 2026 mockup): the month's name and tools, its stages, what Send to client waits for */
html body .ps-top:not(#_){position:sticky;top:0;z-index:6;background:var(--page);display:flex;flex-direction:column;gap:12px;padding:12px 0;margin-bottom:4px;border-bottom:1px solid var(--border)}
html body .ps-tl:not(#_){display:flex;align-items:center;flex-wrap:wrap;gap:8px}
html body .ps-tl .h1:not(#_){margin:0;font:700 22px/28px var(--font-sans);letter-spacing:-.01em}
html body .ps-tl .ps-sp:not(#_){flex:1}
html body .ps-stages:not(#_){display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);overflow:hidden}
html body .ps-stages.four:not(#_){grid-template-columns:repeat(4,minmax(0,1fr))}
html body .ps-stg:not(#_){display:flex;align-items:center;gap:8px;padding:10px 12px;border:0;border-inline-end:1px solid var(--border);background:none;color:var(--ink);text-align:start;font:inherit;cursor:pointer;min-width:0}
html body .ps-stg:last-child:not(#_){border-inline-end:0}
html body .ps-stg:hover:not(#_){background:var(--surface-hover)}
html body .ps-stg>span:last-child:not(#_){min-width:0}
html body .ps-stg b:not(#_){display:block;font:600 12px/16px var(--font-sans);letter-spacing:.04em;text-transform:uppercase}
html body .ps-stg small:not(#_){display:block;font:400 12px/16px var(--font-sans);color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .ps-n:not(#_){width:20px;height:20px;border-radius:999px;display:grid;place-items:center;flex:none;font:700 11px/1 var(--font-sans);background:var(--status-idle-fill);color:var(--on-status)}
html body .ps-n.ok:not(#_){background:var(--accent-green-pastel)}html body .ps-n.wk:not(#_){background:var(--status-working-fill)}
html body .ps-gate:not(#_){display:flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--ink-muted)}
html body .ps-gate b:not(#_){color:var(--ink);font-weight:600}
html body .ps-gate svg:not(#_),html body .ps-tl .mb-lock svg:not(#_){width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
html body .ps-one:not(#_){overflow-x:auto}
@media (max-width:860px){html body .ps-stages:not(#_),html body .ps-stages.four:not(#_){grid-template-columns:repeat(2,minmax(0,1fr))}html body .ps-stg:not(#_){border-bottom:1px solid var(--border)}html body .ps-top:not(#_){position:static}}
/* the clients column is a little wider where it lists a client's months (Social media, Campaigns), so a month and where it stands fit */
@media (min-width:901px){html body main.has-rail:has(#cRail .crail-all):not(.rail-shut):not(#_){grid-template-columns:244px minmax(0,1fr)}}
/* Clients › List: the same rows as every other list (October 2026): one line high, cells centred and cut with … */
html body .ct-scroll .ct-tr:not(.ct-head2):not(#_){min-height:44px!important;height:44px!important;padding:0!important;align-items:stretch!important}
html body .ct-scroll .ct-tr>.ct-cell:not(#_){display:flex!important;align-items:center!important;padding:0 var(--space-2)!important;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:auto!important}
html body .ct-scroll .ct-tr>.ct-cell>:is(span,small,a):not(.sm-c):not(#_){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .ct-scroll .ct-tr>.ct-cell:has(>select:only-child):not(#_){padding:0!important}
html body .ct-scroll .ct-tr>.ct-cell>select:only-child:not(#_){width:100%;height:100%}
html body .ct-scroll .ct-tr>.ct-name:not(#_){height:auto!important;display:flex!important;align-items:center!important}
html body .ct-scroll .ct-tr .sm-c:not(#_){flex:none}
html body .ct-scroll .ct-tr>span.ct-name:not(#_){height:auto!important;min-height:0!important;align-self:stretch!important}
html body .ct-scroll .ct-tr a.ct-name b:not(#_){font:600 14px/20px var(--font-sans)!important}
html body .ct-scroll .ct-tr>.ct-cell:has(>select.ct-stsel):not(#_){padding:0!important}
html body .ct-scroll .ct-tr>.ct-cell>select.ct-stsel:not(#_){height:100%!important;min-height:100%!important;width:100%!important;border-radius:0!important;margin:0!important;border:0!important}
html body .ct-scroll .ct-tr>.ct-cell:has(>select.ct-stsel):not(#_):not(#_){align-items:stretch!important}
html body .ct-scroll .ct-tr>.ct-cell>select.ct-stsel:not(#_):not(#_){height:auto!important;max-height:none!important;min-height:0!important;align-self:stretch!important}
/* Clients › Cards (October 2026 mockup): contact cards, A to Z */
html body .ccd-grid:not(#_){display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;margin-top:4px}
html body .ccd:not(#_){background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;display:flex;flex-direction:column;gap:14px;min-width:0}
html body .ccd-hd:not(#_){display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
html body .ccd-av:not(#_){width:44px;height:44px;border-radius:10px;display:grid;place-items:center;flex:none;font:700 18px/1 var(--font-sans);background:var(--bg);color:var(--fg)}
html body .ccd-nm:not(#_){flex:1;min-width:0;display:flex;flex-direction:column}
html body .ccd-nm b:not(#_){font:600 16px/22px var(--font-sans);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .ccd-hd:hover .ccd-nm b:not(#_){text-decoration:underline}
html body .ccd-nm small:not(#_),html body .ccd-sub:not(#_),html body .ccd-who small:not(#_),html body .ccd-pref:not(#_){font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
html body .ccd-chips:not(#_){display:flex;flex-wrap:wrap;gap:4px}
html body .ccd-chips span:not(#_){font:400 12px/18px var(--font-sans);padding:1px 8px;border-radius:999px;background:var(--surface-sunken);color:var(--ink-muted);border:1px solid var(--border)}
html body .ccd-ct:not(#_){background:var(--surface-sunken);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
html body .ccd-k:not(#_){font:600 11px/14px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}
html body .ccd-who:not(#_){display:flex;align-items:baseline;gap:8px;min-width:0}
html body .ccd-who b:not(#_){font:600 14px/20px var(--font-sans);color:var(--ink)}
html body .ccd-btns:not(#_){display:flex;align-items:center;gap:6px;flex-wrap:wrap}
html body .ccd-btns .btn-s:not(#_){height:28px;min-height:28px;padding:0 10px;font-size:12px}
html body .ccd-pref:not(#_){margin-inline-start:auto}
html body .ccd-team:not(#_){display:flex;gap:16px;flex-wrap:wrap}
html body .ccd-team span:not(#_){display:flex;align-items:center;gap:6px;font:400 13px/18px var(--font-sans);color:var(--ink)}
html body .ccd-team i:not(#_){width:22px;height:22px;border-radius:999px;display:grid;place-items:center;font:700 10px/1 var(--font-sans);font-style:normal;background:var(--primary-soft);color:var(--ink)}
html body .ccd-ft:not(#_){display:flex;align-items:center;gap:8px;border-top:1px solid var(--border);padding-top:10px;font:400 12px/16px var(--font-sans);color:var(--ink-muted);margin-top:auto}
html body .ccd-dot:not(#_){width:8px;height:8px;border-radius:999px;background:var(--d);flex:none}
html body .ccd-sp:not(#_){flex:1}
/* a client's Strategy tab (October 2026 mockup) */
html body .cst-k:not(#_){margin:8px 0 8px;font:600 12px/16px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}
html body .cst-g:not(#_){display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:12px}
html body .cst:not(#_){background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;display:flex;flex-direction:column;gap:10px}
html body .cst-h:not(#_){display:flex;align-items:center;gap:10px}
html body .cst-h b:not(#_){flex:1;font:600 16px/22px var(--font-sans);color:var(--ink)}
html body .cst small:not(#_){font:400 13px/18px var(--font-sans);color:var(--ink-muted)}
/* Every list, the same (Rami, October 2026: "cells aren't lining up … checkboxes … extra divider lines"):
   - the tick column is 34px and its checkbox sits in the middle of it, in the column titles, the group title and every row alike
   - a typed or picked value starts where its column title starts (8px in)
   - one line between the toolbar and the list (the group box's own), not three */
html body .bk-gbox :is(.wk-r1,.ct-tr)>:first-child:has(>input[type=checkbox]):not(#_):not(#_),html body .bk-gbox :is(.wk-r1,.ct-tr)>:first-child:has(>label>input[type=checkbox]:only-child):not(#_):not(#_){padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}
html body .bk-gbox :is(.wk-r1,.ct-tr) input[type=checkbox]:not(#_),html body .bk-gbox .wk-gh>input.gh-all:not(#_){width:16px!important;height:16px!important;min-width:16px;margin:0!important;flex:none}
html body .bk-gbox .wk-gh:has(>input.gh-all):not(#_){padding-inline-start:0!important}
html body .bk-gbox .wk-gh>input.gh-all:not(#_){margin-inline:9px!important}
html body .bk-gbox :is(.wk-r1:not(.head),.ct-tr:not(.ct-head2))>span:has(>:is(input,select):not([type=checkbox]):not([data-sv]):only-child):not(#_){padding-inline:0!important}
html body .bk-gbox :is(.wk-r1:not(.head),.ct-tr:not(.ct-head2))>span>:is(input,select):not([type=checkbox]):not([data-sv]):only-child:not(#_):not(#_){padding-inline:8px!important;width:100%!important;margin:0!important;text-align:start!important}
html body .bk-gbox :is(.wk-r1:not(.head),.ct-tr:not(.ct-head2))>span>select:not([data-sv]):only-child:not(#_):not(#_):not(#_){padding-inline:3px 24px!important;background-position:right 6px center!important}
html body .bk-gbox :is(.wk-r1:not(.head),.ct-tr:not(.ct-head2))>span>input:not([type=checkbox]):only-child:not(#_):not(#_):not(#_){padding-inline:6px!important}
@media(min-width:861px){
html body .ct-scroll .ct-tr:not(#_):not(#_){column-gap:0!important;padding:0!important}
html body .ct-scroll .ct-tr.ct-head2>span:not(#_):not(#_){display:flex!important;align-items:center;padding-inline:var(--space-2)!important;min-width:0}
html body .ct-scroll .ct-tr.ct-head2>span:first-child:not(#_):not(#_){padding-inline-start:var(--space-3)!important}
html body .ct-scroll .ct-tr:not(.ct-head2)>.ct-cell:not(:has(>select:only-child)):not(#_):not(#_){padding-inline:var(--space-2)!important}
}
html body .page .bk-bar:not(#_){border-bottom:0!important}
html body .page .wk-t1:not(#_){border-top:0!important}

/* Lists: one line between cells (not two), and the pinned first columns' shadow only while scrolled sideways */
html body .bk-gbox :is(.wk-r1,.ct-tr)>*:not(#_):not(#_){border-inline-end:0!important}
html body .lt-stick-end:not(.lt-sx *):not(#_){box-shadow:none}
html body .lt-sx .lt-stick-end:not(:first-child):not(#_){box-shadow:6px 0 8px -6px rgba(0,0,0,.18)!important}
[dir=rtl] .lt-sx .lt-stick-end:not(:first-child):not(#_){box-shadow:-6px 0 8px -6px rgba(0,0,0,.18)!important}
html body .ps .bk-l>.ps-chg:not(#_){margin-inline-start:var(--space-4);align-self:center}
/* a several-people pick inside a list cell reads like the cell's other dropdowns: no box until hovered, fills the cell */
html body .bk-gbox :is(.wk-r1:not(.head),.ct-tr:not(.ct-head2))>span:has(>select[data-multi]):not(#_):not(#_){padding-inline:0!important}
html body .bk-gbox :is(.wk-r1:not(.head),.ct-tr:not(.ct-head2))>span>.pk-mbtn:not(#_):not(#_):not(#_){width:100%!important;height:calc(var(--row-height) - 4px)!important;margin:0!important;padding-inline:8px 24px!important;text-align:start!important;border-color:transparent!important;background-color:transparent!important;box-shadow:none!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400!important}
html body .bk-gbox :is(.wk-r1:not(.head),.ct-tr:not(.ct-head2))>span>.pk-mbtn:not(#_):not(#_):not(#_):hover{border-color:var(--border-strong)!important;background-color:var(--surface)!important}
/* The clients column: every dot in one line. × (take off Social media) and the month's archive button sit over the line's end and
   show only on hover, so they never push the dot or the note aside */
html body .crail-l .crail-r:not(#_),html body .crail-l .crail-mr:not(#_){position:relative;display:block}
html body .crail-l .crail-r>button[data-rail]:not(#_){width:100%}
html body .crail-l :is(.crail-x,.crail-ma):not(#_):not(#_){position:absolute;inset-inline-end:4px;top:50%;transform:translateY(-50%);width:24px;height:24px;min-height:0;padding:0!important;display:grid;place-items:center;border:0;border-radius:var(--radius-sm);background:var(--surface);color:var(--ink-muted);opacity:0;pointer-events:none;font-size:16px;line-height:1;cursor:pointer}
html body .crail-l :is(.crail-r,.crail-mr):is(:hover,:focus-within) :is(.crail-x,.crail-ma):not(#_):not(#_){opacity:1;pointer-events:auto}
html body .crail-l :is(.crail-x,.crail-ma):not(#_):not(#_):hover{background:var(--surface-hover);color:var(--ink)}
html body .crail-l .crail-x:not(#_):not(#_):hover{color:var(--s-red,#d64545)}
html body .crail-l .crail-ma svg:not(#_){width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
html body .crail-l .crail-r:has(.crail-x):is(:hover,:focus-within) .crail-dot:not(#_),html body .crail-l .crail-mr:has(.crail-ma):is(:hover,:focus-within) em:not(#_){visibility:hidden}
html body .crail-l .crail-mo.on+.crail-ma:not(#_):not(#_){background:var(--primary);color:var(--on-primary)}
@media (hover:none){html body .crail-l :is(.crail-x,.crail-ma):not(#_):not(#_){opacity:.7;pointer-events:auto}html body .crail-l .crail-r:has(.crail-x) .crail-dot:not(#_),html body .crail-l .crail-mr:has(.crail-ma) em:not(#_){visibility:hidden}}
/* + Add month and Archived months: quiet text lines under a client's months */
html body .crail-l .crail-ms>.crail-addm:not(#_):not(#_){color:var(--focus);font-weight:500}
html body .crail-l .crail-ms>a.crail-arl:not(#_){display:flex;align-items:center;height:28px;padding:0 8px 0 34px;font:400 12px/16px var(--font-sans);color:var(--ink-muted);text-decoration:none;border-radius:var(--radius-sm)}
html body .crail-l .crail-ms>a.crail-arl:not(#_):hover{background:var(--surface-hover);color:var(--ink);text-decoration:underline}
/* Archived months: one table, a line per month */
html body .ar-r:not(#_){--c:minmax(120px,1fr) 110px 130px 84px 120px 140px 180px;grid-template-columns:var(--c);min-width:870px}
html body .ar-r>.ar-do:not(#_){display:flex;gap:var(--space-2);align-items:center;justify-content:flex-end;padding-inline:var(--space-2)}
html body .bk-gbox .wk-r1.head>:first-child:not(:has(input)):not(#_):not(#_){padding-inline-start:var(--space-3)!important}
/* Results as a page (October 2026): the month pinned at the top with its three steps, then a list per kind of number */
html body .ps-n.chg:not(#_){background:var(--status-stuck-fill);color:var(--on-status)}
html body .rs-stages:not(#_){grid-template-columns:repeat(3,minmax(0,1fr))!important}
html body .rs-top .ps-tl .ed-saved:not(#_){font-size:12px;color:var(--ink-muted)}
html body .rs-page:not(#_){display:flex;flex-direction:column;gap:var(--space-4);padding-top:var(--space-4)}
html body .rs-g:not(#_){background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);overflow:hidden}
html body .rs-gh:not(#_){margin:0;padding:10px 14px;font:500 16px/22px var(--font-sans);border-bottom:1px solid var(--border)}
html body .rs-gh em:not(#_){font-style:normal;font-size:12px;color:var(--ink-muted);margin-inline-start:4px}
html body .rs-g .pv-tbl:not(#_){border:0;margin:0}
html body .rs-g .pv-r:not(#_){gap:0;padding:0;min-height:44px;border-top:1px solid var(--border);align-items:stretch}
html body .rs-g .pv-r:first-child:not(#_){border-top:0}
html body .rs-g .pv-r>span:not(#_){display:flex;align-items:center;gap:6px;padding:0 10px;border-inline-start:1px solid var(--border);min-width:0}
html body .rs-g .pv-r>span:first-child:not(#_){border-inline-start:0;padding-inline-start:14px}
html body .rs-g .pv-r.head:not(#_){background:var(--surface-sunken);min-height:36px;font:600 12px/16px var(--font-sans);color:var(--ink-muted)}
html body .rs-g .pv-r.head small:not(#_){font-weight:400;margin-inline-start:4px}
html body .rs-g .pv-r.head .due:not(#_){color:var(--ink)}
html body .rs-g .pv-r .pv-m:not(#_){gap:8px}html body .rs-g .pv-r .pv-m small:not(#_){color:var(--ink-muted);font-size:12px}
html body .rs-g .pv-n:not(#_){width:100%;height:36px;border-color:transparent!important;background:transparent!important;padding-inline:6px!important}
html body .rs-g .pv-n:not(#_):hover{border-color:var(--border-strong)!important;background:var(--surface)!important}
html body .rs-g .pv-n:not(#_):focus{border-color:var(--focus)!important;background:var(--surface)!important}
html body .rs-g .pv-n.due:not(#_):placeholder-shown{background:var(--primary-soft)!important}
html body .rs-g .pv-r>span:last-child:has(.pv-st):not(#_){padding:0}
html body .rs-g .pv-st:not(#_){flex:1;align-self:stretch;display:grid;place-items:center;font:600 12px/16px var(--font-sans);font-style:normal;border-radius:0;margin:0}
html body .rs-note:not(#_){background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);padding:14px}
html body .rs-empty:not(#_){padding:var(--space-6) 0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
html body .rs-empty p:not(#_){margin:0}
html body .rs-g .pv-r>span.pv-m:not(#_):not(#_){flex-direction:row;justify-content:flex-start;text-align:start;align-items:center}
html body .rs-g .pv-r input.pv-n:not(#_):not(#_):not(#_){border:1px solid transparent!important;box-shadow:none!important;background-color:transparent!important;border-radius:var(--radius-sm)!important;height:36px!important;min-height:0!important}
html body .rs-g .pv-r input.pv-n:not(#_):not(#_):not(#_):hover{border-color:var(--border-strong)!important;background-color:var(--surface)!important}
html body .rs-g .pv-r input.pv-n:not(#_):not(#_):not(#_):focus{border-color:var(--focus)!important;background-color:var(--surface)!important}
html body .rs-g .pv-r input.pv-n.due:not(#_):not(#_):not(#_):placeholder-shown{background-color:var(--primary-soft)!important}
html body .rs-g .pv-r.head>span:not(#_){flex-wrap:wrap;column-gap:4px;row-gap:0}
/* a client's page: the header and tabs sit at the same place on every tab (some tabs wrap them with their own Save) */
html body #ctBody>.ed-top:has(>.ct-tabs):not(#_){row-gap:0;margin-top:0;padding-top:0}
html body #ctBody>.ed-top:has(>.ct-tabs)>.ct-hd:not(#_):not(#_){margin-bottom:0!important}
/* the client's link, under its button at the top of the month */
html body .ps-tl:not(#_){position:relative}
html body .ps-sharebox:not(#_){position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:20;width:min(440px,calc(100vw - 32px));display:flex;flex-direction:column;gap:8px;padding:14px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:0 10px 30px rgba(0,0,0,.14)}
html body .ps-sharebox small:not(#_){color:var(--ink-muted);font-size:12px;line-height:16px}
html body .ps-sharebox input:not(#_){width:100%;font-size:13px}
html body .ps-sb-do:not(#_){display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:760px){html body .ps-sharebox:not(#_){position:fixed;top:auto;left:16px;right:16px;inset-inline-end:16px;bottom:calc(88px + env(safe-area-inset-bottom));width:auto;z-index:70}} /* on a phone it sat off the screen (17 October 2026 audit): fixed above the phone bar */
/* an item typed into a "+ New …" line while it saves */
html body .bk-pend:not(#_){display:flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;font-size:13px;color:var(--ink-muted);background:var(--surface);border-top:1px solid var(--border);grid-column:1/-1}
html body .bk-spin:not(#_){width:12px;height:12px;border-radius:50%;border:2px solid var(--border-strong);border-top-color:var(--focus);animation:bkspin .8s linear infinite;flex:none}
@keyframes bkspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){html body .bk-spin:not(#_){animation:none}}
/* the menu folded (icons only): no labels, every icon centred in one column, a tooltip names it */
html.nav-mini body #app>aside :is(.nav a,.nav-more,.theme,.nav-qk):not(#_):not(#_):not(#_){font-size:0!important;line-height:0!important;justify-content:center!important;align-items:center!important;gap:0!important;padding:0!important;width:44px!important;height:40px!important;min-height:40px!important;max-height:none!important;margin:2px auto!important;display:flex!important;position:relative;flex:none!important;border:0!important}
html.nav-mini body #app>aside :is(.nav a,.nav-more,.theme,.nav-qk) :is(span,em,b,small,.nav-kbd):not(#_){display:none!important}
html.nav-mini body #app>aside :is(.nav a,.nav-more,.theme,.nav-qk) svg:not(#_){width:19px;height:19px;margin:0!important}
html.nav-mini body #app>aside .nav a.dot:not(#_)::after{position:absolute;top:6px;inset-inline-end:6px;margin:0}
html.nav-mini body #app>aside .nav-sec:not(#_):not(#_){height:0!important;min-height:0!important;padding:0!important;margin:8px 16px!important;overflow:hidden}
/* a post's panel (the Planner's Open) */
html body .ps-pn:not(#_){display:flex;flex-direction:column;gap:var(--space-4)}
html body .pp-s:not(#_){display:flex;flex-direction:column;gap:var(--space-2);padding-bottom:var(--space-4);border-bottom:1px solid var(--border)}
html body .pp-s h3:not(#_){margin:0;font:600 12px/16px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}
html body .pp-f:not(#_){display:flex;flex-direction:column;gap:4px;font:500 12px/16px var(--font-sans);color:var(--ink-muted);min-width:0}
html body .pp-f :is(input,textarea,select):not(#_){font:400 14px/20px var(--font-sans);color:var(--ink);width:100%}
html body .pp-two:not(#_){display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
html body .pp-three:not(#_){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
html body .pp-ths:not(#_){display:flex;flex-wrap:wrap;gap:8px}
html body .pp-th:not(#_){position:relative;width:84px;height:84px;border-radius:8px;overflow:hidden;background:var(--surface-sunken);border:1px solid var(--border)}
html body .pp-th img:not(#_){width:100%;height:100%;object-fit:cover;display:block}
html body .pp-th.pp-vid:not(#_){display:grid;place-items:center;font-size:12px}
html body .pp-th.pp-dth img:not(#_){position:absolute;inset:0}html body .pp-th.pp-dth a:not(#_){position:absolute;inset-inline:0;bottom:0;padding:3px 6px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .pp-th button:not(#_){position:absolute;top:4px;inset-inline-end:4px;width:22px;height:22px;min-height:0;padding:0;border:0;border-radius:6px;background:rgba(0,0,0,.6);color:#fff;font-size:14px;line-height:1;opacity:0;cursor:pointer}
html body .pp-th:is(:hover,:focus-within) button:not(#_){opacity:1}
@media (hover:none){html body .pp-th button:not(#_){opacity:1}}
html body .pp-add:not(#_){width:84px;height:84px;border-radius:8px;border:1px dashed var(--border-strong);display:grid;place-items:center;font-size:24px;color:var(--ink-muted);cursor:pointer}
html body .pp-add:not(#_):hover{border-color:var(--ink-muted);color:var(--ink)}
html body .pp-do:not(#_){display:flex;gap:8px;flex-wrap:wrap;align-items:center}
html body .pp-link:not(#_){display:flex;gap:6px;flex:1;min-width:220px}
html body label.busy:not(#_){opacity:.6;pointer-events:none}
html body .pp-q:not(#_){margin:0;padding:8px 10px;border-inline-start:3px solid var(--status-stuck-fill);background:var(--surface-sunken);border-radius:6px;font-size:13px}
html body .pp-q small:not(#_){display:block;color:var(--ink-muted)}
html body .pp-t:not(#_){padding:8px 10px;border-radius:8px;background:var(--surface-sunken);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
html body .pp-t.cl:not(#_){background:var(--primary-soft)}html body .pp-t.ed:not(#_){border-inline-start:3px solid var(--status-working-fill)}
html body .pp-t small:not(#_){color:var(--ink-muted);font-size:12px}
html body .pp-t p:not(#_){margin:0;flex-basis:100%;font-size:13px;white-space:pre-wrap}
html body .pp-say:not(#_){display:flex;flex-direction:column;gap:6px}
html body .ps-r .ps-open:not(#_){min-height:0;height:28px;padding:0 10px}
@media (max-width:600px){html body :is(.pp-two,.pp-three):not(#_){grid-template-columns:1fr}}
html body .ps-pn .pp-three select:not(#_):not(#_):not(#_){width:100%!important;min-width:0!important;max-width:100%}
html body .ps-pn .pp-three:not(#_){grid-template-columns:1fr!important}
@media (min-width:1100px){html body .ps-pn .pp-three:not(#_){grid-template-columns:repeat(3,minmax(0,1fr))!important}}
/* a campaign's panel */
html body .cp-pn:not(#_){display:flex;flex-direction:column;gap:var(--space-3)}
html body .cp-pn .cp-lbl:not(#_){font:500 12px/16px var(--font-sans);color:var(--ink-muted)}
html body .cp-ask:not(#_){display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:14px}
html body .cp-ask small:not(#_){flex-basis:100%;color:var(--ink-muted);font-size:12px;padding-inline-start:24px}
html body .cp-posts:not(#_){display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}
html body .cp-post:not(#_){aspect-ratio:1;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:var(--surface-sunken);cursor:pointer;display:grid;place-items:center;min-height:0}
html body .cp-post img:not(#_){width:100%;height:100%;object-fit:cover}
html body .cp-post .e:not(#_){font-size:10px;line-height:12px;padding:4px;color:var(--ink-muted);text-align:center}
html body .cp-post:not(#_){position:relative}
html body .cp-post .cp-play:not(#_){position:absolute;top:4px;inset-inline-end:4px;font-style:normal;font-size:9px;line-height:16px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center}
html body .cp-post .e .cp-play:not(#_){position:static;margin:0 auto 3px}
html body .cp-post.on:not(#_){border-color:var(--focus);box-shadow:0 0 0 2px var(--primary-soft)}
/* a campaign's panel as approved (Rami, 31 October 2026; public/campaigns.js cpDraw): a wider panel; its details folded into one line
   with Show; the Ad creatives first, a soft grey card each, steps as pills (done green, now black, to come grey); at the bottom the
   client's grid tick and Approve the campaign. No borders. */
@media (min-width:861px){html body aside.sp.cp-sp:not(.sp-dock):not(#_){width:min(760px,calc(100vw - 48px))!important;max-width:none!important}}
html body .cp-fold:not(#_){display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-muted)}
html body .cp-fold .cp-line:not(#_){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .cp-show:not(#_){all:unset;cursor:pointer;color:var(--info-ink,var(--primary));font-weight:500;flex:none}
html body .cp-show:not(#_):hover{text-decoration:underline}
html body .cp-show:not(#_):focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
html body .cp-det:not(#_){display:flex;flex-direction:column;gap:12px;padding:14px 16px 16px;border-radius:14px;background:var(--surface-sunken)}
html body .cp-det[hidden]:not(#_){display:none}
html body .ad-box:not(#_){display:flex;flex-direction:column;gap:10px}
html body .ad-head:not(#_){display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
html body .ad-ht:not(#_){display:flex;flex-direction:column;gap:2px;min-width:0}
html body .ad-h:not(#_){font-size:16px;line-height:22px;color:var(--ink)}
html body .ad-head .sub:not(#_){font-size:12px}
html body .ad-add:not(#_){display:flex;flex-wrap:wrap;gap:8px}
html body .ad-add .btn-s:not(#_){border-radius:999px!important;border-color:transparent!important}
html body .ad-add .btn-s:not(.pri):not(#_){background:var(--surface-sunken)!important}
html body .ad-list:not(#_){display:flex;flex-direction:column;gap:8px}
html body .ad-row:not(#_){display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:14px;align-items:start;padding:12px;border-radius:14px;background:var(--surface-sunken)}
html body .ad-row.on:not(#_){border-end-start-radius:0;border-end-end-radius:0}
html body .ad-th:not(#_){all:unset;cursor:pointer;position:relative;width:84px;height:84px;border-radius:10px;overflow:hidden;background:var(--surface);display:flex;align-items:flex-end;box-sizing:border-box}
html body .ad-th.t-ready:not(#_){background:var(--ok-bg)}
html body .ad-th.t-review:not(#_){background:var(--status-working-bg)}
html body .ad-th.t-make:not(#_){background:color-mix(in srgb,var(--ink) 12%,var(--surface))}
html body .ad-th:not(#_):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
html body .ad-th img:not(#_){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html body .ad-tl:not(#_){position:relative;margin:6px;font-size:11px;line-height:14px;color:var(--ink-muted)}
html body .ad-th img + .ad-tl:not(#_){padding:1px 6px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff}
html body .ad-mid:not(#_){display:flex;flex-direction:column;gap:5px;min-width:0}
html body .ad-top:not(#_){display:flex;flex-wrap:wrap;align-items:center;gap:8px}
html body .ad-name:not(#_){all:unset;cursor:pointer;font-size:14px}
html body .ad-name:not(#_):hover b{text-decoration:underline}
html body .ad-name:not(#_):focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
html body .ad-kind:not(#_){font-style:normal;font-size:11px;line-height:16px;padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink)}
html body .ad-det:not(#_){font-size:12px;color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .ad-txt:not(#_){font-size:12px;color:var(--ink)}
html body .ad-txt.bad:not(#_){color:var(--bad-ink)}
html body .ad-lnk:not(#_){all:unset;cursor:pointer;color:var(--info-ink,var(--primary));text-decoration:underline}
html body .ad-due:not(#_){font-size:12px;color:var(--ink-muted);white-space:nowrap}
html body .ad-steps:not(#_){display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
html body .ad-steps i:not(#_){font-style:normal;font-size:11px;line-height:16px;padding:3px 9px;border-radius:999px;background:var(--surface);color:var(--ink-subtle,var(--ink-muted))}
html body .ad-steps i.done:not(#_){background:var(--ok-bg);color:var(--ok-ink)}
html body .ad-steps i.now:not(#_){background:var(--ink);color:var(--surface);font-weight:600}
html body .ad-ed:not(#_){display:flex;flex-direction:column;gap:10px;padding:4px 12px 14px;margin-top:-8px;border-radius:0 0 14px 14px;background:var(--surface-sunken)}
html body .ad-new:not(#_){margin-top:0;padding:14px 16px;border-radius:14px;background:var(--info-bg,var(--primary-soft))}
html body .ad-new > b:not(#_){font-size:13px;color:var(--info-ink,var(--ink))}
html body .ad-grid:not(#_){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
html body .cp-pn :is(.cp-det,.ad-ed) .ed-f:not(#_){margin:0}
html body .cp-det .pp-two:not(#_){gap:12px}
html body .ad-ticks:not(#_){display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;min-height:36px;align-items:center}
html body .ad-tick:not(#_){display:inline-flex;align-items:center;gap:4px}
html body .ad-more summary:not(#_){cursor:pointer;font-size:13px;color:var(--ink-muted);margin-bottom:6px}
html body .ad-more[open]:not(#_){display:flex;flex-direction:column;gap:8px}
html body .ad-pick:not(#_){padding:12px;border-radius:14px;background:var(--surface-sunken)}
html body .ad-sum:not(#_){display:block;font-size:12px}
html body .cp-foot:not(#_){display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:14px}
html body .cp-okrow:not(#_){display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
html body .cp-share:not(#_){display:flex;align-items:center;gap:10px;font-size:14px;flex:1 1 260px;min-width:0}
html body .cp-share input:not(#_){width:20px;height:20px;flex:none}
html body .cp-ok:not(#_){display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
html body .cp-foot .sub:not(#_){font-size:12px}
@media (max-width:560px){html body .ad-row:not(#_){grid-template-columns:64px minmax(0,1fr);gap:10px}html body .ad-th:not(#_){width:64px;height:64px}html body .ad-due:not(#_){grid-column:2}html body .ad-grid:not(#_){grid-template-columns:1fr}html body .ad-det:not(#_){white-space:normal}html body .cp-ok .btn-s.pri:not(#_){width:100%}html body .cp-ok:not(#_){flex:1 1 100%}}
html body .cp-pn .pp-link:not(#_){margin-top:6px}
html body .cp-act:not(#_){display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* an error beside the button that caused it */
html body .near-err:not(#_){position:absolute;z-index:9999;max-width:min(360px,calc(100vw - 16px));display:flex;align-items:flex-start;gap:8px;padding:8px 10px 8px 12px;border-radius:10px;background:var(--status-stuck-bg,#fde7ee);color:var(--status-stuck-fg,#9b1239);border:1px solid var(--status-stuck-fill,#f7b3c6);box-shadow:0 8px 24px rgba(0,0,0,.14);font:500 13px/18px var(--font-sans);animation:nearIn .16s ease-out}
html body .near-err::before{content:"";position:absolute;top:-6px;left:50%;width:10px;height:10px;background:inherit;border-left:inherit;border-top:inherit;transform:translateX(-50%) rotate(45deg)}
html body .near-err.up::before{top:auto;bottom:-6px;transform:translateX(-50%) rotate(225deg)}
html body .near-err button:not(#_){min-height:0;height:18px;width:18px;padding:0;border:0;background:none;color:inherit;font-size:15px;line-height:1;cursor:pointer;flex:none}
html body .near-moved:not(#_){display:none!important}
html body .act-err:not(#_){color:var(--status-stuck-fg,#9b1239);font:500 13px/18px var(--font-sans)}
@keyframes nearIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* a client's Team tab */
html body .tm-roles:not(#_){display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-3);margin-top:var(--space-3)}
html body .tm-role:not(#_){display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-4);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg)}
html body .tm-ini:not(#_){width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;font:700 14px/1 var(--font-sans);font-style:normal;background:var(--primary-soft);color:var(--ink)}
html body .tm-ini.none:not(#_){background:var(--surface-sunken);color:var(--ink-muted)}
html body .tm-rb:not(#_){display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
html body .tm-rb label:not(#_){display:flex;flex-direction:column;gap:2px}
html body .tm-rb label b:not(#_){font:600 15px/20px var(--font-sans)}
html body .tm-rb label small:not(#_){font-size:12px;line-height:16px;color:var(--ink-muted)}
html body .tm-note:not(#_){margin-top:var(--space-4)}
html body .tm-mini:not(#_){display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
html body .tm-mini span:not(#_){display:flex;justify-content:space-between;gap:8px;font-size:13px}
html body .tm-mini small:not(#_){color:var(--ink-muted)}
html body #ctBody>.ed-top:has(>.ct-tabs)>.ct-tabs:not(#_){flex:1 1 100%;min-width:0}

/* Shoot brief questions and Write with Kasper (work.js briefQs, aiDraw) */
html body .bq:not(#_){display:grid;gap:var(--space-4);margin:var(--space-2) 0 var(--space-4)}
html body .bq-f:not(#_){display:grid;gap:6px}
html body .bq-l:not(#_){font:600 13px/18px var(--font-sans);color:var(--ink)}
html body .bq-seg:not(#_){display:inline-flex;gap:4px;padding:3px;border-radius:10px;background:var(--surface-2,var(--panel));width:max-content;max-width:100%}
html body .bq-seg button:not(#_){font:600 13px/18px var(--font-sans);border:0;background:none;color:var(--ink-muted);padding:6px 14px;border-radius:8px;cursor:pointer}
html body .bq-seg button.on:not(#_){background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
html body .bq-nums:not(#_){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
html body .bq-n:not(#_){display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:10px}
html body .bq-n input:not(#_){width:58px!important;min-width:0;text-align:center;flex:none}
html body .bq-n span:not(#_){display:grid;min-width:0}html body .bq-n b:not(#_){font-size:13px}html body .bq-n small:not(#_){font-size:11.5px;color:var(--ink-muted);line-height:15px}
@media (max-width:640px){html body .bq-nums:not(#_){grid-template-columns:1fr}}
html body .sd-tabs:not(#_){align-items:center}
html body .sd-tabs .ai-go:not(#_):not(#_):not(#_),html body .ai-go:not(#_):not(#_){margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:30px!important;padding:0 12px!important;border-radius:999px!important;border:0!important;
  font:600 13px/1 var(--font-sans)!important;color:#fff!important;cursor:pointer;background:linear-gradient(110deg,#7a2fd0,#cf2456 55%,#ff9d4d)!important;background-size:180% 100%!important;box-shadow:0 2px 10px rgba(122,47,208,.28)!important;transition:background-position .4s}
html body .ai-go:hover:not(#_):not(#_){background-position:100% 0!important}
html body .ai-go i:not(#_){font-style:normal;font-size:13px}
html body .ai-go[disabled]:not(#_):not(#_){opacity:.45;cursor:not-allowed}
html body .ai-go.solid:not(#_):not(#_){margin-left:0}
html body .ai-box:not(#_){position:relative;margin:0 0 var(--space-4);padding:var(--space-4);border-radius:14px;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(110deg,#7a2fd0,#cf2456 55%,#ff9d4d) border-box;border:1.5px solid transparent}
html body .ai-box:not(#_)::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,rgba(122,47,208,.07),rgba(207,36,86,.05) 55%,rgba(255,157,77,.06));pointer-events:none}
html body .ai-form:not(#_){position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--space-3)}
html body .ai-form label:not(#_){display:grid;gap:6px;font:600 13px/18px var(--font-sans)}
html body .ai-form label small:not(#_){font-weight:400;color:var(--ink-muted)}
html body .ai-form .ai-acts:not(#_),html body .ai-form .ai-need:not(#_),html body .ai-form .wk-err:not(#_){grid-column:1/-1}
html body .ai-need:not(#_){margin:0;font-size:13px;color:var(--accent-orange)}
html body .ai-acts:not(#_){position:relative;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
html body .ai-h:not(#_){display:flex;gap:10px;align-items:baseline;margin-bottom:8px}html body .ai-h b:not(#_){background:linear-gradient(110deg,#7a2fd0,#cf2456);-webkit-background-clip:text;background-clip:text;color:transparent}
html body .ai-h small:not(#_){color:var(--ink-muted)}
html body .ai-out:not(#_){position:relative}
html body .ai-out pre:not(#_){white-space:pre-wrap;font:14px/21px var(--font-sans);max-height:420px;overflow:auto;margin:0 0 var(--space-3);padding:var(--space-3);border-radius:10px;background:var(--surface-2,var(--panel));color:var(--ink)}
html body .ai-wait:not(#_){position:relative;display:inline-flex;gap:10px;align-items:center;font:600 13px/18px var(--font-sans);background:linear-gradient(90deg,#7a2fd0,#cf2456,#ff9d4d,#7a2fd0);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:aiShine 2.2s linear infinite}
html body .ai-wait i:not(#_){width:14px;height:14px;border-radius:50%;background:conic-gradient(#7a2fd0,#cf2456,#ff9d4d,#7a2fd0);animation:aiSpin 1s linear infinite;-webkit-mask:radial-gradient(circle,transparent 4px,#000 5px);mask:radial-gradient(circle,transparent 4px,#000 5px)}
@keyframes aiShine{to{background-position:300% 0}}@keyframes aiSpin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){html body .ai-wait:not(#_),html body .ai-wait i:not(#_){animation:none}}
@media (max-width:640px){html body .ai-form:not(#_){grid-template-columns:1fr}html body .sd-tabs .ai-go:not(#_):not(#_):not(#_){margin-left:8px;flex:none}}
/* Admin › AI (aiadmin.js) */
html body .ai-grp:not(#_){display:grid;gap:var(--space-3);padding:var(--space-4) 0;border-top:1px solid var(--border)}
html body .ai-save+.ai-grp:not(#_),html body .ai-save+.wk-note+.ai-grp:not(#_){border-top:0;padding-top:var(--space-2)}
html body .ai-gh:not(#_){display:grid;gap:2px}html body .ai-gh b:not(#_){font:600 15px/20px var(--font-sans)}html body .ai-gh small:not(#_){color:var(--ink-muted)}
html body .ai-dir:not(#_){display:grid;gap:8px;padding:var(--space-3);border:1px solid var(--border);border-radius:12px;background:var(--surface)}
html body .ai-dir.off:not(#_){opacity:.6}
html body .ai-dt:not(#_){display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto auto;gap:8px;align-items:center}
@media (max-width:640px){html body .ai-dt:not(#_){grid-template-columns:1fr auto auto}html body .ai-dt input:not(#_){grid-column:1/-1}}
html body .ai-save:not(#_){display:flex;justify-content:flex-end;align-items:center;gap:10px;position:sticky;top:0;z-index:2;padding:var(--space-2) 0;margin-bottom:var(--space-2);background:var(--surface);border-bottom:1px solid var(--border)}
html body .sh-grid .sd-main .bq textarea:not(#_):not(#_){min-height:0!important;max-height:none}
html body .sh-grid .sd-main .bq-brief~.wk-fill textarea:not(#_):not(#_),html body .sh-grid .sd-main .bq+.wk-fill textarea:not(#_):not(#_){min-height:120px!important}
html body .sd-tabs button:not(#_):not(#_){white-space:nowrap}
@media (max-width:640px){html body .sd-tabs:not(#_):not(#_){flex-wrap:wrap!important;overflow:visible!important;row-gap:8px}html body .sd-tabs .ai-go:not(#_):not(#_):not(#_){margin:0 0 8px auto}}
/* Team tab pickers (profile.js drawTeam) */
html body .tm-chips:not(#_){display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
html body .tm-chip:not(#_){display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 4px 0 10px;border-radius:999px;background:var(--surface-sunken);border:1px solid var(--border);font:500 13px/1 var(--font-sans);color:var(--ink)}
html body .tm-chip small:not(#_){font:600 10.5px/1 var(--font-sans);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted)}
html body .tm-chip.off:not(#_){border-style:dashed}
html body .tm-chip button:not(#_){border:0;background:none;color:var(--ink-muted);width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:15px;line-height:1}
html body .tm-chip button:hover:not(#_){background:var(--surface-hover);color:var(--ink)}
html body .tm-add:not(#_){display:flex;flex-wrap:wrap;gap:8px;align-items:center}
html body .tm-add select:not(#_){flex:1 1 200px;min-width:0}
html body .tm-none:not(#_){display:block;margin-top:6px;color:var(--ink-muted);font-size:12px}
html body .bq-l small:not(#_){font-weight:400;color:var(--ink-muted);margin-left:6px}
/* the shoot brief's five questions and the Plan's Script link (Rami, 31 October 2026) */
html body .bq-langs:not(#_){border:0;padding:0;margin:0;min-width:0}html body .bq-langs legend:not(#_){padding:0;margin-bottom:6px}
html body .bq-num:not(#_){max-width:120px}
html body .bq-lks:not(#_){display:grid;gap:6px}html body .bq-lk:not(#_){display:flex;gap:6px;align-items:center}html body .bq-lk input:not(#_){flex:1 1 auto;min-width:0}
html body .bq-old:not(#_){padding:10px 12px;border-radius:10px;background:var(--surface-sunken)}html body .bq-oldi b:not(#_){font-size:12.5px}html body .bq-oldi p:not(#_){margin:2px 0 8px;font-size:13px;white-space:normal}
html body .sd-script:not(#_){display:grid;gap:6px;margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--border)}
html body .sd-shint:not(#_){color:var(--ink-muted);font-size:12.5px}
/* the Plan's For the client: Plan ready: tell the account manager, and the client's link (Rami, 2 November 2026) */
html body .sd-share:not(#_){display:grid;gap:6px;margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--border)}
html body .sd-share .sd-ready:not(#_){margin-top:0}html body .sd-share .sd-link:not(#_){margin-top:4px}
html body .sd-told:not(#_){color:var(--ink-muted);font-size:12.5px}html body .sd-told.chg b:not(#_){color:var(--warning-ink,#9a5b00);font-weight:600}
html body .sd-plk:not(#_){display:flex;gap:8px;align-items:center;flex-wrap:wrap}html body .sd-plk small:not(#_){color:var(--ink-muted);font-size:12.5px;flex:1 1 220px}
html body .sd-oldsc:not(#_){padding:10px 12px;border-radius:10px;background:var(--surface-sunken);display:grid;gap:6px}html body .sd-oldh:not(#_){display:flex;justify-content:space-between;align-items:center;gap:8px}
html body .sd-oldsc .rx:not(#_){max-height:320px;overflow:auto;font-size:13.5px}html body .sd-oldsc small:not(#_){color:var(--ink-muted);font-size:12px}
/* Admin: its sections as tabs at the top on every screen (they were left hidden on computers, so only People & teams could be reached) */
html body :is(#p-qs,#tmPage,#dlPage) .adm-tabs:not(#_){display:flex!important;flex-wrap:wrap;gap:var(--space-4);margin:12px 0 0;border-bottom:1px solid var(--border);background:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important}
html body :is(#p-qs,#tmPage,#dlPage) .adm-tabs a:not(#_){background:none!important;border:0!important;border-radius:0!important;color:var(--ink-muted)!important;font:600 14px/20px var(--font-sans)!important;padding:0 var(--space-1)!important;height:var(--row-height);display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap}
html body :is(#p-qs,#tmPage,#dlPage) .adm-tabs a.on:not(#_):not(#_){color:var(--ink)!important;box-shadow:inset 0 -2px 0 var(--primary)!important}
@media (max-width:860px){html body :is(#p-qs,#tmPage,#dlPage) .adm-tabs:not(#_){flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}}
/* Client names on cards: the whole width, up to two lines, never cut to a few letters (Rami, October 2026) */
html body :is(.ccd-nm b,.sg-card header a b):not(#_):not(#_){white-space:normal!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere}
html body .ccd-hd:not(#_){align-items:flex-start}
html body .ccd-st:not(#_){display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px}
html body .ccd-st .wk-tag:not(#_){margin:0}
html body .sg-card header:not(#_){display:flex;flex-direction:column;align-items:flex-start;gap:4px}
html body .sg-card header a:not(#_){max-width:100%}
html body .sg-card header small:not(#_){display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* Column titles everywhere (Rami, October 2026, "the way monday.com does it"): bigger and bold, with the whole width for the title.
   The sort arrows and the column menu take no room: they float over the end of the title, only while pointing at the column
   (the sort badge also stays while that column is the sort). */
html body .lt-h:not(#_):not(#_){position:relative}
html body :is(.wk-r1.head,.ct-head2,.lt-hclone)>*:not(#_):not(#_),html body :is(.wk-r1.head,.ct-head2,.lt-hclone)>* :is(.lt-tx,span:not(.lt-ar)):not(#_):not(#_),html body table thead th:not(#_):not(#_),html body table thead th .lt-tx:not(#_):not(#_){font:700 13.5px/18px var(--font-sans)!important;color:var(--ink)!important;letter-spacing:0!important}
html body .lt-h .lt-ar:not(#_):not(#_){position:absolute!important;top:50%;inset-inline-end:28px;transform:translateY(-50%);width:22px;height:22px;margin:0!important;border-radius:50%;display:grid;place-items:center;
  background:#2563eb!important;color:#fff!important;font:700 12px/1 var(--font-sans)!important;opacity:0!important;pointer-events:none;box-shadow:0 1px 4px rgba(0,0,0,.18);transition:opacity .12s;z-index:2}
html body .lt-h:is(:hover,:focus-visible,:focus-within) .lt-ar:not(#_):not(#_),html body .lt-th.on .lt-ar:not(#_):not(#_){opacity:1!important}
html body .lt-h .lt-cmb:not(#_):not(#_){position:absolute!important;top:50%;inset-inline-end:4px;transform:translateY(-50%);width:22px;height:22px;margin:0!important;padding:0!important;border-radius:6px;display:grid;place-items:center;
  background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--border)!important;font:700 12px/1 var(--font-sans)!important;opacity:0;z-index:2}
html body .lt-h:is(:hover,:focus-within) .lt-cmb:not(#_):not(#_),html body .lt-h .lt-cmb:focus-visible:not(#_):not(#_){opacity:1}
html body .lt-h:not(.lt-hasm) .lt-ar:not(#_):not(#_){inset-inline-end:28px}
@media (hover:none){html body .lt-h .lt-cmb:not(#_):not(#_){opacity:1}html body .lt-h .lt-ar:not(#_):not(#_){display:none}html body .lt-th.on .lt-ar:not(#_):not(#_){display:grid}}
html body .lt-h .lt-tx:not(#_):not(#_){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Column titles, take two (Rami, October 2026): centred, no icons, no ⌄ button (right-click a title for its menu) */
html body .lt-h .lt-cmb:not(#_):not(#_):not(#_){display:none!important}
html body :is(.wk-r1.head,.ct-head2,.lt-hclone)>*:not(#_):not(#_) svg,html body :is(.wk-r1.head,.ct-head2,.lt-hclone)>*:not(#_):not(#_) .ni,html body table thead th:not(#_):not(#_) svg{display:none!important}
html body :is(.wk-r1.head,.ct-head2,.lt-hclone)>.lt-h:not(#_):not(#_),html body table thead th.lt-h:not(#_):not(#_){justify-content:center!important;text-align:center!important}
html body .lt-h .lt-tx:not(#_):not(#_){text-align:center}
html body .lt-h .lt-ar:not(#_):not(#_){inset-inline-end:6px}
html body .lt-h:not(.lt-hasm) .lt-ar:not(#_):not(#_),html body .lt-h .lt-ar:not(#_):not(#_):not(#_){inset-inline-end:4px}
/* The sort button, as monday.com draws it (Rami, October 2026): a round button sitting on the middle of the column title's top
   edge, the colour of the header, with an up and a down triangle (one of them, the way the list is sorted) */
html body .lt-h:not(#_):not(#_){overflow:visible!important}
html body :is(.wk-r1.head,.lt-hclone):not(#_):not(#_){overflow:visible!important}
html body .lt-h .lt-ar:not(#_):not(#_):not(#_){top:0;inset-inline-end:auto;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;font-size:0!important;color:transparent!important;
  background:var(--surface-sunken)!important;border:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;z-index:5}
html body .lt-h .lt-ar:not(#_):not(#_)::before,html body .lt-h .lt-ar:not(#_):not(#_)::after{content:"";width:0;height:0;border-inline:4.5px solid transparent}
html body .lt-h .lt-ar:not(#_):not(#_)::before{border-bottom:5px solid var(--ink)}
html body .lt-h .lt-ar:not(#_):not(#_)::after{border-top:5px solid var(--ink)}
html body .lt-th[aria-sort="ascending"] .lt-ar:not(#_):not(#_)::after,html body .lt-th[aria-sort="descending"] .lt-ar:not(#_):not(#_)::before{opacity:.25}
html body .ai-mtab:not(#_){display:grid;border:1px solid var(--border);border-radius:12px;overflow:hidden}
html body .ai-mrow:not(#_){display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--space-3);align-items:center;padding:10px var(--space-3);border-top:1px solid var(--border)}
html body .ai-mrow:first-child:not(#_){border-top:0}
html body .ai-mrow span:not(#_){display:grid;gap:3px;min-width:0}
html body .ai-mrow b:not(#_){font:600 14px/18px var(--font-sans)}html body .ai-mrow small:not(#_){color:var(--ink-muted);font-size:12px;line-height:16px}
@media (max-width:640px){html body .ai-mrow:not(#_){grid-template-columns:1fr}}
/* Kasper in Social media: Write with Kasper on the Plan tab, Ask Kasper on a caption (posts.js) */
html body :is(.kp-row,.kc-row):not(#_){display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 10px}
html body :is(.kp-row,.kc-row) .ai-go:not(#_):not(#_){margin-left:0}
html body :is(.kp-row,.kc-row) small:not(#_){font-size:12px;color:var(--ink-muted)}
html body .kp-note:not(#_){margin:6px 0;font-size:13px;color:var(--accent-violet)}
html body .kc-box .ai-h:not(#_){position:relative}
html body .kc-sec:not(#_){position:relative;display:grid;gap:6px;margin-bottom:10px}
html body .kc-sec>span:not(#_){font:600 12px/16px var(--font-sans);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted)}
html body .kc-item:not(#_){display:flex;gap:10px;align-items:flex-start;justify-content:space-between;padding:8px 10px;border-radius:10px;background:var(--surface-sunken)}
html body .kc-item p:not(#_){margin:0;font-size:14px;line-height:20px;white-space:pre-wrap;flex:1;min-width:0}
html body .kc-item .btn-s:not(#_){flex:none}
html body .kc-sec ul:not(#_){margin:0;padding-inline-start:18px;font-size:13.5px;line-height:19px}
@media (max-width:640px){html body .kc-item:not(#_){flex-direction:column}}
/* Planner list, caption cell (monday.com style): the edit box is only as wide as the text; the rest of the cell opens the post */
html body .ps-capc:not(#_){cursor:pointer;display:flex!important;align-items:center}
html body .ps-capc input.wk-tx:not(#_):not(#_):not(#_){field-sizing:content;width:auto!important;min-width:3ch;max-width:100%;flex:0 1 auto;cursor:text;border-radius:6px!important}
html body .ps-capc input.wk-tx:placeholder-shown:not(#_):not(#_):not(#_){min-width:16ch}
html body .ps-capc:hover:not(#_){background:var(--surface-hover)}
html body .ps-capc:hover input.wk-tx:not(:focus):not(#_):not(#_):not(#_){border-color:var(--border-strong)!important;background-color:var(--surface)!important}
/* Admin › AI: the usage report (aiadmin.js) */
html body .au-top:not(#_){display:flex;justify-content:flex-end;margin-bottom:var(--space-3)}
html body .au-kpi:not(#_){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-3)}
html body .au-kpi>div:not(#_){border:1px solid var(--border);border-radius:12px;padding:12px 14px;display:grid;gap:4px}
html body .au-kpi small:not(#_){color:var(--ink-muted);font-size:12px}html body .au-kpi b:not(#_){font:700 22px/26px var(--font-sans);font-variant-numeric:tabular-nums}
html body .au-days:not(#_){display:flex;align-items:flex-end;gap:3px;height:56px;padding:6px 0;margin-bottom:var(--space-4);border-bottom:1px solid var(--border)}
html body .au-days span:not(#_){flex:1;min-width:3px;max-width:28px;height:var(--h);background:var(--accent-violet);border-radius:3px 3px 0 0;opacity:.75}
html body .au-grid:not(#_){display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--space-5);margin-bottom:var(--space-4)}
html body #aiUse h4:not(#_){font:600 14px/20px var(--font-sans);margin:var(--space-3) 0 8px}
html body #aiUse section>h4:first-child:not(#_){margin-top:0}
html body .au-tab:not(#_){display:grid;border:1px solid var(--border);border-radius:12px;overflow:hidden}
html body .au-row:not(#_){display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 12px;border:0;border-top:1px solid var(--border);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
html body .au-row:first-child:not(#_){border-top:0}html body .au-row:hover:not(#_){background:var(--surface-hover)}html body .au-row.on:not(#_){background:var(--primary-soft)}
html body .au-row span:not(#_){display:grid;gap:2px;min-width:0}html body .au-row small:not(#_){color:var(--ink-muted);font-size:12px}
html body .au-n:not(#_){text-align:right;flex:none}html body .au-n b:not(#_){font-variant-numeric:tabular-nums}
html body .au-bar:not(#_){display:grid;gap:4px;margin-bottom:10px}html body .au-bar span:not(#_){display:flex;justify-content:space-between;gap:8px;font-size:13px}html body .au-bar small:not(#_){color:var(--ink-muted)}
html body .au-bar i:not(#_){display:block;height:8px;width:var(--w);min-width:4px;border-radius:4px;background:linear-gradient(90deg,#7a2fd0,#cf2456)}
html body .au-line:not(#_){display:flex;justify-content:space-between;gap:8px;font-size:13px;padding:5px 0;border-bottom:1px solid var(--border)}
html body .au-line span:last-child:not(#_){color:var(--ink-muted);font-variant-numeric:tabular-nums}
html body .au-list:not(#_){border:1px solid var(--border);border-radius:12px;overflow:auto;max-height:520px}
html body .au-lr:not(#_){display:grid;grid-template-columns:110px 130px 150px 130px minmax(160px,1fr) 90px 64px;gap:10px;padding:8px 12px;border-top:1px solid var(--border);font-size:13px;align-items:center;min-width:900px}
html body .au-lr.head:not(#_){border-top:0;background:var(--surface-sunken);font-weight:700;position:sticky;top:0}
html body .au-lr span:not(#_){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:800px){html body .au-kpi:not(#_){grid-template-columns:repeat(2,minmax(0,1fr))}html body .au-grid:not(#_){grid-template-columns:1fr}}
html body .mb-prod:not(#_){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;gap:6px;margin-bottom:6px}

/* ---------- Kasper's chat in Kasper's colour (Rami, October 2026: "it fully expands into a black background, a chat interface"):
   the panel takes the other theme, so it is black in light mode and white in dark mode, the colour Kasper himself is. ---------- */
html body aside.sp.k-inv:not(#_){--c-bg:#17181a;--surface:#17181a;--surface-sunken:#121315;--surface-hover:#232528;--border:#3a3d42;--border-strong:#858a93;--c-ink:#f1f2f3;--ink-muted:#b9bdc4;--ink-subtle:#9a9fa8;--primary-hover:#c0d4fa;--primary-soft:#1a2747;--focus:#7ea6ff;--status-done-fg:#8fb8ff;--status-done-bg:#17294a;--status-working-fg:#f5b963;--status-working-bg:#3d2a0c;--status-stuck-fg:#ff8fb0;--status-stuck-bg:#47162a;--status-review-fg:#bfa8ff;--status-review-bg:#2a2150;--status-idle-fg:#b9bdc4;--status-idle-bg:#2a2c30;--row-alt:#1d1e21;--side-bg:#08090a;--side-active:#1f2124;--accent-violet:#b98cff;--accent-violet-soft:#2a1a45;--accent-sky:#5db4ff;--accent-sky-soft:#0f2a42;--accent-orange:#ff9d4d;--accent-orange-soft:#3d2410;--accent-rose:#ff7fa3;--accent-rose-soft:#42172a;--accent-green:#4fd18b;--accent-green-soft:#103222;--scrim:rgba(0,0,0,.6);--shadow-raised:0 1px 2px rgba(0,0,0,.5);--shadow-menu:0 8px 24px rgba(0,0,0,.6);--shadow-modal:0 24px 64px rgba(0,0,0,.7);--mark:#f1f2f3;--eye:#17181a;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body aside.sp.k-inv:not(#_){--c-bg:#f1f2f3;--surface:#f1f2f3;--surface-sunken:#e6e8eb;--surface-hover:#dfe2e6;--border:#cfd2d7;--border-strong:#7c818a;--c-ink:#17181a;--ink-muted:#4b4f57;--ink-subtle:#666b74;--primary-hover:#93b4f3;--primary-soft:#e6edfc;--focus:#2b5fd9;--status-done-fg:#1d55b3;--status-done-bg:#e1ebfb;--status-working-fg:#8f4a00;--status-working-bg:#fbecd5;--status-stuck-fg:#b01e4f;--status-stuck-bg:#fbe2ea;--status-review-fg:#5b3fae;--status-review-bg:#ebe5fa;--status-idle-fg:#4b4f57;--status-idle-bg:#e9ebee;--row-alt:#fafafb;--side-bg:#111214;--side-active:#26282c;--accent-violet:#7a2fd0;--accent-violet-soft:#f1e8fc;--accent-sky:#0b74c9;--accent-sky-soft:#e3f1fd;--accent-orange:#c2540a;--accent-orange-soft:#fdeede;--accent-rose:#cf2456;--accent-rose-soft:#fde6ee;--accent-green:#14804a;--accent-green-soft:#e2f5ea;--scrim:rgba(15,16,17,.45);--shadow-raised:0 1px 2px rgba(28,27,24,.08);--shadow-menu:0 8px 24px rgba(28,27,24,.14);--shadow-modal:0 24px 64px rgba(28,27,24,.22);--mark:#17181a;--eye:#f1f2f3;color-scheme:light}}
:root[data-theme="dark"] body aside.sp.k-inv:not(#_){--c-bg:#f1f2f3;--surface:#f1f2f3;--surface-sunken:#e6e8eb;--surface-hover:#dfe2e6;--border:#cfd2d7;--border-strong:#7c818a;--c-ink:#17181a;--ink-muted:#4b4f57;--ink-subtle:#666b74;--primary-hover:#93b4f3;--primary-soft:#e6edfc;--focus:#2b5fd9;--status-done-fg:#1d55b3;--status-done-bg:#e1ebfb;--status-working-fg:#8f4a00;--status-working-bg:#fbecd5;--status-stuck-fg:#b01e4f;--status-stuck-bg:#fbe2ea;--status-review-fg:#5b3fae;--status-review-bg:#ebe5fa;--status-idle-fg:#4b4f57;--status-idle-bg:#e9ebee;--row-alt:#fafafb;--side-bg:#111214;--side-active:#26282c;--accent-violet:#7a2fd0;--accent-violet-soft:#f1e8fc;--accent-sky:#0b74c9;--accent-sky-soft:#e3f1fd;--accent-orange:#c2540a;--accent-orange-soft:#fdeede;--accent-rose:#cf2456;--accent-rose-soft:#fde6ee;--accent-green:#14804a;--accent-green-soft:#e2f5ea;--scrim:rgba(15,16,17,.45);--shadow-raised:0 1px 2px rgba(28,27,24,.08);--shadow-menu:0 8px 24px rgba(28,27,24,.14);--shadow-modal:0 24px 64px rgba(28,27,24,.22);--mark:#17181a;--eye:#f1f2f3;color-scheme:light}
/* Kasper's shape on its way to becoming the panel (help.js pop) */
html body .k-morph:not(#_){position:fixed;z-index:2001;pointer-events:none}
html body aside.sp.k-hold:not(#_){opacity:0}
html body aside.sp.k-inv:not(#_){color:var(--ink);background:var(--surface)!important}
/* Kasper at the top right on a computer too, as on a phone (Rami, October 2026), on every page: pressing him opens the chat on that side */
@media (min-width:861px){
  html body .pal:not(#_){top:12px;right:18px;bottom:auto;z-index:41;flex-direction:row}
  html body .pal:not(#_) :is(.pal-btn,.buddy){width:40px!important;height:40px!important}
  html body .pal:not(#_) .pal-say{margin:44px 0 0;align-self:flex-start}
  html body main .bk-h:not(#_){padding-right:84px!important} /* room for him beside a list's New button */
}
/* Kasper's chat is a card with round corners on every side, so his shape softens into it (Rami, October 2026) */
html body aside.sp.k-inv:not(#_){border-radius:18px!important;border:0!important;overflow:hidden}
html body aside.sp.k-inv .sp-h:not(#_){border-radius:0!important}
@media (min-width:1200px){
  html.sp-docked body aside.sp.sp-dock.k-inv:not(#_){top:10px!important;right:10px!important;bottom:10px!important;border-radius:18px!important;border:0!important}
  html.sp-docked body main:not(#_){margin-right:calc(min(440px,34vw) + 20px)!important}
}
@media (max-width:860px){
  html body aside.sp.k-inv:has(.hp-panel):not(#_){inset:auto!important;top:calc(env(safe-area-inset-top,0px) + 8px)!important;left:8px!important;right:8px!important;bottom:calc(env(safe-area-inset-bottom,0px) + 8px)!important;width:auto!important;height:auto!important;border-radius:18px!important}
  html body aside.sp.k-inv:has(.hp-panel) .sp-h:not(#_){padding-top:14px!important}
}
/* My work on a phone (Rami, October 2026: "My work doesn't look good on mobile"): one compact card per task. The kind is a small
   label over the task, the client and the date share one line under it, and Done sits at the right. An empty date is a small
   "+ Date" to tap, not an empty date box. */
@media (max-width:860px){
  html body.rows-tall.fl-on .page.on .wk-t1 .mw-row:not(.head):not(#_){grid-template-columns:auto auto minmax(0,1fr) auto;gap:4px 8px;padding:12px 14px;margin:0 0 6px;border-radius:14px}
  html body.rows-tall.fl-on .page.on .wk-t1 .mw-row:not(.head)>*:not(#_){min-height:0!important;height:auto!important}
  html body.rows-tall.fl-on .page.on .wk-t1 .mw-row:not(.head)>.mw-k:not(#_){grid-column:1/4;grid-row:1;font-size:11.5px!important;font-weight:600!important;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-muted);padding-inline-end:0!important;flex-direction:row}
  html body.rows-tall.fl-on .page.on .wk-t1 .mw-row:not(.head)>[data-l="Task"]:not(#_){grid-column:1/4;grid-row:2;flex-direction:column;gap:2px;font-size:15px}
  html body.rows-tall.fl-on .page.on .wk-t1 .mw-row:not(.head)>[data-l="Task"]:not(#_)::before{display:none}
  html body.rows-tall.fl-on .page.on .wk-t1 .mw-row:not(.head)>[data-l="Task"] .mw-open:not(#_){white-space:normal;overflow:visible}
  html body.rows-tall.fl-on .page.on .wk-t1 .mw-row:not(.head)>[data-l="Task"] .wk-ren:not(#_){display:none}
  html body.rows-tall.fl-on .page.on .wk-t1 .mw-row:not(.head)>[data-l="Task"] small:not(#_){font-size:12.5px}
  /* client, date and flags: one line of small text under the task, no column names */
  html body.rows-tall.fl-on .page.on .wk-t1 .mw-row:not(.head)>:is([data-l="Client"],[data-l="When"],[data-l="Flags"]):not(#_){grid-row:3;grid-column:auto;margin-top:4px!important;display:inline-flex;flex-direction:row;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-muted)}
  html body.rows-tall.fl-on .page.on .wk-t1 .mw-row:not(.head)>:is([data-l="Client"],[data-l="When"],[data-l="Flags"]):not(#_)::before{display:none}
  html body.rows-tall.fl-on .page.on .wk-t1 .mw-row:not(.head)>[data-l="Client"]:not(#_){grid-column:1/4}
  html body.rows-tall.fl-on .page.on .wk-t1 .mw-row:not(.head)>:is([data-l="When"],[data-l="Flags"]):not(#_){grid-row:4}
  html body.rows-tall.fl-on .page.on .wk-t1 .mw-row:not(.head)>[data-l="When"] input.find:not(#_){width:auto;height:28px!important;font-size:12.5px;padding:0 8px;border-radius:999px}
  html body.rows-tall.fl-on .page.on .wk-t1 .mw-row:not(.head)>[data-l="When"]:has(input.empty):not(#_){position:relative;width:max-content}
  html body.rows-tall.fl-on .page.on .wk-t1 .mw-row:not(.head)>[data-l="When"] input.empty:not(#_){position:absolute;inset:0;width:100%;opacity:0}
  html body.rows-tall.fl-on .page.on .wk-t1 .mw-row:not(.head)>[data-l="When"]:has(input.empty):not(#_)::after{content:"+ Date";display:inline-flex;align-items:center;height:26px;padding:0 10px;border:1px dashed var(--border-strong);border-radius:999px;font-size:12px;font-weight:600;color:var(--ink-muted)}
  /* Done (and the other buttons) at the right, beside the task */
  html body.rows-tall.fl-on .page.on .wk-t1 .mw-row:not(.head)>.mw-acts:not(#_){position:static!important;grid-column:4;grid-row:1/4;align-self:center;flex-direction:row;gap:6px}
  html body.rows-tall.fl-on .page.on .wk-t1 .mw-row:not(.head)>.mw-acts .btn-s:not(#_){min-height:34px;padding:0 14px;font-size:13px}
  /* the add row: the new to-do's name, then a small date beside it */
  html body.rows-tall.fl-on .page.on .card.mw .wk-t1 .bk-add:not(#_){grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px 14px}
  html body.rows-tall.fl-on .page.on .card.mw .wk-t1 .bk-add>.bk-add-n:not(#_){grid-column:1;padding-inline-end:0!important;font-size:14px!important;font-weight:500!important}
  html body.rows-tall.fl-on .page.on .card.mw .wk-t1 .bk-add>[data-l="When"]:not(#_){grid-column:2;grid-row:1}
  html body.rows-tall.fl-on .page.on .card.mw .wk-t1 .bk-add>[data-l="When"]:not(#_)::before{display:none}
  html body.rows-tall.fl-on .page.on .card.mw .wk-t1 .bk-add>[data-l="When"] input:not(#_){width:132px;height:32px!important;font-size:12.5px;padding:0 8px;border-radius:999px}
  /* the lone "more" button: up beside the group, not a row of its own */
  html body.fl-on .page.on .card.mw>.bk-bar:not(#_){padding:0!important;margin:0 0 6px!important;min-height:0;border:0}
}
/* On a phone, Feedback and Escalate sit in the top bar beside Kasper (Rami, October 2026), not floating over the page's cards and
   their buttons. They still grow into their forms (panel.js). Kasper in the corner, and the two as plain icons with no ring round
   them (Rami, 17 October 2026). */
@media (max-width:860px){
  html body .esc-fab:not(#_):not(#_),html body.fl-on .esc-fab:not(#_):not(#_){top:calc(env(safe-area-inset-top,0px) + 10px)!important;bottom:auto!important;inset-inline-end:54px!important;width:36px;height:36px!important;padding:0!important;justify-content:center;z-index:41;box-shadow:none!important;border:0!important;background:transparent!important}
  html body .fb-fab:not(#_):not(#_),html body.fl-on .fb-fab:not(#_):not(#_){top:calc(env(safe-area-inset-top,0px) + 10px)!important;bottom:auto!important;inset-inline-end:92px!important;width:36px;height:36px!important;padding:0!important;justify-content:center;z-index:41;box-shadow:none!important;border:0!important;background:transparent!important}
  /* the title stops before the three icons (Feedback, Escalate, Kasper), back arrow or not (ship-readiness audit, 17 October 2026:
     "Test – Social, N…" ran under them) */
  html body .mhead:not(#_){padding-inline-end:136px}
  html body :is(.esc-fab,.fb-fab):not(#_) svg{width:20px;height:20px}
  /* with no top bar (Home), the news strip starts below Kasper and the two icons, not under them */
  html body.on-home .annbar:not(#_){margin-top:46px}
  html body .mhead .logo:not(#_){flex:1 1 auto;min-width:0}
  html body .mhead #mTitle:not(#_){flex:1 1 auto;min-width:0;max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:860px){
  /* lined up with the top bar's own button: the bar is taller when it has a back arrow */
  html body:not(#_) :is(.esc-fab,.fb-fab):not(#_):not(#_){top:calc(env(safe-area-inset-top,0px) + 13px)!important}
  html body:not(#_) .pal:not(#_){top:calc(env(safe-area-inset-top,0px) + 13px)}
  html body:has(#mBack:not([hidden])):not(#_) :is(.esc-fab,.fb-fab):not(#_):not(#_){top:calc(env(safe-area-inset-top,0px) + 20px)!important}
  html body:has(#mBack:not([hidden])):not(#_) .pal:not(#_){top:calc(env(safe-area-inset-top,0px) + 20px)}
}
/* Rename a client from its page and from its card, not only from the list (Rami, October 2026) */
html body .ct-hd-row .ct-hdren:not(#_){display:inline-flex;align-items:center}
html body .ct-hd-row .ct-hdren .wk-ren:not(#_){opacity:.55;width:28px;height:28px;justify-content:center;border-radius:var(--radius-md)}
html body .ct-hd-row .ct-hdren .wk-ren:hover:not(#_){opacity:1;background:var(--surface-hover)}
html body .ct-hd-row .ct-hdren .wk-renbox:not(#_){font-size:20px;font-weight:700;height:38px!important;min-width:240px}
html body .ccd:not(#_){position:relative}

/* The dot cursor (public/cursor.js): on a computer the arrow and the hand become a dot; text, grab, resize and zoom cursors stay */
@media (hover:hover) and (pointer:fine){
  html.dotc{cursor:none}
  html.dotc .dotc-p{cursor:none!important}
  html.dotc :is(input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=file]):not([type=range]),textarea,[contenteditable="true"]){cursor:text}
  .cur-dot{position:fixed;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:2147483647;opacity:0;transition:opacity .15s,background .18s,box-shadow .18s,width .18s cubic-bezier(.2,.8,.2,1),height .18s cubic-bezier(.2,.8,.2,1),margin .18s cubic-bezier(.2,.8,.2,1)}
  .cur-dot.on{opacity:1}
  .cur-dot.big{width:30px;height:30px;margin:-15px 0 0 -15px;background:transparent;box-shadow:inset 0 0 0 1.5px #fff}
  .cur-dot.down{width:7px;height:7px;margin:-3.5px 0 0 -3.5px}
  .cur-dot.big.down{width:24px;height:24px;margin:-12px 0 0 -12px;background:#fff}
  .cur-dot.off{opacity:0}
}
@media (prefers-reduced-motion:reduce){.cur-dot{transition:opacity .15s}}

/* The menu's foot (Rami, October 2026): a dotted texture rising from the bottom, white turning blue as it fades (the same in dark
   mode, where the menu stays dark), and Dark mode / Light mode right above your name */
html body #app>aside{isolation:isolate}
html body #app>aside::before{content:"";position:absolute;left:0;right:0;bottom:0;height:min(34%,320px);z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(255,255,255,.6) 0%,rgba(226,229,255,.45) 22%,rgba(140,146,255,.32) 52%,rgba(70,70,230,.18) 78%,rgba(60,60,200,0) 100%);
  -webkit-mask:radial-gradient(circle,#000 .55px,transparent .85px) 0 100%/9px 9px;mask:radial-gradient(circle,#000 .55px,transparent .85px) 0 100%/9px 9px}
html body #app>aside .side-theme{margin-top:auto}
html body #app>aside .side-theme+.me{margin-top:4px}
html body #app>aside .side-theme .th-sun{display:none}
:root[data-theme="dark"] html body #app>aside .side-theme .th-sun,:root[data-theme="dark"] #app>aside .side-theme .th-sun{display:inline}
:root[data-theme="dark"] #app>aside .side-theme .th-moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #app>aside .side-theme .th-sun{display:inline}:root:not([data-theme="light"]) #app>aside .side-theme .th-moon{display:none}}

/* Projects (October 2026, public/projects.js): project cards, task rows, the task panel. Built on the Hub's tokens so it matches. */
.pj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:14px}
.pj-card{display:grid;gap:6px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);color:var(--c-ink);text-decoration:none;min-width:0}
.pj-card:hover{border-color:var(--border-strong)}
.pj-card b{font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.pj-k{font-size:12px;color:var(--ink-subtle)}
.pj-meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12.5px;color:var(--ink-muted)}
.pj-late{color:var(--status-stuck-fg);font-weight:600}
.pj-bar{display:block;height:4px;border-radius:99px;background:var(--surface-sunken);overflow:hidden}.pj-bar i{display:block;height:100%;background:var(--status-done-fill)}
.pj-list{display:grid}
.pj-row{display:grid;grid-template-columns:10px minmax(0,1fr) minmax(0,auto) 90px 110px;gap:10px;align-items:center;padding:9px 10px;border:0;border-bottom:1px solid var(--border);background:none;color:var(--c-ink);text-align:start;font:inherit;text-decoration:none;cursor:pointer;min-width:0}
.pj-row:hover{background:var(--surface-hover)}
.pj-row b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-row small{color:var(--ink-muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-row.late .pj-due{color:var(--status-stuck-fg);font-weight:600}
.pj-st,.pj-due{font-size:12.5px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.pj-dot{width:9px;height:9px;border-radius:50%;background:var(--status-idle-fill)}
.pj-dot.work{background:var(--status-working-fill)}.pj-dot.review{background:var(--status-review-fill)}.pj-dot.done{background:var(--status-done-fill)}
.pj-form .pj-tpl:not([hidden]){display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-subtle)}.pj-form .pj-tpl input{margin-top:2px;flex:none;width:auto}
.pj-kasper{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}.pj-kasper>span{font-size:12px;color:var(--ink-subtle);margin-inline-end:2px}
.pj-head{display:flex;flex-wrap:wrap;gap:12px 28px;margin:6px 0 14px;align-items:end}
.pj-head label{display:grid;gap:3px;font-size:12px;color:var(--ink-subtle)}.pj-head b{font-size:14px;color:var(--c-ink);font-weight:500}
.pj-ppl{display:flex}.pj-ppl i,.pj-av{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;font-style:normal;font-size:11px;font-weight:600;background:var(--primary-soft);color:var(--c-ink);border:2px solid var(--surface)}
.pj-ppl i+i{margin-inline-start:-6px}
.pj-av{margin-inline-start:auto;width:22px;height:22px;font-size:10px}
.pj-tc{text-align:start;font:inherit;color:var(--c-ink);width:100%;display:grid;gap:6px;cursor:pointer}
.pj-tc b{font-weight:500;font-size:14px;overflow-wrap:anywhere}
.pj-tc.late{box-shadow:inset 3px 0 0 var(--status-stuck-fill)}
.pj-form{display:grid;gap:12px}
.pj-form label{display:grid;gap:4px;font-size:12.5px;color:var(--ink-muted)}
.pj-form textarea{resize:vertical;min-height:90px}
.pj-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pj-h3{font-size:14px;margin:22px 0 8px}
.pj-cm{padding:8px 0;border-top:1px solid var(--border)}.pj-cm b{font-size:13px}.pj-cm small{color:var(--ink-subtle);font-size:12px;margin-inline-start:8px}.pj-cm p{margin:4px 0 0;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.pj-cform{display:grid;gap:8px;margin-top:10px}.pj-cform .btn-s{justify-self:start}
.pj-form input,.pj-form select,.pj-form textarea,.pj-cform textarea{width:100%;max-width:100%;box-sizing:border-box;min-width:0}.pj-form label,.pj-two>*{min-width:0}
#p-pj .wk-quick input{border:0!important;box-shadow:none!important;background:none!important;padding:0!important;height:100%}
.pj-pname{display:none}
.ws{padding:18px 20px;display:grid;gap:12px}.ws-h h2{font-size:17px;margin:0 0 4px}.ws-h .sub{margin:0;max-width:72ch}
.ws-on{display:flex;align-items:center;gap:8px;font-size:14px}.ws-on input{width:18px;height:18px;accent-color:var(--primary)}
.ws-lines{width:100%;box-sizing:border-box;font:inherit;font-size:14px;line-height:1.7;resize:vertical}.ws-lines:disabled{opacity:.5}
.ws-info{margin:0;font-size:13px}
.ws-do{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pj-pck{padding:16px 18px;margin-bottom:14px;display:grid;gap:8px}
.pj-pck-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.pj-pck-h h2{font-size:16px;margin:0}.pj-pck-h small{color:var(--ink-muted);font-size:12.5px}
.pj-stl{display:grid;gap:2px}
.pj-st1{display:grid;grid-template-columns:20px minmax(0,1fr) 28px;gap:10px;align-items:start;padding:8px 6px;border-radius:10px}
.pj-st1:hover{background:var(--surface-sunken)}
.pj-st1 input[type=checkbox]{width:18px;height:18px;margin:2px 0 0;accent-color:var(--primary);cursor:pointer}
.pj-st1 b{font-size:14px;font-weight:600}.pj-st1 small{display:block;color:var(--ink-muted);font-size:12.5px;margin-top:2px}.pj-st1 small a{color:inherit;text-decoration:underline}
.pj-st1 p{margin:4px 0 0;font-size:13px;color:var(--ink-subtle);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pj-st1.done b{color:var(--ink-subtle);text-decoration:line-through;font-weight:500}.pj-st1.done p{display:none}
.pj-st1.mine{box-shadow:inset 3px 0 0 var(--primary)}
.pj-behind{color:var(--status-working-fg)}
.pj-overdue>span{color:var(--status-stuck-fg);font-weight:600}.pj-overdue input{border-color:var(--status-stuck-fg)!important}
.pj-st1:hover .pj-ckx{opacity:1}
.pj-more{justify-self:start;border:0;background:none;color:var(--ink-muted);font:inherit;font-size:13px;cursor:pointer;padding:4px 6px;border-radius:6px}.pj-more:hover{background:var(--surface-sunken)}
.pj-pck0{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;font-size:13.5px;color:var(--ink-muted)}
.pj-pck .wk-err:empty,.pj-pck0 .wk-err:empty{display:none}
.pj-ask{max-width:400px}.pj-ask ul{margin:0;padding-inline-start:18px;display:grid;gap:2px}.pj-ask label{display:grid;gap:4px}.pj-ask label span{font-size:12.5px;color:var(--ink-muted)}.pj-ask textarea{width:100%;box-sizing:border-box}.pj-ask .wk-err:empty{display:none}
.pj-h3 small{font-weight:500;color:var(--ink-muted);margin-inline-start:6px}
.pj-ckbar{margin:-2px 0 6px}
.pj-ck{display:grid;grid-template-columns:20px minmax(0,1fr) 28px;align-items:center;gap:8px;padding:3px 0;border-radius:8px}
.pj-ck input[type=checkbox]{width:17px;height:17px;margin:0;accent-color:var(--primary);cursor:pointer}
.pj-ck .pj-ckb{width:100%;min-width:0;box-sizing:border-box;border:1px solid transparent!important;background:none!important;box-shadow:none!important;padding:5px 6px!important;border-radius:6px;font:inherit;font-size:14px;color:var(--ink)}
.pj-ck .pj-ckb:hover{border-color:var(--border)!important}.pj-ck .pj-ckb:focus{border-color:var(--primary)!important;outline:0}
.pj-ck.done .pj-ckb{color:var(--ink-subtle);text-decoration:line-through}
.pj-ckx{border:0;background:none;color:var(--ink-subtle);font-size:18px;line-height:1;cursor:pointer;border-radius:6px;height:26px;opacity:0}
.pj-ck:hover .pj-ckx,.pj-ckx:focus-visible{opacity:1}.pj-ckx:hover{color:var(--status-stuck-fg);background:var(--surface-sunken)}
@media (hover:none){.pj-ckx{opacity:1}}
.pj-ckadd{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:start;gap:8px;margin-top:4px;color:var(--ink-subtle)}
.pj-ckadd span{text-align:center;padding-top:5px}
.pj-ckadd textarea{width:100%;min-width:0;box-sizing:border-box;resize:none;border:1px solid transparent!important;background:none!important;box-shadow:none!important;padding:5px 6px!important;border-radius:6px;font:inherit;font-size:14px;color:var(--ink);min-height:0;field-sizing:content;max-height:200px}
.pj-ckadd textarea:focus{border-color:var(--primary)!important;outline:0}
.pj-cks .wk-err:empty{display:none}
.pj-ckn.all{color:var(--status-done-fg,var(--ink-muted));font-weight:600}
@media (max-width:860px){.pj-pname{display:grid;gap:2px;font-size:20px;line-height:1.25;margin:4px 0 10px;overflow-wrap:anywhere}.pj-pname small{font-size:12.5px;font-weight:500;color:var(--ink-muted)}}
@media (max-width:720px){.pj-row{grid-template-columns:10px minmax(0,1fr) 90px}.pj-row small,.pj-row .pj-st{display:none}.pj-two{grid-template-columns:1fr}}
/* Send to client before every post is Ready: only the Ready posts go (public/posts.js sendWarn) */
html body .ps-warn:not(#_){display:grid;gap:6px;margin:10px 0 0;padding:12px 14px;border-radius:12px;background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--ink);font-size:13.5px;max-width:720px}
html body .ps-warn b:not(#_){font-weight:600;font-size:14.5px}
html body .ps-warn.ok:not(#_){background:var(--surface);border-color:var(--border-strong)}
html body .ps-warn .ps-wdo:not(#_){display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
html body .ps-warn .ps-wl:not(#_){margin:0;padding-inline-start:18px;display:grid;gap:4px;font-size:13.5px;line-height:1.45}html body .ps-warn .ps-wl b:not(#_){font-size:13.5px}
/* The month's checklist in the Planner (public/posts.js ckHtml): a small block on the right of the month's bar on a wide screen;
   narrower, only its heading and bar, opened by pressing the heading */
html body .ps-top.has-ck:not(#_){display:grid;grid-template-columns:minmax(0,1fr) 290px;align-items:start;gap:16px}
html body .ps-tmain:not(#_){display:flex;flex-direction:column;gap:12px;min-width:0}
html body .ps-ck:not(#_){background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:6px;max-height:300px;overflow:auto}
html body .ps-ckh:not(#_){all:unset;cursor:pointer;display:flex;align-items:baseline;gap:8px}
html body .ps-ckh b:not(#_){font-size:14px;font-weight:600;color:var(--ink)}
html body .ps-ckh small:not(#_),html body .ps-ckrb:not(#_){font-size:12px;color:var(--ink-muted)}
html body .ps-ckl:not(#_){display:grid;gap:6px}
html body .ps-ckr:not(#_){display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;font-size:13px;color:var(--ink);cursor:pointer}
html body .ps-ckr input:not(#_){margin-top:2px}
html body .ps-ckr small:not(#_){display:block;font-size:11.5px;color:var(--ink-muted)}
html body .ps-ckr small.late:not(#_){color:var(--warn-ink)}
html body .ps-ckr.done span:not(#_){color:var(--ink-muted);text-decoration:line-through}
html body .ps-ckm:not(#_){all:unset;cursor:pointer;font-size:12px;color:var(--ink-muted);text-decoration:underline}
@media (max-width:1199px){html body .ps-top.has-ck:not(#_){grid-template-columns:1fr}html body .ps-ck:not(.open):not(#_) .ps-ckl,html body .ps-ck:not(.open):not(#_) .ps-ckm,html body .ps-ck:not(.open):not(#_) .ps-ckrb{display:none}}
html body .ps-kas:not(#_){margin:0}
/* The sort arrow floats over the top edge of the column title, centred (Rami, October 2026). The list's own box (which scrolls
   sideways) would cut off its top half, so the arrow shown is a copy on top of the page (public/lists.js, .lt-arf), placed over the
   title the pointer is on; the one inside the title stays hidden. */
html body .lt-h .lt-ar:not(#_):not(#_):not(#_):not(#_){visibility:hidden}
html body .lt-arf:not(#_){position:fixed;z-index:60;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;pointer-events:none;
  background:var(--surface-sunken);border:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
html body .lt-arf:not(#_)::before,html body .lt-arf:not(#_)::after{content:"";width:0;height:0;border-inline:4.5px solid transparent}
html body .lt-arf:not(#_)::before{border-bottom:5px solid var(--ink)}
html body .lt-arf:not(#_)::after{border-top:5px solid var(--ink)}
html body .lt-arf[data-s="ascending"]:not(#_)::after,html body .lt-arf[data-s="descending"]:not(#_)::before{opacity:.25}

/* A shoot's checklist (public/work.js shootCk): lines from Workspace settings › Checklists › Shoot, with suggested days counted back
   from the shoot day; and its progress in the Shoots list */
html body .sh-ckb:not(#_){display:grid;gap:8px}
html body .sh-ckh:not(#_){display:flex;align-items:baseline;justify-content:space-between;gap:8px}
html body .sh-ckh h3:not(#_){margin:0}
html body .sh-ckh small:not(#_),html body .sh-ckr:not(#_){font-size:12px;color:var(--ink-muted)}
html body .sh-ckbar:not(#_){height:4px;border-radius:2px;background:var(--surface-sunken);overflow:hidden}
html body .sh-ckbar i:not(#_){display:block;height:100%;background:var(--ok-ink,#1f8a4c);border-radius:2px}
html body .sh-ckl:not(#_){list-style:none;margin:0;padding:0;display:grid;gap:8px}
html body .sh-ckl li:not(#_){display:grid;gap:2px}
html body .sh-ckl label:not(#_){display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;font-size:13.5px;color:var(--ink);cursor:pointer}
html body .sh-ckl label input:not(#_){margin-top:2px}
html body .sh-ckl small:not(#_){padding-inline-start:26px;font-size:11.5px;color:var(--ink-muted)}
html body .sh-ckl li.done span:not(#_){color:var(--ink-muted);text-decoration:line-through}
html body .sh-ckl li.behind small:not(#_){color:var(--warn-ink)}
html body a.sh-ck:not(#_){font-size:13px;color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums}
html body a.sh-ck.all:not(#_){color:var(--ok-ink,#1f8a4c);font-weight:600}
/* After the shoot (public/work.js handOver, editCard, linksCard; Rami, 21 October 2026): each track's button, the shoot's editing
   (every video and the photos, Send for review, Approve all), and every link of the shoot in one place */
html body .sh-ed:not(#_){display:grid;gap:10px;margin-top:var(--space-3,12px)}
html body .sh-ejl:not(#_),html body .sh-links ul:not(#_){list-style:none;margin:0;padding:0;display:grid;gap:6px}
html body .sh-ej:not(#_){display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--border)}
html body .sh-ej:last-child:not(#_){border-bottom:0}
html body .sh-ej.off .sh-ejt b:not(#_){color:var(--ink-muted);text-decoration:line-through}
html body .sh-ejt:not(#_){display:grid;gap:1px;flex:1 1 180px;min-width:0}
html body .sh-ejt small:not(#_),html body .sh-send small:not(#_){font-size:12px;color:var(--ink-muted)}
html body .sh-send:not(#_){display:grid;gap:6px;padding:10px 12px;border-radius:var(--radius-md);background:var(--surface-sunken)}
html body .sh-send label:not(#_){display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px}
html body .sh-send label.off:not(#_){color:var(--ink-muted)}
html body .sh-links:not(#_){display:grid;gap:8px}
html body .sh-links h3:not(#_){margin:0}
html body .sh-links li:not(#_){display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px}
html body .sh-links li span:not(#_){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the Shoot feed (public/work.js feedView): one stream across all clients, newest first, each entry with its links and replies */
html body .sf:not(#_){display:grid;gap:10px;padding:var(--space-3,12px) 0;max-width:760px}
html body .sf-f:not(#_){display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-muted)}
html body .sf-e:not(#_){display:grid;gap:6px;padding:12px 14px;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--border)}
html body .sf-e header:not(#_){display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html body .sf-e header small:not(#_),html body .sf-rl small:not(#_){font-size:12px;color:var(--ink-muted)}
html body .sf-e p:not(#_){margin:0;font-size:13.5px}
html body .sf-w a:not(#_){font-weight:600;color:var(--ink)}
html body .sf-links:not(#_){display:flex;gap:6px;flex-wrap:wrap}
html body .sf-rl:not(#_){list-style:none;margin:0;padding:6px 0 0 10px;display:grid;gap:4px;font-size:13px;border-inline-start:2px solid var(--border)}
html body .sf-r:not(#_){display:flex;gap:6px}
html body .sf-r input:not(#_){flex:1;min-width:0}

/* A shoot's video list as lines (public/work.js videoRows): each video becomes its own job for the video editor */
html body .sh-vids:not(#_){display:grid;gap:8px;margin:0 0 12px}
html body .sh-vh:not(#_){display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
html body .sh-vh b:not(#_){font-size:13.5px;font-weight:600}
html body .sh-vh small:not(#_){font-size:12px;color:var(--ink-muted)}
html body .sh-vl:not(#_){display:grid;gap:6px}
html body .sh-vid:not(#_){display:grid;grid-template-columns:22px minmax(0,1.2fr) minmax(0,1fr) 170px;gap:8px;align-items:center}
html body .sh-vid > .wk-tag:not(#_),html body .sh-vid > .sh-vx:not(#_){justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis}
html body .sh-vids > [data-vadd]:not(#_){justify-self:start}
html body .sh-vn:not(#_){font-size:12px;color:var(--ink-muted);text-align:end;font-variant-numeric:tabular-nums}
html body .sh-vid .wk-tag:not(#_){white-space:nowrap;text-decoration:none}
@media (max-width:720px){html body .sh-vid:not(#_){grid-template-columns:22px minmax(0,1fr) auto}html body .sh-vid [data-vno]:not(#_){grid-column:2/4;grid-row:2}}
html body .sh-vid input:not(#_):not(#_){width:100%;min-width:0}
/* ---------- the page of one piece of work: a shoot, a Social media month, a branding project (public/kit.js itemHead) ----------
   One shape for all three (Rami, October 2026): header (where you are, name, status, client | the date that matters, the main button,
   ⋯), the strip (a progress bar, or a month's status tiles), Ask Kasper, then the work on the left and Checklist, Details and
   Activity on the right */
html body .ip-head:not(#_){display:grid;gap:6px;padding-bottom:12px;border-bottom:1px solid var(--border);margin-bottom:12px}
html body .ip-top:not(#_){display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
html body .ip-ttl:not(#_){display:grid;gap:2px;min-width:0;flex:1 1 320px}
html body .ip-tl:not(#_){display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
html body .ip-tl h1:not(#_){margin:0}
html body .ip-cl:not(#_){font-size:13.5px;color:var(--ink-muted);text-decoration:underline;text-underline-offset:2px;justify-self:start}
html body .ip-acts:not(#_){display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
html body .ip-date:not(#_){display:grid;text-align:end;line-height:1.25;font-size:12px;color:var(--ink-muted)}
html body .ip-date b:not(#_){font-size:14px;color:var(--ink);font-weight:600}
html body .ip-date small:not(#_){font-size:12px}
html body .ip-more:not(#_){position:relative}
html body .ip-more>summary:not(#_){list-style:none;cursor:pointer;min-width:34px;text-align:center}
html body .ip-more>summary:not(#_)::-webkit-details-marker{display:none}
html body .ip-menu:not(#_){position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:190px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-menu);padding:4px;display:grid}
html body .ip-menu>:is(a,button):not(#_){all:unset;cursor:pointer;padding:8px 10px;border-radius:6px;font-size:13.5px;color:var(--ink)}
html body .ip-menu>:is(a,button):not(#_):hover,html body .ip-menu>:is(a,button):not(#_):focus-visible{background:var(--surface-hover)}
html body .ip-kas:not(#_){margin:10px 0 2px}
html body .ip-side:not(#_){display:grid;gap:16px;align-content:start;min-width:0}
html body .ip-side .bk-danger:not(#_){margin:0}
/* the tabs over the work: one look on every page of this kind */
html body .ip-tabs:not(#_){display:flex;gap:var(--space-4);border-bottom:1px solid var(--border);align-items:center;overflow-x:auto;scrollbar-width:none}
html body .ip-tabs>button:not(#_){all:unset;cursor:pointer;padding:8px 2px;font-size:13.5px;color:var(--ink-muted);white-space:nowrap;box-shadow:inset 0 -2px 0 transparent}
html body .ip-tabs>button.on:not(#_){color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--focus)}
html body .ip-tabs>button:not(#_):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:720px){html body .ip-acts:not(#_){justify-content:flex-start;width:100%}html body .ip-date:not(#_){text-align:start;margin-right:auto}}
html body .ip-tabrow:not(#_){display:flex;align-items:center;gap:12px;min-width:0}
html body .ip-tabrow>.ip-tabs:not(#_){flex:1;min-width:0}
html body .sd-lk>span small:not(#_){font-weight:400;color:var(--ink-muted)}
html body .ip-tl h1 .wk-title:not(#_):not(#_){field-sizing:content;width:auto;min-width:10ch;max-width:100%}
html body .sh-grid .sd-main textarea[data-st="videolist"]:not(#_):not(#_):not(#_){min-height:110px!important;height:110px}
/* the Social media month's status tiles (public/posts.js monthBar): separate checks, side by side, no numbers */
html body .ps-tiles:not(#_){display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
html body .ps-tiles.four:not(#_){grid-template-columns:repeat(4,minmax(0,1fr))}
html body .ps-tile:not(#_){all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:3px;align-content:start;padding:9px 11px;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--surface);min-width:0}
html body .ps-tile:not(#_):hover{border-color:var(--border-strong)}
html body .ps-tile:not(#_):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
html body .ps-tile.ok:not(#_){background:var(--accent-green-soft);border-color:transparent}
html body .ps-tile.work:not(#_){background:var(--accent-orange-soft);border-color:transparent}
html body .ps-th:not(#_){display:flex;justify-content:space-between;align-items:center;gap:6px}
html body .ps-th b:not(#_){font-size:13px;font-weight:600;color:var(--ink)}
html body .ps-tile small:not(#_){font-size:12px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .ps-tk:not(#_){width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:700;flex:none;border:1.5px dashed var(--border-strong)}
html body .ps-tile.ok .ps-tk:not(#_){background:var(--accent-green);border:0;color:var(--surface)}
html body .ps-tile.work .ps-tk:not(#_){border:2px solid var(--status-working-fg)}
html body .ps-tbar:not(#_){height:4px;border-radius:2px;background:var(--status-idle-fill);overflow:hidden}
html body .ps-tbar i:not(#_){display:block;height:100%;background:var(--status-working-fg)}
@media (max-width:720px){html body .ps-tiles:not(#_),html body .ps-tiles.four:not(#_){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the month's right-hand column, and folding it away */
html body .ps-grid.fold:not(#_):not(#_){grid-template-columns:minmax(0,1fr)}
html body .ps-ckc .ps-ck:not(#_):not(#_){border:0;padding:0;max-height:none;background:none}
html body .ps-det:not(#_){display:grid;grid-template-columns:1fr 1fr;gap:10px}
html body .ps-det>div:not(#_){display:grid;gap:3px;min-width:0}
html body .ps-det .wide:not(#_){grid-column:1/-1}
html body .ps-det span:not(#_){font-size:12px;color:var(--ink-muted)}
html body .ps-det b:not(#_){font-size:13.5px;font-weight:500}
html body .ps-det .ps-share:not(#_){justify-self:start}
html body .ps-fold:not(#_){margin-left:auto}
html body .ip-grid:not(#_){margin-top:14px}
html body .ps-acts:not(#_){display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
@media (max-width:1000px){html body .ps-fold:not(#_){display:none}}
/* the tabs over the work, V2 look (Rami, October 2026, from his reference): the tabs sit on a darker strip; the one picked is raised in
   the page's own colour, with rounded top corners and the strip curving into it at the bottom, so it reads as joined to what is below;
   a tab under the pointer gets a soft pill. One look on the shoot, the month and the branding project. */
html body :is(.ip-tabrow,.ip-tabs:not(.ip-tabrow .ip-tabs)):not(#_):not(#_){background:var(--surface-sunken);border-radius:10px 10px 0 0;border-bottom:1px solid var(--border);margin-bottom:12px}
html body .ip-tabrow:not(#_):not(#_){padding-right:8px}
html body .ip-tabrow .ip-tabs:not(#_):not(#_){border-bottom:0;background:none}
html body .ip-tabs:not(#_):not(#_){gap:4px;padding:6px 12px 0;align-items:flex-end;overflow-y:hidden}
html body .ip-tabs>button:not(#_):not(#_){position:relative;padding:8px 14px;border-radius:9px;box-shadow:none;color:var(--ink-muted);font-weight:500;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
html body .ip-tabs>button:not(.on):not(#_):not(#_):hover{background:var(--surface-hover);color:var(--ink)}
html body .ip-tabs>button.on:not(#_):not(#_){background:var(--surface);color:var(--ink);font-weight:600;border-radius:10px 10px 0 0;box-shadow:0 -1px 0 var(--border),1px 0 0 var(--border),-1px 0 0 var(--border);margin-bottom:-1px;padding-bottom:9px;z-index:1}
html body .ip-tabs>button.on:not(#_):not(#_)::before,html body .ip-tabs>button.on:not(#_):not(#_)::after{content:"";position:absolute;bottom:0;width:10px;height:10px;pointer-events:none}
html body .ip-tabs>button.on:not(#_):not(#_)::before{left:-10px;background:radial-gradient(circle at 0 0,transparent 9.5px,var(--surface) 10px)}
html body .ip-tabs>button.on:not(#_):not(#_)::after{right:-10px;background:radial-gradient(circle at 100% 0,transparent 9.5px,var(--surface) 10px)}
html body .ip-tabs>button:first-child.on:not(#_):not(#_){margin-left:2px}

/* Lists on a phone (Rami, October 2026: "the mobile version needs lots of work … make it functional"): never a wide table to
   scroll sideways. Each row is short: its name with its status at the right, the client and the date under it as plain text, and
   a tap anywhere on it opens it (lists.js marks the parts: data-ph t, s, m). Column titles, checkboxes and the other columns hide;
   they are all on the item's own page. */
@media (max-width:860px){
  html body [data-phl]:not(#_):not(#_){min-width:0!important;width:auto!important;overflow-x:visible!important}
  html body [data-phl] [data-phh]:not(#_):not(#_):not(#_),html body [data-phl] .lt-hclone:not(#_):not(#_):not(#_){display:none!important}
  html body [data-phl] [data-phr]:not(#_):not(#_):not(#_){display:grid!important;grid-template-columns:auto auto auto auto minmax(0,1fr) auto!important;grid-auto-flow:row;align-items:center;column-gap:0;row-gap:3px;min-width:0!important;width:auto!important;height:auto!important;min-height:52px!important;padding:9px 12px!important;cursor:pointer}
  html body [data-phl] [data-phr][hidden]:not(#_):not(#_):not(#_){display:none!important}
  html body [data-phl] [data-phr]>*:not([data-ph]):not(#_):not(#_):not(#_){display:none!important}
  html body [data-phl] [data-phr]>*:not(#_):not(#_):not(#_){position:static!important;border:0!important;min-height:0!important;height:auto!important;padding:0!important;background:none!important;box-shadow:none!important;width:auto!important;min-width:0}
  html body [data-phl] [data-phr]>[data-ph=t]:not(#_):not(#_):not(#_){grid-column:1/6;grid-row:1;display:flex!important;align-items:center;gap:6px;font-size:15px;line-height:1.3;overflow:hidden}
  html body [data-phl] [data-phr]>[data-ph=t] :is(a,b,.mw-open):not(#_):not(#_){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  html body [data-phl] [data-phr]>[data-ph=t] :is(.wk-ren,.br-exp,small):not(#_):not(#_){display:none!important}
  html body [data-phl] [data-phr]>[data-ph=s]:not(#_):not(#_):not(#_){grid-column:6;grid-row:1/3;display:flex!important;align-items:center;justify-content:flex-end;gap:6px;margin-inline-start:10px!important}
  html body [data-phl] [data-phr]>[data-ph=s]:has(>*+*):not(#_):not(#_):not(#_){grid-column:1/-1;grid-row:3;justify-content:flex-start;margin:4px 0 0!important}
  html body [data-phl] [data-phr]>[data-ph=s] select:not(#_):not(#_):not(#_):not(#_){min-width:0!important;max-width:132px;height:30px!important;min-height:0!important;font-size:12.5px!important;padding-block:0!important}
  html body [data-phl] [data-phr]>[data-ph=s] .btn-s:not(#_):not(#_){min-height:32px;padding:0 12px;font-size:13px}
  html body [data-phl] [data-phr]>:is([data-ph=m],[data-ph=f]):not(#_):not(#_):not(#_){grid-row:2!important;grid-column:auto!important;display:inline-flex!important;align-items:center;gap:4px;font-size:12.5px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;max-width:100%;pointer-events:none}
  html body [data-phl] [data-phr]>[data-ph=m]>*:not(#_):not(#_){display:none!important}
  html body [data-phl] [data-phr]>[data-ph=m]:not(#_):not(#_):not(#_){font-size:0!important}
  html body [data-phl] [data-phr]>[data-ph=m]:not(#_):not(#_):not(#_)::before{content:attr(data-pht);display:block!important;overflow:hidden;text-overflow:ellipsis;font-weight:400;font-size:12.5px!important;color:inherit;letter-spacing:0;text-transform:none}
  html body [data-phl] [data-phr]>:is([data-ph=m],[data-ph=f])~:is([data-ph=m],[data-ph=f]):not(#_):not(#_):not(#_){margin-inline-start:8px!important}
  html body [data-phl] [data-phr]>[data-ph=m]~[data-ph=m]:not(#_):not(#_):not(#_)::before{content:"·\00a0\00a0" attr(data-pht)}
  html body [data-phl] [data-phr]>[data-ph=f] .wk-tag:not(#_):not(#_):not(#_){width:auto!important;min-width:0!important;flex:none!important;height:20px!important;font-size:11.5px!important;padding:0 7px!important}
  html body [data-phl] [data-phr]>[data-ph=f] .wk-tag~.wk-tag:not(#_):not(#_):not(#_){display:none!important}
  /* the "+ New …" row: just the name to type (and the client, where the list asks for one) */
  html body [data-phl] [data-pha]:not(#_):not(#_):not(#_){grid-template-columns:minmax(0,1fr)!important;cursor:auto}
  html body [data-phl] [data-pha]>[data-ph=t]:not(#_):not(#_):not(#_){grid-column:1}
  html body [data-phl] [data-pha]>[data-ph=t] input:not(#_):not(#_){width:100%}
  html body [data-phl] [data-pha]>[data-ph=c]:not(#_):not(#_):not(#_){grid-column:1;grid-row:2;display:block!important}
  html body [data-phl] [data-pha]>[data-ph=c] select:not(#_):not(#_){width:100%!important;max-width:none}
  html body [data-phl] [data-pha]:has([data-ph=t] input:placeholder-shown)>[data-ph=c]:not(#_):not(#_):not(#_){display:none!important}
}
/* Production on a phone: a job's status and who share one line; Take over gets its own line under them, so nothing is squeezed to
   an empty box. The "+ New job" row is only the name to type (the type, client and the rest are on the job once made, or use +). */
@media (max-width:860px){
  html body .jc-a>.wk-give:not(#_):not(#_){order:2;flex:1 0 100%;height:34px}
  html body .jc-a>.jc-f:not(#_):not(#_){order:3}
  html body .jc-a>:is(.wk-tag,.wk-st):not(#_):not(#_){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html body .jc-list .bk-add:not(#_):not(#_):not(#_){display:block!important;min-width:0!important;padding:10px 12px!important}
  html body .jc-list .bk-add>:not(.bk-add-n):not(#_):not(#_):not(#_){display:none!important}
  html body .jc-list .bk-add>.bk-add-n input:not(#_):not(#_){width:100%}
}
/* A branding project on a phone: each stage and task is its name and status; who, due and notes are in its panel (tap it) */
@media (max-width:860px){
  html body .br-tbl:not(#_):not(#_){overflow-x:visible}
  html body .br-tin:not(#_):not(#_):not(#_){min-width:0!important}
  html body .br-r:not(.br-other):not(#_):not(#_):not(#_){grid-template-columns:minmax(0,1fr) 120px!important;gap:8px}
  html body .br-r:not(.br-other)>:nth-child(n+3):not(#_):not(#_):not(#_){display:none!important}
  html body .br-r .br-sel:not(#_):not(#_){min-width:0}
  html body .jc-a>select.wk-st:not(#_):not(#_):not(#_){flex:1 1 0!important;width:auto!important;min-width:0!important;max-width:none!important;color:inherit!important;padding:0 10px!important}
}
/* On a phone the list's tools wait behind the floating Filter button, pinned in a panel under the top bar when it is pressed
   (app.js phSheet), and an item page's name is in the top bar instead of a big title on the page (app.js ipTitle; tap the top
   bar's name to rename it) */
@media (max-width:860px){
  html body.fl-on :is(aside.crail,.page.on .bk-bar .bk-r,.page.on .bk-bar .bk-sub):not(.ph-pin):not(#_):not(#_){display:none!important}
  html body.fl-on .page.on .bk-bar:not(:has(>.bk-l)):not(:has(.ph-pin)):not(#_):not(#_){display:none!important}
  html body.fl-on .page.on .bk-bar:not(#_):not(#_){min-height:0;padding-block:4px!important}
  html body .ph-sheet:not(#_){position:fixed;left:10px;right:10px;top:calc(env(safe-area-inset-top,0px) + 64px);z-index:60;background:var(--surface);border-radius:18px;box-shadow:var(--shadow-modal);padding:12px 14px}
  html body .ph-sheet .ph-sh:not(#_){display:flex;align-items:center;justify-content:space-between}
  html body .ph-pin:not(#_):not(#_):not(#_):not(#_){position:fixed!important;left:24px!important;right:24px!important;bottom:auto!important;width:auto!important;height:auto!important;min-height:0!important;max-height:none!important;z-index:61!important;display:flex!important;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-start;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;overflow:visible!important;grid-row:auto!important;grid-column:auto!important;inset-inline:24px!important}
  html body aside.crail.ph-pin>:not(.crail-m):not(#_):not(#_):not(#_){display:none!important}
  html body .ph-pin .crail-m:not(#_):not(#_):not(#_){display:flex!important;width:100%;gap:10px;align-items:center;margin:0!important}
  html body .ph-pin .crail-m select:not(#_):not(#_):not(#_){flex:1;width:auto!important}
  html body .ph-pin :is(.bk-q,.lt-cw,.ct-colw):not(#_):not(#_):not(#_){display:none!important}
  html body .ph-pin>*:not(#_):not(#_){margin:0!important}
  html body .ph-pin .lt-pop:not(#_):not(#_){max-height:min(55vh,460px)}
  html body.ip-named:not(.ip-ren) .page.on .ip-head .ip-tl h1:not(#_):not(#_){display:none}
  html body.ip-named .page.on .ip-head .ip-crumb:not(#_):not(#_){display:none}
  html body.ip-named #mTitle[data-ip]:not(#_){cursor:text}
}
@media (max-width:860px){
  html body.ip-named .page.on .ip-ttl:not(#_):not(#_){display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  html body.ip-named .page.on .ip-date:not(#_):not(#_){padding:0!important;margin:0!important}
}
@media (max-width:860px){html body.fl-on .page.on .ph-pin :is(.bk-f .wk-ck>button:first-child,.lt-fb,[data-svf],[data-lf=filt],[data-lf=open]):not(#_):not(#_):not(#_){display:inline-flex!important}}
@media (max-width:860px){html body #flF.dot:not(#_){position:relative}html body #flF.dot:not(#_)::after{content:"";position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--accent-rose)}}
/* Kasper floats over the page (Rami, 9 October 2026: "when Kasper expands, the chat box shouldn't push away the content area. it
   should be overlayed on top of them floating on top"): the page keeps its width; he is a card on top of it, with a shadow */
@media (min-width:1200px){
  html.sp-docked body main:not(#_):not(#_){margin-right:0!important}
  html.sp-docked body aside.sp.sp-dock:not(#_):not(#_){box-shadow:var(--shadow-modal)!important}
}
@media (min-width:1200px){html.sp-docked body .sp-back:not(#_):not(#_){background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;pointer-events:none!important}}
/* An item's page head (Rami, 9 October 2026): "Shoots › the shoot's name", the area a quiet link back to its list; its status and
   ⋯ at the top of its Details card (HubKit.detHead) */
html body .ip-head:not(#_):not(#_){padding-bottom:10px}
html body .ip-head .ip-top:not(#_):not(#_){display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
html body .ip-head .ip-tl:not(#_):not(#_){display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto;flex-wrap:nowrap}
html body .ip-head .ip-up:not(#_):not(#_){font-size:22px;font-weight:600;color:var(--ink-muted);text-decoration:none;white-space:nowrap;border-radius:6px;padding:0 2px}
html body .ip-head .ip-up:hover:not(#_):not(#_){color:var(--ink);text-decoration:underline;text-underline-offset:4px}
html body .ip-head .ip-sep:not(#_):not(#_){font-style:normal;font-size:22px;color:var(--ink-subtle)}
html body .ip-head .ip-tl h1:not(#_):not(#_){font-size:22px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .ip-dh:not(#_){display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
html body .ip-dh h3:not(#_):not(#_){margin:0}
html body .ip-dh .ip-dhr:not(#_){display:flex;align-items:center;gap:8px}
html body .ip-dh .bk-stsel:not(#_):not(#_){width:auto;min-width:130px;height:32px!important}
@media (max-width:860px){html body.ip-named .page.on .ip-head :is(.ip-up,.ip-sep):not(#_):not(#_){display:none}html body.ip-named .page.on .ip-head:not(#_):not(#_){padding:0;border:0;margin:0}}
html body .br-facts .br-dl:not(#_){display:flex;align-items:center;gap:8px;flex-wrap:wrap;grid-column:1/-1}

/* an item page's side column folded away (kit.js FOLDBTN; Rami, 9 October 2026): the work takes the full width */
html[data-ipfold="1"] body .ip-grid:not(#_):not(#_){grid-template-columns:minmax(0,1fr) auto}
html[data-ipfold="1"] body .ip-grid>.ip-side:not(#_):not(#_){display:none}
/* the Details column's own switches (Rami, 29 October 2026): Hide at its top; folded, a Details tab along the page's right edge */
html body .ip-grid>.ip-open:not(#_){display:none}
html[data-ipfold="1"] body .ip-grid>.ip-open:not(#_){display:flex;flex-direction:column;align-items:center;gap:8px;position:sticky;top:16px;align-self:start;width:40px;padding:14px 0;border:0;border-radius:999px;background:var(--panel);color:var(--ink);cursor:pointer;font:inherit}
html[data-ipfold="1"] body .ip-grid>.ip-open:not(#_):hover{background:var(--hover,var(--panel-2))}
html body .ip-open span:not(#_){writing-mode:vertical-rl;transform:rotate(180deg);font-size:13px;font-weight:600;letter-spacing:.02em}
html body .ip-open small:not(#_){writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;color:var(--muted)}
html body :is(.ip-open,.ip-hide) svg:not(#_){width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html body .ip-hide:not(#_){display:inline-flex;align-items:center;gap:4px}
@media (max-width:1100px){html body :is(.ip-hide,.ip-grid>.ip-open):not(#_):not(#_){display:none}html[data-ipfold="1"] body .ip-grid>.ip-side:not(#_):not(#_){display:grid}html[data-ipfold="1"] body .ip-grid:not(#_):not(#_){grid-template-columns:minmax(0,1fr)}}
/* a Social media month's team lead checks, in its Details box (posts.js monthSide; Rami, 9 October 2026): press the circle to pass */
html body .ps-cks:not(#_){display:grid;gap:4px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
html body .ps-lckh:not(#_){display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}
html body .ps-lckh>span:not(#_){font-size:12px;color:var(--ink-muted)}
html body .ps-lck:not(#_){all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;padding:6px 6px;border-radius:var(--radius-sm);font-size:13.5px}
html body .ps-lck:not(#_):hover{background:var(--surface-hover)}
html body .ps-lck:not(#_):focus-visible{outline:2px solid var(--focus);outline-offset:1px}
html body .ps-lck[disabled]:not(#_){cursor:default;background:none}
html body .ps-lck b:not(#_){font-weight:500}
html body .ps-lck small:not(#_){font-size:12px;color:var(--ink-muted);text-align:end}
html body .ps-lck i:not(#_){display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border-strong);font-style:normal;font-size:11px;font-weight:700;color:var(--surface);transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
html body .ps-lck:hover:not([disabled]) i:not(#_){border-color:var(--accent-green)}
html body .ps-lck.ok i:not(#_){background:var(--accent-green);border-color:var(--accent-green)}
html body .ps-lck.changes i:not(#_){background:var(--status-stuck-fg);border-color:var(--status-stuck-fg)}
html body .ps-lck.waiting i:not(#_){border-color:var(--status-working-fg);border-width:2px}
html body .ps-air:not(#_){margin-top:12px}
/* a month's checklist: every step stays, the ticked ones struck through */
html body .ps-ckr.done>span:not(#_){color:var(--ink-muted);text-decoration:line-through}
html body .ps-tn:not(#_){font-weight:400;color:var(--ink-muted);margin-inline-start:4px;font-size:12px}
/* the brief and the plan written under their tabs on the page */
html body .mb-inl:not(#_){display:grid;gap:14px;padding-top:12px;max-width:820px}
html body .mb-inl .ed-f:not(#_):not(#_){margin:0}
/* the month's campaigns under their tab */
html body .ps-camps:not(#_){display:grid;gap:12px;padding-top:12px;justify-items:start}
html body .ps-cl:not(#_){width:100%;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
html body .ps-cr:not(#_){display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.6fr) minmax(0,.8fr) minmax(0,1fr);gap:10px;align-items:center;padding:8px 12px;border-top:1px solid var(--border);font-size:13.5px}
html body .ps-cr.head:not(#_){border-top:0;background:var(--surface-2,var(--page));font-size:12px;color:var(--ink-muted);font-weight:600}
html body .ps-cr .cp-name:not(#_){all:unset;cursor:pointer}
html body .ps-cr .cp-name:not(#_):hover b{text-decoration:underline}
@media (max-width:720px){html body .ps-cr:not(#_){grid-template-columns:1fr 1fr}html body .ps-cr.head:not(#_){display:none}}
/* Kasper's button floats over the top right corner: the item header keeps clear of it (the side column's switch sits there) */
@media (min-width:1101px){html body .ip-top:not(#_){padding-inline-end:52px}}
/* the tabs on a shoot, a month and a branding project (Rami, 9 October 2026, from his picture): the strip runs edge to edge across
   the top of its card, the picked tab raised in the card's own colour; the same padding on all three cards */
html body .card:has(>:is(.ip-tabrow,.ip-tabs):first-child):not(#_):not(#_){padding:0 18px 18px}
html body .card>:is(.ip-tabrow,.ip-tabs:not(.ip-tabrow .ip-tabs)):first-child:not(#_):not(#_):not(#_){margin:0 -18px 18px;border-top-left-radius:inherit;border-top-right-radius:inherit;padding-top:10px}
html body .card>.ip-tabrow:first-child:not(#_):not(#_):not(#_){padding-right:12px}
html body .card>:is(.ip-tabrow,.ip-tabs):first-child .ip-tabs:not(#_):not(#_):not(#_),html body .card>.ip-tabs:first-child:not(#_):not(#_):not(#_){padding-left:14px;padding-top:0}
html body .card>:is(.ip-tabrow,.ip-tabs):first-child:not(#_):not(#_):not(#_){padding-top:10px}
html body .ip-tabs>button:not(#_):not(#_):not(#_){padding:9px 18px;font-size:14.5px}
html body .ip-tabs>button.on:not(#_):not(#_):not(#_){padding-bottom:10px}
/* tabs, second pass (Rami, 9 October 2026): no grey band behind the tabs. The tabs sit on the page itself, above their box; the picked
   tab is white, the same white as the box under it, and joins it. One look on a shoot, a month and a branding project. */
html body .card:has(>:is(.ip-tabrow,.ip-tabs):first-child):not(#_):not(#_):not(#_){border-top-color:transparent;border-top-left-radius:0;border-top-right-radius:0;margin-top:0}
html body .card>:is(.ip-tabrow,.ip-tabs:not(.ip-tabrow .ip-tabs)):first-child:not(#_):not(#_):not(#_):not(#_){background:var(--page);border-radius:0;margin-top:-1px;margin-inline:-19px;padding-top:0;box-shadow:0 1px 0 var(--border)}
html body .card>.ip-tabrow:first-child .ip-tabs:not(#_):not(#_):not(#_):not(#_),html body .card>.ip-tabs:first-child:not(#_):not(#_):not(#_):not(#_){padding-left:0;background:none}
html body .card>:is(.ip-tabrow,.ip-tabs):first-child .ip-tabs>button.on:not(#_):not(#_):not(#_),html body .card>.ip-tabs:first-child>button.on:not(#_):not(#_):not(#_){background:var(--surface);box-shadow:0 -1px 0 var(--border),1px 0 0 var(--border),-1px 0 0 var(--border);margin-bottom:-1px;padding-bottom:10px}
html body .card>:is(.ip-tabrow,.ip-tabs):first-child .ip-tabs>button.on:not(#_):not(#_):not(#_)::before,html body .card>:is(.ip-tabrow,.ip-tabs):first-child .ip-tabs>button.on:not(#_):not(#_):not(#_)::after,html body .card>.ip-tabs:first-child>button.on:not(#_):not(#_):not(#_)::before,html body .card>.ip-tabs:first-child>button.on:not(#_):not(#_):not(#_)::after{display:none}
html body .card>:is(.ip-tabrow,.ip-tabs):first-child .ip-tabs>button:not(.on):not(#_):not(#_):not(#_):hover,html body .card>.ip-tabs:first-child>button:not(.on):not(#_):not(#_):not(#_):hover{background:var(--surface-hover);border-radius:9px 9px 0 0}
/* the status at the top of Details looks the same everywhere: a filled block like a shoot's status dropdown */
html body .ip-dhr>.bk-chip:not(#_):not(#_){height:36px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;font:600 14px/20px var(--font-sans);border:0}
/* the month's Send to design and Review the month sit beside List, Calendar and Feed, not on a row of their own (Rami, 30 October 2026:
   more room above the list) */
html body .bk-l .ps-tacts:not(#_){display:inline-flex;gap:8px;align-items:center;margin-inline-start:16px;flex-wrap:wrap}
html body .bk-l .ps-tacts:empty:not(#_){display:none}
/* when they don't fit beside the search and filters (the Details column open), the row wraps rather than cutting a button off */
@media (min-width:861px){html body .bk-bar:has(.ps-tacts):not(#_):not(#_){display:flex;flex-wrap:wrap;align-items:center}html body .bk-bar:has(.ps-tacts)>.bk-l:not(#_):not(#_){overflow:visible;flex:0 1 auto}html body .bk-bar:has(.ps-tacts)>.bk-r:not(#_):not(#_){margin-inline-start:auto}html body .bk-l .ps-tacts>.btn-s:not(#_){white-space:nowrap}}
/* a month's box gets the same white box as a shoot's and a branding project's, so the picked tab joins white content */
html body .card.ps:has(>.ip-tabrow:first-child):not(#_):not(#_):not(#_):not(#_){background:var(--surface)!important;border:1px solid var(--border)!important;border-top-color:transparent!important;padding:0 18px 18px!important}
/* the arrow that folds a picked client's months away in the clients column (rail.js) */
html body .crail-l .crail-mf:not(#_):not(#_){position:absolute;inset-inline-end:26px;top:50%;transform:translateY(-50%);width:22px;height:22px;min-height:0;padding:0!important;display:grid;place-items:center;border:0;background:none;border-radius:6px;color:var(--ink-muted);font-size:11px;cursor:pointer;z-index:2}
html body .crail-l .crail-mf:not(#_):not(#_):hover{background:var(--surface-hover);color:var(--ink)}
/* Production's types under it in the menu (index.html #navShSub): Design, Video, Copy, indented under Production */
html body #app>aside .nav .nav-sub:not(#_){display:grid;gap:1px;margin:1px 0 4px}
html body #app>aside .nav .nav-sub[hidden]:not(#_){display:none}
html body #app>aside .nav .nav-sub a:not(#_){padding-inline-start:44px!important;min-height:30px!important;font-size:13px!important}
html.nav-mini body #app>aside .nav .nav-sub:not(#_){display:none}
/* dragging a column's title to a new place (lists.js moveCol) */
html body.lt-coldrag:not(#_),html body.lt-coldrag *:not(#_){cursor:grabbing!important;user-select:none}
html body .lt-h.lt-dragging:not(#_):not(#_){position:relative;z-index:5;opacity:.85;box-shadow:var(--shadow-md,0 4px 14px rgba(0,0,0,.15));background:var(--surface)!important}
html body .lt-h.lt-dropat:not(#_):not(#_){box-shadow:inset 3px 0 0 var(--focus)}
/* the arrow that folds Production's types (Design, Video, Copy) in the menu; it sits at the end of the Production line */
html body #app>aside .nav:not(#_){position:relative}
html body #app>aside .nav .nav-row:not(#_){position:relative;display:grid}
html body #app>aside .nav .nav-subt:not(#_){all:unset;box-sizing:border-box;position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);width:24px;height:24px;z-index:5!important;display:grid;place-items:center;border-radius:6px;color:var(--side-ink-muted);font-size:11px;cursor:pointer;z-index:2}
html body #app>aside .nav .nav-subt[hidden]:not(#_){display:none}
html body #app>aside .nav .nav-subt:not(#_):hover{background:var(--side-active);color:var(--side-ink)}
html.nav-mini body #app>aside .nav .nav-subt:not(#_){display:none}
/* the Columns picker (lists.js colPop): one line per column, the list scrolls, Show all and Done always in view */
html body .lt-cpop:not(#_):not(#_){display:flex;flex-direction:column;width:270px;max-height:min(70vh,460px);padding:0;overflow:hidden}
html body .lt-cpop .lt-ch:not(#_):not(#_){display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:12px 14px 8px;margin:0;border-bottom:1px solid var(--border)}
html body .lt-cpop .lt-ch b:not(#_){font-size:14px}
html body .lt-cpop .lt-ch small:not(#_){font-size:12px;color:var(--ink-muted)}
html body .lt-cpop .lt-cls:not(#_){flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 6px}
html body .lt-cpop .lt-cl:not(#_):not(#_){display:flex!important;flex-direction:row!important;align-items:center;gap:10px;padding:7px 8px;margin:0;border-radius:8px;font-size:13.5px;line-height:18px;cursor:pointer;color:var(--ink)}
html body .lt-cpop .lt-cl:not(#_):hover{background:var(--surface-hover)}
html body .lt-cpop .lt-cl input:not(#_):not(#_){margin:0;flex:none;width:16px;height:16px}
html body .lt-cpop .lt-cl span:not(#_){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .lt-cpop .lt-pf:not(#_):not(#_){flex:none;display:flex;justify-content:space-between;gap:8px;padding:10px 14px;margin:0;border-top:1px solid var(--border);background:var(--surface)}
/* an item's name in any list works like a post's caption (inline.js): its text is a box to type in (a thin outline on hover), the rest
   of the cell opens the item (it lights up on hover); the pencil goes, the name itself is how you rename it */
@media (min-width:861px){
  html body [data-list] :is(span,div):has(>button[data-ren]):not(#_){cursor:pointer;display:flex!important;align-items:center;min-width:0}
  html body [data-list] :is(span,div):has(>button[data-ren]):not(#_):hover{background:var(--surface-hover)}
  html body [data-list] :is(span,div):has(>button[data-ren])>:is(a,button:not([data-ren])):not(#_){min-width:0;max-width:100%;flex:0 1 auto;text-decoration:none!important;color:inherit}
  html body [data-list] :is(span,div):has(>button[data-ren])>:is(a,button:not([data-ren]))>b:not(#_){display:block;cursor:text;padding:3px 6px;margin-inline-start:-7px;border:1px solid transparent;border-radius:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html body [data-list] :is(span,div):has(>button[data-ren])>:is(a,button:not([data-ren]))>b:not(#_):hover{border-color:var(--border-strong);background:var(--surface)}
  html body [data-list] :is(span,div)>button.wk-ren[data-ren]:not(#_):not(#_){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0}
  html body [data-list] :is(span,div)>button.wk-ren[data-ren]:focus-visible:not(#_):not(#_){position:static;width:auto;height:auto;clip-path:none;opacity:1}
  html body [data-list] .wk-renbox:not(#_):not(#_){field-sizing:content;width:auto!important;min-width:10ch;max-width:100%;font-weight:600;border-radius:6px!important;margin-inline-start:-7px}
}
/* the rule for dropdowns (kit.js DATASEL): every non-status dropdown in a list or Details is a pastel pill, its colour from its value */
html body [data-pv]:not(#_):not(#_):not(#_):not(#_){border:0!important;border-radius:999px!important;background-color:hsl(var(--pv-h,220) 72% 91%)!important;color:#1f2328!important;-webkit-text-fill-color:#1f2328;font-weight:500!important;height:28px!important;min-height:0!important;width:auto!important;max-width:100%;padding-block:0!important;padding-inline:10px 26px!important;background-position:right 8px center!important;box-shadow:none!important;align-self:center}
html body button.pk-mbtn[data-pv]:not(#_):not(#_):not(#_):not(#_){padding-inline:10px!important;display:inline-flex;align-items:center}
html body [data-pv="none"]:not(#_):not(#_):not(#_):not(#_){background-color:var(--surface-sunken)!important;color:var(--ink-muted)!important;-webkit-text-fill-color:var(--ink-muted)}
html body [data-pv]:not(#_):not(#_):not(#_):not(#_):hover{filter:brightness(.97)}
html body [data-pv]:not(#_):not(#_):not(#_):not(#_):focus-visible{outline:2px solid var(--focus)!important;outline-offset:1px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body [data-pv]:not([data-pv="none"]):not(#_):not(#_):not(#_):not(#_){background-color:hsl(var(--pv-h,220) 32% 27%)!important;color:#eef0f3!important;-webkit-text-fill-color:#eef0f3}}
:root[data-theme="dark"] body [data-pv]:not([data-pv="none"]):not(#_):not(#_):not(#_):not(#_){background-color:hsl(var(--pv-h,220) 32% 27%)!important;color:#eef0f3!important;-webkit-text-fill-color:#eef0f3}
/* People in lists as faces (Rami, 9 October 2026): Google picture or initials in the person's colour; the name on hover and in the list */
html body .who-av{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border-radius:50%;background:hsl(var(--pv-h,220) 72% 86%);color:#1f2328;font:600 10.5px/1 var(--font,inherit);font-style:normal;letter-spacing:.02em;overflow:hidden;box-shadow:0 0 0 2px var(--surface,#fff)}
html body .who-av+.who-av{margin-inline-start:-6px}
html body .who-av.off{background:transparent;color:var(--muted,#6b7280);box-shadow:inset 0 0 0 1.5px currentColor}
html body .who-av img{width:100%;height:100%;object-fit:cover;display:block}
html body button.pk-mbtn.who:not(#_):not(#_):not(#_):not(#_){background:transparent!important;padding-inline:6px!important;display:inline-flex!important;align-items:center;width:auto!important;border-radius:999px!important}
html body button.pk-mbtn.who:not(#_):not(#_):not(#_):not(#_):hover{background:var(--surface-sunken)!important}
html body .who-cell{position:relative}
html body select.who-sel:not(#_):not(#_):not(#_):not(#_){color:transparent!important;-webkit-text-fill-color:transparent!important;background-color:transparent!important;background-image:none!important;border-radius:999px!important}
html body select.who-sel:not(#_):not(#_):not(#_):not(#_):hover{background-color:var(--surface-sunken)!important}
html body select.who-sel option{color:var(--ink);-webkit-text-fill-color:currentColor}
html body .who-ov{position:absolute;inset-inline-start:8px;top:50%;transform:translateY(-50%);display:inline-flex;pointer-events:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body .who-av{background:hsl(var(--pv-h,220) 32% 32%);color:#eef0f3}}
:root[data-theme="dark"] body .who-av{background:hsl(var(--pv-h,220) 32% 32%);color:#eef0f3}
/* A person cell in a list, one look everywhere (Rami, 3 November 2026: "the people columns show an outlined border around the avatar that
   behaves inconsistently"): one person or several, picked from a one-person or a several-people dropdown, is just their faces, with no
   outline, starting at the cell's start; nobody is a muted "Nobody" with no pill and no ▾. Pointing at either shows a pale background
   (it opens the list of names). The one-person dropdown is exactly as wide as its faces (--who-n, set by public/pick.js), and the faces
   sit on it, so the same spot is pressed in every row. A person no longer on the Hub is a pale grey face. */
html body :is(.wk-r1,.ct-tr,.jc):not(.head):not(.ct-head2) :is(select.who-sel,button.pk-mbtn.who):not(#_):not(#_):not(#_):not(#_){border:0!important;box-shadow:none!important;outline-offset:0;background-color:transparent!important;background-image:none!important;border-radius:999px!important;height:32px!important;min-height:32px!important;margin-block:0!important;margin-inline:6px 0!important;padding-block:0!important;padding-inline:4px!important;min-width:0!important;flex:none!important;align-self:center!important;vertical-align:middle}
html body :is(.wk-r1,.ct-tr,.jc):not(.head):not(.ct-head2) select.who-sel:not(#_):not(#_):not(#_):not(#_){width:calc(var(--who-n,1) * 18px + 14px)!important;max-width:100%!important}
html body :is(.wk-r1,.ct-tr,.jc):not(.head):not(.ct-head2) button.pk-mbtn.who:not(#_):not(#_):not(#_):not(#_){width:auto!important;max-width:100%!important}
html body :is(.wk-r1,.ct-tr,.jc):not(.head):not(.ct-head2) .who-ov:not(#_){position:static;transform:none;align-self:center;vertical-align:middle;margin-inline-start:calc(-1 * (var(--who-n,1) * 18px + 14px) + 4px)}
html body :is(.wk-r1,.ct-tr,.jc):not(.head):not(.ct-head2) :is(select[data-who],select[data-se="people"],select[data-multi]+button.pk-mbtn)[data-pv="none"]:not(#_):not(#_):not(#_):not(#_){border:0!important;box-shadow:none!important;background-color:transparent!important;background-image:none!important;border-radius:999px!important;height:32px!important;min-height:32px!important;margin-block:0!important;padding-block:0!important;padding-inline:4px!important;width:auto!important;field-sizing:content;min-width:0!important;max-width:100%!important;flex:none!important;align-self:center!important;font-weight:500!important;color:var(--ink-muted)!important;-webkit-text-fill-color:var(--ink-muted)!important;appearance:none!important}
html body :is(.wk-r1,.ct-tr,.jc):not(.head):not(.ct-head2) :is(select.who-sel,button.pk-mbtn.who,select[data-who][data-pv="none"],select[data-se="people"][data-pv="none"],select[data-multi]+button.pk-mbtn[data-pv="none"]):is(:hover,:focus-visible):not(#_):not(#_):not(#_):not(#_){background-color:var(--surface-sunken)!important;filter:none}
html body :is(.wk-r1,.ct-tr,.jc):not(.head):not(.ct-head2) .who-av.off:not(#_){background:var(--surface-sunken);color:var(--ink-muted,#6b7280);box-shadow:0 0 0 2px var(--surface,#fff);opacity:.85}
/* Client page (Rami, 9 October 2026): status and ⋯ at the top right; Details and Checklists in the Overview's side column */
html body .ct-hd-row .ct-hdr{margin-inline-start:auto;display:inline-flex;align-items:center;gap:8px}
html body .ct-hd-row select.ct-hdst:not(#_){height:30px;min-height:0;width:auto;min-width:118px;border-radius:999px;padding-inline:14px;font-weight:600}
html body .ct-grid:not(#_){margin-top:0}
html body .ct-amv{display:block;padding:7px 10px;border-radius:8px;background:var(--surface-sunken);color:var(--ink);text-decoration:none}
html body .ct-amv.none{color:var(--ink-muted)}
html body .ct-amv:hover{text-decoration:underline}
html body .ct-ckb .sh-ckh{display:flex;align-items:center;justify-content:space-between;gap:8px}
html body .ct-ckb .ck-inl{margin-top:12px}
html body .ct-ckb .ck-ib{all:unset;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
html body .ct-ckb .ck-fin{margin-top:10px}
html body .ct-ckb .sh-ckl li.done span,html body .ct-ckb .sh-ckl li.done .ck-ib{text-decoration:line-through;color:var(--ink-muted)}
/* A post's side panel (Rami, 9 October 2026): the design on top, then day · type pill · status, then tabs Post / Comments */
html body .ps-pn .pp-hero{display:block;width:100%;aspect-ratio:4/5;max-height:420px;border-radius:12px;overflow:hidden;background:var(--surface-sunken);margin-bottom:8px}
html body .ps-pn .pp-hero img{width:100%;height:100%;object-fit:cover;display:block}
html body .ps-pn .pp-hero.none{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;border:1.5px dashed var(--border-strong);color:var(--ink-muted);aspect-ratio:16/10}
html body .ps-pn .pp-hero.none span{font-weight:600;color:var(--ink)}
html body .ps-pn .pp-hero.none:hover{background:var(--surface)}
html body .ps-pn>.pp-ths{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
html body .ps-pn>.pp-ths:empty{display:none}
html body .ps-pn .pp-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 14px}
html body .ps-pn .pp-meta .pp-date{width:auto;height:30px;min-height:0;padding-block:0;border-radius:999px}
html body .ps-pn .pp-meta select{width:auto!important;height:30px!important;min-height:0!important;border-radius:999px!important}
html body .ps-pn .pp-meta select.pp-type:not(#_){background-color:hsl(265 72% 92%)!important;color:#1f2328!important;-webkit-text-fill-color:#1f2328;border:0!important;padding-inline:12px 26px!important;font-weight:500}
html body .ps-pn .ip-tabs{margin:0 0 12px}
html body .ps-pn .pp-n{font-style:normal;font-size:11px;background:var(--surface-sunken);border-radius:999px;padding:1px 7px;margin-inline-start:4px}
html body .ps-pn .pp-s>textarea{width:100%}
html body .sp .ps-pn .pp-meta>:is(input,select):not(#_):not(#_):not(#_):not(#_){width:auto!important;max-width:none!important;flex:none!important;height:30px!important;min-height:0!important;border-radius:999px!important;margin:0!important;font-size:13px!important}
html body .sp .ps-pn .pp-meta>input.pp-date:not(#_):not(#_):not(#_):not(#_){padding:0 10px!important;border:0!important;background:var(--surface-sunken)!important}
html body .sp .ps-pn .pp-meta>select.pp-type:not(#_):not(#_):not(#_):not(#_){background-color:hsl(265 72% 92%)!important;border:0!important;padding-inline:12px 26px!important;font-weight:500!important}
html body .sp .ps-pn .ip-tabs:not(#_):not(#_){background:transparent!important}
html body .ps-pn .pp-hero.none{aspect-ratio:16/9}
html body .ps-pn .pp-t.fx{opacity:.65}html body .ps-pn .pp-fbst{margin:0 0 10px}
html body .ps-pn .pp-hero,html body .ps-pn .ip-tabs{box-sizing:border-box;max-width:100%}html body .sp .ps-pn .pp-meta>input.pp-date:not(#_):not(#_):not(#_):not(#_){width:150px!important}
/* A post's caption cell: Open sits at its end, shown while the pointer is over the line (Rami, 9 October 2026: no Open column) */
html body .ps-capc{position:relative;gap:6px}
html body .ps-capc .ps-talk{flex:none}
html body .ps-capc .ps-open:not(#_):not(#_){margin-inline-start:auto;flex:none;height:24px;min-height:0;padding:0 9px;border-radius:6px;border:1px solid var(--border-strong);background:var(--surface);font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;opacity:0;transition:opacity .12s}
html body .ps-r:hover .ps-capc .ps-open,html body .ps-capc .ps-open:focus-visible{opacity:1!important}
html body .ps-capc input.wk-tx:not(#_):not(#_):not(#_){max-width:calc(100% - 64px)}
/* the caption keeps its lines (Grok round 2): one line shows, as wide as the caption; while typing it grows to show them all */
html body .ps-capc textarea.ps-capta:not(#_):not(#_):not(#_){resize:none;overflow:hidden;white-space:pre;line-height:20px;padding:7px 6px;field-sizing:content;width:auto;min-width:3ch;max-width:calc(100% - 64px);flex:0 1 auto;height:auto;min-height:34px;max-height:34px;cursor:text;border-radius:6px!important}
html body .ps-capc textarea.ps-capta:placeholder-shown:not(#_):not(#_):not(#_){min-width:16ch}
html body .ps-capc textarea.ps-capta:focus:not(#_):not(#_):not(#_){overflow:auto;white-space:pre-wrap;flex:1 1 auto;width:100%;max-width:100%;min-height:96px;max-height:260px}
@media (hover:none){html body .ps-capc .ps-open:not(#_):not(#_){opacity:1}}
/* Dropdown lists look like their dropdown (Rami, 9 October 2026): a status opens colour blocks, a pill opens pills */
html body .pk.pk-short .pk-q{position:absolute;opacity:0;height:0;padding:0;border:0;pointer-events:none}
html body .pk:is(.pk-blk,.pk-pil) .pk-l{display:grid;gap:2px;padding:4px}
html body .pk.pk-short:not(.pk-sheet){border-radius:10px} /* a short list is as wide as its words (public/pick.js place), with tight edges (Rami, 31 October 2026) */
html body .pk.pk-blk .pk-o[style]{background:var(--pk-bg);color:var(--pk-fg);border-radius:6px;font-weight:600;text-align:center;min-height:28px;padding:5px 12px}
html body .pk.pk-blk .pk-o[style]:hover,html body .pk.pk-blk .pk-o[style].hi{filter:brightness(.94);outline:2px solid var(--focus,#4b6bfb);outline-offset:-2px}
html body .pk.pk-pil .pk-o{background:none;text-align:start;padding:2px 4px;min-height:0;border-radius:999px}
html body .pk.pk-pil .pk-o>span{display:inline-block;border-radius:999px;padding:4px 10px;line-height:1.35;background:var(--surface-sunken);color:var(--ink-muted)}
html body .pk.pk-pil .pk-o[style]>span{background:hsl(var(--pv-h,220) 72% 91%);color:#1f2328}
html body .pk.pk-pil .pk-o:hover,html body .pk.pk-pil .pk-o.hi{background:var(--field)}
html body .pk:is(.pk-blk,.pk-pil) .pk-o.on::after{content:none}
html body .pk.pk-pil .pk-o.on>span::after,html body .pk.pk-blk .pk-o.on>span::after{content:"  ✓"}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body .pk.pk-pil .pk-o[style]>span{background:hsl(var(--pv-h,220) 32% 27%);color:#eef0f3}}
:root[data-theme="dark"] body .pk.pk-pil .pk-o[style]>span{background:hsl(var(--pv-h,220) 32% 27%);color:#eef0f3}
/* pills keep a little room from their cell's edges */
html body :is(.wk-r1,.ct-tr,.jc):not(.head) [data-pv]:not(#_):not(#_):not(#_):not(#_):not(#_){margin-inline:6px!important;max-width:calc(100% - 12px)!important}
html body :is(.wk-r1,.ct-tr,.jc):not(.head)>span>select[data-pv]:not(#_):not(#_):not(#_):not(#_):not(#_){width:auto!important;field-sizing:content;min-width:0} /* as wide as the word picked, never wider than its column (Rami, 31 October 2026) */
/* side panels never scroll sideways (Rami, 9 October 2026) */
html body .sp .sp-b:not(#_){overflow-x:hidden}
html body .sp .sp-b *{max-width:100%;box-sizing:border-box}
html body .sp .sp-b :is(table,.br-tin){max-width:none}
html body .sp .sp-b:not(#_){grid-template-columns:minmax(0,1fr)}
html body .sp .sp-b>*{min-width:0}
html body .sp :is(.pp-two,.pp-three):not(#_){display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px}
html body .sp .pp-f :is(input,select,textarea):not(#_){min-width:0;width:100%}
/* A branding project's stages and tasks look like every other list (Rami, 9 October 2026) */
html body .br-tbl:not(#_){border:1px solid var(--border);border-radius:12px;background:var(--surface)}
html body .br-head:not(#_):not(#_){text-transform:none;letter-spacing:0;font:600 13px/1.2 var(--font-sans);color:var(--ink);background:var(--surface-sunken);min-height:40px}
html body .br-head>span:first-child:not(#_){background:var(--surface-sunken)}
html body .br-r:not(.br-head) :is(input.find:not([type=checkbox]),select.find:not([data-sv]):not([data-pv])):not(#_):not(#_){border-color:transparent!important;background-color:transparent!important;box-shadow:none!important}
html body .br-r:not(.br-head) :is(input.find:not([type=checkbox]),select.find:not([data-sv]):not([data-pv])):not(#_):not(#_):hover{border-color:var(--border-strong)!important;background-color:var(--surface)!important}
html body .br-r:not(.br-head) :is(input.find,select.find):focus:not(#_):not(#_){border-color:var(--focus,#4b6bfb)!important;background-color:var(--surface)!important}
html body .br-r:not(.br-head):hover{background:var(--surface-hover)}
html body .br-r.br-srow input.find[data-bs="name"]{font-weight:600}
/* the panels for a stage or a task: wider, so their notes and pictures fit */
html body aside.sp.br-wide:not(.sp-dock):not(#_):not(#_){width:min(640px,calc(100vw - 20px))!important;max-width:none!important}
/* package checkboxes, one column per stage */
html body :is(.br-pickgrid,.br-pkgadm):not(#_){display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin:8px 0 12px}
html body :is(.br-pickgrid,.br-pkgadm) .br-pick{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin:0;display:grid;gap:6px;align-content:start}
html body :is(.br-pickgrid,.br-pkgadm) .br-pick legend{font-weight:600;padding:0 4px}
html body :is(.br-pickgrid,.br-pkgadm) .br-pick label{display:flex;gap:8px;align-items:center;font-size:13.5px}
html body .br-det .br-dl .br-dlr{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
html body .br-det .br-dl .br-dlr label{flex:1 1 150px}
html body .br-det .br-dl .br-dlr input{width:100%}
html body .br-det .br-dl .br-book small{flex-basis:100%;color:var(--muted)}
/* Escalate and Feedback open only as tall as what is in them, from the bottom (Rami, 9 October 2026) */
html body aside.sp.sp-fit:not(#_):not(#_){top:auto!important;height:auto!important;max-height:calc(100vh - 20px)!important}
html body aside.sp.sp-fit .sp-b:not(#_){flex:0 1 auto}
/* Home: Your work and Waiting for you, side by side; missions in a column per department */
html body .bf-groups:not(#_){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-content:start}
html body .bf-groups.one{grid-template-columns:minmax(0,1fr)}
html body .bf-gcol{display:grid;gap:8px;align-content:start;background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--border);border-radius:14px;padding:12px;backdrop-filter:blur(6px)}
html body .bf-gcol h3{display:flex;align-items:center;gap:8px;margin:0 0 2px;font:600 14px/1.2 var(--font-sans)}
html body .bf-gcol h3 i{font-style:normal;font-size:12px;background:var(--surface-sunken);border-radius:999px;padding:1px 8px}
html body .bf-gcol .bf-gnone{margin:0;color:var(--ink-muted);font-size:13px}
html body .bf-groups .bf-card:not(#_):not(#_){width:auto!important;min-width:0!important;min-height:0!important;height:auto!important;flex:none!important;display:grid!important;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px!important;border-radius:10px!important}
html body .bf-groups .bf-card .bf-ic{display:none}
html body .bf-groups .bf-card .bf-top{grid-column:1/-1;display:flex;gap:8px;align-items:center}
html body .bf-groups .bf-card .bf-top small{display:none}
html body .bf-groups .bf-card .bf-ti{grid-column:1;font-size:14px}
html body .bf-groups .bf-card .bf-why{grid-column:1;font-size:12.5px}
html body .bf-groups .bf-card .bf-act{grid-column:2;grid-row:2/4;align-self:center}
html body .bf-hero:not(#_){background:radial-gradient(1200px 400px at 0% 0%,color-mix(in srgb,#7a3cff 18%,transparent),transparent 60%),radial-gradient(900px 400px at 100% 100%,color-mix(in srgb,#00b4d8 16%,transparent),transparent 60%),var(--surface)!important;border-radius:20px!important}
html body .bf-hero h2{letter-spacing:-.02em}
html body .ms-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;align-items:start}
html body .ms-gc{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--surface)}
html body .ms-gc h4{margin-top:0}
@media (max-width:860px){html body .bf-groups:not(#_){grid-template-columns:minmax(0,1fr)}}
html body .br-det.sd-grid:not(#_):not(#_){grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
html body .br-det .wide:not(#_){grid-column:1/-1}
html body .br-det .br-dl:not(#_):not(#_){display:grid!important;gap:6px;align-items:start}
html body .br-det .br-dl>span:first-child{font-size:12.5px;color:var(--ink-muted)}
html body .br-det .br-dlr:not(#_){justify-content:flex-start}
html body .br-tin .br-r:not(.br-head) input.find:not([type=checkbox]):not(#_):not(#_):not(#_):not(#_){border-color:transparent!important;background-color:transparent!important;box-shadow:none!important}
html body .br-tin .br-r:not(.br-head) input.find:not([type=checkbox]):hover:not(#_):not(#_):not(#_):not(#_){border-color:var(--border-strong)!important;background-color:var(--surface)!important}
html body .br-tin .br-r:not(.br-head) input.find:not([type=checkbox]):focus:not(#_):not(#_):not(#_):not(#_){border-color:var(--focus,#4b6bfb)!important;background-color:var(--surface)!important}
html body .br-tin .br-r:not(.br-head) .br-name:not(#_):not(#_):not(#_):not(#_):not(#_){border:1px solid transparent!important;background:transparent!important;box-shadow:none!important;outline:0!important}
html body .br-tin .br-r:not(.br-head) .br-name:hover:not(#_):not(#_):not(#_):not(#_):not(#_){border-color:var(--border-strong)!important;background:var(--surface)!important}
html body .br-tin .br-r:not(.br-head) .br-name:focus:not(#_):not(#_):not(#_):not(#_):not(#_){border-color:var(--focus,#4b6bfb)!important;background:var(--surface)!important}
/* the logo, top left, goes Home (Rami, 9 October 2026) */
html body .logo .logo-home{display:inline-flex;align-items:center;gap:inherit;color:inherit;text-decoration:none;min-width:0}
html body .logo .logo-home:hover .logo-t{text-decoration:underline;text-underline-offset:3px}
/* a page that is still loading shows Kasper in the middle of the page, not at its top (Rami, 9 October 2026); inside a card or panel he stays small */
html body main .k-load:not(.card .k-load):not(.sp .k-load):not(section .k-load):not(.bf .k-load){min-height:calc(100vh - 220px);justify-content:center;padding:0}
/* 404: Kasper looking for the page */
html body .nf{display:grid;justify-items:center;text-align:center;gap:6px;padding:8vh 16px}
html body .nf .nf-k{position:relative;width:120px;height:120px}
html body .nf .nf-k .buddy{width:120px;height:120px;animation:nfLook 2.4s ease-in-out infinite}
html body .nf .nf-q{position:absolute;top:-10px;right:-14px;font:700 34px/1 var(--font-sans);color:var(--accent,#7a3cff);animation:nfQ 1.2s ease-in-out infinite alternate}
html body .nf .nf-code{margin:6px 0 0;font:800 64px/1 var(--font-sans);letter-spacing:-.04em;color:var(--ink);opacity:.12}
html body .nf h1{margin:0}
html body .nf .nf-addr code{background:var(--surface-sunken);padding:2px 6px;border-radius:6px}
@keyframes nfLook{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg) translateX(-6px)}75%{transform:rotate(8deg) translateX(6px)}}
@keyframes nfQ{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-6px) rotate(8deg)}}
@media (prefers-reduced-motion:reduce){html body .nf .nf-k .buddy,html body .nf .nf-q{animation:none}}
html body .ps-sdg{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;padding:12px 0}
html body .ps-sdc{display:grid;gap:8px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:inherit;text-decoration:none}
html body .ps-sdc:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm,0 1px 3px rgba(0,0,0,.06))}
html body .ps-sdh{display:flex;justify-content:space-between;align-items:center;gap:8px}
html body .ps-sdc .btn-s{justify-self:start}
html body .br-pkgadm .br-pkgi{display:flex;align-items:center;justify-content:space-between;gap:6px}
html body .br-pkgadm .br-pkgi .br-x{opacity:0;transition:opacity .12s}
html body .br-pkgadm .br-pkgi:hover .br-x,html body .br-pkgadm .br-pkgi .br-x:focus-visible{opacity:1}
html body .br-pkgadm .br-pkgadd input{width:100%;height:30px;min-height:0;font-size:13px;border-style:dashed}
/* Custom's deliverables in the new-project form: a plain checklist, one line each, grouped by stage */
html body #brNew .br-pickgrid:not(#_){grid-template-columns:minmax(0,1fr);gap:8px}
html body #brNew .br-pick:not(#_){padding:8px 10px}
html body #brNew .br-pick label:not(#_):not(#_){display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;text-align:start!important;gap:8px!important;font-weight:400!important}
html body #brNew .br-pick label input{margin:0;flex:none}
html body .br-pkgsum{display:grid;gap:6px}
html body .br-pkgst{display:grid;grid-template-columns:110px 1fr;gap:8px;align-items:start;padding:6px 0;border-top:1px solid var(--border)}
html body .br-pkgst b{font-size:13px}
html body .br-pkgst span{display:flex;flex-wrap:wrap;gap:4px}
html body .br-pkgst i{font-style:normal;font-size:12.5px;background:var(--surface-sunken);border-radius:999px;padding:2px 9px}
/* Home (Rami, 9 October 2026): no ask box; a month calendar; Announcements over Needs attention; Recent activity and your own blocks */
html body #p-home :is(#askForm,#status,#chips):not(#_){display:none!important}
html body .bf-stack{display:grid;gap:14px;align-content:start}
html body .bf-cal h3{margin-bottom:8px}
html body .bc-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
html body .bc-w{font-size:11px;color:var(--ink-muted);text-align:center;padding-bottom:2px}
html body .bc-d{all:unset;box-sizing:border-box;display:grid;justify-items:center;align-content:start;gap:2px;height:38px;padding-top:4px;border-radius:8px;cursor:pointer;font-size:12.5px}
html body .bc-d.bc-x{cursor:default}
html body .bc-d:not(.bc-x):hover{background:var(--surface-sunken)}
html body .bc-d.now b{background:var(--ink,#16181d);color:var(--surface,#fff);font-weight:700;border-radius:999px;min-width:22px;text-align:center;line-height:22px}
html body .bc-d.on{outline:2px solid var(--focus,#4b6bfb);outline-offset:-2px}
html body .bc-dots{display:flex;gap:2px}
html body .bc-dots i{width:5px;height:5px;border-radius:50%;background:#4b6bfb}
html body .bc-dots i.shoot{background:#e8853d}html body .bc-dots i.late{background:#d64545}html body .bc-dots i.meeting{background:#2a9d8f}
html body .bc-list{display:grid;gap:4px;margin-top:10px}
html body .bc-list small{color:var(--ink-muted)}
html body .bc-e{font-size:13px;padding:5px 8px;border-radius:8px;background:var(--surface-sunken);color:var(--ink);text-decoration:none;border-inline-start:3px solid #4b6bfb}
html body .bc-e.shoot{border-color:#e8853d}html body .bc-e.late{border-color:#d64545}html body .bc-e.meeting{border-color:#2a9d8f}
html body .bf-ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
html body .bf-ul a{display:grid;gap:1px;color:inherit;text-decoration:none;padding:6px 8px;border-radius:8px}
html body .bf-ul a:hover{background:var(--surface-sunken)}
html body .bf-ul small{color:var(--ink-muted);font-size:12px}
html body .bf-urgent h3{color:#c2410c}
html body .bf-blocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:14px}
html body .bf-blocks .bf-col h3{display:flex;justify-content:space-between;align-items:center}
html body .bf-blocks .bf-col h3 .br-x{opacity:.4}
html body .bf-blocks .bf-col h3 .br-x:hover{opacity:1}
html body .bf-addblk:not(#_){display:grid;gap:8px;align-content:start;align-self:start;border:1px dashed var(--line,#d5d8de)!important;box-shadow:none!important;background:transparent!important}
html body .bf-addblk .btn-s{justify-self:start}
html body :is(.bf-urgent,.bf-blocks,.bc-list) .bf-empty{display:block!important}

/* the client's link sits next to Send to client in the month's header (Rami, 9 October 2026: "no way for me to see the share link") */
html body .ps-sharew:not(#_){position:relative;display:inline-flex}
html body .ps-det .wide:not(#_){position:relative}
html body label.busy[data-up]:not(#_){position:relative;opacity:1}
html body label.busy[data-up]:not(#_)::after{content:attr(data-up);position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--surface,#fff) 82%,transparent);font-size:12px;font-weight:600;color:var(--ink);border-radius:inherit}
/* the clients column: inactive clients apart, at its end (Rami, 9 October 2026) */
html body .crail-sep:not(#_){margin:12px 8px 4px;padding-top:10px;border-top:1px solid var(--line,#e3e5ea);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}
html body .crail-r.off:not(#_)>button[data-rail]{opacity:.62}
/* the post's number beside its tick box (Rami, 9 October 2026) */
html body .ps-r>.ps-nc:not(#_){gap:8px;padding-inline:8px 4px}
html body .ps-num:not(#_){min-width:18px;text-align:end;font-size:12.5px;font-weight:600;color:var(--ink-muted);font-variant-numeric:tabular-nums}
/* comments with @mentions on shoots and jobs; the @ list; Home's Mentions (Rami, 9 October 2026) */
html body .hc-at:not(#_){position:fixed;z-index:400;min-width:220px;max-width:280px;display:grid;padding:4px;background:var(--surface);border:1px solid var(--border-strong,#d5d8de);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.16)}
html body .hc-at[hidden]:not(#_){display:none}
html body .hc-at button:not(#_){all:unset;box-sizing:border-box;display:flex;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--ink)}
html body .hc-at button small:not(#_){color:var(--ink-muted)}
html body .hc-at button:is(.on,:hover):not(#_){background:var(--surface-sunken)}
html body .hc:not(#_){display:grid;gap:8px}
html body .hc-c:not(#_){display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:2px 8px;padding:8px 10px;border-radius:10px;background:var(--surface-sunken)}
html body .hc-c small:not(#_){color:var(--ink-muted);font-size:11.5px}
html body .hc-c p:not(#_){grid-column:1/-1;margin:0;font-size:13.5px;line-height:1.45;white-space:pre-wrap}
html body .hc-x:not(#_){all:unset;cursor:pointer;color:var(--ink-muted);padding:0 4px}
html body .hc-x:hover:not(#_){color:var(--ink)}
html body .hc-w:not(#_){display:grid;gap:6px}
html body .hc-w textarea:not(#_){width:100%;min-width:0;resize:vertical}
html body .hc-do:not(#_){display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* a comment's files (Rami, 22 October 2026): pictures as small thumbnails, other files as chips; the ones waiting under the box have × */
html body .hc-fl:not(#_){grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
html body .hc-fl[hidden]:not(#_){display:none}
html body .hc-pend:not(#_){margin:2px 0 0;padding-top:6px}
html body .hc-c .wk-rfi img:not(#_){width:64px;height:64px}
html body .hc-up .wk-rfc:not(#_){opacity:.7;cursor:progress}
html body .hc-add:not(#_){cursor:pointer}
html body .wk-jhc:not(#_){grid-column:1/-1}
html body .bf-ment li.fresh b:not(#_){color:var(--ink)}
html body .bf-ment li.fresh:not(#_){border-inline-start:3px solid #4b6bfb;padding-inline-start:6px}
html body .bf-ment b span:not(#_){font-weight:400;color:var(--ink-muted)}
html body .bf-ment b em:not(#_){float:inline-end;font-style:normal;font-weight:400;font-size:11.5px;color:var(--ink-muted)}
html body .bf-mn:not(#_){margin-inline-start:6px;font-style:normal;font-size:11px;padding:1px 7px;border-radius:999px;background:#4b6bfb;color:#fff}
/* Production: the line's next step as buttons, and whose turn it is (Rami, 9 October 2026) */
html body .wk-stc:not(#_){display:flex;align-items:center;gap:6px;flex-wrap:wrap}
html body .wk-go:not(#_){display:inline-flex;gap:6px;flex-wrap:wrap;max-width:100%} /* Approve and Send back wrap rather than spill into the next column (the robot, 30 October 2026: everyone sees both now, and they were 224px in a 227px column with its padding) */
html body .wk-go .btn-s:not(#_){min-height:0;height:28px;padding:0 10px;white-space:nowrap}
html body .wk-turn:not(#_){display:inline-block;margin-inline-end:6px;padding:1px 8px;border-radius:999px;font-style:normal;font-size:11px;font-weight:600;vertical-align:middle;white-space:nowrap}
html body .wk-turn.review:not(#_){background:#e6ecff;color:#2f4fd1}
html body .wk-turn.fix:not(#_){background:#fff0e0;color:#b45309}
html body .wk-r1.turn:not(#_)>span:first-child{box-shadow:inset 3px 0 0 #4b6bfb}
/* a side panel's rows keep their own height (Rami, 10 October 2026: an uploaded design showed as a thin bar): a sideways-scrolling
   picture strip was squeezed to its scrollbar when the panel was full */
html body .sp .sp-b:not(#_){grid-auto-rows:max-content}
html body .sp-media:not(#_){flex:none;min-height:min-content}
html body .wk-rowerr:not(#_){display:block;flex-basis:100%;margin-top:4px;font-size:12px;line-height:1.35;white-space:normal;color:var(--danger,#b4232c)}
html body .lt-h:last-child>.lt-rz:not(#_){inset-inline-end:0}

/* Production's people row (one person's list): wraps on a narrow window; the number after each name is what they still have to do */
html body .ln-who:not(#_){flex-wrap:wrap}
html body .ln-who em:not(#_){font-style:normal;color:var(--ink-subtle);margin-inline-start:5px;font-size:12px}

/* the Open button at the end of an item's name in a list (inline.js): shows while the row is pointed at, like monday */
html body .wk-openi:not(#_){display:none;align-items:center;gap:4px;margin-inline-start:auto;flex:none;padding:2px 8px;border:1px solid var(--line,#d6d9de);border-radius:6px;background:var(--panel,#fff);color:var(--muted,#5b6270);font:inherit;font-size:12px;cursor:pointer}
html body .wk-openi svg:not(#_){width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
html body [data-list] .wk-r1:hover .wk-openi:not(#_),html body [data-list] .wk-r1:focus-within .wk-openi:not(#_){display:inline-flex}
html body .wk-openi:hover:not(#_){color:var(--ink,#111);border-color:currentColor}
html body [data-list] [data-ph="t"]:not(.bk-add-n):not(#_){cursor:pointer}
html body [data-list] [data-ph="t"] :is(a,button,input):not(#_){cursor:auto}
html body [data-list] [data-ph="t"] a > b:not(#_),html body [data-list] [data-ph="t"] button:not(.wk-openi) > b:not(#_){cursor:text}
@media (max-width:860px){html body .wk-openi:not(#_){display:none!important}}

/* Approve / Send back in a post's panel (work.js), under its status steps */
html body .sp-judge:not(#_){display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}

/* One way to confirm (sure.js): a small card beside the button, never a browser pop-up */
.sure-card{position:fixed;z-index:90;max-width:340px;min-width:240px;background:var(--sheet,var(--bg));color:var(--ink);border:1px solid var(--line-2,var(--line));border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.2);padding:12px 14px;font-size:13.5px;line-height:1.45}
.sure-card p{margin:0 0 10px;white-space:normal}
.sure-b{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.sure-card .sure-b .btn-s.danger,.sure-card .sure-b .btn-s.danger:hover{background:var(--bad,#c0392b);color:#fff;border-color:transparent}
.sure-b.sure-many{flex-direction:column;align-items:stretch}.sure-b.sure-many .btn-s{justify-content:center}

/* Nothing floats over content (Rami, October 2026): Feedback and Escalate step aside on the chat page (the message box sits
   where they float) and while a "selected" bar is up at the bottom of a list */
@media (min-width:861px){
  body:is(:has(#p-ch.on),:has(.wk-float:not(:empty)),:has(.ps-pick)) :is(.fb-fab,.esc-fab){display:none!important}
}

/* a job in its side panel (work.js jobPanel): status, who and files side by side, then the next step, then the rest */
.sp-job{display:grid;gap:14px}
.sp-jtop{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.sp-jtop .find,.sp-jtop .pk-mbtn{width:100%;max-width:none;min-width:0}
.sp-jtop>div,.sp-jgo{display:grid;gap:4px;align-content:start}
.sp-jtop small,.sp-jgo small{color:var(--muted);font-size:12px}
.sp-jgo .wk-go{display:flex;gap:8px;flex-wrap:wrap}
.sp-job .wk-jd{display:grid;gap:12px;padding:0;border:0;background:none;margin:0;min-width:0}
.sp-jacts{display:flex;gap:8px;flex-wrap:wrap}
.sp-jtop>div{min-width:0}.sp-jtop>div>*{max-width:100%;box-sizing:border-box}
.sp-job .wk-jd textarea,.sp-job .wk-jd .find{width:100%;max-width:none}
html body .wk-r1.open:not(#_){background:var(--soft)}
@media (max-width:560px){.sp-jtop{grid-template-columns:1fr}}
.sp-jfiles{grid-column:1/-1}
.sp-jimgs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.sp-jimg{position:relative;display:inline-block}
.sp-jimg img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.sp-jimg button{position:absolute;top:-6px;inset-inline-end:-6px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--sheet,#fff);color:var(--ink);font-size:14px;line-height:1;cursor:pointer;padding:0}
.sp-jup{cursor:pointer}
/* a job's reference files (14 October 2026): images as thumbnails, any other file as a chip with its kind, name and size; × removes one */
.wk-refs{align-items:center}
.wk-rf{position:relative;display:inline-flex;max-width:100%}
.wk-rfi img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.wk-rfc{display:inline-flex;align-items:center;gap:8px;max-width:260px;min-height:36px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--panel);color:var(--ink);text-decoration:none;font-size:12.5px;transition:background-color .14s}
.wk-rfc:hover{background:var(--hover)}
.wk-rft{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;padding:3px 6px;border-radius:999px;background:var(--sheet,#fff);color:var(--ink-2);flex:none}
.wk-rfn{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-rfc small{color:var(--muted);flex:none}
.wk-rfx{position:absolute;top:-6px;inset-inline-end:-6px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--sheet,#fff);color:var(--ink);font-size:14px;line-height:1;cursor:pointer;padding:0}
.wk-radd{cursor:pointer}
.wk-ref .wk-said{flex-basis:100%}

/* the one post panel (Rami, 10 October 2026): Approve / Send back on top for the reviewer, a hint for the maker */
html body .pp-judge:not(#_){display:grid;gap:8px;padding:12px 14px;margin-bottom:12px;border-radius:12px;border:1px solid var(--border-strong);background:var(--surface)}
html body .pp-judge > span:first-child:not(#_){display:grid;gap:2px}
html body .pp-judge small:not(#_){color:var(--ink-muted)}
html body .pp-judge .pp-do:not(#_){display:flex;gap:8px;flex-wrap:wrap}
html body .pp-back:not(#_){display:grid;gap:8px}
html body .pp-hint:not(#_){margin:4px 0 0}
/* Home's welcome (Rami, 10 October 2026): a welcome with where you stand and a way into My work on the left, your checklists on the
   right; under it three boxes: Needs attention, Mentions, Waiting on you (or Coming up) */
html body .bf-hero:not(#_){display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(280px,1fr)!important;gap:20px!important;align-items:start!important;padding:24px!important;min-height:0!important}
html body .bf-hero .bf-hi:not(#_){display:grid;gap:10px;align-content:start;justify-items:start;padding:0!important}
html body .bf-hero .bf-hi h2:not(#_){font:700 26px/32px var(--font-sans)!important;margin:2px 0 0!important;max-width:30ch}
html body .bf-chips:not(#_){display:flex;flex-wrap:wrap;gap:8px}
html body .bf-hero .bf-chips a.bf-chip.bf-chip:not(.bf-card):not(#_){display:inline-flex;align-items:center;gap:7px;padding:6px 12px!important;border-radius:999px!important;font:600 13px/18px var(--font-sans)!important;text-decoration:none;background:var(--surface)!important;border:1px solid var(--border-strong)!important;color:var(--ink)!important}
html body .bf-hero .bf-chips a.bf-chip.bf-chip:hover:not(.bf-card):not(#_){border-color:var(--ink-muted)!important}
html body .bf-chip i{width:8px;height:8px;border-radius:50%;background:var(--accent-sky)}
html body .bf-chip.late i{background:var(--accent-rose)}
html body .bf-chip.wait i{background:var(--accent-orange)}
html body .bf-hero .bf-chips a.bf-chip.bf-chip.late:not(.bf-card):not(#_){background:var(--accent-rose-soft)!important;border-color:var(--accent-rose-pastel)!important}
html body .bf-hero .bf-hi a.bf-all.bf-all:not(.bf-card):not(#_){display:inline-flex!important;align-items:center;gap:6px;padding:9px 16px!important;margin-top:4px;text-decoration:none;white-space:nowrap;width:auto!important;height:auto!important}
html body .bf-hero .bf-all svg:not(#_){width:14px!important;height:14px!important;flex:none;fill:none!important;stroke:currentColor!important;stroke-width:2.2}
html body .bf-hero .bf-all:not(#_) *{color:inherit!important}
/* your checklists */
html body .bf-hero .ck:not(#_){display:flex;flex-direction:column;min-width:0;max-height:340px;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}
html body .ck-h:not(#_){display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 8px}
html body .ck-h h3:not(#_){margin:0;font:600 15px/20px var(--font-sans)!important}
html body .ck-all:not(#_){all:unset;cursor:pointer;font:600 12.5px/16px var(--font-sans);color:var(--accent-sky)!important}
html body .ck-all:hover:not(#_){text-decoration:underline}
html body .ck-none:not(#_){margin:0;padding:4px 14px 14px;color:var(--ink-muted)!important;font-size:13px}
html body .ck-body:not(#_){overflow-y:auto;padding:0 8px 8px;display:grid;gap:4px;align-content:start}
html body .ck-late:not(#_){display:grid;gap:2px;padding:6px;background:var(--accent-rose-soft);border-radius:10px;margin-bottom:2px}
html body .ck-late>small:not(#_){font:700 11px/14px var(--font-sans);text-transform:uppercase;letter-spacing:.04em;color:var(--accent-rose)!important;padding:0 6px}
html body .ck-g:not(#_){display:grid;gap:2px}
html body .ck-gh:not(#_){all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:auto auto minmax(30px,1fr) auto;align-items:center;gap:8px;padding:8px 6px;border-radius:8px;width:100%}
html body .ck-gh:hover:not(#_){background:var(--surface-sunken)}
html body .ck-gh b:not(#_){font:600 13.5px/18px var(--font-sans)}
html body .ck-gh small:not(#_){color:var(--ink-muted)!important;font-size:12px}
html body .ck-bar:not(#_){height:4px;border-radius:4px;background:var(--surface-sunken);overflow:hidden}
html body .ck-bar i:not(#_){display:block;height:100%;background:var(--accent-green);border-radius:4px}
html body .ck-ar:not(#_){color:var(--ink-muted)!important;font-size:11px}
html body .ck-i:not(#_){all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;width:100%}
html body .ck-i:hover:not(#_){background:var(--surface-sunken)}
html body .ck-box:not(#_){width:16px;height:16px;border:1.5px solid var(--border-strong);border-radius:5px;box-sizing:border-box}
html body .ck-i.done .ck-box:not(#_){background:var(--accent-green);border-color:var(--accent-green)}
html body .ck-i.late .ck-box:not(#_){border-color:var(--accent-rose)}
html body .ck-t:not(#_){display:grid;min-width:0}
html body .ck-t b:not(#_){font:500 13.5px/18px var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .ck-t small:not(#_){font-size:11.5px;color:var(--ink-muted)!important}
html body .ck-i.done .ck-t b:not(#_){text-decoration:line-through;color:var(--ink-muted)!important}
html body .ck-d:not(#_){font-size:12px;color:var(--ink-muted)!important;white-space:nowrap}
html body .ck-i.late .ck-d:not(#_){color:var(--accent-rose)!important;font-weight:600}
/* a checklist of your own on Home: its name small, its items below, each ticked in place (public/app.js ckHtml block) */
html body .ck-r:not(#_){padding:4px 0 6px}
html body .ck-rn:not(#_){display:flex;align-items:baseline;gap:8px;padding:6px 8px 2px;font:600 11.5px/16px var(--font-sans);color:var(--ink-muted);text-transform:uppercase;letter-spacing:.03em}
html body .ck-rn small:not(#_){font-weight:500;text-transform:none;letter-spacing:0;margin-inline-start:auto}
html body .ck-r.late .ck-rn small:not(#_){color:var(--accent-rose)!important;font-weight:600}
html body .ck-it .ck-t b:not(#_){white-space:normal;overflow:visible}
html body .ck-ask .ck-box:not(#_){border-style:dashed}
html body .ck-err:not(#_){margin:2px 8px;font-size:12px;color:var(--accent-rose)}
html body .ck-fold:not(#_){all:unset;cursor:pointer;padding:5px 8px;font:600 12px/16px var(--font-sans);color:var(--accent-green)!important;border-radius:8px}
html body .ck-fold:hover:not(#_){background:var(--surface-sunken)}
/* the three boxes */
html body .bf-three.tt3:not(#_){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:4px}
html body .tt3 .tt:not(#_){background:var(--surface)!important;border:1px solid var(--border);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
html body .tt3 .tt h3:not(#_){display:flex;align-items:center;gap:8px;margin:0;font:600 15px/20px var(--font-sans)!important}
html body .tt3 .tt-att h3:not(#_){color:var(--accent-rose)!important}
html body .tt-n:not(#_){font-style:normal;font:600 12px/16px var(--font-sans);background:var(--surface-sunken);color:var(--ink)!important;border-radius:999px;padding:1px 8px}
html body .tt-att .tt-n:not(#_){background:var(--accent-rose-soft);color:var(--accent-rose)!important}
html body .tt-tag:not(#_){margin-inline-start:auto;font:500 11.5px/16px var(--font-sans);color:var(--ink-muted)!important}
html body .tt-sub:not(#_){margin:0;font-size:12.5px;color:var(--ink-muted)!important}
html body .tt-ul:not(#_){list-style:none;margin:0;padding:0;display:grid;gap:2px}
html body .tt-ul a:not(#_){display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:6px;margin:0 -6px;border-radius:8px;text-decoration:none;color:var(--ink)}
html body .tt-ul a:hover:not(#_){background:var(--surface-sunken)}
html body .tt-ul a>span:not(#_){display:grid;min-width:0}
html body .tt-ul b:not(#_){font:500 13.5px/18px var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .tt-ul small:not(#_){font-size:12px;color:var(--ink-muted)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .tp:not(#_){font-style:normal;font:600 11px/14px var(--font-sans);padding:3px 8px;border-radius:999px;min-width:52px;text-align:center;box-sizing:border-box;background:var(--surface-sunken);color:var(--ink)}
html body .tp.urg:not(#_),html body .tp.late:not(#_){background:var(--accent-rose-soft);color:var(--accent-rose)}
html body .tp.soon:not(#_){background:var(--accent-orange-soft);color:var(--accent-orange)}
html body .tp.wait:not(#_){background:var(--accent-violet-soft);color:var(--accent-violet)}
html body .tp.due:not(#_){background:var(--accent-sky-soft);color:var(--accent-sky)}
html body .tp.av:not(#_){min-width:0;width:30px;height:30px;padding:0;display:grid;place-items:center;border-radius:50%;background:var(--accent-violet-soft);color:var(--accent-violet)}
html body .tt-ul li.fresh b:not(#_){font-weight:700}
html body .tt-more:not(#_){margin-top:auto;font:600 12.5px/16px var(--font-sans);color:var(--accent-sky)!important;text-decoration:none}
html body .tt-more:hover:not(#_){text-decoration:underline}
html body .tt .bf-empty:not(#_){margin:0;color:var(--ink-muted)!important;font-size:13px}
@media (max-width:900px){
  html body .bf-hero:not(#_){grid-template-columns:minmax(0,1fr)!important}
  html body .bf-three.tt3:not(#_){grid-template-columns:minmax(0,1fr)}
}
/* the social media calendar's weekend (Friday and Saturday) on a slightly darker background (Rami, October 2026) */
html body .pc-day.wkend:not(.out):not(#_),html body .pc-wh span.wkend:not(#_){background:color-mix(in srgb,var(--c-ink) 6%,var(--surface))!important}
html body .pc-day.wkend.out:not(#_){background:color-mix(in srgb,var(--c-ink) 9%,var(--surface))!important}
/* one Open per row (Rami, 10 October 2026: two Open buttons on a post's caption): with a pointer, the posts list uses the Open that
   every list shows on hover (it opens the post through this button); a touch screen, with no hover, keeps this one */
/* one Open per post (Rami, 29 October 2026: an iPad with a trackpad showed two): wherever something can point (a mouse or a trackpad,
   even on an iPad), only the Open that shows on hover; only a touch-only screen keeps the one that always shows */
@media (any-hover:hover){html body .ps-capc .ps-open:not(#_):not(#_):not(#_){display:none!important}}
/* a caption reads from the left while the Hub is in English, whatever its language (Rami, 29 October 2026: Arabic captions sat
   right-aligned in the middle of the cell); each line still runs right to left */
html:not([dir="rtl"]) body .ps-capc textarea.ps-capta:not(#_):not(#_):not(#_){text-align:left}

/* Reports › Next month (public/readiness.js) */
#rpBody .rd-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 12px}
#rpBody .rd-mon{font-size:17px;margin-right:6px}
#rpBody .rd-chip{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 12px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface);color:var(--c-ink);font:500 13px/1 var(--font-sans);cursor:default}
#rpBody button.rd-chip{cursor:pointer}
#rpBody .rd-chip.g{background:var(--status-done-bg);color:var(--status-done-fg);border-color:transparent}
#rpBody .rd-chip.a{background:var(--status-working-bg);color:var(--status-working-fg);border-color:transparent}
#rpBody .rd-chip.r{background:var(--status-stuck-bg);color:var(--status-stuck-fg);border-color:transparent}
#rpBody .rd-chip.on{outline:2px solid var(--c-ink);outline-offset:1px}
#rpBody .rd-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
#rpBody .rd-bar label{display:inline-flex;align-items:center;gap:6px;color:var(--ink-subtle);font-size:13px}
#rpBody .rd-bar select{width:auto;min-width:130px;height:32px}
#rpBody .rd-bar .seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
#rpBody .rd-bar .seg button{border:0;background:var(--surface);padding:0 12px;height:32px;font:500 13px var(--font-sans);color:var(--ink-muted);cursor:pointer}
#rpBody .rd-bar .seg button.on{background:var(--c-ink);color:var(--surface)}
#rpBody .rd-strip{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;margin-bottom:14px}
#rpBody .rd-st{text-align:start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:8px 10px;cursor:pointer;color:var(--c-ink)}
#rpBody .rd-st.on{border-color:var(--c-ink)}
#rpBody .rd-st small{display:block;color:var(--ink-subtle);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rpBody .rd-st b{font-size:19px}
#rpBody .rd-st i{display:block;height:4px;border-radius:2px;background:var(--surface-sunken);margin-top:6px}
#rpBody .rd-st i u{display:block;height:4px;border-radius:2px;background:var(--primary)}
#rpBody .rd-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:14px;align-items:start}
#rpBody .rd-main .wk-t1{overflow-x:auto}
#rpBody .rd-r{--w:1350px;color:inherit;text-decoration:none}
#rpBody .rd-main .wk-r1.head{--w:1350px}
#rpBody .rd-c b{display:block;font-weight:600}
#rpBody .rd-c small,#rpBody .rd-who small{color:var(--ink-subtle);font-size:12px}
#rpBody .rd-n{font-variant-numeric:tabular-nums}
#rpBody .rd-n em{font-style:normal;color:var(--ink-subtle)}
#rpBody .rd-p{display:inline-block;font-style:normal;padding:2px 9px;border-radius:var(--radius-pill);font-size:12px;font-weight:500;background:var(--status-idle-bg);color:var(--status-idle-fg);white-space:nowrap}
#rpBody .rd-p.g,#rpBody .rd-p.s-approved{background:var(--status-done-bg);color:var(--status-done-fg)}
#rpBody .rd-p.a{background:var(--status-working-bg);color:var(--status-working-fg)}
#rpBody .rd-p.r{background:var(--status-stuck-bg);color:var(--status-stuck-fg)}
#rpBody .rd-p:is(.s-plan,.s-approval,.s-production,.s-checks,.s-ready,.s-send){background:var(--status-review-bg);color:var(--status-review-fg)}
#rpBody .rd-p.s-client{background:var(--status-done-bg);color:var(--status-done-fg)}
#rpBody .rd-ck{display:flex;gap:4px}
#rpBody .rd-ck i{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font:700 11px var(--font-sans);background:var(--status-idle-bg);color:var(--status-idle-fg)}
#rpBody .rd-ck i.g{background:var(--status-done-bg);color:var(--status-done-fg)}
#rpBody .rd-ck i.a{background:var(--status-working-bg);color:var(--status-working-fg)}
#rpBody .rd-ck i.r{background:var(--status-stuck-bg);color:var(--status-stuck-fg)}
#rpBody .rd-w{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rpBody .rd-gh{padding:8px 12px;background:var(--surface-sunken);font-weight:600;font-size:12.5px;color:var(--ink-muted);min-width:1350px}
/* Reports › Client performance (perfreport.js): rows open to the client's own numbers */
#rpBody .pr-r.can{cursor:pointer}#rpBody .pr-r.can:hover{background:var(--surface-hover,var(--surface-sunken))}
#rpBody .pr-mut{color:var(--ink-subtle);font-size:12px}
#rpBody .pr-mn{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rpBody .pr-prog{display:flex;align-items:center;gap:8px;margin-top:4px;min-width:0}
#rpBody .pr-bar{flex:1;min-width:56px;height:4px;border-radius:2px;background:var(--surface-sunken);display:block;overflow:hidden}
#rpBody .pr-bar u{display:block;height:100%;background:var(--c-ink);border-radius:2px}
#rpBody .pr-sp polyline{fill:none;stroke:var(--ink-subtle);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}#rpBody .pr-sp circle{fill:var(--c-ink)}
#rpBody .pr-open{margin:0 0 10px 24px;padding:12px 14px;border-radius:var(--radius-md);background:var(--surface-sunken)}
#rpBody .pr-open .wk-t1,#rpBody .pr-open .wk-r1{min-width:0}#rpBody .pr-open .rd-gh{min-width:0;background:transparent;padding-inline:0}
#rpBody .pr-oh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px;font-size:13px}#rpBody .pr-oh span{color:var(--ink-subtle);font-size:12px}
#rpBody .pr-m small{color:var(--ink-subtle);font-size:12px}#rpBody .pr-ch{font-size:12px}
#rpBody .pr-strip{grid-template-columns:repeat(5,minmax(0,1fr))}#rpBody .pr-strip .rd-st{cursor:default}
#rpBody .pr-h{margin-top:20px}
#rpBody .pr-pm{display:grid;gap:4px;padding:8px 0;border-top:1px solid var(--border);font-size:13px}#rpBody .pr-pm small{color:var(--ink-subtle);font-size:12px}#rpBody .pr-pm .rd-p{margin-inline-start:auto}
#rpBody .rd-card.can{cursor:pointer}
@media(max-width:860px){#rpBody .pr-open{margin:0 0 8px}#rpBody .pr-open .rd-gh{margin-top:6px}#rpBody .rd-cards .rd-card .rd-cf{grid-template-columns:repeat(3,minmax(0,1fr))}}
#rpBody .rd-side{padding:14px}
#rpBody .rd-side h3{margin:0 0 8px;font-size:14px}
#rpBody .rd-who{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid var(--border)}
#rpBody .rd-who small{text-align:end}
#rpBody .rd-key{color:var(--ink-subtle);font-size:12px;margin:10px 0 0;line-height:1.6}
@media (max-width:1100px){#rpBody .rd-grid{grid-template-columns:1fr}#rpBody .rd-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Social calendar on a phone: cards, nothing wider than the screen */
#rpBody .rd-grid{grid-template-columns:minmax(0,1fr) 250px}
#rpBody .rd-cards{display:flex;flex-direction:column;gap:8px}
#rpBody .rd-cards .rd-gh{min-width:0;border-radius:var(--radius-md);margin-top:6px}
#rpBody .rd-card{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);color:inherit;text-decoration:none}
#rpBody .rd-ct{display:flex;justify-content:space-between;align-items:center;gap:8px}
#rpBody .rd-ct b{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rpBody .rd-cs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--ink-muted)}
#rpBody .rd-cs b{color:var(--c-ink)}
#rpBody .rd-cf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#rpBody .rd-cf:last-of-type{grid-template-columns:repeat(3,minmax(0,1fr))}
#rpBody .rd-cf>span>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rpBody .rd-cf>span{display:flex;flex-direction:column;gap:2px;font-size:13px;font-variant-numeric:tabular-nums;min-width:0}
#rpBody .rd-cf small{font-size:11px;color:var(--ink-subtle)}
#rpBody .rd-cf em{font-style:normal;color:var(--ink-subtle)}
#rpBody .rd-cc{color:var(--ink-subtle);font-size:12px}
@media (max-width:1100px){#rpBody .rd-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){
  #rpBody .rd-top{gap:6px}
  #rpBody .rd-mon{width:100%}
  #rpBody .rd-chip{height:28px;padding:0 10px;font-size:12.5px}
  #rpBody .rd-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #rpBody .rd-bar .seg{grid-column:1/-1}
  #rpBody .rd-bar .seg button{flex:1}
  #rpBody .rd-bar label{flex-direction:column;align-items:stretch;gap:3px;font-size:12px}
  #rpBody .rd-bar select{width:100%;min-width:0}
  #rpBody .rd-bar>select{align-self:end}
  #rpBody .rd-strip{display:flex;overflow-x:auto;gap:6px;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  #rpBody .rd-st{flex:none;width:112px}
}
/* Results under a Social media month's tab: the month is already named above it */
html body .ps-res .rs-top h1.h1:not(#_):not(#_){font-size:17px!important;line-height:1.3!important}
.ps-res .ps-top.rs-top{position:static}
/* Clients list: the four strategy pieces (green done, red not done, grey N/A) */
.ct-sx{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--ink-muted);text-decoration:none;white-space:nowrap}
.ct-sx i{width:18px;height:18px;border-radius:5px;display:inline-grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;flex:none}
.ct-sx.ok i{background:var(--accent-green);color:#fff}
.ct-sx.no i{background:var(--accent-rose);color:#fff}
.ct-sx.ok{color:var(--c-ink)}
.ct-sx.no{color:var(--c-ink)}
.ct-sx.na{color:var(--ink-subtle);font-weight:400}
a.ct-sx:hover{text-decoration:underline}
/* the tour picker's "Don't show this again" */
.tr-off{display:flex;align-items:center;gap:8px;margin:12px 0 4px;font-size:13px;color:var(--ink-muted);cursor:pointer}
.tr-off small{color:var(--ink-subtle)}
.me-tour{display:inline-flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
/* Plan and Scripts: a box with basic formatting (public/rich.js) */
html body .rx-box{border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);width:100%;min-width:0;overflow:hidden}
html body .rx-box:focus-within{border-color:var(--ink)}
html body .rx-bar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:4px 6px;border-bottom:1px solid var(--border);background:var(--surface-sunken,var(--surface))}
html body .rx-bar[hidden]{display:none}
html body .rx-b{min-width:30px;height:28px;padding:0 6px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink-muted,var(--ink));font:500 13px/1 var(--font-sans);cursor:pointer;display:inline-grid;place-items:center}
html body .rx-b:hover{background:var(--surface-hover);color:var(--ink)}
html body .rx-b[aria-pressed=true]{background:var(--ink);color:var(--surface)}
html body .rx-b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
html body .rx-b .rx-dir{font-size:11px;font-weight:600;letter-spacing:.02em}
html body .rx-sep{width:1px;height:18px;background:var(--border);margin:0 4px}
html body .rx-ed{padding:10px 12px;font:400 14px/1.55 var(--font-sans);color:var(--ink);outline:none;overflow-wrap:anywhere;max-height:70vh;overflow-y:auto;position:relative}
html body .rx-ed.rx-empty::before{content:attr(data-ph);color:var(--ink-subtle);position:absolute;pointer-events:none;inset:10px 12px auto}
html body :is(.rx-ed,.rx-view) :is(p,h2,h3,ul,ol){margin:0 0 .35em}
html body :is(.rx-ed,.rx-view) h3:not(#_){display:block;font:700 17px/1.4 var(--font-sans)!important;text-transform:none;letter-spacing:0;color:var(--ink);margin:.6em 0 .35em}
html body :is(.rx-ed,.rx-view)>h3:first-child:not(#_){margin-top:0}
html body :is(.rx-ed,.rx-view) h2:not(#_){display:block;font:650 18px/1.4 var(--font-sans)!important;text-transform:none;color:var(--ink);margin:.6em 0 .35em}
html body :is(.rx-ed,.rx-view) :is(ul,ol){padding-inline-start:1.4em}
html body .rx-ed[contenteditable=false]{color:var(--ink-muted,var(--ink))}
/* tables in Plan and Scripts */
html body :is(.rx-ed,.rx-view){overflow-x:auto}
html body :is(.rx-ed,.rx-view) table{border-collapse:collapse;margin:.4em 0 .6em;min-width:50%;max-width:none;font-size:13.5px}
html body :is(.rx-ed,.rx-view) :is(td,th){border:1px solid var(--border-strong);padding:5px 8px;vertical-align:top;min-width:60px;text-align:start}
html body :is(.rx-ed,.rx-view) th{background:var(--surface-sunken);font-weight:600}
html body :is(.rx-ed,.rx-view) :is(td,th) p{margin:0}
html body .rx-tg{display:inline-flex;gap:2px;margin-inline-start:4px;padding-inline-start:6px;border-inline-start:1px solid var(--border)}
html body .rx-tg[hidden]{display:none}
html body .rx-tg .rx-b{padding:0 8px}
/* the video list: notes can be several lines (Shoot notes on set write one per line, with the time); a captured video's number is green */
html body .sh-vid textarea[data-vno]:not(#_):not(#_){width:100%;min-width:0;min-height:var(--row-height);resize:vertical;padding-block:9px}
html body .sh-vid:not(#_){align-items:start}
html body .sh-vn.got:not(#_){color:var(--accent-green);font-weight:700}
html body .sh-vn.got:not(#_)::after{content:"✓";font-size:11px;margin-inline-start:1px}
/* Home: the Shoots calendar (every shoot, the same for everyone) */
html body .bf-cal .bc-h:not(#_){display:flex;align-items:center;gap:4px}
html body .bc-h>span{flex:1;min-width:0}
html body .bc-h small{font-weight:400;color:var(--ink-muted);margin-inline-start:4px}
html body .bc-nav{width:32px;height:32px;border:0;border-radius:var(--radius-md);background:none;color:var(--ink-muted);display:grid;place-items:center;cursor:pointer}
html body .bc-nav:hover{background:var(--surface-hover);color:var(--ink)}
html body .bc-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html body [dir="rtl"] .bc-nav svg,html body:dir(rtl) .bc-nav svg{transform:scaleX(-1)}
html body .bc-dots i.shoot.mine{background:var(--accent-green)}
html body .bc-s{display:grid;gap:1px;padding:7px 10px!important}
html body .bc-s b{font-weight:600;font-size:13.5px}
html body .bc-s small{color:var(--ink-muted);font-size:12.5px;display:block;font-variant-numeric:tabular-nums}
html body .bc-e.shoot.mine{border-color:var(--accent-green)}
/* The strategy beside a shoot's Brief / Plan / Scripts (public/stratpanel.js): a panel on the right; the page makes room on a wide screen */
html body .sd-strat:not(#_){flex:none}
html body .sd-strat[aria-expanded="true"]:not(#_){background:var(--c-ink);color:var(--surface);border-color:var(--c-ink)}
html body .stp{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(420px,100vw);z-index:60;background:var(--surface);border-inline-start:1px solid var(--border);box-shadow:-8px 0 24px rgba(0,0,0,.08);display:flex;flex-direction:column}
html body .stp[hidden]{display:none}
@media (min-width:1100px){html.stp-on body main:not(#_){padding-inline-end:440px!important}}
html body .stp-h{display:flex;align-items:center;gap:8px;padding:14px 12px 12px 18px;border-bottom:1px solid var(--border)}
html body .stp-h b{font-size:16px;font-weight:600}
html body .stp-h small{flex:1;min-width:0;color:var(--ink-muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .stp-x{width:36px;height:36px;border:0;border-radius:var(--radius-md);background:none;color:var(--ink-muted);display:grid;place-items:center;cursor:pointer}
html body .stp-x:hover{background:var(--surface-hover);color:var(--c-ink)}
html body .stp-x svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
html body .stp-in{flex:1;min-height:0;overflow-y:auto;padding:12px 18px 24px}
html body :is(.stp-in,[data-stp-fill]) .stp-tabs{display:flex;gap:4px;padding:3px;background:var(--surface-sunken);border-radius:var(--radius-md);margin-bottom:10px}
html body .stp-tabs button{flex:1;height:32px;border:0;border-radius:6px;background:none;font:500 14px var(--font-sans);color:var(--ink-muted);cursor:pointer}
html body .stp-tabs button[aria-selected="true"]{background:var(--surface);color:var(--c-ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
html body .stp-only{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-subtle);font-weight:600;margin:2px 0 8px}
html body .stp-s{border-bottom:1px solid var(--border)}
html body .stp-s summary{cursor:pointer;padding:10px 0;font-weight:600;font-size:14px;list-style-position:inside}
html body .stp-b{padding:0 0 12px;font-size:14px;line-height:1.5;color:var(--c-ink)}
html body .stp-b p{margin:0 0 6px}
html body .stp-b h4{margin:10px 0 2px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-subtle);font-weight:600}
html body .stp-b :is(ul,ol){margin:2px 0 6px;padding-inline-start:20px}
html body .stp-big{font-size:16px;font-weight:600}
html body .stp-item{padding:8px 0;border-top:1px dashed var(--border)}
html body .stp-item:first-of-type{border-top:0}
html body .stp-ih{display:flex;align-items:center;gap:8px;margin-bottom:2px}
html body .stp-ih i{font-style:normal;width:20px;height:20px;border-radius:50%;background:var(--accent-violet-soft);color:var(--accent-violet);font-size:12px;font-weight:600;display:grid;place-items:center;flex:none}
html body .stp-ih small{margin-inline-start:auto;color:var(--ink-muted);font-size:12.5px;flex:none}
html body .stp-name{border:0;background:none;padding:0;font:600 14.5px var(--font-sans);color:var(--c-ink);cursor:copy;text-align:start}
html body .stp-name:hover{text-decoration:underline;text-underline-offset:3px}
html body .stp-name.copied::after{content:" ✓ copied";font-weight:500;font-size:12px;color:var(--accent-green)}
html body .stp-enemy{color:var(--ink-muted)}
html body .stp-mix{font-size:13.5px}
/* the Topic bank tab (public/stratpanel.js topicBank) */
html body .stp-key{font-size:12.5px;color:var(--ink-muted);margin:0 0 8px;line-height:1.6}
html body .stp-key b{color:var(--c-ink)}
html body ul.stp-topics{list-style:none;padding:0;margin:0}
html body .stp-topics li{padding:7px 0;border-top:1px dashed var(--border)}
html body .stp-topics li:first-child{border-top:0}
html body .stp-topics small{color:var(--ink-muted);font-size:12px;margin-inline-start:4px}
html body .stp-code{display:inline-block;min-width:28px;font-size:12px;color:var(--accent-violet)}
html body .stp-tx{display:block;color:var(--ink-muted);font-size:13.5px;margin-top:2px}
html body .stp-none{color:var(--ink-muted)}
html body .stp-full{display:inline-block;margin-top:14px;font-weight:600;font-size:14px}
/* the tabs' row on a shoot: Strategy beside Write with Kasper; when the row is narrow (the strategy panel open, a small window)
   both show only their icon, so the tabs keep their room */
html body .ip-tabrow:not(#_){container-type:inline-size}
html body .sd-strat:not(#_):not(#_){display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;margin-inline-start:auto;white-space:nowrap}
html body .sd-strat svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html body .sd-strat~.ai-go:not(#_):not(#_):not(#_){margin-left:0}
html body .ip-tabrow>:is(.sd-strat,.ai-go,.sd-dl):last-child:not(#_){margin-inline-end:10px}
/* the shoot's Download (PDF or Word), beside Strategy and Write with Kasper (team feedback, 27 October 2026) */
html body .sd-dl:not(#_){position:relative;flex:none;margin-inline-start:8px}
html body .sd-dl>summary:not(#_):not(#_){display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;white-space:nowrap;list-style:none;cursor:pointer}
html body .sd-dl>summary::-webkit-details-marker{display:none}
html body .sd-dl>summary svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html body .sd-dl[open]>summary:not(#_):not(#_){background:var(--c-ink);color:var(--surface);border-color:var(--c-ink)}
html body .sd-dlm:not(#_){position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:30;display:flex;flex-direction:column;min-width:140px;padding:6px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:0 10px 30px rgba(0,0,0,.14)}
html body .sd-dlm button:not(#_){all:unset;box-sizing:border-box;padding:8px 10px;border-radius:8px;font-size:13px;color:var(--ink);cursor:pointer}
html body .sd-dlm button:is(:hover,:focus-visible):not(#_){background:var(--surface-hover)}
@container (max-width: 560px){html body .ip-tabrow .tr-l{display:none}html body .ip-tabrow :is(.sd-strat,.ai-go):not(#_):not(#_):not(#_){padding:0 10px!important}}
html body .stp-disc{margin:10px 0 0;color:var(--ink-muted);font-size:13px}
.ws-upd{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0}.ws-upd small{flex:1;min-width:200px}
/* Kasper in the team chats (lib/chatkasper.js): his answers, and what he proposes under them */

.ch-kcard{margin:8px 0 2px;display:grid;gap:8px}
.ch-ktodos{margin:0;padding-inline-start:18px;display:grid;gap:4px;font-size:14px}.ch-ktodos small{color:var(--muted)}
.ch-kdo{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.ch-kdo small,.ch-kdone{color:var(--muted);font-size:12.5px}

/* Chat in the style of Rami's reference inbox (11 October 2026): a picture beside each message, the time outside the bubble, others in
   light bubbles on the left, mine dark on the right, Kasper as a white card; one rounded box to write in, + and send under the text */
html body .wk-msgs:not(#_){gap:14px;padding:6px 4px}
html body .wk-row:not(#_){display:flex;align-items:flex-end;gap:10px;max-width:100%}
html body .wk-row.mine:not(#_){flex-direction:row-reverse}
html body .wk-av:not(#_){flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:700;color:hsl(var(--h,220) 45% 28%);background:hsl(var(--h,220) 70% 88%);align-self:flex-end}
html body .wk-av.k:not(#_){border-radius:9px;background:#16161b;--mark:#fff;--eye:#16161b}.wk-av.k svg{width:22px;height:22px}
html body .wk-msg:not(#_){max-width:min(72%,620px);border:0;border-radius:14px;padding:9px 14px;background:var(--panel,#f2f3f5);color:var(--ink);box-shadow:none;font-size:14.5px;line-height:1.45}
html body .wk-msg.mine:not(#_){background:var(--chat-mine);color:var(--chat-mine-ink)}
html body .wk-msg.mine a:not(#_){color:var(--chat-mine-ink)}
html body .wk-msg small:not(#_){font-size:12px}
html body .wk-tm:not(#_){flex:none;font-size:12px;color:var(--muted);align-self:flex-end;padding-bottom:4px;white-space:nowrap}
html body .wk-msg.kasper:not(#_){max-width:min(80%,680px);background:var(--bg,#fff);color:var(--ink);border:1px solid var(--line,#e6e6ea);border-radius:16px;padding:12px 16px;box-shadow:0 8px 24px -14px rgba(20,20,40,.28)}
html body .wk-kh:not(#_){display:flex;align-items:center;gap:6px;color:var(--muted)}html body .wk-kh b:not(#_){color:var(--ink);font-size:13px}
html body .wk-kh:not(#_)::before{content:"✳";font-size:13px;color:var(--ink)}
html body .ch-kcard:not(#_){border-top:1px solid var(--line,#ececf0);padding-top:10px;margin-top:6px}
html body .wk-msg.pinned:not(#_){box-shadow:0 0 0 1.5px var(--review-line,#e5b85c)}
html body .ch-box:not(#_){display:grid;gap:0;border:1px solid var(--line,#e3e3e8);border-radius:18px;background:var(--bg,#fff);padding:10px 12px 8px;box-shadow:0 6px 20px -16px rgba(20,20,40,.35)}
html body .ch-box textarea.find:not(#_){border:0!important;box-shadow:none!important;background:transparent!important;padding:4px 4px 10px!important;min-height:44px;border-radius:0!important;outline:none}
html body .ch-bar:not(#_){display:flex;justify-content:space-between;align-items:center}
html body .ch-box .ch-add:not(#_){width:30px;height:30px;border-radius:50%;background:transparent;box-shadow:0 0 0 1px var(--line-2,#dcdce2) inset}
html body .ch-box .ch-add svg:not(#_){width:16px;height:16px}
html body .ch-box .ch-send:not(#_){width:30px;height:30px}html body .ch-box .ch-send svg:not(#_){width:16px;height:16px}
html body .ch-box:focus-within:not(#_){border-color:var(--line-2,#c9c9d2)}
/* the chat list: a picked chat is a light grey row, not a dark one; pictures round */
html body .cx-row.on:not(#_){background:var(--panel,#f2f3f5);color:var(--ink)}html body .cx-row.on small:not(#_){color:var(--muted)}
html body .cx-row.on .cx-ic:not(#_){background:var(--soft);color:var(--ink)}
html body .cx-ic:not(#_){border-radius:50%;width:34px;height:34px}html body .cx-ic.k-group:not(#_){border-radius:10px}
html body .cx-row:not(#_){padding:9px 10px;align-items:flex-start}html body .cx-m:not(#_){align-self:flex-start}
:root[data-theme="dark"] body .wk-av.k:not(#_){background:#fff;--mark:#16161b;--eye:#fff}
html body .ch-box textarea.find:not(#_):not(#_):not(#_),html body .ch-box textarea.find:focus:not(#_):not(#_):not(#_),html body .ch-box textarea.find:focus-visible:not(#_):not(#_):not(#_){border:0!important;box-shadow:none!important;outline:none!important;background:transparent!important}
html body .ch-box:focus-within:not(#_){border-color:var(--focus,#9aa4ff);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus,#9aa4ff) 18%,transparent)}
/* Pong (public/pong.js) */
.pg-ov{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;background:rgba(12,12,16,.45);backdrop-filter:blur(3px);padding:16px}
.pg-box{width:min(680px,100%);background:var(--bg,#fff);color:var(--ink);border:1.5px solid var(--ink,#111);border-radius:22px;padding:14px 16px 12px;box-shadow:10px 12px 0 -2px rgba(0,0,0,.12),20px 24px 0 -4px rgba(0,0,0,.07);font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace}
.pg-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}.pg-top b{font-size:14px;letter-spacing:.02em}
.pg-st{flex:1;font-size:12.5px;color:var(--muted)}
.pg-x{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--ink,#111);background:none;color:var(--ink);font-size:18px;line-height:1;cursor:pointer}
.pg-box canvas{display:block;width:100%;height:auto;aspect-ratio:640/400;border-radius:12px;border:1px solid var(--line,#e3e3e8);touch-action:none;cursor:none}
.pg-bar{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}.pg-bar small{flex:1;color:var(--muted);font-size:12px}.pg-acts{display:flex;gap:8px}
/* Flappy Kasper (public/flappy.js): the arcade's score card */
.fk-box{width:min(440px,100%)}
.fk-box canvas{aspect-ratio:400/560;cursor:pointer;height:auto;width:min(100%,calc((100dvh - 250px) * 400 / 560));margin:0 auto}
.fk-box{max-height:calc(100dvh - 24px);overflow:auto}@media(max-width:480px){.pg-ov.fk-ov{padding:10px}.fk-box{padding:12px}.fk-card b{font-size:22px}}
.fk-card{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 10px}
.fk-card>div{border:1.5px solid var(--ink,#111);border-radius:12px;padding:8px 12px;display:grid;gap:2px}
.fk-card small{font-size:11px;letter-spacing:.08em;color:var(--muted)}.fk-card b{font-size:26px;letter-spacing:.06em;line-height:1.1}.fk-card em{font-style:normal;font-size:12px;letter-spacing:.06em}

/* Proposals and the price list (public/proposals.js) */
.pp-block h3{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pp-row{border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 12px;margin-bottom:8px;background:var(--surface)}.pp-row.old{opacity:.7}
.pp-rt{display:flex;align-items:center;justify-content:space-between;gap:8px}.pp-row small{display:block;color:var(--ink-subtle);margin-top:2px}
.pp-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}.pp-acts .grow{flex:1}
.pp-pill{display:inline-block;padding:2px 9px;border-radius:var(--radius-pill);font-size:11.5px;font-weight:600;white-space:nowrap;vertical-align:middle}
.pp-pill.t-idle{background:var(--status-idle-bg);color:var(--status-idle-fg)}.pp-pill.t-working{background:var(--status-working-bg);color:var(--status-working-fg)}.pp-pill.t-stuck{background:var(--status-stuck-bg);color:var(--status-stuck-fg)}.pp-pill.t-done{background:var(--status-done-bg);color:var(--status-done-fg)}.pp-pill.t-review{background:var(--status-review-bg);color:var(--status-review-fg)}
.pp-page{max-width:1400px}.pp-crumb{color:var(--ink-subtle);font-size:13px}.pp-crumb a{color:inherit}
.pp-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 14px}.pp-h .h1{margin:0}.pp-h .grow{flex:1}.pp-saving{color:var(--ink-subtle)}.pp-wait{color:var(--status-working-fg);font-weight:600;font-size:13px}
.btn-s.ok{background:var(--accent-green-soft);border-color:var(--accent-green-pastel);color:var(--accent-green)}
.pp-grid{display:grid;grid-template-columns:190px minmax(0,1fr) 290px;gap:20px;align-items:start}
.pp-steps{display:flex;flex-direction:column;gap:2px;position:sticky;top:12px}.pp-steps button{all:unset;cursor:pointer;display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:var(--radius-md);color:var(--ink-muted);border:1px solid transparent}
.pp-steps button i{font-style:normal;width:20px;height:20px;border-radius:50%;background:var(--status-idle-bg);display:grid;place-items:center;font-size:11px;font-weight:700}
.pp-steps button.on{background:var(--surface);color:var(--c-ink);font-weight:600;border-color:var(--border)}.pp-steps button.on i{background:var(--c-ink);color:var(--surface)}.pp-steps button:focus-visible{outline:2px solid var(--focus)}
.pp-steps small{color:var(--ink-subtle);padding:12px;font-size:12px}
.pp-main{min-width:0}.pp-h2{font-size:16px;margin:0 0 10px}.pp-hint{color:var(--ink-subtle);font-size:12.5px;margin:6px 0 12px}
.pp-form{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-bottom:10px}.pp-f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-subtle)}.pp-f.wide{grid-column:1/-1}.pp-f .find{width:100%}
.pp-chk{flex-direction:row;align-items:center;gap:8px;color:var(--c-ink);font-size:13px}
html body .pp-kbar:not(#_){display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* a ⋯ with nothing in it is not shown (My work has none since 31 October 2026; Who sees this and Settings fill it on other pages) */
html body .bk-more:has(> .bk-pop:empty):not(#_){display:none}
/* the price list's edit panel: every field on its own line (Rami, 31 October 2026: "Turned off" ran into the Sessions label) */
html body .pp-edit>label:not(#_){display:flex;flex-direction:column;gap:4px;margin:0 0 10px}
html body .pp-edit>label.pp-chk:not(#_){flex-direction:row;align-items:center;gap:8px}
.pp-two{display:flex;gap:8px}.pp-two>*{flex:1}
.pp-sec{display:flex;align-items:center;gap:8px;margin:18px 0 8px;font-size:13px}.pp-sec .grow{flex:1}.pp-sec small{color:var(--ink-subtle)}.pp-sec.off{opacity:.55}
.pp-k{display:inline-block;padding:1px 8px;border-radius:var(--radius-pill);font-size:11px;font-weight:600;background:var(--status-idle-bg);color:var(--status-idle-fg)}.pp-k.m{background:var(--status-done-bg);color:var(--status-done-fg)}.pp-k.o{background:var(--accent-green-soft);color:var(--accent-green)}.pp-k.b{background:var(--status-review-bg);color:var(--status-review-fg)}
.pp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}.pp-cards.off{opacity:.5;pointer-events:none}
.pp-pk{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:start;border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 14px;background:var(--surface);cursor:pointer;font:inherit;color:inherit}
.pp-pk:hover{border-color:var(--border-strong)}.pp-pk.on{border:2px solid var(--c-ink);padding:11px 13px}.pp-pk:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.pp-pk[aria-disabled=true]{cursor:default}
.pp-pk b{font-size:14px;padding-inline-end:24px}.pp-price{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}.pp-price small{font-size:12px;font-weight:400;color:var(--ink-subtle)}
.pp-pk ul{margin:6px 0 0;padding-inline-start:16px;color:var(--ink-muted);font-size:12px}
.pp-tick{position:absolute;top:10px;inset-inline-end:10px;width:18px;height:18px;border-radius:5px;border:2px solid var(--border-strong)}.pp-pk.on .pp-tick{background:var(--c-ink);border-color:var(--c-ink)}.pp-pk.on .pp-tick::after{content:"✓";color:var(--surface);font-size:11px;display:block;text-align:center;line-height:14px}
.pp-opt{font-size:11px;color:var(--ink-subtle);border:1px solid var(--border);border-radius:var(--radius-pill);padding:0 6px;cursor:pointer;white-space:nowrap}
.pp-own{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-subtle);margin-top:8px}.pp-own .find{width:100px;padding:4px 8px;min-height:0}
.pp-lines{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:6px 12px}
.pp-line{display:grid;grid-template-columns:minmax(0,1fr) 84px 64px 100px 90px 24px;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--border)}.pp-line small{display:block;color:var(--ink-subtle)}.pp-line .n{text-align:end}
.pp-addl{display:flex;gap:8px;flex-wrap:wrap;padding:8px 0}.pp-addl>select{flex:1;min-width:200px}.pp-ownl{display:flex;gap:6px;flex:2;min-width:300px}.pp-ownl input[name=name]{flex:1}.pp-ownl input[name=price]{width:90px}
.pp-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}.pp-plan{all:unset;cursor:pointer;border:1px solid var(--border);border-radius:var(--radius-md);padding:10px;background:var(--surface);display:flex;flex-direction:column;gap:2px}.pp-plan small{color:var(--ink-subtle);font-size:11.5px}.pp-plan.on{border:2px solid var(--c-ink);padding:9px}
.pp-ta{width:100%;font:inherit;line-height:1.6}
.pp-how{padding-inline-start:18px;color:var(--ink-muted)}.pp-how li{margin-bottom:8px}
.pp-owns{display:flex;gap:4px 14px;flex-wrap:wrap}.pp-owns .pp-own input[data-ppqty]{width:64px}
.pp-nav{display:flex;gap:8px;align-items:center;margin-top:22px;padding-top:14px;border-top:1px solid var(--border)}.pp-nav .grow{flex:1}
.pp-ways{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.pp-way{border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;background:var(--surface);display:flex;flex-direction:column;gap:4px}.pp-way:first-child{border:2px solid var(--c-ink);padding:13px}.pp-way>b{font-size:14px}.pp-way>b+.pp-k{align-self:flex-start}.pp-way p{margin:2px 0;color:var(--ink-muted)}.pp-way small{color:var(--ink-subtle);font-size:11.5px}
@media(max-width:640px){.pp-ways{grid-template-columns:1fr}}
.pp-tot{position:sticky;top:12px}.pp-tc{padding:16px 18px}.pp-tc>b{display:block;margin-bottom:8px}.pp-tc>div{display:flex;justify-content:space-between;gap:10px;padding:3px 0;color:var(--ink-muted)}
.pp-tc .big{font-size:18px;font-weight:700;color:var(--c-ink);border-top:2px solid var(--c-ink);padding-top:8px;margin-top:6px}.pp-tc>small{display:block;color:var(--ink-subtle);font-size:11.5px}
.pp-sold{margin-top:12px;border-top:1px solid var(--border);padding-top:8px;display:block!important}.pp-sold div{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink-muted);padding:2px 0}
.pp-warn{background:var(--status-working-bg);color:var(--status-working-fg);border-radius:var(--radius-md);padding:8px 10px;font-size:12.5px;margin:10px 0 0}
.pp-ban{border-radius:var(--radius-md);padding:10px 12px;margin-bottom:12px;background:var(--status-idle-bg);color:var(--c-ink);font-size:13px}.pp-ban.done{background:var(--status-done-bg)}.pp-ban.stuck{background:var(--status-stuck-bg)}.pp-ban.review{background:var(--status-review-bg)}
.pp-ban p{margin:6px 0}.pp-backf textarea{width:100%;margin:6px 0}
.pp-link{all:unset;cursor:pointer;color:var(--accent-sky);font-weight:600;font-size:12.5px}.pp-link:hover{text-decoration:underline}
.n{font-variant-numeric:tabular-nums}
.pp-pl .pp-plbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.pp-plbar .grow{flex:1}
.pp-tab{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-md);margin-bottom:10px;font-size:13px}
.pp-tab th{font-size:11.5px;color:var(--ink-subtle);font-weight:600;text-align:start;padding:8px 10px;background:var(--surface-sunken);border-bottom:1px solid var(--border)}.pp-tab td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top}.pp-tab tr.off{opacity:.55}.pp-tab .n{text-align:end;white-space:nowrap}
.pp-dim{color:var(--ink-subtle)}.pp-none{color:var(--ink-subtle);font-style:italic}
.pp-edit textarea{width:100%}.pp-parts{border:1px solid var(--border);border-radius:var(--radius-md);padding:10px;display:flex;flex-direction:column;gap:4px}.pp-parts legend{font-size:12px;color:var(--ink-subtle)}.pp-part{display:flex;justify-content:space-between;gap:8px;font-size:13px}
@media(max-width:1100px){.pp-grid{grid-template-columns:1fr}.pp-steps{flex-direction:row;overflow-x:auto;position:static}.pp-steps small{display:none}.pp-tot{position:static}}
@media(max-width:640px){.pp-form{grid-template-columns:1fr}.pp-plans{grid-template-columns:1fr 1fr}.pp-line{grid-template-columns:1fr 70px 56px;row-gap:4px}.pp-line .n,.pp-line .sl-x{grid-column:auto}.pp-tab{display:block;overflow-x:auto}}
.pp-h{padding-inline-end:52px}/* Kasper's button sits top right */
.pp-own{flex-wrap:nowrap}.pp-own input.find{width:110px!important;min-width:0;flex:none}
.pp-line input.find{width:100%;min-width:0}
.pp-addl{flex-direction:column}.pp-addl>select{width:100%}.pp-ownl{min-width:0;width:100%}.pp-ownl input[name=name]{min-width:0}.pp-ownl select{width:auto;flex:none}
.pp-link-row{display:flex;gap:8px;align-items:center;margin:8px 0}.pp-dh{margin-top:22px}.pp-link-row .find{flex:1;min-width:0;font-size:12.5px}
/* Price list: a kind's How we work and Our work for the pricing presentation (public/proposals.js journeyBox; 2 November 2026) */
.pp-jw{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-top:20px}.pp-jsec{border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;background:var(--surface);min-width:0}
.pp-jhd{display:flex;align-items:center;gap:8px}.pp-jhd .pp-h2{margin:0}.pp-jhd .grow{flex:1}.pp-jph{margin:10px 0 0}.pp-jph ol{margin:6px 0 0;padding-inline-start:22px;display:grid;gap:6px;font-size:13px}.pp-jnote{display:block;margin-top:3px;padding:3px 8px;border-radius:var(--radius-md);background:var(--status-idle-bg);color:var(--ink-muted);font-size:12px}
.pp-exrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--border)}.pp-hint+.pp-exrow{border-top:0}.pp-exrow>:last-child{margin-inline-start:auto}.pp-exsw{width:64px;aspect-ratio:16/9;border-radius:var(--radius-sm);overflow:hidden;flex:none}.pp-exsw img{width:100%;height:100%;object-fit:cover;display:block}.pp-exn{flex:1;min-width:0;display:flex;flex-direction:column}.pp-exn small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-step{margin:0 0 12px}.pp-step>label{display:flex;flex-direction:column;gap:4px;margin:0 0 8px}.pp-step .pp-acts .grow{flex:1}.pp-note{border-radius:var(--radius-md);background:var(--status-idle-bg);padding:8px 10px;margin:4px 0 8px}.pp-note>label{display:flex;flex-direction:column;gap:4px;margin:0 0 6px}
.pp-parts>label:not(.pp-chk){display:flex;flex-direction:column;gap:4px;margin:2px 0 6px}.pp-parts>label.pp-chk{display:flex;align-items:center;gap:8px}
.pp-cov{aspect-ratio:16/9;border-radius:var(--radius-md);overflow:hidden;display:grid;place-items:center;background:#111;color:#fff;margin-bottom:8px}.pp-cov img{width:100%;height:100%;object-fit:cover;display:block}.pp-covt{display:grid;gap:6px;text-align:center;font-family:Georgia,serif;padding:12px}.pp-covt *{font-family:inherit}.pp-covt small{font-size:10px;letter-spacing:.3em;text-transform:uppercase}.pp-covt b{font-size:20px;font-weight:400}.pp-covt i{font-size:10px;font-style:normal;opacity:.8}
.pp-two input[type=color]{width:100%;height:36px;padding:2px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.pp-paper{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0;padding:10px 12px;border:1px dashed var(--border-strong);border-radius:var(--radius-md)}
.pp-paper label.btn-s{cursor:pointer}
.pp-sig{display:block;margin-top:2px}
/* the client's answer in colour (Rami, 31 October 2026): accepted or signed green, changes asked red */
.pp-pill.t-yes{background:var(--accent-green-soft);color:var(--accent-green);margin-inline-start:4px}.pp-pill.t-no{background:var(--accent-rose-soft);color:var(--accent-rose);margin-inline-start:4px}.pp-yes{color:var(--accent-green)}.pp-no{color:var(--accent-rose)}.pp-ban.yes{background:var(--accent-green-soft)}.pp-ban.no{background:var(--accent-rose-soft)}.sl-wait{display:block;font-weight:600}.sl-wait.yes{color:var(--accent-green)}.sl-wait.warn{color:var(--status-working-fg)}.sl-waitb{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-radius:var(--radius-md);padding:10px 14px;margin:0 0 12px}.sl-waitb.yes{background:var(--accent-green-soft);color:var(--accent-green)}.sl-waitb.warn{background:var(--status-working-bg);color:var(--status-working-fg)}.pp-won{display:block;color:var(--ink-muted);margin:-4px 0 10px}.sl-x{display:inline-block;padding:0 7px;border-radius:var(--radius-pill);font-size:11px;font-weight:600;background:var(--status-idle-bg);color:var(--status-idle-fg);margin-inline-start:6px}
/* the contract on a sent proposal (public/proposals.js contractBox) */
.pp-ctr .pp-cform{display:grid;gap:10px;margin-top:10px}.pp-ctr .pp-cform .pp-f{display:grid;gap:4px}.pp-ctr .pp-paper{margin-top:12px}.pp-ctr details.pp-more{margin-top:10px}.pp-ctr details.pp-more>summary{cursor:pointer;color:var(--ink-subtle);font-size:13px}.pp-clauses{white-space:pre-wrap;margin:8px 0}
/* amendments and Google Drive on a signed contract (public/proposals.js amendmentsBox, driveLine) */
.pp-am{background:var(--panel,#fff);border-radius:var(--radius-md);padding:12px 14px;margin:10px 0;display:grid;gap:6px}.pp-am .pp-pill{margin-inline-start:6px}.pp-am p{margin:0}.pp-drv{font-weight:600}.pp-drv.ok{color:var(--status-done-fg)}.pp-drv.no{color:var(--status-stuck-fg)}.pp-drive{border:0;padding:0;margin:12px 0;display:grid;gap:8px}.pp-drive legend{font-weight:600;margin-bottom:4px}.pp-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
/* what the client bought, in the handoff (public/sales.js bought) */
.ho-buy{padding:8px 0;border-top:1px solid var(--border)}.ho-buy small{color:var(--ink-subtle);margin-inline-start:6px}.ho-part{margin:4px 0 0 10px}.ho-inc{margin:4px 0 0;padding-inline-start:18px;color:var(--ink-subtle);font-size:13px}.ho-buy p{margin:4px 0 0}

/* Sales: What we sell as ticks; the Won step (October 2026) */
.sl-wsel{display:grid;gap:6px;font-size:12.5px}.sl-wsel>span:first-child{color:var(--muted)}
.sl-grid .sl-wsel{grid-column:1/-1}
.sl-kinds{display:flex;flex-wrap:wrap;gap:6px}
.sl-kinds .sl-tk,.wk-book .sl-kinds .sl-tk,.sl-grid .sl-kinds .sl-tk{display:inline-flex;flex-direction:row;align-items:center;gap:6px;width:auto;padding:6px 12px;border-radius:999px;background:var(--panel-2,rgba(127,127,127,.08));cursor:pointer;font-size:13px;color:var(--ink)}
.sl-kinds .sl-tk:has(input:checked){background:var(--ink);color:var(--bg)}
.sl-tk input{margin:0;accent-color:currentColor}
.sl-kinds .sl-tk[hidden]{display:none}
.sl-box .wk-note{margin:0}
.sl-kinds[inert]{opacity:.7}
.sl-kn{color:inherit;text-decoration:none}.sl-kn.empty{color:var(--muted)}
.sl-box em,.sl-ct em{font-style:normal;color:var(--muted);font-size:11px}
.sl-ct{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.sl-ct legend{font-size:12.5px;color:var(--muted);padding:0 0 4px}
@media (max-width:640px){.sl-ct{grid-template-columns:1fr}}
/* Won and Lost in the side panel (31 October 2026): the panel is the box, so no coloured box inside it; needed first, the rest folded */
.sl-box.sl-inp{background:none;box-shadow:none;padding:0;border-radius:0;gap:14px}
.sl-inp .sl-wlead{font-size:15px;font-weight:600;color:var(--ink);margin:0}
.sl-inp .sl-ct{grid-template-columns:1fr}
.sl-fold{background:var(--surface-sunken);border-radius:12px;padding:10px 14px}
.sl-fold>summary{cursor:pointer;font-weight:600;font-size:13px;list-style-position:inside}
.sl-fold.sl-how>summary{font-weight:500;color:var(--muted)}
.sl-foldb{display:grid;gap:12px;margin-top:12px}
.sl-inp .sl-werr[hidden]{display:none}
.sl-same{background:var(--surface-sunken);border-radius:12px;padding:12px 14px;display:grid;gap:10px}.sl-same[hidden]{display:none}.sl-same p{margin:0;font-size:13px;line-height:1.45}.sl-same .wk-do{display:flex;flex-wrap:wrap;gap:8px}
.sl-inp label.ed-check{display:flex;align-items:center;gap:8px;font-size:13px}
.sl-inp .wk-do{position:sticky;bottom:-1px;background:var(--sheet,var(--bg));padding:10px 0 2px;margin:0;justify-content:flex-start}
/* a cancelled shoot's Restore shoot, with what it does under it */
html body .bk-danger.sd-restore:not(#_):not(#_){display:grid;gap:6px;justify-items:start;text-align:start}
html body .sd-restore small{color:var(--ink-muted);font-size:12.5px}
html body .ck-opt{color:var(--ink-muted);font-weight:400;font-size:12px}
/* a post's or a shoot job's one due day and whether it was on time, in its panel */
.sp-prom{display:grid;gap:6px;margin:12px 0 0;padding:10px 12px;border-radius:var(--radius);background:var(--surface-2,var(--bg-2,transparent))}
.sp-prom>small{color:var(--muted);font-size:12px}
.sp-prom p,.pp-prom{margin:0;font-size:13px;line-height:1.5}
.pp-prom{margin:8px 0 4px}
.sp-pok{color:var(--status-done-fg,#1f7a4d);font-weight:600;white-space:nowrap}
.sp-pmiss{color:var(--bad);font-weight:600}
.sp-sendrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sp-sent{display:inline-flex;gap:6px;align-items:center}.sp-sent small{color:var(--muted)}
/* the small "i" beside a button: its text shows under it, and is its tooltip too */
.wk-info{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.wk-i{font:italic 700 11px Georgia,serif;width:20px;height:20px;border-radius:50%;border:0;box-shadow:0 0 0 1.5px var(--muted) inset;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;padding:0}
.wk-i[aria-expanded="true"],.wk-i:hover{background:var(--ink);color:var(--bg);box-shadow:none}
.wk-itext{flex-basis:100%;font-size:12.5px;color:var(--ink-muted,var(--muted));max-width:44ch}
/* Admin › Work setup › Deadlines: one row per number */
.wk-dl{display:grid;gap:6px;margin-top:8px}
.wk-dlr{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.wk-dln{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}.wk-dln .find{width:76px}
/* Who sees this (public/whosees.js): a quiet pill next to an area's title for Owners and Admins, and its side panel */
.sees-btn,.as-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border:0;border-radius:999px;background:var(--field);color:var(--muted);font:inherit;font-size:12.5px;cursor:pointer;align-self:center;flex:none;max-width:100%;white-space:nowrap}
.sees-btn svg,.as-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;flex:none}.sees-btn span,.as-btn span{font-weight:600;color:var(--ink)}
.sees-btn em{font-style:normal;overflow:hidden;text-overflow:ellipsis}.sees-btn em::before{content:"·";margin-right:6px}
.sees-btn:hover,.as-btn:hover{background:var(--ink);color:var(--bg)}.sees-btn:hover span,.as-btn:hover span{color:var(--bg)}
@media (max-width:860px){.sees-btn span{display:none}.sees-btn em::before{content:none}}
.sees-p{display:grid;gap:12px}.sees-p h4{margin:6px 0 0;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.sees-p .sub{margin:0}
.sees-sec{display:grid;gap:2px}
.sees-tick{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:10px;cursor:pointer}.sees-tick:hover{background:var(--field)}
.sees-tick input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--primary);flex:none}.sees-tick span{display:grid;gap:2px}.sees-tick small{color:var(--muted);font-size:12.5px}
.sees-ppl{display:flex;flex-wrap:wrap;gap:6px}
.sees-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 6px 4px 12px;border-radius:999px;background:var(--field);font-size:13px}
.sees-chip button{border:0;background:none;color:var(--muted);font-size:16px;line-height:1;width:22px;height:22px;border-radius:50%;cursor:pointer}.sees-chip button:hover{background:var(--ink);color:var(--bg)}
.sees-p select{width:100%}.sees-msg{color:var(--danger,#c0392b)}
.acc-sees th,.acc-sees td{text-align:left}.acc-sees td:last-child{text-align:right}
/* Settings on the page (public/areaset.js): the panel's sections */
.sp.sp-wide{width:min(900px,calc(100vw - 20px))}
.as-p{display:grid;gap:22px}.as-sec{display:grid;gap:10px}.as-sec>h4{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.as-sec .sub{margin:0}
.as-do{border-top:1px solid var(--line);padding-top:14px}.as-sec>button,.as-sec>.ut-add{justify-self:start}
.acc-moved ul{margin:6px 0 0;padding-left:18px}.acc-moved a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* Reports, rebuilt around action (public/reports.js): Clients at risk and Routines */
.rp-q{margin:4px 0 14px}.rp-q b{font-size:15px}.rp-q .sub{margin:2px 0 0;max-width:80ch}
.rk-tiles{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}.rk-t{border-radius:12px;padding:10px 14px;min-width:140px;background:var(--field)}.rk-t b{display:block;font-size:22px}.rk-t small{color:var(--muted)}
.rk-t.red{background:var(--t-red-bg,#fde6ea)}.rk-t.red b{color:var(--t-red,#be123c)}.rk-t.amber{background:var(--t-orange-bg,#fff1d6)}.rk-t.amber b{color:var(--t-orange,#b45309)}.rk-t.rk-ok{background:var(--t-green-bg,#e2f5ea)}
/* every row shares the list's four columns (subgrid), so each avatar and name starts on the same line whatever the button's words
   (Rami, 31 October 2026: rows with the lead or two names sat further right); a long name is cut with … and shown in full on hover */
.rk-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr) minmax(0,1.3fr) max-content;column-gap:14px;row-gap:6px}
.rk-head,.rk-row{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:start}
.rk-head{font-size:12px;color:var(--muted);padding:0 14px}
.rk-row{background:var(--sheet,var(--bg));border-radius:12px;padding:12px 14px;border-left:4px solid transparent}.rk-row.red{border-left-color:var(--t-red,#e11d48)}.rk-row.amber{border-left-color:var(--t-orange,#f59e0b)}
.rk-c{display:grid;gap:2px}.rk-c small{color:var(--muted);font-size:12px}
.rk-why{list-style:none;margin:0;padding:0;display:grid;gap:4px}.rk-why li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:7px;vertical-align:middle}
.rk-why li.red{color:var(--t-red,#be123c)}.rk-why li.amber{color:var(--t-orange,#b45309)}
.rk-who,.tb-who{display:flex;gap:8px;align-items:center}.rk-who span:last-child,.tb-who span:last-child{display:grid}.rk-who small,.tb-who small{color:var(--muted);font-size:12px}
.rk-who{min-width:0}.rk-who>span:last-child{min-width:0}.rk-who :is(b,small){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-who .av.none{background:none;box-shadow:inset 0 0 0 1.5px var(--border-strong);color:var(--ink-subtle)}
.rk-who .av,.tb-who .av{width:26px;height:26px;border-radius:50%;background:var(--field);display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.rk-go{justify-self:end;white-space:nowrap}.rk-none{margin:10px 0}
.rp-fold{background:var(--sheet,var(--bg));border-radius:12px;padding:12px 14px;margin-top:10px}.rp-fold>summary{cursor:pointer;font-weight:600}.rp-foldb{margin-top:12px}
.rk-fine{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.rk-fine a{background:var(--field);border-radius:999px;padding:4px 10px;color:inherit;text-decoration:none;font-size:13px}.rk-fine small{color:var(--muted)}
.tb-list{display:grid;gap:6px}.tb-row{display:grid;grid-template-columns:minmax(180px,1.2fr) 70px minmax(220px,3fr);gap:14px;align-items:center;background:var(--sheet,var(--bg));border-radius:12px;padding:10px 14px;border-left:4px solid transparent}
.tb-row.tb-red{border-left-color:var(--t-red,#e11d48)}.tb-row.tb-amber{border-left-color:var(--t-orange,#f59e0b)}.tb-row.tb-ok{border-left-color:var(--t-green,#16a34a)}
.tb-pct{font-size:18px}.tb-row.tb-red .tb-pct{color:var(--t-red,#be123c)}.tb-row.tb-amber .tb-pct{color:var(--t-orange,#b45309)}
.tb-miss{display:flex;flex-wrap:wrap;gap:6px}.tb-miss span{background:var(--field);border-radius:999px;padding:3px 10px;font-size:12.5px}.tb-miss .ok{color:var(--muted)}
@media(max-width:860px){.rk-head{display:none}.rk-list{grid-template-columns:minmax(0,1fr)}.rk-row{grid-template-columns:minmax(0,1fr);row-gap:10px}.rk-go{justify-self:start}.tb-row{grid-template-columns:1fr auto}.tb-miss{grid-column:1/-1}}

/* ---- Home (Rami, 15 October 2026): dark header with the welcome and your three priorities as cards; everything else, Coming up
   at Circle and the month calendar below. Mockup: review/home2-mockup.html ?v=cards. hm- names only, so nothing else is touched. */
:root{--hm-hero:#2a2b2f;--hm-k1:#c7b6fb;--hm-k2:#fbdcb6;--hm-k3:#e7f36a;--hm-tile:#f4f4f5;--hm-tile-line:#ececee;--hm-line:#e3e4e7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hm-hero:#1f2023;--hm-k1:#b6a3f2;--hm-k2:#ecc79a;--hm-k3:#d6e35c;--hm-tile:#1d1e21;--hm-tile-line:#26282b;--hm-line:#2a2c30}}
:root[data-theme="dark"]{--hm-hero:#1f2023;--hm-k1:#b6a3f2;--hm-k2:#ecc79a;--hm-k3:#d6e35c;--hm-tile:#1d1e21;--hm-tile-line:#26282b;--hm-line:#2a2c30}
html body #p-home .stage.briefed>#annHome,html body #p-home .stage.briefed>#celebrate{display:none!important}
html body #p-home .bf.hm:not(#_){display:grid;gap:18px;background:none;padding:0;margin:0;box-shadow:none;border:0}
.hm-top{display:flex;align-items:flex-start;gap:12px}.hm-search{flex:1;min-width:0;max-width:640px}
html body .hm-search .ask:not(#_){margin:0;max-width:none}
.hm-bell{margin-left:auto;position:relative;width:40px;height:40px;border-radius:12px;border:1px solid var(--hm-line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--c-ink)}
.hm-bell svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hm-bell i{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#d4382c;color:#fff;font-style:normal;font-size:10.5px;font-weight:700;display:grid;place-items:center;border:2px solid var(--c-bg)}
.hm-hero{background:var(--hm-hero);color:#fff;border-radius:22px;padding:24px 24px 24px 32px;align-self:start;display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:24px;align-items:center}
.hm-dl{display:flex;align-items:center;gap:10px}.hm-dl .hm-bell{margin-left:auto;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}.hm-dl .hm-bell i{border-color:var(--hm-hero)}
.hm-hi small{color:#a9abb2;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase}.hm-hi h2{font-size:34px;line-height:1.08;letter-spacing:-.02em;margin:8px 0 10px;color:#fff}
.hm-ctx{color:#d6d7dc;font-size:15px;line-height:1.5;max-width:360px;margin:0}
.hm-cards{display:grid;grid-template-columns:repeat(3,200px);gap:12px}
.hm-card{border-radius:16px;padding:14px 15px;display:flex;flex-direction:column;gap:6px;min-height:230px;color:#17181a;text-decoration:none;transition:transform var(--dur-fast) var(--ease-out)}
.hm-card:hover{transform:translateY(-2px)}.hm-card.k1{background:var(--hm-k1)}.hm-card.k2{background:var(--hm-k2)}.hm-card.k3{background:var(--hm-k3)}
.hm-card.hm-none{grid-column:1/-1;background:#36373c;color:#e7e8ec;min-height:0;justify-content:center}.hm-card.hm-none small{color:#b9bbc2}
.hm-cn{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;opacity:.75}
.hm-pill{font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px;opacity:1}.hm-pill.a{background:rgba(255,255,255,.65);color:#7a4100}.hm-pill.r{background:#17181a;color:#fff}
.hm-ic svg{width:22px;height:22px;stroke:#17181a;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:8px}
.hm-card b{font-size:16px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.hm-card>small{font-size:12.5px;opacity:.78}
.hm-cf{margin-top:auto;display:grid;gap:7px}.hm-cf small{font-size:11px;opacity:.75}
.hm-bar{display:block;height:5px;border-radius:3px;background:rgba(0,0,0,.12);overflow:hidden}.hm-bar i{display:block;height:100%;background:#17181a;border-radius:3px}
.hm-open{justify-self:end;background:#17181a;color:#fff;border-radius:999px;padding:6px 15px;font-size:12px;font-weight:600}
.hm-bot{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;align-items:start}
.hm-left{display:grid;gap:22px}
.hm-h{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;margin:0 0 6px 2px}.hm-h i{font-style:normal;font-size:11.5px;color:var(--ink-subtle);font-weight:600}.hm-h a{margin-left:auto;font-size:12.5px;font-weight:500;color:var(--focus);text-decoration:none}
.hm-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:9px 2px;border-top:1px solid var(--hm-line);color:var(--c-ink);text-decoration:none;font-size:13px}
.hm-plate .hm-h+.hm-row{border-top:0}.hm-row:hover b{text-decoration:underline}
.hm-k{font-size:11.5px;font-weight:700;border-radius:5px;padding:2px 7px;background:var(--surface-sunken);color:var(--ink-muted)}
.hm-row b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hm-row small{color:var(--ink-subtle);font-size:12px;white-space:nowrap}.hm-w{color:var(--ink-subtle);font-size:12px;white-space:nowrap}.hm-w.late{color:#d4382c;font-weight:600}
.hm-more{display:block;padding:8px 2px;font-size:12.5px;color:var(--focus);text-decoration:none}
.hm-empty{color:var(--ink-subtle);font-size:13px;margin:6px 2px}
.hm-ckl{display:grid;grid-template-columns:auto auto 1fr auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--hm-line);border-radius:14px;padding:10px 14px;cursor:pointer;font:inherit;color:var(--c-ink);text-align:left}
.hm-ckl small{color:var(--ink-subtle);font-size:12px}.hm-ckl .hm-bar{background:var(--surface-sunken)}.hm-ckl .hm-bar i{background:var(--c-ink)}.hm-ckl .hm-open{background:var(--c-ink);color:var(--surface)}
.hm-ci{display:grid;grid-template-columns:24px auto 1fr auto;gap:8px;align-items:center;padding:8px 2px;border-top:1px solid var(--hm-line);font-size:13px;width:100%;background:none;border-left:0;border-right:0;border-bottom:0;font:inherit;color:var(--c-ink);text-align:left}
.hm-circle .hm-h+.hm-ci{border-top:0}button.hm-ci{cursor:pointer}.hm-ci b{font-weight:600}.hm-ci small{color:var(--ink-subtle);font-size:12px}.hm-cd{color:var(--ink-subtle);font-size:12px;white-space:nowrap}.hm-ce{font-size:15px;text-align:center}
.hm-cal{background:var(--surface);border:1px solid var(--hm-line);border-radius:20px;padding:16px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:0}
.hm-calm{padding-right:16px;border-right:1px solid var(--hm-line)}.hm-next{padding-left:16px;min-width:0}
.hm-calh{display:flex;align-items:center;gap:6px;margin-bottom:10px;min-height:28px}.hm-calh b{font-size:15px}.hm-calh b span{color:var(--ink-subtle);font-weight:600}
.hm-nav{width:28px;height:28px;border-radius:8px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--ink-muted)}.hm-nav:hover{background:var(--surface-sunken)}.hm-nav svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hm-cog{margin-left:auto;position:relative}
.hm-menu{position:absolute;right:0;top:34px;z-index:20;width:240px;background:var(--surface);border-radius:14px;box-shadow:var(--shadow-menu,0 8px 24px rgba(0,0,0,.16)),0 0 0 1px var(--hm-line);padding:12px 14px;display:grid;gap:9px;font-size:13px}
.hm-menu label{display:flex;align-items:center;gap:8px;cursor:pointer}.hm-menu small{color:var(--ink-subtle);font-size:11.5px}
.hm-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.hm-wd{background:var(--surface-sunken);border-radius:999px;text-align:center;font-size:11.5px;color:var(--ink-muted);padding:4px 0;font-weight:700}.hm-wd.on{background:var(--hm-line);color:var(--c-ink)}
.hm-t{aspect-ratio:1.18/1;background:var(--hm-tile);border:1px solid var(--hm-tile-line);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;padding:0 0 6px;font:inherit;font-size:13px;color:var(--c-ink);cursor:pointer}
.hm-t.out{background:transparent;border-color:transparent;color:var(--ink-subtle);opacity:.75;cursor:default}.hm-t:hover:not(.out){border-color:var(--border)}
.hm-t.now{background:var(--c-ink);color:var(--surface);border-color:var(--c-ink)}.hm-t.pick{box-shadow:0 0 0 2px var(--focus)}
.hm-dots{display:flex;gap:3px;height:6px}.hm-dots i,.hm-key i,.hm-menu i,.hm-ev i{width:6px;height:6px;border-radius:50%;background:var(--ink-subtle);display:inline-block;flex:none}
.k-dl i,.hm-dots i.k-dl,.hm-key i.k-dl,.hm-menu i.k-dl,.hm-ev.k-dl i{background:#d4382c}.hm-dots i.k-sh,.hm-key i.k-sh,.hm-menu i.k-sh,.hm-ev.k-sh i{background:#7a4bd1}
.hm-dots i.k-hol,.hm-key i.k-hol,.hm-menu i.k-hol,.hm-ev.k-hol i{background:#1f8a4c}.hm-dots i.k-bday,.hm-key i.k-bday,.hm-menu i.k-bday,.hm-ev.k-bday i{background:#d6589a}.hm-dots i.k-off,.hm-key i.k-off,.hm-menu i.k-off,.hm-ev.k-off i{background:#e08a1e}
.hm-dots i.k-brand,.hm-key i.k-brand,.hm-menu i.k-brand,.hm-ev.k-brand i{background:#d63d6e}.hm-dots i.k-kdate,.hm-key i.k-kdate,.hm-menu i.k-kdate,.hm-ev.k-kdate i{background:#7c3aed}
.hm-t.now .hm-dots i{background:var(--surface)}
.hm-key{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:11.5px;color:var(--ink-subtle)}.hm-key span{display:flex;align-items:center;gap:6px}
.hm-evl{display:grid;gap:8px}.hm-ev{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--hm-line);border-radius:14px;padding:8px 12px;color:var(--c-ink);text-decoration:none}
a.hm-ev[href]:hover{border-color:var(--border)}.hm-evd{display:grid;justify-items:center;border-right:1px solid var(--hm-line);padding-right:10px}.hm-evd b{font-size:18px;line-height:1.1}.hm-evd small{font-size:11.5px;color:var(--ink-subtle);font-weight:700}
.hm-evt{min-width:0}.hm-evt b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hm-evt small{display:block;color:var(--ink-subtle);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-back{border:0;background:none;color:var(--focus);font:inherit;font-size:12px;cursor:pointer;margin-left:auto}
/* the bell's panel */
.hb{display:grid;gap:6px}.hb-tabs{display:flex;gap:2px;align-items:center;flex-wrap:wrap;padding:3px;border-radius:18px;background:var(--surface-sunken);margin-bottom:2px}.hb-tabs::-webkit-scrollbar{display:none}
.hb-tabs button{flex:0 0 auto;border:0;background:none;border-radius:999px;padding:6px 11px;font:inherit;font-size:12.5px;color:var(--ink-muted);cursor:pointer;white-space:nowrap}.hb-tabs button.on{background:var(--surface);color:var(--c-ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.08)}.hb-tabs em{font-style:normal;opacity:.6;margin-left:6px;font-size:12px}
.hb-top{display:flex;justify-content:flex-end}.hb-read{border:0;background:none;font:inherit;font-size:12.5px;color:var(--focus);cursor:pointer;padding:2px 4px}
.hb-g{margin:10px 2px 2px;font-size:13px;font-weight:650;color:var(--c-ink)}
.hb-ask{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;margin-bottom:8px;border-radius:12px;background:var(--surface-sunken);font-size:13px}.hb-ask span{flex:1 1 220px;color:var(--ink)}
.hb-n{--hb-bg:var(--surface-sunken);display:grid;grid-template-columns:44px minmax(0,1fr) 12px;gap:12px;padding:12px;border-radius:14px;color:var(--c-ink);text-decoration:none;background:var(--hb-bg)}.hb-n.u{--hb-bg:var(--primary-soft,#eef3fd)}.hb-n:hover{--hb-bg:var(--surface-hover)}
/* the kind badge sits on the picture's corner, half outside it, ringed in the row's own colour (Rami, 2 November 2026: the Hub's
   .av{overflow:hidden} in app.css clipped it inside the picture, where it covered the photo) */
.hb-n .av{overflow:visible;position:relative;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:14px;font-weight:700;background:var(--accent-violet-soft,#efe8fb);color:var(--accent-violet,#7a4bd1)}.hb-n .av img{width:100%;height:100%;border-radius:12px;object-fit:cover}.hb-n .av.hub{background:var(--surface);color:var(--ink-muted)}.hb-n .av.hub>svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hb-ty{position:absolute;right:-7px;bottom:-7px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--focus);color:#fff;box-shadow:0 0 0 2.5px var(--hb-bg,var(--surface))}.hb-ty svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hb-ty.mention{background:var(--accent-violet,#7a4bd1)}.hb-ty.assign{background:var(--focus)}.hb-ty.ok{background:var(--success,#1f9d55)}.hb-ty.alert{background:var(--danger,#d93636)}.hb-ty.shoot{background:var(--warn,#c77700)}.hb-ty.auto,.hb-ty.comment{background:var(--focus)}
.hb-tx{display:flex;flex-direction:column;gap:2px;min-width:0}.hb-n b{font-weight:650;font-size:14px}.hb-meta{color:var(--ink-subtle);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-body{font-size:13.5px;line-height:1.45;margin-top:3px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.hb-act{font-style:normal;color:var(--focus);font-weight:500}
.hb-w{display:flex;align-items:flex-start;padding-top:6px}.hb-w i{width:8px;height:8px;border-radius:50%;background:var(--focus)}
.hb-row{position:relative;overflow:hidden;border-radius:14px;transition:opacity .18s,max-height .18s;max-height:400px}.hb-row.out{opacity:0;max-height:0}
.hb-row .hb-n{position:relative;z-index:1;transition:transform .2s}.hb-row.hb-sw .hb-n{transition:none;--hb-bg:var(--surface,#fff)}.hb-row.hb-sw .hb-n.u{--hb-bg:color-mix(in srgb,var(--primary-soft,#eef3fd) 100%,var(--surface,#fff))}
.hb-del{position:absolute;inset:0;display:none;align-items:center;justify-content:flex-end;padding-right:18px;background:var(--danger,#d93636);color:#fff;font-size:13px;font-weight:600;border-radius:14px}.hb-row.hb-sw .hb-del{display:flex}
.hb-x{position:absolute;z-index:2;top:8px;right:6px;width:26px;height:26px;border:0;border-radius:50%;background:var(--surface-hover,#f1f1f1);color:var(--ink-subtle);font-size:16px;line-height:1;cursor:pointer;display:none}
/* a notice with a second place to go (a shoot plan's client link, 2 November 2026): a small pill under its words */
.hb-row.has-go .hb-n{padding-bottom:46px}.hb-go{position:absolute;z-index:2;bottom:12px;left:68px;display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:999px;background:var(--surface,#fff);color:var(--focus);font-size:12.5px;font-weight:600;text-decoration:none;box-shadow:inset 0 0 0 1px var(--border)}.hb-go:hover{background:var(--surface-hover)}
@media (hover:hover){.hb-row:hover .hb-x,.hb-x:focus-visible{display:block}.hb-row:hover .hb-w{visibility:hidden}}
.hc-flash{animation:hcFlash 2.4s ease-out}@keyframes hcFlash{0%,35%{background:var(--primary-soft,#eef3fd);box-shadow:0 0 0 2px var(--focus)}100%{box-shadow:0 0 0 2px transparent}}
@media (prefers-reduced-motion:reduce){.hc-flash{animation:none;box-shadow:0 0 0 2px var(--focus)}}
@media (max-width:1180px){.hm-hero{grid-template-columns:1fr}.hm-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1000px){.hm-bot{grid-template-columns:1fr}.hm-cal{grid-template-columns:1fr}.hm-calm{padding:0 0 16px;border-right:0;border-bottom:1px solid var(--hm-line)}.hm-next{padding:16px 0 0}}
@media (max-width:860px){.hm-hero{padding:20px;border-radius:18px}.hm-hi h2{font-size:28px}.hm-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px 4px;scroll-padding-inline:20px}.hm-card{flex:0 0 78%;scroll-snap-align:start;min-height:200px}}

/* ---------- The look, batch 1 (Rami, 15 October 2026): a light menu, the grey page, and the top bar ----------
   The menu sits on the page's grey with a thin line on its right; the page you are on is in bold with a short black mark beside it.
   The dotted glow at the bottom of the menu stays for dark mode only. */
html:not([data-theme="dark"]) body #app>aside::before{display:none}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body #app>aside::before{display:block}}
html body #app>aside .nav a.on:not(#_){background:none!important;font-weight:700!important;position:relative}
html body #app>aside .nav a.on:not(#_)::before{content:"";position:absolute;inset-inline-start:-8px;top:7px;bottom:7px;width:3px;border-radius:3px;background:var(--side-ink)}
html.nav-mini body #app>aside .nav a.on:not(#_){background:var(--side-active)!important}
html.nav-mini body #app>aside .nav a.on:not(#_)::before{display:none}
/* the top bar: a quiet row along the top of every page on a computer; Kasper floats at its right end, the bell on his left */
html body main>.tbar:not(#_){display:flex;align-items:center;justify-content:space-between;min-height:58px;margin:-18px -22px 14px;padding:0 22px;border-bottom:1px solid var(--side-border)}
html body .tb-bell:not(#_){position:fixed;top:10px;inset-inline-end:66px;z-index:41;width:38px;height:38px;border:0;border-radius:999px;background:none;color:var(--c-ink);display:grid;place-items:center;cursor:pointer}
html body .tb-bell:not(#_):hover{background:var(--side-active)}
html body .tb-bell svg:not(#_){width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html body .tb-bell i:not(#_){position:absolute;top:3px;inset-inline-end:2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#d4382c;color:#fff;font:700 10px/16px var(--font-sans);font-style:normal;text-align:center}
html body .tb-bell i[hidden]:not(#_){display:none}
@media (min-width:861px){
  html body .hm-dl .hm-bell:not(#_){display:none} /* on a computer the bell is in the top bar */
  html body main .bk-h:not(#_){margin-inline-end:-20px!important;padding-right:20px!important;border-bottom:0!important} /* Kasper is in the top bar now, above the list's buttons; one line under the top bar is enough */
}
@media (max-width:860px){html body main>.tbar:not(#_),html body .tb-bell:not(#_){display:none}} /* a phone has its own bar; the bell stays in Home's header */
@media print{html body main>.tbar:not(#_),html body .tb-bell:not(#_){display:none!important}}
body.bd-full-on .tb-bell{display:none!important}
/* Home's placeholder while it loads: the shape of the new header (dark, three cards), not the old glow */
html body #homeToday .bf-skel .bf-hero:not(#_){background:var(--hm-hero)!important;border:0!important;box-shadow:none!important;background-image:none!important;border-radius:24px}
html body #homeToday .bf-skel .bf-hero:not(#_)::before,html body #homeToday .bf-skel .bf-hero:not(#_)::after{display:none!important}
html body #homeToday .bf-skel :is(.sk-card,.bf-card):not(#_){background:rgba(255,255,255,.07)!important;border:0!important;box-shadow:none!important}
html body #homeToday .bf-skel .sk:not(#_){background:rgba(255,255,255,.1)!important}
html body #homeToday .bf-skel .bf-k:not(#_){display:none}
/* ---------- An item's header in one line (Rami, 30 October 2026, learnt from the Workflow board; the dark header of 15 October is gone) ----------
   A shoot, a Social media month and a branding project (public/kit.js itemHead): "← Shoots" as a small link before the name, the name,
   Who sees this and Settings (for admins), then on the right the status, the main buttons and ⋯. The tabs right under it. On a phone the
   phone's own header names the page, as before. */
@media (min-width:861px){
  html body .ip-head:not(#_):not(#_):not(#_){background:transparent;color:var(--ink);border:0;border-radius:0;padding:0 0 4px;margin-bottom:10px}
  html body .ip-head .ip-top:not(#_):not(#_):not(#_){align-items:center;flex-wrap:nowrap;gap:12px;padding-inline-end:0}
  html body .ip-head .ip-tl:not(#_):not(#_):not(#_){flex:1 1 auto;flex-wrap:nowrap;align-items:center;gap:10px;min-width:0}
  html body .ip-head .ip-up:not(#_):not(#_):not(#_){flex:none;font-size:13px;font-weight:500;color:var(--ink-muted);padding:0;text-decoration:none;white-space:nowrap}
  html body .ip-head .ip-up:not(#_):not(#_):not(#_)::before{content:"← "}
  html body .ip-head .ip-up:hover:not(#_):not(#_):not(#_){color:var(--ink);text-decoration:underline;text-underline-offset:3px}
  html body .ip-head .ip-sep:not(#_):not(#_):not(#_){display:none}
  html body .ip-head .ip-tl h1:not(#_):not(#_):not(#_){font-size:20px;letter-spacing:-.01em;flex:0 1 auto;min-width:0}
  html body .ip-head .ip-tl :is(.sees-btn,.as-btn):not(#_):not(#_){flex:none}
  html body .ip-head .ip-acts:not(#_):not(#_):not(#_){flex:none;flex-wrap:nowrap}
}
/* the client's link box opens inside the month header: it keeps the light box's own colours (from the dark header's days: not white text and
   outlined buttons (Rami, 27 October 2026: its title and buttons were white on white) */
html body .ip-head .ip-acts .ps-sharebox:not(#_):not(#_):not(#_):not(#_){color:var(--ink)}
html body .ip-head .ip-acts .ps-sharebox .btn-s:not(.pri):not(#_):not(#_):not(#_):not(#_){background:var(--surface);border-color:var(--border-strong);color:var(--ink)}
html body .ip-head .ip-acts .ps-sharebox .btn-s:not(.pri):hover:not(#_):not(#_):not(#_):not(#_){background:var(--surface-hover)}
html body .ip-head .ip-acts .ps-sharebox .btn-s svg:not(#_):not(#_):not(#_){stroke:currentColor}
html body .ip-head .ip-acts .ps-sharebox :is(.btn-s.pri,button.pri):not(#_):not(#_):not(#_):not(#_){background:var(--nav-on-bg,var(--ink));color:var(--nav-on-ink,var(--on-ink));border-color:transparent}
/* the side column of an item page sits open on the page's grey: no white box around Details, the checklist and More details, a
   thin line between them instead (Rami's mockup, 15 October 2026) */
@media (min-width:861px){
  html:not([data-theme="dark"]) body .ip-side>section.card:not(#_):not(#_){background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding-inline:4px!important}
  html:not([data-theme="dark"]) body .ip-side>section.card+section.card:not(#_):not(#_){border-top:1px solid var(--side-border)!important;padding-top:18px!important}
}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body .ip-side>section.card:not(#_):not(#_){background:var(--surface)!important;border-radius:var(--radius-lg,14px)!important}}
/* the Shoots calendar and a month's Calendar tab in Home's tile look (Rami, 15 October 2026): each day its own rounded tile on the
   page with a gap between, weekdays as small pills, today's number in black; no grid lines */
@media (min-width:861px){
  html body .pc-grid:not(#_):not(#_){border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important}
  html body .pc-wh:not(#_):not(#_){display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;background:transparent!important;border:0!important;margin-bottom:6px}
  html body .pc-wh>span:not(#_):not(#_){background:color-mix(in srgb,var(--c-ink) 7%,transparent)!important;border:0!important;border-radius:999px;text-align:center;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:5px 0!important;color:var(--ink-muted)}
  html body .pc-days:not(#_):not(#_){display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;background:transparent!important;border:0!important}
  html body .pc-day:not(#_):not(#_){background:var(--surface)!important;border:0!important;border-radius:12px;box-shadow:none!important}
  html body .pc-day.out:not(#_):not(#_){background:transparent!important}
  html body .pc-day.out .pc-dh:not(#_):not(#_){opacity:.5}
  html body .pc-day.wkend:not(.out):not(#_):not(#_){background:color-mix(in srgb,var(--c-ink) 2%,var(--surface))!important}
  html body .pc-day.today:not(#_):not(#_){box-shadow:inset 0 0 0 2px var(--c-ink)!important}
  html body .pc-day.today .pc-dh span:not(#_):not(#_){background:var(--c-ink)!important;color:var(--surface)!important;border-radius:999px;padding:1px 8px}
}
/* two buttons in the same danger strip (a shoot's Cancel shoot and Delete shoot) keep a gap between them */
html body .bk-danger>.btn-s+.btn-s:not(#_){margin-inline-start:8px}
/* Home's Done tick on a card: a round outline in its top corner, filled on hover; pressed, the card ticks and fades */
html body .hm-card:not(#_){position:relative}
html body .hm-tick:not(#_){position:absolute;top:12px;inset-inline-end:12px;width:30px;height:30px;border-radius:999px;border:1.5px solid rgba(23,24,26,.35);background:rgba(255,255,255,.35);display:grid;place-items:center;cursor:pointer;padding:0;color:#17181a;transition:background .15s,border-color .15s,transform .15s}
html body .hm-tick svg:not(#_){width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.45}
html body .hm-tick:hover:not(#_){background:#17181a;border-color:#17181a;color:#fff;transform:scale(1.06)}
html body .hm-tick:hover svg:not(#_){opacity:1}
html body .hm-card.is-done:not(#_){opacity:.45;transition:opacity .4s;pointer-events:none}
html body .hm-card.is-done .hm-tick:not(#_){background:#17181a;border-color:#17181a;color:#fff}
html body .hm-card.is-done .hm-tick svg:not(#_){opacity:1}
html body .hm-card.is-done b:not(#_){text-decoration:line-through}
@media (prefers-reduced-motion:reduce){html body .hm-card.is-done:not(#_){transition:none}}
html body .hm-card:has(.hm-tick) .hm-cn:not(#_){padding-inline-end:40px}
/* Your training as a to-do in Home's header (Rami, 15 October 2026); the old bar at the bottom of Home is gone */
html body #p-home .stage.briefed>#startCard:not(#_){display:none!important}
html body .hm-todo:not(#_){display:flex;align-items:center;gap:12px;margin-top:16px;padding:10px 10px 10px 14px;border-radius:14px;background:rgba(255,255,255,.08);max-width:520px}
html body .hm-tdk:not(#_){flex:none;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#17181a;background:var(--hm-k3);border-radius:999px;padding:3px 8px}
html body .hm-tdt:not(#_){display:grid;min-width:0;flex:1}
html body .hm-tdt b:not(#_){font-size:13.5px;color:#fff}
html body .hm-tdt small:not(#_){font-size:12px;color:#a3a6ad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .hm-tdbar:not(#_){flex:none;width:60px;height:4px;border-radius:4px;background:rgba(255,255,255,.15);overflow:hidden}
html body .hm-tdbar i:not(#_){display:block;height:100%;background:var(--hm-k3);border-radius:4px}
html body .hm-tdgo:not(#_){flex:none;background:#fff;color:#17181a;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;text-decoration:none}
html body .hm-tdx:not(#_){flex:none;width:28px;height:28px;border:0;border-radius:999px;background:transparent;color:#a3a6ad;font-size:18px;line-height:1;cursor:pointer}
html body .hm-tdx:hover:not(#_){background:rgba(255,255,255,.12);color:#fff}
@media (max-width:860px){html body .hm-tdbar:not(#_){display:none}}
/* My team today on a lead's Home: a plain list like the plate, one line per person who needs a look */
html body .hm-team:empty:not(#_){display:none}
html body .hm-team:not(#_){margin-top:18px}
html body .hm-tmt:not(#_){display:block;margin:10px 0 2px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-subtle)}
html body .hm-tm:not(#_){display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--hm-line)}
html body .hm-tm .av:not(#_){flex:none;width:30px;height:30px;border-radius:999px;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--accent-violet-soft);color:var(--accent-violet)}
html body .hm-tmn:not(#_){flex:1;min-width:0;display:grid;gap:1px}
html body .hm-tmn b:not(#_){font-size:13.5px}
html body .hm-tmn small:not(#_){font-size:12px;color:var(--ink-muted);line-height:1.45}
html body .hm-tmn i:not(#_){font-style:normal;font-weight:700;font-size:11px;border-radius:999px;padding:1px 7px;margin-inline-end:4px}
html body .hm-tmn i.late:not(#_){background:var(--status-stuck-bg);color:var(--status-stuck-fg)}
html body .hm-tmn i.day:not(#_){background:var(--status-working-bg);color:var(--status-working-fg)}
html body .hm-tmn i.off:not(#_){background:var(--status-idle-bg);color:var(--status-idle-fg)}
html body .hm-ask:not(#_){flex:none;border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:5px 12px;font:600 12px var(--font-sans);color:var(--c-ink);cursor:pointer}
html body .hm-ask:hover:not(#_){background:var(--c-ink);color:var(--surface);border-color:var(--c-ink)}
html body .hm-ask.done:not(#_){background:transparent;border-color:transparent;color:var(--ink-subtle);cursor:default}
html body .hm-hi .hm-todo small:not(#_):not(#_){text-transform:none;letter-spacing:0;font-size:12px}
/* Admin, October 2026 (Rami, 15 October: "all of admin needs a breadcrumb back button"; People's header stays on top; six tabs) */
html body .adm-crumb:not(#_){display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:13px;color:var(--ink-muted)}
html body .adm-crumb a:not(#_){color:var(--ink-muted);text-decoration:none;font-weight:600}html body .adm-crumb a:hover:not(#_){color:var(--c-ink);text-decoration:underline;text-underline-offset:3px}
html body .adm-crumb i:not(#_){font-style:normal;color:var(--ink-subtle)}html body .adm-crumb b:not(#_){color:var(--c-ink);font-weight:600}
html body .adm-back:not(#_){display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;background:var(--surface-sunken);color:var(--c-ink);font:600 12.5px var(--font-sans);padding:5px 12px 5px 10px;cursor:pointer;margin-inline-end:4px}
html body .adm-back:not(#_)::before{content:"←";font-size:14px;line-height:1}html body .adm-back:hover:not(#_){background:var(--surface-hover)}
html body #tmPage .adm-crumb+.wk-qtabs:not(#_){margin-bottom:14px}
html body table.ut thead th:not(#_){position:relative;z-index:3;background:var(--surface)}
html body table.ut thead.lt-pinned th:not(#_){box-shadow:0 6px 10px -8px rgba(0,0,0,.25)}
html body .ut-sin:not(#_){display:inline-flex;align-items:center;gap:8px}html body .ut-sin small:not(#_),html body .ut-no:not(#_){color:var(--ink-subtle);font-size:12px}
html body .ut-foot:not(#_){margin:10px 2px 0;font-size:12.5px}
html body .ut-miss:not(#_){margin-top:14px;border-radius:12px;background:var(--surface-sunken);padding:10px 14px}html body .ut-miss summary:not(#_){cursor:pointer}html body .ut-miss summary small:not(#_){color:var(--ink-subtle);margin-inline-start:6px}
html body .ut-h:not(#_){font-size:14px;font-weight:700;margin:4px 0 8px}html body .ut-h:not(:first-child):not(#_){margin-top:22px}
html body .ut-leads:not(#_){display:grid;gap:2px;border-radius:12px;background:var(--surface-sunken);padding:4px}
html body .ut-lead:not(#_){display:flex;align-items:center;gap:16px;padding:10px 12px;border-radius:9px;background:var(--surface)}
html body .ut-lead>span:not(#_){flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}html body .ut-lead small:not(#_){color:var(--ink-subtle);font-size:12px}
html body .ut-lead select:not(#_){flex:0 0 240px;max-width:50%}
html body .ai-pane>.sub:not(#_){margin:0 0 12px}
html body .hm-ann:not(#_){margin-inline-start:auto;border:0;background:var(--surface-sunken);border-radius:999px;padding:4px 11px;font:600 12px var(--font-sans);color:var(--c-ink);cursor:pointer}
html body .hm-ann:hover:not(#_){background:var(--c-ink);color:var(--surface)}
html body .ann-adm .annform:not(#_){display:grid;gap:8px;margin:10px 0 4px}html body .ann-adm .annrow:not(#_){display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
html body .ann-adm .row:not(#_){display:flex;align-items:center;gap:10px}html body .ann-adm .row>span:not(#_){flex:1;min-width:0}html body .ann-h:not(#_){font-size:13px;margin:18px 0 6px}
html body .ask-adm:not(#_){position:fixed;z-index:60;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:min(640px,calc(100vw - 32px));background:var(--c-ink);color:var(--surface);border-radius:16px;padding:12px 12px 12px 18px;box-shadow:0 12px 32px rgba(0,0,0,.25);font-size:13.5px}
html body .ask-adm span:not(#_){flex:1;min-width:0}html body .ask-adm .btn-s:not(#_){background:var(--surface);color:var(--c-ink);border:0;white-space:nowrap}
html body .ask-x:not(#_){border:0;background:none;color:inherit;font-size:20px;line-height:1;cursor:pointer;opacity:.7;padding:0 4px}
@media (max-width:860px){html body .ask-adm:not(#_){flex-wrap:wrap;bottom:90px}html body .ut-lead:not(#_){flex-direction:column;align-items:stretch}html body .ut-lead select:not(#_){flex-basis:auto;max-width:none}}
html body table.ut thead th[scope=col]:not(:first-child):not(#_){min-width:104px}
html body #tmPage .adm-tabs:not(#_){margin-bottom:18px}
/* Home: Coming up at Circle under the calendar; My team today across the page, a column per team (Rami, 15 October 2026) */
html body .hm-right:not(#_){display:grid;gap:22px;min-width:0}
html body .hm-team:not(#_):not(#_){margin-top:26px}
html body .hm-tgrid:not(#_){display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;align-items:start}
html body .hm-tcol:not(#_){background:var(--surface);border-radius:16px;padding:12px 14px;min-width:0}
html body .hm-tcol.ok:not(#_){background:transparent;border:1px dashed var(--hm-line,var(--border));padding:10px 14px}
html body .hm-tcol .hm-tmt:not(#_):not(#_){margin:0 0 6px;display:flex;align-items:center;gap:6px}
html body .hm-tcol .hm-tmt i:not(#_){font-style:normal;background:var(--status-danger-bg,#fde8e8);color:var(--status-danger-fg,#b42318);border-radius:999px;padding:0 7px;font-size:10.5px;letter-spacing:0}
html body .hm-tcol .hm-tm:not(#_){flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--hm-line,var(--border))}
html body .hm-tcol .hm-tmt+.hm-tm:not(#_){border-top:0}
html body .hm-tcol .hm-ask:not(#_){margin-inline-start:40px}
html body .hm-tcol .hm-empty:not(#_){margin:4px 0 0;font-size:12.5px}
html body .rt-line:not(#_){display:flex;align-items:center;gap:8px}html body .rt-line>.rt-pick:not(#_){flex:1;min-width:0}
html body .rt-line.off .rt-pick:not(#_){opacity:.55}html body .rt-dis:not(#_){flex:none}
html body .rt-dall:not(#_){display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}html body .rt-dall small:not(#_),html body .rt-err:not(#_){color:var(--ink-subtle)}
html body .hm-tcol .hm-tm:not(#_):not(#_){display:grid;grid-template-columns:30px minmax(0,1fr);gap:4px 10px;align-items:start}
html body .hm-tcol .hm-tmn:not(#_){min-width:0}html body .hm-tcol .hm-tmn small:not(#_){line-height:1.45}
html body .hm-tcol .hm-ask:not(#_):not(#_){grid-column:2;justify-self:start;margin:4px 0 0}
html body .hm-tok:not(#_){display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 0;font-size:12.5px;color:var(--ink-subtle)}
html body .hm-tok b:not(#_){color:var(--c-ink);font-weight:600;margin-inline-end:4px}
html body .hm-tok span:not(#_){background:var(--surface);border-radius:999px;padding:3px 10px;color:var(--ink-muted)}
/* The client's page in six tabs (Rami, 15 October 2026): a useful header, two live tiles, contacts as cards, the team as a short table,
   Setup, and one clear Save */
html body .ct-meta:not(#_){display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:8px 0 2px;padding-inline-start:52px}
html body .ct-mt:not(#_){display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--c-ink);color:var(--surface);font:600 12px var(--font-sans)}
html body .ct-mt.soft:not(#_){background:var(--surface-sunken);color:var(--ink-muted)}
html body .ct-mam:not(#_){display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 3px;border-radius:999px;background:var(--surface);color:var(--c-ink);font:600 12.5px var(--font-sans);text-decoration:none}
html body .ct-mam.none:not(#_){padding:0 10px;color:var(--ink-subtle);font-weight:500}
html body :is(.ct-mam,.ct-mteam) i:not(#_){display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--surface-sunken);color:var(--c-ink);font:700 9.5px var(--font-sans);font-style:normal}
html body .ct-mteam:not(#_){display:inline-flex;align-items:center;text-decoration:none}html body .ct-mteam i:not(#_){width:24px;height:24px;border:2px solid var(--c-bg);margin-inline-start:-6px;background:var(--surface)}html body .ct-mteam i:first-child:not(#_){margin-inline-start:0}
html body .ct-mteam em:not(#_){font:600 11px var(--font-sans);color:var(--ink-subtle);margin-inline-start:4px;font-style:normal}
html body .ct-mren:not(#_){font-size:12.5px;color:var(--ink-subtle);margin-inline-start:2px}
html body .ov-ren:not(#_){display:flex;flex-direction:column;gap:2px;padding:12px 16px;margin:0 0 14px;border-radius:14px;background:var(--status-warn-bg,#fff4e0);color:var(--status-warn-fg,#8a5300);text-decoration:none}
html body .ov-ren.past:not(#_){background:var(--status-danger-bg,#fde8e8);color:var(--status-danger-fg,#b42318)}html body .ov-ren span:not(#_){font-size:12.5px;opacity:.85}
html body .ov-tiles:not(#_){display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:0 0 14px}
html body .ov-tile:not(#_){display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 18px!important;margin:0!important}
html body .ov-tk:not(#_){font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-subtle)}
html body .ov-tv:not(#_){font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.15}html body .ov-tv small:not(#_){font-size:14px;font-weight:600;color:var(--ink-muted)}
html body .ov-tl:not(#_){display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}html body .ov-tl small:not(#_){color:var(--ink-subtle)}
html body .pf-sec.card:not(#_){padding:16px 18px;margin:0 0 12px}html body .pf-sec.card>h2:not(#_){font-size:15px;margin:0 0 12px;display:flex;align-items:baseline;gap:8px}html body .pf-sec.card>h2 small:not(#_){font-size:12px;font-weight:500;color:var(--ink-subtle)}
html body .kc-cards:not(#_){display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-bottom:10px}
html body .kc-c:not(#_){display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:14px;background:var(--surface-sunken)}
html body .kc-c.main:not(#_){background:var(--surface);box-shadow:inset 0 0 0 2px var(--c-ink)}
html body .kc-ch:not(#_){display:flex;align-items:center;gap:10px}html body .kc-ch>span:not(#_){flex:1;min-width:0;display:flex;flex-direction:column}html body .kc-ch small:not(#_){color:var(--ink-subtle);font-size:12px}
html body .kc-ch>i:not(#_){display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--c-ink);color:var(--surface);font:700 14px var(--font-sans);font-style:normal;flex:none}
html body .kc-star:not(#_){border:0;background:none;font-size:18px;line-height:1;color:var(--border);cursor:pointer;padding:2px}html body .kc-star.on:not(#_),html body .kc-star:hover:not(#_){color:#e6a817}
html body .kc-act:not(#_){display:flex;flex-wrap:wrap;gap:6px}html body .kc-line:not(#_){color:var(--ink-subtle);font-size:12px}
html body .kc-team:not(#_){width:100%;border-collapse:collapse}html body .kc-team :is(th,td):not(#_){padding:8px 6px;border-top:1px solid var(--border);text-align:start;vertical-align:middle}html body .kc-team tr:first-child>*:not(#_){border-top:0}
html body .kc-team th:not(#_){width:190px;white-space:nowrap;font-weight:600}html body .kc-team th b:not(#_){font-weight:600}
html body .kc-why:not(#_){width:18px;height:18px;margin-inline-start:6px;border:0;border-radius:50%;background:var(--surface-sunken);color:var(--ink-subtle);font:700 11px var(--font-sans);cursor:help;vertical-align:1px}
html body .kc-team .tm-chips:not(#_){margin:0}html body .kc-none:not(#_){color:var(--ink-subtle)}
html body .kc-addc:not(#_){width:1%;white-space:nowrap}html body .kc-addc:not(#_)>*{vertical-align:middle}html body .kc-addc select:not(#_){width:auto;min-width:150px;margin-inline-end:6px}
html body .kc-tnote:not(#_){margin:10px 0 0;font-size:12.5px}
html body .pf-grid2:not(#_){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;flex:1;min-width:0}
html body .pf-who:not(#_){display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start}html body .pf-who .pc-av:not(#_){align-self:start}html body .pf-who .pc-av .cav:not(#_){width:72px;height:72px;font-size:26px}
html body .pf-facts:not(#_){display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
html body .pf-facts>span:not(#_){display:flex;align-items:center;gap:6px;flex-wrap:wrap}html body .pf-facts small:not(#_){color:var(--ink-subtle);margin-inline-end:4px}
html body .pf-facts i:not(#_){font-style:normal;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--surface-sunken)}html body .pf-facts em:not(#_){font-size:12.5px;color:var(--ink-subtle)}
html body .pf-dayrow:not(#_){display:inline-flex;align-items:center;gap:4px}html body .pf-day.dpick:not(#_){height:38px;padding:0 12px;border-radius:10px;background:var(--surface-sunken);font-size:13.5px}
html body .pf-dayx:not(#_){border:0;background:none;color:var(--ink-subtle);font-size:18px;cursor:pointer;padding:0 4px}
html body .pf-bar:not(#_){position:fixed;z-index:55;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:8px 8px 8px 18px;border-radius:999px;background:var(--c-ink);color:var(--surface);box-shadow:0 12px 30px rgba(0,0,0,.25);font-size:13.5px}
html body .pf-bar[hidden]:not(#_){display:none}html body .pf-bar .btn-s:not(#_){background:var(--surface);color:var(--c-ink);border:0}
html body .wk-more:not(#_){margin-top:8px}html body .wk-more summary:not(#_){cursor:pointer;font-size:13px;color:var(--ink-muted);padding:6px 0}
@media (max-width:860px){html body .ct-meta:not(#_){padding-inline-start:0}html body .pf-grid2:not(#_){grid-template-columns:1fr}html body .pf-who:not(#_){grid-template-columns:1fr}html body .kc-team th:not(#_){width:auto;white-space:normal}html body .kc-team tr:not(#_){display:grid;grid-template-columns:1fr auto}html body .kc-team td:first-of-type:not(#_){grid-column:1/-1;order:3;border-top:0;padding-top:0}html body .pf-bar:not(#_){bottom:90px}}
html body .signin .tlink:not(#_){display:block;margin-top:10px;font-size:12px;text-decoration:underline;color:var(--ink-muted)!important}
/* Admin › System › Test accounts (public/testaccts.js) */
html body .ta-list:not(#_){width:100%;border-collapse:collapse;margin:4px 0 12px;font-size:13px}
html body .ta-list:not(#_) th{text-align:left;font-weight:600;color:var(--ink-muted);padding:6px 8px}
html body .ta-list:not(#_) td{padding:8px;vertical-align:middle}
html body .ta-list:not(#_) tbody tr:nth-child(odd){background:var(--surface-2,rgba(0,0,0,.03))}
html body .ta-list:not(#_) tr.off td{color:var(--ink-muted)}
html body .ta-act:not(#_){display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
html body .ta-add:not(#_){display:flex;gap:8px;flex-wrap:wrap;align-items:center}
html body .ta-add:not(#_) input{flex:1 1 160px;min-width:0}
html body .ta-add .ta-lead:not(#_){display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
html body .ta-add .ta-lead:not(#_) input{flex:none}
html body .ta-foot:not(#_){display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
html body .ta-rmdata:not(#_) span{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
html body .ta-rmdata:not(#_) input{flex:1 1 200px;max-width:240px;min-width:0}
html body .ta-new:not(#_){display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:12px;background:var(--surface-2,rgba(0,0,0,.04));margin-bottom:12px}
html body .ta-new:not(#_) code{font-size:18px;letter-spacing:.04em;user-select:all}
@media (max-width:860px){html body .ta-list:not(#_) thead{display:none}html body .ta-list:not(#_) tr{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;padding:8px 0}html body .ta-act:not(#_){grid-column:1/-1;justify-content:flex-start}}
html body .ta-strip:not(#_){position:sticky;top:0;z-index:9999;background:#ff7a1a;color:#111;font:600 12px/1.2 Inter,system-ui,sans-serif;text-align:center;padding:6px 12px}
html body .ta-new:not(#_) button{align-self:flex-start}
/* Client facts on a client's Overview (public/content.js factsDraw): the side column is narrow, so the kind sits above the text */
html body .ct-facts .fx-list:not(#_){list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
html body .ct-facts .fx-list li:not(#_){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 6px;align-items:center}
html body .ct-facts .fx-list li select:not(#_){justify-self:start;width:auto;max-width:100%}
html body .ct-facts .fx-list li input:not(#_){grid-column:1/-1;width:100%;min-width:0;box-sizing:border-box}
html body .ct-facts .fx-add:not(#_){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;margin-top:12px}
html body .ct-facts .fx-add select:not(#_){grid-column:1/-1;justify-self:start;width:auto}
html body .ct-facts .fx-add input:not(#_){width:100%;min-width:0;box-sizing:border-box}
html body .ct-facts .fx-tabs:not(#_){display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
html body .ct-facts .fx-tabs button:not(#_){display:inline-flex;align-items:center;gap:4px;height:28px;border:0;border-radius:999px;background:var(--surface-sunken);color:var(--ink-muted);font:500 12.5px var(--font-sans);padding:0 11px;cursor:pointer;text-decoration:none}
html body .ct-facts .fx-tabs button small:not(#_){opacity:.7;margin-inline-start:2px}
html body .ct-facts .fx-tabs button[aria-selected=true]:not(#_){background:var(--c-ink);color:var(--surface)}
html body .ct-facts .fx-tabs button:disabled:not(#_){opacity:.45;cursor:default}
html body .ct-facts .sl-x:not(#_){all:unset;grid-row:1;grid-column:2;cursor:pointer;padding:0 6px;color:var(--ink-muted);font-size:18px;line-height:1}
html body .ct-facts .sl-x:hover:not(#_){color:var(--ink)}
html body .ct-facts{margin-bottom:14px}
html body .sl-already:not(#_){display:inline-flex;align-items:center;gap:6px;margin-inline-end:auto;font-size:13px}
/* Admin › System › Speed (public/speed.js) */
html body .sp-top:not(#_){display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
html body .sp-wrap:not(#_){overflow-x:auto}
html body .sp-list:not(#_) td:not(:first-child),html body .sp-list:not(#_) th:not(:first-child){text-align:end;white-space:nowrap}
html body .sp-list:not(#_) tr.sp-bad td b{color:var(--danger,#c0392b)}
html body .sp-list:not(#_) tr.sp-mid td b{color:var(--warn,#b9770e)}

/* Admin › System › Data check (public/datacheck.js) */
.dc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:10px 0}
.dc-grid>div{background:var(--surface-2,#f5f5f5);border-radius:var(--radius-md,10px);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.dc-grid small{color:var(--ink-muted);font-size:12px}.dc-grid b{font-size:20px;font-variant-numeric:tabular-nums}
.dc-h{margin:14px 0 6px;font-size:14px}.dc-ok{color:var(--ok,#1a7f37);margin:4px 0}.dc-bad{color:var(--danger,#b42318);margin:4px 0}
.dc-list{margin:4px 0;padding-left:18px}.dc-all{margin-top:12px}.dc-all summary{cursor:pointer;color:var(--ink-muted)}
.dc-back{margin-top:14px}.dc-back pre{white-space:pre-wrap;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-2,#f5f5f5);border-radius:var(--radius-md,10px);padding:12px;max-height:480px;overflow:auto}
/* drag and drop onto an upload (public/filedrop.js): the box the files will go to */
.fd-on{outline:2px dashed var(--accent,#2f6bff)!important;outline-offset:3px;border-radius:10px;background-color:color-mix(in srgb,var(--accent,#2f6bff) 6%,transparent)!important}
.fd-say{position:fixed;z-index:95;max-width:320px;background:var(--sheet,var(--bg));color:var(--ink);border:1px solid var(--line-2,var(--line));border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.18);padding:8px 12px;font-size:13px;line-height:1.4}
/* A strategy's status pick (public/stratstatus.js): a pill in the status colours, a plain dropdown underneath */
html body select.ss-pick:not(#_):not(#_){appearance:none;-webkit-appearance:none;width:auto!important;min-width:0!important;height:26px!important;min-height:26px!important;padding:0 26px 0 12px!important;border:0!important;border-radius:999px!important;font:inherit;font-size:12.5px!important;font-weight:600;cursor:pointer;color:var(--on-status)!important;background-color:var(--s-none)!important;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%)!important;background-position:calc(100% - 13px) 11px,calc(100% - 9px) 11px!important;background-size:4px 4px!important;background-repeat:no-repeat!important;box-shadow:none!important}
html body select.ss-pick.t-doing:not(#_):not(#_){background-color:var(--s-orange)!important}
html body select.ss-pick.t-blue:not(#_):not(#_){background-color:var(--s-blue)!important}
html body select.ss-pick.t-purple:not(#_):not(#_){background-color:var(--s-purple)!important}
html body select.ss-pick.t-ok:not(#_):not(#_){background-color:var(--accent-green-pastel,var(--s-green))!important}
html body select.ss-pick:focus-visible:not(#_){outline:2px solid var(--ink)!important;outline-offset:2px}
html body select.ss-pick:disabled:not(#_){opacity:.6;cursor:progress}
.ss-say{display:inline-block;margin-inline-start:8px;font-size:12.5px;color:var(--muted)}.ss-say.bad{color:var(--bad-ink,#c0392b)}
/* a month check's choices under its chip in the Details box (public/posts.js): Pass, Ask for changes and its note */
.ps-lckdo{display:grid;gap:6px;margin:2px 0 8px 30px}.ps-lckdo>span{display:flex;flex-wrap:wrap;gap:6px}.ps-lckdo textarea{width:100%;min-height:52px;resize:vertical}
.ov-says.ov-ho{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} /* a new account manager: the handoff, first (public/content.js) */
.mb-nostart p{margin:0 0 12px} /* a month not started yet: its Brief or workspace offers Start (public/posts.js) */
/* A touch screen has no hover: the buttons that only show when the pointer is on their row show all the time (phone version,
   Rami, 16 October 2026). Open (a post, a campaign), rename, Brand's open, a calendar day's + */
@media (hover:none){html body :is(.ps-capc .ps-open,.wk-open,.br-c1 .br-op,.pc-add):not(#_):not(#_){opacity:1!important}html body :is(.wk-ren,.ccd .ccd-ren .wk-ren):not(#_):not(#_){opacity:.7}}
/* Big enough for a thumb (phone version, Rami, 16 October 2026): on a phone, buttons, dropdowns and the small round buttons are at
   least 36px (the help ? and the rename pencil 32px), and ticks 22px. Text links inside sentences stay as they are. */
@media (max-width:860px){
  html body :is(.btn-s,select.find,.wk-st):not(#_):not(#_){min-height:36px}
  html body :is(.wk-plus,.hm-nav,.hm-tick,.cx-plus):not(#_):not(#_){min-width:36px;min-height:36px}
  html body :is(.bk-how,.wk-ren,.wk-fed):not(#_):not(#_){min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center}
  html body :is([data-list],.bk-gbox,.wk-gh) input[type=checkbox]:not(#_):not(#_):not(#_){width:22px!important;height:22px!important;min-width:22px} /* a list's ticks (not a document's task boxes or a switch) */
  html body :is(.wk-r1>*>select[data-sv],select.wk-st):not(#_):not(#_):not(#_){height:36px!important;min-height:36px!important}
  html body .ct-scroll .ct-tr>.ct-cell:has(>select.ct-stsel):not(#_):not(#_){height:auto!important;min-height:36px!important;overflow:visible!important}
  html body .ct-scroll .ct-tr>.ct-cell>select.ct-stsel:not(#_):not(#_):not(#_){min-height:36px!important}
  html body :is(.linkish,.hm-ann,.sees-btn,.adm-back):not(#_):not(#_){min-height:32px;display:inline-flex;align-items:center}
  html body .hm-card:has(.hm-tick) .hm-cn:not(#_):not(#_){padding-inline-end:52px} /* room for the bigger tick */
  /* a client list's rows are cards: no column titles, no lines between their parts (this was only for 701-860px before) */
  html body .ct-tr.ct-head2:not(#_):not(#_){display:none!important}
  html body .ct-tr:not(.ct-head2)>*:not(#_):not(#_){border-inline-start:0!important}
  html body .mw-open:not(#_):not(#_){min-height:32px;display:inline-flex;align-items:center;max-width:100%} /* My work: a task's name is what opens it */
}
/* On a phone, Home has no top bar: Feedback, Escalate and Kasper get their own strip above the greeting card instead of sitting on
   its top edge (ship-readiness audit, 17 October 2026) */
@media (max-width:860px){
  html body.on-home .page.on .hm-hero:not(#_){margin-top:calc(env(safe-area-inset-top,0px) + 40px)}
}

/* ---------- one meaning per colour (looks audit, 17 October 2026: blue meant both "new" and "in progress", orange both "attention"
   and a normal sales stage, done was green in one place and purple in another). monday's way, everywhere a status is shown:
   grey not started · blue new or requested · orange being worked on · purple with someone else (a review, the client) ·
   red stuck or changes asked · green done · yellow needs attention (to assign, on hold). public/kit.js TONES says the same.
   In dark mode the fills are dimmer, so they don't glare on the black page; the words on them stay dark. ---------- */
:root{--st-none:#d9dce1;--st-new:#a9c4f7;--st-work:#fbc99a;--st-client:#cfb8f3;--st-bad:#f7b3c6;--st-ok:#a8dcc0;--st-warn:#f6dd8a;
  --sta-none:var(--ink-subtle);--sta-new:#0a63ad;--sta-work:#a8480a;--sta-client:var(--accent-violet);--sta-bad:#b81f4c;--sta-ok:#11703f;--sta-warn:#7d5b07} /* a shade darker than the accents in light mode: group and column titles sit on grey and must read (critique, 18 October 2026) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--st-none:#8d9199;--st-new:#7f9fdc;--st-work:#d79a62;--st-client:#a58bd8;--st-bad:#d68aa1;--st-ok:#7fbf9c;--st-warn:#d4b85a;--sta-new:var(--accent-sky);--sta-work:var(--accent-orange);--sta-bad:var(--accent-rose);--sta-ok:var(--accent-green);--sta-warn:#e8c547}}
:root[data-theme="dark"]{--st-none:#8d9199;--st-new:#7f9fdc;--st-work:#d79a62;--st-client:#a58bd8;--st-bad:#d68aa1;--st-ok:#7fbf9c;--st-warn:#d4b85a;--sta-new:var(--accent-sky);--sta-work:var(--accent-orange);--sta-bad:var(--accent-rose);--sta-ok:var(--accent-green);--sta-warn:#e8c547}
/* status dropdowns: the fill follows the value picked */
html body :is(select[data-sv=none],select[data-sv=reserved],select[data-sv=todo],select[data-sv=skip],select[data-sv=cancelled],select[data-sv=inactive],select[data-sv=archived]):not(#_):not(#_):not(#_){background-color:var(--st-none)!important}
html body :is(select[data-sv=requested],select[data-sv=confirmed],select[data-sv=open],select[data-sv=scheduled],select[data-sv=lead]):not(#_):not(#_):not(#_){background-color:var(--st-new)!important}
html body :is(select[data-sv=doing],select[data-sv=drafting],select[data-sv=editing],select[data-sv=onboarding],select[data-sv=meeting],select[data-sv=interested],select[data-sv=negotiation]):not(#_):not(#_):not(#_){background-color:var(--st-work)!important}
html body :is(select[data-sv=review],select[data-sv=client],select[data-sv=ready],select[data-sv=shot],select[data-sv=proposal],select[data-sv=contract]):not(#_):not(#_):not(#_){background-color:var(--st-client)!important}
html body :is(select[data-sv=changes],select[data-sv=stuck],select[data-sv=rework]):not(#_):not(#_):not(#_){background-color:var(--st-bad)!important}
html body :is(select[data-sv=approved],select[data-sv=done],select[data-sv=uploaded],select[data-sv=published],select[data-sv=active],select[data-sv=verified]):not(#_):not(#_):not(#_){background-color:var(--st-ok)!important}
html body :is(select[data-sv=hold],select[data-sv=paused],select[data-sv=assign]):not(#_):not(#_):not(#_){background-color:var(--st-warn)!important}
html body select.ct-stsel:disabled:not(#_){opacity:1;cursor:default} /* a read-only client's status looks like the others */
/* read-only status tags */
html body .wk-tag:is(.none,.sv-todo):not(#_):not(#_){background:var(--st-none)!important}
html body .wk-tag:is(.requested,.open,.confirmed):not(#_):not(#_){background:var(--st-new)!important}
html body .wk-tag:is(.doing,.sv-doing):not(#_):not(#_){background:var(--st-work)!important}
html body .wk-tag:is(.review,.waiting):not(#_):not(#_){background:var(--st-client)!important}
html body .wk-tag:is(.changes,.stuck,.declined):not(#_):not(#_){background:var(--st-bad)!important}
html body .wk-tag:is(.approved,.done,.ok,.sv-done):not(#_):not(#_){background:var(--st-ok)!important}
/* the kit's tones: group bars, board column heads, chips, stage dropdowns, dots */
html body :is(.bk-gbox,.bk-ch).t-none:not(#_):not(#_){--acc:var(--sta-none)}html body :is(.bk-gbox,.bk-ch).t-new:not(#_):not(#_){--acc:var(--sta-new)}
html body :is(.bk-gbox,.bk-ch).t-work:not(#_):not(#_){--acc:var(--sta-work)}html body :is(.bk-gbox,.bk-ch).t-client:not(#_):not(#_){--acc:var(--sta-client)}
html body :is(.bk-gbox,.bk-ch).t-bad:not(#_):not(#_){--acc:var(--sta-bad)}html body :is(.bk-gbox,.bk-ch).t-ok:not(#_):not(#_){--acc:var(--sta-ok)}html body :is(.bk-gbox,.bk-ch).t-warn:not(#_):not(#_){--acc:var(--sta-warn)}
html body :is(.bk-g,.bk-ch).t-none i:not(#_){background:var(--sta-none)}html body :is(.bk-g,.bk-ch).t-new i:not(#_){background:var(--sta-new)}html body :is(.bk-g,.bk-ch).t-work i:not(#_){background:var(--sta-work)}
html body :is(.bk-g,.bk-ch).t-client i:not(#_){background:var(--sta-client)}html body :is(.bk-g,.bk-ch).t-bad i:not(#_){background:var(--sta-bad)}html body :is(.bk-g,.bk-ch).t-ok i:not(#_){background:var(--sta-ok)}html body :is(.bk-g,.bk-ch).t-warn i:not(#_){background:var(--sta-warn)}
html body :is(.bk-chip,.bk-stsel):is(.t-none,.t-new,.t-work,.t-client,.t-bad,.t-ok,.t-warn):not(#_):not(#_){color:var(--on-status)!important}
html body :is(.bk-chip,.bk-stsel).t-none:not(#_):not(#_){background-color:var(--st-none)!important}html body :is(.bk-chip,.bk-stsel).t-new:not(#_):not(#_){background-color:var(--st-new)!important}
html body :is(.bk-chip,.bk-stsel).t-work:not(#_):not(#_){background-color:var(--st-work)!important}html body :is(.bk-chip,.bk-stsel).t-client:not(#_):not(#_){background-color:var(--st-client)!important}
html body :is(.bk-chip,.bk-stsel).t-bad:not(#_):not(#_){background-color:var(--st-bad)!important}html body :is(.bk-chip,.bk-stsel).t-ok:not(#_):not(#_){background-color:var(--st-ok)!important}html body :is(.bk-chip,.bk-stsel).t-warn:not(#_):not(#_){background-color:var(--st-warn)!important}
html body .ps-dd.t-new:not(#_){background:var(--sta-new)}html body .ps-dd.t-work:not(#_){background:var(--sta-work)}html body .ps-dd.t-warn:not(#_){background:var(--sta-warn)}
html body .ps-st.t-work .ps-stc:not(#_){border-color:var(--sta-work)}html body .ps-st.t-warn .ps-stc:not(#_){border-color:var(--sta-warn)}html body .ps-st.t-new .ps-stc:not(#_){border-color:var(--sta-new)}
/* a month with the client is "with someone else": purple, not blue */
/* Assign to… on a job nobody has yet: needs attention (yellow), so it doesn't look like the blue status beside it; readable in dark */
html body select.wk-st.wk-unas:not(#_):not(#_):not(#_){background-color:var(--st-warn)!important;color:var(--on-status)!important;-webkit-text-fill-color:var(--on-status)!important;box-shadow:none!important}
/* Reports › Clients at risk: the tiles' own soft colours, which switch in dark mode (their labels were 1.6:1 on a light tile, the "Fine" number invisible) */
html body .rk-t.red:not(#_){background:var(--status-stuck-bg)}html body .rk-t.red b:not(#_){color:var(--status-stuck-fg)}
html body .rk-t.amber:not(#_){background:color-mix(in srgb,var(--sta-warn) 16%,var(--surface))}html body .rk-t.amber b:not(#_){color:var(--sta-warn)} /* Watch: needs attention, yellow */
html body .rk-t.rk-ok:not(#_){background:var(--accent-green-soft)}html body .rk-t.rk-ok b:not(#_){color:var(--accent-green)}
html body .rk-t small:not(#_){color:var(--ink-muted)}
/* the month's dot: ready to send needs the account manager (yellow), with the client is purple */
html body :is(.ps-pst.t-ready i,.ps-dot.t-ready):not(#_){background:var(--sta-warn)}
html body .wk-tag.warn:not(#_):not(#_){background:var(--st-warn)!important;color:var(--on-status)!important;font-weight:600}
html body .pc-card.t-yellow:not(#_){--pc:var(--st-warn)}

/* Reports › Delivered work (public/delivered.js) */
html body .dl-bar:not(#_){display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;margin-bottom:10px}html body .dl-bar label:not(#_){display:grid;gap:4px;font:500 12px var(--font-sans);color:var(--ink-muted)}
html body .dl-or:not(#_){color:var(--ink-subtle);font-size:12px;padding-bottom:9px}html body .dl-quick:not(#_){display:flex;gap:6px}html body .dl-quick .btn-s.on:not(#_){background:var(--c-ink);color:var(--surface)}
html body .dl-tiles:not(#_){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0 16px}@media (max-width:860px){html body .dl-tiles:not(#_){grid-template-columns:repeat(2,minmax(0,1fr))}}
html body .dl-tile:not(#_){border:0;border-radius:12px;padding:12px 14px;text-align:start;cursor:pointer;background:var(--surface-sunken);color:var(--c-ink);display:grid;gap:2px;outline:2px solid transparent}
html body .dl-tile b:not(#_){font:700 26px/1 var(--font-sans)}html body .dl-tile span:not(#_){font:500 12.5px var(--font-sans);color:var(--ink-muted)}html body .dl-tile.on:not(#_){outline-color:var(--c-ink)}
html body .dl-tile.t-ok:not(#_){background:var(--st-ok)}html body .dl-tile.t-work:not(#_){background:var(--st-work)}html body .dl-tile.t-ok span:not(#_),html body .dl-tile.t-work span:not(#_){color:var(--on-status,#17181a)}html body .dl-tile.t-ok b:not(#_),html body .dl-tile.t-work b:not(#_){color:var(--on-status,#17181a)}
html body .dl-t:not(#_){width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:8px}html body .dl-t th:not(#_){text-align:start;font:600 12px var(--font-sans);color:var(--ink-subtle);padding:8px 10px;background:var(--surface-sunken);white-space:nowrap}
html body .dl-t td:not(#_){padding:8px 10px;border-top:1px solid var(--surface-sunken);vertical-align:top}html body .dl-t td small:not(#_){display:block;color:var(--ink-subtle);font-size:12px}html body .dl-n:not(#_){text-align:end}
html body .sl-wrep h3:not(#_){font-size:15px;font-weight:600;margin:0 0 4px}html body .sl-wrep h3 small:not(#_){font-weight:500;color:var(--ink-muted);font-size:12.5px;margin-inline-start:6px} /* Sales › Report: Waiting for the client / dropped (3 November 2026) */
html body .dl-d a:not(#_){color:inherit}html body .dl-head:not(#_){display:flex;align-items:center;gap:10px;margin:18px 0 8px}html body .dl-head h3:not(#_){margin:0;flex:1}html body .dl-head h3 small:not(#_){color:var(--ink-subtle);font-weight:500}
html body .dl-k:not(#_){display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font:600 12px var(--font-sans);color:var(--on-status,#17181a);background:var(--st-none);white-space:nowrap}
html body .dl-k.t-ok:not(#_){background:var(--st-ok)}html body .dl-k.t-work:not(#_){background:var(--st-work)}
/* A client's monthly work report panel (public/workreport.js, 3 November 2026) */
html body .wrp:not(#_){display:grid;gap:8px}html body .wrp .tv-lab:not(#_){margin-top:6px}html body .wrp-row:not(#_){display:flex;flex-wrap:wrap;gap:6px;align-items:center}html body .wrp-row .find:not(#_){width:auto;flex:1 1 150px}html body .wrp .btn-s.on:not(#_){background:var(--c-ink);color:var(--surface)}
html body .wrp-h:not(#_){margin:14px 0 2px;font:600 16px/1.3 var(--font-sans)}html body .wrp-h small:not(#_){font-weight:500;color:var(--ink-subtle);margin-inline-start:6px;font-size:12px}
html body .wrp-tiles:not(#_){display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}html body .wrp-tiles div:not(#_){background:var(--surface-sunken);border-radius:10px;padding:10px 12px;display:grid;gap:2px;min-width:0}
html body .wrp-tiles b:not(#_){font:700 22px/1 var(--font-sans)}html body .wrp-tiles span:not(#_){font:500 12px var(--font-sans);color:var(--ink-muted)}
html body .wrp textarea:not(#_){width:100%;resize:vertical}html body .wrp-link .find:not(#_){width:100%;font-size:12.5px}html body .wrp .wk-do:not(#_){flex-wrap:wrap}
@media (max-width:860px){html body .dl-d:not(#_){display:block;overflow-x:auto}}
/* An item's two halves (team feedback, 20 October 2026): Request (what is asked, references and inspiration) and Delivery (the work
   handed back). public/kit.js zone(); used by Production jobs, posts, shoots and branding tasks. Request sits on a sky tint, Delivery
   on a green one, each with its name and one line on what goes there. */
html body .iz:not(#_){display:grid;gap:10px;margin-top:14px;padding:12px 14px 14px;border-radius:12px;border:1px solid var(--border);border-inline-start:3px solid var(--accent-sky)}
html body .iz-req:not(#_){background:var(--accent-sky-soft)}
html body .iz-del:not(#_){background:var(--accent-green-soft);border-inline-start-color:var(--accent-green)}
html body .iz-h:not(#_){display:grid;gap:1px}
html body .iz-h b:not(#_){font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
html body .iz-h small:not(#_){font-size:12px;color:var(--muted)}
html body .iz .sp-jfiles:not(#_),html body .iz .sp-jgo:not(#_){display:grid;gap:4px}
html body .iz .sp-jfiles small:not(#_),html body .iz .sp-jgo small:not(#_){color:var(--muted);font-size:12px}
html body .iz .wk-jd:not(#_){margin:0}
html body .iz .pp-s:not(#_){margin:0;padding:0;border:0;background:none}
/* a branding project's stage status fills its cell edge to edge, square, as every list's status does (Rami, 20 October 2026: "all
   status drop downs should be full bleed edge to edge color areas and not rounded pill shapes") */
html body .br-r:not(.br-head)>select[data-bs="state"]:not(#_):not(#_):not(#_){border-radius:0!important;align-self:stretch;height:auto!important;min-height:44px!important;margin:-4px 0!important;width:100%!important;max-width:none!important}
/* no tabs over a branding project's table (Rami, 20 October 2026): Open all / Close all sit in the Stage header */
html body .br-head .br-hst:not(#_){display:flex;align-items:center;gap:8px}
html body .br-head .br-hst .br-folds:not(#_){margin-inline-start:auto;font-weight:400;text-transform:none;letter-spacing:0}
html body .br-stages:not(#_){padding-top:var(--space-3,12px)}
/* the client's contract start on Setup (Rami, 22 October 2026; public/profile.js ctrCard) */
html body .pf-ctr:not(#_){display:flex;flex-direction:column;gap:4px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
html body .pf-ctr small:not(#_){color:var(--ink-subtle)}html body .pf-ctr .pf-ctrw:not(#_){color:var(--warn,#b25e00)}
html body .pf-ctrf:not(#_){display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;margin-top:8px}html body .pf-ctrf label>span:not(#_){display:block;font-size:12px;color:var(--ink-subtle);margin-bottom:2px}
html body .pf-ctrf input[name=why]:not(#_){flex:1 1 180px;min-width:0}
/* the client's contracts, newest first, and Renew (Rami, 22 October 2026; public/profile.js ctrList) */
html body .pf-cl:not(#_){display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--border)}html body .pf-cl:last-of-type:not(#_){border-bottom:0}
html body .pf-cl>div:not(#_){display:flex;flex-wrap:wrap;align-items:center;gap:6px}html body .pf-cl small:not(#_){color:var(--ink-subtle)}
html body .pf-past:not(#_){margin:0 0 8px}html body .pf-past small:not(#_){display:block;color:var(--ink-subtle);font-size:12px}
html body .pf-renew:not(#_){display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:12px}

/* ===== One look for every list on a phone (Rami, 23 October 2026: "every [page] looks slightly different than the next… I think the
   branding [project page] is my preferred look"). Like a branding project's stages: each row its own outlined card on the page's grey,
   a little apart, its name bold over a grey line, the status on the right; a group is a small grey label with its count, not a box. ===== */
@media (max-width:860px){
  /* the board lists (Branding, Shoots, Production's and Clients' tables): no box around a group */
  html body .bk-gbox:not(#_):not(#_):not(#_):not(#_){background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;margin:0 0 14px!important;overflow:visible!important;min-width:0!important}
  html body .bk-gbox>.wk-gh:not(#_):not(#_):not(#_):not(#_){height:auto!important;min-height:0!important;padding:2px 0 4px!important;background:transparent!important;border:0!important;box-shadow:none!important}
  html body .bk-gbox>.wk-gh>label:not(#_):not(#_):not(#_):not(#_),html body .bk-gbox>.wk-gh input[type=checkbox]:not(#_):not(#_):not(#_):not(#_){display:none!important}
  html body .bk-gbox>.wk-gh>button:not(#_):not(#_):not(#_):not(#_),html body .bk-gbox>.wk-gh>button b:not(#_):not(#_):not(#_):not(#_){color:var(--ink-muted)!important;font:600 12.5px/1.2 var(--font-sans)!important;text-transform:uppercase;letter-spacing:.05em;padding:0 4px!important}
  html body .bk-gbox>.wk-gh>button:not(#_):not(#_):not(#_):not(#_){min-height:40px;display:inline-flex;align-items:center} /* a label, but still big enough to tap (it folds the group) */
  html body .bk-gbox>.wk-gh>button em:not(#_):not(#_):not(#_):not(#_){font:600 12.5px/1.2 var(--font-sans)!important;color:var(--ink-muted)!important;text-transform:none}
  html body .bk-gbox>.wk-gh svg:not(#_):not(#_):not(#_):not(#_){color:var(--ink-muted)!important;width:14px;height:14px}
  html body .bk-gbox :is(.wk-r1.head,.ct-tr.ct-head2,.lt-hclone):not(#_):not(#_):not(#_):not(#_){display:none!important}
  html body .bk-gbox :is(.wk-r1:not(.head):not(.bk-add),.ct-tr:not(.ct-head2):not(.bk-add)):not(#_):not(#_):not(#_):not(#_){background:var(--page)!important;border:1px solid var(--border)!important;border-radius:12px!important;margin:0 0 8px!important;box-shadow:none!important}
  html body .bk-gbox :is(.wk-r1:not(.head):not(.bk-add),.ct-tr:not(.ct-head2):not(.bk-add))>*:not(#_):not(#_):not(#_):not(#_){background:transparent!important;box-shadow:none!important;border-inline-start:0!important}
  html body .bk-gbox .bk-add:not(#_):not(#_):not(#_):not(#_){background:transparent!important;border:1px dashed var(--border)!important;border-radius:12px!important;margin:0!important;box-shadow:none!important}
  html body .bk-gbox .bk-add>*:not(#_):not(#_):not(#_):not(#_){background:transparent!important;border:0!important;box-shadow:none!important}
  /* a stage's tasks have no column headings on a phone: their row showed as an empty grey block above + Add task */
  html body .wk-r1.jsub-head:not(#_):not(#_):not(#_):not(#_){display:none!important}
  /* the phone pages (Home's tasks, My work, Production, Clients, Sales): no white block around a group, each row a card */
  html body :is(.mk-list,.mk-sec):not(#_):not(#_):not(#_){background:transparent!important;border-radius:0!important;overflow:visible!important;box-shadow:none!important;min-height:0}
  html body .mk-sec h3:not(#_):not(#_):not(#_){padding:6px 4px 8px!important}
  html body :is(.mk-list,.mk-sec)>:is(.mk-item,.mk-card,.mk-row,.mk-act):not(#_):not(#_):not(#_),
  html body :is(.mk-list,.mk-sec)>a:is(.mk-item,.mk-card,.mk-row):not(#_):not(#_):not(#_){background:var(--page)!important;border:1px solid var(--border)!important;border-radius:12px!important;margin:0 0 8px!important;padding:12px 14px!important}
}

/* ===== A status you can't change is a dot and a word (Rami, 23 October 2026: "many cases where a status is not changeable… a simple
   intuitive way… so a user doesn't think there is a bug or that they can change it"). One rule everywhere: a filled pill with its ▾
   is a status you can change (a dropdown); a coloured dot and the word only tells you (set by the Hub, or by someone else's step).
   Where a tag says where it comes from (its title), a tap on a phone shows that line (shell: public/app.js tagTip). ===== */
html body :is(i,span,em,b).wk-tag:not(#_):not(#_):not(#_):not(#_){display:inline-flex!important;align-items:center;gap:6px;width:auto!important;height:auto!important;min-height:0!important;padding:0 2px!important;margin:0;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--ink)!important;font-weight:600;white-space:nowrap}
html body :is(i,span,em,b).wk-tag:not(#_):not(#_):not(#_):not(#_):not(#_)::before{content:""!important;display:block!important;flex:none;width:8px;height:8px;border-radius:50%;background:var(--dot,var(--status-idle-fg))!important}
html body .wk-tag:is(.requested,.open,.waiting,.done):not(#_):not(#_){--dot:var(--accent-sky)}
html body .wk-tag:is(.doing,.confirmed,.warn,.sv-doing):not(#_):not(#_){--dot:var(--accent-orange)}
html body .wk-tag:is(.review,.client):not(#_):not(#_){--dot:var(--accent-violet)}
html body .wk-tag:is(.changes,.stuck,.hot,.declined):not(#_):not(#_){--dot:var(--accent-rose)}
html body .wk-tag:is(.approved,.ok,.sv-done):not(#_):not(#_){--dot:var(--accent-green)}
html body .wk-r1>span:has(>.wk-tag:only-child):not(#_):not(#_):not(#_){padding:0 10px!important;display:flex!important;align-items:center}
/* …and a status you can change keeps its ▾, wherever it sits (a full table cell too) */
html body select.wk-st:not([multiple]):not(#_):not(#_):not(#_){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317181a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 8px center!important;background-size:12px 12px!important;padding-inline-end:24px!important}
[dir=rtl] select.wk-st:not([multiple]):not(#_):not(#_):not(#_){background-position:left 8px center!important}
html body [data-phr]>[data-ph=s]:has(>.wk-tag):not(#_):not(#_):not(#_):not(#_){overflow:visible!important;min-width:max-content!important;width:auto!important} /* on a phone a dot and its word fit their cell */
.tag-tip{position:fixed;z-index:80;max-width:min(280px,calc(100vw - 24px));padding:8px 12px;border-radius:12px;background:var(--ink);color:var(--surface);font-size:13px;line-height:1.35;box-shadow:0 8px 24px rgba(0,0,0,.2)}
/* an earlier year's finished months, folded under "2026 (12)" (public/rail.js yearRows; Rami, 23 October 2026) */
html body .crail-l button.crail-mo.crail-yr:not(#_){font-size:12px;font-weight:600;color:var(--ink-muted);letter-spacing:.02em}
html body .crail-l button.crail-mo.crail-yr i:not(#_){width:10px;font-style:normal;font-size:10px;text-align:center}
/* a post's reference links, each one to open (several, a space between them: team feedback, 27 October 2026) */
html body .pp-rls:not(#_){display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 4px}
html body .pp-rls .btn-s:not(#_),html body .wk-rl:not(#_){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .wk-rl:not(#_){display:inline-flex;margin:6px 6px 0 0}
/* ---------- The client page's header in one line (Rami, 30 October 2026, learnt from the Workflow board; public/content.js head) ----------
   "Clients ›" as a small link before the name, the picture and the name, the status, what Circle does as small pills, then ⋯ on the
   right; the tabs right under it. On a phone the phone's own header says where you are, so the link back goes. */
html body :is(#ctBody,.pp-prof) .ct-hd1:not(#_):not(#_){background:transparent!important;color:var(--ink);border:0;border-radius:0;padding:0;margin:0 0 4px;box-shadow:none;width:auto}
html body :is(#ctBody,.pp-prof) .ct-hd1 .ct-hd-row:not(#_):not(#_){display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:0}
html body :is(#ctBody,.pp-prof) .ct-hd1 .ct-up:not(#_):not(#_){font-size:13px;font-weight:500;color:var(--ink-muted);text-decoration:none;white-space:nowrap}
html body :is(#ctBody,.pp-prof) .ct-hd1 .ct-up:hover:not(#_):not(#_){color:var(--ink);text-decoration:underline;text-underline-offset:3px}
html body :is(#ctBody,.pp-prof) .ct-hd1 .ct-upsep:not(#_):not(#_){font-style:normal;font-size:13px;color:var(--ink-subtle)}
html body :is(#ctBody,.pp-prof) .ct-hd1 .cav:not(#_):not(#_){width:28px;height:28px;font-size:12px}
html body :is(#ctBody,.pp-prof) .ct-hd1 h1:not(#_):not(#_){font-size:20px;letter-spacing:-.01em;color:var(--ink);margin:0;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
html body :is(#ctBody,.pp-prof) .ct-hd1 .ct-meta:not(#_):not(#_){display:inline-flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
html body :is(#ctBody,.pp-prof) .ct-hd1 .ct-mt:not(#_):not(#_){height:22px;font-size:11.5px;padding:0 9px}
html body :is(#ctBody,.pp-prof) .ct-hd1 select.ct-hdst:not(#_):not(#_){height:28px;min-width:0}
html body :is(#ctBody,.pp-prof) .ct-hd1 .ct-hdr:not(#_):not(#_){margin-inline-start:auto}
@media (max-width:860px){html body :is(#ctBody,.pp-prof) .ct-hd1 :is(.ct-up,.ct-upsep):not(#_):not(#_){display:none}html body :is(#ctBody,.pp-prof) .ct-hd1 h1:not(#_):not(#_){flex:1 1 calc(100% - 140px)}}

/* ---------- The client's Overview as bento boxes (Rami, 30 October 2026; public/content.js ovHtml) ----------
   A 12-column grid of white rounded boxes on the page's grey, each box as wide as its row gives it (--sp); Needs you is the one dark
   box, like Home's header. Narrower screens: two a row (Needs you across); a phone: one under the other, in the same order. */
html body .ovb:not(#_){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;margin-top:14px;align-items:stretch}
html body .ovb-b:not(#_){grid-column:span var(--sp,4);background:var(--surface);border-radius:20px;padding:16px 18px;min-width:0;display:flex;flex-direction:column;gap:10px;box-sizing:border-box}
html body .ovb-h:not(#_){display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
html body .ovb-h h3:not(#_){margin:0;font-size:13px;font-weight:600;color:var(--ink-muted)}
html body .ovb-more:not(#_){font-size:12px;font-weight:600;color:var(--ink-muted);text-decoration:none;border-radius:999px;padding:3px 10px;background:var(--surface-sunken);white-space:nowrap}
html body .ovb-more:hover:not(#_){color:var(--ink);background:var(--surface-hover)}
html body .ovb-mores:not(#_){display:inline-flex;gap:6px}
html body .ovb-wait:not(#_){margin:0;color:var(--ink-subtle);font-size:18px;line-height:1;letter-spacing:.1em}
html body .ovb-line:not(#_){margin:0;font-size:13.5px;color:var(--ink-muted)}
html body .ovb-line a:not(#_){color:var(--ink)}
html body .ovb-big:not(#_){margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
/* Needs you: the dark box */
html body section.ovb-need:not(#_){background:var(--hm-hero);color:var(--hm-ink);padding:18px 22px}
html body section.ovb-need .ovb-h h3:not(#_){color:inherit;opacity:.72}
html body section.ovb-need :is(.ovb-more,.ovb-wait):not(#_){color:inherit;background:color-mix(in srgb,currentColor 12%,transparent)}
html body section.ovb-need .ovb-wait:not(#_){background:none;opacity:.6}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) body section.ovb-need:not(#_){box-shadow:inset 0 0 0 1px var(--border-strong,var(--border))}}
html[data-theme="dark"] body section.ovb-need:not(#_){box-shadow:inset 0 0 0 1px var(--border-strong,var(--border))}
html body .ovb-nl:not(#_){list-style:none;margin:0;padding:0;display:grid}
html body .ovb-nl li:not(#_){display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent)}
html body .ovb-nl li:first-child:not(#_){border-top:0;padding-top:0}
html body .ovb-nl li>span:first-child:not(#_){display:grid;gap:2px;min-width:0}
html body .ovb-nl b:not(#_){font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .ovb-nl small:not(#_){font-size:12.5px;opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .ovb-act:not(#_){display:inline-flex;gap:6px;flex:none}
html body section.ovb-need .btn-s:not(#_):not(#_){background:transparent;color:inherit;border:1px solid color-mix(in srgb,currentColor 35%,transparent);box-shadow:none}
html body section.ovb-need .btn-s.pri:not(#_):not(#_){background:color-mix(in srgb,currentColor 18%,transparent);border-color:transparent}
html body section.ovb-need .btn-s:hover:not(#_):not(#_){background:color-mix(in srgb,currentColor 24%,transparent)}
html body .ovb-calm:not(#_){margin:auto 0;font-size:17px;font-weight:600;opacity:.88}
html body .ovb-all:not(#_){align-self:flex-start}
/* facts: a label and its value on one line */
html body .ovb-facts:not(#_){margin:0;display:grid;gap:7px}
html body .ovb-facts>div:not(#_){display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13.5px;min-width:0}
html body .ovb-facts dt:not(#_){color:var(--ink-muted)}
html body .ovb-facts dd:not(#_){margin:0;font-weight:600;color:var(--ink);text-align:end;min-width:0}
html body .ovb-facts dd small:not(#_){display:block;font-weight:400;font-size:12px;color:var(--ink-muted)}
html body .ovb-facts dd.hf-red:not(#_){color:var(--status-stuck-fg)}
html body .ovb-facts dd.hf-yellow:not(#_){color:var(--status-working-fg)}
html body .ovb-facts dd.hf-green:not(#_){color:var(--accent-green)}
html body .ovb-facts dd.hf-none:not(#_){color:var(--ink-subtle);font-weight:400}
html body .ovb-facts.ovb-two:not(#_){grid-template-columns:1fr 1fr;margin-top:auto}
html body .ovb-facts.ovb-two>div:not(#_){display:grid;justify-content:start;gap:1px}
html body .ovb-facts.ovb-two dd:not(#_){text-align:start;font-size:15px}
html body .ovb-h a.hh-pill:not(#_){padding:3px 10px;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap}
/* This month: the step bar */
html body .ovb-steps:not(#_){list-style:none;margin:2px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
html body .ovb-steps li:not(#_){display:grid;gap:5px;min-width:0}
html body .ovb-steps li i:not(#_){height:6px;border-radius:3px;background:var(--surface-sunken)}
html body .ovb-steps li.done i:not(#_){background:var(--accent-green)}
html body .ovb-steps li.now i:not(#_){background:#f5c400}
html body .ovb-steps li span:not(#_){font-size:11px;line-height:1.2;color:var(--ink-muted);overflow-wrap:anywhere}
html body .ovb-steps li.now span:not(#_){color:var(--ink);font-weight:600}
html body .ovb-now:not(#_){margin:0;font-size:13px;color:var(--ink-muted)}
html body .ovb-now b:not(#_){color:var(--ink);font-weight:600}
html body .ovb-now em:not(#_){font-style:normal;font-weight:600;color:var(--status-stuck-fg)}
html body .ovb-do:not(#_){display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
html body .ovb-do small:not(#_){color:var(--ink-muted);font-size:13px}
/* Coming up: a small calendar leaf, what, and when */
html body .ovb-cu:not(#_){display:grid;gap:2px}
html body .ovb-cu>a:not(#_){display:flex;align-items:center;gap:10px;padding:5px 6px;margin:0 -6px;border-radius:10px;text-decoration:none;color:var(--ink);min-width:0}
html body .ovb-cu>a:hover:not(#_){background:var(--surface-hover)}
html body .ovb-cal:not(#_){flex:none;width:36px;height:36px;border-radius:10px;background:var(--surface-sunken);display:grid;place-items:center;align-content:center;line-height:1.05}
html body .ovb-cal b:not(#_){font-size:14px}
html body .ovb-cal small:not(#_){font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted)}
html body .ovb-cu>a>span:last-child:not(#_){display:grid;min-width:0}
html body .ovb-cu>a>span:last-child b:not(#_){font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .ovb-cu>a>span:last-child small:not(#_){font-size:12px;color:var(--ink-muted)}
/* People */
html body .ovb-who:not(#_){display:grid;gap:1px}
html body .ovb-who b:not(#_){font-size:15px;font-weight:600;color:var(--ink)}
html body .ovb-who small:not(#_){font-size:12.5px;color:var(--ink-muted)}
html body .ovb-reach:not(#_){display:flex;flex-wrap:wrap;gap:6px}
html body .ovb-team:not(#_){display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
html body .ovb-pill:not(#_){display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border-radius:999px;background:var(--surface-sunken);font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap}
html body .ovb-pill small:not(#_){font-weight:400;font-size:12px;color:var(--ink-muted)}
html body .ovb-pill small:not(#_)::after{content:" ·"}
/* Work in progress: a count per area, each opening it */
html body .ovb-rows:not(#_){display:grid}
html body .ovb-rows>a:not(#_){display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--border);text-decoration:none;color:var(--ink);font-size:13.5px;min-width:0}
html body .ovb-rows>a:first-child:not(#_){border-top:0;padding-top:0}
html body .ovb-rows>a span:not(#_){flex:1;min-width:0;color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .ovb-rows>a b:not(#_){font-weight:600;white-space:nowrap}
html body .ovb-rows>a i:not(#_){font-style:normal;color:var(--ink-subtle)}
html body .ovb-rows>a:hover b:not(#_){text-decoration:underline;text-underline-offset:3px}
/* Links */
html body .ovb-links:not(#_){display:grid;gap:1px}
html body .ovb-links>a:not(#_){display:flex;align-items:center;gap:8px;padding:5px 6px;margin:0 -6px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:13.5px;min-width:0}
html body .ovb-links>a:hover:not(#_){background:var(--surface-hover)}
html body .ovb-links .ql-i:not(#_){width:16px;height:16px;flex:none;color:var(--ink-muted)}
html body .ovb-links span:not(#_){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1180px){html body .ovb-b:not(#_):not(#_){grid-column:span 6}html body section.ovb-need:not(#_):not(#_){grid-column:span 12}}
@media (max-width:720px){html body .ovb-steps li:not(.now) span:not(#_){visibility:hidden}html body .ovb-steps li.now span:not(#_){overflow:visible;white-space:nowrap}html body .ovb:not(#_){grid-template-columns:minmax(0,1fr);gap:12px;margin-top:10px}html body .ovb-b:not(#_):not(#_):not(#_){grid-column:auto}html body .ovb-nl li:not(#_){flex-wrap:wrap}html body .ovb-nl :is(b,small):not(#_){white-space:normal}}

/* ---------- Brand › Do and Don't (Rami, 30 October 2026; public/profile.js "brand"): two columns, each rule its own row ---------- */
html body .dd-two:not(#_){display:grid;grid-template-columns:1fr 1fr;gap:16px}
html body .dd-col h4:not(#_){margin:0 0 8px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px}
html body .dd-col h4:not(#_)::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent-green)}
html body .dd-donts h4:not(#_)::before{background:var(--status-stuck-fg)}
html body .dd-list:not(#_){list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
html body .dd-r:not(#_){display:flex;align-items:center;gap:6px;background:var(--surface-sunken);border-radius:10px;padding:2px 4px 2px 10px}
html body .dd-r>i:not(#_){display:none}
html body .dd-r input.find:not(#_):not(#_){flex:1;min-width:0;background:transparent!important;border-color:transparent!important;box-shadow:none!important;padding-inline:2px}
html body .dd-r input.find:focus:not(#_):not(#_){background:var(--surface)!important;border-color:var(--border-strong)!important}
html body .dd-x:not(#_){all:unset;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;color:var(--ink-muted);font-size:16px}
html body .dd-x:hover:not(#_){background:var(--surface-hover);color:var(--status-stuck-fg)}
html body .dd-x:focus-visible:not(#_){outline:2px solid var(--focus)}
html body .dd-none:not(#_){font-size:13px;color:var(--ink-muted);padding:4px 0}
html body .dd-add:not(#_){display:flex;gap:6px}
html body .dd-add input:not(#_){flex:1;min-width:0}
@media (max-width:720px){html body .dd-two:not(#_){grid-template-columns:1fr}}

/* Production's types as tabs on its title line (Rami, 30 October 2026: one Production line in the menu): All, Design, Video, Photo, Copy,
   Tasks, Events, Digital, each with how many jobs it has; a pill group like the QA page's, no extra height */
html body .bk-h .pr-tabs:not(#_){display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface-sunken,rgba(23,24,26,.06));overflow-x:auto;scrollbar-width:none;max-width:100%;min-width:0;flex:0 1 auto}
html body .bk-h .pr-tabs::-webkit-scrollbar{display:none}
html body .bk-h .pr-tabs a:not(#_){display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:999px;font:500 13px var(--font-sans);color:var(--ink-subtle);text-decoration:none;white-space:nowrap}
html body .bk-h .pr-tabs a:hover:not(#_){color:var(--c-ink)}
html body .bk-h .pr-tabs a i:not(#_){font-style:normal;font-weight:600;color:var(--c-ink);font-size:12px}
html body .bk-h .pr-tabs a.on:not(#_){background:var(--surface);color:var(--c-ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
/* A month's Steps (Rami, 30 October 2026; public/monthsteps.js): the column beside the posts. Done: short, a tick; the step the month is
   at: a card in the ink colour (dark on a light page, light on a dark one) with its button and a one-line hint; later steps: grey. */
html body .ps-grid:not(#_):not(#_){grid-template-columns:minmax(0,1fr) 380px;align-items:start}
@media (max-width:1100px){html body .ps-grid:not(#_):not(#_){grid-template-columns:minmax(0,1fr)}}
html body .ps-side:not(#_){display:grid;gap:12px;align-content:start;min-width:0}
/* the Steps folded away (Rami, 31 October 2026): the posts take the width; a slim Steps tab on the right brings the column back */
html body .ps-grid.stfold:not(#_):not(#_){grid-template-columns:minmax(0,1fr) auto}
html body .ps-stopen:not(#_){display:flex;flex-direction:column;align-items:center;gap:8px;position:sticky;top:16px;align-self:start;width:40px;padding:14px 0;border:0;border-radius:999px;background:var(--panel);color:var(--ink);cursor:pointer;font:inherit}
html body .ps-stopen:not(#_):hover{background:var(--hover,var(--panel-2))}
html body .ps-stopen span:not(#_){writing-mode:vertical-rl;transform:rotate(180deg);font-size:13px;font-weight:600;letter-spacing:.02em}
html body .ps-stopen small:not(#_){writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;color:var(--muted)}
html body :is(.ps-stopen,.pst-fold) svg:not(#_){width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html body .pst-fold:not(#_){display:inline-flex;align-items:center;gap:4px;min-height:0;height:24px;padding:0 9px;font-size:12px;margin-inline-start:auto;flex:none}
html body .pst-h:has(.pst-fold) small:not(#_){flex:1}
html body .mb-strat:not(#_){max-width:760px} /* the Strategy tab beside the brief and the plan: a readable line length in the wide panel */
@media (max-width:1100px){html body .ps-grid.stfold:not(#_):not(#_){grid-template-columns:minmax(0,1fr)}html body .ps-stopen:not(#_){position:static;flex-direction:row;width:auto;padding:8px 14px;justify-self:start}html body .ps-stopen :is(span,small):not(#_){writing-mode:horizontal-tb;transform:none}}
/* it stays in view beside a long list and never makes the page longer than the list (the list's column titles stay at the top) */
@media (min-width:1101px){html body .ps-side:not(#_){position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;overscroll-behavior:contain}}
html body .ps-steps:not(#_){display:grid;gap:2px;padding:16px 14px 12px}
html body .pst-h:not(#_){display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 4px 8px}
html body .pst-h h3:not(#_){margin:0;font-size:15px}
html body .pst-h small:not(#_){font-size:12px;color:var(--ink-muted);text-align:end}
html body .pst-l:not(#_){list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
html body .pst:not(#_){display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:4px 10px;align-items:start;padding:7px 6px;border-radius:10px;font-size:13px;color:var(--ink)}
html body .pst-ic:not(#_){width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;font-style:normal;font-size:10.5px;font-weight:700;margin-top:1px;box-sizing:border-box;border:1.5px solid var(--border-strong);color:var(--ink-muted)}
html body .pst.done .pst-ic:not(#_){background:var(--c-ink);border-color:var(--c-ink);color:var(--surface)}
html body .pst.going .pst-ic:not(#_){border-color:var(--c-ink);color:var(--c-ink)}
html body .pst.todo:not(#_){color:var(--ink-subtle)}
html body .pst-t:not(#_){display:grid;gap:1px;min-width:0}
html body .pst-t b:not(#_){font-weight:600}
html body .pst-t small:not(#_){font-size:11.5px;color:var(--ink-muted);overflow-wrap:anywhere}
html body .pst.todo .pst-t small:not(#_){color:var(--ink-subtle)}
html body .pst-n:not(#_){font-size:12px;font-weight:600;color:var(--ink-muted);white-space:nowrap}
html body .pst-do:not(#_){grid-column:2/4;display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
html body .pst-do .btn-s.pst-link:not(#_){min-height:0;height:24px;padding:0 9px;font-size:12px}
html body .pst-skip:not(#_),html body .pst-said:not(#_){flex-basis:100%;font-size:11.5px;color:var(--ink-muted);line-height:1.4}
html body .pst.now:not(#_){background:var(--c-ink);color:var(--surface);padding:12px;margin:4px 0}
html body .pst.now .pst-ic:not(#_){background:var(--accent-orange-soft);border-color:var(--accent-orange-soft);color:var(--accent-orange)}
html body .pst.now :is(.pst-t small,.pst-n,.pst-hint,.pst-skip,.pst-said):not(#_){color:var(--surface);opacity:.78}
html body .pst.now .pst-n:not(#_){opacity:1}
html body .pst.now .pst-do :is(.btn-s,.btn-s.pri):not(#_):not(#_){background:var(--surface)!important;color:var(--c-ink)!important;border-color:var(--surface)!important}
/* a step's colour, as everywhere in the Hub (Rami, 31 October 2026): green done, yellow partly done, red when something is wrong; the
   current step keeps its dark card, its circle takes the colour (public/monthsteps.js, public/brand.js) */
html body .pst:not(#_){--st-ok:var(--accent-green);--st-part:#f5c400;--st-part-ink:#4a3700;--st-bad:var(--status-stuck-fg)}
html body .pst.t-ok .pst-ic:not(#_):not(#_){background:var(--st-ok);border-color:var(--st-ok);color:#fff}
html body .pst.t-part .pst-ic:not(#_):not(#_){background:var(--st-part);border-color:var(--st-part);color:var(--st-part-ink)}
html body .pst.t-bad .pst-ic:not(#_):not(#_){background:var(--st-bad);border-color:var(--st-bad);color:#fff}
html body .pst.t-part:not(.now) .pst-n:not(#_){color:var(--st-part-ink)}
html body .pst.t-bad:not(.now) .pst-n:not(#_){color:var(--st-bad)}
html body .pst.now .pst-do :is(.btn-s,.btn-s.pri):not(#_):not(#_):hover{background:color-mix(in srgb,var(--surface) 88%,var(--c-ink))!important}
html body .pst.now .pst-do .btn-s.pri:not(#_){font-weight:600}
html body .pst-hint:not(#_){flex-basis:100%;font-size:11.5px;line-height:1.4}
html body .pst-note:not(#_){flex-basis:100%;display:grid;gap:4px;font-size:12px}
html body .pst-note textarea:not(#_){width:100%;box-sizing:border-box;background:var(--surface);color:var(--c-ink)}
html body .pst-note .btn-s:not(#_){justify-self:start}
html body .pst-cks.ps-cks:not(#_){margin-top:6px;padding-top:0;border-top:0;gap:2px}
html body .pst-cks .ps-lck:not(#_){padding:3px 4px;font-size:12.5px}
html body .pst.now .pst-cks .ps-lck:not(#_){color:var(--surface)}
html body .pst.now .pst-cks .ps-lck small:not(#_){color:var(--surface);opacity:.78}
html body .pst.now .pst-cks .ps-lck:not(#_):hover{background:transparent;text-decoration:underline}
html body .pst.now .pst-cks :is(.btn-s,.btn-s.pri):not(#_):not(#_){background:transparent!important;color:var(--surface)!important;border-color:color-mix(in srgb,var(--surface) 55%,transparent)!important}
html body .pst.now .pst-cks .btn-s.pri:not(#_):not(#_){background:var(--surface)!important;color:var(--c-ink)!important;border-color:var(--surface)!important;font-weight:600}
html body .pst.now .pst-cks textarea:not(#_){background:var(--surface);color:var(--c-ink)}
html body .pst .ps-warn:not(#_){grid-column:1/-1}
html body .pst-more:not(#_){margin:8px 4px 0;font-size:12.5px}
html body .pst-more summary:not(#_){cursor:pointer;color:var(--ink-muted)}
html body .pst-more>div:not(#_){display:grid;gap:6px;justify-items:start;padding-top:8px}
/* a phone: the step the month is at first, then the rest in order */
@media (max-width:860px){html body .pst.now:not(#_){order:-1}html body .pst-h small:not(#_){max-width:60%}}

/* ---------- The list header (Rami, 31 October 2026: "too busy with duplicate filters"; kit.js pick, viewMenu, bar v2) ----------
   Line 1: the title, "?" and the page's one black button; Production's types on their own line under it. Line 2, in this order:
   [List | Board] · Person ▾ · Client ▾ · Find · View ▾ · ⋯. A picked Person or Client fills its button (ink) with a × to clear it. */
html body .bk-h .bk-hl:not(#_){order:5;flex:1 1 100%;display:flex;min-width:0}
html body .bk-h:has(.bk-hl) .bk-new:not(#_){order:3;margin-inline-start:auto}
html body .bk-bar.bk-bar2:not(#_):not(#_){display:flex;flex-wrap:wrap;align-items:center;gap:8px;grid-template-columns:none}
html body .bk-bar2>.bk-l:not(#_):not(#_){flex:none;overflow:visible;max-width:100%}
html body .bk-bar2>.bk-r:not(#_):not(#_){display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;justify-content:flex-start;justify-self:auto;margin:0;gap:8px;min-width:0;max-width:100%}
html body .bk-bar2>.bk-r>*:not(#_){order:0;flex:none}
html body .bk-bar2>.bk-r>.bk-q:not(#_):not(#_){flex:0 1 240px;min-width:150px;width:auto}
html body .bk-bar2>.bk-sub:not(#_),html body .bk-bar2>.lt-sc:not(#_){flex:1 1 100%}
html body .bk-bar2 .bk-more:not(:has(.bk-pop>*)):not(#_){display:none}
html body .bk-bar2 .bk-vw:not(:has(.bk-vpop :is(select,button,input))):not(#_){display:none}
html body :is(.bk-pkd,.bk-vw):not(#_){position:relative}
html body :is(.bk-pkd,.bk-vw)>summary:not(#_){list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:var(--row-height);min-height:var(--row-height);white-space:nowrap;max-width:240px}
html body :is(.bk-pkd,.bk-vw)>summary::-webkit-details-marker{display:none}
html body .bk-pkb>span:not(#_){overflow:hidden;text-overflow:ellipsis}
html body .bk-car:not(#_){width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;flex:none}
html body .bk-pk:not(#_){position:relative;display:inline-flex;align-items:center}
html body .bk-pk.on .bk-pkb:not(#_),html body .bk-vwb.on:not(#_){background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
html body .bk-pk.on .bk-pkb:not(#_){padding-inline-end:34px}
html body .bk-pk.on .bk-pkb .bk-car:not(#_){display:none}
html body .bk-pkx:not(#_){position:absolute;inset-inline-end:5px;top:50%;transform:translateY(-50%);width:24px;height:24px;min-height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--on-ink);font:600 16px/1 var(--font-sans);cursor:pointer}
html body .bk-pkx:hover:not(#_){background:color-mix(in srgb,var(--on-ink) 22%,transparent)}
html body .bk-pkpop:not(#_):not(#_){position:absolute;top:calc(100% + 6px);inset-inline-start:0;inset-inline-end:auto;z-index:40;width:min(300px,calc(100vw - 32px));max-height:min(62vh,440px);display:flex;flex-direction:column;gap:6px;padding:8px}
html body .bk-pks:not(#_){width:100%;flex:none}
html body .bk-pkl:not(#_){display:flex;flex-direction:column;gap:1px;overflow:auto;min-height:0}
html body .bk-pko:not(#_){display:flex;align-items:center;gap:10px;min-height:34px;padding:4px 8px;border:0;border-radius:var(--radius-md);background:none;color:var(--ink);font:500 13.5px var(--font-sans);text-align:start;cursor:pointer;flex:none}
html body .bk-pko:hover:not(#_){background:var(--surface-hover)}
html body .bk-pko[hidden]:not(#_){display:none}
html body .bk-pko span:not(#_){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .bk-pko em:not(#_){font-style:normal;color:var(--ink-subtle);font-size:12px}
html body .bk-pkc:not(#_){width:16px;height:16px;flex:none;border:1.5px solid var(--border-strong);border-radius:4px;display:grid;place-items:center}
html body .bk-pko.all .bk-pkc:not(#_){border-radius:50%}
html body .bk-pko.on .bk-pkc:not(#_){background:var(--ink);border-color:var(--ink)}
html body .bk-pko.on .bk-pkc::after{content:"";width:8px;height:4px;border:2px solid var(--on-ink);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
html body .bk-pko.me:not(#_),html body .bk-pko.all:not(#_){font-weight:600}
html body .bk-pko.all:not(#_){margin-bottom:4px;box-shadow:0 1px 0 var(--border)}
html body .bk-pk0:not(#_){color:var(--ink-subtle);padding:6px 8px}
html body .bk-vpop:not(#_):not(#_){width:min(320px,calc(100vw - 32px));gap:10px;padding:12px;max-height:min(70vh,560px);overflow:auto}
html body .bk-vpop .bk-grp:not(#_){display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--ink-muted)}
html body .bk-vpop .bk-grp select:not(#_){min-width:150px;max-width:190px;height:var(--row-height)}
html body .bk-vpop .bk-ym:not(#_){display:inline-flex;gap:6px}
html body .bk-vpop .bk-ym select:not(#_){min-width:0;max-width:110px}
html body .bk-vpop .bk-vf:not(#_){display:flex;flex-direction:column;gap:8px;order:3}
html body .bk-vpop :is(.bk-f,.bk-f .lt-bar.in):not(#_):not(#_):not(#_){display:contents}
html body .bk-vpop>.bk-grp:not(#_){order:1}html body .bk-vpop>[data-ksort]:not(#_),html body .bk-vpop .lt-sortw:not(#_):not(#_){order:2}
html body .bk-vpop .lt-fw:not(#_):not(#_){order:4}html body .bk-vpop .lt-cw:not(#_):not(#_){order:5}html body .bk-vpop .lt-vw:not(#_):not(#_){order:6}
html body .bk-vpop .lt-sc:not(#_){display:none}
html body .bk-vpop .bk-f .wk-ck:not(#_){display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%}
html body .bk-vpop .bk-f .wk-ck>button:not(#_){justify-content:flex-start;width:100%;height:var(--row-height)}
html body .bk-vpop .bk-f :is(.lt-fb,.lt-cb,.lt-vb)>span:not(#_):not(#_){font-size:13px;display:inline}
html body .bk-vpop .wk-pop:not(#_):not(#_):not(#_){position:static;inset:auto;width:auto;max-width:none;min-width:0;box-shadow:none;border:1px solid var(--border);margin:0;animation:none}
html body .bk-pop :is(.sees-btn,.as-btn):not(#_):not(#_){height:32px;min-height:32px;border-radius:var(--radius-md);background:var(--surface);justify-content:flex-start}
html body .bk-pop .sees-btn span:not(#_):not(#_){display:inline}
@media (max-width:860px){
  html body .bk-bar2>.bk-r>.bk-q:not(#_):not(#_){flex:1 1 160px}
  html body :is(.bk-pkd,.bk-vw)>summary:not(#_){max-width:200px}
  html body .bk-pkpop:not(#_):not(#_):not(#_),html body .bk-vpop:not(#_):not(#_):not(#_){position:fixed;left:16px;right:16px;top:auto;bottom:calc(150px + env(safe-area-inset-bottom,0px));width:auto;max-height:min(52vh,420px);z-index:1200}
  html body .bk-pkx:not(#_){width:28px;height:28px}
}
/* Admin › Deadlines and timings (public/promises.js; 31 October 2026, by department since 1 November 2026): one folding card per
   department, one row per rule: its sentence, its number, how it is counted, Back to default; then what is set somewhere else */
html body #dlPage .dl-sub:not(#_){max-width:760px;margin-bottom:14px}
html body #dlPage .dl-card:not(#_){padding:0!important;overflow:hidden;margin-bottom:12px}
html body #dlPage .dl-card>summary:not(#_){display:flex;align-items:baseline;gap:12px;padding:14px 16px;cursor:pointer;list-style:none}
html body #dlPage .dl-card>summary::-webkit-details-marker:not(#_){display:none}
html body #dlPage .dl-card>summary:not(#_)::before{content:"";width:8px;height:8px;border-right:2px solid var(--ink-muted);border-bottom:2px solid var(--ink-muted);transform:rotate(-45deg);align-self:center;transition:transform .15s}
html body #dlPage .dl-card[open]>summary:not(#_)::before{transform:rotate(45deg)}
html body #dlPage .dl-card>summary h2:not(#_){margin:0;font:600 17px/22px var(--font-sans)}
html body #dlPage .dl-card>summary small:not(#_){color:var(--ink-muted);font-size:13px}
html body #dlPage .dl-row:not(#_){display:grid;grid-template-columns:minmax(240px,1.6fr) minmax(170px,.8fr) minmax(150px,.7fr) 136px;gap:16px;align-items:center;padding:10px 16px;border-top:1px solid var(--border);min-height:52px}
html body #dlPage .dl-row:nth-child(odd):not(#_){background:var(--row-alt,transparent)}
html body #dlPage .dl-what:not(#_){font-size:14px;line-height:20px}
html body #dlPage .dl-what small:not(#_){display:block;color:var(--ink-muted);font-size:13px;margin-top:2px}
html body #dlPage .dl-num:not(#_){display:inline-flex;align-items:center;gap:8px;color:var(--ink-muted)}
html body #dlPage .dl-num>b:not(#_){color:var(--ink);font-weight:600}
html body #dlPage .dl-num input.find:not(#_):not(#_){width:72px!important;min-width:0;flex:none;text-align:center;padding-inline:8px}
html body #dlPage .dl-num select.find:not(#_):not(#_){width:auto!important;min-width:96px;flex:none}
html body #dlPage .dl-unit:not(#_){color:var(--ink-muted);font-size:13.5px}
html body #dlPage .dl-ul:not(#_){display:none}
html body #dlPage .dl-reset:not(#_){text-align:end}
html body #dlPage .dl-else:not(#_){border-top:1px solid var(--border);background:var(--surface-sunken)}
html body #dlPage .dl-elseh:not(#_){margin:0;padding:10px 16px 0;font:600 12.5px/16px var(--font-sans);color:var(--ink-muted)}
html body #dlPage .dl-orow:not(#_){grid-template-columns:minmax(240px,1fr) auto;border-top:0;background:transparent!important}
html body #dlPage .dl-go a:not(#_){color:var(--ink);text-decoration:underline;text-underline-offset:2px;font-weight:500;white-space:nowrap}
html body #dlPage .dl-do:not(#_){position:sticky;bottom:0;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px;padding:10px 0;background:var(--surface,var(--bg))}
@media (max-width:760px){
  html body #dlPage .dl-row:not(#_){grid-template-columns:1fr;gap:8px;padding:14px}
  html body #dlPage .dl-orow:not(#_){grid-template-columns:1fr}
  html body #dlPage .dl-ul:not(#_){display:inline;margin-inline-end:6px}
  html body #dlPage .dl-reset:not(#_){text-align:start}
  html body #dlPage .dl-reset:empty:not(#_){display:none}
}
/* the line left on Social media's and Shoots' Settings (public/areaset.js): a link that looks like one */
html body .as-dl a[data-asdlgo]:not(#_){color:var(--ink)!important;text-decoration:underline;text-underline-offset:2px;font-weight:500}

/* ---------- Home (Rami, 31 October 2026, from the mockup he approved: "Option 1, welcoming"; public/homepage.js) ----------
   Light all the way down (Rami: "too much of a contrast, make it lighter"): the greeting on a soft tint (warm for Owners and Admins,
   blue for Sales, green for everyone else; Cadence's own soft accents), white boxes on the page's grey, soft tiles for the numbers. */
html body #homeToday .hp:not(#_){--hp-tint:var(--accent-green-soft);--hp-link:var(--status-working-fg);display:flex;flex-direction:column;gap:20px;color:var(--c-ink);font-family:var(--font-sans)}
html body #homeToday .hp a:not(#_):not(.btn-s){color:var(--hp-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
html body #homeToday .hp a:not(#_):not(.btn-s):hover{text-decoration-thickness:2px}
html body #homeToday .hp-hero:not(#_){display:flex;gap:28px;align-items:flex-start;background:var(--hp-tint);border-radius:24px;padding:34px 38px;color:var(--c-ink);border:0;box-shadow:none;margin:0}
html body #homeToday .hp-hero.tone-warm:not(#_){--hp-tint:var(--accent-orange-soft)}
html body #homeToday .hp-hero.tone-sky:not(#_){--hp-tint:var(--primary-soft)}
html body #homeToday .hp-k:not(#_){display:block;width:64px;height:64px;flex:none;--mark:var(--c-ink);--eye:var(--hp-tint);cursor:pointer}
html body #homeToday .hp-k .buddy:not(#_){width:64px;height:64px;display:block}
html body #homeToday .hp-hi:not(#_){display:flex;flex-direction:column;gap:12px;flex:1 1 auto;min-width:0;position:static}
html body #homeToday .hp-hi small.hp-date:not(#_){font-size:14px;color:var(--ink-muted);text-transform:none;letter-spacing:0;font-weight:500;opacity:1}
html body #homeToday .hp .hm-hi h2:not(#_){margin:0;font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--c-ink)}
html body #homeToday .hp-say:not(#_){margin:0;font-size:18px;line-height:1.55;max-width:820px;color:var(--c-ink)}
html body #homeToday .hp-say small:not(#_){font-size:inherit}
html body #homeToday .hp-hero #hmStreak:empty,html body #homeToday .hp-hero #hmTrain:empty{display:none}
html body #homeToday .hp-hero .hm-streak:not(#_){margin:0;color:var(--ink-muted);font-size:14px}
/* the weather block at the hero's end (Rami, 31 October 2026: "more like a weather block and not just text") */
html body #homeToday .hp-wx:not(#_){flex:none;align-self:center;margin-inline-start:auto;display:flex;align-items:center;gap:14px;background:var(--surface);border-radius:20px;padding:14px 20px 14px 16px;min-width:170px}
html body #homeToday .hp-wx[hidden]:not(#_){display:none}
html body #homeToday .hp-wxi:not(#_){width:44px;height:44px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-muted)}
html body #homeToday .hp-wx.wx-sun .hp-wxi:not(#_),html body #homeToday .hp-wx.wx-part .hp-wxi:not(#_){color:#e8a317}
html body #homeToday .hp-wx.wx-rain .hp-wxi:not(#_),html body #homeToday .hp-wx.wx-storm .hp-wxi:not(#_){color:#3b82c4}
html body #homeToday .hp-wxt:not(#_){display:flex;flex-direction:column;line-height:1.2;min-width:0}
html body #homeToday .hp-wxt b:not(#_){font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--c-ink)}
html body #homeToday .hp-wxt small:not(#_){font-size:13px;color:var(--c-ink)}
html body #homeToday .hp-wxt small.hp-wxc:not(#_){color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
@media (max-width:860px){html body #homeToday .hp-wx:not(#_){order:3;margin-inline-start:0;min-width:0;padding:10px 14px;gap:10px;border-radius:16px}html body #homeToday .hp-wxi:not(#_){width:32px;height:32px}html body #homeToday .hp-wxt b:not(#_){font-size:22px}}
/* the header takes the colour theme's own header colours (--hm-hero, --hm-ink in public/frame.css; Rami, 31 October 2026: "use same
   colors of each theme for the header area"), not a tint by role */
html body #homeToday .hp-hero:not(#_):not(#_){background:var(--hm-hero);color:var(--hm-ink)}
html body #homeToday .hp-hero .hp-hi small.hp-date:not(#_):not(#_){color:var(--hm-ink);opacity:.72}
html body #homeToday .hp-hero .hm-hi h2:not(#_):not(#_),html body #homeToday .hp-hero .hp-say:not(#_):not(#_),html body #homeToday .hp-hero .hm-streak:not(#_):not(#_){color:var(--hm-ink)}
html body #homeToday .hp-hero .hp-say a:not(#_):not(#_){color:var(--hm-ink);text-decoration:underline;text-underline-offset:3px}
html body #homeToday .hp-hero .hp-k:not(#_):not(#_){--mark:var(--hm-ink);--eye:var(--hm-eye,#17181a)}
:root[data-palette="squeeze"]{--hm-eye:#ffe642}
:root[data-palette="squeeze"] body #homeToday .hp-hero .hp-wx .hp-wxi:not(#_):not(#_):not(#_){color:var(--hm-ink)}
html body #homeToday .hp-hero .hp-wx:not(#_):not(#_),html body #homeToday .hp-hero .hp-bell:not(#_):not(#_){background:color-mix(in srgb,var(--hm-ink) 12%,transparent);color:var(--hm-ink)}
html body #homeToday .hp-hero .hp-wxt b:not(#_):not(#_),html body #homeToday .hp-hero .hp-wxt small:not(#_):not(#_){color:var(--hm-ink)}
html body #homeToday .hp-hero .hp-wxt small.hp-wxc:not(#_):not(#_){opacity:.72}
html body #homeToday .hp-hero .hp-wx .hp-wxi:not(#_):not(#_){color:var(--hm-ink)}
html body #homeToday .hp-hero .hp-wx.wx-sun .hp-wxi:not(#_):not(#_),html body #homeToday .hp-hero .hp-wx.wx-part .hp-wxi:not(#_):not(#_){color:#f5b82e}
html body #homeToday .hp-hero .hp-wx.wx-rain .hp-wxi:not(#_):not(#_),html body #homeToday .hp-hero .hp-wx.wx-storm .hp-wxi:not(#_):not(#_){color:#7cb8f0}
html body #homeToday .hp-bell:not(#_){flex:none;margin-inline-start:auto;background:var(--surface);border:0;color:var(--c-ink)}
@media (min-width:861px){html body #homeToday .hp-bell:not(#_){display:none}} /* on a computer the bell is in the top bar */
/* New in the Hub */
html body #homeToday .hp-new:not(#_){display:flex;align-items:center;gap:16px;background:var(--surface);border-radius:18px;padding:16px 22px;font-size:14px}
html body #homeToday .hp-badge:not(#_){flex:none;font-size:12px;font-weight:700;color:var(--surface);background:var(--c-ink);border-radius:999px;padding:5px 10px;white-space:nowrap}
html body #homeToday .hp-nt:not(#_){flex:1 1 auto;min-width:0;line-height:1.45}
html body #homeToday .hp-new>a:not(#_){font-size:13px;white-space:nowrap}
html body #homeToday .hp-pill:not(#_){font:inherit;font-size:13px;border:0;background:var(--c-bg);color:var(--c-ink);border-radius:999px;padding:7px 12px;cursor:pointer;white-space:nowrap;min-height:32px}
html body #homeToday .hp-pill:not(#_):hover{background:var(--surface-hover)}
html body #homeToday .hp-wins .hp-pill:not(#_){background:var(--hp-tint)}
/* the boxes */
html body #homeToday .hp-cols:not(#_){display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;align-items:start}
html body #homeToday .hp-col:not(#_){display:flex;flex-direction:column;gap:20px;min-width:0}
html body #homeToday .hp-box:not(#_){background:var(--surface);border-radius:20px;padding:22px 24px;display:flex;flex-direction:column;gap:12px;border:0;box-shadow:none;min-width:0}
html body #homeToday .hp-box.hm-bars:empty{display:none}
html body #homeToday .hp-box.hm-bars .hm-h:not(#_){font-size:16px;margin:0}
html body #homeToday .hp-bh:not(#_){display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px}
html body #homeToday .hp-bh h3:not(#_){margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em}
html body #homeToday .hp-meta:not(#_){font-size:13px;color:var(--ink-muted);white-space:nowrap}
html body #homeToday .hp-bh>a:not(#_){font-size:13px}
html body #homeToday .hp-empty:not(#_){margin:0;font-size:14px;color:var(--ink-muted)}
html body #homeToday .hp-line:not(#_){margin:0;font-size:14px;line-height:1.5}
html body #homeToday .hp-mute:not(#_){color:var(--ink-muted)}
html body #homeToday .hp-note:not(#_){font-size:12px;color:var(--ink-subtle)}
html body #homeToday .hp-link:not(#_){align-self:flex-start;font:inherit;font-size:13px;background:none;border:0;padding:0;min-height:32px;display:inline-flex;align-items:center;color:var(--hp-link);text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:start}
/* number tiles */
html body #homeToday .hp-tiles:not(#_){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
html body #homeToday .hp-tiles.n3:not(#_){grid-template-columns:repeat(3,minmax(0,1fr))}
html body #homeToday .hp-tiles.n5:not(#_){grid-template-columns:repeat(5,minmax(0,1fr))}
html body #homeToday .hp-tile:not(#_){background:var(--row-alt);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:2px;min-width:0}
html body #homeToday .hp-tile b:not(#_){font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
html body #homeToday .hp-tile span:not(#_){font-size:12px;color:var(--ink-muted);line-height:1.35}
html body #homeToday .hp-tile small:not(#_){font-size:12px;color:var(--ink-subtle);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body #homeToday .hp-tile.tint:not(#_){background:var(--hp-tint)}
html body #homeToday .hp-tile.hot:not(#_){background:var(--accent-orange-soft)}
html body #homeToday .hp-tile.hot b:not(#_){color:var(--status-working-fg)}
/* announcements */
html body #homeToday .hp-ann:not(#_){display:flex;flex-direction:column;gap:4px;padding:14px;background:var(--row-alt);border-radius:14px}
html body #homeToday .hp-ann small:not(#_){font-size:12px;color:var(--ink-muted)}
html body #homeToday .hp-ann b:not(#_){font-size:15px;line-height:1.4}
html body #homeToday .hp-ann p:not(#_){margin:0;font-size:14px;line-height:1.45;color:var(--ink-muted)}
html body #homeToday .hp-more summary:not(#_){font-size:13px;color:var(--ink-muted);cursor:pointer;margin-bottom:8px}
html body #homeToday .hp-more .hp-ann+.hp-ann:not(#_){margin-top:8px}
html body #homeToday .hp-anns .hm-ann:not(#_){font:inherit;font-size:13px;border:0;background:var(--c-bg);color:var(--c-ink);border-radius:999px;padding:6px 12px;cursor:pointer}
/* since you were last here */
html body #homeToday .hp-list:not(#_){list-style:none;margin:0;padding:0}
html body #homeToday .hp-list li:not(#_){display:flex;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--c-bg);font-size:14px;line-height:1.45}
html body #homeToday .hp-list li:last-child{border-bottom:0}
html body #homeToday .hp-list li>i:not(#_){width:6px;height:6px;border-radius:50%;background:var(--accent-orange);flex:none;transform:translateY(-2px)}
html body #homeToday .hp-list li>a:not(#_){flex:1 1 auto;min-width:0;color:var(--c-ink);text-decoration:none}
html body #homeToday .hp-list li>a:not(#_):hover{text-decoration:underline}
html body #homeToday .hp-list li>small:not(#_){font-size:12px;color:var(--ink-subtle);white-space:nowrap}
/* wins and thank-yous */
html body #homeToday .hp-ty:not(#_){padding:12px 14px;background:var(--row-alt);border-radius:14px;font-size:14px;line-height:1.45}
html body #homeToday .hp-thank:not(#_){display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding:14px;background:var(--row-alt);border-radius:14px}
html body #homeToday .hp-thank label:not(#_){display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-muted)}
html body #homeToday .hp-thank .hp-tl:not(#_){flex:1 1 220px}
html body #homeToday .hp-thank :is(select,input):not(#_){font:inherit;font-size:14px;min-height:36px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--c-ink);padding:6px 10px}
html body #homeToday .hp-thank .wk-err:not(#_){flex-basis:100%;color:var(--bad)}
html body #homeToday .hp-thank .wk-err:empty{display:none}
/* today at circle */
html body #homeToday .hp-tr:not(#_){display:flex;gap:12px;align-items:flex-start}
html body #homeToday .hp-tr>span:not(#_){font-size:12px;font-weight:600;color:var(--ink-muted);width:96px;flex:none;padding-top:2px}
html body #homeToday .hp-tr>p:not(#_){margin:0;font-size:14px;line-height:1.45;min-width:0}
/* the page skeleton (index.html), light like Home */
html body #homeToday .hp.bf-skel .hp-hi:not(#_){gap:14px}
html body #homeToday .hp.bf-skel .sk:not(#_){background:var(--surface)!important;opacity:.7}
html body #homeToday .hp.bf-skel .bf-k:not(#_){display:block}
html body #homeToday .hp.bf-skel .sk-card:not(#_){min-height:220px;background:var(--surface)!important}
/* a phone (and a narrow window): one column, smaller words */
@media (max-width:860px){
  html body #homeToday .hp:not(#_){gap:14px}
  html body #homeToday .hp-hero:not(#_){padding:20px;gap:14px;border-radius:20px;flex-wrap:wrap}
  html body #homeToday .hp-k:not(#_),html body #homeToday .hp-k .buddy:not(#_){width:44px;height:44px}
  html body #homeToday .hp-hi:not(#_){order:3;flex-basis:100%;gap:8px}
  html body #homeToday .hp .hm-hi h2:not(#_){font-size:28px}
  html body #homeToday .hp-say:not(#_){font-size:16px}
  html body #homeToday .hp-new:not(#_){flex-wrap:wrap;gap:10px;padding:14px 16px}
  html body #homeToday .hp-nt:not(#_){flex-basis:100%;order:2}
  html body #homeToday .hp-new>a:not(#_){order:3}
  html body #homeToday .hp-new>.hp-pill:not(#_){order:4;margin-inline-start:auto}
  html body #homeToday .hp-cols:not(#_){grid-template-columns:minmax(0,1fr);gap:14px}
  html body #homeToday .hp-col:not(#_){gap:14px}
  html body #homeToday .hp-box:not(#_){padding:18px;border-radius:18px}
  html body #homeToday .hp-tiles:not(#_),html body #homeToday .hp-tiles.n5:not(#_){grid-template-columns:repeat(2,minmax(0,1fr))}
  html body #homeToday .hp-tiles.n3:not(#_){grid-template-columns:repeat(3,minmax(0,1fr))}
  html body #homeToday .hp-tile:not(#_){padding:12px}
  html body #homeToday .hp-tile b:not(#_){font-size:22px}
  html body #homeToday .hp-tr>span:not(#_){width:84px}
  html body.on-home .page.on #homeToday .hp-hero:not(#_){margin-top:calc(env(safe-area-inset-top,0px) + 40px)}
}

/* ---------- Traffic (#traffic; version 2, Rami, 31 October 2026, from the mockup he approved; public/traffic.js) ----------
   Five tiles (to fix today in rose, at risk in orange, the rest white), the three levels on the left as white boxes with a coloured
   edge (Fix today rose, This week orange, Waiting room grey) and a numbered badge, each a list of lines (the job, who, its tags, why,
   the buttons); on the right Who has room (a grid of the next 10 working days), Coming up and Flagged at risk. One column on a phone. */
html body #tvPage .tv:not(#_){display:flex;flex-direction:column;gap:16px;font-family:var(--font-sans);color:var(--ink)}
html body #tvPage .bk-h:not(#_){flex-wrap:wrap;row-gap:8px}
html body #tvPage .tv-sub:not(#_){font-size:13px;color:var(--ink-muted);margin-inline-start:4px}
html body #tvPage .tv-hr:not(#_){display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-inline-start:auto}
html body #tvPage .tv-msg:not(#_){margin:0;font-size:13px;color:var(--ink-muted)}
html body #tvPage .tv-tiles:not(#_){display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
html body #tvPage .tv-tile:not(#_){background:var(--surface);border-radius:var(--radius-lg);padding:14px 18px;display:flex;flex-direction:column;gap:2px}
html body #tvPage .tv-tile b:not(#_){font:700 30px/36px var(--font-sans);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
html body #tvPage .tv-tile b small:not(#_){font-size:16px;font-weight:600;color:var(--ink-subtle)}
html body #tvPage .tv-tile span:not(#_){font-size:13px;color:var(--ink-muted);line-height:1.35}
html body #tvPage .tv-tile.t-late:not(#_){background:var(--status-stuck-bg)}
html body #tvPage .tv-tile.t-risk:not(#_){background:var(--status-working-bg)}
html body #tvPage .tv-cols:not(#_){display:flex;gap:18px;align-items:flex-start}
html body #tvPage .tv-main:not(#_){flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px}
html body #tvPage .tv-side:not(#_){width:400px;flex:none;display:flex;flex-direction:column;gap:16px}
html body #tvPage .tv-g:not(#_),html body #tvPage .tv-box:not(#_){background:var(--surface);border-radius:var(--radius-lg);padding:14px 20px;display:flex;flex-direction:column}
html body #tvPage .tv-g:not(#_){border-inline-start:5px solid var(--border-strong)}
html body #tvPage .tv-g.lv-fix:not(#_){border-inline-start-color:var(--accent-rose)}
html body #tvPage .tv-g.lv-week:not(#_){border-inline-start-color:var(--accent-orange)}
html body #tvPage .tv-gh:not(#_),html body #tvPage .tv-bh:not(#_){display:flex;align-items:baseline;gap:10px;margin-bottom:4px;flex-wrap:wrap}
html body #tvPage .tv-bh:not(#_){justify-content:space-between;margin-bottom:8px}
html body #tvPage .tv-n:not(#_){align-self:center;flex:none;width:22px;height:22px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;font:700 12px/1 var(--font-sans);color:var(--surface);background:var(--ink-muted)}
html body #tvPage .lv-fix .tv-n:not(#_){background:var(--accent-rose)}
html body #tvPage .lv-week .tv-n:not(#_){background:var(--accent-orange)}
html body #tvPage .tv-gh h2:not(#_),html body #tvPage .tv-box h2:not(#_){margin:0;font:700 16px/22px var(--font-sans);color:var(--ink)}
html body #tvPage .tv-box h2:not(#_){font-size:15px;margin-bottom:8px}
html body #tvPage .tv-bh h2:not(#_){margin:0}
html body #tvPage .tv-gh small:not(#_),html body #tvPage .tv-bh small:not(#_){font-size:13px;color:var(--ink-subtle)}
html body #tvPage .tv-bh small:not(#_){font-size:12px}
html body #tvPage .tv-r:not(#_){display:grid;grid-template-columns:minmax(0,1.5fr) 112px 150px minmax(0,1.6fr);gap:8px 12px;align-items:center;padding:10px 0;border-top:1px solid var(--border)}
html body #tvPage .tv-job:not(#_){display:flex;flex-direction:column;gap:2px;color:var(--ink);text-decoration:none;min-width:0;border-radius:var(--radius-sm)}
html body #tvPage .tv-job b:not(#_){font-size:14px;font-weight:600;overflow-wrap:anywhere}
html body #tvPage .tv-job:hover b:not(#_){text-decoration:underline;text-underline-offset:2px}
html body #tvPage .tv-job small:not(#_){font-size:12px;color:var(--ink-subtle)}
html body #tvPage .tv-who:not(#_){font-size:13px;overflow-wrap:anywhere}
html body #tvPage .tv-who.w-nobody:not(#_),html body #tvPage .tv-who.w-nostep:not(#_){color:var(--status-stuck-fg);font-weight:600}
html body #tvPage .tv-who.w-client:not(#_){color:var(--ink-muted)}
html body #tvPage .tv-tags:not(#_){display:flex;flex-wrap:wrap;gap:5px;justify-self:start}
html body #tvPage .tv-tag:not(#_){font:600 12px/16px var(--font-sans);border-radius:var(--radius-pill);padding:4px 10px;white-space:nowrap;background:var(--status-idle-bg);color:var(--status-idle-fg)}
html body #tvPage .tv-tag.t-late:not(#_){background:var(--status-stuck-bg);color:var(--status-stuck-fg)}
html body #tvPage .tv-tag.t-risk:not(#_){background:var(--status-working-bg);color:var(--status-working-fg)}
html body #tvPage .tv-tag.t-pace:not(#_){font-weight:500;color:var(--ink-subtle)}
html body #tvPage .tv-tag.t-ok:not(#_){background:var(--accent-green-soft);color:var(--accent-green)}
html body #tvPage .tv-tag.t-round:not(#_){background:var(--status-review-bg);color:var(--status-review-fg)}
html body #tvPage .tv-tag.t-us:not(#_){background:var(--status-done-bg);color:var(--status-done-fg)}
html body #tvPage .tv-tag.t-client:not(#_){background:var(--accent-orange-soft);color:var(--accent-orange)}
html body #tvPage .tv-why:not(#_){font-size:12.5px;line-height:1.4;color:var(--ink-muted);display:flex;flex-direction:column;gap:2px}
html body #tvPage .tv-fl:not(#_){color:var(--status-working-fg);font-size:12px}
html body #tvPage .tv-acts:not(#_){display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-start;align-items:center;grid-column:1/-1} /* the buttons get their own line: as a column they squeezed the job title to one letter (Rami, 1 November 2026) */
html body #tvPage .tv-b:not(#_):not(#_){font-size:12px;border:0;background:var(--surface-sunken);border-radius:var(--radius-pill);padding:6px 11px;height:auto;min-height:28px;color:var(--ink)}
html body #tvPage .tv-b:hover:not(#_):not(#_){background:var(--surface-hover)}
html body #tvPage .tv-done:not(#_){font:600 12px/16px var(--font-sans);color:var(--accent-green)}
html body #tvPage .tv-none:not(#_){margin:6px 0 2px;font-size:13px;color:var(--ink-subtle)}
html body #tvPage .tv-more:not(#_){align-self:flex-start;margin-top:8px;border:0;background:none;padding:4px 0;font:400 12.5px/1.4 var(--font-sans);color:var(--ink-muted);cursor:pointer}
html body #tvPage .tv-more u:not(#_){color:var(--ink);text-underline-offset:2px}
html body #tvPage .tv-more:hover:not(#_){color:var(--ink)}
html body #tvPage .tv-track .tv-r:not(#_){opacity:.85}
html body #tvPage .tv-rm:not(#_){display:grid;grid-template-columns:96px repeat(var(--tv-days,10),minmax(0,1fr));gap:3px;align-items:center;margin-bottom:3px}
html body #tvPage .tv-rmh:not(#_){font-size:10.5px;color:var(--ink-subtle);text-align:center;margin-bottom:4px}
html body #tvPage .tv-rm .wk2:not(#_){margin-inline-start:4px}
html body #tvPage .tv-rmn:not(#_){font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body #tvPage .tv-c:not(#_){height:22px;border-radius:4px;display:flex;align-items:center;justify-content:center;font:500 11px/1 var(--font-sans);font-variant-numeric:tabular-nums;color:var(--ink-muted)}
html body #tvPage .c-room:not(#_){background:var(--accent-green-soft)}
html body #tvPage .c-full:not(#_){background:var(--status-working-bg);color:var(--status-working-fg)}
html body #tvPage .c-over:not(#_){background:var(--status-stuck-bg);color:var(--status-stuck-fg);font-weight:700}
html body #tvPage .c-away:not(#_){background:var(--status-idle-bg);color:var(--ink-subtle)}
html body #tvPage .tv-legend:not(#_){display:flex;flex-wrap:wrap;gap:6px 12px;font-size:11.5px;color:var(--ink-muted);padding-top:6px}
html body #tvPage .tv-legend i:not(#_){display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-inline-end:3px}
html body #tvPage .tv-cu:not(#_){margin:0 0 8px;font-size:13px;line-height:1.45}
html body #tvPage .tv-cu a:not(#_){color:var(--ink)}
html body #tvPage .tv-unf:not(#_):not(#_){margin-inline-start:4px;padding:3px 9px;min-height:24px}
html body #tvPage .tv-lead:not(#_){color:var(--ink-subtle);font-size:12px;margin-top:4px}
html body .tv-sheet .tv-form:not(#_){display:flex;flex-direction:column;gap:10px}
html body .tv-sheet .tv-lab:not(#_){font-weight:600;font-size:13.5px}
html body .tv-sheet .tv-form input.find:not(#_),html body .tv-sheet .tv-form select.find:not(#_),html body .tv-sheet .tv-form textarea.find:not(#_){width:100%;max-width:320px}
html body .tv-sheet .tv-form textarea.find:not(#_){max-width:none;min-height:80px}
html body .tv-sheet .wk-do:not(#_){display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@media (max-width:1320px){
  html body #tvPage .tv-side:not(#_){width:340px}
  html body #tvPage .tv-rm:not(#_){grid-template-columns:72px repeat(var(--tv-days,10),minmax(0,1fr))}
  html body #tvPage .tv-r:not(#_){grid-template-columns:minmax(0,1.4fr) 104px 140px minmax(0,1.3fr);row-gap:6px}
  html body #tvPage .tv-acts:not(#_){grid-column:1/-1;justify-content:flex-start}
}
@media (max-width:1100px){
  html body #tvPage .tv-tiles:not(#_){grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  html body #tvPage .tv-cols:not(#_){flex-direction:column}
  html body #tvPage .tv-side:not(#_){width:auto;align-self:stretch}
  html body #tvPage .tv-tiles:not(#_){grid-template-columns:repeat(2,minmax(0,1fr))}
  html body #tvPage .tv-tile:last-child:not(#_){grid-column:1/-1}
  html body #tvPage .tv-rm:not(#_){grid-template-columns:84px repeat(var(--tv-days,10),minmax(0,1fr))}
}
@media (max-width:640px){
  html body #tvPage .tv-sub:not(#_){flex-basis:100%;margin:0}
  html body #tvPage .tv-hr:not(#_){margin-inline-start:0;width:100%}
  html body #tvPage .tv-sum:not(#_){margin-inline-start:auto}
  html body #tvPage .tv-tile:not(#_){padding:12px 14px}
  html body #tvPage .tv-tile b:not(#_){font-size:24px;line-height:30px}
  html body #tvPage .tv-g:not(#_),html body #tvPage .tv-box:not(#_){padding:12px 14px}
  html body #tvPage .tv-r:not(#_){grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:12px 0}
  html body #tvPage .tv-job:not(#_){grid-column:1/-1}
  html body #tvPage .tv-tags:not(#_){justify-self:end;justify-content:flex-end}
  html body #tvPage .tv-why:not(#_){grid-column:1/-1}
  html body #tvPage .tv-acts:not(#_){grid-column:1/-1;justify-content:flex-start}
  html body #tvPage .tv-b:not(#_):not(#_){min-height:36px;padding:8px 13px}
  html body #tvPage .tv-rm:not(#_){grid-template-columns:64px repeat(var(--tv-days,10),minmax(0,1fr));gap:2px}
  html body #tvPage .tv-rm .wk2:not(#_){margin-inline-start:2px}
  html body #tvPage .tv-c:not(#_){height:24px;font-size:10.5px}
}
/* on a phone the top bar carries the title: Traffic keeps its row for Person, Type and Send the weekly summary (as Reports does) */
@media (max-width:860px){
  html body #p-tv .bk-h:not(#_){display:flex!important;background:transparent!important;border:0!important;padding:0!important;margin:0!important}
  html body #p-tv .bk-h .h1:not(#_),html body #p-tv .bk-h .bk-how:not(#_),html body #p-tv .tv-sub:not(#_){display:none!important}
  html body #p-tv .tv-hr:not(#_){margin-inline-start:0;width:100%}
}
/* Consulting (#consulting, public/consulting.js; Rami, 31 October 2026): the clients' column on the left, like Social media's, and
   the Overview or the client picked beside it. Tiles, a table, the client's card, the main objective and a grid of session cards. */
html body .cs-wrap:not(#_){display:grid;grid-template-columns:244px minmax(0,1fr);column-gap:22px;align-items:start}
html body .cs-main:not(#_){grid-column:2;min-width:0}
html body .cs-rail:not(#_){grid-column:1;grid-row:1}
html body .cs-rail .crail-l button em:not(#_){margin-inline-start:auto;font-style:normal;flex:none}
html body .cs-rail .crail-l .cs-n:not(#_){font-size:12px;color:var(--ink-muted)}
html body .cs-rail .crail-l button.on .cs-n:not(#_){color:var(--ink)}
html body .cs-tag:not(#_){font:600 11px/16px var(--font-sans);border-radius:var(--radius-pill);padding:1px 8px;white-space:nowrap}
html body .cs-tag.t-bad:not(#_){background:var(--bad-bg);color:var(--bad)}html body .cs-tag.t-warn:not(#_){background:var(--warn-bg);color:var(--warn-ink)}
html body .cs-rail .crail-l .cs-fin:not(#_){margin-top:10px;color:var(--ink-muted);font-size:12.5px;font-weight:600}
html body .cs-rail .crail-l .cs-fin i:not(#_){background:none!important;flex-basis:14px;width:14px;font-size:10px}
html body .cs-lead:not(#_){margin:0 0 14px}
html body .cs-tiles:not(#_){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 16px}
html body .cs-tile:not(#_){border-radius:var(--radius-lg);padding:14px 16px;background:var(--surface);border:1px solid var(--border);display:grid;gap:2px}
html body .cs-tile b:not(#_){font:700 28px/1.1 var(--font-sans);color:var(--ink)}html body .cs-tile span:not(#_){font:500 12.5px/1.3 var(--font-sans);color:var(--ink-muted)}
html body .cs-tile.t-warn b:not(#_){color:var(--warn-ink)}html body .cs-tile.t-bad b:not(#_){color:var(--bad)}
html body .cs-tbl:not(#_){background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
html body .cs-tr:not(#_){display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:center;padding:0 16px;min-height:var(--row-height,44px);border-top:1px solid var(--border);font-size:14px}
html body .cs-tr:first-child:not(#_){border-top:0}
html body .cs-tr.head:not(#_){background:var(--surface-sunken);font:600 12px/16px var(--font-sans);color:var(--ink-muted);min-height:36px}
html body .cs-tr>*:not(#_){min-width:0;justify-self:start}
html body .cs-cn:not(#_){font-weight:600;color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}html body .cs-cn:not(#_):hover{text-decoration:underline}
html body .cs-dim:not(#_){color:var(--ink-muted)}
html body .cs-k:not(#_){display:none}
html body .cs-none:not(#_){padding:14px 16px;margin:0}
html body .cs-err:not(#_){color:var(--bad)}
html body .cs-hd:not(#_){display:flex;align-items:center;gap:12px;margin:0 0 14px}
html body .cs-name:not(#_){font:700 26px/1.15 var(--font-sans);letter-spacing:-.01em;margin:0;color:var(--ink)}html body .cs-with:not(#_){margin:2px 0 0;font-size:14px;color:var(--ink-muted)}html body .cs-with a:not(#_){color:var(--ink)}
html body .cs-av:not(#_){display:block;margin:0;padding:0;overflow:visible}html body .cs-av>i:not(#_){width:40px;height:40px;border-radius:var(--radius-md);display:grid;place-items:center;overflow:hidden;font:600 16px var(--font-sans);font-style:normal;background:var(--status-idle-bg);color:var(--ink-muted)}
html body .cs-av>i img:not(#_){width:100%;height:100%;object-fit:cover}
html body .cs-sum:not(#_){display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;padding:16px 18px;margin:0 0 12px}
html body .cs-sold:not(#_),html body .cs-next:not(#_){display:grid;gap:2px}
html body .cs-sold small:not(#_),html body .cs-next small:not(#_),html body .cs-k2:not(#_){font:600 12px/16px var(--font-sans);color:var(--ink-muted);display:block}
html body .cs-sold b:not(#_){font:700 26px/1.1 var(--font-sans)}html body .cs-next b:not(#_){font:600 16px/1.3 var(--font-sans)}
html body .cs-sold .pp-link:not(#_){justify-self:start;font-size:12.5px;padding:0;border:0;background:none;color:var(--focus);cursor:pointer;text-decoration:underline}
html body .cs-with .pp-link:not(#_){font:inherit;padding:0;border:0;background:none;color:var(--ink-muted);cursor:pointer;text-decoration:underline} /* Remove from Consulting (Rami, 1 November 2026) */
html body .cs-rail .crail-add:not(#_){margin-top:8px}
html body .cs-mid:not(#_){display:grid;gap:8px;min-width:0}
html body .cs-bar:not(#_){display:block;height:8px;border-radius:var(--radius-pill);background:var(--surface-sunken);overflow:hidden}
html body .cs-bar i:not(#_){display:block;height:100%;background:var(--ink);border-radius:inherit}html body .cs-bar.over i:not(#_){background:var(--bad)}
html body .cs-from:not(#_){font-size:13px;color:var(--ink-muted)}html body .cs-from a:not(#_){color:var(--ink)}
html body .cs-obj:not(#_){display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:14px 18px;margin:0 0 16px}
html body .cs-ot:not(#_){font:600 15px/1.4 var(--font-sans);min-width:0}html body .cs-os:not(#_){font-size:12.5px;color:var(--ink-muted);white-space:nowrap}
html body .cs-grid:not(#_){display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
html body .cs-new:not(#_){display:grid;place-content:center;justify-items:center;gap:4px;min-height:150px;border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);background:transparent;color:var(--ink);font:inherit;cursor:pointer;text-align:center}
html body .cs-new:not(#_):hover{background:var(--surface-hover)}html body .cs-new small:not(#_){color:var(--ink-muted);font-size:12.5px}
html body .cs-plus:not(#_){font:400 28px/1 var(--font-sans)}
html body .cs-ses:not(#_){display:flex;flex-direction:column;gap:8px;min-height:150px;padding:14px 16px;text-align:start;font:inherit;color:var(--ink);cursor:pointer}
html body .cs-ses:not(#_):hover{border-color:var(--border-strong)}html body .cs-ses.over:not(#_){border-color:var(--bad)}
html body .cs-sh:not(#_){display:flex;justify-content:space-between;gap:8px;align-items:baseline}html body .cs-sh small:not(#_){color:var(--ink-muted);font-size:12.5px;white-space:nowrap}
html body .cs-note:not(#_){flex:none;max-height:calc(3 * 1.45em);line-height:1.45;font-size:13.5px;color:var(--ink-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html body .cs-sf:not(#_){margin-top:auto;display:flex;flex-wrap:wrap;gap:6px;align-items:center}html body .cs-sf small:not(#_){margin-inline-start:auto;color:var(--ink-muted);font-size:12.5px}
html body .cs-form textarea:not(#_){resize:vertical}
html body .cs-sumf:not(#_){display:grid;gap:8px}
html body .cs-drop:not(#_){position:relative;display:grid!important;place-items:center;gap:2px;padding:22px 14px;border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);text-align:center;cursor:pointer;color:var(--ink)}
html body .cs-drop:not(#_):hover,html body .cs-drop.fd-on:not(#_){background:var(--surface-hover)}html body .cs-drop small:not(#_){color:var(--ink-muted)}
html body .cs-drop input:not(#_){position:absolute;inset:0;width:1px;height:1px;opacity:0;pointer-events:none}
html body .cs-file:not(#_){display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;padding:10px 12px;border-radius:var(--radius-md);background:var(--surface-sunken)}html body .cs-file a:not(#_){color:var(--ink);text-decoration:underline;font-weight:600}html body .cs-file small:not(#_){color:var(--ink-muted)}html body .cs-file .btn-s:not(#_){margin-inline-start:auto}
html body .cs-hint:not(#_){color:var(--ink-muted);font-size:12px}html body .cs-ask:not(#_){display:block}
html body .cs-warnp:not(#_){margin:0;padding:10px 12px;border-radius:var(--radius-md);background:var(--bad-bg);color:var(--bad);font-size:13px}
html body .cs-ro p:not(#_){display:grid;gap:4px;margin:0 0 14px}
html body .cs-olist:not(#_){list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:6px}html body .cs-olist li:not(#_){display:flex;gap:8px;align-items:flex-start;justify-content:space-between;padding:8px 10px;border-radius:var(--radius-md);background:var(--surface-sunken)}
html body .cs-ox:not(#_){border:0;background:none;color:var(--ink-muted);font-size:16px;cursor:pointer;line-height:1}html body .cs-ox:not(#_):hover{color:var(--bad)}
html body .cs-oadd:not(#_){display:flex;gap:8px}html body .cs-oadd .find:not(#_){flex:1}
html body .cs-ohist p:not(#_){display:grid;gap:2px;margin:6px 0 0;padding:8px 10px;border-left:3px solid var(--border)}html body .cs-ohist small:not(#_){color:var(--ink-muted)}
html body dialog.cs-over:not(#_){position:fixed;inset:0;margin:auto;height:fit-content;border:0;border-radius:var(--radius-lg);padding:24px;max-width:440px;width:calc(100% - 32px);background:var(--surface);color:var(--ink)}
html body dialog.cs-over::backdrop{background:rgba(0,0,0,.35)}
html body dialog.cs-over h2:not(#_){font:700 19px/1.3 var(--font-sans);margin:0 0 8px}html body dialog.cs-over p:not(#_){margin:0 0 18px;color:var(--ink-muted)}
@media (max-width:900px){
  html body .cs-wrap:not(#_){display:block}
  html body .cs-rail:not(#_){position:static;height:auto;border:0!important;padding:0;margin:0 0 12px}
  html body .cs-tiles:not(#_){grid-template-columns:repeat(2,minmax(0,1fr))}
  html body .cs-tr.head:not(#_){display:none}
  html body .cs-tr:not(#_){grid-template-columns:minmax(0,1fr) auto;padding:10px 14px;row-gap:4px}
  html body .cs-tr>:nth-child(3):not(#_),html body .cs-tr>:nth-child(5):not(#_){font-size:13px;color:var(--ink-muted)}
  html body .cs-tr>:nth-child(2):not(#_),html body .cs-tr>:nth-child(4):not(#_){justify-self:end}
  html body .cs-k:not(#_){display:inline;margin-inline-end:4px}
  html body .cs-sum:not(#_){grid-template-columns:1fr auto;gap:12px}html body .cs-mid:not(#_){grid-column:1/-1;grid-row:2}
  html body .cs-obj:not(#_){grid-template-columns:minmax(0,1fr) auto}html body .cs-obj .cs-k2:not(#_){grid-column:1/-1}html body .cs-os:not(#_){grid-column:1;white-space:normal}html body .cs-obj .btn-s:not(#_){grid-column:2;grid-row:2/span 2}
  html body .cs-grid:not(#_){grid-template-columns:1fr}html body .cs-new:not(#_){min-height:96px}
}
@media (max-width:900px){html body .cs-name:not(#_){font-size:22px}html body .cs-hd:not(#_){margin-top:4px}}
/* Stale and lost work (Reports, public/stale.js; Rami, 31 October 2026) */
html body .slw:not(#_){display:flex;flex-direction:column;gap:16px}
html body .slw-head:not(#_){display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 10px}
html body .slw-head h2:not(#_){margin:0;font:700 22px/28px var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
html body .slw-head > small:not(#_){font-size:13px;color:var(--ink-subtle)}
html body .slw-hr:not(#_){margin-inline-start:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
html body .slw-pick select.find:not(#_){min-width:0;width:auto}
html body .slw-note:not(#_){margin:0;background:var(--accent-orange-soft);color:var(--ink);border-radius:var(--radius-lg);padding:12px 16px;font-size:13px;line-height:1.55}
html body .slw-tiles:not(#_){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
html body .slw-tile:not(#_){background:var(--surface);border-radius:var(--radius-lg);padding:16px 18px;display:flex;flex-direction:column;gap:2px}
html body .slw-tile b:not(#_){font:700 32px/38px var(--font-sans);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--ink)}
html body .slw-tile.t-bad:not(#_){background:var(--accent-rose-soft)}html body .slw-tile.t-bad b:not(#_){color:var(--accent-rose)}
html body .slw-tile span:not(#_){font-weight:600;font-size:13.5px;color:var(--ink)}
html body .slw-tile small:not(#_){font-size:12.5px;color:var(--ink-muted);line-height:1.4}
html body .slw-two:not(#_){display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
html body .slw-cols:not(#_){display:flex;gap:16px;align-items:flex-start}
html body .slw-main:not(#_){flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px}
html body .slw-box:not(#_){background:var(--surface);border-radius:var(--radius-lg);padding:16px 20px;display:flex;flex-direction:column;gap:8px;min-width:0}
html body .slw-box h3:not(#_){margin:0 0 4px;font:700 16px/22px var(--font-sans);color:var(--ink)}
html body .slw-box h3 small:not(#_){font-weight:400;font-size:12.5px;color:var(--ink-subtle);margin-inline-start:6px}
html body .slw-ar:not(#_){display:grid;grid-template-columns:150px minmax(0,1fr) 70px 56px 84px;gap:10px;align-items:center;font-size:13px}
html body .slw-an:not(#_){color:var(--ink)}
html body .slw-num:not(#_){font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap}
html body .slw-bar:not(#_){height:8px;border-radius:var(--radius-pill);background:var(--surface-sunken);overflow:hidden}
html body .slw-bar i:not(#_){display:block;height:100%;border-radius:inherit;background:var(--ink-muted)}
html body .slw-bar i.a-branding:not(#_){background:var(--accent-violet)}html body .slw-bar i.a-social:not(#_){background:var(--accent-rose)}html body .slw-bar i.a-production:not(#_){background:var(--accent-sky)}
html body .slw-bar i.a-shoots:not(#_){background:var(--accent-orange)}html body .slw-bar i.a-consulting:not(#_){background:var(--accent-green)}html body .slw-bar i.a-why:not(#_){background:var(--ink)}html body .slw-bar i.a-unknown:not(#_){background:var(--border-strong)}
html body .slw-why:not(#_){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;font-size:13px}
html body .slw-why .slw-bar:not(#_){grid-column:1/-1}
html body .slw-small:not(#_){margin:4px 0 0;font-size:12.5px;color:var(--ink-muted);line-height:1.5}
html body .slw-small a:not(#_){color:var(--ink)}
html body .slw-tw:not(#_){overflow-x:auto;margin:0 -8px}
html body .slw-t:not(#_){width:100%;border-collapse:collapse;font-size:13px}
html body .slw-t th:not(#_){text-align:start;font-weight:600;font-size:12px;color:var(--ink-muted);padding:6px 8px;white-space:nowrap}
html body .slw-t td:not(#_){padding:10px 8px;vertical-align:middle}
html body .slw-t tbody tr:nth-child(odd) td:not(#_){background:var(--surface-sunken)}
html body .slw-t tbody tr td:first-child:not(#_){border-radius:var(--radius-sm) 0 0 var(--radius-sm)}html body .slw-t tbody tr td:last-child:not(#_){border-radius:0 var(--radius-sm) var(--radius-sm) 0}
html body .slw-p a:not(#_){color:var(--ink);text-decoration:none}html body .slw-p a:hover b:not(#_){text-decoration:underline;text-underline-offset:2px}
html body .slw-sub:not(#_),html body .slw-done:not(#_){display:block;font-size:12px;color:var(--ink-subtle)}
html body .slw-done:not(#_){color:var(--accent-green);font-weight:600}
html body .slw-late:not(#_){color:var(--accent-rose);font-weight:600;white-space:nowrap}
html body .slw-lost b:not(#_){font-weight:700}
html body .slw-pill:not(#_){display:inline-block;font:600 12px/16px var(--font-sans);border-radius:var(--radius-pill);padding:3px 10px;white-space:nowrap;background:var(--status-idle-bg);color:var(--status-idle-fg)}
html body .slw-pill.a-branding:not(#_){background:var(--accent-violet-soft);color:var(--accent-violet)}html body .slw-pill.a-social:not(#_){background:var(--accent-rose-soft);color:var(--accent-rose)}html body .slw-pill.a-production:not(#_){background:var(--accent-sky-soft);color:var(--accent-sky)}
html body .slw-pill.a-shoots:not(#_){background:var(--accent-orange-soft);color:var(--accent-orange)}html body .slw-pill.a-consulting:not(#_){background:var(--accent-green-soft);color:var(--accent-green)}
html body .slw-tag:not(#_){display:inline-block;font:500 11px/14px var(--font-sans);border-radius:var(--radius-pill);padding:2px 7px;margin-inline-start:4px;background:var(--surface-hover);color:var(--ink-muted)}
html body .slw-tag.t-est:not(#_){background:var(--accent-orange-soft);color:var(--accent-orange)}
html body .slw-acts:not(#_){text-align:end;min-width:150px}
html body .slw-acts .slw-b:not(#_):not(#_){margin:2px 0 2px 4px}
html body .slw-t td.slw-p:not(#_){min-width:150px}
html body .slw-t td:not(#_),html body .slw-t th:not(#_){font-size:12.5px}
html body .slw-b:not(#_):not(#_){font-size:12px;border:0;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--radius-pill);padding:6px 11px;height:auto;min-height:28px;color:var(--ink);margin-inline-start:4px}
html body .slw-none:not(#_){margin:4px 0;font-size:13px;color:var(--ink-subtle)}
html body .slw-how:not(#_){width:280px;flex:none}
html body .slw-er:not(#_){display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:5px 0}
html body .slw-er small:not(#_){color:var(--ink-subtle);margin-inline-end:4px}
html body .slw-rate:not(#_){border-top:1px solid var(--border);margin-top:4px;padding-top:10px;font-weight:600}
html body .slw-howh:not(#_){display:flex;align-items:center;justify-content:space-between;gap:8px}
html body .slw-howh h3:not(#_){margin:0}
html body .slw-estf .slw-er:not(#_){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;cursor:text}
html body .slw-estf .slw-num:not(#_){display:inline-flex;align-items:center;gap:4px;flex:none;white-space:nowrap}
html body .slw-estf .slw-num i:not(#_){font-style:normal;color:var(--ink-subtle);width:10px}
html body .slw-in:not(#_){box-sizing:border-box;width:58px;height:28px;padding:0 6px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font:500 13px/1 var(--font-sans);text-align:end;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
html body .slw-in:not(#_)::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
html body .slw-in:not(#_):focus-visible{outline:2px solid var(--focus);outline-offset:1px}
html body .slw-estf .wk-do:not(#_){margin-top:10px}
html body .slw-saved:not(#_){color:var(--ok, #22a55b);font-weight:600}
html body .slw-radio:not(#_){display:flex;gap:8px;align-items:center;font-size:14px}
@media (max-width:1100px){html body .slw-tiles:not(#_){grid-template-columns:repeat(2,minmax(0,1fr))}html body .slw-two:not(#_){grid-template-columns:1fr}html body .slw-cols:not(#_){flex-direction:column}html body .slw-how:not(#_){width:auto;align-self:stretch}}
@media (max-width:640px){
  html body .slw-hr:not(#_){margin-inline-start:0;width:100%}
  html body .slw-tile:not(#_){padding:12px 14px}html body .slw-tile b:not(#_){font-size:24px;line-height:30px}
  html body .slw-box:not(#_){padding:12px 14px}
  html body .slw-ar:not(#_){grid-template-columns:minmax(0,1fr) auto auto;row-gap:4px}html body .slw-ar .slw-bar:not(#_){grid-column:1/-1;grid-row:2}
  html body .slw-t thead:not(#_){display:none}
  html body .slw-t tr:not(#_){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:10px 8px;border-radius:var(--radius-sm)}
  html body .slw-t tbody tr:nth-child(odd):not(#_){background:var(--surface-sunken)}
  html body .slw-t td:not(#_){padding:0;background:none!important}
  html body .slw-t td.slw-p:not(#_){grid-column:1/-1}html body .slw-t td.slw-acts:not(#_){grid-column:1/-1;text-align:start;padding-top:6px}
  html body .slw-b:not(#_):not(#_){min-height:36px;padding:8px 13px;margin:0 6px 0 0}
}

/* Inner scroll areas show no scrollbar (Rami, 31 October 2026): the client list, side rails, panels, menus and dropdown lists still
   scroll by wheel, trackpad, touch and keyboard, without a bar. The page itself keeps its own. Tables and boards that scroll sideways
   keep a thin bar, since nothing else shows there is more to the right; a text box keeps its own. */
html body :not(:is(.tablewrap,.wk-pt,.wk-t1,[data-list],.ut-wrap,.mw-board,.br-board,.br-line,.br-tbl,.pv-tbl,.pv-plan,.ct-scroll,.ct-table,.tm-scroll,.ceo-tw,.ph-chart,.ph-scroll,.wf-wrap,.ob-wrap,.ps-one,.sp-wrap,.wi-art table,.qa-vslides,textarea)):not(#_){scrollbar-width:none}
html body :not(:is(.tablewrap,.wk-pt,.wk-t1,[data-list],.ut-wrap,.mw-board,.br-board,.br-line,.br-tbl,.pv-tbl,.pv-plan,.ct-scroll,.ct-table,.tm-scroll,.ceo-tw,.ph-chart,.ph-scroll,.wf-wrap,.ob-wrap,.ps-one,.sp-wrap,.wi-art table,.qa-vslides,textarea))::-webkit-scrollbar{display:none}
html body :is(.tablewrap,.wk-pt,.wk-t1,[data-list],.ut-wrap,.mw-board,.br-board,.br-line,.br-tbl,.pv-tbl,.pv-plan,.ct-scroll,.ct-table,.tm-scroll,.ceo-tw,.ph-chart,.ph-scroll,.wf-wrap,.ob-wrap,.ps-one,.sp-wrap,.wi-art table,.qa-vslides):not(#_){scrollbar-width:thin}
/* Reports (Rami, 31 October 2026): the reports in a list down the left, like the Clients column; on a phone a row above the report */
html body .rpl:not(#_){display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--space-6);align-items:start}
html body .rpl-nav:not(#_){position:sticky;top:12px;display:flex;flex-direction:column;gap:1px;padding:var(--space-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg)}
html body .rpl-h:not(#_){margin:8px 8px 4px;font:600 12px/16px var(--font-sans);letter-spacing:.02em;color:var(--ink-muted)}
html body .rpl-h:first-child:not(#_){margin-top:4px}
html body .rpl-nav a:not(#_){display:flex;align-items:center;min-height:32px;padding:0 var(--space-2);border-radius:var(--radius-md);font:400 14px/20px var(--font-sans);color:var(--c-ink);text-decoration:none}
html body .rpl-nav a:not(#_):hover{background:var(--surface-hover)}
html body .rpl-nav a.on:not(#_){background:var(--primary-soft);font-weight:600}
html body .rpl-yours:not(#_){margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
html body .rpl-none:not(#_){margin:0 8px 6px;font-size:13px;line-height:18px;color:var(--ink-subtle)}
html body .rpl-main:not(#_){min-width:0}
@media (max-width:860px){
  html body .rpl:not(#_){grid-template-columns:minmax(0,1fr);gap:var(--space-3)}
  html body .rpl-nav:not(#_){position:static;flex-direction:row;gap:6px;overflow-x:auto;padding:0;background:none;border:0;scrollbar-width:none}
  html body .rpl-nav a:not(#_){flex:none;white-space:nowrap;min-height:36px;padding:0 14px;border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--border)}
  html body .rpl-nav a.on:not(#_){background:var(--primary-soft);border-color:var(--primary)}
  html body :is(.rpl-h,.rpl-none):not(#_){display:none}
}
/* Clients at risk: the monthly value at risk (31 October 2026) */
html body .rk-t.rk-money b:not(#_){font-variant-numeric:tabular-nums}
html body .rk-c .rk-val:not(#_){font-variant-numeric:tabular-nums}
/* Kasper's Sunday message in Chat: Circle this week (lib/week.js) */
html body .ch-week:not(#_){display:grid;gap:6px;margin-top:6px;padding:12px 14px;max-width:460px;background:var(--surface-sunken);border-radius:var(--radius-lg)}
html body .ch-week small:not(#_){color:var(--ink-muted);font-size:12px}
html body .ch-week p:not(#_){margin:0;font-size:14px;line-height:20px}
html body .ch-week .btn-s:not(#_){justify-self:start}
/* Reports › Circle this week (public/week.js; Rami, 31 October 2026): one column of sections, decisions first, the Hub's status colours */
html body .cw:not(#_){display:flex;flex-direction:column;gap:14px;max-width:1080px}
html body .cw-sec:not(#_){padding:20px 22px;margin:0}
html body .cw-lab:not(#_){display:block;margin:0 0 6px;font-size:12px;color:var(--ink-muted)}
html body .cw-h:not(#_){margin:0 0 14px;font:600 22px/28px var(--font-sans);letter-spacing:-.01em;color:var(--c-ink)}
html body .cw-hrow:not(#_){display:grid;grid-template-columns:1fr auto;gap:16px;align-items:end}
html body .cw-wk:not(#_){margin:0;font:600 44px/1 var(--font-sans);letter-spacing:-.03em;color:var(--c-ink)}
html body .cw-meta:not(#_){display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-muted);text-align:end}
html body .cw-lead:not(#_){margin:14px 0 0;max-width:72ch;font-size:17px;line-height:25px;color:var(--c-ink)}
html body .cw-dot:not(#_){display:inline-block;flex:none;width:5px;height:5px;border-radius:50%;background:currentColor}
html body .cw-pill:not(#_){display:inline-flex;align-items:center;gap:7px;max-width:100%;min-height:26px;padding:3px 11px;border-radius:var(--radius-pill);font-size:12.5px;font-weight:600;line-height:18px}
html body .cw-pill>span:not(#_){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .cw-red:not(#_){background:var(--status-stuck-bg);color:var(--status-stuck-fg)}
html body .cw-yel:not(#_){background:color-mix(in srgb,var(--sta-warn) 16%,var(--surface));color:var(--sta-warn)}
html body .cw-pur:not(#_){background:var(--status-review-bg);color:var(--status-review-fg)}
html body .cw-grn:not(#_){background:var(--accent-green-soft);color:var(--accent-green)}
html body .cw-dec:not(#_){list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
html body .cw-dec a:not(#_){display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;background:var(--surface-sunken);border-radius:var(--radius-md);color:var(--c-ink);text-decoration:none}
html body .cw-dec a:not(#_):hover{background:var(--surface-hover)}
html body .cw-num:not(#_){display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--c-ink);color:var(--surface);font-size:12px;font-weight:600}
html body .cw-dt b:not(#_){display:block;font-weight:600}
html body .cw-dt small:not(#_){display:block;margin-top:2px;font-size:13px;line-height:18px;color:var(--ink-muted)}
html body .cw-none:not(#_){margin:0}
html body .cw-tiles:not(#_){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
html body .cw-t:not(#_){display:flex;flex-direction:column;gap:3px;min-width:0;padding:14px 16px;background:var(--surface-sunken);border-radius:var(--radius-md);color:var(--c-ink);text-decoration:none}
html body a.cw-t:not(#_):hover{outline:2px solid var(--border)}
html body .cw-t b:not(#_){font:600 28px/1.1 var(--font-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .cw-t span:not(#_){font-size:13px;line-height:18px}
html body .cw-t small:not(#_){display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12.5px;line-height:17px;color:var(--ink-muted)}
html body .cw-t small.up:not(#_){color:var(--accent-green)}html body .cw-t small.dn:not(#_){color:var(--status-stuck-fg)}
html body .cw-t.key:not(#_){background:var(--c-ink);color:var(--surface)}html body .cw-t.key small:not(#_){color:var(--surface);opacity:.8}
html body .cw-t.red:not(#_){background:var(--status-stuck-bg)}
html body .cw-t.yellow:not(#_){background:color-mix(in srgb,var(--sta-warn) 16%,var(--surface))}
html body .cw-t.green:not(#_){background:var(--accent-green-soft)}
html body .cw-t.cw-off:not(#_){background:none;border:1px dashed var(--border)}html body .cw-t.cw-off b:not(#_){color:var(--ink-subtle)}
html body .cw-two:not(#_){display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:10px;margin-top:10px}
html body .cw-sec>.cw-two:first-of-type:not(#_){margin-top:0}
html body .cw-box:not(#_){min-width:0;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-md)}
html body .cw-wide:not(#_){margin-top:10px}
html body .cw-chart:not(#_){display:block;width:100%;height:auto}
html body .cw-chart rect:not(#_){fill:var(--status-idle-fill)}html body .cw-chart rect.now:not(#_){fill:var(--c-ink)}
html body .cw-chart text:not(#_){fill:var(--ink-muted);font:11px var(--font-sans)}html body .cw-chart text.cw-v:not(#_){fill:var(--c-ink);font-weight:600}
html body .cw-chart .cw-grid:not(#_){stroke:var(--border);stroke-width:1}
html body :is(.cw-kv,.cw-tab):not(#_){width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
html body :is(.cw-kv,.cw-tab) td:not(#_){padding:8px 10px}
html body :is(.cw-kv,.cw-tab) tbody tr:nth-child(odd) td:not(#_){background:var(--surface-sunken)}
html body :is(.cw-kv,.cw-tab) td:first-child:not(#_){border-radius:var(--radius-md) 0 0 var(--radius-md)}html body :is(.cw-kv,.cw-tab) td:last-child:not(#_){border-radius:0 var(--radius-md) var(--radius-md) 0}
html body .cw-tab th:not(#_){padding:0 10px 8px;font-size:12px;font-weight:500;color:var(--ink-muted);text-align:start;white-space:nowrap}
html body .cw-tab td:not(#_){white-space:nowrap}html body .cw-tab td:nth-child(2):not(#_){white-space:normal;max-width:420px}
html body .cw-tab a:not(#_){color:var(--c-ink);text-decoration:none}html body .cw-tab a:not(#_):hover{text-decoration:underline}
html body .cw-more:not(#_){margin-inline-start:6px;font-size:12px;color:var(--ink-muted)}
html body .cw-n:not(#_){text-align:end;font-variant-numeric:tabular-nums}
html body .cw-tw:not(#_){overflow-x:auto}
html body .cw-bars:not(#_){display:flex;flex-direction:column;gap:10px}
html body .cw-bar:not(#_){display:grid;grid-template-columns:110px minmax(0,1fr) 52px;gap:10px;align-items:center;font-size:13.5px}
html body .cw-bar>span:first-child:not(#_){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .cw-bar i:not(#_){position:relative;display:block;height:10px;border-radius:var(--radius-pill);background:var(--status-idle-bg);overflow:hidden}
html body .cw-bar i b:not(#_){position:absolute;inset:0 auto 0 0;border-radius:var(--radius-pill);background:var(--c-ink)}
html body .cw-bar.red i b:not(#_){background:var(--status-stuck-fg)}html body .cw-bar.red .cw-n:not(#_){color:var(--status-stuck-fg);font-weight:600}
html body .cw-bar.yel i b:not(#_){background:var(--sta-warn)}
html body .cw-key:not(#_){margin:12px 0 0;font-size:12px;line-height:17px;color:var(--ink-muted)}
html body .cw-fg:not(#_){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
html body .cw-fg p:not(#_){margin:0;font-size:13px;line-height:19px;color:var(--ink-muted)}html body .cw-fg b:not(#_){display:block;margin-bottom:3px;color:var(--c-ink)}
@media (max-width:860px){
  html body .cw-sec:not(#_){padding:16px}
  html body .cw-hrow:not(#_){grid-template-columns:1fr}html body .cw-meta:not(#_){text-align:start}
  html body .cw-wk:not(#_){font-size:36px}
  html body .cw-tiles:not(#_){grid-template-columns:repeat(2,minmax(0,1fr))}
  html body :is(.cw-two,.cw-fg):not(#_){grid-template-columns:minmax(0,1fr)}
  html body .cw-dec a:not(#_){grid-template-columns:auto minmax(0,1fr)}html body .cw-dec .cw-pill:not(#_){grid-column:2;justify-self:start}
  html body .cw-t b:not(#_){font-size:22px}
}
/* a monthly service's own months (proposal builder, 31 October 2026) */
.pp-own input[data-ppmon]{width:64px!important}
.pp-lmon{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-subtle);margin-top:4px}.pp-lmon input.find{width:64px!important;padding:3px 8px;min-height:0}
/* Price and payment: each monthly service's months, read only (31 October 2026); the ticks sit beside their words */
.pp-runs{background:var(--c-surface-2,#f5f5f5);border-radius:12px;padding:12px 14px;margin:6px 0 12px;max-width:620px}
.pp-runs>div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:13.5px}.pp-runs>div+div{border-top:1px solid var(--border)}
.pp-runs>b{display:block;font-size:12.5px;margin-bottom:4px}.pp-runs .pp-hint{margin:8px 0 0}
html body .pp-f.pp-chk:not(#_){display:flex;flex-direction:row;align-items:center;justify-content:flex-start;text-align:start;gap:8px}
html body .pp-f.pp-chk:not(#_)>input{margin:0;flex:none}
.pp-golink{background:none;border:0;padding:0;font:inherit;font-weight:600;color:inherit;text-decoration:underline;cursor:pointer}
/* Sales › Price list › Proposal template (public/proptemplate.js): sections on the left, the proposal as it will look on the right */
.pt .pp-plbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.pt .pp-plbar .grow{flex:1}.pt-title{font-size:18px;margin:0 0 0 6px}
.pt-wrap{display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:16px;align-items:start}
.pt-side{display:grid;gap:8px;max-height:calc(100vh - 210px);overflow:auto;padding-right:2px}
.pt-sec{background:var(--surface,#fff);border-radius:12px;padding:12px 14px}.pt-sec.off .pt-name b{color:var(--muted,#888)}
.pt-head{display:flex;align-items:center;gap:10px}.pt-name{flex:1;min-width:0;display:grid;gap:2px;text-align:start;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:default}
button.pt-name{cursor:pointer}button.pt-name b::after{content:" ›";color:var(--muted,#888)}.pt-sec.open button.pt-name b::after{content:" ⌄"}
.pt-name small{font-size:12px;color:var(--muted,#888);font-weight:400}
.pt-on{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted,#888);flex:none}.pt-on input{width:34px;height:18px}.pt-always{font-size:12px;color:var(--muted,#888);flex:none}
.pt-fields{display:grid;gap:10px;margin-top:12px}.pt-f{display:grid;gap:4px;font-size:12px}.pt-f span{color:var(--muted,#888)}
.pt-f input,.pt-f textarea{width:100%;min-width:0;font:inherit;font-size:14px}.pt-f textarea{resize:vertical;padding:8px 10px;border-radius:8px}
.pt-view{position:sticky;top:12px}.pt-frame{width:100%;height:calc(100vh - 210px);min-height:480px;border:0;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
@media (max-width:900px){.pt-wrap{grid-template-columns:1fr}.pt-side{max-height:none}.pt-frame{height:70vh}}
/* the question before a new proposal on a deal with one already out (public/proposals.js) */
.pp-ask{background:var(--surface-2,#f5f5f5);border-radius:12px;padding:12px 14px;margin:0 0 10px;display:grid;gap:8px}.pp-ask p{margin:0}.pp-ask small{color:var(--muted,#888)}
/* ---------- A job's two client statuses (Rami, 1 November 2026): With the client a calm teal (waiting on the client, not on the team),
   Client approved a deeper green than Approved (done, by the client). The kit's "teal" tone is the same colour (public/kit.js TONES). ---------- */
:root{--st-teal:#a3dcd8;--sta-teal:#0b6f69;--st-cok:#7cc99e;--sta-cok:#0b5c33}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--st-teal:#6db3ae;--sta-teal:#5fc9c1;--st-cok:#5fae83;--sta-cok:#6fd39c}}
:root[data-theme="dark"]{--st-teal:#6db3ae;--sta-teal:#5fc9c1;--st-cok:#5fae83;--sta-cok:#6fd39c}
html body select[data-sv=withclient]:not(#_):not(#_):not(#_){background-color:var(--st-teal)!important}
html body select[data-sv=clientok]:not(#_):not(#_):not(#_){background-color:var(--st-cok)!important}
html body select[data-sv=withclient]{--svdot:var(--sta-teal)}html body select[data-sv=clientok]{--svdot:var(--sta-cok)}
html body .wk-tag.withclient:not(#_):not(#_):not(#_){--dot:var(--sta-teal)}html body .wk-tag.clientok:not(#_):not(#_):not(#_){--dot:var(--sta-cok)}
html body :is(.bk-gbox,.bk-ch).t-teal:not(#_):not(#_){--acc:var(--sta-teal)}html body :is(.bk-g,.bk-ch).t-teal i:not(#_){background:var(--sta-teal)}
html body .bk-chip.t-teal:not(#_):not(#_):not(#_){display:inline-flex;align-items:center;gap:6px;background:transparent!important;color:var(--ink)!important;padding:0 2px!important;border:0!important;box-shadow:none!important;font-weight:600;--chipdot:var(--sta-teal)}
html body .bk-chip.t-teal:not(#_):not(#_):not(#_)::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--chipdot)}
html body .bk-stsel.t-teal:not(#_):not(#_){background-color:var(--st-teal)!important;color:var(--on-status)!important}
/* People (public/people.js; 1 November 2026): the list reuses the Clients table and cards; a person's page reuses the client page's
   header and tabs. Only what is new is here: the name cell, the Overview's boxes, the Job and Personal forms */
html body .pp-nm:not(#_){display:flex;align-items:center;gap:10px;min-width:0}
html body .pp-nm .cav:not(#_){width:28px;height:28px;font-size:12px;flex:none}
html body .pp-nmt:not(#_){display:flex;flex-direction:column;align-items:flex-start;min-width:0;flex:1}
html body .pp-nmt>a:not(#_){min-width:0;max-width:100%;text-decoration:none;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .pp-nmt>small:not(#_){font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
html body .pp-mgr:not(#_){font-size:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:2px 0 0}
html body .pp-cols:not(#_){display:flex;flex-direction:column;gap:8px;min-width:200px;padding:12px}
html body .pp-cols label:not(#_){display:flex;align-items:center;gap:8px;font:400 14px/20px var(--font-sans)}
html body .pp-cols small:not(#_){color:var(--ink-muted);font-size:12px}
html body .pp-form.me-card:not(#_):not(#_){display:block}
html body .pp-form .ov-h small:not(#_){display:block;margin-top:4px;font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
html body .pp-left:not(#_){display:inline-flex;align-items:center;gap:6px;min-height:32px;cursor:pointer;font:400 13px/18px var(--font-sans);color:var(--ink)}
html body .pp-n:not(#_){margin-inline-start:12px;color:var(--ink-muted);font:400 12px/16px var(--font-sans)}
html body .pp-acts:not(#_){display:inline-flex;gap:6px}
html body .pp-body:not(#_){margin-top:12px}
html body .pp-grid:not(#_){display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start}
html body .pp-grid.pp-one:not(#_){grid-template-columns:minmax(0,680px)}
html body .pp-grid .pp-wide:not(#_){grid-column:1/-1}
html body .pp-box:not(#_),html body .pp-grid .card.ch-panel+.card.ch-panel:not(#_){margin:0}
html body .pp-today:not(#_){display:flex;flex-direction:column;gap:2px}
html body .pp-today b:not(#_){font:600 18px/24px var(--font-sans);color:var(--ink)}
html body .pp-today small:not(#_),html body .pp-ul small:not(#_),html body .pp-dl small:not(#_){color:var(--ink-muted);font-size:12px}
html body .pp-bal.tm-bal:not(#_){grid-template-columns:repeat(3,minmax(0,1fr))}
html body .pp-bal.tm-bal div:first-child:not(#_){grid-column:auto}
html body .pp-next:not(#_){margin:10px 0}
html body .pp-ul:not(#_){list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
html body .pp-role:not(#_){display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--border)}
html body .pp-role:last-child:not(#_){border-bottom:0}
html body .pp-role>small:not(#_){flex:0 0 130px;color:var(--ink-muted);font-size:12px}
html body .pp-role>span:not(#_){display:flex;flex-wrap:wrap;gap:6px}
html body .pp-role a.ct-mt:not(#_){text-decoration:none;color:var(--ink)}
html body .pp-dl:not(#_){margin:0;display:flex;flex-direction:column}
html body .pp-dl>div:not(#_){display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--border)}
html body .pp-dl>div:last-child:not(#_){border-bottom:0}
html body .pp-dl dt:not(#_){color:var(--ink-muted);font-size:13px}
html body .pp-dl dd:not(#_){margin:0;color:var(--ink);font-size:14px;min-width:0;overflow-wrap:anywhere}
html body .pp-form.me-card:not(#_){max-width:none;margin:0}
html body .pp-ck span:not(#_){display:flex;align-items:center;gap:8px}
@media (max-width:860px){html body .pp-grid:not(#_),html body .pp-grid.pp-one:not(#_){grid-template-columns:minmax(0,1fr)}html body .pp-dl>div:not(#_){grid-template-columns:minmax(0,1fr);gap:2px}html body .pp-role:not(#_){flex-direction:column;gap:4px}html body .pp-role>small:not(#_){flex:none}html body .pp-n:not(#_){display:none}}
html body .pp-pi:not(#_){align-items:center}html body .pp-pi .cav:not(#_){flex:none;width:36px;height:36px;font-size:14px}
/* People on a phone (1 Nov 2026 screenshot review): Find full width, then the filters from the left, not piled up on the right */
@media (max-width:640px){html body .pp-board .bk-bar>.bk-r:not(#_):not(#_){display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;grid-column:1/-1;width:100%}html body .pp-board .bk-bar>.bk-r>.bk-q:not(#_):not(#_){flex:0 0 100%;width:100%}html body .pp-board .bk-bar:not(#_):not(#_){grid-template-columns:1fr}}
html body .ut-miss .ut-mrow:not(#_){display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
html body .ut-miss .ut-mdo:not(#_){display:flex;align-items:center;gap:6px;flex-wrap:wrap}
html body .ut-miss .ut-mdo select:not(#_){max-width:220px}
/* Circle this week: the scorecard (lib/scorecard.js) */
html body .cw-goals:not(#_){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
html body .cw-goal:not(#_){min-width:0;padding:16px 18px;background:var(--surface-sunken);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:10px}
html body .cw-gv:not(#_){display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
html body .cw-gv b:not(#_){font-size:30px;line-height:1.1;letter-spacing:-.02em;color:var(--c-ink)}
html body .cw-gv span:not(#_){color:var(--ink-muted);font-size:14px}
html body .cw-gbar:not(#_){position:relative;height:10px;border-radius:999px;background:var(--surface);overflow:visible}
html body .cw-gbar i:not(#_){position:absolute;inset-block:0;inset-inline-start:0;border-radius:999px;background:var(--c-ink)}
html body .cw-gbar em:not(#_){position:absolute;top:-4px;bottom:-4px;width:2px;margin-inline-start:-1px;background:var(--ink-muted);border-radius:2px}
html body .cw-gl:not(#_){display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
html body .cw-gl small:not(#_){color:var(--ink-muted)}
html body .cw-gs:not(#_){margin:0;font-size:12.5px;color:var(--ink-muted)}
html body .cw-goal.cw-off:not(#_){justify-content:center}
html body .cw-gform:not(#_){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px;align-items:end}
html body .cw-gform label:not(#_){display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-muted)}
html body .cw-gfb:not(#_){display:flex;gap:8px;grid-column:1/-1}
html body .cw-gerr:not(#_){grid-column:1/-1;color:var(--c-red,#c0392b)}
@media (max-width:640px){html body .cw-goals:not(#_),html body .cw-gform:not(#_){grid-template-columns:1fr}html body .cw-gv b:not(#_){font-size:26px}}
/* Circle Chat, step 1 (Rami, 1 November 2026: WhatsApp's patterns, Circle's look; "own messages are purple"). The chat's own colours:
   your bubbles purple, the others' in the surface colour on a slightly darker wall, the unread marks purple. No WhatsApp green. */
:root{--chat-mine:#7a2fd0;--chat-mine-ink:#ffffff;--chat-other:var(--surface);--chat-wall:var(--surface-sunken);--chat-name-l:36%}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--chat-mine:#6c37c9;--chat-other:#25272b;--chat-wall:#0f1011;--chat-name-l:74%}}
:root[data-theme="dark"]{--chat-mine:#6c37c9;--chat-other:#25272b;--chat-wall:#0f1011;--chat-name-l:74%}
/* the conversation: bubbles, a run of one person's messages close together, the time inside the bubble, a line for each day */
html body .wk-chat:not(#_){position:relative}
html body .wk-msgs:not(#_){gap:10px;padding:10px 12px;background:var(--chat-wall);border-radius:14px}
html body .wk-row:not(#_){transition:transform .18s ease}
html body .wk-row.cont:not(#_){margin-top:-7px}
html body .wk-av.gap:not(#_){visibility:hidden}
html body .wk-msg:not(#_){background:var(--chat-other);border-radius:16px;padding:7px 12px 5px;gap:2px;box-shadow:0 1px 1px rgba(0,0,0,.06)}
html body .wk-row:not(.cont):not(.mine):not(.kasper) .wk-msg:not(#_){border-start-start-radius:5px}
html body .wk-row.mine:not(.cont) .wk-msg.mine:not(#_){border-start-end-radius:5px}
html body .wk-msg.mine:not(#_) small{color:inherit}
html body .wk-msg.mine .ch-quote:not(#_){background:color-mix(in srgb,#000 18%,transparent);color:inherit}
html body .wk-by:not(#_){font-size:12.5px}html body .wk-by b:not(#_){color:hsl(var(--h,220) 55% var(--chat-name-l))}
html body .wk-meta:not(#_){justify-self:end;display:inline-flex;align-items:center;gap:4px;line-height:1;margin-block-start:1px;margin-inline:12px -4px}
html body .wk-meta .wk-tm:not(#_){font-size:11px;color:inherit;opacity:.66;padding:0;align-self:auto}
html body .wk-pinm:not(#_){display:inline-flex;opacity:.7}html body .wk-pinm svg:not(#_){width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
html body .wk-day:not(#_){align-self:center;margin:6px 0 2px;font-size:12px;color:var(--muted)}
html body .wk-day span:not(#_){display:inline-block;background:var(--chat-other);padding:4px 12px;border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,.08);font-weight:500}
/* jump to the newest message, with how many came in while scrolled up */
html body .ch-jump:not(#_){position:absolute;inset-inline-end:22px;bottom:110px;width:42px;height:42px;border-radius:50%;border:0;background:var(--chat-other);color:var(--ink);box-shadow:var(--shadow-menu);display:grid;place-items:center;cursor:pointer;z-index:4}
html body .ch-jump[hidden]:not(#_){display:none}
html body .ch-jump svg:not(#_){width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html body .ch-jump i:not(#_){position:absolute;top:-7px;inset-inline-end:-5px;min-width:20px;height:20px;box-sizing:border-box;border-radius:10px;background:var(--chat-mine);color:var(--chat-mine-ink);font-style:normal;font-size:11px;font-weight:700;line-height:20px;padding:0 5px;text-align:center}
html body .ch-jump i[hidden]:not(#_){display:none}
/* swipe a message to reply: it follows the finger over a reply arrow */
html body .wk-row.ch-swiping:not(#_){transition:none;position:relative}
html body .wk-row.ch-swiping:not(#_)::before{content:"↩";position:absolute;inset-inline-start:-36px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;display:grid;place-items:center;background:var(--chat-other);color:var(--ink);font-size:15px;opacity:.45}
html body .wk-row.ch-swgo:not(#_)::before{opacity:1;background:var(--chat-mine);color:var(--chat-mine-ink)}
@media (max-width:860px){html body .wk-chat .wk-row:not(#_){touch-action:pan-y}html body #p-ch .wk-msgs:not(#_){border-radius:0;margin:0 -10px;padding:10px}}
/* the list: a big title, round buttons, chips with counts, Archived on top, rows with a ⋯ menu, a pin mark, the count in colour,
   a client's status tag */
html body #chatPage .cx-top .h1:not(#_){font-size:30px;font-weight:700;letter-spacing:-.02em}
html body #chatPage .cx-top.cx-sub:not(#_){justify-content:flex-start;gap:6px}
html body #chatPage .cx-top.cx-sub .h1:not(#_){font-size:22px;display:block!important}
html body .cx-rb:not(#_){flex:none;width:38px;height:38px;border-radius:50%;border:0;background:var(--panel);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
html body .cx-rb:hover:not(#_){background:var(--hover)}
html body .cx-rb svg:not(#_),html body .cx-arch svg:not(#_),html body .cx-si svg:not(#_),html body .cx-sgo svg:not(#_),html body .cx-tabbar svg:not(#_),html body .cx-more svg:not(#_){width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html body .cx-more svg:not(#_){fill:currentColor;stroke:none}
html[dir="rtl"] body :is(.cx-rb,.cx-sgo) svg:not(#_){transform:scaleX(-1)}
html body .cx-rb.cx-newb:not(#_){background:var(--ink);color:var(--bg)}
html body #chatPage .mk-strip:not(#_){margin:0 4px 6px;padding-bottom:4px}
html body #chatPage .mk-pill:not(#_){min-height:34px;padding:0 13px;font-size:13.5px;border-color:var(--border);background:var(--surface)}
@media (min-width:861px){html body #chatPage .mk-strip:not(#_){gap:6px}html body #chatPage .mk-pill:not(#_){min-height:30px;padding:0 10px;font-size:13px}}
html body #chatPage .mk-pill.on:not(#_){background:var(--ink);color:var(--bg);border-color:var(--ink)}
html body .cx-rw:not(#_){position:relative;display:flex;align-items:center;border-radius:12px}
html body .cx-rw .cx-row:not(#_){flex:1;min-width:0}
html body .cx-rw.on .cx-row:not(#_),html body .cx-rw.menu .cx-row:not(#_){background:var(--panel)}
html body .cx-row.new .cx-t b:not(#_){font-weight:750}
html body .cx-row.new .cx-time:not(#_){color:var(--chat-mine);font-weight:600}
html body .cx-m i.cx-pill:not(#_),html body .cx-tabbar i:not(#_),html body .cx-arch i:not(#_),html body .cx-sn:not(#_){background:var(--chat-mine);color:var(--chat-mine-ink);font-style:normal}
html body .cx-arch i:not(#_),html body .cx-sn:not(#_){background:var(--panel);color:var(--muted);min-width:20px;height:20px;line-height:20px;border-radius:10px;font-size:11.5px;font-weight:700;text-align:center;padding:0 6px;box-sizing:border-box}
html body .cx-mk:not(#_){display:flex;align-items:center;gap:6px;min-height:18px}
html body .cx-pinm:not(#_){display:inline-flex;color:var(--muted)}html body .cx-pinm svg:not(#_){width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
html body .cx-st:not(#_){justify-self:start;margin-top:4px;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:5px;background:var(--accent-green-soft);color:var(--accent-green)}
html body .cx-st.s-onboarding:not(#_){background:var(--status-review-bg);color:var(--status-review-fg)}
html body .cx-st.s-hold:not(#_){background:var(--status-working-bg);color:var(--status-working-fg)}
html body .cx-more:not(#_){position:absolute;inset-inline-end:6px;top:6px;width:30px;height:30px;border-radius:50%;border:0;background:var(--surface);color:var(--muted);box-shadow:var(--shadow-raised);display:grid;place-items:center;cursor:pointer;opacity:0;padding:0}
html body .cx-rw:hover .cx-more:not(#_),html body .cx-more:focus-visible:not(#_),html body .cx-rw.menu .cx-more:not(#_){opacity:1}
@media (hover:hover){html body .cx-rw:hover .cx-time:not(#_),html body .cx-rw.menu .cx-time:not(#_){visibility:hidden}}
@media (hover:none){html body .cx-more:not(#_){display:none}}
html body .cx-menu:not(#_){position:absolute;inset-inline-end:8px;top:calc(100% - 8px);z-index:30;display:grid;min-width:180px;padding:6px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow-menu)}
html body .cx-menu button:not(#_){font:inherit;font-size:14px;text-align:start;border:0;background:none;color:var(--ink);padding:10px 12px;border-radius:9px;cursor:pointer}
html body .cx-menu button:hover:not(#_),html body .cx-menu button:focus-visible:not(#_){background:var(--panel)}
html body .cx-arch:not(#_){display:flex;align-items:center;gap:12px;width:100%;font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);background:none;border:0;padding:10px 12px;border-radius:12px;cursor:pointer;text-align:start}
html body .cx-arch:hover:not(#_){background:var(--panel)}html body .cx-arch span:not(#_){flex:1}
html body .cx-arch svg:not(#_){width:34px;color:var(--muted)}
html body .cx-note:not(#_){margin:0 8px 10px;font-size:12.5px;color:var(--muted)}
html body .cx-sh:not(#_){padding:12px 10px 4px}
/* the bar at the bottom of Circle Chat and the pop-out: Chats, Settings, floating */
html body .cx-list.cx-hasbar:not(#_){position:relative}
html body .cx-hasbar .cx-scroll:not(#_){padding-bottom:96px}
html body .cx-tabbar:not(#_){position:absolute;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:12;display:flex;gap:4px;padding:5px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow-menu);border:1px solid var(--border)}
html body .cx-tabbar button:not(#_){position:relative;display:grid;justify-items:center;gap:2px;min-width:92px;padding:7px 16px 6px;border:0;border-radius:999px;background:none;color:var(--muted);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
html body .cx-tabbar button.on:not(#_){background:var(--panel);color:var(--ink)}
html body .cx-tabbar svg:not(#_){width:22px;height:22px}
html body .cx-tabbar i:not(#_){position:absolute;top:1px;inset-inline-start:calc(50% + 6px);min-width:18px;height:18px;line-height:18px;border-radius:9px;font-size:10.5px;font-weight:700;padding:0 5px;box-sizing:border-box}
/* Circle Chat, step 4 (Rami, 2 November 2026): four tabs, Chats, Mentions, Updates, Settings. A dot on Updates when something is new. */
html body .cx-tabbar i.cx-tdot:not(#_){min-width:0;width:9px;height:9px;padding:0;top:5px;inset-inline-start:calc(50% + 8px);border-radius:50%}
html body .cx-tabbar.cx-at-bottom button:not(#_){min-width:68px;padding:7px 10px 6px}
@media (max-width:360px){html body .cx-tabbar.cx-at-bottom button:not(#_){min-width:60px;padding:7px 6px 6px;font-size:11px}}
/* a phone inside the Hub (the Hub's own bar stays at the bottom): the four as a row at the top of the list */
html body .cx-tabbar.cx-at-top:not(#_){position:static;transform:none;display:flex;width:100%;box-sizing:border-box;margin:0 0 10px;box-shadow:none}
html body .cx-tabbar.cx-at-top button:not(#_){flex:1;min-width:0;padding:6px 2px 5px}
/* a computer (the Hub's Chat page and Circle Chat): a slim column of icons down the left edge of the chat */
html body .cx-rail:empty:not(#_){display:none}
@media (min-width:861px){
  html body .cx.cx-railed:not(#_){grid-template-columns:76px 300px minmax(0,1fr)}
  html body .cx-rail:not(#_){display:flex;flex-direction:column;min-height:0;background:var(--bg);border-radius:20px;padding:12px 6px}
  html body .cx-rail .cx-tabbar:not(#_){position:static;transform:none;flex-direction:column;gap:6px;padding:0;background:none;box-shadow:none;border:0;border-radius:0}
  html body .cx-rail .cx-tabbar button:not(#_){min-width:0;width:100%;padding:10px 2px 8px;border-radius:14px;font-size:11px;gap:4px}
  html body .cx-rail .cx-tabbar button:hover:not(#_){background:var(--hover);color:var(--ink)}
  html body .cx-rail .cx-tabbar button.on:not(#_){background:var(--panel);color:var(--ink)}
  html body .cx-rail .cx-tabbar i:not(#_){top:4px;inset-inline-start:calc(50% + 4px)}
  html body .cx-rail .cx-tabbar i.cx-tdot:not(#_){top:8px;inset-inline-start:calc(50% + 8px)}
  html.pop body #chatPage .cx-rail:not(#_){border-radius:0;box-shadow:inset -1px 0 0 var(--border)}
  html[dir="rtl"].pop body #chatPage .cx-rail:not(#_){box-shadow:inset 1px 0 0 var(--border)}
}
html body .cx-tabbar i.cx-tdot:not(#_),html body .cx-udot:not(#_){background:var(--chat-mine)}
/* Mentions: who › which chat · when, then the words; an unread one bold, with a dot */
html body .cx-ments:not(#_),html body .cx-upds:not(#_){display:grid;gap:4px;align-content:start;padding:2px 2px 96px}
html body .cx-ment:not(#_){position:relative;display:flex;align-items:flex-start;gap:12px;padding:10px 26px 10px 10px;border-radius:14px;color:var(--ink);text-decoration:none}
html[dir="rtl"] body .cx-ment:not(#_){padding:10px 10px 10px 26px}
html body .cx-ment:hover:not(#_){background:var(--hover)}
html body .cx-ment .cx-ic:not(#_){width:36px;height:36px;font-size:13px}
html body .cx-mt:not(#_){flex:1;min-width:0;display:grid;gap:3px}
html body .cx-ment .cx-stw b:not(#_){color:var(--ink)}
html body .cx-ment .cx-stw span:not(#_){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
html body .cx-ment .cx-stw .cx-time:not(#_){flex:none}
html body .cx-ment .cx-stt:not(#_){color:var(--muted)}
html body .cx-ment.new .cx-stt:not(#_){color:var(--ink);font-weight:600}
html body .cx-ment .cx-stt em:not(#_){font-style:normal;font-weight:600;color:var(--chat-mine)}
html body .cx-udot:not(#_){display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
html body .cx-ment .cx-udot:not(#_){position:absolute;inset-inline-end:10px;top:50%;margin-top:-4px}
/* Updates: a card per announcement or What's new, newest first, each with Open */
html body .cx-upds:not(#_){gap:10px;padding:2px 4px 96px}
html body .cx-upd:not(#_){display:grid;gap:6px;padding:14px 16px;border-radius:18px;background:var(--surface);box-shadow:0 0 0 1px var(--border)}
html body .cx-upd.new:not(#_){box-shadow:0 0 0 1.5px var(--chat-mine)}
html body .cx-uk:not(#_){display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:11.5px;color:var(--muted)}
html body .cx-uk span:first-child:not(#_){font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
html body .cx-upd b:not(#_){font-size:15.5px;line-height:1.3}
html body .cx-upd p:not(#_){margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-muted,var(--muted));display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html body .cx-upd .cx-uopen:not(#_){justify-self:start;margin-top:4px}
/* Updates, second part (2 November 2026): the bell's notifications under the cards, with Mark all as read */
html body .cx-nh:not(#_){display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 8px 0;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
html body .cx-readall:not(#_){border:0;background:none;padding:4px 2px;font:inherit;font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--chat-mine);cursor:pointer}
html body .cx-notes:not(#_){display:grid;gap:2px}
html body .cx-ment .cx-ic svg:not(#_){width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
/* where it is (a mention from the Hub, a notification's client and item): its own line under who and when, so a long name never wraps */
html body .cx-ment .cx-stw b:not(#_){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
html body .cx-mw:not(#_){font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Settings: grouped cards */
html body .cx-sets:not(#_){display:grid;gap:14px;align-content:start;grid-auto-rows:max-content;padding:2px 4px 96px}
html body .cx-set:not(#_){display:grid;background:var(--surface);border-radius:18px;padding:2px 0;overflow:hidden;box-shadow:0 0 0 1px var(--border)}
html body .cx-set h3:not(#_){margin:12px 16px 2px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
html body .cx-srow:not(#_){display:flex;align-items:center;gap:14px;min-height:54px;padding:10px 16px;color:var(--ink);text-decoration:none;background:none;border:0;font:inherit;font-size:15px;text-align:start;cursor:pointer;box-sizing:border-box;width:100%}
html body .cx-srow+.cx-srow:not(#_),html body .cx-set .me-srow:not(#_){box-shadow:0 -1px 0 var(--border)}
html body a.cx-srow:hover:not(#_),html body button.cx-srow:hover:not(#_),html body .cx-me:hover:not(#_){background:var(--hover)}
html body .cx-si:not(#_){flex:none;display:grid;place-items:center;width:24px;color:var(--ink)}
html body .cx-sl:not(#_){flex:1;min-width:0;display:grid;gap:2px}html body .cx-sl small:not(#_){font-size:12.5px;color:var(--muted)}
html body .cx-sgo:not(#_){flex:none;display:grid;color:var(--muted)}html body .cx-sgo svg:not(#_){width:16px;height:16px}
html body .cx-me:not(#_){display:flex;align-items:center;gap:14px;padding:14px 16px;color:var(--ink);text-decoration:none}
html body .cx-me .cx-ic:not(#_){width:54px;height:54px;font-size:18px}html body .cx-me b:not(#_){font-size:17px}
html body .cx-dev .me-srow:not(#_){display:grid;gap:8px;padding:12px 16px}html body .cx-dev .me-srow>span:first-child:not(#_){font-weight:600}
html body .cx-sx .btn-s:not(#_){flex:none}
/* a phone inside the Hub: the Hub's header has the page's name, so Find a chat and the gear share the top row */
html body #chatPage .cx-top.cx-qrow:not(#_){gap:8px;padding:0 0 10px}
html body #chatPage .cx-top.cx-qrow .cx-q:not(#_){flex:1;min-width:0;margin:0}
/* Circle Chat, step 2: media (Rami, 1 November 2026). Files, voice messages and videos in the bubble, "Forwarded", reactions under the
   bubble, a star mark, read ticks in a direct message, the microphone and the recording bar, the Forward picker, Starred messages. */
:root{--chat-read:#2aa9e0}
html body .wk-msg.mine:not(#_){--chat-read:#a8ecff}
html body .ch-files:not(#_){display:grid;gap:6px;margin:2px 0}
html body .ch-fwd:not(#_){display:inline-flex;align-items:center;gap:4px;font-style:italic;opacity:.75}
html body .ch-fwd svg:not(#_){width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* a voice message: play, the waveform (filling as it plays), the time, the speed */
html body .ch-voice:not(#_){display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:8px;min-width:min(250px,62vw);max-width:330px;padding:2px 0}
html body .ch-voice audio:not(#_){display:none}
html body .ch-vplay:not(#_){width:36px;height:36px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;background:var(--chat-mine);color:var(--chat-mine-ink)}
html body .wk-msg.mine .ch-vplay:not(#_){background:var(--chat-mine-ink);color:var(--chat-mine)}
html body .ch-vplay svg:not(#_){width:18px;height:18px;fill:currentColor}
html body .ch-wave:not(#_),html body .ch-recw:not(#_){display:flex;align-items:center;gap:2px;height:28px;overflow:hidden}
html body .ch-wave i:not(#_),html body .ch-recw i:not(#_){flex:none;width:3px;height:calc(var(--v,2) * 2.6px + 2px);border-radius:2px;background:currentColor;opacity:.32}
html body .ch-wave i.on:not(#_){opacity:1}
html body .ch-vt:not(#_){font-variant-numeric:tabular-nums;opacity:.8}
html body .ch-vspeed:not(#_){font:inherit;font-size:12px;font-weight:600;border:0;border-radius:999px;padding:3px 8px;cursor:pointer;background:color-mix(in srgb,currentColor 14%,transparent);color:inherit;min-width:40px}
/* a video plays in the chat; a file is a card with its name, size, Open and Download */
html body .ch-video:not(#_){display:block;width:min(320px,100%);max-height:380px;border-radius:12px;background:#000}
html body .ch-file:not(#_){display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,currentColor 7%,transparent);min-width:min(240px,60vw);max-width:340px}
html body .ch-fic:not(#_){flex:none;width:36px;height:42px;border-radius:7px;display:grid;place-items:center;font-size:9.5px;font-weight:700;letter-spacing:.02em;background:var(--chat-mine);color:var(--chat-mine-ink)}
html body .wk-msg.mine .ch-fic:not(#_){background:var(--chat-mine-ink);color:var(--chat-mine)}
html body .ch-fn:not(#_){flex:1;min-width:0;display:grid}
html body .ch-fn b:not(#_){font-size:13.5px;font-weight:600;line-height:1.3;overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
html body .ch-fopen:not(#_){font-size:12.5px;font-weight:600;color:inherit;text-decoration:none;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,currentColor 12%,transparent)}
html body .ch-fdl:not(#_){flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:inherit;background:color-mix(in srgb,currentColor 12%,transparent)}
html body .ch-fdl svg:not(#_){width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* reactions: a pill hanging under the bubble; pressing it shows who */
html body .wk-row.has-rx:not(#_){margin-bottom:14px}
html body .ch-rx:not(#_){position:absolute;bottom:-15px;inset-inline-start:10px;display:inline-flex;align-items:center;gap:1px;height:24px;min-height:0;min-width:0;box-sizing:border-box;padding:0 7px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:13px;line-height:1;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.12);z-index:2}
html body .ch-rx span:not(#_),html body .ch-rxpick button:not(#_),html body .ch-rxwho span:first-child:not(#_){font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
html body .ch-rx span:not(#_){display:inline-block;font-size:13px;line-height:18px;height:18px}
html body .ch-rx b:not(#_){font-size:11.5px;font-weight:600;margin-inline-start:3px;color:var(--muted)}
html body .ch-rxwho:not(#_){position:absolute;top:calc(100% + 20px);inset-inline-start:0;z-index:7;min-width:180px;max-width:280px;display:grid;gap:6px;padding:10px 12px;border-radius:14px;background:var(--bg);color:var(--ink);box-shadow:var(--shadow-menu);font-size:13px}
html body .wk-msg.mine .ch-rxwho:not(#_){inset-inline-start:auto;inset-inline-end:0}
html body .ch-rxwho div:not(#_){display:flex;gap:8px}
/* a message's ˅ and smiley, as in WhatsApp (Rami, 3 November 2026: "that should only show if we click on a little arrow on the corner"):
   nothing pops up on hover any more. On a computer, pointing at a message (or reaching it with the keyboard) shows a ˅ in its top corner,
   over a soft fade of the bubble's own colour so it doesn't cover the text, and a round smiley beside the bubble. Both sit on top of the
   layout, so nothing moves. ˅ opens the message's menu (public/work.js menuOpen), the smiley the five reactions. A phone shows neither:
   press and hold a message there. */
html body .wk-msg:not(#_){--bub:var(--chat-other)}
html body .wk-msg.mine:not(#_){--bub:var(--chat-mine)}
html body .wk-msg.kasper:not(#_){--bub:var(--bg)}
html body .ch-more:not(#_){position:absolute;top:1px;inset-inline-end:1px;z-index:3;width:36px;height:26px;min-height:0;min-width:0;margin:0;padding:0 5px;display:flex;align-items:center;justify-content:flex-end;border:0;border-radius:0;border-start-end-radius:inherit;background:linear-gradient(to left,var(--bub) 52%,transparent);color:inherit;cursor:pointer;opacity:0;transition:opacity .12s ease}
html[dir="rtl"] body .ch-more:not(#_){background:linear-gradient(to right,var(--bub) 52%,transparent)}
html body .ch-more svg:not(#_){width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
html body .ch-more:hover svg:not(#_),html body .wk-msg.menu-on .ch-more svg:not(#_){opacity:1}
html body .ch-smile:not(#_){position:absolute;top:50%;margin:-15px 0 0;inset-inline-end:-40px;inset-inline-start:auto;z-index:3;width:30px;height:30px;min-height:0;min-width:0;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:var(--chat-other);color:var(--muted);box-shadow:0 1px 2px rgba(0,0,0,.14);cursor:pointer;opacity:0;transition:opacity .12s ease}
html body .wk-msg.mine .ch-smile:not(#_){inset-inline-end:auto;inset-inline-start:-40px}
html body .ch-smile:not(#_)::before{content:"";position:absolute;inset:-8px -12px}
html body .ch-smile:hover:not(#_){color:var(--ink)}
html body .ch-smile svg:not(#_){width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
@media (hover:hover){html body .wk-msg:hover>.ch-more:not(#_),html body .wk-msg:hover>.ch-smile:not(#_){opacity:1}}
html body .wk-msg:focus-within>.ch-more:not(#_),html body .wk-msg:focus-within>.ch-smile:not(#_),html body .wk-msg.menu-on>.ch-more:not(#_),html body .wk-msg.menu-on>.ch-smile:not(#_),html body .wk-msg.rx>.ch-smile:not(#_){opacity:1}
@media (hover:none){html body .ch-more:not(#_),html body .ch-smile:not(#_){display:none}}
/* the five reactions: from the smiley (or React in the menu) as a round pill above the message; at the top of the menu on a phone */
html body .ch-rxpick:not(#_){display:none;position:absolute;bottom:calc(100% + 4px);z-index:5;gap:2px;padding:3px 6px;border-radius:999px;background:var(--bg);box-shadow:var(--shadow-menu)}
html body .wk-msg.rx>.ch-rxpick:not(#_){display:flex}
html body .ch-rxpick button:not(#_){font-size:21px!important;line-height:1;padding:5px 6px!important;border-radius:50%!important;min-height:0!important;background:none;border:0;color:inherit;cursor:pointer}
html body .ch-rxpick button:hover:not(#_){background:var(--surface-hover)}
/* the pill grows from the message's own side (Rami, 2 November 2026: on someone else's short message it ran off the left edge of the chat):
   their messages from the start edge, yours from the end edge; public/work.js rxFit nudges it back inside the chat if it still doesn't fit */
html body .wk-msg:not(.mine)>.ch-rxpick:not(#_){inset-inline-start:8px;inset-inline-end:auto}
html body .wk-msg.mine>.ch-rxpick:not(#_){inset-inline-end:8px;inset-inline-start:auto}
html body .ch-rxpick button.on:not(#_){background:color-mix(in srgb,var(--chat-mine) 18%,transparent)}
/* the message's menu: one column, WhatsApp's order (Reply, React, Star, Pin, Forward, Copy) */
html body .ch-menu:not(#_){position:absolute;z-index:9;min-width:184px;max-width:calc(100% - 12px);display:flex;flex-direction:column;padding:6px;border-radius:14px;background:var(--bg);color:var(--ink);box-shadow:var(--shadow-menu)}
html body .ch-menu [role="menuitem"]:not(#_){font:inherit;font-size:14px;line-height:1.3;text-align:start;color:inherit;background:none;border:0;border-radius:8px;padding:8px 12px;min-height:36px;cursor:pointer}
html body .ch-menu [role="menuitem"]:hover:not(#_),html body .ch-menu [role="menuitem"]:focus-visible:not(#_){background:var(--surface-hover);outline:none}
html body .ch-menu.touch:not(#_){min-width:min(260px,calc(100% - 12px))}
html body .ch-menu.touch [role="menuitem"]:not(#_){min-height:44px;font-size:15px}
html body .ch-menu .ch-rxpick:not(#_){display:flex;position:static;justify-content:space-between;box-shadow:none;border-radius:0;padding:2px 2px 6px;margin-bottom:4px;border-bottom:1px solid var(--line);background:none}
/* the message pressed and held is outlined while its menu is open (above the Chat page's own bubble shadow, public/hl-chat.css) */
html body .wk-chat .wk-msg.acts:not(#_):not(#_),html body #p-ch .wk-msg.acts:not(#_):not(#_){box-shadow:0 0 0 2px var(--info)}
/* the star and the ticks beside the time */
html body .wk-starm:not(#_){display:inline-flex;opacity:.75}html body .wk-starm svg:not(#_){width:12px;height:12px;fill:currentColor}
html body .ch-tick:not(#_){display:inline-flex;opacity:.75}
html body .ch-tick svg:not(#_){width:17px;height:12px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html body .ch-tick.read:not(#_){color:var(--chat-read);opacity:1}
/* the box: the microphone while it is empty, the send arrow once there is something to send */
html body .ch-barr:not(#_){display:inline-flex;align-items:center;gap:6px}
html body .ch-box.empty .ch-bar .ch-send:not(#_){display:none}
html body .ch-box:not(.empty) .ch-mic:not(#_){display:none}
html body .ch-mic:not(#_){width:30px;height:30px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;background:var(--primary)!important;color:var(--on-primary)!important;touch-action:none;-webkit-user-select:none;user-select:none}
html body .ch-mic svg:not(#_){width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* recording: a red dot, the time, the moving waveform; Cancel and Send on a computer, "Slide to cancel" while holding on a phone */
html body .ch-box.recording textarea:not(#_),html body .ch-box.recording .ch-bar:not(#_){display:none}
html body .ch-rec:not(#_){display:flex;align-items:center;gap:10px;min-height:44px}
html body .ch-rec[hidden]:not(#_){display:none}
html body .ch-recdot:not(#_){flex:none;width:10px;height:10px;border-radius:50%;background:#e5484d;animation:chrec 1s ease-in-out infinite}
@keyframes chrec{50%{opacity:.25}}
html body .ch-rect:not(#_){font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink);min-width:38px}
html body .ch-recw:not(#_){flex:1;min-width:0;justify-content:flex-end;color:var(--chat-mine)}
html body .ch-recw i:not(#_){opacity:.85}
html body .ch-recx:not(#_){flex:none;width:34px;height:34px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--panel);color:#e5484d;cursor:pointer}
html body .ch-recx svg:not(#_){width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html body .ch-slide:not(#_){display:none;color:var(--muted);font-size:13px;white-space:nowrap}
html body .ch-box.rec-touch .ch-slide:not(#_){display:inline}
html body .ch-box.rec-touch .ch-recx:not(#_),html body .ch-box.rec-touch .ch-recgo:not(#_){display:none}
html body .ch-box.cancel .ch-slide:not(#_){color:#e5484d}
/* a file waiting to be sent */
html body .ch-pend.ch-pendf:not(#_){display:inline-flex;align-items:center;gap:8px;width:auto;max-width:240px;padding:6px 30px 6px 6px;border-radius:12px;background:var(--panel)}
html body .ch-pendf .ch-fic:not(#_){width:28px;height:32px;font-size:8.5px}
html body .ch-pendf small:not(#_){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
/* Forward to: the chats this person can write in */
html body .ch-fwdpick:not(#_){position:absolute;inset-inline-end:16px;bottom:96px;z-index:9;width:min(340px,calc(100% - 32px));max-height:min(60vh,440px);display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:18px;background:var(--bg);color:var(--ink);box-shadow:var(--shadow-menu)}
html body .ch-fwdh:not(#_){display:flex;align-items:center;justify-content:space-between}
html body .ch-fwdx:not(#_){width:30px;height:30px;border-radius:50%;border:0;background:var(--panel);color:var(--ink);font-size:18px;cursor:pointer}
html body .ch-fwdl:not(#_){overflow:auto;display:grid;gap:2px}
html body .ch-fwdl button:not(#_){display:flex;align-items:center;gap:10px;font:inherit;text-align:start;border:0;background:none;color:var(--ink);padding:8px 10px;border-radius:10px;cursor:pointer}
html body .ch-fwdl button:hover:not(#_){background:var(--hover)}
html body .ch-fwdl button[hidden]:not(#_){display:none}
html body .ch-fwdl button span:not(#_){width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--panel);font-size:13px}
/* the Library: a video among the pictures */
html body .ch-vthumb:not(#_){position:relative}
html body .ch-vthumb video:not(#_){width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
html body .ch-vthumb span:not(#_){position:absolute;inset:0;display:grid;place-items:center;color:#fff}
html body .ch-vthumb span svg:not(#_){width:30px;height:30px;fill:currentColor;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
html body .ch-lrow .ch-file:not(#_),html body .ch-lrow .ch-voice:not(#_){max-width:420px}
/* Settings › Starred messages */
html body .cx-stars:not(#_){display:grid;gap:8px;align-content:start}
html body .cx-star:not(#_){display:grid;gap:4px;padding:12px 14px;border-radius:14px;background:var(--surface);color:var(--ink);text-decoration:none}
html body .cx-star:hover:not(#_){background:var(--hover)}
html body .cx-stw:not(#_){display:flex;align-items:baseline;gap:6px;font-size:13px;min-width:0}
html body .cx-stw span:not(#_){color:var(--muted)}
html body .cx-stw .cx-time:not(#_){margin-inline-start:auto}
html body .cx-stt:not(#_){font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html body .cx-stt em:not(#_){color:var(--muted)}
/* Chat on a computer: the message box keeps clear of Kasper's button at the bottom right, so Send and the microphone are never under it */
@media (min-width:861px){html body #p-ch.on .ch-box:not(#_){margin-right:62px}}
/* Circle Chat, step 3: the attach sheet (Rami, 2 November 2026). + opens a popover above the box on a computer, a sheet from the bottom on
   a phone (public/phonekit.js); the cards it sends (a Hub item, a poll) sit in the bubble like a file does; / offers quick replies. */
html body .ch-box button.ch-add:not(#_){display:grid;place-items:center;padding:0;border:0;color:var(--ink);cursor:pointer}
html body .ch-box button.ch-add:hover:not(#_){background:var(--hover)}
html body .ch-attach:not(#_){position:absolute;inset-inline-start:12px;z-index:9;width:min(360px,calc(100% - 24px));max-height:min(70vh,540px);overflow:auto;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:18px;background:var(--bg);color:var(--ink);box-shadow:var(--shadow-menu),0 0 0 1px var(--line);box-sizing:border-box}
html body .ch-atbox .ch-ath:not(#_){display:flex;align-items:center;gap:8px;min-height:32px;padding:0 4px}
html body .ch-atbox .ch-ath b:not(#_){font-size:15px}
html body .ch-atback:not(#_){width:32px;height:32px;border-radius:50%;border:0;background:var(--panel);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;flex:none}
html body .ch-atback svg:not(#_),html body .ch-ati svg:not(#_),html body .ch-igo svg:not(#_),html body .ch-pk svg:not(#_){fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html body .ch-atback svg:not(#_){width:18px;height:18px}
html[dir="rtl"] body .ch-atback svg:not(#_),html[dir="rtl"] body .ch-igo svg:not(#_){transform:scaleX(-1)}
html body .ch-atl:not(#_){display:grid;gap:2px}
html body .ch-ato:not(#_){display:flex;align-items:center;gap:12px;width:100%;padding:8px;border:0;border-radius:12px;background:none;color:var(--ink);font:inherit;text-align:start;cursor:pointer;min-height:0}
html body .ch-ato:hover:not(#_),html body .ch-ato:focus-visible:not(#_){background:var(--hover)}
html body .ch-ati:not(#_){flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--surface);background:var(--accent-violet)}
html body .ch-ati svg:not(#_){width:20px;height:20px}
html body .ch-ati.k-item:not(#_){background:var(--accent-sky)}html body .ch-ati.k-poll:not(#_){background:var(--accent-orange)}
html body .ch-ati.k-quick:not(#_){background:var(--accent-green)}html body .ch-ati.k-kasper:not(#_){background:var(--c-ink);color:var(--surface)}
html body .ch-att:not(#_){display:grid;gap:1px;min-width:0}html body .ch-att b:not(#_){font-size:14.5px;font-weight:600}html body .ch-att small:not(#_){font-size:12.5px;color:var(--muted);line-height:1.35}
html body .ch-atbox .ch-athint:not(#_){display:block;color:var(--muted);font-size:12.5px;line-height:1.45;padding:2px 4px}
html body .ch-atbox .ch-aterr:not(#_){display:block;color:var(--status-stuck-fg,#b01e4f);font-size:12.5px;padding:0 4px}
html body .ch-atbox .ch-aterr:empty:not(#_){display:none}
html body .ch-atres:not(#_),html body .ch-atql:not(#_){display:grid;gap:4px;align-content:start}
html body .ch-atr:not(#_){display:grid;gap:2px;justify-items:start;width:100%;padding:8px 10px;border:0;border-radius:12px;background:var(--panel);color:var(--ink);font:inherit;text-align:start;cursor:pointer;min-height:0}
html body .ch-atr:hover:not(#_){background:var(--hover)}
html body .ch-atr b:not(#_){font-size:14px;font-weight:600;overflow-wrap:anywhere}html body .ch-atr small:not(#_){font-size:12.5px;color:var(--muted)}
html body .ch-ik:not(#_){display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.72}
html body .ch-atf:not(#_){display:grid;gap:10px}
html body .ch-atlb:not(#_){display:grid;gap:4px;font-size:12.5px;font-weight:600;color:var(--muted)}
html body .ch-atlb small:not(#_){font-weight:400}
html body .ch-atlb .find:not(#_),html body .ch-atopt .find:not(#_),html body .ch-atbox [data-atq]:not(#_){width:100%;box-sizing:border-box;color:var(--ink);font-weight:400;min-width:0}
html body .ch-atopts:not(#_){display:grid;gap:6px}
html body .ch-atopt:not(#_){display:flex;gap:6px;align-items:center}
html body .ch-atx:not(#_){flex:none;width:30px;height:30px;min-height:0;border-radius:50%;border:0;padding:0;background:var(--panel);color:var(--ink);font-size:17px;cursor:pointer}
html body .ch-atadd:not(#_){justify-self:start}
html body .ch-atck:not(#_){display:flex;gap:8px;align-items:center;font-size:14px}
html body .ch-atdo:not(#_){display:flex;justify-content:flex-end;gap:6px}
html body .ch-atq:not(#_){width:100%;padding:10px 12px;border:0;border-radius:12px;background:var(--panel);color:var(--ink);font:inherit;font-size:14px;line-height:1.4;text-align:start;cursor:pointer;white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:0}
html body .ch-atq:hover:not(#_){background:var(--hover)}
html body .ch-atqe:not(#_){display:grid;gap:6px;padding:8px;border-radius:12px;background:var(--panel)}
html body .ch-atqe textarea:not(#_){width:100%;box-sizing:border-box;resize:vertical;color:var(--ink)}
html body .ch-atqe>span:not(#_){display:flex;gap:6px;justify-content:flex-end}
html body .ch-atqn:not(#_){background:none;box-shadow:inset 0 0 0 1px var(--line)}
/* on a phone the sheet's own header has the title and ×: the menu needs no other */
html body .mk-sheet.ch-atbox:not(#_){display:flex;flex-direction:column;gap:10px}
html body .mk-sheet.ch-atbox .ch-ato:not(#_){padding:10px 6px}
html body .mk-sheet.ch-atbox .ch-ath b:not(#_){display:none}
/* words that set their own direction (a title in English in the Arabic Hub) still line up with the rest of the card */
html body :is(.ch-item b,.ch-item small,.ch-pq,.ch-pt,.ch-atr b,.ch-atr small,.ch-atq,.ch-slash button,.ch-pwho b,.ch-pwho span):not(#_){text-align:left}
html[dir="rtl"] body :is(.ch-item b,.ch-item small,.ch-pq,.ch-pt,.ch-atr b,.ch-atr small,.ch-atq,.ch-slash button,.ch-pwho b,.ch-pwho span):not(#_){text-align:right}
/* / in an empty box: the quick replies, like the @ list */
html body .ch-slash:not(#_){position:absolute;left:0;right:0;bottom:100%;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:4px;display:flex;flex-direction:column;z-index:6;box-shadow:0 6px 20px rgba(0,0,0,.12);max-height:260px;overflow:auto}
html body .ch-slash[hidden]:not(#_){display:none}
html body .ch-slash button:not(#_){font:inherit;font-size:13.5px;text-align:start;background:none;border:0;padding:7px 10px;border-radius:8px;color:var(--ink);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none;min-height:0}
html body .ch-slash button:hover:not(#_),html body .ch-slash button.on:not(#_){background:var(--panel)}
html body .ch-slash button.on:not(#_){font-weight:600}
html body .ch-slash .ch-athint:not(#_){color:var(--muted);font-size:12.5px;padding:6px 10px}
/* the cards in a bubble */
html body .wk-msg.ch-hascard:not(#_){min-width:min(260px,70vw)}
html body .ch-item:not(#_){display:grid;gap:2px;margin:2px 0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,currentColor 8%,transparent);color:inherit;text-decoration:none;max-width:340px}
html body a.ch-item:hover:not(#_){background:color-mix(in srgb,currentColor 13%,transparent)}
html body .ch-item b:not(#_){font-size:14.5px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
html body .ch-item small:not(#_){font-size:12.5px;opacity:.8}html body .ch-item small em:not(#_){font-style:normal;font-weight:600}
html body .ch-igo:not(#_){display:inline-flex;align-items:center;gap:2px;margin-top:4px;font-size:12.5px;font-weight:600}
html body .ch-igo svg:not(#_){width:14px;height:14px}
html body .ch-item.off b:not(#_){font-weight:500;font-style:italic;opacity:.8}
html body .ch-poll:not(#_){display:grid;gap:6px;margin:2px 0;min-width:min(260px,64vw);max-width:360px}
html body .ch-pq:not(#_){font-size:15px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
html body .ch-ph:not(#_){font-size:12px;opacity:.75;margin-top:-4px}
html body .ch-po:not(#_){position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 10px 13px;border:0;border-radius:10px;background:color-mix(in srgb,currentColor 7%,transparent);color:inherit;font:inherit;text-align:start;cursor:pointer;overflow:hidden;min-height:0}
html body .ch-po:hover:not(#_){background:color-mix(in srgb,currentColor 12%,transparent)}
html body .ch-po:disabled:not(#_){cursor:wait;opacity:.8}
html body .ch-pk:not(#_){width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.6px currentColor;display:grid;place-items:center;opacity:.85}
html body .ch-pk.sq:not(#_){border-radius:5px}
html body .ch-po.on .ch-pk:not(#_){background:var(--chat-mine);color:var(--chat-mine-ink);box-shadow:none;opacity:1}
html body .wk-msg.mine .ch-po.on .ch-pk:not(#_){background:var(--chat-mine-ink);color:var(--chat-mine)}
html body .ch-pk svg:not(#_){width:13px;height:13px;stroke-width:3}
html body .ch-pt:not(#_){font-size:14px;overflow-wrap:anywhere}
html body .ch-po b:not(#_){font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
html body .ch-pbar:not(#_){position:absolute;inset-inline-start:10px;bottom:5px;height:3px;width:calc((100% - 20px) * var(--p,0));border-radius:2px;background:var(--chat-mine)}
html body .wk-msg.mine .ch-pbar:not(#_){background:var(--chat-mine-ink)}
html body .ch-pf:not(#_){display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px}
html body .ch-pf small:not(#_){opacity:.8}
html body .ch-pwb:not(#_){font:inherit;font-size:12.5px;font-weight:600;border:0;border-radius:999px;padding:4px 10px;min-height:0;background:color-mix(in srgb,currentColor 12%,transparent);color:inherit;cursor:pointer}
html body .ch-pwho:not(#_){display:grid;gap:6px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,currentColor 7%,transparent);font-size:13px}
html body .ch-pwho div:not(#_){display:grid;gap:1px}html body .ch-pwho span:not(#_){opacity:.85}
/* Chat's message box on one line, as in WhatsApp (Rami, 2 November 2026): + on the left, a round field in the middle that grows as you
   write, the microphone (or the send arrow) on the right. The bar's two ends join the box's row (display: contents) */
html body .ch-box:not(#_):not(#_){display:flex;align-items:flex-end;gap:8px;border:0;border-radius:0;background:transparent;box-shadow:none;padding:0}
html body .ch-box:focus-within:not(#_):not(#_){box-shadow:none;border:0}
html body .ch-box .ch-bar:not(#_):not(#_){display:contents}
html body .ch-box .ch-add:not(#_):not(#_){order:0;flex:none;width:40px;height:40px;margin-bottom:2px}
html body .ch-box .ch-add svg:not(#_):not(#_){width:20px;height:20px}
html body .ch-box textarea.find:not(#_):not(#_):not(#_):not(#_){order:1;flex:1;min-width:0;min-height:44px;max-height:160px;padding:11px 16px!important;border-radius:22px!important;background:var(--panel,#f2f2f5)!important;color:var(--ink)!important;border:1px solid var(--line,#e3e3e8)!important;line-height:1.35;resize:none}
html body .ch-box textarea.find:focus:not(#_):not(#_):not(#_):not(#_){border-color:var(--focus,#9aa4ff)!important}
html body .ch-box .ch-barr:not(#_):not(#_){order:2;flex:none;margin-bottom:2px}
html body .ch-box .ch-send:not(#_):not(#_),html body .ch-box .ch-mic:not(#_):not(#_){width:40px;height:40px}
html body .ch-box .ch-send svg:not(#_):not(#_){width:20px;height:20px}
html body .ch-box .ch-rec:not(#_):not(#_){order:1;flex:1;min-width:0}
html body .ch-box.recording .ch-add:not(#_):not(#_),html body .ch-box.recording .ch-barr:not(#_):not(#_){display:none}

/* Home (Rami, 2 November 2026: "the things that need me today is too busy and all text"): the weather sits small beside the date, and what
   needs you today is a row of cards, one thing each, with a coloured picture for its kind; the row scrolls sideways only when it doesn't fit */
html body #homeToday .hp-hero .hp-date:not(#_):not(#_):not(#_){display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;font-size:14px;font-weight:500;color:var(--hm-ink)}
html body #homeToday .hp-hero .hp-date small:not(#_):not(#_):not(#_){text-transform:none;letter-spacing:0;font-size:14px;color:var(--hm-ink);opacity:.72;font-weight:500}
html body #homeToday .hp-hero .hp-wx:not(#_):not(#_):not(#_){display:inline-flex;align-items:center;gap:6px;background:none;padding:0;margin:0;border-radius:0;font-size:14px;color:var(--hm-ink);order:0;min-width:0;align-self:auto}
html body #homeToday .hp-hero .hp-wx[hidden]:not(#_):not(#_):not(#_){display:none}
html body #homeToday .hp-hero .hp-wx .hp-wxi:not(#_):not(#_):not(#_){width:20px;height:20px}
html body #homeToday .hp-hero .hp-wx b:not(#_):not(#_):not(#_){font-weight:700;font-size:14px}
html body #homeToday .hp-hero .hp-wx .hp-wxc:not(#_):not(#_):not(#_){opacity:.72}
html body #homeToday .hp-hero .hp-cards:not(#_):not(#_):not(#_){position:relative;min-width:0;margin-top:6px}
html body #homeToday .hp-hero .hp-crow:not(#_):not(#_):not(#_){display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px;scroll-behavior:smooth}
html body #homeToday .hp-hero .hp-crow::-webkit-scrollbar{display:none}
html body #homeToday .hp-hero .hp-card:not(#_):not(#_):not(#_){--kc:#d0d0d6;flex:0 0 226px;scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:18px;background:color-mix(in srgb,var(--hm-ink) 9%,transparent);color:var(--hm-ink);text-decoration:none;min-height:116px;box-sizing:border-box;transition:background .15s}
html body #homeToday .hp-hero .hp-card:hover:not(#_):not(#_):not(#_){background:color-mix(in srgb,var(--hm-ink) 15%,transparent)}
html body #homeToday .hp-hero .hp-ctop:not(#_):not(#_):not(#_){display:flex;align-items:center;gap:8px;font-size:12.5px;min-width:0}
html body #homeToday .hp-hero .hp-ci:not(#_):not(#_):not(#_){flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--kc);color:#17181a}
html body #homeToday .hp-hero .hp-ci svg:not(#_):not(#_):not(#_){width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html body #homeToday .hp-hero .hp-ck:not(#_):not(#_):not(#_){opacity:.72;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body #homeToday .hp-hero .hp-late:not(#_):not(#_):not(#_){margin-inline-start:auto;flex:none;font-style:normal;font-weight:700;font-size:11px;background:#ef5a4c;color:#fff;border-radius:999px;padding:2px 9px}
html body #homeToday .hp-hero .hp-card b:not(#_):not(#_):not(#_){font-size:15px;line-height:1.3;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--hm-ink)}
html body #homeToday .hp-hero .hp-card small:not(#_):not(#_):not(#_){text-transform:none;letter-spacing:0;font-size:13px;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:auto;color:var(--hm-ink)}
html body #homeToday .hp-hero .hp-card.k-design:not(#_):not(#_):not(#_){--kc:#c7b6fb}html body #homeToday .hp-hero .hp-card.k-video:not(#_):not(#_):not(#_){--kc:#fbcfa0}html body #homeToday .hp-hero .hp-card.k-job:not(#_):not(#_):not(#_){--kc:#9fdcc8}html body #homeToday .hp-hero .hp-card.k-brand:not(#_):not(#_):not(#_){--kc:#f7a8c8}
html body #homeToday .hp-hero .hp-card.k-copy:not(#_):not(#_):not(#_){--kc:#a9c9f5}html body #homeToday .hp-hero .hp-card.k-sales:not(#_):not(#_):not(#_){--kc:#e7f36a}html body #homeToday .hp-hero .hp-card.k-shoot:not(#_):not(#_):not(#_){--kc:#ffd27a}html body #homeToday .hp-hero .hp-card.k-esc:not(#_):not(#_):not(#_){--kc:#ff8a7a}html body #homeToday .hp-hero .hp-card.k-month:not(#_):not(#_):not(#_){--kc:#b8e0f9}html body #homeToday .hp-hero .hp-card.k-assign:not(#_):not(#_):not(#_){--kc:#9fdcc8}html body #homeToday .hp-hero .hp-card.k-check:not(#_):not(#_):not(#_){--kc:#b5e8a0}html body #homeToday .hp-hero .hp-card.k-timeoff:not(#_):not(#_):not(#_){--kc:#ffd27a}html body #homeToday .hp-hero .hp-card.k-client:not(#_):not(#_):not(#_){--kc:#f7a8c8}
html body #homeToday .hp-hero .hp-cmore:not(#_):not(#_):not(#_){flex-basis:132px;justify-content:center;align-items:flex-start}
html body #homeToday .hp-hero .hp-cmore b:not(#_):not(#_):not(#_){font-size:28px;font-weight:800}html body #homeToday .hp-hero .hp-cmore small:not(#_):not(#_):not(#_){margin-top:0}
html body #homeToday .hp-hero .hp-cnav:not(#_):not(#_):not(#_){position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:var(--hm-ink);color:var(--hm-hero);font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.25)}
html body #homeToday .hp-hero .hp-cnav[hidden]:not(#_):not(#_):not(#_){display:none}
html body #homeToday .hp-hero .hp-cnav.prev:not(#_):not(#_):not(#_){inset-inline-start:-12px}html body #homeToday .hp-hero .hp-cnav.next:not(#_):not(#_):not(#_){inset-inline-end:-12px}
@media (max-width:860px){html body #homeToday .hp-hero .hp-card:not(#_):not(#_):not(#_){flex-basis:200px;min-height:108px}html body #homeToday .hp-hero .hp-cnav:not(#_):not(#_):not(#_){display:none}}

/* your day's events, first among the cards (Rami, 2 November 2026): the time big, Now / In 20 min, a shoot in amber */
html body #homeToday .hp-hero .hp-card.k-meet:not(#_):not(#_):not(#_){--kc:#9fdcc8}
html body #homeToday .hp-hero .hp-ev .hp-time:not(#_):not(#_):not(#_){font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--hm-ink)}
html body #homeToday .hp-hero .hp-ev:not(#_):not(#_):not(#_){gap:6px}
html body #homeToday .hp-hero .hp-ev.live:not(#_):not(#_):not(#_){box-shadow:inset 0 0 0 2px var(--kc)}
html body #homeToday .hp-hero .hp-soon:not(#_):not(#_):not(#_){margin-inline-start:auto;flex:none;font-style:normal;font-weight:700;font-size:11px;background:var(--kc);color:#17181a;border-radius:999px;padding:2px 9px}
/* A person's Time off tab (People core step 3, 2 November 2026): the vacation tiles, the ledger's lines, Adjust, the working week */
html body .pp-off.pp-grid:not(#_){grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
html body .pp-tbal.tm-bal:not(#_){grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:10px}
html body .pp-tbal.tm-bal div:first-child:not(#_){grid-column:auto}
html body .pp-off .ov-h small:not(#_),html body .pp-rate:not(#_){font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
html body .pp-off .ov-h:not(#_){display:flex;align-items:center;gap:10px;flex-wrap:wrap}
html body .pp-yr:not(#_){margin-inline-start:auto;width:auto;min-width:90px}
html body .pp-led:not(#_){display:flex;flex-direction:column}
html body .pp-lr:not(#_){display:grid;grid-template-columns:130px minmax(0,1fr) 70px;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--border)}
html body .pp-ld:not(#_){color:var(--ink-muted);font:400 13px/18px var(--font-sans)}
html body .pp-lt:not(#_){display:flex;flex-direction:column;gap:1px;min-width:0;font:400 14px/20px var(--font-sans);color:var(--ink);overflow-wrap:anywhere}
html body .pp-lt small:not(#_){color:var(--ink-muted);font-size:12px;line-height:16px}
html body .pp-ln:not(#_){text-align:end;font:600 15px/20px var(--font-sans);font-variant-numeric:tabular-nums;color:var(--ink)}
html body .pp-ln.neg:not(#_){color:var(--ink-muted)}
html body .pp-ltot:not(#_){border-bottom:0;border-top:2px solid var(--ink);margin-top:-1px}
html body .pp-ltot .pp-ln:not(#_){font-size:18px}
html body .pp-adj:not(#_){margin-top:16px;padding:14px;border-radius:14px;background:var(--surface-2,var(--bg))}
html body .pp-adj>b small:not(#_){font-weight:400;color:var(--ink-muted);font-size:12px}
html body .pp-adjr:not(#_){display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:8px}
html body .pp-adjr .fld:not(#_){display:flex;flex-direction:column;gap:4px;min-width:120px}
html body .pp-adjr .pp-adjw:not(#_){flex:1;min-width:220px}
html body .pp-off .tm-hours:not(#_){margin:10px 0}
@media (max-width:860px){html body .pp-tbal.tm-bal:not(#_){grid-template-columns:repeat(2,minmax(0,1fr))}html body .pp-tbal.tm-bal div:first-child:not(#_){grid-column:1/-1}html body .pp-lr:not(#_){grid-template-columns:minmax(0,1fr) 60px;gap:2px 10px}html body .pp-ld:not(#_){grid-column:1/-1}html body .pp-adjr .fld:not(#_),html body .pp-adjr .pp-adjw:not(#_){min-width:0;flex:1 1 100%}}
/* Admin › Locations & time off: each location's country and week, the holidays' Where, the two ladders */
html body .tm-ofc:not(#_){width:auto;max-width:130px}
html body .tm-wk:not(#_){margin-top:8px}html body .tm-wk summary:not(#_){cursor:pointer;display:flex;gap:8px;align-items:baseline}html body .tm-wk summary small:not(#_){color:var(--ink-muted)}
html body .tm-hol:not(#_){grid-template-columns:150px minmax(0,1fr) 170px 36px}
html body .tm-hols:not(#_){max-width:680px}
html body .tm-acc:not(#_){max-width:680px;margin-bottom:12px}
html body .tm-lads:not(#_){display:flex;flex-wrap:wrap;gap:24px;margin-bottom:8px}
html body .tm-lad:not(#_){display:flex;flex-direction:column;gap:6px;min-width:260px}
html body .tm-ladh:not(#_),html body .tm-ladr:not(#_){display:grid;grid-template-columns:110px 110px 36px;gap:6px;align-items:center}
html body .tm-ladh span:not(#_){font-size:12px;color:var(--ink-muted)}
html body .tm-ladr input[readonly]:not(#_){opacity:.7}
@media (max-width:640px){html body .tm-hol:not(#_){grid-template-columns:minmax(0,1fr) 36px}html body .tm-hol>input[data-holn]:not(#_),html body .tm-hol>select:not(#_){grid-column:1/-1}html body .tm-offh:not(#_){flex-wrap:wrap}html body .tm-hours label:not(#_){grid-template-columns:20px 44px 1fr 1fr}html body .tm-hours label>span:not(#_){overflow:hidden;text-overflow:ellipsis}}
html body .pp-askrow:not(#_){margin-top:12px}
html body .pp-sick .tm-sec:first-child:not(#_){margin-top:0}
html body :is(.tm-ladr,.tm-hol,.pp-adjr) :is(input,select):not([type=checkbox]):not(#_),html body select.tm-ofc:not(#_){min-width:0;width:100%;box-sizing:border-box}
html body select.tm-ofc:not(#_){width:130px}
html body .tm-set .tm-row2 input[name=carryMax]:not(#_){max-width:140px;min-width:0}
html body .pp-ownwk:not(#_){align-items:flex-start!important}html body .pp-ownwk>span:not(#_){display:flex;flex-direction:column;gap:2px}html body .pp-ownwk small:not(#_){color:var(--ink-muted);font-size:12px}
html body .pp-off form[data-ppwk] .wk-do:not(#_){margin-top:10px}
/* People core steps 4 and 5 (2 November 2026): a person's Documents, Pay, Notes and Activity tabs, the ⋯ menu, People › HR and the
   Org chart */
html body .pp-more:not(#_){position:relative}html body .pp-more>summary:not(#_){list-style:none;min-width:36px;justify-content:center;font-weight:700;letter-spacing:1px}
html body .pp-more>summary::-webkit-details-marker{display:none}
html body .pp-mpop:not(#_){display:flex;flex-direction:column;min-width:230px;padding:6px;border-radius:12px;background:var(--surface);box-shadow:0 8px 28px rgba(0,0,0,.14)}
html body .pp-mpop>:is(a,button):not(#_){display:block;width:100%;text-align:start;padding:9px 12px;border:0;border-radius:8px;background:none;color:var(--ink);font:500 14px/20px var(--font-sans);text-decoration:none;cursor:pointer;min-height:0}
html body .pp-mpop>:is(a,button):hover:not(#_){background:var(--surface-sunken)}
html body .hr-docs:not(#_),html body .hr-notes:not(#_){display:flex;flex-direction:column}
html body .hr-doc:not(#_){display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
html body .hr-doc:last-child:not(#_){border-bottom:0}
html body .hr-doc>a:not(#_),html body .hr-dn:not(#_){display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
html body .hr-dn>a:not(#_),html body .hr-doc>a:not(#_){color:var(--ink);text-decoration:none}
html body .hr-doc small:not(#_){color:var(--ink-muted);font-size:12px}
html body .hr-dn .bk-chip:not(#_){align-self:flex-start}
html body .hr-dd:not(#_){display:flex;gap:6px;align-items:center;flex-wrap:wrap}
html body .hr-dd select:not(#_){width:auto;min-width:120px}html body .hr-dd input[type=date]:not(#_){width:auto;min-width:140px}
html body .hr-note:not(#_){padding:10px 0;border-bottom:1px solid var(--border)}html body .hr-note:last-child:not(#_){border-bottom:0}
html body .hr-note p:not(#_){margin:0 0 4px;white-space:pre-wrap;font:400 14px/20px var(--font-sans);color:var(--ink)}
html body .hr-note small:not(#_){display:flex;gap:10px;align-items:center;color:var(--ink-muted);font-size:12px}
html body form[data-hrnote] textarea:not(#_){width:100%;box-sizing:border-box;margin-bottom:8px}
html body form[data-hrnote]:not(#_){margin-bottom:14px}
html body .pp-hr.pp-grid:not(#_){grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
html body .hr-pay.tm-bal b:not(#_){font-size:20px}
html body .hr-view .hr-tiles:not(#_){margin:12px 0}
html body .hr-acc:not(#_){display:flex;flex-direction:column;gap:6px;padding:14px 16px;margin:0 0 12px}html body .hr-acc small:not(#_){color:var(--ink-muted);font-size:12px}
html body .hr-wrap:not(#_){padding:0;overflow:auto}
html body .hr-fl:not(#_){display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
html body .pp-act .pp-lr:not(#_){grid-template-columns:150px minmax(0,1fr)}
html body .oc:not(#_){display:flex;flex-direction:column;gap:22px;margin-top:4px}
html body .oc-dept:not(#_){display:flex;flex-direction:column;gap:12px}
html body .oc-dh:not(#_){display:flex;align-items:center;gap:12px;flex-wrap:wrap}
html body .oc-dh>small:not(#_){color:var(--ink-muted);font:500 12px/16px var(--font-sans)}
html body .oc-dh>b:not(#_){font:700 20px/26px var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
html body .oc-dh>.sub:not(#_){margin:0}
html body .oc-teams:not(#_){display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;align-items:start}
html body .oc-team:not(#_){display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--border)}
html body .oc-team h4:not(#_){margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:600 15px/20px var(--font-sans);color:var(--ink)}
html body .oc-team h4 small:not(#_){color:var(--ink-muted);font:400 12px/16px var(--font-sans)}
html body .oc-chain:not(#_),html body .oc-mem:not(#_){display:flex;flex-direction:column;gap:4px}
html body .oc-mem:not(#_){padding-top:8px;border-top:1px solid var(--border)}
html body .oc-p:not(#_){display:flex;align-items:center;gap:10px;padding:5px 6px;border-radius:10px;text-decoration:none;color:var(--ink);min-width:0}
html body .oc-p:hover:not(#_){background:var(--surface-sunken)}
html body .oc-p>span:last-child:not(#_){display:flex;flex-direction:column;min-width:0}
html body .oc-p b:not(#_){font:500 14px/18px var(--font-sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .oc-p small:not(#_){color:var(--ink-muted);font-size:12px;line-height:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .oc-r b:not(#_){font-weight:600}
html body .oc-dh .oc-p:not(#_){padding:4px 10px 4px 4px;background:var(--surface);border:1px solid var(--border);border-radius:999px}
html body .oc-foot:not(#_){margin:0}
@media (max-width:640px){html body .oc-teams:not(#_){grid-template-columns:minmax(0,1fr)}html body .pp-act .pp-lr:not(#_){grid-template-columns:minmax(0,1fr)}html body .hr-dd:not(#_){width:100%}html body .pp-mpop:not(#_){min-width:210px}}
/* Mute a chat (public/chatmute.js, 3 November 2026): its menu under the header's bell or a row's ⋯, and the small muted icon on a chat */
html body .cm-menu:not(#_){position:fixed;z-index:1000;display:grid;min-width:210px;max-width:calc(100vw - 16px);padding:6px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow-menu),0 0 0 1px var(--border)}
html body .cm-menu button:not(#_){font:inherit;font-size:14px;text-align:start;border:0;background:none;color:var(--ink);padding:10px 12px;border-radius:9px;cursor:pointer}
html body .cm-menu button:hover:not(#_),html body .cm-menu button:focus-visible:not(#_){background:var(--panel)}
html body .cm-said:not(#_){display:block;padding:6px 12px 4px;font-size:12px;color:var(--muted)}
html body .cm-ic:not(#_){display:inline-flex;align-items:center;color:var(--muted);flex:none}
html body .cm-ic svg:not(#_),html body .cm-b svg:not(#_){width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html body .cm-b svg:not(#_){width:18px;height:18px}
html body #p-ch .cx-tool.cm-b.on:not(#_):not(#_),html body .cx-tool.cm-b.on:not(#_){background:none;color:var(--ink-muted)}

/* My work and Production: the clients On hold, folded and quiet (Rami, 3 November 2026) */
.mw-held{margin:16px 0 0;padding:10px 14px;border-radius:12px;background:var(--surface-sunken);color:var(--muted)}
.mw-held>summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--ink)}
.mw-held .sub{margin:8px 0;font-size:12px}
.mw-heldc{margin:8px 0 0;font-size:13px}.mw-heldc ul{margin:4px 0 0;padding-inline-start:18px}.mw-heldc a{color:inherit}