/* CNS Group brand, the one place colours live (docs/requirements/stage-5a-brand-design.md).

   Rule from CNS Group's Brand Guidelines (August 2026): navy leads every layout, blue supports headings and structure,
   gold is for accents, calls to action and highlights only. Poppins everywhere. Loaded by Desk and by every website page
   (employee area, payslip and client pack share it); a module adds no colours of its own, it uses these tokens. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/cns_core/fonts/poppins/Poppins-Regular.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/cns_core/fonts/poppins/Poppins-Medium.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/cns_core/fonts/poppins/Poppins-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/cns_core/fonts/poppins/Poppins-Bold.woff2") format("woff2"); }

/* ---- Tokens, light ----------------------------------------------------------------------------------------------- */
:root {
	/* the guide's palette */
	--cns-navy: #1a4e82;
	--cns-navy-deep: #123c68;
	--cns-blue: #2767b2;
	--cns-sky: #018fd1;
	--cns-gold: #fac914;
	--cns-gold-deep: #e8b800;
	--cns-gold-soft: #f9e2a0;
	--cns-ink: #1f2937;
	--cns-muted: #6b7280;
	--cns-surface: #f4f7fb;
	--cns-surface-2: #eef2f6;
	--cns-line: #e3e9f1;
	--cns-tint: #d7e3f2;
	--cns-tint-2: #c9d9ee;
	--cns-white: #ffffff;
	/* derived, for readable text: sky is 3.6 to 1 on white, so small sky text uses sky-ink (5.2 to 1) */
	--cns-sky-ink: #0873a8;
	--cns-on-gold: #1a4e82;
	--cns-bg: #ffffff;
	--cns-navy-text: #1a4e82;
	--cns-blue-text: #2767b2;
	--cns-on-navy: #ffffff;
	--cns-on-navy-soft: #c9d9ee;
	/* graph series: navy, sky, blue and two blue-greys; each is 3 to 1 or better on the cards and the page */
	--cns-s1: #1a4e82;
	--cns-s2: #018fd1;
	--cns-s3: #2767b2;
	--cns-s4: #6b8ab3;
	--cns-s5: #7a8ba3;
	/* meaning colours, not brand: status keeps its meaning */
	--cns-ok: #16794c;
	--cns-ok-bg: #e4f5e9;
	--cns-bad: #b52a2a;
	--cns-bad-bg: #fff0f0;
	--cns-wait: #6b4700;
	--cns-wait-bg: #f9e2a0;
	--cns-quiet: #4b5563;
	--cns-quiet-bg: #eef2f6;
	--cns-shadow: 0 1px 2px rgb(26 78 130 / .06), 0 14px 28px -18px rgb(26 78 130 / .28);
	--cns-focus: rgb(39 103 178 / .38);
	/* one shape rule: cards 16, controls 10, chips and pills fully round */
	--cns-r-card: 16px;
	--cns-r-ctl: 10px;
	--cns-r-pill: 999px;
	--cns-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--cns-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---- Tokens, dark: the same brand on night navy ------------------------------------------------------------------ */
:root[data-theme="dark"], [data-theme="dark"] {
	--cns-navy: #1a4e82;
	--cns-navy-deep: #0f3a66;
	--cns-blue: #2f73c4;
	--cns-sky: #2aa8e8;
	--cns-ink: #e8eef6;
	--cns-muted: #a7b8cc;
	--cns-surface: #10253d;
	--cns-surface-2: #163150;
	--cns-line: #24456a;
	--cns-tint: #1d3b5e;
	--cns-tint-2: #2a4f7a;
	--cns-sky-ink: #58c3f5;
	--cns-bg: #0b1b2e;
	--cns-navy-text: #a9c8f0;
	--cns-blue-text: #86b4ee;
	--cns-on-navy: #ffffff;
	--cns-on-navy-soft: #c9d9ee;
	--cns-s1: #86b4ee;
	--cns-s2: #2aa8e8;
	--cns-s3: #3d85d6;
	--cns-s4: #9fb6d6;
	--cns-s5: #7f9bbf;
	--cns-ok: #7ddba7;
	--cns-ok-bg: #123826;
	--cns-bad: #ff9f9f;
	--cns-bad-bg: #3b1a1a;
	--cns-wait: #f9e2a0;
	--cns-wait-bg: #3f3510;
	--cns-quiet: #b9c8da;
	--cns-quiet-bg: #183350;
	--cns-shadow: 0 1px 2px rgb(0 0 0 / .35), 0 14px 28px -18px rgb(0 0 0 / .7);
	--cns-focus: rgb(134 180 238 / .45);
}

/* ---- Frappe's own variables pointed at the brand (Desk and website alike). html: in front so these win over the copies of Frappe's
   variables that its own bundles (login, website, desk) each carry, whatever order the sheets load in --------------------------- */
html:root, html[data-theme="light"] {
	--font-stack: var(--cns-font);
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;
	--primary: var(--cns-navy);
	--primary-color: var(--cns-navy);
	--brand-color: var(--cns-navy);
	--border-primary: var(--cns-navy);
	--btn-primary: var(--cns-navy);
	--heading-color: var(--cns-navy-text);
	--text-neutral: var(--cns-ink);
	--text-color: var(--cns-ink);
	--text-muted: var(--cns-quiet);
	--text-light: var(--cns-muted);
	--bg-color: var(--cns-bg);
	--fg-color: var(--cns-bg);
	--control-bg: var(--cns-surface);
	--control-bg-on-gray: var(--cns-surface-2);
	--subtle-accent: var(--cns-surface);
	--subtle-fg: var(--cns-surface-2);
	--fg-hover-color: var(--cns-surface-2);
	--border-color: var(--cns-line);
	--dark-border-color: var(--cns-tint-2);
	--table-border-color: var(--cns-line);
	--btn-default-bg: var(--cns-surface);
	--btn-default-hover-bg: var(--cns-tint);
	--btn-ghost-hover-bg: var(--cns-surface-2);
	--focus-default: 0 0 0 3px var(--cns-focus);
	--border-radius-sm: var(--cns-r-ctl);
	--border-radius: var(--cns-r-ctl);
	--border-radius-md: var(--cns-r-ctl);
	--border-radius-lg: var(--cns-r-card);
	--border-radius-xl: var(--cns-r-card);
	/* neutrals the guide uses (its ink and grey), and the blue scale around the brand blue */
	--gray-50: #f8fafc;
	--gray-100: #f4f7fb;
	--gray-200: #eef2f6;
	--gray-300: #e3e9f1;
	--gray-400: #c5cdd9;
	--gray-500: #9aa3b2;
	--gray-600: #6b7280;
	--gray-700: #4b5563;
	--gray-800: #1f2937;
	--gray-900: #111827;
	--blue-50: #f5f8fd;
	--blue-100: #eaf1fa;
	--blue-200: #d7e3f2;
	--blue-300: #c9d9ee;
	--blue-400: #7aa5dc;
	--blue-500: #3b7dc8;
	--blue-600: #2767b2;
	--blue-700: #1f5594;
	--blue-800: #1a4e82;
	--blue-900: #123a63;
}
html[data-theme="dark"] {
	--primary: var(--cns-blue-text);
	--primary-color: var(--cns-blue-text);
	--brand-color: var(--cns-blue-text);
	--border-primary: var(--cns-blue-text);
	--btn-primary: var(--cns-blue);
	--heading-color: var(--cns-navy-text);
	--text-neutral: var(--cns-ink);
	--text-color: var(--cns-ink);
	--text-muted: var(--cns-muted);
	--text-light: var(--cns-muted);
	--bg-color: var(--cns-bg);
	--fg-color: var(--cns-bg);
	--card-bg: var(--cns-surface);
	--modal-bg: var(--cns-surface);
	--popover-bg: var(--cns-surface);
	--control-bg: var(--cns-surface);
	--control-bg-on-gray: var(--cns-surface-2);
	--subtle-accent: var(--cns-surface);
	--subtle-fg: var(--cns-surface-2);
	--fg-hover-color: var(--cns-surface-2);
	--border-color: var(--cns-line);
	--dark-border-color: var(--cns-tint-2);
	--table-border-color: var(--cns-line);
	--btn-default-bg: var(--cns-surface);
	--btn-default-hover-bg: var(--cns-surface-2);
	--btn-ghost-hover-bg: var(--cns-surface-2);
	--gray-700: #1c3350;
	--gray-800: #10253d;
	--gray-900: #0b1b2e;
}

/* ---- Website chrome (the employee area and its pages): a navy bar with the white logo ------------------------------ */
body[data-path] { font-family: var(--cns-font); background: var(--cns-bg); color: var(--cns-ink); }
body[data-path] .navbar, body[data-path] .navbar-light { background: var(--cns-navy); border-bottom: 3px solid var(--cns-gold); }
body[data-path] .navbar-brand img { height: 40px; width: auto; }
body[data-path] .navbar-brand, body[data-path] .navbar .nav-link, body[data-path] .navbar .nav-item > a { color: var(--cns-on-navy); }
body[data-path] .navbar .nav-link:hover { color: var(--cns-on-navy); text-decoration: underline; text-underline-offset: .35em; text-decoration-color: var(--cns-gold); }
body[data-path] .navbar-toggler .icon { stroke: var(--cns-on-navy); }
body[data-path] .web-footer { background: var(--cns-surface); border-top: 1px solid var(--cns-line); }
body[data-path] a { color: var(--cns-blue-text); }
body[data-path] .page-card, body[data-path] .modal-content { border-radius: var(--cns-r-card); border: 1px solid var(--cns-line); box-shadow: var(--cns-shadow); }
body[data-path] .form-control { border-radius: var(--cns-r-ctl); }
/* the sign-in page: the mark a little larger, and Continue is the one call to action */
body[data-path] .page-card-head img.app-logo { max-height: 52px; }
body[data-path] .page-card .page-card-actions .btn-login, body[data-path] .page-card .page-card-actions .btn-ldap-login { background: var(--cns-gold); border-color: var(--cns-gold); color: var(--cns-on-gold); font-weight: 600; }
body[data-path] .page-card .page-card-actions .btn-login:hover, body[data-path] .page-card .page-card-actions .btn-login:focus, body[data-path] .page-card .page-card-actions .btn-ldap-login:hover { background: var(--cns-gold-deep); border-color: var(--cns-gold-deep); color: var(--cns-on-gold); }
body[data-path] .page-card .page-card-actions .btn-login:disabled { background: var(--cns-gold); color: var(--cns-on-gold); opacity: .55; }

/* ---- The one call to action of a screen: gold with navy text (Desk and website) ------------------------------------- */
.btn.btn-primary { background-color: var(--cns-gold); border-color: var(--cns-gold); color: var(--cns-on-gold); font-weight: 600; --icon-stroke: var(--cns-on-gold); --icon-fill-bg: var(--cns-gold); }
.btn.btn-primary:hover, .btn.btn-primary:focus { background-color: var(--cns-gold-deep); border-color: var(--cns-gold-deep); color: var(--cns-on-gold); }
.btn.btn-primary:active { background-color: var(--cns-gold-deep) !important; color: var(--cns-on-gold) !important; }
.btn.btn-primary:disabled, .btn.btn-primary.disabled { background-color: var(--cns-gold); border-color: var(--cns-gold); color: var(--cns-on-gold); opacity: .55; }
.btn.btn-primary:focus-visible { box-shadow: var(--focus-default) !important; }
::selection { background: var(--cns-gold-soft); color: var(--cns-ink); }

/* ---- The card kit: Home, the dashboard, My work, the preview and the documents all draw from this ------------------- */
.cns-ui { font-family: var(--cns-font); color: var(--cns-ink); }
.cns-ui .cns-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cns-ui .cns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18.5rem, 1fr)); grid-auto-flow: dense; gap: 1rem; margin-top: .75rem; }
.cns-ui .cns-grid--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; align-items: start; margin-top: 0; }
.cns-ui .cns-grid--12 > .cns-card { grid-column: span 12; }
@media (min-width: 900px) {
	.cns-ui .cns-grid--12 > .cns-span-7 { grid-column: span 7; }
	.cns-ui .cns-grid--12 > .cns-span-5 { grid-column: span 5; }
}
.cns-ui .cns-card { background: var(--cns-surface); border: 1px solid var(--cns-line); border-radius: var(--cns-r-card); box-shadow: var(--cns-shadow); padding: 1.25rem; min-width: 0; }
.cns-ui .cns-card-head { display: flex; align-items: center; gap: .6rem; margin: 0 0 .7rem; }
.cns-ui .cns-mark { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; flex: none; border-radius: var(--cns-r-ctl); background: var(--cns-tint); color: var(--cns-navy-text); }
.cns-ui .cns-mark svg { width: 1.05rem; height: 1.05rem; stroke: currentColor; fill: none; }
.cns-ui .cns-eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cns-sky-ink); }
.cns-ui .cns-card > h3, .cns-ui .cns-card-title { margin: 0 0 .6rem; }
.cns-ui .cns-card > h3, .cns-ui .cns-card-title, .cns-ui .cns-card-head h3 { font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--cns-navy-text); }
.cns-ui .cns-card-head h3 { margin: 0; }
.cns-ui .cns-card h4 { margin: 1.25rem 0 .5rem; font-size: .85rem; font-weight: 600; color: var(--cns-quiet); }
.cns-ui .cns-figure { font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; color: var(--cns-navy-text); font-variant-numeric: tabular-nums; }
.cns-ui .cns-muted, .cns-ui .cns-note, .cns-ui .cns-hint { color: var(--cns-quiet); font-size: .85rem; }
.cns-ui .cns-hint { margin: .5rem 0 0; max-width: 60ch; }
.cns-ui .cns-empty { margin: 1.5rem 0; color: var(--cns-quiet); }
.cns-ui .cns-rows { width: 100%; margin-top: .6rem; border-collapse: collapse; font-size: .875rem; }
.cns-ui .cns-rows td { padding: .4rem 0; border-top: 1px solid var(--cns-line); vertical-align: top; }
.cns-ui .cns-rows td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.cns-ui .cns-card a { color: var(--cns-blue-text); text-decoration: none; font-weight: 500; }
.cns-ui .cns-card a:hover { text-decoration: underline; }

