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

:root{
  --font-sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Cadence colour, light */
  --c-bg:#f6f7f8;--surface:#ffffff;--surface-sunken:#f1f2f4;--surface-hover:#eef0f2;--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:#111214;--side-ink:#f1f2f3;--side-ink-muted:#a3a8b0;--side-active:#26282c;--side-border:#2e3136;
  --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);
}
@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;
  --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;
  --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(#_){
  --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 pastel 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(--primary)!important;color:var(--on-primary)!important;border-color:transparent!important}
html body :is(.btn-s.pri,.btn.pri,.btn-pri,.bk-new,.wk-btn.pri,button.pri):not(#_):hover{background:var(--primary-hover)!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,.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,.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,.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}
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)}
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) .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) .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 .wk-msg.mine:not(#_){background:var(--primary-soft)!important;color:var(--ink)!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}
}
@media (min-width:701px) and (max-width:860px){
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}
}
/* a board's lines on a phone are cards: statuses go back to pills */
@media (max-width:700px){
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:700px){
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}
}