/* The frame around every page, and the colour themes (Rami, 18 October 2026). Loaded after cadence.css.
   On a computer: the menu has no headings, its pages in bold and their sub-pages lighter; Chat and Settings at the bottom left; along
   the top, the search (Quick actions, ⌘K / Ctrl K), Escalate, the bell and your picture, which opens your menu (your profile, Dark mode,
   Colour, Sign out); Kasper at the bottom right; Feedback a thin tab on the right edge that slides out on hover and opens on a click.
   A phone keeps its own bar and More page.
   Colour themes: "Circle" is the Hub's own look, light and dark. The others re-colour the same parts (the page, cards, the menu,
   buttons, Home's header) in light and in dark: Stormy morning, Lush forest, Burnt sienna, Freshly squeezed, Electric kiwi. */

:root{--hm-ink:#fff;--nav-on-bg:var(--side-ink);--nav-on-ink:var(--side-bg)}

/* ---------- the menu ---------- */
@media (min-width:861px){
  html body #app>aside .nav-sec:not(#_):not(#_){display:none!important}
  /* also when the menu is folded (Rami, 18 October 2026: "collapsed changes back to its old order"): the folded menu's own rules are
     stronger, so these are too; folded and open show the same items in the same order */
  html body #app>aside .nav-qk:not(#_):not(#_):not(#_):not(#_):not(#_),html body #app>aside .side-theme:not(#_):not(#_):not(#_):not(#_):not(#_),html body #app>aside>.me:not(#_):not(#_):not(#_):not(#_):not(#_){display:none!important}
  html body #app>aside #navCh:not(#_):not(#_):not(#_):not(#_),html body #app>aside #navQs:not(#_):not(#_):not(#_):not(#_){display:none!important} /* Chat is at the bottom; Admin is in Settings */
  html body #app>aside :is(.nav a,.nav-foot a,.nav-foot button):not(#_):not(#_):not(#_){font-weight:700!important;color:var(--side-ink)!important}
  html:not(.nav-mini) body #app>aside :is(.nav-sub a,.nav a.nav-subl):not(#_):not(#_):not(#_){font-weight:400!important;color:var(--side-ink-muted)!important;font-size:13px!important}
  html:not(.nav-mini) body #app>aside .nav a.nav-subl:not(#_):not(#_){padding-inline-start:38px!important;min-height:28px}
  html:not(.nav-mini) body #app>aside .nav a.nav-subl svg:not(#_){display:none}
  html body #app>aside :is(.nav a,.nav-foot a).on:not(#_):not(#_):not(#_){background:var(--nav-on-bg)!important;color:var(--nav-on-ink)!important}
  html body #app>aside :is(.nav a,.nav-foot a).on:not(#_)::before{display:none!important}
  html body #app>aside :is(.nav-sub a,.nav a.nav-subl).on:not(#_):not(#_):not(#_){background:var(--side-active)!important;color:var(--side-ink)!important;font-weight:600!important}
  html body #app>aside .nav-foot:not(#_){margin-top:auto;padding-top:10px;border-top:1px solid var(--side-border);display:grid;gap:2px;position:relative}
  html body #app>aside .nav-foot :is(a,button):not(#_){display:flex;align-items:center;gap:10px;width:100%;min-height:var(--row-height);padding:0 10px;border:0;border-radius:var(--radius-md);background:none;font:inherit;font-size:14px;text-decoration:none;cursor:pointer;text-align:start}
  html body #app>aside .nav-foot :is(a,button):hover:not(.on):not(#_){background:var(--side-active)}
  html body #app>aside .nav-foot svg:not(#_){width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
  html body #app>aside .nav-foot a[hidden]:not(#_){display:none}
  html body #app>aside .nav-foot #cChat2:not(#_){margin-inline-start:auto}
  html.nav-mini body #app>aside .nav-foot :is(a,button):not(#_){font-size:0;justify-content:center;padding:0}
  html.nav-mini body #app>aside .nav-foot #cChat2:not(#_){display:none}
  html.nav-mini body #app>aside #nav a[hidden]:not(#_):not(#_){display:none!important} /* a page this person can't open stays hidden when the menu is folded (the Language check, 27 October 2026) */
  /* the menu's groups (Rami, 30 October 2026): a thin line between them, no headings; More folds Knowledge, Circle Town and the rest */
  html body #app>aside .nav-ln:not(#_){display:block;height:1px;background:var(--side-border);margin:8px 10px;flex:none}
  html body #app>aside .nav-ln[hidden]:not(#_){display:none}
  html body #app>aside #navBdIn:not(#_):not(#_){margin:0;padding:0;border:0;gap:2px}
  html body #app>aside .nav-more:not(#_){display:flex;align-items:center;gap:8px;width:100%;min-height:var(--row-height);margin-top:10px;padding:0 10px;border:0;border-radius:var(--radius-md);background:none;font:600 13px var(--font-sans);color:var(--side-ink-muted);cursor:pointer}
  html body #app>aside .nav-more:hover:not(#_){background:var(--side-active);color:var(--side-ink)}
  html body #app>aside .nav-more .nm-ch:not(#_){display:block;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
  html body #app>aside .nav-more.open .nm-ch:not(#_){transform:rotate(90deg)}
  html body #app>aside .nav-more[hidden]:not(#_){display:none}
  html body #app>aside .nav-ln:not([hidden])+.nav-more:not(#_):not(#_){margin-top:0} /* the thin line above More (Rami, 31 October 2026) does the spacing */
  html body #app>aside #navMoreIn:not(#_){display:flex;flex-direction:column;gap:2px}
  html body #app>aside #navMoreIn[hidden]:not(#_){display:none}
  html.nav-mini body #app>aside .nav-more:not(#_){font-size:0;justify-content:center;padding:0}
  html.nav-mini body #app>aside .nav-ln:not(#_){margin:6px 14px}
}
@media (max-width:860px){html body .nav-foot:not(#_),html body .tb-me:not(#_),html body .tb-menu:not(#_){display:none!important}}
/* the Settings menu, above the button */
html body .nf-menu:not(#_){position:absolute;inset-inline-start:0;bottom:calc(100% + 6px);min-width:210px;padding:6px;border-radius:12px;background:var(--surface);color:var(--c-ink);box-shadow:var(--shadow-menu);z-index:60;display:grid;gap:2px}
html body .nf-menu[hidden]:not(#_){display:none}
html body #app>aside .nf-menu a:not(#_):not(#_):not(#_){color:var(--c-ink)!important;font-weight:500!important;min-height:34px;padding:0 10px;border-radius:8px}
html body #app>aside .nf-menu a:hover:not(#_):not(#_){background:var(--surface-hover)}
html body .nf-menu small:not(#_){display:block;color:var(--ink-subtle);font-size:12px}
html body .nf-menu small.nf-why:not(#_){color:var(--bad);font-weight:600} /* why Settings has a red dot (public/app.js admFlag) */

/* ---------- along the top ---------- */
@media (min-width:861px){
  html body .tb-find:not(#_){display:flex;align-items:center;gap:10px;width:min(520px,52vw);height:40px;padding:0 8px 0 14px;border:0;border-radius:999px;background:var(--surface);color:var(--ink-subtle);font:500 14px var(--font-sans);cursor:pointer;box-shadow:var(--shadow-raised);text-align:start}
  html body .tb-find:hover:not(#_){color:var(--c-ink)}
  html body .tb-find svg:not(#_){width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;flex:none}
  html body .tb-find span:not(#_){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html body .tb-find kbd:not(#_){font:600 11px var(--font-sans);padding:3px 7px;border-radius:6px;background:var(--primary-soft);color:var(--c-ink)}
  html body .tb-me:not(#_){position:fixed;top:10px;inset-inline-end:16px;z-index:42;width:38px;height:38px;padding:0;border:0;border-radius:999px;background:none;cursor:pointer}
  html body .tb-me .av:not(#_){width:38px;height:38px;border-radius:999px;display:grid;place-items:center;overflow:hidden;background:var(--primary);color:var(--on-primary);font:700 15px var(--font-sans)}
  html body .tb-me .av img:not(#_){width:100%;height:100%;object-fit:cover}
  html body .tb-me:focus-visible:not(#_){outline:2px solid var(--focus);outline-offset:2px}
  html body .tb-bell:not(#_):not(#_){inset-inline-end:62px}
  /* Escalate: a flag beside the chat icon (public/chatdock.js), which sits beside the bell */
  html body .esc-fab:not(#_):not(#_):not(#_){position:fixed;top:10px;bottom:auto;inset-inline-end:150px;z-index:41;width:38px;height:38px;padding:0;justify-content:center;border:0!important;border-radius:999px;background:none;box-shadow:none!important;color:var(--c-ink)}
  html body .esc-fab span:not(#_):not(#_){display:none}
  html body .esc-fab svg:not(#_):not(#_){width:20px;height:20px;stroke:#d64545}
  html body .esc-fab:hover:not(#_):not(#_){background:var(--side-active)}html body .esc-fab:hover svg:not(#_):not(#_){stroke:#d64545}
  /* Kasper at the bottom right */
  html body .pal:not(#_):not(#_){top:auto;bottom:22px;right:22px;flex-direction:row;align-items:center}
  html body .pal:not(#_):not(#_) :is(.pal-btn,.buddy){width:54px!important;height:54px!important}
  html body .pal:not(#_):not(#_) .pal-say{margin:0 10px 0 0;align-self:center}
  /* Feedback: a thin tab on the right edge; it slides out a little on hover, and a click opens the form */
  html body .fb-fab:not(#_):not(#_):not(#_){position:fixed;top:50%;bottom:auto;inset-inline-end:0;transform:translateY(-50%);z-index:30;width:6px;height:104px;padding:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:0!important;border-radius:9px 0 0 9px;background:var(--primary);color:var(--on-primary);box-shadow:none!important;transition:width var(--dur-base) var(--ease-out)}
  html body .fb-fab svg:not(#_):not(#_):not(#_){display:none}
  html body .fb-fab span:not(#_):not(#_):not(#_){display:block;writing-mode:vertical-rl;transform:rotate(180deg);font:700 12px var(--font-sans);letter-spacing:.04em;white-space:nowrap;opacity:0;transition:opacity var(--dur-fast)}
  html body .fb-fab:is(:hover,:focus-visible):not(#_):not(#_):not(#_){width:30px;box-shadow:var(--shadow-menu)!important}
  html body .fb-fab:is(:hover,:focus-visible) span:not(#_):not(#_):not(#_){opacity:1}
}
@media (min-width:861px) and (prefers-reduced-motion:reduce){html body .fb-fab:not(#_):not(#_):not(#_){transition:none}}
@media (min-width:861px){[dir="rtl"] .fb-fab:not(#_):not(#_):not(#_){border-radius:0 9px 9px 0}}
/* your menu, under your picture */
html body .tb-menu:not(#_){position:fixed;top:56px;inset-inline-end:14px;z-index:60;width:260px;padding:8px;border-radius:16px;background:var(--surface);color:var(--c-ink);box-shadow:var(--shadow-menu);display:grid;gap:2px}
html body .tb-menu[hidden]:not(#_){display:none}
html body .tb-menu .tm-who:not(#_){padding:8px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:4px}
html body .tb-menu .tm-who b:not(#_){display:block;font-size:14px}html body .tb-menu .tm-who small:not(#_){color:var(--ink-subtle);font-size:12px}
html body .tb-menu :is(a,button.tm-row):not(#_){display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px;padding:0 10px;border:0;border-radius:10px;background:none;color:var(--c-ink);font:500 14px var(--font-sans);text-decoration:none;cursor:pointer;width:100%;text-align:start}
html body .tb-menu :is(a,button.tm-row):hover:not(#_){background:var(--surface-hover)}
html body .tb-menu .tm-k:not(#_){padding:8px 10px 4px;font:600 12px var(--font-sans);color:var(--ink-subtle)}
html body .tb-menu hr:not(#_){border:0;border-top:1px solid var(--border);margin:4px 0}
html body .tm-sw:not(#_){width:34px;height:20px;border-radius:20px;background:var(--surface-sunken);position:relative;flex:none;box-shadow:inset 0 0 0 1px var(--border)}
html body .tm-sw:not(#_)::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:14px;height:14px;border-radius:50%;background:var(--ink-subtle);transition:inset-inline-start var(--dur-base) var(--ease-out)}
:root[data-theme="dark"] .tm-sw:not(#_)::after{inset-inline-start:17px;background:var(--primary)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tm-sw:not(#_)::after{inset-inline-start:17px;background:var(--primary)}}

/* ---------- the colour picker (your menu, Settings, a phone's More page) ---------- */
html body .pal-pick:not(#_){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:2px 4px 6px}
html body .pal-pick button:not(#_){display:grid;gap:4px;padding:6px;border:0;border-radius:10px;background:none;color:var(--c-ink);cursor:pointer;text-align:start;outline:2px solid transparent;outline-offset:-2px}
html body .pal-pick button:hover:not(#_){background:var(--surface-hover)}
html body .pal-pick button[aria-checked="true"]:not(#_){outline-color:var(--c-ink)}
html body .pal-pick .pp-sw:not(#_){display:flex;height:22px;border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
html body .pal-pick .pp-sw i:not(#_){flex:1}
html body .pal-pick small:not(#_){font:500 11.5px/1.2 var(--font-sans);color:var(--ink-muted)}
html body .me-set .pal-pick:not(#_){grid-template-columns:repeat(6,minmax(84px,1fr));padding:0;flex:1}
@media (max-width:860px){html body .me-set .pal-pick:not(#_),html body .mo-g .pal-pick:not(#_){grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- the colour themes ----------
   Each sets the page, cards, lines, the menu, buttons and Home's header, in light; then the same in dark. */
:root[data-palette="storm"]{--c-bg:#eaf1f8;--surface:#fbfdff;--surface-sunken:#dfe9f3;--surface-hover:#d7e3ef;--border:#c3d2e1;--border-strong:#6a89a7;--side-bg:#e1eaf4;--side-active:rgba(56,73,89,.09);--side-border:#ccdae8;--primary:#88bdf2;--primary-hover:#6fafee;--primary-soft:#d9eafc;--focus:#3e6fa3;--row-alt:#f3f7fb;--hm-hero:linear-gradient(135deg,#384959 0%,#6a89a7 120%);--hm-k1:#bdddfc;--hm-k2:#88bdf2;--hm-k3:#d6e6f5}
:root[data-palette="forest"]{--c-bg:#ecf5ee;--surface:#fcfefc;--surface-sunken:#dfeee3;--surface-hover:#d6e9dc;--border:#c1dac8;--border-strong:#4f8a60;--side-bg:#e2f0e6;--side-active:rgba(37,61,44,.09);--side-border:#cce2d2;--primary:#68ba7f;--primary-hover:#55ad6e;--primary-soft:#d3f5dd;--focus:#2e6f40;--row-alt:#f4faf5;--hm-hero:linear-gradient(135deg,#253d2c 0%,#2e6f40 120%);--hm-k1:#cfffdc;--hm-k2:#68ba7f;--hm-k3:#b6e3c3}
:root[data-palette="sienna"]{--c-bg:#f5f2e3;--surface:#fffdf5;--surface-sunken:#ede7d0;--surface-hover:#e8e0c5;--border:#dcd1b2;--border-strong:#a0522d;--side-bg:#efe9d3;--side-active:rgba(160,82,45,.09);--side-border:#e0d6b8;--primary:#f4a460;--primary-hover:#f09245;--primary-soft:#fbe4cf;--focus:#a0522d;--row-alt:#fbf9ee;--hm-hero:linear-gradient(135deg,#a0522d 0%,#e35336 120%);--hm-k1:#f5f5dc;--hm-k2:#f4a460;--hm-k3:#f6c7b8}
:root[data-palette="squeeze"]{--c-bg:#fbf6ec;--surface:#fffefb;--surface-sunken:#f4ead4;--surface-hover:#f0e3c6;--border:#e6d5b0;--border-strong:#b8862a;--side-bg:#f6eedd;--side-active:rgba(255,121,0,.1);--side-border:#eadcbd;--primary:#ffbf00;--primary-hover:#f2b300;--primary-soft:#fff0c2;--focus:#c25a00;--row-alt:#fdfaf2;--hm-hero:radial-gradient(120% 140% at 0% 0%,#ffe642 0%,#ffbf00 45%,#ff7900 110%);--hm-ink:#231a0e;--hm-k1:#fff6c9;--hm-k2:#f2cf7e;--hm-k3:#ffe642}
:root[data-palette="kiwi"]{--c-bg:#f3f4ec;--surface:#ffffff;--surface-sunken:#e9ebdd;--surface-hover:#e2e5d0;--border:#d1d5bc;--border-strong:#55601a;--side-bg:#0b0b0b;--side-ink:#f3f4ec;--side-ink-muted:#b4b8a4;--side-active:rgba(204,255,0,.14);--side-border:#222;--primary:#ccff00;--primary-hover:#b9ec00;--primary-soft:#f0ffbd;--focus:#4d5f00;--row-alt:#fafbf4;--hm-hero:#000;--hm-k1:#ccff00;--hm-k2:#ffff00;--hm-k3:#dfff00;--nav-on-bg:#ccff00;--nav-on-ink:#000}
@media (prefers-color-scheme:dark){
  :root[data-palette="storm"]:not([data-theme="light"]){--c-bg:#121920;--surface:#19222b;--surface-sunken:#141c24;--surface-hover:#22303d;--border:#31404e;--border-strong:#7d98b3;--side-bg:#0d1319;--side-active:#22303d;--side-border:#26333f;--primary:#88bdf2;--primary-hover:#a4cdf6;--primary-soft:#1b3047;--focus:#88bdf2;--row-alt:#1d2731;--hm-hero:linear-gradient(135deg,#2a3846 0%,#3f5870 120%);--hm-k1:#bdddfc;--hm-k2:#88bdf2;--hm-k3:#6a89a7}
  :root[data-palette="forest"]:not([data-theme="light"]){--c-bg:#0f1712;--surface:#16211a;--surface-sunken:#121b15;--surface-hover:#1f2e24;--border:#2c3f32;--border-strong:#68ba7f;--side-bg:#0a110c;--side-active:#1d2c21;--side-border:#233529;--primary:#68ba7f;--primary-hover:#83c996;--primary-soft:#173020;--focus:#68ba7f;--row-alt:#1a261e;--hm-hero:linear-gradient(135deg,#1c3022 0%,#2e6f40 140%);--hm-k1:#cfffdc;--hm-k2:#68ba7f;--hm-k3:#9ad3aa}
  :root[data-palette="sienna"]:not([data-theme="light"]){--c-bg:#19130f;--surface:#221a15;--surface-sunken:#1c1511;--surface-hover:#2e231c;--border:#45352b;--border-strong:#f4a460;--side-bg:#120d0a;--side-active:#2c2019;--side-border:#382a21;--primary:#f4a460;--primary-hover:#f6b47a;--primary-soft:#3a2516;--focus:#f4a460;--row-alt:#271e18;--hm-hero:linear-gradient(135deg,#5e2f1a 0%,#a0522d 130%);--hm-k1:#f5f5dc;--hm-k2:#f4a460;--hm-k3:#e9927d}
  :root[data-palette="squeeze"]:not([data-theme="light"]){--c-bg:#16120a;--surface:#1f190e;--surface-sunken:#1a140b;--surface-hover:#2b2213;--border:#43361e;--border-strong:#ffbf00;--side-bg:#100c06;--side-active:#2a2012;--side-border:#362a16;--primary:#ffbf00;--primary-hover:#ffcd33;--primary-soft:#3a2c07;--focus:#ffbf00;--row-alt:#241d11;--hm-hero:linear-gradient(135deg,#ffbf00 0%,#ff7900 110%);--hm-ink:#1c1306;--hm-k1:#ffe642;--hm-k2:#f2cf7e;--hm-k3:#ffbf00}
  :root[data-palette="kiwi"]:not([data-theme="light"]){--c-bg:#0a0a0a;--surface:#141414;--surface-sunken:#0f0f0f;--surface-hover:#1f1f1f;--border:#2e2e2e;--border-strong:#ccff00;--side-bg:#000;--side-ink:#f3f4ec;--side-ink-muted:#a3a795;--side-active:#1b2103;--side-border:#1f1f1f;--primary:#ccff00;--primary-hover:#dbff40;--primary-soft:#232b00;--focus:#ccff00;--row-alt:#181818;--hm-hero:linear-gradient(135deg,#1e2600 0%,#000 80%);--hm-k1:#ccff00;--hm-k2:#ffff00;--hm-k3:#dfff00;--nav-on-bg:#ccff00;--nav-on-ink:#000}
}
:root[data-palette="storm"][data-theme="dark"]{--c-bg:#121920;--surface:#19222b;--surface-sunken:#141c24;--surface-hover:#22303d;--border:#31404e;--border-strong:#7d98b3;--side-bg:#0d1319;--side-active:#22303d;--side-border:#26333f;--primary:#88bdf2;--primary-hover:#a4cdf6;--primary-soft:#1b3047;--focus:#88bdf2;--row-alt:#1d2731;--hm-hero:linear-gradient(135deg,#2a3846 0%,#3f5870 120%);--hm-k1:#bdddfc;--hm-k2:#88bdf2;--hm-k3:#6a89a7}
:root[data-palette="forest"][data-theme="dark"]{--c-bg:#0f1712;--surface:#16211a;--surface-sunken:#121b15;--surface-hover:#1f2e24;--border:#2c3f32;--border-strong:#68ba7f;--side-bg:#0a110c;--side-active:#1d2c21;--side-border:#233529;--primary:#68ba7f;--primary-hover:#83c996;--primary-soft:#173020;--focus:#68ba7f;--row-alt:#1a261e;--hm-hero:linear-gradient(135deg,#1c3022 0%,#2e6f40 140%);--hm-k1:#cfffdc;--hm-k2:#68ba7f;--hm-k3:#9ad3aa}
:root[data-palette="sienna"][data-theme="dark"]{--c-bg:#19130f;--surface:#221a15;--surface-sunken:#1c1511;--surface-hover:#2e231c;--border:#45352b;--border-strong:#f4a460;--side-bg:#120d0a;--side-active:#2c2019;--side-border:#382a21;--primary:#f4a460;--primary-hover:#f6b47a;--primary-soft:#3a2516;--focus:#f4a460;--row-alt:#271e18;--hm-hero:linear-gradient(135deg,#5e2f1a 0%,#a0522d 130%);--hm-k1:#f5f5dc;--hm-k2:#f4a460;--hm-k3:#e9927d}
:root[data-palette="squeeze"][data-theme="dark"]{--c-bg:#16120a;--surface:#1f190e;--surface-sunken:#1a140b;--surface-hover:#2b2213;--border:#43361e;--border-strong:#ffbf00;--side-bg:#100c06;--side-active:#2a2012;--side-border:#362a16;--primary:#ffbf00;--primary-hover:#ffcd33;--primary-soft:#3a2c07;--focus:#ffbf00;--row-alt:#241d11;--hm-hero:linear-gradient(135deg,#ffbf00 0%,#ff7900 110%);--hm-ink:#1c1306;--hm-k1:#ffe642;--hm-k2:#f2cf7e;--hm-k3:#ffbf00}
:root[data-palette="kiwi"][data-theme="dark"]{--c-bg:#0a0a0a;--surface:#141414;--surface-sunken:#0f0f0f;--surface-hover:#1f1f1f;--border:#2e2e2e;--border-strong:#ccff00;--side-bg:#000;--side-ink:#f3f4ec;--side-ink-muted:#a3a795;--side-active:#1b2103;--side-border:#1f1f1f;--primary:#ccff00;--primary-hover:#dbff40;--primary-soft:#232b00;--focus:#ccff00;--row-alt:#181818;--hm-hero:linear-gradient(135deg,#1e2600 0%,#000 80%);--hm-k1:#ccff00;--hm-k2:#ffff00;--hm-k3:#dfff00;--nav-on-bg:#ccff00;--nav-on-ink:#000}
/* an item page's header is one plain line on the page since 30 October 2026 (public/cadence.css): it no longer takes Home's colour */

/* ---------- Home (app.js briefHtml, 18 October 2026): the header in the theme's colour with three counts, then Your priorities ---------- */
html body .hm2 .hm-hero:not(#_){background:var(--hm-hero);color:var(--hm-ink);border-radius:26px;padding:30px 30px 30px 36px;grid-template-columns:minmax(260px,1.3fr) minmax(0,1fr);position:relative;overflow:hidden}
html body .hm2 .hm-hero:not(#_)::after{content:"";position:absolute;inset-inline-end:-90px;top:-110px;width:320px;height:320px;border-radius:50%;background:currentColor;opacity:.06;pointer-events:none}
html body .hm2 .hm-hi:not(#_){position:relative;z-index:1}
html body .hm2 .hm-hi small:not(#_){color:var(--hm-ink);opacity:.7;font-weight:600}
html body .hm2 .hm-hi h2:not(#_){color:var(--hm-ink);font-size:40px;letter-spacing:-.03em;font-weight:800}
html body .hm2 .hm-ctx:not(#_){color:var(--hm-ink);opacity:.85;max-width:460px}
html body .hm-stats:not(#_){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-self:end;position:relative;z-index:1}
html body .hm-st:not(#_){display:grid;gap:2px;padding:14px 16px;border-radius:18px;background:color-mix(in srgb,var(--hm-ink) 12%,transparent);color:var(--hm-ink);text-decoration:none;transition:transform var(--dur-fast) var(--ease-out)}
html body .hm-st:hover:not(#_){transform:translateY(-2px)}
html body .hm-st b:not(#_){font-size:30px;line-height:1.05;letter-spacing:-.02em}
html body .hm-st span:not(#_){font-size:12.5px;font-weight:600;opacity:.8}
html body .hm-st.hot:not(#_){background:var(--hm-ink);color:color-mix(in srgb,var(--hm-ink) 0%,#000)}
:root:not([data-palette="squeeze"]) .hm-st.hot:not(#_){background:#fff;color:#17181a}
:root[data-palette="squeeze"] .hm-st.hot:not(#_){background:#231a0e;color:#fff}
html body .hm2 .hm-bot:not(#_){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
html body .hm2 .hm-pri:not(#_){background:var(--surface);border-radius:22px;padding:18px 20px}
html body .hm2 .hm-cards:not(#_){display:grid;grid-template-columns:1fr;gap:0}
html body .hm2 .hm-card:not(#_){display:grid;grid-template-columns:30px minmax(0,1fr) auto auto auto;align-items:center;gap:12px;min-height:0;padding:12px 2px;border-radius:0;background:none!important;color:var(--c-ink);border-top:1px solid var(--hm-line);transform:none}
html body .hm2 .hm-pri .hm-h+.hm-cards .hm-card:first-child:not(#_){border-top:0}
html body .hm2 .hm-card:hover:not(#_){transform:none}html body .hm2 .hm-card:hover b:not(#_){text-decoration:underline}
html body .hm2 .hm-cn:not(#_){width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:700;opacity:1;color:#17181a}
html body .hm2 .hm-card.k1 .hm-cn:not(#_){background:var(--hm-k1)}html body .hm2 .hm-card.k2 .hm-cn:not(#_){background:var(--hm-k2)}html body .hm2 .hm-card.k3 .hm-cn:not(#_){background:var(--hm-k3)}
html body .hm2 .hm-ct:not(#_){display:grid;gap:2px;min-width:0}
html body .hm2 .hm-ct b:not(#_){font-size:14.5px;font-weight:650;-webkit-line-clamp:1}
html body .hm2 .hm-ct>small:not(#_){font-size:12.5px;color:var(--ink-subtle);opacity:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .hm2 .hm-cf:not(#_){margin-top:4px;grid-template-columns:auto minmax(80px,180px);align-items:center;gap:8px}
html body .hm2 .hm-bar:not(#_){background:var(--surface-sunken)}html body .hm2 .hm-bar i:not(#_){background:var(--c-ink)}
html body .hm2 .hm-pill.a:not(#_){background:var(--status-working-bg);color:var(--status-working-fg)}
html body .hm2 .hm-card .hm-tick:not(#_){position:static;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--border-strong);background:none;color:var(--c-ink);display:grid;place-items:center;cursor:pointer}
html body .hm2 .hm-card .hm-tick:hover:not(#_){background:var(--primary);border-color:transparent}
html body .hm2 .hm-card .hm-tick svg:not(#_){width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html body .hm2 .hm-card.hm-none:not(#_){display:block;padding:14px 2px;color:var(--c-ink);border:0}html body .hm2 .hm-card.hm-none small:not(#_){display:block;color:var(--ink-subtle)}
html body .hm2 .hm-pri>.hm-row:not(#_){padding:10px 2px}
html body .hm2 :is(.hm-cal,.hm-circle):not(#_){border-radius:22px}
html body .hm2 .hm-circle:not(#_){background:var(--surface);border-radius:22px;padding:16px 18px}
html body .hm2 .hm-ckl:not(#_){border-radius:18px;border:0}
/* Your streak under the greeting, Kasper's one-time note, and Teams this week (public/homepulse.js; Rami, 22 October 2026) */
html body .hm-streak:not(#_){margin:10px 0 0;font-size:14px;font-weight:650;display:flex;gap:6px;align-items:center;opacity:.95}
html body .hm-mile:not(#_),html body .hm-kline:not(#_){display:flex;gap:10px;align-items:center;margin:10px 0 0;padding:10px 14px;border-radius:16px;font-size:13.5px;line-height:1.4;background:color-mix(in srgb,currentColor 10%,transparent)}
html body .hm-kas:not(#_){width:26px;height:26px;flex:none;color:var(--c-ink);--eye:var(--surface)}
html body .hm2 .hm-hi .hm-kas:not(#_){color:var(--hm-ink);--eye:var(--hm-hero)}
html body .hm-bars:empty:not(#_){display:none}
html body .hm-bars:not(#_){background:var(--surface);border-radius:22px;padding:16px 18px;margin-top:14px}
html body .hm-bars .hm-kline:not(#_){margin:0 0 8px;background:var(--surface-sunken)}
html body .hm-tb:not(#_){display:grid;grid-template-columns:auto auto 1fr;gap:4px 8px;align-items:baseline;padding:8px 2px;border-top:1px solid var(--hm-line);font-size:13px}
html body .hm-bars .hm-h+.hm-tb:not(#_),html body .hm-bars .hm-kline+.hm-tb:not(#_){border-top:0}
html body .hm-tb b:not(#_){font-weight:650}html body .hm-tb small:not(#_){color:var(--ink-subtle);font-size:12.5px}html body .hm-tbs:not(#_){color:var(--ink-subtle)}
html body .hm-tb .hm-bar:not(#_){grid-column:1/-1;background:var(--surface-sunken)}html body .hm-tb .hm-bar i:not(#_){background:var(--c-ink)}
@media (max-width:1180px){html body .hm2 .hm-hero:not(#_){grid-template-columns:1fr}}
@media (max-width:1000px){html body .hm2 .hm-bot:not(#_){grid-template-columns:1fr}}
@media (max-width:860px){html body .hm2 .hm-hero:not(#_){padding:20px}html body .hm2 .hm-hi h2:not(#_){font-size:28px}html body .hm-stats:not(#_){gap:8px}html body .hm-st b:not(#_){font-size:24px}}
/* the guided tours' card sits above Kasper, not over him */
@media (min-width:861px){html body .tr.mid.free .tr-card:not(#_){bottom:96px;max-height:min(560px,calc(100vh - 170px))}}
html body .tb-menu .tm-who:not(#_){display:grid;gap:2px}
html body .hm2 .hm-card .hm-cn:not(#_):not(#_){display:grid;width:30px;min-width:30px;max-width:30px;height:30px;padding:0;margin:0;aspect-ratio:1;justify-content:center;align-content:center}
html body .hm2 .hm-cal:not(#_){grid-template-columns:1fr;gap:14px}
html body .hm2 .hm-calm:not(#_){padding:0 0 14px;border-right:0;border-bottom:1px solid var(--hm-line)}
html body .hm2 .hm-next:not(#_){padding:0}
@media (min-width:861px){html body main:not(#_){padding-bottom:96px}} /* room for Kasper at the bottom right */
html body .hm2 .hm-t:not(#_){aspect-ratio:1.7/1}
html body #app>aside .nf-menu a:not(#_):not(#_):not(#_):not(#_){display:grid;justify-items:start;align-content:center;gap:1px;min-height:0;padding:8px 10px;width:100%}
html body .me-set .me-srow:has(.pal-pick):not(#_){align-items:flex-start;flex-wrap:wrap;gap:8px}
html body .me-set .pal-pick:not(#_):not(#_){grid-template-columns:repeat(3,minmax(0,1fr));max-width:420px;width:100%}
/* the menu folded to icons: the Settings menu opens beside it, not clipped inside it */
html.nav-mini body .nf-menu:not(#_){position:fixed;inset-inline-start:84px;bottom:16px}

/* ---------- Several people in one place (pick.js, Rami, 18 October 2026, after monday): chips of who is picked, then Suggested people ---------- */
html body .pk.pk-ppl:not(#_){min-width:300px;padding:0}
html body .pk-ppl .pk-top:not(#_){display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px;padding:6px 8px;border:1.5px solid var(--focus);border-radius:10px;background:var(--surface)}
html body .pk-ppl .pk-chs:not(#_){display:contents}
html body .pk-ppl .pk-chip:not(#_){display:inline-flex;align-items:center;gap:6px;max-width:190px;padding:2px 4px 2px 2px;border-radius:999px;background:var(--primary-soft);color:var(--c-ink);font:500 13px var(--font-sans)}
html body .pk-ppl .pk-chip>span:not(#_){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .pk-ppl .pk-chip button:not(#_),html body .pk-ppl .pk-clr:not(#_){border:0;background:none;color:var(--ink-muted);font-size:16px;line-height:1;cursor:pointer;padding:0 4px;border-radius:999px}
html body .pk-ppl .pk-chip button:hover:not(#_),html body .pk-ppl .pk-clr:hover:not(#_){color:var(--c-ink);background:var(--surface-hover)}
html body .pk-ppl .pk-clr:not(#_){margin-inline-start:auto}html body .pk-ppl .pk-clr[hidden]:not(#_){display:none}
html body .pk-ppl .pk-q:not(#_){flex:1 1 90px;min-width:90px;border:0!important;box-shadow:none!important;background:none;padding:4px 2px!important;height:auto!important}
html body .pk-ppl .pk-h:not(#_){padding:4px 14px;font:500 12.5px var(--font-sans);color:var(--ink-subtle)}
html body .pk-ppl .pk-o:not(#_){display:flex;align-items:center;gap:10px;padding:7px 14px;text-align:start}
html body .pk-ppl .pk-o .who-av:not(#_),html body .pk-ppl .pk-chip .who-av:not(#_){flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;font:700 10.5px var(--font-sans);font-style:normal;background:hsl(var(--pv-h,220) 60% 86%);color:#17181a}
html body .pk-ppl .pk-o .who-av:not(#_){width:30px;height:30px}html body .pk-ppl .pk-chip .who-av:not(#_){width:22px;height:22px;font-size:9px}
html body .pk-ppl :is(.pk-o,.pk-chip) .who-av img:not(#_){width:100%;height:100%;object-fit:cover}
html body .pk-ppl .pk-o.on:not(#_){background:var(--primary-soft)}
html body .pk-ppl .pk-o.on:not(#_)::after{content:"✓";margin-inline-start:auto;font-weight:700;color:var(--focus)}
/* the flag, the bell and your picture stay put while the page scrolls: a patch of the page's colour behind them, so a list's
   buttons scroll under them rather than showing through (seen 18 October 2026: "+ New job" under the icons) */
@media (min-width:861px){html body main>.tbar:not(#_)::after{content:"";position:fixed;top:0;inset-inline-end:0;width:152px;height:57px;background:var(--c-bg);z-index:40;pointer-events:none;border-end-start-radius:16px}}
html body .pk.pk-ppl .pk-top .pk-q:not(#_):not(#_){border:0!important;outline:0!important;box-shadow:none!important;background:none!important;margin:0!important;width:auto!important}
/* a job's panel: its type, client and days beside its status and people (work.js panelFields, 18 October 2026) */
html body .sp-job .sp-jgrid:not(#_){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;margin:14px 0}
html body .sp-job .sp-jf:not(#_){display:grid;gap:6px;min-width:0}
html body .sp-job .sp-jf small:not(#_){font-size:13px;color:var(--ink-muted)}
html body .sp-job .sp-jf :is(select,input,.pk-mbtn):not(#_){width:100%;min-width:0;max-width:100%;box-sizing:border-box}
html body .sp-job .sp-jf > *:not(#_){min-width:0;max-width:100%}
/* Production's Due: the whole cell opens the calendar (Rami, 18 October 2026: "i click on due date and nothing happens": with the list
   scrolled sideways the small date box slid under the pinned Job column, and the rest of the cell did nothing) */
html body #wkPage .wk-r1 > span:has(> .dpick):not(#_){position:relative;cursor:pointer}
html body #wkPage .wk-r1 > span > .dpick:not(#_){position:static}
html body #wkPage .wk-r1 > span > .dpick > input[type=date]:not(#_){position:absolute;inset:0;width:100%;height:100%;z-index:1}
/* a panel's ⋯ on a phone (public/panel.js tuck, Rami, 19 October 2026): Activity and the item's Delete live in it, away from Comment;
   on a computer the buttons stay where they are and there is no ⋯ */
@media (min-width:861px){html body .sp .sp-h .sp-more:not(#_){display:none}}
@media (max-width:860px){
  html body .sp .sp-b .sp-tucked:not(#_):not(#_):not(#_){display:none!important}
  html body .sp .sp-h .sp-more:not(#_){margin-inline-start:auto;flex:none}
  html body .sp .sp-h .sp-more>summary:not(#_):not(#_){min-width:40px;height:40px;border:0;background:transparent;font-size:20px;line-height:1;padding:0}
}
/* on a phone, text you type is 16px: smaller makes the phone zoom in on the box (Rami, 19 October 2026); index.html also stops it on
   an iPhone, this covers the other phones and keeps typing readable */
@media (max-width:860px){
  html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),textarea,select:not([data-sv]),[contenteditable=""],[contenteditable=true]):not(#_):not(#_):not(#_):not(#_){font-size:16px!important}
}
/* every ⋯ on a phone (Rami, 19 October 2026: "dot menu is in left side and loads in left so goes outside the frame"): the ⋯ sits at
   the right end of its header, and what it holds opens as a sheet from the bottom of the screen, so it can never spill off the side.
   An item's Delete is in it, in red at the bottom (public/phonekit.js tuckPage, public/panel.js tuck) */
html body .ip-menu>:is(a,button).danger:not(#_):not(#_){color:var(--status-stuck-fg)}
html body .ip-menu>.ip-cancel:not(#_):not(#_){display:none}
@media (max-width:860px){
  html body .pg-tucked:not(#_):not(#_):not(#_){display:none!important}
  html body .bk-danger:has(.pg-tucked):not(:has(:is(.btn-s,button):not(.pg-tucked))):not(#_):not(#_){display:none!important}
  html body .ip-head .ip-acts:not(#_):not(#_){flex:1 1 auto;width:100%}
  html body .ip-head .ip-acts>.ip-more:not(#_):not(#_){margin-inline-start:auto}
  html body .mk-h.mk-hm:not(#_){position:relative;padding-inline-end:52px}
  html body .mk-h>.ip-more:not(#_){position:absolute;top:0;inset-inline-end:0}
  html body .ip-more>summary:not(#_):not(#_):not(#_){min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:20px}
  html body .ip-more[open]::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:199;cursor:pointer} /* a tap on the shade closes the menu (kit.js); cursor:pointer makes an iPhone send that tap */
  html body .ip-more>.ip-menu>.ip-cancel:not(#_):not(#_):not(#_){display:block;margin-top:6px;padding:14px 16px;border-radius:10px;background:var(--surface-sunken);text-align:center;font-weight:600;font-size:16px;color:var(--ink)}
  html body .ip-more>.ip-menu:not(#_):not(#_):not(#_){position:fixed!important;left:12px!important;right:12px!important;top:auto!important;bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;min-width:0!important;width:auto!important;max-height:70vh;overflow:auto;z-index:200;padding:6px;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
  html body .ip-more>.ip-menu>:is(a,button):not(#_):not(#_){padding:14px 16px!important;font-size:16px!important;border-radius:10px}
  html body .ip-more>.ip-menu>.danger:not(#_):not(#_){margin-top:4px;border-top:1px solid var(--border)!important;border-radius:0 0 10px 10px!important}
  html body .ip-more>.ip-menu>.danger+.danger:not(#_):not(#_){margin-top:0;border-top:0!important}
}
/* an add row waiting for its client (kit.js): the Client box lights up and the note under the name is red, so the step is seen */
html body form.bk-add[data-await] select[data-kcp]:not(#_):not(#_):not(#_){outline:2px solid var(--status-stuck-fg)!important;outline-offset:1px;border-radius:var(--radius-sm)}
html body form.bk-add[data-await] .bk-add-e:not(#_):not(#_){color:var(--status-stuck-fg)!important;font-weight:600}
/* made automatically (work.js bolt, Rami, 19 October 2026): a lightning bolt in a blue, lavender and pink gradient beside the name of whoever asked for it, in
   Production, the job's panel and My work; colour stays for status, so it never competes with Late or Stuck */
html body .wk-by:not(#_){display:inline-flex;align-items:center;gap:3px;min-width:0;vertical-align:middle}
html body .wk-by>span:not(#_){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .wk-bolt:not(#_){flex:none;width:16px;height:16px;stroke:none;filter:drop-shadow(0 1px 1px rgba(91,140,255,.25))}
html body a.wk-from:not(#_){display:inline-flex;align-items:center;gap:4px;color:var(--ink);text-decoration:none;font-weight:500}
html body a.wk-from:not(#_):hover{text-decoration:underline}