/* what the profile, the client overview and the Desk pages built on cards need */
.cns-ui .cns-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 25rem), 1fr)); }
.cns-ui .cns-dl { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr; gap: .4rem 1rem; margin: 0; font-size: .875rem; }
.cns-ui .cns-dl dt { color: var(--cns-quiet); font-weight: 400; }
.cns-ui .cns-dl dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.cns-ui .cns-table { width: 100%; margin-top: .4rem; border-collapse: collapse; font-size: .85rem; }
.cns-ui .cns-table th { padding: .3rem .6rem .3rem 0; text-align: left; font-weight: 600; color: var(--cns-navy-text); border-bottom: 2px solid var(--cns-tint-2); }
.cns-ui .cns-table td { padding: .3rem .6rem .3rem 0; border-bottom: 1px solid var(--cns-line); }
.cns-ui .cns-card-head .cns-edit { margin-left: auto; font-size: .8rem; }
.cns-ui .cns-stack { display: grid; gap: 1rem; }
.cns-ui .cns-step-no { margin-right: .35rem; color: var(--cns-sky-ink); font-weight: 600; }
.cns-ui .cns-error { margin-top: .4rem; color: var(--cns-bad); font-size: .85rem; }
.cns-ui .cns-center { text-align: center; }
.cns-ui .cns-center .cns-card-head { justify-content: center; }
.cns-ui .cns-card--narrow { max-width: 34rem; margin: 2.5rem auto 0; }
.cns-ui .cns-code { margin: .6rem 0; font-size: clamp(3rem, 12vw, 6rem); font-weight: 700; letter-spacing: .12em; line-height: 1.1; color: var(--cns-navy-text); font-variant-numeric: tabular-nums; }

/* a page of cards: its own breathing room, and sections that follow each other */
.cns-ui.cns-page { padding: 1.25rem 0 3rem; }
.cns-ui .cns-section + .cns-section { margin-top: 3rem; }

/* the page heading of a screen made of cards: a title, one line under it, and the guide's short gold rule */
.cns-ui .cns-head { margin: 0 0 1.25rem; }
.cns-ui .cns-head h2 { margin: 0; font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--cns-navy-text); }
.cns-ui .cns-head .cns-sub { margin: .3rem 0 0; color: var(--cns-quiet); }
.cns-ui .cns-rule { display: block; width: 2.75rem; height: .25rem; margin: .8rem 0 0; border-radius: var(--cns-r-pill); background: var(--cns-gold); }

/* buttons: outline by default, gold for the one call to action of a card, a link for the small ones */
.cns-ui .cns-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.cns-ui .cns-btn { font: inherit; font-weight: 600; font-size: .9rem; min-height: 44px; padding: .55rem 1.1rem; border-radius: var(--cns-r-ctl); border: 1px solid var(--cns-tint-2); background: var(--cns-bg); color: var(--cns-navy-text); cursor: pointer; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.cns-ui .cns-btn:hover { border-color: var(--cns-blue); background: var(--cns-tint); }
.cns-ui .cns-btn--solid, .cns-ui .cns-cta { background: var(--cns-gold); border-color: var(--cns-gold); color: var(--cns-on-gold); }
.cns-ui .cns-btn--solid:hover, .cns-ui .cns-cta:hover { background: var(--cns-gold-deep); border-color: var(--cns-gold-deep); }
.cns-ui .cns-btn--link { min-height: 0; padding: .15rem .5rem; border-color: transparent; background: transparent; color: var(--cns-blue-text); }
.cns-ui .cns-btn--link:hover { background: transparent; border-color: transparent; text-decoration: underline; }
.cns-ui .cns-btn:disabled { opacity: .55; cursor: default; }
.cns-ui .cns-btn:focus-visible, .cns-ui a:focus-visible, .cns-ui summary:focus-visible, .cns-ui .form-control:focus-visible { outline: 3px solid var(--cns-focus); outline-offset: 2px; }
@media (max-width: 599px) { .cns-ui .cns-card > .cns-actions > .cns-btn { flex: 1 1 100%; } }

/* status chips: the meaning colours, soft ground and dark ink */
.cns-ui .cns-chip { display: inline-block; padding: .15rem .65rem; border-radius: var(--cns-r-pill); font-size: .78rem; font-weight: 600; white-space: nowrap; background: var(--cns-tint); color: var(--cns-navy-text); }
.cns-ui .cns-chip.is-ok { background: var(--cns-ok-bg); color: var(--cns-ok); }
.cns-ui .cns-chip.is-bad { background: var(--cns-bad-bg); color: var(--cns-bad); }
.cns-ui .cns-chip.is-wait { background: var(--cns-wait-bg); color: var(--cns-wait); }
.cns-ui .cns-chip.is-quiet { background: var(--cns-quiet-bg); color: var(--cns-quiet); }

/* rows, tiles and lists */
.cns-ui .cns-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.cns-ui .cns-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .75rem; padding: .65rem .85rem; border-radius: var(--cns-r-ctl); background: var(--cns-bg); border: 1px solid var(--cns-line); }
.cns-ui .cns-row small { display: block; color: var(--cns-quiet); font-size: .82rem; }
.cns-ui .cns-row .cns-aside { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cns-ui .cns-days, .cns-ui .cns-stats { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.cns-ui .cns-days { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.cns-ui .cns-stats { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
.cns-ui .cns-day, .cns-ui .cns-stat { display: grid; gap: .3rem; padding: .7rem .85rem; border-radius: var(--cns-r-ctl); background: var(--cns-bg); border: 1px solid var(--cns-line); font-size: .85rem; color: var(--cns-quiet); }
.cns-ui .cns-day .cns-chip { justify-self: start; }
.cns-ui .cns-stat .cns-num { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; color: var(--cns-navy-text); font-variant-numeric: tabular-nums; }
.cns-ui .cns-stat.is-lead { box-shadow: inset 0 -3px 0 var(--cns-gold); }
.cns-ui a.cns-slip { display: grid; gap: .15rem; padding: 1rem 1.1rem; border-radius: var(--cns-r-ctl); background: var(--cns-navy); color: var(--cns-on-navy); text-decoration: none; border: 1px solid var(--cns-navy); }
.cns-ui .cns-card a.cns-slip { color: var(--cns-on-navy); font-weight: 400; }
.cns-ui a.cns-slip:hover { text-decoration: none; background: var(--cns-navy-deep); }
.cns-ui a.cns-slip .cns-num { font-size: 1.7rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cns-ui a.cns-slip .cns-label { color: var(--cns-on-navy-soft); font-size: .85rem; }
.cns-ui details { margin-top: .75rem; }
.cns-ui summary { cursor: pointer; font-weight: 600; color: var(--cns-blue-text); padding: .35rem 0; }
.cns-ui details .cns-list { margin-top: .5rem; }

/* forms in a card */
.cns-ui .cns-form { margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--cns-tint-2); border-radius: var(--cns-r-ctl); background: var(--cns-bg); max-width: 34rem; }
.cns-ui .cns-form[hidden] { display: none; }
.cns-ui .cns-form .form-group { margin: 0 0 .85rem; }
.cns-ui .cns-form label { display: grid; gap: .35rem; font-size: .88rem; font-weight: 600; color: var(--cns-ink); }
.cns-ui .cns-form .form-control { border-radius: var(--cns-r-ctl); font-weight: 400; min-height: 44px; border-color: var(--cns-tint-2); background: var(--cns-bg); color: var(--cns-ink); }
.cns-ui .cns-form textarea.form-control { min-height: 6rem; }
.cns-ui .cns-form .cns-actions { margin: .25rem 0 0; }
.cns-ui .cns-claim-line, .cns-ui .cns-review { padding: .9rem; border: 1px solid var(--cns-line); border-radius: var(--cns-r-ctl); background: var(--cns-bg); }
.cns-ui .cns-claim-line { margin: 0 0 .75rem; }
.cns-ui .cns-review + .cns-review { margin-top: .75rem; }
.cns-ui .cns-review > p { margin: 0 0 .75rem; }
.cns-ui .cns-kpis { display: grid; gap: 1rem; }

/* ---- The modules rail of the employee area and the payslip: the same navy rail as Desk's, on a card; a row across the top on a phone ---- */
.cns-ui .cns-shell { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.cns-ui .cns-rail { position: sticky; top: 1rem; display: grid; gap: .15rem; padding: .6rem; border-radius: var(--cns-r-card); background: var(--cns-navy); box-shadow: var(--cns-shadow); }
.cns-ui .cns-rail-item { display: flex; align-items: center; justify-content: flex-start; gap: .7rem; min-height: 44px; padding: .5rem .8rem; border-radius: var(--cns-r-ctl); color: var(--cns-on-navy-soft); font-size: .88rem; font-weight: 500; text-decoration: none; }
.cns-ui .cns-rail-item svg { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; stroke: currentColor; fill: none; }
.cns-ui .cns-rail-item span { text-align: left; }
.cns-ui .cns-rail-item:hover, .cns-ui .cns-rail-item:focus-visible { background: rgb(255 255 255 / .1); color: var(--cns-on-navy); text-decoration: none; }
.cns-ui .cns-rail-item.is-current { background: rgb(255 255 255 / .16); color: var(--cns-on-navy); box-shadow: inset 3px 0 0 var(--cns-gold); }
.cns-ui .cns-graphs { margin: 0 0 1.25rem; }
.cns-ui .cns-shell--doc { max-width: 68rem; margin: 1.5rem auto 0; padding: 0 1.25rem; }
.cns-ui .cns-shell--doc:not(.has-rail) { display: block; max-width: none; padding: 0; margin: 0; }
.cns-ui .cns-shell--doc .cns-doc-page { margin: 0; padding: 0 0 3rem; max-width: none; }
@media (max-width: 899px) {
	.cns-ui .cns-shell { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
	.cns-ui .cns-rail { position: static; display: flex; overflow-x: auto; gap: .25rem; padding: .4rem; }
	.cns-ui .cns-rail-item { flex: none; white-space: nowrap; padding: .5rem .9rem; }
}

/* ---- Graphs (charts.py): marks carry the classes s1 to s5 and is-latest; the colours are the series tokens, gold only highlights the latest, outlined in navy so it reads ---- */
.cns-ui .cns-section-title { margin: 1.75rem 0 .1rem; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cns-sky-ink); }
.cns-ui .cns-section-title:first-child { margin-top: .25rem; }
.cns-ui .cns-greeting { margin: .25rem 0 1rem; padding-inline: 1rem; }
.cns-ui.cns-cards { padding-inline: 1rem; }
.cns-ui .cns-details { margin-top: .6rem; }
.cns-ui .cns-details > summary { cursor: pointer; font-size: .78rem; font-weight: 600; color: var(--cns-blue-text); padding: .2rem 0; }
@media (min-width: 760px) { .cns-ui .cns-card--wide { grid-column: span 2; } }
.cns-chart { margin: .5rem 0 .25rem; }
.cns-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.cns-chart .cns-grid-line { stroke: var(--cns-line); stroke-width: 1; }
.cns-chart .cns-axis { fill: var(--cns-quiet); font-size: 10px; font-family: var(--cns-font); }
.cns-chart .cns-val { fill: var(--cns-ink); font-size: 10px; font-weight: 600; font-family: var(--cns-font); }
.cns-chart rect.s1 { fill: var(--cns-s1); }
.cns-chart rect.s2 { fill: var(--cns-s2); }
.cns-chart rect.s3 { fill: var(--cns-s3); }
.cns-chart rect.s4 { fill: var(--cns-s4); }
.cns-chart rect.is-latest { fill: var(--cns-gold); stroke: var(--cns-navy-text); stroke-width: 1.5; }
.cns-chart .cns-line { fill: none; stroke: var(--cns-s1); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.cns-chart .cns-area { fill: var(--cns-s1); opacity: .09; }
.cns-chart .cns-dot { fill: var(--cns-bg); stroke: var(--cns-s1); stroke-width: 2; }
.cns-chart .cns-dot.is-latest { fill: var(--cns-gold); stroke: var(--cns-navy-text); }
.cns-chart--donut { display: grid; grid-template-columns: minmax(6.5rem, 8.5rem) 1fr; gap: .5rem 1.25rem; align-items: center; }
.cns-chart .cns-ring { fill: none; stroke: var(--cns-surface-2); stroke-width: 5.5; }
.cns-chart--donut circle.s1, .cns-chart--donut circle.s2, .cns-chart--donut circle.s3, .cns-chart--donut circle.s4, .cns-chart--donut circle.s5 { fill: none; stroke-width: 5.5; }
.cns-chart--donut circle.s1 { stroke: var(--cns-s1); }
.cns-chart--donut circle.s2 { stroke: var(--cns-s2); }
.cns-chart--donut circle.s3 { stroke: var(--cns-s3); }
.cns-chart--donut circle.s4 { stroke: var(--cns-s4); }
.cns-chart--donut circle.s5 { stroke: var(--cns-s5); }
.cns-chart .cns-total { fill: var(--cns-navy-text); font-size: 7.5px; font-weight: 700; font-family: var(--cns-font); }
.cns-chart .cns-legend { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .78rem; color: var(--cns-quiet); }
.cns-chart .cns-legend li::before { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .4rem; border-radius: var(--cns-r-pill); background: var(--cns-s1); }
.cns-chart .cns-legend li.s2::before { background: var(--cns-s2); }
.cns-chart .cns-legend li.s3::before { background: var(--cns-s3); }
.cns-chart .cns-legend li.s4::before { background: var(--cns-s4); }
.cns-chart .cns-legend li.s5::before { background: var(--cns-s5); }
.cns-chart .cns-legend--values { display: grid; margin: 0; gap: .35rem; font-size: .82rem; }
.cns-chart .cns-legend--values li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.cns-chart .cns-legend--values li::before { flex: none; }
.cns-chart .cns-legend-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cns-ink); }
.cns-chart .cns-legend-value { font-weight: 600; color: var(--cns-ink); font-variant-numeric: tabular-nums; }
.cns-chart .cns-legend-value small { margin-left: .4rem; font-weight: 400; color: var(--cns-quiet); }
.cns-chart .cns-hbars { display: grid; gap: .6rem; }
.cns-chart .cns-hbar { display: grid; grid-template-columns: minmax(4.5rem, 9.5rem) 1fr auto; align-items: center; gap: .65rem; font-size: .82rem; }
.cns-chart .cns-hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cns-ink); }
.cns-chart .cns-hbar-track { height: .65rem; border-radius: var(--cns-r-pill); background: var(--cns-surface-2); overflow: hidden; }
.cns-chart .cns-hbar-fill { display: block; height: 100%; width: var(--w); border-radius: var(--cns-r-pill); background: var(--cns-s1); }
.cns-chart .cns-hbar-value { font-weight: 600; color: var(--cns-ink); font-variant-numeric: tabular-nums; }

/* ---- Documents (payslip, client pack): the letterhead structure of the guide, a navy band with the logo and a thin gold divider ----- */
body.cns-doc { color-scheme: light; margin: 0; background: var(--cns-bg); color: var(--cns-ink); font: 400 14px/1.55 var(--cns-font); }
.cns-doc .cns-doc-band { background: var(--cns-navy); color: var(--cns-on-navy); padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 4px solid var(--cns-gold); }
.cns-doc .cns-doc-logo { height: 2.4rem; width: auto; display: block; }
.cns-doc .cns-doc-kind { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cns-on-navy-soft); }
.cns-doc .cns-doc-page { max-width: 44rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.cns-doc .cns-doc-page.is-wide { max-width: 56rem; }
.cns-doc h1 { margin: 0 0 .2rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; color: var(--cns-navy-text); }
.cns-doc h2 { margin: 1.6rem 0 .4rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cns-sky-ink); }
.cns-doc .cns-muted { color: var(--cns-quiet); }
.cns-doc dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1.25rem; margin: .9rem 0; padding: .9rem 1rem; background: var(--cns-surface); border-radius: var(--cns-r-ctl); }
.cns-doc dt { color: var(--cns-quiet); }
.cns-doc dd { margin: 0; font-weight: 500; }
.cns-doc table { width: 100%; border-collapse: collapse; }
.cns-doc th, .cns-doc td { padding: .4rem 0; border-bottom: 1px solid var(--cns-line); vertical-align: top; text-align: left; font-weight: 400; }
.cns-doc thead th { font-weight: 600; color: var(--cns-navy-text); border-bottom: 2px solid var(--cns-tint-2); }
.cns-doc td.amount, .cns-doc th.amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-left: 1rem; }
.cns-doc tr.total th, .cns-doc tr.total td { font-weight: 600; color: var(--cns-navy-text); }
.cns-doc tr.net th, .cns-doc tr.net td { font-weight: 700; font-size: 1.1rem; color: var(--cns-navy-text); background: var(--cns-gold-soft); border-bottom: 0; padding: .7rem .9rem; }
.cns-doc tr.net th { border-radius: var(--cns-r-ctl) 0 0 var(--cns-r-ctl); }
.cns-doc tr.net td { border-radius: 0 var(--cns-r-ctl) var(--cns-r-ctl) 0; }
.cns-doc .problem { border: 1px solid var(--cns-tint-2); background: var(--cns-surface); padding: .75rem 1rem; border-radius: var(--cns-r-ctl); }
.cns-doc .cns-actions { margin-top: 1.6rem; display: flex; gap: .75rem; flex-wrap: wrap; }
.cns-doc table.cns-gap { margin-top: 1.4rem; }

/* ---- The payroll preview inside Desk -------------------------------------------------------------------------------- */
.cns-ui.cns-preview { font-size: .82rem; }
.cns-ui.cns-preview .cns-grid { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; margin: .5rem 0 1rem; }
.cns-ui.cns-preview .cns-card { padding: .7rem .85rem; box-shadow: none; }
.cns-ui.cns-preview .cns-card.is-main { border-color: var(--cns-blue); box-shadow: inset 0 -3px 0 var(--cns-gold); }
.cns-ui.cns-preview .cns-label { color: var(--cns-quiet); font-size: .76rem; }
.cns-ui.cns-preview .cns-value { font-size: 1.15rem; font-weight: 700; color: var(--cns-navy-text); font-variant-numeric: tabular-nums; }
.cns-ui.cns-preview .cns-checks { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: .35rem; }
.cns-ui.cns-preview .cns-checks li { padding: .45rem .75rem; border-radius: var(--cns-r-ctl); border: 1px solid var(--cns-line); background: var(--cns-bg); }
.cns-ui.cns-preview .cns-checks li.error { border-color: var(--cns-bad); background: var(--cns-bad-bg); color: var(--cns-bad); }
.cns-ui.cns-preview .cns-checks li.warning { border-color: var(--cns-gold-deep); background: var(--cns-wait-bg); color: var(--cns-wait); }
.cns-ui.cns-preview .cns-who { color: var(--cns-quiet); font-weight: 400; }
.cns-ui.cns-preview .cns-scroll { overflow: auto; max-height: 70vh; border: 1px solid var(--cns-line); border-radius: var(--cns-r-ctl); }
.cns-ui.cns-preview table { border-collapse: collapse; width: 100%; }
.cns-ui.cns-preview th, .cns-ui.cns-preview td { padding: .35rem .6rem; border-bottom: 1px solid var(--cns-line); white-space: nowrap; }
.cns-ui.cns-preview th { position: sticky; top: 0; background: var(--cns-navy); color: var(--cns-on-navy); text-align: right; font-weight: 600; z-index: 1; }
.cns-ui.cns-preview th:first-child, .cns-ui.cns-preview td:first-child { position: sticky; left: 0; text-align: left; background: var(--cns-bg); }
.cns-ui.cns-preview th:first-child { background: var(--cns-navy); }
.cns-ui.cns-preview td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cns-ui.cns-preview tr.neg td { color: var(--cns-bad); }
.cns-ui.cns-preview tr.total td { font-weight: 700; border-top: 2px solid var(--cns-navy); background: var(--cns-surface-2); }

/* ---- Print: documents lose their actions and keep the navy band ------------------------------------------------------- */
@media print {
	.cns-doc .cns-actions, .cns-doc .cns-no-print, .cns-rail { display: none; }
	.cns-ui .cns-shell { display: block; }
	.cns-doc .cns-doc-band { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.cns-doc tr.net th, .cns-doc tr.net td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	body.cns-doc { background: var(--cns-white); }
	.cns-doc .cns-doc-page { max-width: none; padding: 1rem 0; }
}

/* ---- Motion: sequence (cards rise in), feedback (press, hover) and state (a form opens); all of it off when asked ------------ */
@media (prefers-reduced-motion: no-preference) {
	.cns-ui .cns-card, .cns-ui .cns-head { animation: cns-rise .55s var(--cns-ease) both; }
	.cns-ui .cns-grid > :nth-child(2) { animation-delay: .05s; }
	.cns-ui .cns-grid > :nth-child(3) { animation-delay: .1s; }
	.cns-ui .cns-grid > :nth-child(4) { animation-delay: .15s; }
	.cns-ui .cns-grid > :nth-child(5) { animation-delay: .2s; }
	.cns-ui .cns-grid > :nth-child(n+6) { animation-delay: .25s; }
	.cns-ui .cns-btn, .cns-ui a.cns-slip, .cns-ui .cns-stat, .cns-ui .cns-row { transition: transform .25s var(--cns-ease), border-color .2s, background-color .2s; }
	.cns-ui .cns-btn:active { transform: scale(.98); }
	.cns-ui a.cns-slip:hover { transform: translateY(-2px); }
	.cns-ui .cns-form:not([hidden]) { animation: cns-open .3s var(--cns-ease) both; }
	.cns-ui details[open] > .cns-list { animation: cns-open .3s var(--cns-ease) both; }
	.btn.btn-primary { transition: background-color .15s, transform .15s var(--cns-ease); }
	.btn.btn-primary:active { transform: scale(.98); }
	.cns-chart rect[class^="s"] { transform-box: fill-box; transform-origin: bottom; animation: cns-column .6s var(--cns-ease) both; }
	.cns-chart .cns-hbar-fill { animation: cns-grow .7s var(--cns-ease) both; }
	.cns-chart--donut circle[class^="s"] { animation: cns-fade .8s var(--cns-ease) both; }
	@keyframes cns-column { from { transform: scaleY(0); } to { transform: none; } }
	@keyframes cns-grow { from { width: 0; } to { width: var(--w); } }
	@keyframes cns-fade { from { opacity: 0; } to { opacity: 1; } }
	@keyframes cns-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
	@keyframes cns-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
	.cns-ui *, .cns-ui *::before, .cns-ui *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}