:root{--ao-zoom:1;--ao-vh:calc(1vh / var(--ao-zoom));--ao-dvh:calc(1dvh / var(--ao-zoom));--ao-svh:calc(1svh / var(--ao-zoom));--ao-lvh:calc(1lvh / var(--ao-zoom));--ao-vw:calc(1vw / var(--ao-zoom));--ao-dvw:calc(1dvw / var(--ao-zoom));--ao-svw:calc(1svw / var(--ao-zoom));--ao-lvw:calc(1lvw / var(--ao-zoom));--ao-vmin:calc(1vmin / var(--ao-zoom));--ao-vmax:calc(1vmax / var(--ao-zoom))}
html{zoom:var(--ao-zoom)}
@media print{:root{--ao-zoom:1 !important}html{zoom:1 !important}}
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: none;
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: none;
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: none;
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: none;
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}

/* DCC Agent Office themes. Seven complete palettes of semantic tokens (our own pack, 21 Oct 2026: Daylight, Midnight, Aurora, Dune, Forest, Ember, Ocean), the only place colours are
   decided. <html data-palette="..."> chooses one; theme-boot.js and themes.js set it, before the page paints. Each palette also sets its corner roundness (--rad), motion speed (--spd) and
   backdrop (--back); the shadow style is --shadow-card. The earlier choices (Light, Dark, Purple, Blue, Green, Orange) are mapped to the nearest of these (themes.js MIGRATE).
   <html data-theme="dark|light"> stays as before (the dark palettes all set data-theme="dark"), so every existing dark rule still applies, and the old variable names (--brand, --ink, --card ...)
   are mapped onto these tokens at the end. Every palette must define every token in REQUIRED (themes.js) and pass the contrast pairs (qa-2026-10-12-themes, tools/nx-contrast.mjs). */

/* ---------------------------------------------------------------- Daylight */
:root, [data-palette="daylight"] {
  color-scheme: light;
  --rad: 14px; --spd: 1;
  /* PP-AGENTS (22 Oct 2026): Daylight is the default of the New look and it has the lab's soft page: an indigo haze at the top left and a cyan glow at the bottom right, kept light so text on the page keeps its contrast (only the new shell reads --back) */
  --back: radial-gradient(900px 480px at 10% -8%, rgba(63, 87, 211, .14), transparent 62%), radial-gradient(1000px 640px at 100% 108%, rgba(34, 195, 230, .22), transparent 60%);
  --color-bg: #F4F6FB; --color-bg-glow: #E2E6F7; --color-sidebar: #FFFFFF; --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-surface-nested: #FAFBFD; --color-surface-hover: #F2F3FC;
  --color-overlay: #FFFFFF; --color-input: #FFFFFF; --color-table-head: #F5F7FD; --color-row-alt: #FBFCFE; --color-row-hover: #F2F3FC; --color-row-selected: #E8EBFA; --color-text-primary: #161E40;
  --color-text-secondary: #363F60; --color-text-muted: #5D6786; --color-text-disabled: #A1A7BB; --color-placeholder: #5D6786; --color-border: #E4E8F2; --color-control-border: #4F5878;
  --color-border-subtle: #F2F4F9; --color-focus: #3F57D3; --color-accent: #3F57D3; --color-accent-2: #22C3E6; --color-accent-soft: #E8EBFA; --color-accent-hover: #364AB3; --color-on-accent: #FFFFFF;
  --color-link: #3F57D3; --color-accent-text: #3F57D3; --gradient-brand: linear-gradient(135deg, #3F57D3 0%, #22C3E6 100%); --color-success: #167751; --color-success-soft: #E3F1EB;
  --color-info: #2461E6; --color-info-soft: #E9EFFD; --color-warning: #965A10; --color-warning-soft: #F2EBE2; --color-error: #C13838; --color-error-soft: #FAEBEB; --color-tooltip-bg: #0E142A;
  --color-tooltip-text: #FFFFFF; --color-skeleton: #EDF0F7; --color-scrollbar: #B1B6C6; --chart-1: #3F57D3; --chart-2: #0EA5A4; --chart-3: #D97706; --chart-4: #DB2777; --chart-5: #2563EB;
  --chart-6: #16A34A; --chart-7: #7C3AED; --chart-8: #64748B; --shadow-card: 0 2px 6px rgba(22, 30, 64, .05), 0 14px 30px -16px rgba(22, 30, 64, .22); --shadow-raised: 0 14px 34px -14px rgba(22, 30, 64, .3);
  --glow: 0 0 0 transparent;
}

/* ---------------------------------------------------------------- Midnight */
[data-palette="midnight"] {
  color-scheme: dark;
  --rad: 14px; --spd: 1; --back: none;
  --color-bg: #0A1226; --color-bg-glow: #151F3C; --color-sidebar: #0D1731; --color-surface: #111C38; --color-surface-raised: #1B2540; --color-surface-nested: #0E172F; --color-surface-hover: #1E2A50;
  --color-overlay: #1B2540; --color-input: #0E172F; --color-table-head: #1C284C; --color-row-alt: #0F1932; --color-row-hover: #1E2A50; --color-row-selected: #263460; --color-text-primary: #EAF0FF;
  --color-text-secondary: #C6D0E8; --color-text-muted: #9AA8CC; --color-text-disabled: #596581; --color-placeholder: #9AA8CC; --color-border: #223158; --color-control-border: #AAB6D6;
  --color-border-subtle: #1A2748; --color-focus: #22C3E6; --color-accent: #7C93FF; --color-accent-2: #22C3E6; --color-accent-soft: #293664; --color-accent-hover: #90A3FF; --color-on-accent: #0A1226;
  --color-link: #899EFF; --color-accent-text: #899EFF; --gradient-brand: linear-gradient(135deg, #4A63D9 0%, #22C3E6 100%); --color-success: #4CC794; --color-success-soft: #1D3E4A;
  --color-info: #64C5FF; --color-info-soft: #223E60; --color-warning: #FFB547; --color-warning-soft: #413B3B; --color-error: #FF7A7A; --color-error-soft: #412F45; --color-tooltip-bg: #323C54;
  --color-tooltip-text: #FFFFFF; --color-skeleton: #1C2A4D; --color-scrollbar: #546182; --chart-1: #7C93FF; --chart-2: #2DD4BF; --chart-3: #FBBF24; --chart-4: #F472B6; --chart-5: #60A5FA;
  --chart-6: #4ADE80; --chart-7: #A78BFA; --chart-8: #94A3B8; --shadow-card: 0 14px 30px -16px rgba(0, 0, 0, .7); --shadow-raised: 0 22px 44px -20px rgba(0, 0, 0, .85); --glow: 0 0 26px -6px rgba(124, 147, 255, .4);
}

/* ---------------------------------------------------------------- Aurora */
[data-palette="aurora"] {
  color-scheme: dark;
  --rad: 20px; --spd: 1.25; --back: radial-gradient(800px 420px at 85% -10%, rgba(146, 131, 255, .22), transparent 60%), radial-gradient(700px 400px at -5% 10%, rgba(45, 212, 191, .16), transparent 60%);
  --color-bg: #0A0F1F; --color-bg-glow: #181B35; --color-sidebar: #0C1228; --color-surface: #121A33; --color-surface-raised: #1B233B; --color-surface-nested: #0E1529; --color-surface-hover: #21274B;
  --color-overlay: #1B233B; --color-input: #0E1529; --color-table-head: #1F2547; --color-row-alt: #0F162C; --color-row-hover: #21274B; --color-row-selected: #2C2F5C; --color-text-primary: #F0F2FF;
  --color-text-secondary: #D0D5EE; --color-text-muted: #A9B2DA; --color-text-disabled: #616986; --color-placeholder: #A9B2DA; --color-border: #2A3563; --color-control-border: #B7BFE1;
  --color-border-subtle: #1E284B; --color-focus: #2DD4BF; --color-accent: #9283FF; --color-accent-2: #2DD4BF; --color-accent-soft: #2E3160; --color-accent-hover: #A296FF; --color-on-accent: #0A0F1F;
  --color-link: #9F92FF; --color-accent-text: #9F92FF; --gradient-brand: linear-gradient(135deg, #9283FF 0%, #2DD4BF 100%); --color-success: #4CC794; --color-success-soft: #1E3D46;
  --color-info: #64C5FF; --color-info-soft: #223C5C; --color-warning: #FFB547; --color-warning-soft: #413937; --color-error: #FF8A8A; --color-error-soft: #413044; --color-tooltip-bg: #333A50;
  --color-tooltip-text: #FFFFFF; --color-skeleton: #222C52; --color-scrollbar: #5C648A; --chart-1: #9283FF; --chart-2: #2DD4BF; --chart-3: #FBBF24; --chart-4: #F472B6; --chart-5: #60A5FA;
  --chart-6: #4ADE80; --chart-7: #A78BFA; --chart-8: #94A3B8; --shadow-card: 0 0 0 1px rgba(146, 131, 255, .12), 0 18px 40px -18px rgba(146, 131, 255, .45); --shadow-raised: 0 0 0 1px rgba(146, 131, 255, .2), 0 24px 48px -18px rgba(146, 131, 255, .55);
  --glow: 0 0 30px -6px rgba(146, 131, 255, .55);
}

/* ---------------------------------------------------------------- Dune */
[data-palette="dune"] {
  color-scheme: light;
  --rad: 10px; --spd: 0.9; --back: none;
  --color-bg: #EEF0EA; --color-bg-glow: #D9E3DC; --color-sidebar: #FBFCF9; --color-surface: #FBFCF9; --color-surface-raised: #FBFCF9; --color-surface-nested: #F5F6F2; --color-surface-hover: #ECF2EE;
  --color-overlay: #FBFCF9; --color-input: #FBFCF9; --color-table-head: #F0F5F1; --color-row-alt: #F6F8F4; --color-row-hover: #ECF2EE; --color-row-selected: #E1EBE6; --color-text-primary: #1B2A24;
  --color-text-secondary: #384740; --color-text-muted: #5B6A62; --color-text-disabled: #9DA69F; --color-placeholder: #5B6A62; --color-border: #D9DDD2; --color-control-border: #4E5D56;
  --color-border-subtle: #EAEDE6; --color-focus: #1F6F5B; --color-accent: #1F6F5B; --color-accent-2: #B88A2E; --color-accent-soft: #E1EBE6; --color-accent-hover: #1A5E4D; --color-on-accent: #FFFFFF;
  --color-link: #1F6F5B; --color-accent-text: #1F6F5B; --gradient-brand: linear-gradient(135deg, #1F6F5B 0%, #1F6F5B 100%); --color-success: #1F6F5B; --color-success-soft: #E1EBE6;
  --color-info: #245FE2; --color-info-soft: #E6EDF8; --color-warning: #965A10; --color-warning-soft: #EFE9DD; --color-error: #B3392F; --color-error-soft: #F4E9E5; --color-tooltip-bg: #121B17;
  --color-tooltip-text: #FFFFFF; --color-skeleton: #E5E8E0; --color-scrollbar: #AAB0A7; --chart-1: #1F6F5B; --chart-2: #0EA5A4; --chart-3: #D97706; --chart-4: #DB2777; --chart-5: #2563EB;
  --chart-6: #16A34A; --chart-7: #7C3AED; --chart-8: #64748B; --shadow-card: 0 1px 0 rgba(27, 42, 36, .08), 0 8px 0 -6px rgba(27, 42, 36, .08); --shadow-raised: 0 1px 0 rgba(27, 42, 36, .12), 0 12px 0 -8px rgba(27, 42, 36, .12);
  --glow: 0 0 0 transparent;
}

/* ---------------------------------------------------------------- Forest */
[data-palette="forest"] {
  color-scheme: dark;
  --rad: 12px; --spd: 1; --back: none;
  --color-bg: #07201A; --color-bg-glow: #0C3227; --color-sidebar: #051812; --color-surface: #0C2D25; --color-surface-raised: #16352E; --color-surface-nested: #0A2720; --color-surface-hover: #114133;
  --color-overlay: #16352E; --color-input: #0A2720; --color-table-head: #103E31; --color-row-alt: #0A2821; --color-row-hover: #114133; --color-row-selected: #144E3C; --color-text-primary: #E5F7F0;
  --color-text-secondary: #BDDCD1; --color-text-muted: #98C2B2; --color-text-disabled: #57796E; --color-placeholder: #98C2B2; --color-border: #1A4A3D; --color-control-border: #A7CDBE;
  --color-border-subtle: #133C31; --color-focus: #A3E635; --color-accent: #34D399; --color-accent-2: #A3E635; --color-accent-soft: #15523F; --color-accent-hover: #52DAA8; --color-on-accent: #07201A;
  --color-link: #34D399; --color-accent-text: #34D399; --gradient-brand: linear-gradient(135deg, #10B981 0%, #A3E635 100%); --color-success: #5EE0A8; --color-success-soft: #1C513F;
  --color-info: #64C5FF; --color-info-soft: #1E4B51; --color-warning: #FFB547; --color-warning-soft: #3D482C; --color-error: #FF8A8A; --color-error-soft: #3D4039; --color-tooltip-bg: #2E4A44;
  --color-tooltip-text: #FFFFFF; --color-skeleton: #154035; --color-scrollbar: #4D756A; --chart-1: #34D399; --chart-2: #2DD4BF; --chart-3: #FBBF24; --chart-4: #F472B6; --chart-5: #60A5FA;
  --chart-6: #4ADE80; --chart-7: #A78BFA; --chart-8: #94A3B8; --shadow-card: 0 14px 30px -16px rgba(0, 0, 0, .7); --shadow-raised: 0 22px 44px -20px rgba(0, 0, 0, .85); --glow: 0 0 26px -6px rgba(52, 211, 153, .4);
}

/* ---------------------------------------------------------------- Ember */
[data-palette="ember"] {
  color-scheme: dark;
  --rad: 8px; --spd: 0.8; --back: none;
  --color-bg: #16110E; --color-bg-glow: #2D1E13; --color-sidebar: #100C09; --color-surface: #221A15; --color-surface-raised: #2B231E; --color-surface-nested: #1C1612; --color-surface-hover: #3C281A;
  --color-overlay: #2B231E; --color-input: #1C1612; --color-table-head: #382619; --color-row-alt: #1E1713; --color-row-hover: #3C281A; --color-row-selected: #4D321D; --color-text-primary: #FFF1E6;
  --color-text-secondary: #EBD5C4; --color-text-muted: #D2B39A; --color-text-disabled: #7D6A5B; --color-placeholder: #D2B39A; --color-border: #42322A; --color-control-border: #DBBFA9;
  --color-border-subtle: #322620; --color-focus: #FDE047; --color-accent: #FB923C; --color-accent-2: #FDE047; --color-accent-soft: #52341E; --color-accent-hover: #FCA259; --color-on-accent: #16110E;
  --color-link: #FB923C; --color-accent-text: #FB923C; --gradient-brand: linear-gradient(135deg, #F97316 0%, #FDE047 100%); --color-success: #5EE0A8; --color-success-soft: #2E4232;
  --color-info: #64C5FF; --color-info-soft: #2F3C44; --color-warning: #FFB547; --color-warning-soft: #4E391F; --color-error: #FF8A8A; --color-error-soft: #4E302C; --color-tooltip-bg: #413A36;
  --color-tooltip-text: #FFFFFF; --color-skeleton: #372A23; --color-scrollbar: #716259; --chart-1: #FB923C; --chart-2: #2DD4BF; --chart-3: #FBBF24; --chart-4: #F472B6; --chart-5: #60A5FA;
  --chart-6: #4ADE80; --chart-7: #A78BFA; --chart-8: #94A3B8; --shadow-card: 0 12px 28px -14px rgba(0, 0, 0, .8); --shadow-raised: 0 20px 40px -16px rgba(0, 0, 0, .9); --glow: 0 0 26px -6px rgba(251, 146, 60, .45);
}

/* ---------------------------------------------------------------- Ocean */
[data-palette="ocean"] {
  color-scheme: light;
  --rad: 16px; --spd: 1; --back: radial-gradient(700px 360px at 100% 0, rgba(34, 211, 238, .18), transparent 60%);
  --color-bg: #EAF4FA; --color-bg-glow: #D3E6F1; --color-sidebar: #FFFFFF; --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-surface-nested: #F5FAFD; --color-surface-hover: #EDF4F8;
  --color-overlay: #FFFFFF; --color-input: #FFFFFF; --color-table-head: #F2F8FA; --color-row-alt: #F8FBFD; --color-row-hover: #EDF4F8; --color-row-selected: #E1EDF4; --color-text-primary: #0B2F45;
  --color-text-secondary: #2A4D63; --color-text-muted: #4A6D83; --color-text-disabled: #92AAB9; --color-placeholder: #4A6D83; --color-border: #D2E4EF; --color-control-border: #3D6177;
  --color-border-subtle: #E9F2F7; --color-focus: #0369A1; --color-accent: #0369A1; --color-accent-2: #22D3EE; --color-accent-soft: #E1EDF4; --color-accent-hover: #035989; --color-on-accent: #FFFFFF;
  --color-link: #0369A1; --color-accent-text: #0369A1; --gradient-brand: linear-gradient(135deg, #0369A1 0%, #22D3EE 100%); --color-success: #0E7652; --color-success-soft: #E2EFEB;
  --color-info: #2461E6; --color-info-soft: #E9EFFD; --color-warning: #965A10; --color-warning-soft: #F2EBE2; --color-error: #C0392B; --color-error-soft: #F9EBEA; --color-tooltip-bg: #071F2D;
  --color-tooltip-text: #FFFFFF; --color-skeleton: #E2EDF5; --color-scrollbar: #A0B7C5; --chart-1: #0369A1; --chart-2: #0EA5A4; --chart-3: #D97706; --chart-4: #DB2777; --chart-5: #2563EB;
  --chart-6: #16A34A; --chart-7: #7C3AED; --chart-8: #64748B; --shadow-card: 0 2px 6px rgba(11, 58, 87, .06), 0 14px 30px -16px rgba(11, 58, 87, .28); --shadow-raised: 0 14px 34px -14px rgba(11, 58, 87, .34);
  --glow: 0 0 0 transparent;
}

/* ---------------------------------------------------------------- the names the rest of the stylesheet already uses */
:root {
  --brand: var(--color-accent-text); --brand-2: var(--color-accent-2); --brand-soft: var(--color-accent-soft);
  --ink: var(--color-text-primary); --muted: var(--color-text-muted); --line: var(--color-border);
  --bg: var(--color-bg); --card: var(--color-surface); --soft: var(--color-surface-nested);
  --green: var(--color-success); --green-soft: var(--color-success-soft); --amber: var(--color-warning); --amber-soft: var(--color-warning-soft);
  --red: var(--color-error); --red-soft: var(--color-error-soft); --blue: var(--color-info); --blue-soft: var(--color-info-soft);
  --shadow: var(--shadow-card);
}

/* DCC Agent Office workspace. Ant Design supplies the components; this file supplies layout and the few
   product-specific pieces (permission card, Systems & Data cards, test banner). Every colour comes from the theme
   tokens in themes.css (six themes; the names used here, --brand, --ink, --card ..., are mapped there). */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif; -webkit-font-smoothing: antialiased; }
.boot { font: 600 15px/1 system-ui, sans-serif; color: #6b7084; padding: 40px; letter-spacing: .02em; }
.center-screen { min-height: calc(100 * var(--ao-vh)); display: grid; place-items: center; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.pre { white-space: pre-wrap; word-break: break-word; }
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.warn-text { color: var(--amber); }
.danger-text { color: var(--red); }
.eyebrow { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.field-label { display: block; font-weight: 600; font-size: 13.5px; margin: 14px 0 6px; }
ul.plain { margin: 0; padding-left: 18px; }

/* ---------------------------------------------------------------- brand */
/* The Open cell mark where space is small, and the full lockup where it is not (the same files as the New look and the sign-in:
   app/public/brand/nx-*.svg). Transparent, no plate; main.jsx picks the dark or light variant for the surface behind it. */
.logo-mark { width: 34px; height: 34px; flex: none; display: block; }
.brand-logo { display: block; height: 40px; width: auto; max-width: 100%; }
.brand-full { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.brand-full small { color: var(--muted); font-size: 11px; padding-left: 2px; }
[data-theme="dark"] .auth-logo { background: #fff; border-radius: 8px; padding: 4px 8px; }

/* ---------------------------------------------------------------- shell */
.shell { min-height: calc(100 * var(--ao-vh)); }
.side { border-right: 1px solid var(--line); position: sticky !important; top: 0; height: calc(100 * var(--ao-vh)); overflow: auto; flex: none !important; }
.side .ant-layout-sider-children { display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; color: var(--ink); text-decoration: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-text b { font-size: 15px; letter-spacing: -.01em; }
.brand-text small { color: var(--muted); font-size: 11.5px; }
/* Companies: logos sit on a small white card so they read the same on light and dark. */
.side-companies { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px 12px; }
.co-logo { display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 3px 7px; line-height: 0; }
.co-logo img { display: block; width: auto; }
.co-logo b { line-height: 1.4; color: #151827; font-size: 12px; }
.co-tag { display: inline-flex !important; align-items: center; gap: 6px; background: var(--soft) !important; color: var(--ink) !important; }
.co-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.val-testing { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 6px 0; padding: 6px 10px; border-radius: 6px; background: rgba(19, 163, 107, .08); }
.val-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #13a36b; animation: livePulse 1.6s infinite; align-self: center; }
@media (prefers-reduced-motion: reduce) { .val-dot { animation: none; } }
.co-group { margin-bottom: 20px; }
.co-group .ant-card-head-title { overflow: visible; }
/* On a phone a card's title and its buttons share one line only while they fit; otherwise the buttons go below the
   title instead of making the page wider than the screen. */
@media (max-width: 640px) {
  .ant-card-head-wrapper { flex-wrap: wrap; row-gap: 8px; padding-block: 10px; }
  .ant-card-head-title { flex: 1 1 auto; white-space: normal; }
  .ant-card-head-title .ant-space { flex-wrap: wrap; row-gap: 4px; }
  .ant-card-extra { margin-inline-start: 0 !important; max-width: 100%; }
  .ant-card-extra .ant-space { flex-wrap: wrap; }
}
.side-menu { border-inline-end: none !important; background: transparent !important; flex: 1; }
.side-foot { padding: 14px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px !important; height: 60px !important; line-height: 60px !important;
  position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 82%, transparent) !important; backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-right { display: flex; align-items: center; gap: 10px; }
/* New | Classic (release 157): the same height as the buttons beside it, never wrapped; on a phone it is in the menu under the name. */
.top-right { flex: none; white-space: nowrap; }
.look-switch { flex: none; }
@media (max-width: 767px) { .look-switch { display: none; } }
/* Its first-time note: narrow, one clear shadow, pointing up at the switch, floating above the page (never in its flow). */
.look-tip .ant-popover-inner { padding: 8px 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.14); }
.look-tip-body { width: 240px; font-size: 13px; line-height: 1.45; }
.look-tip .look-tip-ok { padding: 0; height: auto; font-weight: 600; }
/* Release 159b: the welcome pointer at New | Classic (uilook.jsx WelcomeLook): above the pop-up's mask, never takes a click. A pulsing ring
   and an arrow bouncing up at the switch; under reduced motion only a still arrow. */
.look-pointer { position: fixed; z-index: 1100; pointer-events: none; }
.look-pointer-ring { position: absolute; inset: -6px; border: 3px solid var(--color-accent); border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); animation: look-ring 1.2s ease-out infinite; }
.look-pointer-arrow { position: absolute; left: 50%; top: calc(100% + 8px); margin-left: -14px; fill: var(--color-accent);
  stroke: #fff; stroke-width: 2; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); animation: look-bounce 0.9s ease-in-out infinite; }
@keyframes look-ring { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes look-bounce { 0%, 100% { transform: translateY(10px); } 50% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .look-pointer-ring { display: none; } .look-pointer-arrow { animation: none; } }
/* Admin > People (release 157): the person's sign-in tags under the name; Departments takes the room the moved columns left. */
.pp-person { min-width: 0; overflow-wrap: break-word; }
.pp-signin { margin-top: 4px; }
.pp-depts { min-width: 220px; }
/* A wide picker list (components.jsx WIDE_POPUP): room for the tick and the scroll bar after the longest name. */
.wide-pop .ant-select-item-option { padding-inline-end: 22px; }
.wide-pop .ant-select-item-option-state { margin-inline-start: 8px; }
.pp-status .ant-tag { white-space: normal; }
/* Never cut off: a narrower window scrolls the list sideways rather than hiding the last column. */
.co-group .ant-table-content { overflow-x: auto; }
.stop-banner { background: var(--red); color: #fff; font-weight: 600; font-size: 13px; padding: 4px 12px; border-radius: 99px; line-height: 1.6; }
.me-btn { display: flex; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; padding: 4px 6px; border-radius: 10px; color: var(--ink); }
.me-btn:hover { background: var(--soft); }
.me-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.me-text b { font-size: 13px; } .me-text small { font-size: 11px; color: var(--muted); }
@media (max-width: 720px) { .me-text { display: none; } }
.content { padding: 28px 32px 60px; }
.content-inner { max-width: 1280px; margin: 0 auto; }
@media (max-width: 720px) { .content { padding: 18px 14px 40px; } .ant-tag { white-space: normal; max-width: 100%; } }
/* A menu entry: its name, any count, and the small i that says what the page is for, kept at the far end. */
.side-menu .nav-label { display: flex; align-items: center; width: 100%; min-width: 0; }
/* A long name (a private office, a department) ends in an ellipsis instead of being cut mid-word. */
.side-menu .nav-label > .nav-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.side-menu .nav-label .info-tip { margin-left: auto; opacity: 0.35; }
.side-menu .nav-label:hover .info-tip, .side-menu .nav-label .info-tip:focus { opacity: 0.9; }

/* On a phone a wide table scrolls inside itself instead of widening the page. */
.ant-layout, .content { min-width: 0; }
.ant-table-content { overflow-x: auto; }

/* ---------------------------------------------------------------- page structure */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h2 { letter-spacing: -.02em; }
/* A title and its help button wrap on a phone instead of pushing the page wider than the screen. */
.page-head .ant-space-horizontal { flex-wrap: wrap; row-gap: 6px; }
.crumb { margin-bottom: 6px; font-size: 13px; }
.crumb a { color: var(--muted); }
.card { box-shadow: var(--shadow); }
.ant-card { border-color: var(--line) !important; }
.hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.hero h1 { letter-spacing: -.03em; font-size: 34px !important; }
.setup-card { margin-bottom: 22px; background: linear-gradient(135deg, var(--brand-soft), var(--card) 60%) !important; }
.empty-card { padding: 20px 0; text-align: center; }
.click-row { cursor: pointer; }
.page-tabs .ant-tabs-nav { margin-bottom: 18px; }
.nav-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.sticky { position: sticky; top: 80px; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); color: var(--ink); font: inherit; }
button.stat:not(:disabled) { cursor: pointer; transition: border-color .15s, transform .15s; }
button.stat:not(:disabled):hover { border-color: var(--brand); transform: translateY(-1px); }
.stat-ic { grid-row: span 2; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 17px; }
.stat-v { font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat-l { color: var(--muted); font-size: 12.5px; }
div.stat { grid-template-columns: 1fr; }
.stat.warn .stat-ic { background: var(--amber-soft); color: var(--amber); }
.stat.warn .stat-v { color: var(--amber); }

.round-ic { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; background: var(--soft); color: var(--muted); flex: none; font-size: 15px; align-self: flex-start; vertical-align: middle; }
.round-ic .anticon { display: block; }
.round-ic.brand { background: var(--brand-soft); color: var(--brand); }
.round-ic.blue { background: var(--blue-soft); color: var(--blue); }
.round-ic.green { background: var(--green-soft); color: var(--green); }
.round-ic.big { width: 40px; height: 40px; font-size: 19px; border-radius: 12px; }
ol.how { padding-left: 18px; margin: 0 0 14px; } ol.how li { margin: 6px 0; color: var(--muted); } ol.how b { color: var(--ink); }

/* checks and "what happens next" */
.check-row { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; cursor: pointer; color: var(--amber); }
.check-row:hover { background: var(--soft); }
.check-row.ok { color: var(--green); }
.check-row.static { cursor: default; }
.check-row.bad { color: var(--red); }
.check-row > span:not(.anticon):not(.ant-btn-icon) { color: var(--ink); }
.next-box { margin-top: 14px; border-left: 3px solid var(--brand); background: var(--brand-soft); border-radius: 0 10px 10px 0; padding: 10px 14px; font-size: 13.5px; }
.next-box b { display: block; margin-bottom: 2px; color: var(--brand); }

/* radio cards */
.radio-cards { display: flex !important; flex-direction: column; gap: 10px; width: 100%; }
.radio-cards .ant-radio-wrapper { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0; align-items: flex-start; width: 100%; }
.radio-cards .ant-radio-wrapper-checked { border-color: var(--brand); background: var(--brand-soft); }

/* ---------------------------------------------------------------- permission card */
.perm { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; box-shadow: var(--shadow); }
.perm-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 16px; background: var(--ink); color: var(--card); }
[data-theme="dark"] .perm-top { background: #23253a; color: var(--ink); }
.perm-top span { opacity: .75; font-size: 12.5px; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.perm.compact .perm-grid { grid-template-columns: 1fr 1fr; }
.perm-col { padding: 12px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.perm-h { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; margin-bottom: 6px; }
.perm-item { font-size: 13.5px; padding: 2px 0; }
.perm-foot { padding: 9px 16px; font-size: 12.5px; color: var(--red); background: var(--red-soft); }

/* ---------------------------------------------------------------- Systems & Data */
.sys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 12px; }
.sys-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); }
.sys-card.on { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }
.sys-top { display: flex; gap: 12px; align-items: flex-start; }
.sys-title { flex: 1; min-width: 0; }
.sys-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sys-desc { margin-top: 8px; }

/* ---------------------------------------------------------------- agents */
.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.agent-card { text-align: left; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; cursor: pointer; box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
.agent-card:hover { border-color: var(--brand); transform: translateY(-1px); }
/* In the company directory but not usable by this person: readable, clearly not a working tile. */
.agent-card.locked { background: transparent; border-style: dashed; }
.agent-card.locked b, .agent-card.locked .round-ic { opacity: .72; }
.agent-top { display: flex; gap: 12px; align-items: center; }
.agent-tags, .agent-sys { display: flex; flex-wrap: wrap; gap: 6px; }

/* builder */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tpl { font: inherit; color: var(--ink); text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, box-shadow .15s; }
.tpl:hover:not(:disabled) { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.tpl.locked { opacity: .6; cursor: not-allowed; }
.tpl-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tpl-go { color: var(--brand); font-weight: 600; font-size: 13px; margin-top: auto; }
.pick { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; background: var(--card); }
.pick.on { border-color: var(--brand); background: var(--brand-soft); }
.pick.locked { cursor: default; background: var(--soft); }
.pick-body { flex: 1; }

/* test mode and task view */
.test-banner { background: var(--amber-soft); color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); border-radius: 10px; padding: 8px 12px; font-weight: 700; font-size: 13px; letter-spacing: .01em; }
.q-box { background: var(--soft); border-radius: 12px; padding: 10px 14px; }
.answer { margin-top: 12px; border: 1px solid color-mix(in srgb, var(--green) 35%, var(--line)); background: var(--green-soft); border-radius: 12px; padding: 12px 14px; }
.answer.warn { border-color: color-mix(in srgb, var(--amber) 35%, var(--line)); background: var(--amber-soft); }
.answer .pre { margin-top: 4px; font-size: 14px; line-height: 1.6; }
.mini-panel { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; background: var(--card); min-height: 70px; }
.mini-panel.green { background: var(--green-soft); }
.mini-h { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.approval-card { margin-top: 12px; border-color: color-mix(in srgb, var(--amber) 50%, var(--line)) !important; }
.payload { background: var(--soft); border-radius: 8px; padding: 10px; font-size: 12px; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.ask-card textarea { font-size: 15px; }

/* review drawer */
.drawer-body .ant-divider { margin: 20px 0 12px; }
details.instr { margin-top: 10px; }
details.instr summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: 13px; }
details.instr pre { white-space: pre-wrap; font: 13px/1.55 inherit; background: var(--soft); padding: 10px 12px; border-radius: 10px; }
.decide-card { border-color: var(--brand) !important; background: var(--brand-soft) !important; }
.setup-steps { margin-bottom: 18px; }

/* ---------------------------------------------------------------- sign-in */
.auth { min-height: calc(100 * var(--ao-vh)); display: grid; grid-template-columns: 1.1fr 1fr; background: var(--card); }
.auth-art { background: radial-gradient(1200px 600px at 10% 0%, #eef0ff, transparent 60%), radial-gradient(900px 500px at 100% 100%, #e3faf8, transparent 60%), #f7f8fc;
  padding: 36px 48px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
[data-theme="dark"] .auth-art { background: #101119; }
.auth-brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 16px; color: var(--ink); }
.auth-logo { display: block; height: 64px; width: auto; max-width: 100%; }
.auth-logo-small { display: none; height: 48px; width: auto; margin: 0 auto 18px; }
@media (max-width: 900px) { .auth-logo-small { display: block; } }
[data-theme="dark"] .auth-logo-small { background: #fff; border-radius: 8px; padding: 4px 8px; }
.auth-title { font-size: 40px; line-height: 1.1; letter-spacing: -.03em; font-weight: 700; color: var(--ink); margin: 40px 0 20px; }
.auth-title em { font-style: normal; background: linear-gradient(90deg, var(--color-accent-text), var(--color-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; color: var(--muted); }
.auth-points li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-2); margin-right: 10px; }
.auth-img { max-width: 100%; max-height: calc(42 * var(--ao-vh)); opacity: .9; align-self: center; }
.auth-side { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; position: relative; }
.auth-lang { position: absolute; top: 20px; right: 24px; }
.auth-card { width: 100%; max-width: 420px; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth-art { display: none; } }

.danger-switch.ant-switch-checked { background: var(--red) !important; }

/* Connections page */
.conn-card .conn-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; color: var(--ant-color-text-secondary, #6b6f80); }
.eyebrow-title { text-transform: uppercase; letter-spacing: .06em; font-size: 12px !important; color: #6b6f80 !important; }
.card { overflow-wrap: break-word; }

/* ---------- private office (for example Henry's) */
.private-hero { padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(135deg, var(--brand-soft), var(--card) 65%); }
.ask-card { margin-bottom: 16px; }
.convo-item { display: grid; gap: 6px; margin-bottom: 16px; }
.bubble { max-width: 860px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.bubble.me { justify-self: end; background: var(--brand-soft); border-color: transparent; max-width: 640px; }
.bubble.agent { justify-self: start; }
.mail-approval .mail-head { display: grid; grid-template-columns: 70px 1fr; gap: 6px 10px; align-items: center; margin-bottom: 8px; }
.mail-approval .mail-head label { color: var(--muted); font-size: 12.5px; }
.mail-approval .mail-body { font-size: 14px; line-height: 1.55; }
.draft-text { max-height: 180px; overflow: auto; padding: 8px 10px; margin: 6px 0; border-radius: 10px; background: var(--soft); font-size: 13px; }
.guard-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.switch-list { display: grid; gap: 12px; }
.switch-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.examples { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.ex-row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ex-group { min-width: 120px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.tab-help .ant-alert-message { font-size: 13.5px; }
.sys-pick { display: grid; gap: 8px; }
.sys-pick .ant-checkbox-wrapper { align-items: flex-start; }
.agent-settings .field-label:first-of-type { margin-top: 0; }

/* My inbox */
/* Reordering a step by dragging its handle. The drop line only appears while a step is actually being carried. */
.flow-grip { cursor: grab; color: var(--muted); font-size: 15px; line-height: 1; padding: 0 2px; user-select: none; }
.flow-grip:active { cursor: grabbing; }
.flow-step.dragging { opacity: 0.55; }
.flow-drop { height: 6px; margin: -3px 0; border-radius: 3px; }
.flow-drop.on { background: var(--color-accent); height: 4px; margin: -2px 0; }

/* A flow field that carries results from earlier steps. The chip is what the person sees; the {{...}} underneath
   is never shown. Deliberately looks like a field, not like code. */
.flow-token { position: relative; display: inline-block; vertical-align: top; width: 100%; }
.flow-token-box { min-height: 32px; padding: 4px 92px 4px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); line-height: 22px; overflow-wrap: anywhere; }
.flow-token.area .flow-token-box { min-height: 74px; padding-bottom: 26px; }
.flow-token-box:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 12%, transparent); }
.flow-token-box:empty::before { content: attr(data-placeholder); color: var(--muted); }
.flow-tok { display: inline-flex; align-items: baseline; gap: 5px; margin: 1px 2px; padding: 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 13%, transparent); color: var(--brand); font-size: 12.5px; white-space: nowrap; }
.flow-tok i { font-style: normal; opacity: 0.7; font-size: 11px; }
.flow-token .flow-values { position: absolute; right: 4px; top: 3px; }
.flow-token.area .flow-values { top: auto; bottom: 3px; }
.flow-pick { max-height: 340px; overflow: auto; width: 320px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); padding: 6px; }
.flow-pick-h { font-size: 12px; color: var(--muted); padding: 6px 8px; }
.flow-pick-from { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 8px 8px 3px; }
.flow-pick-i { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: 7px; cursor: pointer; color: inherit; }
.flow-pick-i:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }

/* What an agent is asking permission to do, as named fields instead of JSON. */
.act-details { display: grid; grid-template-columns: 132px 1fr; gap: 6px 14px; margin: 6px 0 4px; }
.act-details .act-row { display: contents; }
.act-details .act-row.wide .act-v { white-space: pre-wrap; background: var(--soft, rgba(127, 127, 127, 0.07)); border-radius: 8px; padding: 8px 10px; }
.act-details .act-k { color: var(--muted); font-size: 12.5px; padding-top: 2px; }
.act-details .act-v { word-break: break-word; }

/* Every page's own guide link, beside its title: present on every screen, quiet until somebody needs it. */
.page-guide { color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding-inline: 10px; }
.page-guide:hover { color: var(--brand) !important; border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }

/* "A new version is available": a dark bar at the foot of the screen. It stays until the person updates, so it must
   never cover anything, and it keeps its own dark colours in either theme so it reads as a notice and not as content. */
.new-version {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 1100;
  display: flex; align-items: center; gap: 16px; max-width: min(calc(94 * var(--ao-vw)), 660px);
  padding: 12px 14px 12px 18px; border-radius: 14px;
  background: #0b1220; color: #fff; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38);
}
.new-version .nv-icon { font-size: 17px; color: #cbd5e1; flex: none; }
.new-version .nv-text { flex: 1; min-width: 0; }
.new-version .nv-title { font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.new-version .nv-hint { margin-top: 3px; font-size: 11.5px; color: #94a3b8; }
.new-version .nv-hint b { color: #e2e8f0; font-weight: 600; }
.new-version .ant-btn { flex: none; background: #fff; border-color: #fff; color: #0b1220; font-weight: 600; }
.new-version .ant-btn:hover, .new-version .ant-btn:focus { background: #e2e8f0 !important; border-color: #e2e8f0 !important; color: #0b1220 !important; }
@media (max-width: 560px) {
  .new-version { flex-wrap: wrap; gap: 10px; bottom: 12px; }
  .new-version .nv-text { flex-basis: 100%; }
}

/* The signature as the person receiving it will see it: a white ground and dark text whichever theme the app is in. */
.sig-edit { background: #fff !important; color: #222; font-family: Aptos, Calibri, Arial, sans-serif; font-size: 11pt; }
.sig-edit img { max-width: 100%; height: auto; }
.sig-edit a { color: #0563c1; }
.sig-edit table { border-collapse: collapse; }

.mail-grid { display: grid; grid-template-columns: 210px minmax(260px, 380px) 1fr; gap: 12px; align-items: start; }
.mail-auto { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; padding: 0 6px; }
.mail-folders .mail-folder { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.mail-folders .mail-folder:hover { background: rgba(99, 102, 241, 0.07); }
.mail-folders .mail-folder.on { background: rgba(99, 102, 241, 0.14); font-weight: 600; }
.mail-list { max-height: calc(calc(100 * var(--ao-vh)) - 190px); overflow: auto; }
.mail-row { padding: 9px 12px; border-bottom: 1px solid rgba(128, 128, 128, 0.14); cursor: pointer; }
.mail-row:hover { background: rgba(99, 102, 241, 0.05); }
.mail-row.on { background: rgba(99, 102, 241, 0.12); }
.mail-row.unread .mail-subj, .mail-row.unread b { font-weight: 700; }
.mail-row.unread { border-left: 3px solid #6366f1; }
.mail-row-top { display: flex; justify-content: space-between; gap: 8px; }
.mail-row-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-prev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-read { min-height: 420px; }
.mail-thread-row { padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.mail-thread-row:hover, .mail-thread-row.on { background: rgba(99, 102, 241, 0.08); }
.att-chip { padding: 4px 8px; }
@media (max-width: 1100px) { .mail-grid { grid-template-columns: 1fr; } .mail-list { max-height: calc(50 * var(--ao-vh)); } }

.composer .compose-row { display: grid; grid-template-columns: 70px 1fr auto; gap: 8px; align-items: center; }
.composer .compose-row > span { color: rgba(128, 128, 128, 0.95); font-size: 13px; }
.composer .compose-tools { padding: 4px 0; }

/* ---------------------------------------------------------------- Agent chat
   Warm ambient light behind glass panels: a candle-coloured glow sits under the thread, the agent answers on
   soft cards, the person's messages on the brand gradient. Motion is short and switched off for reduced motion. */
:root { --warm: #ffb36b; --warm-soft: rgba(255, 179, 107, .16); --glass: rgba(255, 255, 255, .72); --glass-line: rgba(255, 255, 255, .6); }
[data-theme="dark"] { --warm-soft: rgba(255, 170, 90, .10); --glass: rgba(24, 25, 33, .72); --glass-line: rgba(255, 255, 255, .06); }
.chat-shell { display: grid; grid-template-columns: 320px 1fr; gap: 16px; height: calc(calc(100 * var(--ao-vh)) - 60px - 56px); min-height: 520px; }
.chat-side { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px; box-shadow: var(--shadow); min-height: 0; }
.new-chat { height: 42px; border-radius: 12px; font-weight: 600; box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--brand) 70%, transparent); }
.chat-search { border-radius: 10px; }
.conv-list { overflow: auto; margin: 0 -6px; padding: 0 6px; flex: 1; min-height: 0; }
.conv { display: flex; align-items: center; gap: 6px; padding: 9px 10px; border-radius: 12px; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.conv:hover { background: var(--soft); }
.conv.on { background: var(--brand-soft); }
.conv:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.conv-main { min-width: 0; flex: 1; }
/* two lines of the title, and the agent name gives way before the date does (dates were cut to "Sep 26, 20") */
.conv-title { font-weight: 600; font-size: 13.5px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.conv-sub .conv-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-sub .conv-when { flex: none; white-space: nowrap; }
.conv-title .pin { color: var(--brand); margin-right: 6px; font-size: 11px; }
/* A notice under a routine with its own button (Run on Monday only): wraps, never clipped; the button on its own line. */
.conv-note { font-size: 11.5px; color: var(--muted); white-space: normal; overflow-wrap: anywhere; line-height: 1.4; margin-top: 2px; }
.conv-note .ant-btn { display: block; white-space: normal; text-align: left; }
.conv-sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.conv-empty { padding: 18px 6px; text-align: center; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(19, 163, 107, .6); animation: livePulse 1.6s infinite; flex: none; }
/* Someone is waiting to be let in: the People entry pulses until an administrator acts. */
.side-menu .nav-attention { animation: attnRow 1.4s ease-in-out infinite; }
.side-menu .nav-attention .anticon { color: #f5222d; }
.blink-badge .ant-badge-count { animation: attnDot 1.4s infinite; }
@keyframes attnRow { 0%, 100% { background: transparent; } 50% { background: rgba(245, 34, 45, .12); } }
@keyframes attnDot { 0% { box-shadow: 0 0 0 0 rgba(245, 34, 45, .6); } 70% { box-shadow: 0 0 0 8px rgba(245, 34, 45, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 34, 45, 0); } }
@media (prefers-reduced-motion: reduce) { .side-menu .nav-attention, .blink-badge .ant-badge-count { animation: none; } }
/* A collection agent at work: a green pulse and plain words; stronger while it is reading. */
.live-state { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 8px 12px; border-radius: 8px; background: rgba(19, 163, 107, .08); border: 1px solid rgba(19, 163, 107, .25); font-size: 13px; }
.live-state .small { flex-basis: 100%; }
.live-state.compact { padding: 2px 0 0; background: none; border: 0; font-size: 12px; }
.live-state.running:not(.compact) { background: rgba(19, 163, 107, .16); }
/* An own-inbox agent's permission to send: amber while every email waits, green once the owner allowed it. */
.send-perm { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin: 12px 0; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .08); }
.send-perm.on { border-color: rgba(19, 163, 107, .4); background: rgba(19, 163, 107, .08); }
/* Waiting for this person's approval: an amber stripe and wash on the row, in the review queue and its cards. */
.ant-table-tbody > tr.needs-you > td { background: rgba(245, 158, 11, .09); }
.ant-table-tbody > tr.needs-you > td:first-child { box-shadow: inset 4px 0 0 #f59e0b; }
.ant-list-item.needs-you { background: rgba(245, 158, 11, .09); box-shadow: inset 4px 0 0 #f59e0b; padding-left: 14px !important; border-radius: 6px; margin-bottom: 6px; }
.needs-you-card { border-color: #f59e0b !important; }
.needs-you-ic { color: #f59e0b; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(19, 163, 107, .55); } 70% { box-shadow: 0 0 0 7px rgba(19, 163, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(19, 163, 107, 0); } }

.chat-main { position: relative; display: flex; flex-direction: column; min-height: 0; border-radius: 20px; border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(900px 420px at 50% 108%, var(--warm-soft), transparent 70%), radial-gradient(700px 360px at 0% 0%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 65%), var(--card); box-shadow: var(--shadow); }
.chat-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(14px); position: relative; z-index: 2; }
.chat-head-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.chat-title { font-weight: 700; font-size: 16px; letter-spacing: -.01em; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head-actions { display: flex; gap: 2px; }
.avatar { width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #fff;
  background: linear-gradient(145deg, #6366f1, #0ea5a4); box-shadow: 0 4px 14px -4px rgba(79, 70, 229, .55), inset 0 1px 0 rgba(255,255,255,.35); }
.avatar.big { width: 40px; height: 40px; border-radius: 13px; font-size: 18px; }
.chat-scroll { flex: 1; overflow: auto; padding: 22px clamp(14px, calc(4 * var(--ao-vw)), 48px) 10px; scroll-behavior: smooth; }
.chat-empty { margin-top: calc(12 * var(--ao-vh)); }
.xchg { max-width: 860px; margin: 0 auto 22px; animation: rise .28s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg { display: flex; flex-direction: column; margin-bottom: 12px; }
.msg.me { align-items: flex-end; }
.msg.me .bubble { max-width: min(640px, 88%); padding: 11px 15px; border-radius: 18px 18px 6px 18px; color: #fff;
  background: linear-gradient(135deg, #5b54ee, #4338ca); box-shadow: 0 8px 22px -12px rgba(67, 56, 202, .8); font-size: 14.5px; line-height: 1.55; }
.msg.me .edit-box { min-width: min(560px, calc(70 * var(--ao-vw))); }
.msg.me .edit-box textarea { background: rgba(255,255,255,.95); color: #151827; }
.edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.msg.agent { flex-direction: row; gap: 12px; align-items: flex-start; }
.agent-body { min-width: 0; flex: 1; }
.agent-name { font-size: 12px; font-weight: 600; color: var(--muted); margin: 6px 0 6px; }
.msg-actions { display: flex; align-items: center; gap: 2px; margin-top: 4px; opacity: .55; transition: opacity .15s ease; flex-wrap: wrap; }
.msg:hover .msg-actions, .msg-actions:focus-within { opacity: 1; }
.msg-time { font-size: 11px; color: var(--muted); margin-left: 6px; }
.thinking { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); width: fit-content; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); opacity: .35; animation: dot 1.1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.chat-md { font-size: 14.5px; line-height: 1.65; word-break: break-word; }
.chat-md > :first-child { margin-top: 0; } .chat-md > :last-child { margin-bottom: 0; }
.chat-md p { margin: 0 0 10px; }
.chat-md h1, .chat-md h2, .chat-md h3, .chat-md h4 { margin: 14px 0 8px; letter-spacing: -.01em; line-height: 1.3; }
.chat-md h1 { font-size: 19px; } .chat-md h2 { font-size: 17px; } .chat-md h3, .chat-md h4 { font-size: 15px; }
.chat-md ul, .chat-md ol { padding-left: 22px; margin: 0 0 10px; }
.chat-md li { margin: 3px 0; }
.chat-md a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.chat-md blockquote { margin: 0 0 10px; padding: 6px 14px; border-left: 3px solid var(--warm); background: var(--warm-soft); border-radius: 0 10px 10px 0; }
.chat-md code { font-family: "Cascadia Code", Consolas, ui-monospace, monospace; font-size: 12.8px; background: var(--soft); border: 1px solid var(--line); padding: 1px 5px; border-radius: 6px; }
.chat-md table { border-collapse: separate; border-spacing: 0; margin: 8px 0 14px; font-size: 13.5px; display: block; overflow-x: auto; max-width: 100%; width: fit-content;
  border: 1px solid var(--line); border-radius: 12px; }
.chat-md th, .chat-md td { padding: 8px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.chat-md th + th, .chat-md td + td { border-left: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.chat-md th { background: color-mix(in srgb, var(--brand) 12%, var(--soft)); font-weight: 650; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.chat-md tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--soft) 55%, transparent); }
.chat-md tbody tr:last-child td { border-bottom: 0; }
.chat-md td { font-variant-numeric: tabular-nums; }
/* A table never breaks inside a word or a figure: the answer around it may wrap anywhere (long links), and inherited
   here that let the browser squeeze every column to one letter ("Depreciat ion", "37,420.6 6"; Daryl, 2 Oct 2026).
   Text wraps between words within a readable width; codes and figures stay on one line; the table scrolls instead. */
.chat-md table, .chat-md table * { overflow-wrap: normal; word-break: normal; }
.chat-md table td { white-space: normal; min-width: 4ch; max-width: 46ch; }
.chat-md table td.text { min-width: 18ch; }
.chat-md table td.short, .chat-md table td.num { white-space: nowrap; }
.chat-md table td.span { font-weight: 600; white-space: normal; }
.chat-md td.num, .chat-md th.num, .chat-md th[align="right"], .chat-md td[align="right"] { text-align: right; white-space: nowrap; }
.chat-md tr.total td { font-weight: 700; background: color-mix(in srgb, var(--brand) 8%, var(--soft)); border-top: 2px solid color-mix(in srgb, var(--brand) 45%, var(--line)); }
.chat-md h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, inherit); margin-top: 18px; }
.chat-md hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
/* A code block follows the theme (29 Oct 2026: in light mode it had a dark head with grey text and grey code on a light block): light mode is dark text on a light block, dark mode is the dark block it always was. */
.code-block { margin: 8px 0 12px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--soft); color: var(--ink); }
.code-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; font-size: 11.5px; color: var(--ink); background: color-mix(in srgb, var(--soft) 60%, var(--line)); border-bottom: 1px solid var(--line); }
.code-copy { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 2px 9px; font-size: 11.5px; cursor: pointer; }
.code-copy:hover { background: var(--brand-soft); }
.code-block pre { margin: 0; padding: 12px 14px; overflow-x: auto; }
.code-block pre code { background: none; border: 0; padding: 0; color: var(--ink); font-size: 12.8px; line-height: 1.55; }
html[data-theme="dark"] .code-block { border-color: #262a3a; background: #12131a; color: #e6e8f2; }
html[data-theme="dark"] .code-head { color: #a4a9c0; background: #1a1c26; border-bottom: 0; }
/* 3 Nov 2026 (Jon Leung): a long code block (device output, logs) opens folded under one bar; Copy still takes all of it */
.code-fold > summary { cursor: pointer; padding: 8px 12px; font-size: 12.5px; color: var(--nx-accent, #3b5bdb); list-style: none; user-select: none; }
.code-fold > summary::-webkit-details-marker { display: none; }
.code-fold > summary::before { content: "\25B8"; display: inline-block; margin-right: 6px; transition: transform .15s; }
.code-fold[open] > summary::before { transform: rotate(90deg); }
.code-fold > summary:focus-visible { outline: 2px solid var(--nx-accent, #3b5bdb); outline-offset: -2px; }
html[data-theme="dark"] .code-copy { background: rgba(255,255,255,.06); color: #dfe3f5; border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .code-copy:hover { background: rgba(255,255,255,.14); }
html[data-theme="dark"] .code-block pre code { color: #e6e8f2; }

.chat-composer { padding: 10px clamp(14px, calc(4 * var(--ao-vw)), 48px) 14px; position: relative; z-index: 2; }
.composer-box { max-width: 860px; margin: 0 auto; display: flex; align-items: flex-end; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 18px;
  background: var(--glass); backdrop-filter: blur(16px); border: 1px solid var(--line); box-shadow: 0 10px 30px -18px rgba(16, 24, 40, .45), inset 0 1px 0 var(--glass-line); transition: box-shadow .2s ease, border-color .2s ease; }
.composer-box:focus-within { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent), 0 12px 32px -18px rgba(16, 24, 40, .5); }
.composer-box textarea { border: 0 !important; box-shadow: none !important; background: transparent !important; resize: none; padding: 6px 0 !important; font-size: 14.5px; }
.composer-note { max-width: 860px; margin: 6px auto 0; font-size: 11.5px; text-align: center; }

.chat-welcome { flex: 1; display: grid; place-content: center; justify-items: center; text-align: center; gap: 10px; padding: 40px 24px; position: relative; }
.chat-welcome h2 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
.chat-welcome p { max-width: 520px; margin: 0 0 8px; }
.glow-orb { width: 96px; height: 96px; border-radius: 50%; margin-bottom: 6px;
  background: radial-gradient(circle at 35% 30%, #fff6e8, #ffc98f 32%, #f08a4b 62%, rgba(240, 138, 75, 0) 72%);
  box-shadow: 0 0 60px 18px rgba(255, 170, 90, .35); animation: flicker 3.4s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { transform: scale(1); opacity: .95; } 45% { transform: scale(1.04); opacity: 1; } 60% { transform: scale(.98); opacity: .9; } }
.center-pad { flex: 1; display: grid; place-items: center; }

@media (max-width: 900px) {
  .chat-shell { grid-template-columns: 1fr; height: auto; }
  .chat-side { max-height: 260px; }
  .chat-main { min-height: calc(72 * var(--ao-vh)); }
}
@media (prefers-reduced-motion: reduce) {
  .xchg, .glow-orb, .dots i, .live-dot { animation: none !important; }
  .chat-scroll { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- chat files, charts, diagrams */
.answer-body > * + * { margin-top: 10px; }
/* Copy sits top right of every answer: faint until the answer is pointed at, always there on touch screens. */
.answer-body { position: relative; }
.answer-body > .answer-copy { position: absolute; top: -4px; right: 0; margin: 0; z-index: 1; opacity: .55; transition: opacity .15s; color: var(--muted, #667); }
.answer-body:hover > .answer-copy, .answer-body > .answer-copy:focus-visible { opacity: 1; }
@media (hover: none) { .answer-body > .answer-copy { opacity: 1; } }
.answer-body > .answer-copy + * { margin-top: 0; padding-right: 76px; }
.msg-files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 6px; max-width: min(640px, 88%); }
.composer-wrap { max-width: 860px; margin: 0 auto; }
.tray { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.file-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 280px; height: 32px; padding: 0 8px 0 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; font-size: 12.5px; }
.file-chip .fc-name { border: 0; background: none; padding: 0; color: var(--ink); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; font-weight: 600; }
.file-chip .fc-name:disabled { cursor: default; }
.file-chip .fc-size { color: var(--muted); font-size: 11px; flex: none; }
.file-chip .fc-x { border: 0; background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.file-chip .fc-x:hover { color: var(--red); }
.file-chip .fc-prog { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--color-accent); transition: width .2s ease; }
.file-chip .fc-tag { margin: 0; }
.file-chip.up { opacity: .85; }
.file-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); max-width: 640px;
  background: linear-gradient(180deg, var(--card), var(--soft)); box-shadow: 0 8px 24px -18px rgba(16, 24, 40, .5), 0 0 0 1px var(--glass-line) inset; }
.file-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--soft); border: 1px solid var(--line); flex: none; }
.file-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.file-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.preview-box { max-height: calc(70 * var(--ao-vh)); overflow: auto; }
.paper { background: #fff; color: #151827; padding: 36px 44px; border-radius: 6px; box-shadow: 0 2px 14px rgba(0,0,0,.12); max-width: 780px; margin: 0 auto; }
[data-theme="dark"] .paper { box-shadow: 0 2px 20px rgba(0,0,0,.6); }
.paper.chat-md code { background: #f4f4f7; border-color: #e7e8ef; }
.plain-preview { white-space: pre-wrap; word-break: break-word; font: 12.5px/1.55 "Cascadia Code", Consolas, monospace; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 0; }
.csv-wrap { overflow: auto; max-height: calc(64 * var(--ao-vh)); border: 1px solid var(--line); border-radius: 10px; }
.csv-table { border-collapse: collapse; font-size: 12.5px; width: max-content; min-width: 100%; }
.csv-table th, .csv-table td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 6px 10px; text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
.csv-table th { position: sticky; top: 0; background: #D0CECE; color: #151827; font-weight: 600; }
.slides { display: grid; gap: 14px; }
.slide { position: relative; aspect-ratio: 16 / 9; background: #fff; color: #151827; border-radius: 8px; padding: 26px 34px; box-shadow: 0 2px 14px rgba(0,0,0,.14); overflow: hidden; }
.slide-bar { position: absolute; left: 0; top: 0; right: 0; height: 6px; background: var(--color-accent); }
.slide-title { font-size: 22px; font-weight: 700; color: #1e1b4b; margin-bottom: 10px; }
.slide-body { font-size: 14px; }
.slide-n { position: absolute; right: 14px; bottom: 10px; font-size: 11px; color: #9aa0b5; }
.html-preview { width: 100%; height: calc(60 * var(--ao-vh)); border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.html-preview.tall { height: calc(70 * var(--ao-vh)); }
.img-preview { max-width: 100%; max-height: calc(70 * var(--ao-vh)); display: block; margin: 0 auto; border-radius: 10px; }
.chart-box { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--card); max-width: 760px; box-shadow: 0 8px 24px -20px rgba(16, 24, 40, .6); }
.chart-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.chart-acts { display: flex; gap: 6px; }
.chart-svg { width: 100%; height: auto; color: var(--ink); display: block; }
.mermaid-out { overflow-x: auto; text-align: center; }
.mermaid-out svg { max-width: 100%; height: auto; }
.chat-main.dragging { outline: 2px dashed var(--brand); outline-offset: -8px; }
.drop-hint { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; padding: 20px;
  background: color-mix(in srgb, var(--card) 86%, transparent); backdrop-filter: blur(4px); pointer-events: none; font-size: 15px; }
.drop-hint .anticon { font-size: 44px; color: var(--brand); }
.drop-hint span { color: var(--muted); font-size: 13px; }

/* routines */
/* A count beside a tab label, centred on the label's line (it used to sit high and get clipped). */
.seg-label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; }
.seg-n { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--color-accent); color: var(--color-on-accent); font-size: 11px; line-height: 18px; font-weight: 600; }
.conv.routine.off { opacity: .6; }
.routine-when { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.time-in { height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; }
.day-pick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.day { height: 32px; min-width: 48px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; font: inherit; font-size: 13px; }
.day.on { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.day:focus-visible, .time-in:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.day-pick.month { display: grid; grid-template-columns: repeat(7, minmax(36px, 1fr)); max-width: 380px; align-items: center; }
.day-pick.month .day { min-width: 0; padding: 0; }
.day-pick.month .muted { grid-column: 1 / -1; }
.tray.kept { align-items: center; padding: 6px 8px; border-radius: 10px; background: var(--soft); border: 1px dashed var(--line); }
.file-chip .fc-pin { color: var(--brand); font-size: 12px; flex: none; }

/* dashboard gallery */
.gal-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.gal-shell.fresh { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .gal-shell { grid-template-columns: minmax(0, 1fr); } .gal-side { position: static !important; display: flex; flex-wrap: wrap; gap: 4px; } .gal-side .gal-div, .gal-side .gal-colh, .gal-side .gal-hint { display: none; } }
.gal-side { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.gal-nav { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 7px 10px; border-radius: 9px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; text-align: left; }
.gal-nav span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.gal-nav .anticon { flex: none; width: 16px; }
.gal-nav em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.gal-nav:hover { background: var(--soft); }
.gal-nav.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.gal-div { height: 1px; background: var(--line); margin: 6px 4px; }
.gal-colh { padding: 4px 10px 2px; }
.gal-hint { padding: 2px 10px 6px; }
.gal-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.gal-toolbar .ant-segmented { max-width: 100%; overflow-x: auto; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.gal-card { position: relative; display: flex; flex-direction: column; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.gal-card:hover, .gal-card:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); box-shadow: 0 14px 34px -22px rgba(16, 24, 40, .55); outline: none; }
.gal-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; }
.gal-title { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.gal-title b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-sub { min-height: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gal-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.gal-tags .ant-tag { margin: 0; }
.gal-meta { margin-top: auto; }
.gal-star { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--card) 85%, transparent); color: var(--muted); box-shadow: 0 2px 8px rgba(0,0,0,.12); opacity: 0; transition: opacity .15s; }
.gal-card:hover .gal-star, .gal-star.on, .gal-star:focus-visible { opacity: 1; }
.gal-star.on { color: #f59e0b; }
.gal-thumb { --c: #4f46e5; position: relative; height: 118px; padding: 12px; display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, var(--card)), color-mix(in srgb, var(--c) 5%, var(--card))); border-bottom: 1px solid var(--line); }
.gal-thumb .gt-kpis { display: flex; gap: 6px; }
.gal-thumb .gt-kpis span { flex: 1; height: 22px; border-radius: 6px; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.08); position: relative; }
.gal-thumb .gt-kpis span::after { content: ''; position: absolute; left: 6px; top: 7px; width: 55%; height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--c) 55%, transparent); }
.gal-thumb .gt-body { flex: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 6px; }
.gal-thumb .gt-chart { display: flex; align-items: flex-end; gap: 4px; padding: 6px; border-radius: 6px; background: var(--card); }
.gal-thumb .gt-chart i { flex: 1; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--c) 70%, transparent); }
.gal-thumb .gt-table { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 6px; background: var(--card); }
.gal-thumb .gt-table span { height: 6px; border-radius: 3px; background: var(--soft); }
.gal-thumb .gt-live { position: absolute; left: 12px; bottom: 8px; font-size: 10.5px; font-weight: 600; color: var(--green); background: var(--card); padding: 1px 8px; border-radius: 999px; }
.gal-thumb.agent { align-items: center; justify-content: center; font-size: 30px; color: var(--brand); flex-direction: column; gap: 4px; background: radial-gradient(circle at 30% 20%, var(--brand-soft), var(--card)); }
.gal-thumb.agent span { font-size: 12px; font-weight: 600; }
/* My connections: the card a shortcut opens is lit up. */
.conn-card.conn-focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
/* "Make a dashboard" of an agent: every template as a card to pick, the person's words, and their samples. */
.ab-form { display: flex; flex-direction: column; gap: 14px; }
.ab-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; max-height: 340px; overflow-y: auto; padding: 2px; }
.ab-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ab-card:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.ab-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ab-card.on { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent); }
.ab-card .gal-thumb { height: 84px; padding: 9px; }
.ab-card-text { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; min-width: 0; }
.ab-card-text b { font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.ab-card-text .small { line-height: 1.35; }
.ab-peek { position: absolute; top: 6px; right: 6px; background: var(--card) !important; }
.ab-files { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ab-file { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 4px 4px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.ab-file img { height: 32px; width: auto; max-width: 56px; object-fit: cover; border-radius: 4px; }
.ab-file.error { border-color: color-mix(in srgb, var(--red, #d64545) 45%, var(--line)); }
.ab-file-name { min-width: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.gal-empty { padding: 40px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gal-suggest { margin-top: 26px; }
.gal-suggest-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.gal-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.gal-mini { display: flex; flex-direction: column; gap: 4px; padding: 0 0 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.gal-mini .gal-thumb { height: 76px; padding: 8px; gap: 5px; }
.gal-mini b, .gal-mini span { padding: 0 10px; }
.gal-ideas { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.gal-ideas button { text-align: left; border: 1px dashed var(--line); background: var(--soft); color: var(--ink); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.gal-ideas button:hover { border-color: var(--brand); }
.gal-preview .ant-modal-body { max-height: calc(78 * var(--ao-vh)); overflow: auto; }
.src-arg { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.src-arg > span { width: 150px; }

/* how to ask */
.howto-hero { background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--brand) 10%, var(--card)), var(--card)); }
.howto-moves { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.howto-move { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.howto-move .hm-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); font-size: 17px; margin-bottom: 4px; }
.howto-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.howto-sec { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
.howto-list { padding-left: 20px; margin: 0 0 12px; }
.howto-list li { margin: 3px 0; }
.howto-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.howto-compare .hc { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); }
.howto-compare .hc.poor { background: color-mix(in srgb, #e11d48 6%, var(--card)); }
.howto-compare .hc.good { background: color-mix(in srgb, #13a36b 7%, var(--card)); }
.howto-compare .hc-h { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.howto-compare .poor .hc-h { color: #e11d48; } .howto-compare .good .hc-h { color: #13a36b; }
.howto-compare .hc-q { font-size: 13.5px; }
.howto-compare .hc-why { grid-column: 1 / -1; }
.howto-formats { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.howto-rules { padding-left: 18px; margin: 0; } .howto-rules li { margin: 6px 0; }
.howto-lib-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 28px 0 10px; }
.howto-lib-head h3 { margin: 0; font-size: 18px; }
.howto-filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.howto-filter .ant-segmented { max-width: 100%; overflow-x: auto; }
.howto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.howto-job { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.howto-job .hj-title { font-weight: 700; display: flex; gap: 6px; align-items: center; }
.howto-job .hj-ask { font-size: 13px; color: var(--ink); flex: 1; }
.howto-job .hj-meta { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.howto-job .hj-acts { display: flex; gap: 6px; }
.howto-tplgroup { margin-bottom: 16px; } .howto-tplgroup .eyebrow { margin-bottom: 8px; }
@media (max-width: 900px) { .howto-moves { grid-template-columns: 1fr 1fr; } .howto-compare { grid-template-columns: 1fr; } }

/* assign a task */
.assign-when { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.assign-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.assign-tip { max-width: 560px; }

/* chat inside a private office */
.chat-shell.embedded { height: calc(calc(100 * var(--ao-vh)) - 330px); min-height: 560px; }
.welcome-ex { margin-top: 18px; text-align: left; display: grid; gap: 10px; max-width: 760px; }
.welcome-ex .ex-row { display: flex; gap: 12px; align-items: flex-start; }
.welcome-ex .ex-list { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 900px) { .chat-shell.embedded { height: auto; } .welcome-ex .ex-row { flex-direction: column; gap: 4px; } }

/* ---------------------------------------------------------------- dashboards */
.dash-h { margin: 8px 0 12px !important; }
.dash-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 26px; }
.dash-card { text-align: left; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, transform .15s; }
.dash-card:hover { border-color: var(--brand); transform: translateY(-1px); }
.dash-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dash-card-top { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--brand); } .dash-card-top b { color: var(--ink); }
.dash-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.dash-meta { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; } .dash-meta .stale { color: var(--amber); font-weight: 600; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.dash-tile { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px 18px; box-shadow: var(--shadow); min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.dash-tile.wide { grid-column: span 2; }
.dash-tile.red { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); }
.dash-tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dash-tile-title { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.dash-how-btn { color: var(--muted) !important; margin: -4px -6px 0 0; }
.dash-how { max-width: 340px; } .dash-how p { margin: 0 0 6px; }
.dash-value { font-size: 40px; line-height: 1.05; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dash-unit { font-size: 15px; font-weight: 500; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.dash-sub { font-size: 12.5px; margin-top: 6px; } .dash-trend { font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-status { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; padding: 6px 14px; border-radius: 999px; }
.dash-status.ok { color: var(--green); background: var(--green-soft); } .dash-status.watch { color: var(--amber); background: var(--amber-soft); } .dash-status.act { color: var(--red); background: var(--red-soft); }
.dash-reason { margin: 10px 0 0; color: var(--ink); }
.dash-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.dash-text { margin: 0; font-size: 15px; line-height: 1.6; }
.dash-err { color: var(--amber); display: flex; gap: 8px; align-items: flex-start; }
.dash-bars { display: flex; flex-direction: column; gap: 8px; }
.dash-bar { display: grid; grid-template-columns: minmax(70px, 30%) 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.dash-bar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.dash-bar-track { height: 12px; background: var(--soft); border-radius: 6px; overflow: hidden; }
.dash-bar-fill { display: block; height: 100%; background: var(--color-accent); border-radius: 6px; min-width: 2px; }
.dash-bar b { font-variant-numeric: tabular-nums; }
.dash-foot { margin-top: 18px; }
.dash-edit-tile { margin-bottom: 12px !important; border-radius: 12px !important; }
@media (max-width: 700px) { .dash-tile.wide { grid-column: span 1; } .dash-value { font-size: 32px; } }
/* TV mode: the board alone, in large type, for a screen on the wall. */
body.dash-tv .side, body.dash-tv .top { display: none !important; }
body.dash-tv .content { padding: 28px 36px; } body.dash-tv .content-inner { max-width: none; }
body.dash-tv .dash-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
body.dash-tv .dash-value { font-size: 64px; } body.dash-tv .dash-tile-title { font-size: 16px; } body.dash-tv .dash-status { font-size: 26px; }
body.dash-tv .dash-list, body.dash-tv .dash-text, body.dash-tv .dash-reason { font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .dash-card { transition: none; } .dash-card:hover { transform: none; } }

/* Chat with AI (no agent): a quieter second button under New chat. */
.new-chat.direct-chat { margin-top: 8px; box-shadow: none; border-color: color-mix(in srgb, var(--brand) 45%, var(--line, #d9d9d9)); color: var(--brand); }

/* Guides: grouped in reading order, each numbered. */
.guide-section { margin-bottom: 28px; }
.guide-section-title.ant-typography { margin: 8px 0 2px; }
.guide-route { margin: 4px 0 14px; padding: 10px 14px; border-radius: 10px; background: var(--brand-soft); color: var(--ink); }
.guide-no { font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }

/* Dashboards: the administrators' list. */
.dash-all { margin-top: 28px; }

/* Permission card: the colleagues an agent may ask. */
.perm-ask { padding: 10px 14px; border-top: 1px solid var(--line, rgba(0,0,0,.08)); font-size: 13px; }


/* ---------------------------------------------------------------- flows: a vertical builder, one card per step */
.flow-canvas { display: flex; flex-direction: column; gap: 10px; max-width: 980px; }
.flow-list { display: flex; flex-direction: column; gap: 10px; }
.flow-list.nested { gap: 8px; }
.flow-step { border: 1px solid var(--line); border-left: 4px solid var(--kind); border-radius: 12px; background: var(--card); box-shadow: var(--shadow); }
.flow-step-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px 12px; border-bottom: 1px solid var(--line); }
.flow-step-ic { color: var(--kind); font-size: 16px; display: inline-flex; }
.flow-step-head b { white-space: nowrap; }
.flow-id { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; margin: 0; }
.flow-title { flex: 1; min-width: 80px; color: var(--muted); }
.flow-step-tools { margin-left: auto; }
.flow-step-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.flow-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.flow-field > label { min-width: 150px; font-size: 13px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.flow-desc { font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: flex-start; }
.flow-desc > span { flex: none; }
.flow-cond { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.flow-values { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--brand); padding: 0 4px; height: 22px; }
.flow-area { position: relative; }
.flow-area .flow-values { position: absolute; right: 6px; bottom: 6px; background: var(--card); }
.flow-branch { margin-top: 6px; padding: 8px 0 2px 14px; border-left: 2px dashed var(--line); }
.flow-branch.yes { border-left-color: var(--green); }
.flow-branch.loop { border-left-color: var(--brand-2); }
.flow-branch-label { font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--muted); }
.flow-branch.yes .flow-branch-label { color: var(--green); }
.flow-branch.loop .flow-branch-label { color: var(--brand-2); }
.flow-add { align-self: flex-start; }
.flow-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 1000px) { .flow-cols { grid-template-columns: minmax(0, 1fr); } }
.flow-review { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 13.5px; }
.flow-review-line { border-left: 2px solid var(--line); padding-top: 2px; padding-bottom: 2px; margin-left: 2px; text-indent: 8px; }
.flow-report-line { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; overflow-wrap: anywhere; }
.flow-report-line:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------- flow practice */
.practice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.practice-card { cursor: pointer; }
.practice-cols { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
.practice-brief { position: sticky; top: 12px; }
@media (max-width: 1000px) { .practice-cols { grid-template-columns: minmax(0, 1fr); } .practice-brief { position: static; } }
.practice-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }

/* ---------------------------------------------------------------- designed dashboards (boardkit) */
.bk-board { display: flex; flex-direction: column; gap: 16px; font-variant-numeric: tabular-nums; }
.bk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 16px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.bk-head h1 { font-size: 20px; margin: 0; line-height: 1.25; text-wrap: balance; }
.bk-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; max-width: 70ch; }
.bk-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid var(--line); background: var(--soft); color: var(--ink); white-space: nowrap; }
.bk-chip.good { background: var(--green-soft); border-color: transparent; color: var(--green); }
.bk-chip.warn { background: var(--amber-soft); border-color: transparent; color: var(--amber); }
.bk-chip.bad { background: var(--red-soft); border-color: transparent; color: var(--red); }
.bk-chip.info { background: var(--blue-soft); border-color: transparent; color: var(--blue); }
.bk-pages { margin-bottom: -8px; }
.bk-pages .ant-tabs-nav { margin-bottom: 0; }
.bk-page-tab { display: inline-flex; gap: 6px; align-items: center; }
.bk-page { display: flex; flex-direction: column; gap: 16px; }
.bk-page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.bk-page-head h2 { font-size: 17px; margin: 0; }
.bk-page-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.bk-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.bk-filter { min-width: 220px; }
.bk-kpis { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .bk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bk-kpis { grid-template-columns: minmax(0, 1fr); } }
.bk-kpi { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; min-height: 118px; }
.bk-kpi.clickable { cursor: pointer; transition: border-color .15s; }
.bk-kpi.clickable:hover, .bk-kpi.clickable:focus-visible { border-color: var(--brand); outline: none; }
.bk-kpi-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.bk-kpi-title { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.bk-info { color: var(--muted); font-size: 12px; cursor: help; }
.bk-kpi-ic { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; place-items: center; font-size: 15px; flex: none; }
.bk-kpi-ic.tone-blue { background: var(--blue-soft); color: var(--blue); }
.bk-kpi-ic.tone-green { background: var(--green-soft); color: var(--green); }
.bk-kpi-ic.tone-amber { background: var(--amber-soft); color: var(--amber); }
.bk-kpi-ic.tone-red { background: var(--red-soft); color: var(--red); }
.bk-kpi-ic.tone-violet { background: var(--brand-soft); color: var(--brand); }
.bk-kpi-ic.tone-teal { background: var(--green-soft); color: var(--brand-2); }
.bk-kpi-ic.tone-slate { background: var(--soft); color: var(--muted); }
.bk-kpi-value { font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.bk-kpi-value.neg { color: var(--red); }
.bk-kpi-sub { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12px; }
.bk-kpi-err { font-size: 12px; color: var(--amber); }
.bk-delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.bk-delta.good { color: var(--green); }
.bk-delta.bad { color: var(--red); }
.bk-row { display: grid; gap: 16px; }
@media (max-width: 960px) { .bk-row { grid-template-columns: minmax(0, 1fr) !important; } }
.bk-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0; }
.bk-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 14px 16px 6px; }
.bk-card-titles h3 { font-size: 14.5px; margin: 0; font-weight: 650; }
.bk-card-titles p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.bk-card-actions { display: flex; gap: 6px; align-items: center; }
.bk-card-body { padding: 6px 16px 14px; min-width: 0; }
.bk-card.flush .bk-card-body { padding: 4px 0 0; }
.bk-card-note { padding: 10px 16px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.bk-search { width: 220px; }
.bk-chart { width: 100%; }
.bk-problem { margin: 6px 0; }
.bk-text { margin: 0; white-space: pre-wrap; max-width: 75ch; }
.bk-statement-wrap { overflow-x: auto; }
.bk-statement { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.bk-statement th { text-align: right; font-weight: 600; color: var(--ink); padding: 9px 12px; border-bottom: 2px solid var(--ink); white-space: nowrap; background: var(--card); }
.bk-statement td { text-align: right; padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.bk-statement .bk-stick { position: sticky; left: 0; text-align: left; background: var(--card); z-index: 1; min-width: 200px; }
.bk-statement th.total, .bk-statement td.total { background: var(--blue-soft); font-weight: 600; }
.bk-statement tr.bold td { font-weight: 700; border-bottom-color: var(--muted); }
.bk-statement tr.group td { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--soft); font-weight: 600; }
.bk-statement tbody tr:hover td { background: var(--soft); }
.bk-statement tbody tr:hover td.total { background: var(--blue-soft); }
.bk-statement td.neg, .bk-table .neg, .neg { color: var(--red); }
.bk-table .ant-table { background: transparent; }
.bk-clickable { cursor: pointer; }
.bk-subtabs { display: flex; flex-direction: column; gap: 12px; }
.bk-subtabs-title { font-size: 15px; margin: 0; }
.bk-segmented { align-self: flex-start; }
.bk-subtabs-body { display: flex; flex-direction: column; gap: 16px; }
.bk-foot { display: flex; flex-direction: column; gap: 4px; font-size: 12px; padding: 12px 4px; border-top: 1px solid var(--line); }
/* new blocks: sparkline, progress, breakdown, rank, queue, steps */
.bk-spark { width: 100%; height: 30px; margin-top: 2px; }
.bk-spark polyline { fill: none; stroke: var(--brand); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.bk-spark polyline.area { fill: var(--brand-soft); stroke: none; opacity: .7; }
.bk-progress { display: flex; flex-direction: column; gap: 14px; }
.bk-prog-row { cursor: pointer; }
.bk-prog-top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.bk-prog-track { height: 10px; border-radius: 6px; background: var(--soft); border: 1px solid var(--line); overflow: hidden; margin: 6px 0 3px; }
.bk-prog-fill { display: block; height: 100%; border-radius: 6px; background: var(--color-accent); transition: width .4s ease; }
.bk-prog-fill.good { background: var(--green); } .bk-prog-fill.warn { background: var(--amber); } .bk-prog-fill.bad { background: var(--red); }
.bk-prog-foot { font-size: 11.5px; }
.bk-breakdown-total { font-size: 18px; }
.bk-bd-bar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; gap: 2px; background: var(--soft); }
.bk-bd-bar span { display: block; height: 100%; cursor: pointer; min-width: 3px; transition: filter .15s; }
.bk-bd-bar span:hover { filter: brightness(1.12); }
.bk-bd-key { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
@media (max-width: 760px) { .bk-bd-key { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bk-bd-part { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 8px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--ink); cursor: pointer; font: inherit; text-align: left; }
.bk-bd-part:hover, .bk-bd-part:focus-visible { border-color: var(--line); background: var(--soft); outline: none; }
.bk-bd-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.bk-bd-label i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.bk-bd-part b { font-size: 16px; }
.bk-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bk-rank li { display: grid; grid-template-columns: 24px minmax(90px, 1.3fr) minmax(60px, 2fr) auto 48px; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.bk-rank li:hover { background: var(--soft); }
.bk-rank-n { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--soft); font-size: 11.5px; font-weight: 700; color: var(--muted); }
.bk-rank li:nth-child(-n+3) .bk-rank-n { background: var(--brand-soft); color: var(--brand); }
.bk-rank-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-rank-track { height: 8px; border-radius: 5px; background: var(--soft); overflow: hidden; }
.bk-rank-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 5px; }
.bk-rank-share { text-align: right; }
.bk-chipbar { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 16px 10px; }
.bk-qchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.bk-qchip span { font-size: 11px; color: var(--muted); background: var(--soft); border-radius: 999px; padding: 0 7px; line-height: 18px; }
.bk-qchip.on { background: var(--ink); color: var(--card); border-color: var(--ink); }
.bk-qchip.on span { background: color-mix(in srgb, var(--card) 22%, transparent); color: var(--card); }
.bk-pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--soft); color: var(--ink); white-space: nowrap; }
.bk-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bk-pill.good { background: var(--green-soft); color: var(--green); } .bk-pill.warn { background: var(--amber-soft); color: var(--amber); }
.bk-pill.bad { background: var(--red-soft); color: var(--red); } .bk-pill.info { background: var(--blue-soft); color: var(--blue); }
.bk-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.bk-review-grid > div { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.bk-review-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.bk-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
/* Four cards that do not fit on one line go two by two, never three and one left alone (HSE enforcement, 6 Oct 2026). */
.bk-steps-box { container-type: inline-size; }
@container (max-width: 639px) { .bk-steps[data-n="4"] { grid-template-columns: repeat(auto-fit, minmax(max(150px, calc(50% - 5px)), 1fr)); } }
.bk-step-title { font-size: 13px; line-height: 1.3; }
.bk-step { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--soft); display: flex; flex-direction: column; gap: 6px; }
.bk-step.good { border-color: color-mix(in srgb, var(--green) 35%, var(--line)); } .bk-step.warn { border-color: color-mix(in srgb, var(--amber) 40%, var(--line)); }
.bk-step.bad { border-color: color-mix(in srgb, var(--red) 40%, var(--line)); } .bk-step.info { border-color: color-mix(in srgb, var(--blue) 35%, var(--line)); }
.bk-step-top { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bk-step-v { margin-left: auto; font-size: 18px; font-weight: 700; }
.bk-step p { margin: 0; font-size: 12px; color: var(--muted); }
.bk-datefilter { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bk-filter.multi { min-width: 240px; }
.bk-export { margin-left: 4px; }
@media print {
  .ant-layout-sider, .ant-layout-header, .board-toolbar, .bk-export, .bk-filters, .as-float, .new-version, .bk-card-actions, .gal-side { display: none !important; }
  .content, .content-inner { padding: 0 !important; margin: 0 !important; }
  .bk-board { gap: 10px; } .bk-card, .bk-kpi, .bk-head { box-shadow: none; break-inside: avoid; }
}
.boards-section { margin-bottom: 8px; }
.boards-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.boards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.board-card { cursor: pointer; }
.board-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.studio-cols { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .studio-cols { grid-template-columns: minmax(0, 1fr); } }
.studio-side { position: sticky; top: 12px; }
@media (max-width: 1100px) { .studio-side { position: static; } }
.studio-preview { min-width: 0; padding: 12px; border: 1px dashed var(--line); border-radius: 16px; background: var(--bg); }
.studio-ds { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.studio-checks { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow: auto; }
.mono textarea, textarea.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }

/* ---------------------------------------------------------------- AI model picker */
.model-name { font-size: 17px; font-weight: 650; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0; }
.model-rec { display: flex; flex-direction: column; gap: 8px; }
.model-rec.dim { opacity: .6; }
.model-facts .ant-tag { margin-inline-end: 0; }
.model-facts .dots { letter-spacing: 1px; color: var(--brand); }
.model-why summary { cursor: pointer; color: var(--brand); font-size: 13px; }
.model-why > div { margin-top: 4px; }
.model-chosen { margin-top: 10px; padding: 8px 10px; border-left: 3px solid var(--brand); background: var(--brand-soft); border-radius: 0 8px 8px 0; }
.model-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; width: 100%; }
.model-opt { align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; margin-inline-end: 0; width: 100%; }
.model-opt .model-facts { margin-top: 4px; }

/* Agent architect: describe, design, build and test */
.architect .card + .card, .architect .card + .ant-alert, .architect .ant-alert + .card { margin-top: 16px; }
/* Examples are read in full: they wrap instead of ending in "...". */
.arch-example { cursor: pointer; white-space: normal; height: auto; line-height: 1.45; padding: 4px 10px; max-width: 100%; text-align: left; }
.arch-steps { margin: 0 0 12px 18px; padding: 0; }
.arch-steps li { margin: 2px 0; }
.arch-test { padding: 8px 0; border-bottom: 1px solid var(--line, rgba(0,0,0,.08)); }
.arch-test:last-child { border-bottom: 0; }
.arch-files pre { white-space: pre-wrap; font-size: 12px; max-height: 260px; overflow: auto; background: var(--soft, rgba(0,0,0,.03)); padding: 8px 10px; border-radius: 6px; margin: 4px 0 12px; }

/* Assistant: guide me / do it for me */
.as-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .as-grid { grid-template-columns: 1fr; } }
.as-main > .card + .card { margin-top: 16px; }
.as-ask, .as-do { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 14px; }
.as-summary { font-size: 15px; margin-bottom: 8px; }
.as-questions { margin: 6px 0 10px 18px; padding: 0; }
.as-steps { list-style: none; margin: 0; padding: 0; counter-reset: as; }
.as-step { counter-increment: as; padding: 12px 0 12px 34px; position: relative; border-bottom: 1px solid var(--line, rgba(0,0,0,.08)); }
.as-step:last-child { border-bottom: 0; }
.as-step::before { content: counter(as); position: absolute; left: 0; top: 12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; background: var(--soft, rgba(0,0,0,.05)); }
.as-step-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.as-step-text { flex: 1 1 260px; }
.as-note { margin-top: 6px; opacity: .85; }
.as-evidence { display: inline-block; margin-top: 4px; }
.as-how { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--soft, rgba(0,0,0,.03)); }
.as-how ol { margin: 0 0 8px 18px; padding: 0; }
.as-how li { margin: 4px 0; }
.as-how-facts { display: grid; gap: 2px; font-size: 13px; }
.as-shots { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.as-shots .ant-image { border-radius: 6px; overflow: hidden; border: 1px solid var(--line, rgba(0,0,0,.1)); }
.as-answer { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line, rgba(0,0,0,.15)); }
.as-group { margin-bottom: 10px; }
.as-group ul { margin: 6px 0 0 18px; padding: 0; }
.as-related + .as-related { margin-top: 16px; }
.as-history .as-h { display: block; padding: 8px 6px; border-radius: 6px; color: inherit; }
.as-history .as-h:hover, .as-history .as-h.on { background: var(--soft, rgba(0,0,0,.04)); }
.as-h-msg { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; }
.as-h-meta { font-size: 11px; opacity: .6; }
/* "Show me": the real control on the screen it opened */
.ao-hl { outline: 3px solid #fa8c16 !important; outline-offset: 3px; border-radius: 6px; box-shadow: 0 0 0 7px rgba(250, 140, 22, .22) !important; animation: ao-pulse 1.1s ease-in-out 5; }
@keyframes ao-pulse { 50% { box-shadow: 0 0 0 12px rgba(250, 140, 22, .08); } }
@media (prefers-reduced-motion: reduce) { .ao-hl { animation: none; } }
@media print { .ant-layout-sider, .ant-layout-header, .as-history, .as-do, .page-head .ant-btn, .ant-card-extra { display: none !important; } .as-grid { display: block; } }

/* Guides: one source (app/src/guidebook.js), shown in the Guide drawer and the complete guide */
.guide-btn { font-weight: 600; }
.gd-purpose { font-size: 15px; }
.gd-shot { margin: 12px 0 18px; }
.gd-shot-frame { position: relative; display: inline-block; max-width: 100%; border: 1px solid var(--line, rgba(0,0,0,.12)); border-radius: 8px; overflow: hidden; line-height: 0; }
.gd-shot-frame .ant-image, .gd-shot-frame .ant-image img { max-width: 100%; }
.gd-callout { position: absolute; border: 3px solid #fa8c16; border-radius: 6px; box-shadow: 0 0 0 3px rgba(250, 140, 22, .25); pointer-events: none; }
.gd-callout b { position: absolute; top: -12px; left: -12px; width: 22px; height: 22px; border-radius: 50%; background: #fa8c16; color: #fff; font-size: 12px; line-height: 22px; text-align: center; }
.gd-shot figcaption { margin-top: 6px; font-size: 13px; opacity: .85; }
.gd-legend { margin: 4px 0 0 18px; padding: 0; }
.gd-sections { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 6px 14px; margin: 0 0 12px; }
.gd-sections dt { font-weight: 600; }
.gd-sections dd { margin: 0; }
.gd-actions { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.gd-actions td { padding: 6px 8px; border-top: 1px solid var(--line, rgba(0,0,0,.08)); vertical-align: top; }
.gd-ui { display: inline-block; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--line, rgba(0,0,0,.18)); font-weight: 600; white-space: nowrap; }
.gd-show { white-space: nowrap; text-align: right; }
.gd-task { padding: 10px 12px; margin-bottom: 10px; border-radius: 8px; background: var(--soft, rgba(0,0,0,.03)); }
.gd-task ol { margin: 6px 0 6px 18px; padding: 0; }
.gd-meta { display: grid; gap: 2px; font-size: 13px; }
.gd-more { display: inline-block; margin-top: 6px; }
.gd-facts { display: grid; gap: 8px; margin-top: 12px; }
.gd-facts ul { margin: 4px 0 0 18px; padding: 0; }
.gd-related { margin-top: 16px; }
.gd-link { cursor: pointer; }
.gd-complete { margin-bottom: 20px; }
.gd-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.gd-toc { position: sticky; top: 80px; }
.gd-toc ol { list-style: none; margin: 0; padding: 0; }
.gd-toc button { background: none; border: 0; padding: 5px 8px; width: 100%; text-align: left; cursor: pointer; border-radius: 6px; color: inherit; }
.gd-toc button:hover { background: var(--soft, rgba(0,0,0,.05)); }
.gd-section { padding: 20px 24px; margin-bottom: 20px; scroll-margin-top: 80px; }
.gd-menu { margin-left: 10px; vertical-align: middle; }
@media (max-width: 900px) { .gd-layout { grid-template-columns: 1fr; } .gd-toc { position: static; } .gd-sections { grid-template-columns: 1fr; } }
@media print { .gd-toc, .guide-btn, .gd-show, .gd-task .ant-btn { display: none !important; } .gd-layout { display: block; } .gd-section { break-inside: avoid-page; } }

/* Connections: how each connector is governed */
.conn-gov { margin-top: 10px; }
.conn-gov summary { cursor: pointer; font-weight: 600; }
.conn-gov dl { display: grid; grid-template-columns: 130px 1fr; gap: 4px 10px; margin: 8px 0 0; }
.conn-gov dt { opacity: .7; }
.conn-gov dd { margin: 0; }

/* The floating Assistant */
.as-float { position: fixed; right: 24px; bottom: 24px; z-index: 1050; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
.as-float > * { pointer-events: auto; }
.as-fab { width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font-size: 24px; display: grid; place-items: center;
  background: var(--gradient-brand); box-shadow: 0 10px 28px rgba(79, 70, 229, .38); transition: transform .15s ease; }
.as-fab:hover { transform: scale(1.06); }
.as-fab:focus-visible { outline: 3px solid #fa8c16; outline-offset: 3px; }
.as-fab.calling { animation: as-ring 1.6s ease-out 3; }
@keyframes as-ring { 0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, .45), 0 10px 28px rgba(79, 70, 229, .38); } 100% { box-shadow: 0 0 0 18px rgba(124, 58, 237, 0), 0 10px 28px rgba(79, 70, 229, .38); } }
.as-nudge { position: relative; width: 330px; max-width: 330px; animation: as-in .25s ease-out; }
.as-nudge-msgs { display: grid; gap: 6px; }
.as-nudge-msg { margin: 0; padding: 7px 11px; border-radius: 4px 12px 12px 12px; background: var(--soft, rgba(79, 70, 229, .07)); line-height: 1.45; animation: as-in .2s ease-out; }
.as-nudge-msgs > .as-dots { padding: 4px 11px; color: var(--brand, #4f46e5); }
.as-typed .as-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--color-accent); animation: as-blink .8s steps(1) infinite; }
@keyframes as-blink { 50% { opacity: 0; } }
.as-nudge-starts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; animation: as-in .25s ease-out; }
.as-nudge-start { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--brand, #4f46e5); background: transparent; color: var(--brand, #4f46e5); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.as-nudge-start:hover, .as-nudge-start:focus-visible { background: var(--color-accent); color: var(--color-on-accent); outline: none; }
.as-nudge-body { display: grid; gap: 8px; text-align: left; width: 100%; padding: 12px 14px; border-radius: 14px 14px 4px 14px; border: 1px solid var(--line, rgba(0,0,0,.08));
  background: var(--card, #fff); color: inherit; cursor: pointer; box-shadow: 0 12px 32px rgba(15, 23, 42, .16); font: inherit; }
.as-nudge-who { font-size: 12px; font-weight: 600; color: var(--brand, #4f46e5); }
.as-nudge-text { min-height: 20px; }
.as-nudge-x { position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line, rgba(0,0,0,.12)); background: var(--card, #fff); color: inherit; cursor: pointer; line-height: 18px; }
.as-dots { display: inline-flex; gap: 4px; align-items: center; height: 20px; }
.as-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35; animation: as-dot 1s infinite ease-in-out; }
.as-dots i:nth-child(2) { animation-delay: .15s; } .as-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes as-dot { 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes as-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.as-panel { width: 380px; max-height: min(620px, calc(72 * var(--ao-vh))); display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; animation: as-in .2s ease-out;
  background: var(--card, #fff); border: 1px solid var(--line, rgba(0,0,0,.08)); box-shadow: 0 18px 48px rgba(15, 23, 42, .22); }
.as-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line, rgba(0,0,0,.08)); }
.as-panel-body { padding: 14px 16px; overflow: auto; }
.as-bubble { padding: 8px 12px; border-radius: 12px; margin-bottom: 8px; max-width: 92%; white-space: pre-wrap; }
.as-bubble.me { margin-left: auto; background: var(--color-accent); color: var(--color-on-accent); border-bottom-right-radius: 4px; }
.as-bubble.ai { background: var(--soft, rgba(0,0,0,.05)); border-bottom-left-radius: 4px; }
.as-mini-steps { margin: 4px 0 0 18px; padding: 0; display: grid; gap: 6px; font-size: 13px; }
@media (max-width: 600px) { .as-float { right: 12px; bottom: 12px; left: 12px; align-items: flex-end; } .as-panel { width: 100%; } .as-nudge { width: auto; max-width: calc(80 * var(--ao-vw)); } }
@media (prefers-reduced-motion: reduce) { .as-fab.calling, .as-nudge, .as-panel, .as-dots i, .as-nudge-msg, .as-nudge-starts, .as-caret { animation: none; } }
@media print { .as-float { display: none !important; } }

/* The Assistant: a hovering drone (AssistantAvatar) beside the round chat button. It hovers over a glowing thruster,
   blinks, its eyes follow the pointer, and it tucks behind the button while the page scrolls. It speaks chat-style:
   typing dots, then the line. */
.as-launch { display: flex; align-items: flex-end; }
/* Full screen (FullScreenButton): only the conversation or mailbox is left, filling the screen */
body.focus-mode .shell > .side, body.focus-mode .top, body.focus-mode .as-float { display: none !important; }
body.focus-mode .content { padding: 14px 18px; }
body.focus-mode .content-inner { max-width: none; }
body.focus-mode .asx-main { max-width: none; }
body.focus-mode .asx { grid-template-columns: 280px minmax(0, 1fr) 320px; }
body.focus-mode .page-head .page-guide, body.focus-mode .page-head > div > .ant-typography-secondary { display: none; }
body.focus-mode .chat-shell { height: calc(calc(100 * var(--ao-vh)) - 28px); }
body.focus-mode .asx { min-height: calc(calc(100 * var(--ao-vh)) - 28px); }
body.focus-mode .mail-list { max-height: calc(calc(100 * var(--ao-vh)) - 110px); }
body.focus-mode .mail-read { min-height: calc(calc(100 * var(--ao-vh)) - 110px); }
body.focus-mode .mail-grid { grid-template-columns: 220px minmax(340px, 460px) minmax(0, 1fr); }
body.focus-mode .mail .page-head { margin-bottom: 10px; }
/* Guide cards in a row are one object: same height, and every Open guide button on the same line at the bottom */
.guide-card, .guide-card > .ant-card-body, .guide-card > .ant-card-body > .ant-space { height: 100%; }
.guide-card > .ant-card-body > .ant-space > .ant-space-item:last-child { height: 100%; }
.guide-card-body { display: flex; flex-direction: column; height: 100%; }
.guide-card-body .guide-open { margin-top: auto; }
/* Label and value pairs in narrow cards (Quality): labels may wrap, values never break mid-figure */
.kv { display: grid; grid-template-columns: minmax(6.5em, 1fr) auto; min-width: 0; gap: 9px 14px; margin: 12px 0 0; align-items: baseline; }
.kv dt { margin: 0; color: var(--muted); word-break: normal; overflow-wrap: normal; hyphens: none; }
.kv dd { margin: 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 500; }
/* a long value goes on its own full-width line under its label */
.kv dt.kv-full, .kv dd.kv-full { grid-column: 1 / -1; }
.kv dd.kv-full { text-align: left; white-space: normal; font-weight: 400; font-size: 12.5px; margin-top: -5px; }
/* A tab's state mark: one unit with its label, never wrapping into the next tab */
.tab-label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tab-count { display: inline-flex; gap: 4px; }
.tc { font-size: 11px; line-height: 18px; padding: 0 6px; border-radius: 9px; font-weight: 600; }
.tc-fail { background: #fee2e2; color: #b91c1c; } .tc-warn { background: #fef3c7; color: #a16207; } .tc-pass { background: #dcfce7; color: #15803d; }
[data-theme="dark"] .tc-fail { background: #3b1717; color: #fca5a5; } [data-theme="dark"] .tc-warn { background: #3a2c0b; color: #fcd34d; } [data-theme="dark"] .tc-pass { background: #10301c; color: #86efac; }
.as-float .as-nudge { margin-right: 44px; } /* the bubble's tail (bottom right) points down at the drone, who is the one speaking */
.as-bot { width: 64px; height: 70px; margin-right: -4px; cursor: pointer; filter: drop-shadow(0 6px 10px rgba(30, 41, 59, .16));
  transform-origin: 100% 100%; transition: transform .45s cubic-bezier(.2, 1.4, .4, 1), opacity .3s; }
.as-bot.tucked { transform: translate(26px, 22px) scale(.45); opacity: 0; transition: transform .3s ease, opacity .2s; }
.as-fab { width: 60px; height: 60px; padding: 0; }
.as-chat { width: 30px; height: 30px; display: block; }
.as-fab.calling .as-chat circle { animation: as-dot 1s infinite ease-in-out; }
.as-fab.calling .as-chat circle:nth-of-type(2) { animation-delay: .15s; } .as-fab.calling .as-chat circle:nth-of-type(3) { animation-delay: .3s; }
.ao-av { display: block; width: 100%; height: 100%; overflow: visible; }
.ao-av g { transform-box: view-box; }
.av-bob { animation: av-bob 2.8s ease-in-out infinite; }
.ao-av.face .av-bob { animation: none; } /* small avatars beside answers stay still; only their eyes and blink move */
.av-shadow { transform-box: fill-box; transform-origin: center; animation: av-shadow 2.8s ease-in-out infinite; }
.av-thrust { transform-box: fill-box !important; transform-origin: 50% 0; animation: av-thrust .25s ease-in-out infinite alternate; }
.av-lids { transform-origin: 50px 49.5px; animation: av-blink 5s infinite; }
.av-pupils { transition: transform .15s ease-out; }
.av-ant { animation: av-ant 2.4s ease-in-out infinite; }
.as-launch.calling .av-bob { animation-duration: 1.3s; }
.as-launch.calling .av-ant { animation-duration: .8s; }
@keyframes av-bob { 50% { transform: translateY(-6px); } }
@keyframes av-shadow { 50% { transform: scale(.7); opacity: .1; } }
@keyframes av-thrust { to { transform: scaleY(1.35); opacity: .9; } }
@keyframes av-blink { 0%, 93%, 97%, 100% { transform: none; } 95% { transform: scaleY(.1); } }
@keyframes av-ant { 50% { fill: #f0abfc; } }
.as-nudge-text .as-dots { color: var(--brand, #4f46e5); }
.thr-av, .asx-mark, .av-chip { overflow: hidden; }
.av-chip { display: inline-block; width: 20px; height: 20px; border-radius: 50%; vertical-align: -5px; margin-right: 4px;
  background: var(--gradient-brand); }
.asx-hero .asx-mark { width: 120px; height: 120px; border-radius: 30px; padding: 14px 18px 4px; background: linear-gradient(150deg, #a8dcff 0%, #7aa2ff 100%); box-shadow: 0 14px 34px rgba(59, 130, 246, .28); }
@media (max-width: 600px) { .as-bot { width: 48px; height: 53px; } }
@media (prefers-reduced-motion: reduce) {
  .av-bob, .av-shadow, .av-thrust, .av-lids, .av-ant, .as-chat circle { animation: none !important; }
  .as-bot, .av-pupils { transition: none; }
}

/* ---------------------------------------------------------------- the Assistant as a conversation
   One composer (.cmp) on Home, the Assistant page and the panel; a thread (.thr) of the person's words on the right
   and the assistant's replies on the left, each plan (.plan) living inside the reply that made it. */
.cmp { border: 1px solid var(--line); border-radius: 18px; background: var(--card); padding: 10px 10px 8px 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
  transition: border-color .15s ease, box-shadow .15s ease; }
.cmp:focus-within { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent), 0 8px 24px rgba(16, 24, 40, .06); }
.cmp.drag { border-style: dashed; border-color: var(--brand); background: var(--brand-soft); }
.cmp.compact { border-radius: 14px; padding: 6px 6px 6px 10px; box-shadow: none; }
.cmp-input.ant-input { padding: 4px 2px !important; font-size: 15px; line-height: 1.55; resize: none; background: transparent; }
.cmp.compact .cmp-input.ant-input { font-size: 14px; }
.cmp-bar { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.cmp-hint { flex: 1; text-align: right; font-size: 11.5px; color: var(--muted); padding-right: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-dept { max-width: 220px; }
.cmp-dept .ant-select-selector { padding: 0 8px !important; border-radius: 999px !important; background: var(--soft) !important; }
.cmp-send.ant-btn { width: 36px; height: 36px; min-width: 36px; flex: none; }
.cmp.compact .cmp-send.ant-btn { width: 32px; height: 32px; min-width: 32px; }
.cmp-file { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin: 0 4px 6px 0; border-radius: 10px; background: var(--soft); font-size: 13px; }
.cmp-x { margin-left: auto; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.cmp-x:hover { color: var(--ink); background: var(--line); }
.cmp-mode { margin: 0 4px 6px 0; }
.cmp-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: var(--soft); color: var(--muted); }
.cmp-chip.on { background: var(--brand-soft); color: var(--brand); }
.cmp-chip button { border: 0; background: none; color: inherit; text-decoration: underline; cursor: pointer; padding: 0; font: inherit; opacity: .85; }
.cmp-sugs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cmp-sug { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; text-align: left;
  max-width: 100%; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.cmp-sug:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: var(--brand-soft); }
.cmp-sug:focus-visible, .pstep-how:focus-visible, .asx-h:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.thr { display: flex; flex-direction: column; gap: 14px; padding: 8px 0 12px; }
.thr-me { display: flex; justify-content: flex-end; animation: as-in .2s ease-out; }
.thr-bubble { max-width: min(78%, 640px); padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--color-accent); color: var(--color-on-accent); white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.thr-ai { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; animation: as-in .25s ease-out; }
.thr-av { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 15px; background: var(--gradient-brand); flex: none; }
.thr-av.sm { width: 24px; height: 24px; border-radius: 8px; font-size: 12px; display: inline-grid; vertical-align: -6px; margin-right: 6px; }
.thr-body { min-width: 0; display: grid; gap: 10px; padding-top: 4px; }
.thr-text { font-size: 15px; line-height: 1.6; white-space: pre-wrap; }
.thr-think { margin-left: 8px; }
.thr-meta { font-size: 11px; color: var(--muted); }
.thr-more.ant-btn { padding: 0; height: auto; justify-self: start; }
.thr-alert { border-radius: 10px; }
.thr-qs { border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--line)); background: var(--blue-soft); border-radius: 12px; padding: 10px 14px; }
.thr-qs-head { font-weight: 600; color: var(--blue); margin-bottom: 4px; }
.thr-qs ul { margin: 0 0 6px 18px; padding: 0; }
.thr.compact .thr-bubble { max-width: 88%; font-size: 13.5px; padding: 8px 12px; }
.thr.compact .thr-ai { grid-template-columns: 26px minmax(0, 1fr); gap: 8px; }
.thr.compact .thr-av { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }
.thr.compact .thr-text { font-size: 13.5px; }

.plan { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; }
.plan.running { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.plan-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; background: var(--soft); border-bottom: 1px solid var(--line); }
.plan-title { font-weight: 600; }
.plan-count { font-size: 12.5px; color: var(--muted); }
.plan-live { margin-left: auto; font-size: 12.5px; color: var(--brand); font-weight: 600; }
.plan-bar { height: 3px; background: var(--line); }
.plan-bar i { display: block; height: 100%; background: var(--green); transition: width .5s ease; }
.plan-steps { list-style: none; margin: 0; padding: 4px 0; }
.pstep { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 10px 14px; }
.pstep + .pstep { border-top: 1px solid var(--line); }
.pstep-ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--soft); color: var(--muted); border: 1px solid var(--line); }
.pstep-text { line-height: 1.5; }
.pstep-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; font-size: 12.5px; }
.pstep-note { margin-top: 6px; font-size: 13px; color: var(--muted); }
.pstep-change { margin-top: 6px; padding: 6px 10px; border-left: 3px solid var(--accent, #4f46e5); background: rgba(127, 127, 127, 0.06); border-radius: 4px; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.pstep-how { border: 0; background: none; padding: 0; cursor: pointer; color: var(--brand); font: inherit; }
.st { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--soft); color: var(--muted); }
.st-run { color: var(--brand); background: var(--brand-soft); }
.st-ok { color: var(--green); background: var(--green-soft); }
.st-prep { color: #0e7490; background: color-mix(in srgb, #0e7490 12%, var(--card)); }
.st-wait { color: var(--amber); background: var(--amber-soft); }
.st-you { color: var(--blue); background: var(--blue-soft); }
.st-bad { color: var(--red); background: var(--red-soft); }
.pstep.st-ok .pstep-ic { background: var(--green); border-color: var(--green); color: #fff; animation: st-pop .35s ease-out; }
.pstep.st-run .pstep-ic { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.pstep.st-wait .pstep-ic { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }
.pstep.st-you .pstep-ic { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
.pstep.st-bad .pstep-ic { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.pstep.st-you { background: color-mix(in srgb, var(--blue) 4%, transparent); }
.pstep.st-wait { background: color-mix(in srgb, var(--amber) 5%, transparent); }
@keyframes st-pop { 0% { transform: scale(.6); } 70% { transform: scale(1.12); } 100% { transform: none; } }
.plan-do { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--soft); }
.plan-trust { font-size: 12.5px; color: var(--muted); flex: 1 1 220px; }
.plan-note { padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.plan-ask { padding: 12px 14px; border-top: 1px dashed var(--line); }
.plan-ask ul { margin: 6px 0 8px 18px; padding: 0; }
.plan-sum { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--line); }
.plan.related .as-related { padding: 12px 14px; }
.plan .as-how { margin: 8px 0 0; }
.tnum { font-variant-numeric: tabular-nums; }

.asx { display: grid; grid-template-columns: 260px minmax(0, 1fr) 300px; gap: 24px; align-items: start; min-height: calc(calc(100 * var(--ao-vh)) - 120px); }
.asx-side { position: sticky; top: 16px; display: grid; gap: 10px; max-height: calc(calc(100 * var(--ao-vh)) - 110px); grid-template-rows: auto minmax(0, 1fr); }
.asx-list { overflow: auto; display: grid; gap: 2px; align-content: start; }
.asx-h { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; color: inherit; }
.asx-h:hover { background: var(--soft); color: inherit; }
.asx-h.on { background: var(--brand-soft); }
.asx-h-msg { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.4; }
.asx-h-meta { font-size: 11px; color: var(--muted); }
.asx-main { display: flex; flex-direction: column; min-height: calc(calc(100 * var(--ao-vh)) - 120px); width: 100%; }
.asx-main > .asx-scroll, .asx-main > .asx-dock, .asx-main > .asx-hero { width: 100%; max-width: 920px; margin-inline: auto; }
.asx-top { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding-bottom: 6px; }
.asx-top-tools { display: inline-flex; align-items: center; gap: 4px; }
.asx-title { font-weight: 600; font-size: 15px; }
.asx-hist-btn { display: none; }
.asx-scroll { flex: 1; }
.asx-dock { position: sticky; bottom: 0; padding: 14px 0 16px; background: linear-gradient(to top, var(--bg) 70%, transparent); z-index: 2; }
.asx-dock .cmp-sugs { margin: 0 0 10px; }
.asx-hero { margin-block: auto; padding: calc(6 * var(--ao-vh)) 0 calc(10 * var(--ao-vh)); text-align: center; }
.asx-hero h1 { font-size: 32px; letter-spacing: -.03em; margin: 14px 0 6px; text-wrap: balance; }
.asx-hero > p { max-width: 560px; margin: 0 auto 22px; }
.asx-hero .cmp { text-align: left; }
.asx-hero .cmp-sugs { justify-content: center; }
.asx-mark { width: 52px; height: 52px; margin: 0 auto; border-radius: 16px; display: grid; place-items: center; color: #fff; font-size: 24px; background: var(--gradient-brand); box-shadow: 0 10px 28px rgba(79, 70, 229, .3); }
@media (max-width: 1280px) { .asx, body.focus-mode .asx { grid-template-columns: 240px minmax(0, 1fr); } .asx-ctx { display: none; } }
@media (max-width: 900px) {
  .asx, body.focus-mode .asx { grid-template-columns: 1fr; }
  .asx-side { display: none; position: static; max-height: calc(50 * var(--ao-vh)); }
  .asx.hist-open .asx-side { display: grid; }
  .asx-hist-btn { display: inline-flex; }
  .asx-hero h1 { font-size: 24px; }
  .cmp-hint { display: none; }
}

/* Training: telling us who is missing */
.training-missing.asked { border-color: #f59e0b; box-shadow: 0 0 0 3px color-mix(in srgb, #f59e0b 18%, transparent); }

/* Home: Your day, built for each person */
.yday { margin-bottom: 20px; }
.yday-big { margin: 4px 0 10px !important; letter-spacing: -.02em; }
.yday-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.yday-col { display: grid; gap: 6px; align-content: start; padding: 12px 14px; border-radius: 12px; background: var(--soft); min-width: 0; }
.yday-h { font-weight: 600; font-size: 13px; color: var(--muted); letter-spacing: .02em; margin-bottom: 2px; }
.yday-row { display: grid; gap: 2px; text-align: left; border: 0; background: var(--card); border-radius: 10px; padding: 8px 10px; cursor: pointer; color: inherit; font: inherit;
  box-shadow: 0 0 0 1px var(--line); transition: box-shadow .15s ease; }
.yday-row:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 45%, var(--line)); }
.yday-row:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.yday-row b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yday-tip { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 6px; align-items: start; padding: 6px 0; }
.yday-tip + .yday-tip { border-top: 1px solid var(--line); }
.yday-tip-ic { color: var(--brand); padding-top: 1px; }
.yday-tip .ant-btn { grid-column: 2; justify-self: start; padding: 0; height: auto; }
@media (max-width: 900px) { .yday-cols { grid-template-columns: 1fr; } }

/* the panel: header, a scrolling thread, and the composer pinned at the bottom */
.as-panel { width: 420px; height: min(640px, calc(78 * var(--ao-vh))); max-height: none; }
.as-panel-head { gap: 8px; }
.as-panel-tools { display: inline-flex; gap: 2px; }
.as-panel-body { flex: 1; min-height: 0; padding: 12px 14px; }
.as-panel-hello { display: grid; gap: 4px; }
.as-panel-hello .cmp-sugs { flex-direction: column; align-items: stretch; }
.as-panel-hello .cmp-sug { border-radius: 12px; }
.as-panel-foot { padding: 8px 10px 10px; border-top: 1px solid var(--line); background: var(--card); }
.as-panel-foot .cmp-sugs { margin: 0 0 8px; }
.as-fab.open { background: #262a3a; box-shadow: 0 10px 28px rgba(15, 23, 42, .3); }
@media (max-width: 600px) { .as-panel { width: 100%; height: calc(80 * var(--ao-vh)); } }
/* Agents beside the Assistant (assistant.jsx AgentPicker / AgentChat): raised chips, the open one lifted. */
.as-panel [hidden] { display: none !important; }
.as-tabs { display: flex; gap: 6px; padding: 8px 10px; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--line); flex: none; }
.as-tab { display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 150px; height: 32px; padding: 0 10px 0 4px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: inherit; font: inherit; font-size: 12.5px;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 2px 4px rgba(15,23,42,.08); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.as-tab:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 5px 12px rgba(15,23,42,.14); }
.as-tab.on { border-color: var(--color-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 22%, transparent), 0 6px 14px rgba(15,23,42,.16); transform: translateY(-1px); }
.as-tab.add { width: 32px; padding: 0; justify-content: center; border-style: dashed; }
.as-tab-btn { display: inline-flex; align-items: center; gap: 6px; min-width: 0; border: 0; background: none; color: inherit; font: inherit; padding: 0; cursor: pointer; }
.as-tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.as-tab-x { border: 0; background: none; color: inherit; opacity: .45; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 0 0 2px; }
.as-tab-x:hover, .as-tab-x:focus-visible { opacity: 1; }
.as-ag-av { --h: 260; width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; overflow: hidden; color: #fff; font-weight: 700; font-size: 12px;
  background: radial-gradient(circle at 32% 28%, hsl(var(--h) 85% 72%), hsl(var(--h) 62% 44%) 62%, hsl(var(--h) 60% 30%));
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.25), 0 1px 2px rgba(15,23,42,.25); }
.as-ag-av.aria { background: var(--gradient-brand); }
.as-ag-av.sm { width: 28px; height: 28px; font-size: 13px; }
.as-ag-av.lg { width: 56px; height: 56px; font-size: 24px; animation: as-float 3.2s ease-in-out infinite; }
@keyframes as-float { 50% { transform: translateY(-4px); } }
.as-pick { position: relative; z-index: 2; margin: 0 10px; padding: 8px; display: grid; gap: 6px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px;
  background: var(--card); box-shadow: 0 12px 24px rgba(15,23,42,.14); animation: as-in .16s ease-out; }
.as-pick-list { display: grid; gap: 2px; max-height: 260px; overflow-y: auto; }
.as-pick-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.as-pick-row:hover:not(:disabled):not(.locked), .as-pick-row:focus-visible { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.as-pick-row:disabled { cursor: not-allowed; opacity: .55; }
.as-pick-row.locked { cursor: default; }
.as-pick-row.locked .as-ag-av { filter: grayscale(.8); opacity: .7; }
.as-pick-txt { display: grid; min-width: 0; flex: 1; }
.as-pick-txt > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-pick-sep { padding: 6px 6px 2px; border-top: 1px solid var(--line); margin-top: 4px; }
.as-pick-note { padding: 4px 6px; }
.as-ag-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.as-ag-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); flex: none; }
.as-ag-who { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.as-ag-who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-ag-can { flex: none; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; cursor: help;
  background: color-mix(in srgb, #16a34a 14%, transparent); color: color-mix(in srgb, #16a34a 75%, currentColor); }
.as-ag-body .xchg { margin-bottom: 12px; }
.as-ag-body .msg.me .edit-box { min-width: 0; width: 100%; }
.as-ag-body .msg.agent { gap: 8px; }
.as-ag-body .msg-actions .ant-btn > span:not(.anticon):not(.ant-btn-icon) { display: none; }
.as-ag-hello { display: grid; justify-items: center; gap: 10px; padding: 28px 8px; text-align: center; }
.as-ag-hello p { margin: 0; max-width: 32ch; opacity: .75; }
.as-ag-body { container-type: inline-size; }
.as-ag-foot { display: grid; gap: 6px; }
.as-ag-files { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.as-ag-box { display: flex; gap: 6px; align-items: flex-end; }
.as-ag-box textarea.ant-input { border-radius: 18px; padding: 7px 14px; }
.as-ag-send.ant-btn { flex: none; width: 38px; height: 38px; border: 0; background: var(--gradient-brand); box-shadow: 0 6px 14px color-mix(in srgb, var(--color-accent) 35%, transparent); }
.as-ag-send.ant-btn:disabled { background: color-mix(in srgb, var(--color-accent) 30%, var(--card)); color: #fff; box-shadow: none; }
/* An agent's welcome card in chat (welcome.jsx): a greeting bubble and topic cards, two across. */
.agw { display: grid; gap: 14px; max-width: 760px; margin: 8px auto 0; width: 100%; }
.agw-hello { display: flex; gap: 10px; align-items: flex-start; }
.agw-av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px;
  background: var(--gradient-brand); box-shadow: inset 0 -2px 3px rgba(0,0,0,.22), 0 2px 5px rgba(15,23,42,.2); }
.agw-bubble { padding: 12px 16px; border-radius: 6px 18px 18px 18px; background: color-mix(in srgb, var(--color-accent) 7%, var(--card)); line-height: 1.5; min-width: 0; }
.agw-bubble b { display: block; font-size: 15px; }
.agw-text { white-space: pre-wrap; opacity: .85; }
.agw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.agw-topic, .agw-q, .agw-back { font: inherit; color: inherit; cursor: pointer; text-align: left; }
.agw-topic { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 60px; border-radius: 14px; border: 1px solid var(--line); background: var(--card);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 2px 6px rgba(15,23,42,.06); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; animation: agw-in .28s ease both; }
.agw-topic:nth-child(2n) { animation-delay: .04s; } .agw-topic:nth-child(n+5) { animation-delay: .08s; }
@keyframes agw-in { from { opacity: 0; transform: translateY(6px); } }
.agw-topic:hover:not(:disabled), .agw-topic:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--color-accent) 55%, var(--line)); box-shadow: 0 10px 20px rgba(15,23,42,.12); }
.agw-topic:disabled, .agw-q:disabled { cursor: not-allowed; opacity: .6; }
.agw-ico { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; font-size: 18px; color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, var(--card)); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--color-accent) 14%, transparent); }
.agw-label { flex: 1; min-width: 0; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.agw-go { flex: none; font-size: 11px; opacity: .45; }
.agw-qs { display: grid; gap: 8px; animation: agw-in .2s ease both; }
.agw-back { justify-self: start; border: 0; background: none; padding: 2px 0; font-weight: 700; display: inline-flex; gap: 8px; align-items: center; }
.agw-q { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.agw-q:hover:not(:disabled), .agw-q:focus-visible { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 6%, var(--card)); }
.agw-q.other { border-style: dashed; opacity: .85; }
.agw-q .anticon { font-size: 11px; opacity: .45; flex: none; }
.agw-again { display: grid; gap: 10px; max-width: 760px; margin: 4px auto 8px; width: 100%; }
.agw-again-btn { justify-self: start; display: inline-flex; gap: 6px; align-items: center; font: inherit; font-size: 12.5px; color: var(--color-accent); cursor: pointer;
  padding: 4px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--color-accent) 35%, var(--line)); background: color-mix(in srgb, var(--color-accent) 7%, var(--card)); }
.agw-again-btn:hover, .agw-again-btn:focus-visible { background: color-mix(in srgb, var(--color-accent) 14%, var(--card)); }
.agw.compact { gap: 10px; margin-top: 0; }
.agw.compact .agw-grid { gap: 8px; }
.agw.compact .agw-topic { padding: 8px 9px; min-height: 52px; gap: 8px; font-size: 12.5px; }
.agw.compact .agw-ico { width: 32px; height: 32px; font-size: 15px; border-radius: 9px; }
.agw.compact .agw-bubble { padding: 10px 13px; font-size: 13px; } .agw.compact .agw-bubble b { font-size: 14px; }
@container (max-width: 330px) { .agw-grid { grid-template-columns: 1fr; } }
.agw-edit-wrap { container-type: inline-size; }
.agw-edit { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; }
.agw-form { display: grid; gap: 8px; align-content: start; }
.agw-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 6px; align-items: start; }
.agw-preview { padding: 12px; border-radius: 14px; border: 1px dashed var(--line); align-self: start; container-type: inline-size; }
/* The card often sits in the agent page's narrow side column: the form goes above the preview, a topic above its questions. */
@container (max-width: 620px) { .agw-edit { grid-template-columns: 1fr; } .agw-row { grid-template-columns: minmax(0, 1fr) auto; } .agw-row > :nth-child(2) { grid-column: 1; grid-row: 2; } }
@media (prefers-reduced-motion: reduce) { .agw-topic, .agw-qs { animation: none; transition: none; } .agw-topic:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .as-tab, .as-pick, .as-ag-av.lg { animation: none; transition: none; } .as-tab:hover, .as-tab.on { transform: none; } }
@media (prefers-reduced-motion: reduce) { .thr-me, .thr-ai, .pstep.st-ok .pstep-ic, .plan-bar i { animation: none; transition: none; } }
@media print { .asx-side, .asx-dock, .asx-top { display: none !important; } }
.content-inner { padding-bottom: 72px; }

/* ---------------------------------------------------------------- Start: the one way in */
.start { max-width: 980px; margin: 0 auto; }
.start-hero { margin: 4px 0 10px; }
.start-box { padding: 6px 4px 4px; }
.start-title { letter-spacing: -.03em; margin: 2px 0 6px !important; font-size: 30px !important; }
.start-sub { max-width: 680px; margin-bottom: 14px !important; }
.start-input { font-size: 15px; }
.start-ask { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.start-examples { max-width: 620px; }
.start-waiting { margin-top: 14px; cursor: pointer; border-color: var(--brand); }
.start-have { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
@media (max-width: 900px) { .start-have { grid-template-columns: 1fr; } .start-title { font-size: 24px !important; } }
.start-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); color: inherit; }
.start-row:last-child { border-bottom: 0; }
.start-row:hover .start-row-main { color: var(--brand); }
.start-row-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A tile the person asked to make prominent: wider, read first, and its number set larger. */
.dash-tile.big { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); box-shadow: 0 2px 14px rgba(0,0,0,.05); }
.dash-tile.big .dash-value { font-size: 52px; }
.dash-tile.big .dash-tile-title { color: var(--brand); }
@media (max-width: 700px) { .dash-tile.big .dash-value { font-size: 36px; } }
.as-more { margin-top: 12px; }
/* ---------------------------------------------------------------- a dashboard that was designed, not just filled in */
.dash-sections section { margin-bottom: 26px; }
.dash-section-title { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.dash-grid.compact { gap: 10px; }
.dash-grid.compact .dash-tile { padding: 11px 13px 12px; border-radius: 12px; }
.dash-grid.compact .dash-value { font-size: 30px; }
.dash-grid.compact .dash-tile.big .dash-value { font-size: 40px; }
.dash-grid.compact .dash-list li, .dash-grid.compact .dash-bar { font-size: 12px; }

/* a trend: the current figure, the line it came along, and which way it is going */
.dash-spark { width: 100%; height: 84px; display: block; margin: 6px 0 2px; overflow: visible; }
.dash-spark-line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dash-spark-area { fill: color-mix(in srgb, var(--brand) 12%, transparent); stroke: none; }
.dash-spark-dot { fill: var(--brand); }
.dash-trend-word { font-weight: 600; }
.dash-trend-word.up { color: var(--green, #2e7d32); }
.dash-trend-word.down { color: var(--red, #c0392b); }

/* a share of one whole */
.dash-split-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin: 8px 0 12px; background: var(--line); }
.dash-split-part { display: block; height: 100%; }
.dash-split-key { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; }
.dash-split-key li { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.dash-split-l { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.dash-split-part.p0, .dash-dot.p0 { background: var(--color-accent); }
.dash-split-part.p1, .dash-dot.p1 { background: #6c8cff; }
.dash-split-part.p2, .dash-dot.p2 { background: #37b3a6; }
.dash-split-part.p3, .dash-dot.p3 { background: #f2a33c; }
.dash-split-part.p4, .dash-dot.p4 { background: #c77dff; }
.dash-split-part.p5, .dash-dot.p5 { background: #8d99ae; }
.start-ref { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.start-ref b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
/* Two ways to start an agent: connected to what the department has, or connected to nothing. */
.arch-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 8px; }
@media (max-width: 800px) { .arch-kinds { grid-template-columns: 1fr; } }
.arch-kind { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: inherit; cursor: pointer; font: inherit; }
.arch-kind:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.arch-kind.on { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent); }
.arch-kind b { font-size: 15px; }
.arch-kind span { color: var(--muted); font-size: 13px; line-height: 1.45; }
/* A new build is being served: offered, never forced, because someone may be half way through writing something. */

/* ---------------------------------------------------------------- the AI Work Center (home) */
.work-center .time-card { margin-bottom: 20px; }
.time-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.time-big { margin: 4px 0 6px !important; }
.time-big.muted, .time-card .muted { color: var(--muted); }
.time-chips { margin-top: 12px; }
.time-chips .click, .agent-card .click { cursor: pointer; }
.ask-time { margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: rgba(79, 70, 229, .06); display: flex; flex-direction: column; gap: 8px; }
.ask-time-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.ask-time-what { flex: 1 1 260px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-center .start-box { margin-bottom: 20px; }
.section-head { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 12px; }
.agent-card { height: 100%; }
.agent-card .ant-card-body { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.agent-card-head { display: flex; align-items: center; gap: 10px; }
.agent-card-title { flex: 1; min-width: 0; }
.agent-card-title b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-card-job { margin: 0 !important; color: var(--muted); }
.agent-card-facts { display: flex; flex-direction: column; gap: 3px; }
.agent-card-result { border-left: 3px solid rgba(79, 70, 229, .35); padding-left: 8px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.agent-card-actions { margin-top: auto; padding-top: 4px; }
.suggest-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; flex-wrap: wrap; }
.empty-card { margin-bottom: 24px; }

/* Create agent: the other kinds of automation */
.kind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.kind-card { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--card); }
.kind-card > .ant-btn { align-self: flex-start; margin-top: auto; }
.kind-row { display: grid; gap: 2px; }

/* The connector card as a choice (Create agent, the step-by-step builder) */
.sys-pick-wrap { display: block; margin-bottom: 8px; cursor: pointer; }
.sys-card.sys-pick { box-shadow: none; padding: 12px 14px; }
.sys-card.sys-pick.on { border-color: var(--brand); background: var(--brand-soft); }
.sys-card.sys-pick.locked { cursor: default; background: var(--soft); }
.sys-card.sys-pick .ant-checkbox-wrapper, .sys-card.sys-pick > .sys-top > .ant-checkbox { margin-top: 2px; }

/* ---------- Create agent: one button above the places in the sidebar */
.side-create { padding: 4px 12px 10px; }
.ant-layout-sider-collapsed .side-create { padding: 4px 16px 10px; }

/* ---------- Phone: a phone's layout, not the desktop squeezed (main.jsx usePhone, under 768 px) */
.is-phone .top { padding: 0 12px !important; height: 54px !important; line-height: 54px !important; }
.is-phone .brand-mini { display: flex; align-items: center; }
.is-phone .brand-mini .logo-mark { width: 30px; height: 30px; }
/* Room for the bottom bar and the Assistant's button that floats above it, so the last row can scroll clear of both. */
.is-phone .content { padding: 16px 14px calc(150px + env(safe-area-inset-bottom)); }
.is-phone .content-inner { padding-bottom: 0; }
.is-phone .as-float { bottom: calc(76px + env(safe-area-inset-bottom)); }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  background: var(--card); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06); }
.tabbar .tab { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; padding: 6px 2px; border-radius: 10px;
  color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; min-height: 48px; }
.tabbar .tab .anticon { font-size: 20px; color: inherit; }
.tabbar .tab.on { color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.tabbar .tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.more-sheet .ant-drawer-content { border-radius: 18px 18px 0 0; }
.more-sheet .side-menu { border-inline-end: 0 !important; }
.more-sheet .sheet-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
/* Page headers and cards breathe less on a small screen; wide tables scroll inside their card, never the page. */
.is-phone .page-head h1, .is-phone .ant-typography h2 { font-size: 24px; }
.is-phone .card .ant-card-body { padding: 16px; }
.is-phone .ant-table-wrapper { overflow-x: auto; }

/* An agent's life at a glance (agents.jsx): draft, waiting for approval, working */
.life-line { margin: 0 0 18px; padding: 14px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.is-phone .life-line .ant-steps-item-description { display: none; }

/* Chat on a phone: never wider than the screen; the list and the open chat take turns (chat.jsx has-conv, chat-back). */
.chat-shell > * { min-width: 0; }
.chat-back { display: none; }
.is-phone .chat-shell { gap: 12px; }
.is-phone .chat-shell.has-conv .chat-side { display: none; }
.is-phone .chat-shell.has-conv .chat-main { min-height: calc(calc(100 * var(--ao-vh)) - 54px - 84px - 28px); }
.is-phone .chat-shell:not(.has-conv) .chat-side { max-height: none; }
.is-phone .chat-back { display: inline-flex; margin-right: -4px; }
/* The More sheet sits above everything, the assistant bubble included. */
body:has(.more-sheet.ant-drawer-open) .as-float { display: none; }

/* ---------------------------------------------------------------- a workbook, shown the way Excel shows it (always light, like the file) */
.xl { display: flex; flex-direction: column; height: min(calc(66 * var(--ao-vh)), 620px); border: 1px solid #c8c8c8; border-radius: 6px; overflow: hidden; background: #ffffff; color: #1f1f1f; font: 13px/1.2 Calibri, "Segoe UI", Arial, sans-serif; }
.xl-bar { flex: none; display: flex; align-items: stretch; height: 30px; border-bottom: 1px solid #d4d4d4; background: #ffffff; }
.xl-ref { width: 84px; padding: 0 8px; display: flex; align-items: center; border-right: 1px solid #d4d4d4; color: #444; font-variant-numeric: tabular-nums; }
.xl-fx { padding: 0 10px; display: flex; align-items: center; color: #7a7a7a; font-style: italic; font-family: "Cambria Math", Georgia, serif; border-right: 1px solid #e3e3e3; }
.xl-val { flex: 1; min-width: 0; padding: 0 10px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.xl-scroll { flex: 1; min-height: 0; overflow: auto; background: #ffffff; }
.xl-grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.xl-grid th, .xl-grid td { height: 22px; padding: 0 6px; border-right: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; text-align: left; }
.xl-grid thead th { position: sticky; top: 0; z-index: 2; background: #f3f3f3; color: #4a4a4a; text-align: center; font-size: 12px; border-right-color: #d4d4d4; border-bottom-color: #c6c6c6; }
.xl-grid thead th.on, .xl-rn.on { background: #d2e9da; color: #107c41; font-weight: 600; }
.xl-corner { left: 0; z-index: 3 !important; background: #f3f3f3; }
.xl-rn { position: sticky; left: 0; z-index: 1; background: #f3f3f3; color: #4a4a4a; text-align: center !important; font-size: 12px; border-right-color: #c6c6c6 !important; }
.xl-grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
.xl-grid td { cursor: cell; }
.xl-grid td.sel { outline: 2px solid #107c41; outline-offset: -2px; }
/* the header and totals rows look as they do in the downloaded file */
.xl-grid td.xl-h { background: #2f5597; color: #ffffff; font-weight: 700; border-right-color: #bfbfbf; }
.xl-grid td.xl-t { background: #ddebf7; font-weight: 700; border-top: 2px solid #2f5597; border-bottom: 3px double #2f5597; }
.xl-tabs { flex: none; display: flex; gap: 2px; padding: 0 8px; height: 32px; align-items: stretch; background: #f3f3f3; border-top: 1px solid #d4d4d4; overflow-x: auto; }
.xl-tabs button { border: 0; background: transparent; padding: 0 14px; color: #444; font: inherit; cursor: pointer; white-space: nowrap; border-bottom: 3px solid transparent; }
.xl-tabs button:hover { background: #e6e6e6; }
.xl-tabs button.on { background: #ffffff; color: #107c41; font-weight: 700; border-bottom-color: #107c41; box-shadow: 0 -1px 0 #d4d4d4 inset; }
@media (max-width: 767px) { .xl { height: calc(60 * var(--ao-vh)); } }
.test-answer { color: var(--ink); margin-top: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card, transparent); }
/* A test run reads as: the question (quoted, at most three lines), its status, then the formatted answer. */
.test-asked { display: grid; gap: 6px; }
.test-q { font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--ink); padding-left: 10px; border-left: 3px solid var(--brand);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }

/* ---------------------------------------------------------------- an agent being built, on every page */
.building-bar { display: flex; gap: 8px; min-width: 0; flex: 1 1 auto; justify-content: center; overflow: hidden; }
.building-pill { display: inline-flex; align-items: center; gap: 9px; min-width: 0; max-width: 100%; cursor: pointer; font: inherit; font-size: 13px; line-height: 1.3; color: var(--ink);
  padding: 6px 14px 6px 10px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line)); background: color-mix(in srgb, var(--brand) 10%, var(--card, #fff));
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 35%, transparent); animation: build-glow 2.4s ease-in-out infinite; transition: background .15s ease; }
.building-pill:hover { background: color-mix(in srgb, var(--brand) 18%, var(--card, #fff)); }
.building-pill:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.building-pill .bp-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.building-pill .bp-stage { color: var(--muted); font-size: 12px; white-space: nowrap; padding-left: 9px; border-left: 1px solid var(--line); }
@keyframes build-glow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 30%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 0%, transparent); } }
.is-phone .building-pill .bp-stage { display: none; }
.agent-building { display: inline-flex; align-items: center; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .building-pill { animation: none; } }

/* ---------------------------------------------------------------- check before you submit (preflight.jsx) */
.pf-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--card, #fff); margin: 14px 0; }
.pf-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pf-bar > b { font-size: 14.5px; }
.pf-meta { color: var(--muted); font-size: 12px; margin-left: auto; }
.pf-running, .pf-error { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 13px; padding: 8px 2px; }
.pf-error { color: var(--red, #c8412f); }
.pf { --pf: #2e9e5b; }
.pf-user_action { --pf: #d48806; } .pf-blocked { --pf: #c8412f; } .pf-fixed { --pf: var(--brand-2); }
.pf-head { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--pf) 10%, transparent); border: 1px solid color-mix(in srgb, var(--pf) 35%, transparent); }
.pf-icon { color: var(--pf); font-size: 24px; line-height: 1; margin-top: 2px; }
.pf-title { font-weight: 700; font-size: 15.5px; color: var(--ink); }
.pf-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.pf-areas { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.pf-area { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.pf-area .anticon { font-size: 11px; }
.pf-area.ok .anticon { color: #2e9e5b; } .pf-area.fixed .anticon { color: var(--brand-2); } .pf-area.warn .anticon { color: #d48806; }
.pf-area.block { color: #c8412f; border-color: color-mix(in srgb, #c8412f 40%, var(--line)); } .pf-area.block .anticon { color: #c8412f; }
.pf-area.warn { color: var(--ink); border-color: color-mix(in srgb, #d48806 45%, var(--line)); }
.pf-group { margin-top: 12px; }
.pf-group-title { font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.pf-group.block .pf-group-title .anticon { color: #c8412f; } .pf-group.user .pf-group-title .anticon { color: #d48806; }
.pf-group.system .pf-group-title .anticon, .pf-group.fixed .pf-group-title .anticon { color: var(--brand-2); }
.pf-item { padding: 10px 12px; border-radius: 10px; background: var(--soft); margin-bottom: 6px; border-left: 3px solid var(--line); }
.pf-group.block .pf-item { border-left-color: #c8412f; } .pf-group.user .pf-item { border-left-color: #d48806; }
.pf-group.system .pf-item, .pf-group.fixed .pf-item { border-left-color: var(--brand-2); }
.pf-item-title { font-weight: 600; font-size: 13.5px; color: var(--ink); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.pf-item-area { margin-left: auto; font-weight: 400; font-size: 11.5px; color: var(--muted); }
.pf-ai { font-size: 11px; }
.pf-why { color: var(--muted); font-size: 12.8px; margin-top: 3px; }
.pf-fix { font-size: 12.8px; margin-top: 4px; color: var(--ink); }
.pf-compact .pf-areas { display: none; }

/* ---------------------------------------------------------------- Home: which way to start */
.ways { margin: 4px 0 16px; }
.ways-title { font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.ways-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.way { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--card, #fff); }
.way-ask { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: color-mix(in srgb, var(--brand) 5%, var(--card, #fff)); }
.way-head { display: flex; align-items: center; gap: 10px; }
.way-head b { font-size: 14.5px; color: var(--ink); }
.way p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; flex: 1; }
.way-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- automations: watch continuously (monitors.jsx) */
.auto-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.auto-kind { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--card, #fff); cursor: pointer; font: inherit; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease; }
.auto-kind:hover, .auto-kind:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); outline: none; }
.auto-kind b { font-size: 15px; } .auto-kind span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.auto-ic { font-size: 22px; color: var(--brand); } .auto-ic.live { color: var(--brand-2); }
.mon-rules { display: flex; flex-direction: column; gap: 6px; }
.mon-rules .ant-checkbox-wrapper { margin-inline-start: 0 !important; }
.mon-teams { display: flex; gap: 10px; align-items: center; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--soft); font-size: 13px; }
.mon-list { margin-bottom: 6px; }
.conv-group { font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 10px 4px 4px; }
.mon-state { margin-right: 6px; font-size: 11px; display: inline-flex; align-items: center; gap: 5px; }
.mon-state .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22a861; box-shadow: 0 0 0 0 rgba(34,168,97,.5); animation: mon-pulse 1.8s infinite; display: inline-block; }
@keyframes mon-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,168,97,.5); } 70% { box-shadow: 0 0 0 6px rgba(34,168,97,0); } 100% { box-shadow: 0 0 0 0 rgba(34,168,97,0); } }
.mon-err { color: #c8412f; }
.bell-btn { display: inline-flex; align-items: center; justify-content: center; }
.alert-row { display: block; width: 100%; text-align: left; font: inherit; color: var(--ink); background: var(--card, #fff); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
.alert-row.high { border-left-color: #d48806; }
.alert-row.read { opacity: .62; border-left-color: var(--line); }
.alert-row:hover { background: var(--soft); }
.alert-top { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; font-size: 13.5px; }
.alert-why { color: var(--brand-2); font-size: 12px; margin-top: 3px; }
.alert-sum { color: var(--muted); font-size: 12.8px; margin-top: 3px; }
.alert-meta { color: var(--muted); font-size: 11.5px; margin-top: 5px; }
.mon-toast > div + div { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .mon-state .live-dot { animation: none; } }

/* ---------------------------------------------------------------- notifications and delivery (notifyprefs.jsx) */
.np-chans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.np-chan { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--card, #fff); }
.np-chan.off { opacity: .75; }
.np-chan-head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.np-chan-head .anticon { color: var(--brand); font-size: 17px; }
.np-facts { margin: 0; display: grid; grid-template-columns: 1fr; gap: 2px; font-size: 12.8px; }
.np-facts dt { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; margin-top: 6px; }
.np-facts dd { margin: 0; color: var(--ink); line-height: 1.5; }
.np-chan > .ant-btn { align-self: flex-start; margin-top: 4px; }
.np-table { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.np-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 80px 80px; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.np-row:first-child { border-top: 0; }
.np-headrow { background: var(--soft); font-size: 12px; font-weight: 650; color: var(--muted); }
.np-row > span:not(:first-child) { text-align: center; }
.np-row b { display: block; font-size: 13.5px; color: var(--ink); }
.np-row small { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; }
.alert-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.alert-row.decided, .alert-row.decided .alert-why { color: var(--muted); }
.alert-row.decided { border-left-color: var(--line); }
.alert-popups { display: flex; gap: 10px; align-items: flex-start; padding: 8px 2px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.alert-popups .ant-switch { flex: none; margin-top: 3px; }
/* meeting reminders in the Classic alerts drawer (nx-meetings-remind.jsx, 10 Nov 2026) */
.mtr-cl { padding: 0 0 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.mtr-cl__h { margin: 0 0 8px; font-size: 13px; color: var(--muted); font-weight: 600; }
.mtr-cl__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mtr-cl__row { display: grid; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 6px; }
.mtr-cl__main { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.mtr-cl__acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mtr-cl__btn { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; }
.mtr-cl__btn:hover { border-color: var(--brand); color: var(--brand); }
.mtr-cl__btn--p, .mtr-cl__btn--p:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.mtr-cl__btn:focus-visible, .mtr-cl__link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mtr-cl__msg { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
.mtr-cl__link { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; font: inherit; text-decoration: underline; }
@media (max-width: 640px) { .np-row { grid-template-columns: minmax(0, 1fr) 54px 54px 54px; padding: 10px; } .np-headrow span { font-size: 10.5px; } }

/* ---------------------------------------------------------------- composer: the Outlook-style bar, and "Email this" */
.compose-tools { display: flex; flex-direction: column; gap: 2px; }
.compose-colours { display: inline-flex; gap: 3px; padding: 0 4px; }
.compose-colours button { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); cursor: pointer; padding: 0; }
.email-this .ant-modal-content { padding: 0; background: transparent; box-shadow: none; }
.email-this .composer { margin: 0; }

/* ---------------------------------------------------------------- training */
.training-steps { font-size: 14.5px; line-height: 1.8; }
.training-today .ant-radio-button-wrapper { display: inline-flex; align-items: center; gap: 6px; }
.sp-picked { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); font-size: 15px; }
.sp-picked > .anticon { font-size: 26px; }
.sp-picked > div { flex: 1; min-width: 0; }
.spb-pane { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.spb-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; background: var(--soft); border-bottom: 1px solid var(--line); }
.spb-split { display: grid; grid-template-columns: 1fr; }
.spb-split.with { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
@media (max-width: 1100px) { .spb-split.with { grid-template-columns: 1fr; } }
.spb-name { display: inline-flex; align-items: center; gap: 8px; }
.spb .spb-on > td { background: var(--brand-soft) !important; }
.spb-preview { border-left: 1px solid var(--line); padding: 10px 12px; min-width: 0; }
.spb-preview-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.spb-preview-body { max-height: 520px; overflow: auto; }
.spb-hint { padding: 12px; }
.sp-facts { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0 0 10px; font-size: 12.5px; }
.sp-facts dt { color: var(--muted); }
.sp-facts dd { margin: 0; overflow-wrap: anywhere; }
.sp-frame { width: 100%; height: 500px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.sp-img { max-width: 100%; border: 1px solid var(--line); border-radius: 6px; }
.sp-paper { white-space: pre-wrap; background: #fff; color: #1f2330; border: 1px solid var(--line); border-radius: 6px; padding: 24px 28px; font-size: 13.5px; line-height: 1.6; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.np-agent-format { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.training-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.training-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); cursor: pointer; font: inherit; }
.training-tile:hover, .training-tile:focus-visible { border-color: var(--brand); outline: none; }
.training-tile.on { border-color: var(--brand); background: var(--brand-soft); }
.training-tile-n { font-size: 22px; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
.training-tile-l { font-weight: 600; }
.training-checks { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; display: grid; gap: 3px; }
.mail-head { border: 1px solid var(--line); border-radius: 8px 8px 0 0; padding: 8px 12px; display: grid; gap: 3px; background: var(--soft); }
.mail-head .ant-typography-secondary { display: inline-block; min-width: 64px; }
.mail-frame { width: 100%; height: 440px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; background: #fff; }

/* Generated apps (appframe.jsx): the sandboxed frame fills the page below its bar. */
.app-panel { display: flex; flex-direction: column; gap: 10px; }
.app-bar { background: var(--card, #fff); border: 1px solid var(--line, #e6e8ef); border-radius: 12px; padding: 10px 12px; }
.app-frame { width: 100%; margin-bottom: 88px; height: calc(calc(100 * var(--ao-vh)) - 230px); min-height: 480px; border: 0; border-radius: 12px; background: var(--card, #fff); box-shadow: 0 1px 3px rgba(20, 24, 40, .08); }

/* Live progress: the real steps of a running agent (memory.jsx LiveProgress). */
.live-steps { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; margin: 10px 0; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); width: fit-content; min-width: 240px; max-width: 100%; }
.live-step { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; }
.live-step.sub { padding-left: 20px; opacity: .85; }
.live-step.bad { color: var(--warm); }
.live-ic { flex: none; width: 16px; color: var(--green); }
.live-step.bad .live-ic { color: var(--warm); }
/* The live steps (17 Oct 2026): what it did, then what came of it; repeated calls are one line that opens; the model's own planning is a quiet line. */
.live-what { color: var(--muted); }
.live-step.quiet { color: var(--muted); font-style: italic; }
.live-step.waiting .live-ic { color: var(--amber, #d48806); }
.live-step.draft .live-ic { color: var(--brand); }
.live-more { padding: 0 6px; height: auto; font-size: 12px; }
.live-children { margin: 4px 0 2px; padding-left: 4px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.live-child { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); }
.live-end { margin-top: 2px; font-weight: 500; }
.live-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 2px; }
.live-details-sw { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--muted); cursor: pointer; }
.live-detail { margin: 1px 0 0 22px; font-size: 12px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 860px) { .live-details-sw { min-height: 44px; } .live-detail { margin-left: 0; } }
/* What memory did for an answer, and the My memory page. */
.mem-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.mem-line .ant-btn-link { padding: 0 4px; height: auto; font-size: 12.5px; }
.mem-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.mem-item:last-child { border-bottom: 0; }
.mem-item.conflict { background: var(--warm-soft); padding: 10px; border-radius: 10px; margin-top: 8px; }
.mem-text { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Train & improve (improve.jsx): one tab, compact, details in sections */
.imp { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.imp-next { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.imp-next-t { flex: 1 1 320px; min-width: 0; }
.imp-glance { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.imp-chip { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); min-width: 0; }
.imp-chip.warn { border-color: var(--warm, #d48806); }
.imp-chip-i { font-size: 18px; color: var(--muted); }
.imp-chip-v { display: block; font-weight: 700; font-size: 17px; line-height: 1.2; }
.imp-chip-l { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; }
.imp-note { margin-top: -4px; }
.imp-sec { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-weight: 600; }
.imp-sec .muted { font-weight: 400; }
.imp-how { display: grid; gap: 6px; margin-bottom: 12px; }
.imp-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.imp-list { margin-top: 12px; }
.imp-list-h { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.imp-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.imp-row:last-child { border-bottom: 0; }
.imp-clip { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.imp-foot { margin-top: 10px; }
.imp-hist { margin-top: 10px; }
.imp-hist summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.imp-corr { padding: 6px 0; border-bottom: 1px solid var(--line); }
.imp-form { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.imp-form label:not(.ant-checkbox-wrapper) { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.imp-form label:not(.ant-checkbox-wrapper) > * { font-weight: 400; }
.imp-lesson { display: grid; gap: 8px; }
.imp-lesson .pre, .imp-corr .pre, .imp-test .pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.imp-answer { max-height: 320px; overflow: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.imp-sum { padding: 6px 0; }
.imp-tests { display: grid; gap: 0; }
.imp-test { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px) auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start; }
.imp-test:last-child { border-bottom: 0; }
.imp-test ul { margin: 4px 0 6px; padding-left: 18px; color: var(--muted); font-size: 13px; }
.imp-test-r { display: grid; gap: 4px; }
.imp-test-a { display: flex; }
.imp-v { display: inline-flex; gap: 4px; align-items: center; }
.imp-v.ok { color: #389e0d; } .imp-v.bad { color: #cf1322; } .imp-v.none { color: var(--muted); }
.imp-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.imp-grid .card.wide { grid-column: 1 / -1; }
.imp-top { margin: 0; }
.kn-row { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.kn-row:last-of-type { border-bottom: 0; }
.kn-l { font-weight: 600; font-size: 13px; }
.kn-v { min-width: 0; overflow-wrap: anywhere; }
.kn-sub { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 4px 0 4px 12px; overflow-wrap: anywhere; }
.kn-total { margin-top: 8px; font-size: 13px; color: var(--muted); }
.kn-warn { color: #d46b08; }
.kn-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pf-row { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pf-row:last-of-type { border-bottom: 0; }
.pf-l { font-weight: 600; font-size: 13px; }
.pf-i { color: var(--muted); cursor: help; }
.pf-v { min-width: 0; overflow-wrap: anywhere; }
.pf-table { overflow-x: auto; }
.pf-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pf-table th, .pf-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.teach-row { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Train mode in the agent's chat (train.jsx) */
.tr-top { display: grid; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--card); }
.tr-top-a { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-width: 0; }
.tr-top-b { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tr-top-b .ant-tag { margin: 0; white-space: normal; }
.tr-scroll { display: flex; flex-direction: column; gap: 12px; }
.tr-msg { display: flex; }
.tr-msg.person { justify-content: flex-end; }
.tr-bubble { max-width: min(100%, 760px); min-width: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.tr-bubble.me { background: var(--brand-soft, rgba(79, 70, 229, .1)); border-color: transparent; }
.tr-bubble.draft { border-style: dashed; }
.tr-bubble .pre, .tr-card .pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.tr-who { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.tr-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
.tr-card.rejected { opacity: .6; }
.tr-card-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tr-card-t { font-weight: 600; flex: 1 1 200px; min-width: 0; }
.tr-before, .tr-after { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 6px; padding: 6px 8px; border-radius: 8px; font-size: 13.5px; }
.tr-before { background: rgba(207, 19, 34, .08); text-decoration: line-through; text-decoration-color: rgba(207, 19, 34, .5); }
.tr-after { background: rgba(56, 158, 13, .1); }
.tr-mark { font-weight: 700; text-decoration: none; }
.tr-acts { align-items: center; }
.tr-hello { margin: auto; max-width: 620px; display: grid; gap: 8px; padding: 24px 8px; }
.tr-hello-i { font-size: 28px; color: var(--muted); }
.tr-hello ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.tr-modes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.tr-board-hint { margin: -2px 0 8px; display: flex; flex-wrap: wrap; align-items: center; }
.tr-board-hint .ant-btn-link { padding: 0 4px; height: auto; }
.tr-doc-text { max-height: calc(60 * var(--ao-vh)); overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
/* On a phone: the Train button is its icon (antd wraps the icon in .ant-btn-icon; the label is the other span), and the
   chat's buttons drop under the agent's name instead of squeezing it to nothing. */
@media (max-width: 700px) {
  .tr-toggle > span:not(.ant-btn-icon) { display: none; }
  .tr-toggle { padding-inline: 8px; }
  .chat-head { flex-wrap: wrap; row-gap: 6px; }
  .chat-head-main { flex: 1 1 220px; }
  .chat-head-actions { flex-wrap: wrap; margin-left: auto; }
}
@media (max-width: 700px) { .imp-test { grid-template-columns: minmax(0, 1fr); } .kn-row, .pf-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.mem-edit, .mem-add { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.mem-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.mem-row .ant-select { flex: 1 1 220px; max-width: 360px; margin-right: auto; }
.mem-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.mem-acts { margin-left: auto; display: flex; gap: 4px; }
/* How long a finished task took, kept after the live steps are gone. */
.done-in { margin-left: 10px; color: var(--green); font-variant-numeric: tabular-nums; }

/* System load (Settings > System load): one capacity line, four meters, then the counts. */
.load-cap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.load-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: 0 0 0 4px var(--soft); }
.load-cap-state { font-size: 22px; font-weight: 700; line-height: 1.2; }
.load-meter { display: grid; gap: 4px; }
.load-meter-head { display: flex; justify-content: space-between; align-items: baseline; }
.load-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.load-num { padding: 10px 12px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); }
.load-num-v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.load-num-l { font-size: 12.5px; color: var(--muted); }
.load-num-h { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.load-num.warn { background: var(--amber-soft); } .load-num.warn .load-num-v { color: var(--amber); }
.load-num.bad { background: var(--red-soft); } .load-num.bad .load-num-v { color: var(--red); }
/* Agents overview (Settings > Agents overview): counts, capacity, charts, then the list; a drawer per agent. */
.fleet-kpis { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (max-width: 1500px) { .fleet-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fleet-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fleet-cap-state { font-size: 22px; font-weight: 700; line-height: 1.2; margin-bottom: 4px; }
.fleet-meters { display: grid; gap: 12px; }
.fleet-meter { display: grid; gap: 2px; }
.fleet-meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fleet-meter .ant-progress, .fleet-provider .ant-progress { margin: 0; }
.fleet-donut { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.fleet-donut-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.fleet-donut-mid b { font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.fleet-donut-mid span { font-size: 12px; color: var(--muted); }
.fleet-legend { display: grid; gap: 4px; flex: 1; min-width: 170px; }
.fleet-legend-row { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; border: 1px solid transparent;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fleet-legend-row:hover, .fleet-legend-row:focus-visible { background: var(--soft); outline: none; border-color: var(--line); }
.fleet-legend-row.on { background: var(--brand-soft); border-color: var(--brand); }
.fleet-legend-row b { font-variant-numeric: tabular-nums; }
.fleet-sw { width: 12px; height: 12px; border-radius: 3px; }
.fleet-warns { display: grid; gap: 10px; }
.fleet-warn { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--soft); border: 1px solid var(--line); }
.fleet-warn.error { background: var(--red-soft); } .fleet-warn.error .fleet-warn-ic { color: var(--red); }
.fleet-warn.warning { background: var(--amber-soft); } .fleet-warn.warning .fleet-warn-ic { color: var(--amber); }
.fleet-warn.info .fleet-warn-ic { color: var(--blue); }
.fleet-warn-ic { font-size: 16px; padding-top: 1px; }
.fleet-fix { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.fleet-providers { display: grid; gap: 14px; }
.fleet-provider { display: grid; gap: 2px; }
.fleet-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.fleet-agent a { font-weight: 600; }
.fleet-sub { font-size: 12px; color: var(--muted); }
.fleet-row { cursor: pointer; }
.fleet-row.is-error > td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.fleet-fail { padding: 8px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.fleet-fail:last-child { border-bottom: 0; }
@media (max-width: 640px) { .fleet-filters > * { width: 100% !important; } .fleet-donut { justify-content: center; } }
/* Files on a training comment: pictures as small thumbnails, other files as names. */
.tr-attach { margin-top: 10px; display: grid; gap: 8px; }
.tr-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tr-file { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.tr-file img { height: 64px; max-width: 120px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
.tr-file a { overflow-wrap: anywhere; }
/* Design checks you can act on: each says how to fix it, a click opens and lights up the section to change. */
.check-row.check-fixable { cursor: pointer; align-items: flex-start; }
.check-row.check-fixable > span:not(.anticon):not(.ant-btn-icon) { display: grid; gap: 2px; }
.check-fix { font-size: 12.5px; color: var(--muted); }
.studio-glow { box-shadow: 0 0 0 2px var(--red) inset; border-radius: 8px; animation: studio-glow 2.4s ease-out; }
@keyframes studio-glow { 0%, 60% { background: var(--red-soft); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .studio-glow { animation: none; } }
/* Company knowledge: asking the documents (answer, sources with their quotes), how a document was read, test questions. */
.kb-ask-head { display: flex; gap: 12px; align-items: flex-start; }
.kb-ask-busy { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.kb-answer { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); }
.kb-answer-text { font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.kb-claims { margin: 0; padding-left: 20px; line-height: 1.6; }
.kb-ref { color: var(--brand); font-weight: 600; font-size: 12px; }
.kb-sources { display: grid; gap: 10px; }
.kb-source-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.kb-quote { margin: 4px 0 0; padding: 6px 12px; border-left: 3px solid var(--brand); background: var(--card); border-radius: 0 8px 8px 0; font-style: italic; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.kb-answer-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.kb-reading > .ant-alert { margin-bottom: 10px; }
.kb-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 4px 0 12px; }
.kb-facts > div { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.kb-facts b { font-size: 13px; overflow-wrap: anywhere; }
.kb-ocr { margin-bottom: 10px; }
.kb-ocr-page { padding: 6px 0; border-bottom: 1px solid var(--line); }
.kb-ocr-page:last-child { border-bottom: 0; }
.kb-ocr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12.5px; padding: 3px 0; }
.kb-ocr-row span { overflow-wrap: anywhere; }
.kb-table-wrap { overflow-x: auto; }
.kb-parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kb-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; max-height: 480px; overflow: auto; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0; }
.kb-test-head { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.kb-test-wait { border-color: var(--amber) !important; background: var(--amber-soft) !important; }
.kb-result { margin-top: 6px; font-size: 12.5px; }
.kb-result.ok .anticon { color: var(--green); } .kb-result.bad .anticon { color: var(--red); }
.kb-was { margin-top: 4px; padding: 4px 8px; border-radius: 6px; background: var(--card); border: 1px dashed var(--line); font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 640px) { .kb-ocr-row { grid-template-columns: 1fr; } .kb-answer { padding: 12px; } }
/* The Assistant: a complete answer to a question, and the requests a vague message may mean, one press each. */
.thr-answer { margin-top: 8px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.thr-options { margin-top: 10px; display: grid; gap: 6px; justify-items: start; }
.thr-option { height: auto !important; white-space: normal !important; text-align: left; padding: 6px 12px !important; max-width: 100%; }
/* Behind the scenes on a task (administrators and IT): each tool, its arguments and the requests it made. */
.tech-steps { display: grid; gap: 10px; }
.tech-step { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); overflow-wrap: anywhere; }
.tech-step code { font-size: 12px; }

/* A reply to a training comment, under what the person wrote. */
.training-reply { margin-top: 6px; padding: 6px 10px; border-left: 3px solid var(--brand); background: var(--soft); border-radius: 0 6px 6px 0; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.challenge-next { background: var(--soft); border-radius: 6px; padding-left: 8px !important; }

/* The hand (hand.js): a box wider than itself is dragged sideways from anywhere inside it. */
.ao-hand { cursor: grab; }
.ao-hand a, .ao-hand button, .ao-hand input, .ao-hand textarea, .ao-hand select, .ao-hand [role="button"] { cursor: pointer; }
.ao-hand input, .ao-hand textarea { cursor: text; }
body.ao-panning, body.ao-panning * { cursor: grabbing !important; user-select: none !important; }
/* Full width side panels (fullwidth.js). antd sets the panel width inline, so this has to win over it. */
.ant-drawer-content-wrapper.ao-drawer-full { width: calc(100 * var(--ao-vw)) !important; max-width: calc(100 * var(--ao-vw)) !important; }
.ao-full-btn { margin-left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line, #d9d9e3); border-radius: 8px; background: transparent; color: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.ao-full-btn:hover { border-color: var(--brand, #4f46e5); color: var(--brand, #4f46e5); }
.ao-full-btn:focus-visible { outline: 2px solid var(--brand, #4f46e5); outline-offset: 2px; }
@media (max-width: 767px) { .ao-full-btn { display: none; } } /* drawers sit outside the shell, so the phone class does not reach them */
.training-retest { margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--brand, #4f46e5); border-radius: 8px; }

/* Recruitment screening (recruit.jsx) */
.rec-crit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.rec-quote { margin-top: 4px; padding: 4px 8px; border-left: 3px solid var(--brand, #4f46e5); background: var(--soft, #f5f6fa); border-radius: 0 6px 6px 0; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.rec-list { margin: 0; padding-left: 18px; }

/* Report an issue and the review screen (issues.jsx) */
.report-btn { border-color: #f59e0b; color: #b45309; }
.report-btn:hover { border-color: #d97706 !important; color: #92400e !important; }
.issue-shot { display: flex; gap: 8px; align-items: flex-start; }
.issue-shot img { max-width: 260px; max-height: 160px; border: 1px solid var(--line, #e5e7eb); border-radius: 6px; }
.issue-shot-full { max-width: 100%; margin: 8px 0; border: 1px solid var(--line, #e5e7eb); border-radius: 6px; }
.issue-diff { max-height: 460px; overflow: auto; padding: 8px 10px; background: var(--soft, #f5f6fa); border-radius: 6px; font-size: 12px; line-height: 1.45; white-space: pre; }
.issue-diff .add { color: #067647; background: rgba(16, 185, 129, 0.10); display: inline-block; min-width: 100%; }
.issue-diff .del { color: #b42318; background: rgba(239, 68, 68, 0.10); display: inline-block; min-width: 100%; }
.issue-diff .hunk { color: #6941c6; }
[data-theme="dark"] .report-btn { color: var(--color-warning); border-color: #b45309; }

/* Systems & Data: a card opens its details (Sohaib, training day 5: the boxes looked clickable but were not). */
.sys-card.sys-open { transition: border-color .15s, box-shadow .15s; }
.sys-card.sys-open:hover, .sys-card.sys-open:focus-visible { border-color: var(--brand); box-shadow: 0 2px 10px rgba(79, 70, 229, .12); outline: none; }


/* Dashboard version history (n8n-style): one row per version, the version in use marked. */
.hist-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.hist-row { padding: 10px 12px; border: 1px solid var(--line, rgba(15, 23, 42, .1)); border-radius: 10px; }
.hist-row.now { border-color: var(--green, #16a34a); background: rgba(22, 163, 74, .05); }
.hist-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.hist-data { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.hist-data .ant-tag { margin-inline-end: 0; }

/* ---------------------------------------------------------------- dashboards: depth and motion (Sheraz, 8 Oct 2026:
   "the dashboard looks simple, I want some 3D effect and some animations"). Every dashboard, from these rules only:
   cards rise in one after another, KPI cards tilt a little toward the reader on hover with their icon lifting off the
   card, figures count up (boardkit useCountUp), sparklines draw, ranking bars grow, and a red card whose figure is above
   zero pulses softly. Nothing moves for people who asked for less motion, or on paper. */
:root { --bk-depth: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 1px 2px rgba(16, 24, 64, .06), 0 2px 6px -2px rgba(30, 41, 99, .10), 0 14px 28px -18px rgba(30, 41, 99, .38);
  --bk-depth-hi: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 2px 4px rgba(16, 24, 64, .06), 0 8px 16px -6px rgba(30, 41, 99, .16), 0 26px 40px -22px rgba(30, 41, 99, .45);
  --bk-sheen: linear-gradient(160deg, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, 0) 42%); }
[data-theme="dark"] { --bk-depth: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 2px 6px rgba(0, 0, 0, .35), 0 16px 30px -18px rgba(0, 0, 0, .7);
  --bk-depth-hi: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 6px 14px rgba(0, 0, 0, .45), 0 28px 44px -20px rgba(0, 0, 0, .8);
  --bk-sheen: linear-gradient(160deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 45%); }
@keyframes bk-rise { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }

@keyframes bk-fade { from { opacity: 0; } }
@keyframes bk-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bk-pop { 0% { opacity: 0; transform: scale(.55) rotate(-10deg); } 70% { opacity: 1; transform: scale(1.1) rotate(3deg); } 100% { transform: none; } }
@keyframes bk-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(212, 56, 13, .32); } 55% { box-shadow: 0 0 0 7px rgba(212, 56, 13, 0); } }
.bk-kpis, .bk-row { perspective: 1100px; }
.bk-kpi, .bk-card { position: relative; box-shadow: var(--bk-depth); animation: bk-rise .55s cubic-bezier(.2, .8, .2, 1) both;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease, border-color .15s; }
.bk-kpi { transform-style: preserve-3d; }
.bk-kpi::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--bk-sheen); pointer-events: none; }
.bk-kpi > * { position: relative; }
.bk-kpi:hover { transform: translateY(-5px) rotateX(5deg) rotateY(-3deg); box-shadow: var(--bk-depth-hi); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.bk-card:hover { transform: translateY(-3px); box-shadow: var(--bk-depth-hi); }
.bk-kpis > :nth-child(2) { animation-delay: .05s; } .bk-kpis > :nth-child(3) { animation-delay: .1s; } .bk-kpis > :nth-child(4) { animation-delay: .15s; }
.bk-kpis > :nth-child(5) { animation-delay: .2s; } .bk-kpis > :nth-child(6) { animation-delay: .25s; } .bk-kpis > :nth-child(n+7) { animation-delay: .3s; }
.bk-row > :nth-child(2) { animation-delay: .08s; } .bk-row > :nth-child(n+3) { animation-delay: .16s; }
.bk-kpi-ic { background-image: linear-gradient(145deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 60%); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 6px 12px -6px currentColor;
  animation: bk-pop .6s .2s cubic-bezier(.2, .8, .2, 1) both; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
[data-theme="dark"] .bk-kpi-ic { background-image: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 60%); box-shadow: 0 6px 12px -6px currentColor; }
.bk-kpi:hover .bk-kpi-ic { transform: translateZ(24px) scale(1.14) rotate(-6deg); }
.bk-kpi.alarm .bk-kpi-ic { animation: bk-pop .6s .2s cubic-bezier(.2, .8, .2, 1) both, bk-pulse 2.6s 1.2s ease-in-out infinite; }
.bk-kpi-value { text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
[data-theme="dark"] .bk-kpi-value { text-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.bk-spark { animation: bk-reveal 1.2s .35s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes bk-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.bk-rank-track span { transform-origin: left center; animation: bk-grow .9s .2s cubic-bezier(.2, .8, .2, 1) both; box-shadow: 0 2px 6px -2px rgba(47, 111, 237, .55); }
.bk-rank li:nth-child(2) .bk-rank-track span { animation-delay: .27s; } .bk-rank li:nth-child(3) .bk-rank-track span { animation-delay: .34s; }
.bk-rank li:nth-child(4) .bk-rank-track span { animation-delay: .41s; } .bk-rank li:nth-child(n+5) .bk-rank-track span { animation-delay: .48s; }
.bk-rank li { transition: transform .2s ease, background .15s; } .bk-rank li:hover { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .bk-kpi, .bk-card, .bk-kpi-ic, .bk-spark, .bk-rank-track span { animation: none !important; }
  .bk-kpi:hover, .bk-card:hover, .bk-kpi:hover .bk-kpi-ic, .bk-rank li:hover { transform: none; }
}
@media print {
  .bk-kpi, .bk-card, .bk-kpi-ic, .bk-spark, .bk-rank-track span { animation: none !important; transform: none !important; box-shadow: none !important; }
  .bk-kpi::before { display: none; }
}

/* ---------------------------------------------------------------- dashboards gallery: live, sample and template told
   apart (Sheraz, 8 Oct 2026: "templates and live dashboards show together; people cannot tell which is live"). */
@keyframes gal-beat { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .35; } }
.gal-thumb .gt-live { left: 10px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: #fff;
  background: linear-gradient(135deg, #16a34a, #0d9488); padding: 2px 9px; border-radius: 999px; box-shadow: 0 4px 10px -4px rgba(22, 163, 74, .7); }
.gal-thumb.agent .gt-live { position: absolute; font-size: 10.5px; }
.gt-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; display: inline-block; animation: gal-beat 1.6s ease-in-out infinite; }
.gal-card.is-live { border-color: color-mix(in srgb, #16a34a 30%, var(--line)); }
.gal-thumb.sample .gt-kpis, .gal-thumb.sample .gt-body { filter: grayscale(.85) opacity(.7); }
.gal-thumb .gt-ribbon { position: absolute; top: 18px; right: -38px; transform: rotate(32deg); width: 150px; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .1em;
  color: #7c2d12; background: repeating-linear-gradient(45deg, #fed7aa 0 8px, #fdba74 8px 16px); padding: 3px 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); filter: none; }
.gal-card.sample { border-style: dashed; border-color: color-mix(in srgb, #f97316 45%, var(--line)); }
.gal-card.sample .gal-title b { color: var(--muted); }
.gal-thumb .gt-tpl { position: absolute; top: 8px; right: 10px; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: var(--muted); background: var(--card);
  border: 1px dashed var(--line); padding: 1px 8px; border-radius: 999px; }
.gal-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.gal-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 3px 12px; cursor: pointer; font: inherit; font-size: 13px; }
.gal-chip em { font-style: normal; opacity: .6; font-size: 12px; }
.gal-chip:hover { border-color: var(--brand); }
.gal-chip.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.gal-dept { margin-bottom: 20px; }
.gal-dept-h { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.gal-sec { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.gal-sec.sample { margin-top: 26px; padding-top: 16px; border-top: 1px dashed var(--line); }
.gal-sec-dot { width: 9px; height: 9px; border-radius: 50%; background: #f97316; display: inline-block; align-self: center; }
.gal-sec-dot.live { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }
.gal-suggest-h { gap: 10px; flex-wrap: wrap; } .gal-suggest-h a { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .gt-dot { animation: none; } }

/* inside a dashboard still on example figures: said to everyone who opens it */
.board-sample-note { margin-bottom: 12px; }

/* the dashboards' map block: a real street map (Leaflet), styled to sit in the card */
.bk-map { border-radius: 10px; overflow: hidden; z-index: 0; background: var(--soft); }
.bk-map .leaflet-control-zoom a { color: var(--ink); }
.bk-map .leaflet-control-attribution { font-size: 9.5px; background: color-mix(in srgb, var(--card) 80%, transparent); }
.bk-map-dot { transition: opacity .15s; animation: bk-fade .6s .2s both; }
.bk-map .leaflet-interactive.bk-map-dot:hover { fill-opacity: 1; }
.bk-map-pop { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.bk-map-pop button { align-self: flex-start; margin-top: 4px; border: 1px solid var(--line); background: var(--card); color: var(--brand); border-radius: 6px; padding: 2px 10px; cursor: pointer; font: inherit; }
.bk-map-pop a { color: var(--brand); }
[data-theme="dark"] .bk-map .leaflet-popup-content-wrapper, [data-theme="dark"] .bk-map .leaflet-popup-tip, [data-theme="dark"] .bk-map .leaflet-tooltip { background: #1d1f2b; color: #e6e8f0; }
[data-theme="dark"] .bk-map .leaflet-bar a { background: #1d1f2b; color: #e6e8f0; border-color: #2c2f3d; }

.bk-map .leaflet-interactive:focus { outline: none; }
[data-theme="dark"] .bk-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.6); }

/* the PowerPoint add-in (web/src/addin.jsx): a slide's frame, so compact and edge to edge */
body.ao-addin { margin: 0; background: var(--bg, #f5f6fa); }
.addin-root { min-height: calc(100 * var(--ao-vh)); }
.addin-center { min-height: calc(100 * var(--ao-vh)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 4px; }
.addin-board { padding: 6px 10px 10px; }
.addin-board .bk-board { gap: 10px; }
.addin-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.addin-pick { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.addin-pick-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.addin-pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.addin-pick-item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; font: inherit; box-shadow: var(--bk-depth); transition: transform .2s, box-shadow .2s; }
.addin-pick-item:hover, .addin-pick-item:focus-visible { transform: translateY(-2px); box-shadow: var(--bk-depth-hi); outline: none; border-color: var(--brand); }
.ppt-steps { padding-left: 20px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.decide-who { margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }

/* Admin review: the kind of each request at a glance, and a filter by kind (8 Oct 2026). */
.kind-filter{padding:12px 16px;border-bottom:1px solid var(--ao-border, rgba(0,0,0,.06));overflow-x:auto}
.kind-tag{white-space:nowrap;margin:0}


/* Dashboard rows window (8 Oct 2026): calm table, one line per row, numbers aligned, header kept in view. */
.bk-drill .ant-drawer-body{padding:0 0 8px}
.bk-drill-title{display:flex;flex-direction:column;line-height:1.25}
.bk-drill-title small{font-size:12px;font-weight:400;color:var(--ant-color-text-tertiary, #8a8fa8)}
.bk-drill-table .ant-table-thead>tr>th{white-space:normal;min-width:84px;max-width:150px;vertical-align:bottom;font-weight:600;font-size:12px;line-height:1.3;background:var(--soft);color:var(--ink)}
.bk-drill-table .ant-table-tbody>tr>td{white-space:nowrap;vertical-align:middle}
/* Striped rows from the app's own token: the Ant variable it used is not defined, so it fell back to near-white in dark mode and white text vanished on every second row (issue #4, 8 Oct 2026). */
.bk-drill-table .ant-table-tbody>tr:nth-child(even)>td{background:color-mix(in srgb, var(--soft) 70%, var(--card))}
.bk-drill-table td.bk-num{font-variant-numeric:tabular-nums}
.bk-drill-table .bk-cell{display:inline-block;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.bk-drill-table .ant-pagination{padding:0 16px}

/* Dashboard refresh schedule, per live source (8 Oct 2026). */
.bk-refresh-tip{display:flex;flex-direction:column;gap:6px;max-width:360px}.bk-refresh-tip .muted{opacity:.75;font-size:12px}


/* Share: one choice of who sees a dashboard (8 Oct 2026). */
.share-who{display:flex;flex-direction:column;gap:10px;margin-top:8px;width:100%}.share-who .ant-radio-wrapper{align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:10px;margin:0}.share-who .ant-radio-wrapper-checked{border-color:var(--ant-color-primary,#4f46e5);background:color-mix(in srgb,var(--ant-color-primary,#4f46e5) 14%,transparent);color:inherit}/* 3 Nov 2026: a fixed light fill made white text unreadable in dark themes; a tint of the accent keeps the theme text colour */


/* Create agent, "What may it use" and "How should it work" (8 Oct 2026): suggestions first, depth and motion that stay
   smooth (transform and opacity only) and stop for anyone who prefers less motion. */
.use-search { margin: 4px 0 14px; }
.use-thinking { display: flex; gap: 8px; align-items: center; color: var(--muted); margin: -4px 0 12px; animation: use-pulse 1.4s ease-in-out infinite; }
.use-group { margin-bottom: 14px; animation: use-in .28s ease both; }
.use-item { animation: use-in .26s ease both; animation-delay: calc(min(var(--i, 0), 10) * 28ms); }
.use-item .sys-card.sys-pick { transition: transform .16s ease, border-color .16s ease, background-color .16s ease; }
.use-item .sys-card.sys-pick:not(.locked):hover { transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(79, 70, 229, .45); }
.use-item .sys-card.sys-pick.on { box-shadow: inset 0 0 0 1px var(--brand), 0 8px 20px -12px rgba(79, 70, 229, .5); animation: use-pop .22s ease; }
.use-item.suggested .sys-card.sys-pick { background-image: linear-gradient(135deg, var(--brand-soft), transparent 55%); }
.use-item .sys-card.sys-pick.locked { opacity: .92; }
.use-why { color: var(--brand); margin-top: 6px; }
.use-lock { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.use-empty { padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; }
.guide-files { margin-top: 16px; }
.guide-add { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.guide-list { margin-top: 10px; display: grid; gap: 8px; }
.guide-item { border: 1px solid var(--line); border-radius: 12px; background: var(--card); transition: transform .16s ease; animation: use-in .24s ease both; }
.guide-item:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -12px rgba(21, 24, 39, .3); }
.guide-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; }
.guide-name { all: unset; cursor: pointer; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.guide-name:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.guide-text { margin: 0; padding: 10px 12px; border-top: 1px solid var(--line); max-height: 260px; overflow: auto; white-space: pre-wrap; font-size: 12px; background: var(--soft); border-radius: 0 0 12px 12px; }
.builder .ant-steps-item-process .ant-steps-item-icon { box-shadow: 0 6px 16px -6px rgba(79, 70, 229, .65); transition: box-shadow .2s ease; }
@keyframes use-in { from { opacity: .5; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes use-pop { 50% { transform: scale(1.012); } }
@keyframes use-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .use-group, .use-item, .use-thinking, .guide-item, .use-item .sys-card.sys-pick { animation: none !important; transition: none !important; }
  .use-item .sys-card.sys-pick:not(.locked):hover, .guide-item:hover { transform: none; }
}

/* ---------------------------------------------------------------- Systems & Data (8 Oct 2026): search first, status at a glance */
.sd-bar { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 4px 0 10px; display: grid; gap: 10px; }
.sd-search.ant-input-affix-wrapper { border-radius: 14px; box-shadow: 0 8px 24px -18px rgba(79, 70, 229, .55); }
.sd-chips, .sd-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sd-grow { flex: 1; }
.sd-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); color: inherit; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 13px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.sd-chip b { font-weight: 600; font-variant-numeric: tabular-nums; opacity: .75; }
.sd-chip:hover { border-color: var(--brand); transform: translateY(-1px); }
.sd-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sd-chip.on { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.sd-chip.on b { opacity: 1; }
.sd-chip-available:not(.on) .anticon { color: var(--green, #16a34a); }
.sd-chip-requested:not(.on) .anticon { color: #2563eb; }
.sd-chip-not_connected:not(.on) .anticon { color: #d97706; }
.sd-chip-not_allowed:not(.on) .anticon { color: #ea580c; }
.sd-chip-conf:not(.on) .anticon { color: #dc2626; }
.sd-count { margin: 2px 0 10px; }
.sd-group { margin-bottom: 22px; }
.sd-group-title.ant-typography { display: flex; align-items: center; gap: 8px; margin-bottom: 10px !important; }
.sd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 10px; }
.sd-item { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 12px 16px; cursor: pointer; overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; animation: sd-in .32s ease both; animation-delay: calc(var(--i, 0) * 22ms); }
.sd-item::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--line); }
.sd-item.sd-available::before { background: var(--green, #16a34a); }
.sd-item.sd-requested::before { background: #2563eb; }
.sd-item.sd-not_connected::before { background: #d97706; }
.sd-item.sd-not_allowed::before { background: #ea580c; }
.sd-item:hover, .sd-item:focus-visible { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 14px 28px -20px rgba(79, 70, 229, .55); outline: none; }
.sd-item:hover .sd-chev { transform: translateX(2px); opacity: .9; }
.sd-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; color: #fff; background: linear-gradient(145deg, var(--a1), var(--a2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.12), 0 6px 14px -8px var(--a2); transition: transform .16s ease; }
.sd-item:hover .sd-ic { transform: translateY(-1px) scale(1.04); }
.sd-ic-docs { --a1: #60a5fa; --a2: #2563eb; } .sd-ic-finance { --a1: #34d399; --a2: #059669; } .sd-ic-sales { --a1: #fbbf24; --a2: #d97706; }
.sd-ic-marketing { --a1: #f472b6; --a2: #db2777; } .sd-ic-people { --a1: #a78bfa; --a2: #7c3aed; } .sd-ic-mail { --a1: #38bdf8; --a2: #0284c7; }
.sd-ic-collected { --a1: #2dd4bf; --a2: #0d9488; } .sd-ic-web { --a1: #818cf8; --a2: #4f46e5; } .sd-ic-office { --a1: #94a3b8; --a2: #475569; } .sd-ic-ops { --a1: #fb923c; --a2: #ea580c; }
.sd-body { min-width: 0; }
.sd-name { font-weight: 600; line-height: 1.3; }
.sd-desc { color: var(--muted, #6b7280); font-size: 13px; line-height: 1.45; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sd-facts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.sd-facts .ant-tag { margin: 0; }
.sd-kind.ant-tag { background: transparent; }
.sd-act { display: flex; align-items: center; gap: 6px; }
.sd-chev { opacity: .45; transition: transform .16s ease, opacity .16s ease; }
.sd-empty { text-align: center; padding: 40px 16px; border: 1px dashed var(--line); border-radius: 16px; background: var(--card); }
.sd-empty-ic { font-size: 28px; color: var(--brand); margin-bottom: 8px; }
@keyframes sd-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .sd-item { grid-template-columns: auto 1fr; }
  .sd-act { grid-column: 1 / -1; justify-content: flex-end; }
  .sd-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .sd-item, .sd-chip, .sd-ic, .sd-chev { animation: none !important; transition: none !important; }
  .sd-item:hover, .sd-item:focus-visible, .sd-chip:hover, .sd-item:hover .sd-ic { transform: none; }
}

/* ---------------------------------------------------------------- My agents (9 Oct 2026): search first, status at a glance */
.af-bar { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 4px 0 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.af-search.ant-input-affix-wrapper { border-radius: 14px; box-shadow: 0 8px 24px -18px rgba(79, 70, 229, .55); }
.af-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.af-chip-active:not(.on) .anticon { color: var(--green, #16a34a); }
.af-chip-waiting:not(.on) .anticon, .af-chip-changes:not(.on) .anticon { color: #d97706; }
.af-chip-updating:not(.on) .anticon, .af-chip-building:not(.on) .anticon { color: #2563eb; }
.af-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.af-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; animation: sd-in .32s ease both; animation-delay: calc(var(--i, 0) * 22ms); }
.af-card::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--line); }
.af-card.af-active::before { background: var(--green, #16a34a); }
.af-card.af-waiting::before, .af-card.af-changes::before { background: #d97706; }
.af-card.af-updating::before, .af-card.af-building::before { background: #2563eb; }
.af-card:hover, .af-card:focus-visible { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 14px 28px -20px rgba(79, 70, 229, .55); outline: none; }
.af-av { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 19px; color: #fff;
  background: linear-gradient(145deg, var(--a1, #818cf8), var(--a2, #4f46e5)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.12), 0 6px 14px -8px var(--a2, #4f46e5); transition: transform .16s ease; }
.af-card:hover .af-av { transform: translateY(-1px) scale(1.05) rotate(-3deg); }
.af-active .af-av { --a1: #34d399; --a2: #059669; } .af-waiting .af-av, .af-changes .af-av { --a1: #fbbf24; --a2: #d97706; }
.af-updating .af-av, .af-building .af-av { --a1: #60a5fa; --a2: #2563eb; } .af-draft .af-av, .af-paused .af-av, .af-locked .af-av { --a1: #94a3b8; --a2: #64748b; }
.af-head { min-width: 0; }
.af-head b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-card .agent-tags .ant-tag, .af-card .agent-sys .ant-tag { margin: 0 4px 4px 0; }
@media (max-width: 640px) { .af-row .ant-select { flex: 1; } }
@media (prefers-reduced-motion: reduce) {
  .af-card, .af-av { animation: none !important; transition: none !important; }
  .af-card:hover, .af-card:focus-visible, .af-card:hover .af-av { transform: none; }
}

/* ---------------------------------------------------------------- the update bar (calm.jsx, 17 Oct 2026): a slim line at the top, never a window; it covers nothing and blocks nothing */
.calm-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.4; color: var(--ink);
  background: color-mix(in srgb, var(--brand) 9%, var(--card)); border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); pointer-events: auto; }
.calm-banner.restarting { background: color-mix(in srgb, #fa8c16 12%, var(--card)); border-color: color-mix(in srgb, #fa8c16 40%, var(--line)); }
.calm-banner .calm-ic { flex: none; color: var(--brand); } .calm-banner.restarting .calm-ic { color: #d46b08; }

/* Try it: files to test with (9 Oct 2026) */
.test-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.test-files .ant-tag { margin: 0; }
/* Edit agent, Try it safely: Attach files and the files as chips with their size (5 Nov 2026, builder.jsx) */
.test-attach { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.test-chips { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.test-chips li { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 2px 6px 2px 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); font-size: 13px; }
.test-chips__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.test-chips__s { color: var(--muted); white-space: nowrap; }
.test-chips button { width: 28px; height: 28px; border: 0; border-radius: 14px; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; }
.test-chips button:hover, .test-chips button:focus-visible { background: var(--soft); color: var(--ink); }

/* ---------------------------------------------------------------- Create an agent, first screen (9 Oct 2026): describe first */
.arch-setup { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 18px; align-items: start; margin-top: 18px; }
.arch-sug { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: linear-gradient(135deg, var(--brand-soft), transparent 70%); }
.arch-sug-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.arch-sug-line { display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; line-height: 1.5; }
.arch-sug-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.arch-sug-chips .ant-tag { margin: 0; animation: use-pop .22s ease both; }
.arch-dots { display: inline-flex; gap: 3px; } .arch-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); animation: dg-pulse 1.2s ease-in-out infinite; }
.arch-dots i:nth-child(2) { animation-delay: .15s; } .arch-dots i:nth-child(3) { animation-delay: .3s; }
.arch-orb-wrap { display: grid; justify-items: center; gap: 10px; }
.arch-orb { position: relative; width: 92px; height: 92px; perspective: 420px; transform-style: preserve-3d; }
.arch-orb span { position: absolute; inset: 0; border-radius: 28px; border: 1px solid rgba(255,255,255,.4); transform-style: preserve-3d;
  background: linear-gradient(145deg, rgba(148,163,184,.55), rgba(100,116,139,.45)); box-shadow: inset 0 0 14px rgba(255,255,255,.3);
  transition: transform .5s cubic-bezier(.2,.9,.3,1.2), background .4s ease, opacity .4s ease; opacity: .55; }
.arch-orb span:nth-child(1) { transform: rotateX(58deg) rotateZ(-18deg) translateZ(-18px) scale(.9); }
.arch-orb span:nth-child(2) { transform: rotateX(58deg) rotateZ(14deg) translateZ(0) scale(.8); }
.arch-orb span:nth-child(3) { transform: rotateX(58deg) rotateZ(-6deg) translateZ(18px) scale(.7); }
.arch-orb.l1 span:nth-child(1) { background: linear-gradient(145deg, var(--color-accent-text), var(--color-accent)); opacity: .9; transform: rotateX(58deg) rotateZ(0) translateZ(-16px) scale(.9); }
.arch-orb.l2 span:nth-child(2) { background: linear-gradient(145deg, var(--color-accent-hover), var(--color-accent-2)); opacity: .9; transform: rotateX(58deg) rotateZ(0) translateZ(0) scale(.8); }
.arch-orb.l3 span:nth-child(3) { background: linear-gradient(145deg, #34d399, #059669); opacity: .95; transform: rotateX(58deg) rotateZ(0) translateZ(16px) scale(.7); }
.arch-orb.l1.l2.l3 { animation: arch-glow 2.4s ease-in-out infinite; }
@keyframes arch-glow { 0%, 100% { filter: drop-shadow(0 6px 10px rgba(79,70,229,.25)); } 50% { filter: drop-shadow(0 10px 18px rgba(79,70,229,.5)); } }
.arch-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.arch-checks li.ok { color: var(--ink); } .arch-checks li.ok .anticon { color: var(--green, #16a34a); }
@media (max-width: 760px) { .arch-setup { grid-template-columns: 1fr; } .arch-orb-wrap { grid-auto-flow: column; justify-content: start; align-items: center; } .arch-orb { width: 64px; height: 64px; } }
@media (prefers-reduced-motion: reduce) { .arch-orb span, .arch-sug-chips .ant-tag, .arch-dots i, .arch-orb { transition: none !important; animation: none !important; } }

/* Create an agent: how it works + what it will use, and the "Choose systems" panel (9 Oct 2026). */
.arch-ways { margin: 2px 0 10px; }
.arch-ways .ant-segmented-item-selected { box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 4px 14px -6px var(--brand); font-weight: 600; }
.arch-use { display: grid; gap: 8px; }
.arch-use-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.arch-use-head .muted.small { margin-left: 6px; }
.arch-count { margin: 0 2px 0 4px; border-radius: 10px; background: var(--color-accent); color: var(--color-on-accent); border: 0; font-weight: 600; }
.arch-use-list { display: flex; flex-wrap: wrap; gap: 8px; }
.arch-use-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 6px; border-radius: 10px; background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 6px 14px -10px rgba(40,40,90,.35); transform: perspective(600px) translateZ(0); animation: use-pop .24s ease both; animation-delay: calc(var(--i, 0) * 30ms);
  transition: transform .16s ease, box-shadow .16s ease; }
.arch-use-chip:hover { transform: perspective(600px) translateY(-2px) rotateX(4deg); box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 10px 18px -10px rgba(40,40,90,.45); }
.arch-use-name { font-size: 13px; font-weight: 500; }
.arch-use-x { color: var(--muted); cursor: pointer; font-size: 11px; padding: 2px; border-radius: 4px; }
.arch-use-x:hover, .arch-use-x:focus-visible { color: var(--ink); background: var(--soft); outline: none; }
.arch-use-sum { margin-top: -2px; }
.sp-ic { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; display: inline-grid; place-items: center; font-size: 13px; }
.sp-ic.look { background: color-mix(in srgb, #3b82f6 14%, var(--card)); color: #2563eb; }
.sp-ic.do { background: color-mix(in srgb, #d97706 16%, var(--card)); color: #b45309; }
.sp-drawer .ant-drawer-body { padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
/* The search and filters stay at the top while the list scrolls under them (9 Oct 2026). */
.sp-top { position: sticky; top: -14px; z-index: 2; margin: -14px -16px 0; padding: 14px 16px 6px; background: var(--card); border-bottom: 1px solid var(--line); }
.sp-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.sp-filters .ant-tag-checkable { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; margin: 0; }
.sp-filters .ant-tag-checkable-checked { border-color: var(--brand); }
.sp-row { display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; animation: use-pop .22s ease both; animation-delay: calc(var(--i, 0) * 18ms); }
.sp-row:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.sp-row.on { border-color: var(--brand); background: linear-gradient(135deg, var(--brand-soft), var(--card) 70%); transform: perspective(700px) translateY(-1px) rotateX(1deg); box-shadow: 0 10px 22px -16px var(--brand); }
.sp-row.locked { cursor: default; background: var(--soft); }
.sp-row.locked .sp-name b, .sp-row.locked .sp-desc { opacity: .75; }
.sp-row .ant-checkbox-wrapper { margin-top: 3px; }
.sp-main { display: grid; gap: 3px; min-width: 0; }
.sp-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sp-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; } .sp-tags .ant-tag { margin: 0; font-size: 11px; line-height: 18px; }
.sp-desc { font-size: 12.5px; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.sp-why { font-size: 12px; line-height: 1.4; color: var(--ink); }
.sp-why .anticon { color: var(--brand); }
.sp-act { align-self: center; white-space: nowrap; }
.sp-empty { padding: 24px 0; text-align: center; }
.sp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
@media (max-width: 600px) { .sp-row { grid-template-columns: auto 1fr; } .sp-row .sp-ic { display: none; } .sp-act { grid-column: 2; justify-self: start; } }
@media (prefers-reduced-motion: reduce) { .arch-use-chip, .sp-row { animation: none !important; transition: none !important; transform: none !important; } }

/* Teach your agent (builder step 2, 9 Oct 2026): training sections, examples and the strength meter. */
.teach { display: grid; gap: 14px; }
.teach-meter { position: sticky; top: 8px; z-index: 2; display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line);
  background: linear-gradient(135deg, var(--brand-soft), var(--card) 75%); box-shadow: 0 12px 24px -20px var(--brand); }
.teach-meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.teach-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.teach-chips .ant-tag { margin: 0; border-radius: 999px; transition: transform .18s ease, background .18s ease; }
.teach-chips .ant-tag.ok { background: var(--green-soft); color: var(--green); border-color: transparent; transform: perspective(500px) translateZ(6px); }
.teach-sec { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.teach-sec.done { border-color: color-mix(in srgb, var(--green) 35%, var(--line)); box-shadow: 0 10px 20px -18px var(--green); transform: perspective(800px) translateZ(2px); }
.teach-sec .field-label { margin: 0; display: flex; align-items: center; gap: 6px; }
.teach-ok { color: var(--green); animation: use-pop .22s ease both; } .teach-todo { color: var(--muted); }
.teach-help { margin-top: -2px; }
.teach-ex { display: grid; gap: 6px; padding: 10px; border-radius: 10px; background: var(--soft); border: 1px dashed var(--line); animation: use-pop .22s ease both; }
.teach-ex .ant-btn { justify-self: end; }
.teach-more .ant-collapse-header { padding-left: 0 !important; }
.teach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.teach-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.teach-offer { display: grid; gap: 10px; max-height: calc(60 * var(--ao-vh)); overflow: auto; }
.teach-pre { white-space: pre-wrap; background: var(--soft); border-radius: 8px; padding: 8px 10px; margin: 4px 0 0; font-size: 12.5px; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .teach-sec, .teach-chips .ant-tag, .teach-ok, .teach-ex { animation: none !important; transition: none !important; transform: none !important; } }
/* A grid column is as wide as its widest content unless told it may shrink. In the "Files it should follow" card the row
   of choices (a Segmented, which does not wrap) is about 510 px wide, the card about 290 px, so the textarea, the
   choices, the hint and the file rows all ran out past the card's right border on the agent edit page (Daryl, issue 6,
   Firefox, dark, 13 Oct 2026). Columns may now shrink to their card, and the choices wrap onto more lines. */
.teach, .teach-sec, .guide-list { grid-template-columns: minmax(0, 1fr); }
.teach-grid > *, .teach-sec > *, .guide-files, .guide-add > *, .guide-head, .guide-name { min-width: 0; }
.guide-add .ant-segmented { max-width: 100%; }
.guide-add .ant-segmented-group { flex-wrap: wrap; row-gap: 2px; }
.guide-name b { overflow-wrap: anywhere; }
.guide-text { max-width: 100%; overflow-x: auto; }

/* What it will be able to do (9 Oct 2026): plain-words abilities from the chosen Systems & Data. */
.ability-strip { display: grid; gap: 8px; margin: 2px 0 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(135deg, var(--soft), var(--card)); }
.ability-strip.compact { padding: 0; border: 0; background: none; margin: 0; }
.ability-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ability-title .ant-tag { margin: 0; }
.ability-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ability { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; border: 1px solid transparent; }
.ability.on { background: var(--green-soft); color: var(--green); box-shadow: 0 6px 14px -12px var(--green); transform: perspective(500px) translateZ(0); animation: use-pop .22s ease both; animation-delay: calc(var(--i, 0) * 40ms); transition: transform .16s ease; }
.ability.on:hover { transform: perspective(500px) translateY(-1px) rotateX(6deg); }
.ability.on.send, .ability.on.docs, .ability.on.records, .ability.on.teams { background: var(--amber-soft); color: var(--amber); box-shadow: 0 6px 14px -12px var(--amber); }
.ability.off { background: var(--soft); color: var(--muted); border-color: var(--line); }
@media (prefers-reduced-motion: reduce) { .ability.on { animation: none !important; transition: none !important; transform: none !important; } }

/* Automate my work (9 Oct 2026): one front door for every way to automate work. */
.automate { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.am-intro { position: relative; display: flex; align-items: center; gap: 22px; padding: 16px 20px; border-radius: 18px; border: 1px solid var(--line);
  background: radial-gradient(120% 140% at 0% 0%, var(--brand-soft), var(--card) 60%); overflow: hidden; }
.am-intro > .ant-btn { position: absolute; top: 8px; right: 8px; }
.am-stack { position: relative; width: 74px; height: 64px; flex: 0 0 74px; perspective: 500px; }
.am-stack span { position: absolute; inset: 8px 4px; border-radius: 12px; background: var(--gradient-brand); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--color-accent) 70%, transparent);
  transform: rotateX(52deg) rotateZ(-32deg) translateZ(calc(var(--z) * 1px)); opacity: calc(.5 + var(--o)); animation: am-float 5s ease-in-out infinite; animation-delay: calc(var(--z) * -60ms); }
.am-stack span:nth-child(1) { --z: 0; --o: 0; } .am-stack span:nth-child(2) { --z: 14; --o: .2; } .am-stack span:nth-child(3) { --z: 28; --o: .5; }
@keyframes am-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.am-steps { display: flex; flex-wrap: wrap; gap: 10px; }
.am-step { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 13px; animation: use-pop .3s ease both; animation-delay: calc(var(--i) * 70ms); }
.am-step b { width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--color-accent); color: var(--color-on-accent); font-size: 12px; }
.am-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .am-grid { grid-template-columns: 1fr; } }
.am-ask .ant-card-body { display: grid; gap: 18px; }
.am-q { display: grid; gap: 8px; }
.am-q-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.am-dot { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--soft); border: 1px solid var(--line); color: var(--muted); transition: background .2s ease, color .2s ease; }
.am-dot.ok { background: var(--green-soft); color: var(--green); border-color: transparent; }
.am-examples { display: flex; flex-wrap: wrap; gap: 6px; }
.am-example { cursor: pointer; white-space: normal; max-width: 100%; margin: 0; border-radius: 10px; padding: 3px 9px; }
.am-example:hover { border-color: var(--brand); color: var(--brand); }
.am-dept { display: flex; align-items: center; gap: 8px; }
.am-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.am-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; font-size: 13px; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease; }
.am-chip:hover { transform: perspective(600px) translateY(-2px) rotateX(5deg); box-shadow: 0 10px 18px -14px var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.am-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.am-chip.on { background: linear-gradient(135deg, var(--brand-soft), var(--card)); border-color: var(--brand); color: var(--brand); font-weight: 600; box-shadow: 0 10px 20px -16px var(--brand); }
.am-side { display: grid; gap: 12px; position: sticky; top: 12px; }
.am-rec { padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease; }
.am-rec.ready { border-color: var(--brand); box-shadow: 0 22px 44px -30px var(--brand), inset 0 1px 0 rgba(255,255,255,.4); transform: perspective(900px) translateZ(4px); background: linear-gradient(160deg, var(--brand-soft), var(--card) 55%); }
.am-rec-top { display: flex; gap: 12px; align-items: center; }
.am-rec-ic { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px; display: inline-grid; place-items: center; font-size: 22px; color: #fff;
  background: var(--gradient-brand); box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--color-accent) 70%, transparent); transform: perspective(400px) rotateX(10deg) rotateY(-12deg); }
.am-rec.ready .am-rec-ic { animation: am-pop .45s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes am-pop { from { transform: perspective(400px) rotateX(40deg) rotateY(-30deg) scale(.7); opacity: .3; } to { transform: perspective(400px) rotateX(10deg) rotateY(-12deg) scale(1); opacity: 1; } }
.am-facts { display: grid; gap: 6px; font-size: 13px; }
.am-facts > div { display: flex; gap: 8px; align-items: baseline; } .am-facts .anticon { color: var(--brand); }
.am-journey { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--line); background: var(--soft); }
.am-journey-step { display: flex; align-items: center; gap: 8px; font-size: 13px; animation: use-pop .3s ease both; animation-delay: calc(var(--i) * 60ms); }
.am-journey-step span { width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 6px; background: var(--card); border: 1px solid var(--line); font-size: 11px; }
.am-repeat-list { display: grid; gap: 8px; }
.am-repeat-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--soft); }
.am-repeat-text { min-width: 0; flex: 1 1 260px; overflow-wrap: anywhere; }
.am-ways { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.am-way { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer;
  animation: use-pop .25s ease both; animation-delay: calc(var(--i) * 35ms); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.am-way:hover, .am-way:focus-visible { transform: perspective(700px) translateY(-3px) rotateX(5deg); box-shadow: 0 16px 26px -20px var(--brand); border-color: var(--brand); outline: none; }
.am-way-ic { width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 16px; margin-bottom: 4px; }
.am-all .ant-collapse-header { padding-left: 0 !important; }
.am-gov { display: flex; gap: 8px; align-items: baseline; }
.am-gov .anticon { color: var(--green); }
.am-attn { animation: am-attn 1.4s ease-in-out 3; }
@keyframes am-attn { 0%, 100% { box-shadow: 0 0 0 0 rgba(79,70,229,0); } 50% { box-shadow: 0 0 0 6px rgba(79,70,229,.25); } }
.side-create-btn { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .am-stack span, .am-step, .am-journey-step, .am-way, .am-rec, .am-rec-ic, .am-chip, .am-attn { animation: none !important; transition: none !important; } .am-chip:hover, .am-way:hover, .am-rec.ready { transform: none !important; } }

/* SQL Account keys per department (9 Oct 2026). */
.sqlkeys { display: grid; gap: 4px; }
.sqlkeys-box { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--soft); }

/* The Assistant's sources: each document opens in Company knowledge (9 Oct 2026). */
.thr-docs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.thr-doc { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 12.5px; max-width: 100%; transition: border-color .15s ease, transform .15s ease; }
.thr-doc:hover, .thr-doc:focus-visible { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.thr-doc-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
@media (prefers-reduced-motion: reduce) { .thr-doc { transition: none; } .thr-doc:hover { transform: none; } }

/* ---------------------------------------------------------------- Home (redesigned 10 Oct 2026, workcenter.jsx) */
.home2 { display: grid; gap: 22px; max-width: 1280px; }
.h2-hero { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.h2-ask { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px 20px; box-shadow: var(--shadow);
  background-image: radial-gradient(900px 260px at 0% 0%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 60%); }
.h2-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.h2-title.ant-typography { margin: 4px 0 6px !important; font-size: clamp(24px, calc(2.4 * var(--ao-vw)), 32px) !important; letter-spacing: -0.01em; text-wrap: balance; }
.h2-sub.ant-typography { max-width: 66ch; margin-bottom: 14px !important; }
.start-box.bare { display: grid; gap: 8px; }
.h2-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.h2-path { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--soft); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.h2-path:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 12%, transparent); }
.h2-path:focus-visible, .h2-agent:focus-visible, .h2-row:focus-visible, .h2-need:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.h2-path b { display: block; } .h2-path small { color: var(--muted); }
.h2-path-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; color: #fff; background: var(--gradient-brand); }
.h2-needs { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); }
.h2-needs-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.h2-count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--amber); color: #fff; font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; }
[data-theme="dark"] .h2-count { color: #1b1300; }
.h2-needs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.h2-need { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 9px 10px; border-radius: 10px; border: 1px solid transparent;
  background: var(--amber-soft); color: var(--ink); font: inherit; cursor: pointer; }
.h2-need:hover { border-color: color-mix(in srgb, var(--amber) 45%, transparent); }
.h2-need-ic { color: var(--amber); } .h2-need-body { flex: 1; min-width: 0; display: grid; } .h2-need-body small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2-go { color: var(--muted); font-size: 12px; }
.h2-caught { display: flex; gap: 10px; align-items: flex-start; padding: 6px 2px; } .h2-caught .anticon { color: var(--green); font-size: 20px; margin-top: 2px; }
.h2-caught span { display: grid; }
.h2-sec { display: grid; gap: 12px; }
.h2-sec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.h2-sec-h h2 { margin: 0; font-size: 19px; } .h2-sec-h p { margin: 2px 0 0; max-width: 72ch; }
.h2-links { display: flex; flex-wrap: wrap; }
.h2-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.h2-agent { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--card);
  color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.h2-agent:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); box-shadow: 0 8px 22px rgba(15, 23, 42, .08); transform: translateY(-1px); }
.h2-agent.s-waiting { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); background: color-mix(in srgb, var(--amber-soft) 60%, var(--card)); }
.h2-agent-body { min-width: 0; display: grid; gap: 1px; }
.h2-agent-body b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2-agent-state { font-size: 12.5px; color: var(--muted); }
.h2-agent-state.s-working { color: var(--brand); } .h2-agent-state.s-waiting { color: var(--amber); font-weight: 600; }
.h2-agent-state.s-done { color: var(--green); } .h2-agent-state.s-failed { color: var(--red); }
.h2-agent-body small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The colleague: a small figure at a desk, drawn in CSS 3D. Colours carry the state, as do the words beside it. */
.mate { --st: var(--muted); position: relative; flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); perspective: 160px; }
.mate.s-working { --st: var(--brand); } .mate.s-waiting { --st: var(--amber); } .mate.s-done { --st: var(--green); } .mate.s-failed { --st: var(--red); } .mate.s-paused { opacity: .6; }
.mate-scene { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(14deg); }
.mate-desk { position: absolute; left: 7px; right: 7px; bottom: 9px; height: 9px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 18%, var(--card)); transform: rotateX(55deg); transform-origin: bottom; }
.mate-screen { position: absolute; left: 22px; bottom: 14px; width: 15px; height: 11px; border-radius: 2px; background: color-mix(in srgb, var(--st) 75%, #fff); box-shadow: 0 0 8px color-mix(in srgb, var(--st) 55%, transparent); transform: translateZ(4px) rotateY(-18deg); }
.mate-body { position: absolute; left: 10px; bottom: 12px; width: 13px; height: 12px; border-radius: 7px 7px 3px 3px; background: color-mix(in srgb, var(--st) 55%, var(--ink)); }
.mate-head { position: absolute; left: 11.5px; bottom: 24px; width: 10px; height: 10px; border-radius: 50%; background: #f1c9a5; box-shadow: inset 0 3px 0 #3b2f2a; }
.mate-badge { position: absolute; right: -4px; top: -4px; width: 14px; height: 14px; border-radius: 50%; display: none; border: 2px solid var(--card); }
.mate.s-waiting .mate-badge { display: block; background: var(--amber); }
.mate.s-done .mate-badge { display: block; background: var(--green); } .mate.s-failed .mate-badge { display: block; background: var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .mate.s-working .mate-screen { animation: mate-breathe 1.8s ease-in-out infinite; }
  .mate.s-working .mate-head { animation: mate-nod 2.4s ease-in-out infinite; }
  .mate.s-waiting .mate-badge { animation: mate-pop .5s ease-out 1; }
  .mate.s-done .mate-badge { animation: mate-pop .5s ease-out 1; }
}
@keyframes mate-breathe { 50% { box-shadow: 0 0 14px color-mix(in srgb, var(--st) 85%, transparent); filter: brightness(1.15); } }
@keyframes mate-nod { 50% { transform: translateY(1px); } }
@keyframes mate-pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
.h2-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.h2-step { display: flex; gap: 12px; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.h2-step p { margin: 4px 0 10px; }
.h2-step-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--gradient-brand); }
.h2-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.h2-panel { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 6px; align-content: start; }
.h2-panel-h { display: flex; align-items: center; justify-content: space-between; } .h2-panel-h h3 { margin: 0; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.h2-row { display: grid; gap: 1px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px; border: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.h2-row:hover { background: var(--soft); }
.h2-row b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.h2-row-ic { color: var(--muted); } .h2-row.working .h2-row-ic { color: var(--brand); } .h2-row.failed .h2-row-ic { color: var(--red); }
.h2-ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.h2-idea { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.h2-idea .ant-btn { grid-column: 2; justify-self: start; }
.h2-idea-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.h2-impact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 16px; border-radius: 14px; border: 1px dashed var(--line); font-size: 13.5px; }
.h2-loading { padding: 30px; text-align: center; }
@media (max-width: 1080px) { .h2-hero { grid-template-columns: 1fr; } .h2-needs { order: -1; } } /* on a phone, what needs you comes first, before the long box */
@media (max-width: 760px) { .h2-paths, .h2-two, .h2-steps { grid-template-columns: 1fr; } .h2-ask { padding: 16px; } }

/* ---------------------------------------------------------------- voice in chat (voice.jsx): a Jarvis panel
   Glass, a particle orb that breathes with the voice, gyroscope rings in 3D, colour by state (--vx is "r,g,b"). */
.vx-panel { --vx: 99,91,255; position: relative; max-width: 860px; margin: 0 auto 10px; display: flex; align-items: center; gap: 16px; padding: 14px 44px 14px 14px;
  border-radius: 20px; border: 1px solid rgba(var(--vx), .35); overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, color-mix(in srgb, var(--card) 88%, transparent), color-mix(in srgb, var(--card) 70%, transparent)), radial-gradient(120% 140% at 0% 50%, rgba(var(--vx), .16), transparent 60%);
  box-shadow: 0 0 0 1px rgba(var(--vx), .06) inset, 0 18px 40px -22px rgba(var(--vx), .65), 0 2px 10px rgba(16, 24, 40, .06);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); animation: vx-in .32s cubic-bezier(.2, .8, .2, 1) both; transition: border-color .4s, box-shadow .4s; }
.vx-panel::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(var(--vx), .07) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--vx), .07) 1px, transparent 1px); background-size: 18px 18px;
  mask-image: radial-gradient(80% 120% at 10% 50%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(80% 120% at 10% 50%, #000 20%, transparent 75%); }
.vx-panel::after { content: ''; position: absolute; left: -40%; top: 0; bottom: 0; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--vx), .12), transparent); animation: vx-sweep 3.6s ease-in-out infinite; }
.vx-orb { position: relative; flex: 0 0 auto; display: grid; place-items: center; perspective: 420px; }
.vx-orb canvas { position: relative; z-index: 2; display: block; }
.vx-core { position: absolute; inset: 30%; border-radius: 50%; z-index: 1; background: radial-gradient(circle, rgba(var(--vx), .55), rgba(var(--vx), 0) 70%); filter: blur(6px); animation: vx-breathe 2.8s ease-in-out infinite; }
.vx-ring { position: absolute; inset: 4%; border-radius: 50%; z-index: 3; pointer-events: none; border: 1.5px solid rgba(var(--vx), .55); border-left-color: transparent; border-right-color: rgba(var(--vx), .15);
  transform-style: preserve-3d; box-shadow: 0 0 12px rgba(var(--vx), .35); }
.vx-ring.r1 { animation: vx-gyro1 7s linear infinite; }
.vx-ring.r2 { inset: 12%; border-top-color: transparent; animation: vx-gyro2 5s linear infinite; opacity: .8; }
.vx-processing .vx-ring.r1, .vx-executing .vx-ring.r1, .vx-transcribing .vx-ring.r1 { animation-duration: 2.2s; }
.vx-processing .vx-ring.r2, .vx-executing .vx-ring.r2, .vx-transcribing .vx-ring.r2 { animation-duration: 1.6s; }
.vx-paused .vx-ring, .vx-done .vx-ring { animation-play-state: paused; }
.vx-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.vx-state { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .02em; color: rgb(var(--vx)); }
.vx-state b { font-weight: 650; }
.vx-time { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px; }
.vx-dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--vx)); box-shadow: 0 0 0 4px rgba(var(--vx), .18); }
.vx-rec { width: 10px; height: 10px; border-radius: 50%; background: #e5341f; box-shadow: 0 0 0 0 rgba(229, 52, 31, .6); animation: vx-rec 1.4s ease-out infinite; }
.vx-paused .vx-rec { animation: none; background: #b0b4c3; box-shadow: none; }
.vx-caption { font-size: 15.5px; line-height: 1.45; color: var(--ink); min-height: 22px; max-height: 92px; overflow-y: auto; overflow-wrap: anywhere; }
.vx-caption.muted { color: var(--muted); font-size: 14px; }
.vx-fixed { text-decoration: underline dotted; text-decoration-color: rgb(var(--vx, 99,91,255)); text-underline-offset: 3px; cursor: help; }
.vx-note { margin: 2px 0; }
.vx-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.vx-lang { margin-left: auto; }
.vx-close { position: absolute; top: 8px; right: 8px; }
.vx-consent { margin: 4px 0 10px; padding-left: 18px; display: grid; gap: 6px; }
.composer-box .vx-mic, .cmp-bar .vx-mic { color: var(--muted); transition: color .2s, background .2s, box-shadow .3s; }
.composer-box .vx-mic:not(:disabled):hover, .cmp-bar .vx-mic:not(:disabled):hover { color: var(--brand); background: var(--brand-soft); }
.composer-box .vx-mic.on, .composer-box .vx-mic.on:not(:disabled):hover, .cmp-bar .vx-mic.on, .cmp-bar .vx-mic.on:not(:disabled):hover { color: #fff !important; background: #e5341f !important; box-shadow: 0 0 0 0 rgba(229, 52, 31, .55); animation: vx-rec 1.4s ease-out infinite; }
[data-theme="dark"] .vx-panel { box-shadow: 0 0 0 1px rgba(var(--vx), .1) inset, 0 18px 50px -20px rgba(var(--vx), .55); }
@keyframes vx-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes vx-sweep { 0% { left: -40%; } 60%, 100% { left: 110%; } }
@keyframes vx-breathe { 0%, 100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes vx-gyro1 { from { transform: rotateX(68deg) rotateZ(0deg); } to { transform: rotateX(68deg) rotateZ(360deg); } }
@keyframes vx-gyro2 { from { transform: rotateY(64deg) rotateZ(360deg); } to { transform: rotateY(64deg) rotateZ(0deg); } }
@keyframes vx-rec { 0% { box-shadow: 0 0 0 0 rgba(229, 52, 31, .55); } 100% { box-shadow: 0 0 0 10px rgba(229, 52, 31, 0); } }
/* Phone: the orb and the state share the top row; words and buttons take the full width below. */
@media (max-width: 640px) {
  .vx-panel { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 10px; padding: 10px 12px 12px; border-radius: 16px; }
  .vx-main { display: contents; }
  .vx-state { padding-right: 34px; flex-wrap: wrap; row-gap: 2px; }
  .vx-caption, .vx-note, .vx-controls { grid-column: 1 / -1; }
  .vx-caption { font-size: 15px; max-height: 120px; }
  .vx-controls .ant-btn { min-height: 40px; }
  .vx-lang { margin-left: 0; width: 100%; order: -1; }
  .vx-lang .ant-segmented-group { display: flex; } .vx-lang .ant-segmented-item { flex: 1; text-align: center; white-space: nowrap; }
  .vx-lang .ant-segmented-item-label { padding: 0 4px; }
}
@media (prefers-reduced-motion: reduce) { .vx-panel, .vx-panel::after, .vx-ring, .vx-core, .vx-rec, .composer-box .vx-mic.on { animation: none !important; } }
/* A narrow box (the floating Assistant): the phone layout at any screen width. */
.vx-panel.vx-compact { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 10px; padding: 10px 12px 12px; border-radius: 16px; margin: 0 0 8px; }
.vx-compact .vx-main { display: contents; }
.vx-compact .vx-state { padding-right: 34px; flex-wrap: wrap; row-gap: 2px; }
.vx-compact .vx-caption, .vx-compact .vx-note, .vx-compact .vx-controls { grid-column: 1 / -1; }
.vx-compact .vx-lang { margin-left: 0; width: 100%; order: -1; }
.vx-compact .vx-lang .ant-segmented-group { display: flex; } .vx-compact .vx-lang .ant-segmented-item { flex: 1; text-align: center; white-space: nowrap; }
.vx-compact .vx-lang .ant-segmented-item-label { padding: 0 4px; }
.cmp .vx-panel:not(.vx-compact) { margin: 0 0 10px; max-width: none; }
/* ---------------------------------------------------------------- Aria, the assistant (mascot.jsx) */
.aria { display: block; overflow: visible; }
.aria .aria-body { animation: aria-float 4.2s ease-in-out infinite; transform-origin: 80px 180px; }
.aria .aria-shadow { animation: aria-shadow 4.2s ease-in-out infinite; transform-origin: 80px 178px; }
.aria .aria-eyes { animation: aria-blink 5.2s infinite; transform-origin: 80px 80px; }
.aria .aria-arm { transform-origin: 116px 150px; animation: aria-wave 2.6s ease-in-out infinite; }
.aria .aria-mouth { opacity: 0; }
.aria-talk .aria-mouth { animation: aria-talk 0.5s ease-in-out infinite alternate; transform-origin: 80px 98px; }
.aria-talk .aria-smile { animation: aria-smile 0.5s ease-in-out infinite alternate; }
.aria-alert .aria-brows { transform: translateY(-2px); }
.aria-alert .aria-arm { animation-duration: 1.4s; }
.aria-idle .aria-arm { animation: none; transform: rotate(-18deg); }
@keyframes aria-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes aria-shadow { 0%, 100% { transform: scaleX(1); opacity: .18; } 50% { transform: scaleX(.86); opacity: .12; } }
@keyframes aria-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes aria-wave { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(14deg); } 50% { transform: rotate(-6deg); } 75% { transform: rotate(10deg); } }
@keyframes aria-talk { from { opacity: 0; transform: scaleY(.4); } to { opacity: 1; transform: scaleY(1); } }
@keyframes aria-smile { from { opacity: 1; } to { opacity: 0; } }
.aria-says { display: flex; align-items: flex-end; gap: 6px; }
.aria-says[role="button"] { cursor: pointer; }
.aria-bubble { position: relative; max-width: 240px; padding: 10px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; color: var(--ink);
  background: color-mix(in srgb, var(--card) 86%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
  box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--brand) 70%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  margin-bottom: 40px; animation: aria-pop .35s cubic-bezier(.2, .8, .2, 1) both; }
.aria-bubble::before { content: ''; position: absolute; left: -7px; bottom: 16px; width: 12px; height: 12px; background: inherit; border-left: inherit; border-bottom: inherit; transform: rotate(45deg); }
.tone-warning .aria-bubble { border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }
.tone-error .aria-bubble { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); }
@keyframes aria-pop { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .aria *, .aria-bubble { animation: none !important; } }
/* Aria as a small avatar (head and shoulders): still, only blinking. The view box starts at 36,24, so origins shift. */
.aria-face .aria-body, .aria-face .aria-shadow { animation: none; }
.aria-face .aria-arm { display: none; }
.ao-av.aria .aria-eyes { transform-origin: 80px 80px; }
.ao-av.aria-face .aria-eyes { transform-origin: 44px 56px; }
.ao-av.aria .aria-body { transform-origin: 80px 180px; }
.ao-av.aria .aria-arm { transform-origin: 116px 150px; }
/* ---------------------------------------------------------------- Claude usage (claudeusage.jsx) */
.cu { --cu-glass: color-mix(in srgb, var(--card) 88%, transparent); display: flex; flex-direction: column; gap: 16px; }
.cu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.cu-title { display: flex; align-items: center; gap: 14px; }
.cu-title h1 { margin: 0; font-size: 26px; letter-spacing: -.01em; }
.cu-logo { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-size: 22px;
  background: var(--gradient-brand); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--color-accent) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); }
.cu-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cu-card { background: var(--cu-glass); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; box-shadow: var(--bk-depth-hi, var(--shadow)); position: relative; min-width: 0; }
.cu-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--bk-sheen); pointer-events: none; }
.cu-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 650; margin-bottom: 12px; flex-wrap: wrap; }
.cu-top { display: grid; grid-template-columns: 1fr 1fr minmax(280px, .9fr); gap: 16px; align-items: stretch; }
.cu-grid2 { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1280px) { .cu-top { grid-template-columns: 1fr 1fr; } .cu-side { grid-column: 1 / -1; } }
@media (max-width: 900px) { .cu-top, .cu-grid2 { grid-template-columns: 1fr; } }

/* account cards: a 3D identity, tilting a little under the pointer */
.cu-acc { --hue: #6d5dfc; --hue2: #8b5cf6; position: relative; border-radius: 20px; padding: 16px 18px; cursor: pointer; transform-style: preserve-3d;
  background: linear-gradient(150deg, color-mix(in srgb, var(--hue) 13%, var(--card)), var(--card) 55%);
  border: 1px solid color-mix(in srgb, var(--hue) 30%, var(--line)); box-shadow: 0 18px 40px -26px var(--hue), var(--bk-depth-hi, var(--shadow));
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .3s; animation: cu-in .5s cubic-bezier(.2, .8, .2, 1) both; }
.cu-acc.hue-teal { --hue: #0ea5a4; --hue2: #38bdf8; animation-delay: .08s; }
.cu-acc:hover { transform: perspective(900px) rotateX(2.5deg) rotateY(-3deg) translateY(-3px); box-shadow: 0 26px 50px -24px var(--hue), var(--bk-depth-hi, var(--shadow)); }
.cu-acc.on { border-color: var(--hue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hue) 22%, transparent), 0 26px 50px -24px var(--hue); }
.cu-acc:focus-visible { outline: 2px solid var(--hue); outline-offset: 3px; }
.cu-acc-head { display: flex; align-items: center; gap: 12px; }
.cu-acc-id { flex: 1; min-width: 0; }
.cu-acc-name { font-weight: 700; font-size: 16px; }
.cu-cube { position: relative; width: 52px; height: 52px; flex: 0 0 auto; transform-style: preserve-3d; transform: rotateX(-18deg) rotateY(32deg); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.cu-acc:hover .cu-cube { animation: cu-spin 3.2s ease-in-out infinite; } /* turns only under the pointer: nothing 3D runs while the page is idle */
.cu-cube i { position: absolute; inset: 0; border-radius: 12px; }
.cu-cube .f { background: linear-gradient(135deg, var(--hue), var(--hue2)); transform: translateZ(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.cu-cube .t { background: color-mix(in srgb, var(--hue2) 70%, #fff); transform: rotateX(90deg) translateZ(14px); opacity: .9; }
.cu-cube .s { background: color-mix(in srgb, var(--hue) 70%, #000); transform: rotateY(90deg) translateZ(14px); opacity: .85; }
.cu-cube b { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 15px; letter-spacing: .04em; transform: translateZ(15px); text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.cu-state { margin: 0; white-space: nowrap; }
.cu-pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: currentColor; vertical-align: 1px; }
.cu-pulse.success { animation: cu-pulse 2s ease-out infinite; }
.cu-rings { display: grid; grid-template-columns: auto auto 1fr; gap: 14px; align-items: center; margin: 14px 0 10px; }
.cu-ring { position: relative; width: 112px; text-align: center; }
.cu-ring svg { width: 112px; height: 112px; transform: rotate(-90deg); }
.cu-ring-track { fill: none; stroke: var(--line); stroke-width: 9; }
.cu-ring-bar { fill: none; stroke: var(--c); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.2, .8, .2, 1); animation: cu-ring 1.1s cubic-bezier(.2, .8, .2, 1) both; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--c) 50%, transparent)); }
.cu-ring.tone-warn .cu-ring-bar { stroke: #f59e0b; } .cu-ring.tone-bad .cu-ring-bar { stroke: #e5341f; }
.cu-ring-mid { position: absolute; top: 0; left: 0; width: 112px; height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cu-ring-mid b { font-size: 21px; font-variant-numeric: tabular-nums; } .cu-ring-mid span { font-size: 11.5px; color: var(--muted); }
.cu-ring-sub { font-size: 11px; color: var(--muted); min-height: 30px; line-height: 1.3; margin-top: 2px; }
.cu-ring.tone-none .cu-ring-sub { color: var(--amber); }
.cu-acc-nums { display: grid; gap: 10px; }
.cu-acc-nums > div { display: flex; flex-direction: column; } .cu-acc-nums b { font-size: 20px; font-variant-numeric: tabular-nums; }
.cu-acc-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.cu-acc-foot span { display: inline-flex; align-items: center; gap: 4px; }
.cu-src { margin: 0 2px 0 0; font-size: 11px; line-height: 18px; padding: 0 6px; }
.cu-acc-rest { margin-top: 8px; font-size: 12.5px; color: var(--amber); }
@media (max-width: 560px) { .cu-rings { grid-template-columns: auto auto; } .cu-acc-nums { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } .cu-ring, .cu-ring svg, .cu-ring-mid { width: 96px; } .cu-ring svg, .cu-ring-mid { height: 96px; } }

.cu-side { display: flex; flex-direction: column; gap: 8px; }
.cu-side .aria-bubble { margin-bottom: 30px; max-width: none; }
.cu-side-h { font-weight: 650; }
.cu-att { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cu-att li { display: flex; gap: 10px; padding: 9px 11px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); animation: cu-in .4s both; line-height: 1.4; }
.cu-att li.lv-error { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 30%, var(--line)); }
.cu-att li.lv-warning { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 30%, var(--line)); }
.cu-att li > .anticon { margin-top: 3px; font-size: 15px; }
.cu-i-err { color: var(--red); } .cu-i-warn { color: var(--amber); } .cu-i-info { color: var(--blue); }
.cu-att-do { color: var(--muted); margin-top: 2px; }
.cu-att-ok { display: flex; gap: 8px; align-items: center; color: var(--green); padding: 10px 12px; border-radius: 12px; background: var(--green-soft); }

.cu-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.cu-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.cu-legend i.dash { background: none !important; border-top: 2px dashed; height: 0; width: 14px; border-radius: 0; vertical-align: 3px; }
.cu-bars { display: grid; gap: 8px; }
.cu-bar-row { display: grid; grid-template-columns: minmax(130px, 200px) 1fr 70px; gap: 10px; align-items: center; }
.cu-bar-name { font-size: 12.5px; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; } .cu-bar-name b { display: block; font-weight: 600; }
.cu-bar { display: flex; height: 16px; border-radius: 6px; overflow: hidden; min-width: 4px; transform-origin: left; animation: cu-grow .9s cubic-bezier(.2, .8, .2, 1) both; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.cu-bar i { display: block; height: 100%; min-width: 2px; }
.cu-bar-num { text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.cu-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 5px 0 0; background: #9aa0b5; }
.cu-dot.hue-violet { background: #6d5dfc; } .cu-dot.hue-teal { background: #0ea5a4; }
@media (max-width: 560px) { .cu-bar-row { grid-template-columns: 1fr 60px; } .cu-bar-name { grid-column: 1 / -1; } }
.cu-donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cu-donut svg { width: 150px; height: 150px; flex: 0 0 auto; }
.cu-donut-seg { animation: cu-donut 1s cubic-bezier(.2, .8, .2, 1) both; }
.cu-donut-n { font-size: 13px; font-weight: 700; fill: var(--ink); } .cu-donut-l { font-size: 7px; fill: var(--muted); }
.cu-donut ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; flex: 1; min-width: 160px; font-size: 13px; }
.cu-donut li { display: flex; align-items: center; gap: 6px; } .cu-donut li i { width: 10px; height: 10px; border-radius: 50%; } .cu-donut li b { margin-left: auto; font-variant-numeric: tabular-nums; }
.cu-io { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.cu-io > div { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 12px; background: var(--soft); } .cu-io b { font-size: 17px; font-variant-numeric: tabular-nums; }
.cu-scroll { overflow-x: auto; }
.cu-trend svg, .cu-scroll svg { width: 100%; min-width: 420px; height: auto; display: block; }
.cu-grid { stroke: var(--line); stroke-width: 1; } .cu-axis { font-size: 9px; fill: var(--muted); }
.cu-line { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: cu-draw 1.4s cubic-bezier(.2, .8, .2, 1) both; }
.cu-facts { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; font-size: 13px; }
.cu-facts li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--line); padding-bottom: 5px; }
.cu-facts li span { color: var(--muted); } .cu-facts li b { text-align: right; font-weight: 550; overflow-wrap: anywhere; }
.cu-ai { margin: 0 0 14px; }
.cu-ai__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 8px; }
.cu-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.cu-effort { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: -4px 0 12px; }
.cu-mcp { margin: 0 0 12px; }
.cu-mcp__h { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 0 0 6px; }
.cu-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 100%; padding: 6px 12px; border-radius: 16px; border: 1px solid var(--color-border-subtle, var(--line)); background: var(--color-surface, transparent); color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.cu-chip__top { display: inline-flex; align-items: baseline; gap: 8px; max-width: 100%; }
.cu-chip b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-chip__n { font-variant-numeric: tabular-nums; }
.cu-chip__s { color: var(--muted); font-size: 12px; }
.cu-chip:hover { border-color: var(--color-accent, var(--ink)); }
.cu-chip:focus-visible { outline: 2px solid var(--color-focus, currentColor); outline-offset: 2px; }
.cu-chip.is-on { border-color: var(--color-accent, var(--ink)); background: color-mix(in srgb, var(--color-accent, var(--ink)) 14%, transparent); }
.cu-chip--people { align-self: stretch; justify-content: center; }
.cu-six { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.cu-six__cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 10px; border: 1px solid var(--color-border-subtle, var(--line)); border-radius: 12px; }
.cu-six__t { font-size: 12px; color: var(--muted); }
.cu-six__v { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.cu-six__g { font-size: 11px; color: var(--muted); opacity: 0.7; font-style: italic; }
@media (max-width: 900px) { .cu-six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cu-people { margin: 0 0 12px; }
.cu-people__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 8px; }
.cu-people__scroll { max-height: 420px; overflow: auto; border: 1px solid var(--color-border-subtle, var(--line)); border-radius: 12px; }
.cu-people__t { width: 100%; border-collapse: collapse; font-size: 13px; }
.cu-people__t th, .cu-people__t td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--color-border-subtle, var(--line)); vertical-align: top; }
.cu-people__t th { position: sticky; top: 0; background: var(--color-surface, var(--bg, #fff)); font-weight: 600; }
.cu-people__t .r { text-align: right; }
.cu-people__np td { color: var(--muted); font-style: italic; }
@media (prefers-reduced-motion: reduce) { .cu-chip { transition: none; } }
.cu-filters { display: grid; grid-template-columns: minmax(200px, 1.4fr) repeat(4, minmax(130px, 1fr)); gap: 8px; margin-bottom: 12px; }
@media (max-width: 900px) { .cu-filters { grid-template-columns: 1fr 1fr; } .cu-filters > :first-child { grid-column: 1 / -1; } }
.cu-agent b { display: block; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.cu-acc-tag { margin: 0; } .cu-acc-tag.hue-violet { color: #5b4ee0; background: color-mix(in srgb, #6d5dfc 12%, transparent); border-color: color-mix(in srgb, #6d5dfc 35%, transparent); }
.cu-acc-tag.hue-teal { color: #0b8584; background: color-mix(in srgb, #0ea5a4 12%, transparent); border-color: color-mix(in srgb, #0ea5a4 35%, transparent); }
[data-theme="dark"] .cu-acc-tag.hue-violet { color: #b4abff; } [data-theme="dark"] .cu-acc-tag.hue-teal { color: #5eead4; }
.cu-sw { color: var(--amber); margin-top: 3px; } .cu-bad { color: var(--red); } .cu-warn { color: var(--amber); }
.cu-status { margin: 0; white-space: nowrap; }
.cu-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 4px 8px; }
@media (max-width: 760px) { .cu-detail { grid-template-columns: 1fr; } }
.cu-hist { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 5px; font-size: 13px; }
.cu-hist li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cu-hist li b { margin-left: auto; }
.cu-route { display: grid; gap: 12px; }
.cu-route-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cu-confirm p { margin: 0 0 8px; }
.cu-notes p { margin: 0 0 4px; }
@keyframes cu-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cu-ring { from { stroke-dashoffset: 264; } }
@keyframes cu-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cu-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cu-donut { from { opacity: 0; } to { opacity: 1; } }
@keyframes cu-spin { 0%, 100% { transform: rotateX(-18deg) rotateY(32deg); } 50% { transform: rotateX(-12deg) rotateY(-28deg); } }
@keyframes cu-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .cu *, .cu-acc { animation: none !important; transition: none !important; } .cu-acc:hover { transform: none; } }
.cu-ring.stale svg, .cu-ring.stale .cu-ring-mid b { opacity: .55; } /* a plan figure last reported over 6 hours ago */
.cu-ops { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.cu-op { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--green); min-width: 0; animation: cu-in .4s both; }
.cu-op span { font-size: 12px; color: var(--muted); } .cu-op b { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.cu-op.tone-warn { border-left-color: var(--amber); } .cu-op.tone-bad { border-left-color: var(--red); background: var(--red-soft); }
@media (max-width: 1280px) { .cu-ops { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cu-ops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cu-donut-wrap { display: grid; gap: 12px; justify-items: start; }

/* ---------------------------------------------------------------- theme picker (themepicker.jsx) */
.tp { width: 320px; max-width: calc(calc(100 * var(--ao-vw)) - 32px); display: grid; gap: 10px; }
.tp-h { display: flex; justify-content: space-between; align-items: baseline; font-weight: 650; }
.tp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tp-item { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--color-surface-nested);
  cursor: pointer; color: var(--ink); font: inherit; text-align: left; transition: transform .2s, border-color .2s, box-shadow .2s; }
.tp-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); }
.tp-item:focus-visible, .tp-system:focus-visible, .tp-reset:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tp-item.on { border-color: var(--color-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 35%, transparent); }
.tp-prev { position: relative; display: block; height: 52px; border-radius: 8px; overflow: hidden; }
.tp-prev i { position: absolute; display: block; }
.tp-side { left: 0; top: 0; bottom: 0; width: 22%; opacity: .9; }
.tp-card { left: 30%; top: 18%; right: 10%; height: 52%; border-radius: 6px; border: 1px solid; display: flex; gap: 4px; align-items: flex-end; padding: 4px; }
.tp-card b { display: block; width: 10px; border-radius: 2px; }
.tp-card b:first-child { height: 60%; } .tp-card b:last-child { height: 85%; }
.tp-dot { right: 6px; bottom: 6px; width: 12px; height: 12px; border-radius: 50%; }
.tp-name { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.tp-name .anticon { color: var(--color-accent-text); }
.tp-system, .tp-reset { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: transparent;
  color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.tp-system.on { border-color: var(--color-accent); background: var(--brand-soft); }
.tp-reset { border-style: dashed; color: var(--muted); justify-content: center; }
@media (prefers-reduced-motion: reduce) { .tp-item { transition: none; } .tp-item:hover { transform: none; } }

/* ---------------------------------------------------------------- Claude usage, template layout (claudeusage.jsx "cut") */
.cut .cu-card { background: linear-gradient(160deg, color-mix(in srgb, var(--color-surface-raised) 92%, transparent), var(--color-surface)); border-color: var(--color-border-subtle); box-shadow: var(--shadow-card), var(--glow); }
.cut-updated { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.cut-updated > span { display: flex; flex-direction: column; line-height: 1.25; } .cut-updated b { color: var(--ink); font-size: 12.5px; font-weight: 600; }
.cut-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(260px, .78fr); gap: 16px; align-items: stretch; }
.cu-err { color: var(--bad, #d4380d); }
.cu-share { width: 100%; border-collapse: collapse; margin: 8px 0; }
.cu-share th, .cu-share td { text-align: left; padding: 2px 6px; font-weight: normal; }
.cu-share th { color: var(--muted, #8a8f9c); }
@media (max-width: 1500px) { .cut-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cut-insights { grid-column: 1 / -1; } }
.cut-mid { display: grid; grid-template-columns: 1.2fr .95fr 1.05fr .95fr; gap: 16px; align-items: stretch; }
@media (max-width: 1400px) { .cut-mid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1180px) { .cut-top { grid-template-columns: 1fr 1fr; } .cut-insights { grid-column: 1 / -1; } }
@media (max-width: 760px) { .cut-top, .cut-mid { grid-template-columns: 1fr; } }

.cut-acc { position: relative; border-radius: 20px; padding: 18px; cursor: pointer; display: flex; flex-direction: column; gap: 14px; min-width: 0;
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--hue) 22%, transparent), transparent 55%), linear-gradient(160deg, var(--color-surface-raised), var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--hue) 35%, var(--color-border-subtle)); box-shadow: 0 22px 46px -30px var(--hue), var(--shadow-card);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .3s; animation: cu-in .5s cubic-bezier(.2, .8, .2, 1) both; }
.cut-acc.hue-blue { animation-delay: .08s; }
.cut-acc:hover { transform: perspective(1000px) rotateX(2deg) rotateY(-2.5deg) translateY(-3px); box-shadow: 0 30px 56px -28px var(--hue), var(--shadow-raised); }
.cut-acc.on { border-color: var(--hue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--hue) 35%, transparent), 0 30px 56px -28px var(--hue); }
.cut-acc:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.cut-acc-head { display: flex; align-items: flex-start; gap: 14px; }
.cut-acc-id { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cut-acc-name { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cut-acc-sub { color: var(--color-accent-text); font-size: 13px; }
.cut-role { margin: 0; border-radius: 999px; font-size: 11.5px; padding: 0 9px; line-height: 20px; }
.cut-role.primary { color: #34e3c2; background: rgba(32, 223, 192, .12); border-color: rgba(32, 223, 192, .4); }
.cut-role.secondary { color: #c4a6ff; background: rgba(155, 92, 255, .14); border-color: rgba(155, 92, 255, .45); }
[data-theme="light"] .cut-role.primary { color: #0b7a66; } [data-theme="light"] .cut-role.secondary { color: #6d33d6; }
.cu-cube-img { flex: 0 0 auto; filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--hue, #9b5cff) 55%, transparent)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.cut-acc:hover .cu-cube-img { transform: rotate(-6deg) scale(1.06); }
.cut-meters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle); }
.cut-meter { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cut-meter .cu-ring, .cut-meter .cu-ring svg, .cut-meter .cu-ring-mid { width: 76px; } .cut-meter .cu-ring svg, .cut-meter .cu-ring-mid { height: 76px; }
.cut-meter .cu-ring-mid b { font-size: 16px; } .cut-meter .cu-ring-sub { display: none; }
.cut-meter-txt { flex: 1; min-width: 0; display: grid; gap: 4px; } .cut-meter-txt b { font-size: 14px; }
.cut-bar { height: 7px; border-radius: 99px; background: var(--color-border-subtle); overflow: hidden; }
.cut-bar i { display: block; height: 100%; border-radius: inherit; transition: width 1s cubic-bezier(.2, .8, .2, 1); animation: cu-grow 1s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left; box-shadow: 0 0 10px currentColor; }
.cut-resets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cut-resets > div { display: flex; gap: 10px; align-items: center; } .cut-resets .anticon { font-size: 18px; color: var(--muted); }
.cut-resets > div > span { display: flex; flex-direction: column; line-height: 1.3; } .cut-resets b { font-size: 13px; font-weight: 600; }
.cut-acc-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; } .cut-acc-foot span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 560px) { .cut-meters, .cut-resets { grid-template-columns: 1fr; } }

.cut-insights { display: flex; flex-direction: column; gap: 10px; }
.cut-ins-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--color-surface-nested); border: 1px solid var(--color-border-subtle);
  width: 100%; text-align: left; font: inherit; color: inherit; animation: cu-in .45s both; }
.cut-ins-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cut-ins-row > div b { font-size: 18px; font-variant-numeric: tabular-nums; }
.cut-ins-alert { cursor: pointer; background: var(--color-error-soft); border-color: color-mix(in srgb, var(--color-error) 35%, transparent); }
.cut-ins-alert:hover { filter: brightness(1.08); } .cut-ins-alert:focus-visible { outline: 2px solid var(--color-focus); }
.cut-ins-ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; color: #fff; }
.cut-ins-ic.tone-a { background: linear-gradient(135deg, #20dfc0, #0ea5a4); } .cut-ins-ic.tone-b { background: linear-gradient(135deg, #2693ff, #4f46e5); }
.cut-ins-ic.tone-bad { background: linear-gradient(135deg, #ff6b86, #e5341f); } .cut-ins-ic.tone-ok { background: linear-gradient(135deg, #34d399, #10b981); }
.cut-delta { margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--color-surface-hover); white-space: nowrap; }
.cut-delta.up { color: var(--color-success); background: var(--color-success-soft); } .cut-delta.down { color: var(--color-info); background: var(--color-info-soft); }
.cut-ok { color: var(--color-success); }

.cut-cols-plot { display: grid; grid-template-columns: auto 1fr; gap: 8px; height: 220px; }
.cut-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 10.5px; color: var(--muted); text-align: right; padding-bottom: 38px; }
.cut-cols-area { display: flex; align-items: stretch; justify-content: space-around; gap: 10px; border-bottom: 1px solid var(--color-border); background-image: linear-gradient(var(--color-border-subtle) 1px, transparent 1px); background-size: 100% 25%; padding-bottom: 40px; position: relative; }
.cut-col { flex: 1; max-width: 70px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; outline: none; }
.cut-col-bar { width: 100%; max-width: 46px; display: flex; flex-direction: column; border-radius: 8px 8px 3px 3px; overflow: hidden; min-height: 3px; transform-origin: bottom;
  animation: cut-rise .9s cubic-bezier(.2, .8, .2, 1) both; box-shadow: 0 0 18px -4px color-mix(in srgb, #9b5cff 60%, transparent); transition: filter .2s; }
.cut-col:hover .cut-col-bar, .cut-col:focus-visible .cut-col-bar { filter: brightness(1.18); }
.cut-col-bar i { display: block; width: 100%; min-height: 2px; }
.cut-col-name { position: absolute; top: calc(100% + 6px); font-size: 11px; text-align: center; line-height: 1.2; width: calc(100% + 8px); color: var(--ink); }
.cut-col-num { position: absolute; bottom: -48px; font-size: 10.5px; color: var(--muted); display: none; }
@keyframes cut-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.cut-trend-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cut-details { display: flex; flex-direction: column; gap: 10px; }
.cut-det-id { display: flex; align-items: center; gap: 12px; } .cut-det-id > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.cut-det-h { font-weight: 650; font-size: 13px; display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.cut-limit { display: grid; gap: 4px; font-size: 12.5px; } .cut-limit > div:first-child { display: flex; justify-content: space-between; }
.cut-models { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.cut-models li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--color-surface-nested); border: 1px solid var(--color-border-subtle); font-size: 13px; }
.cut-models li .cut-ok { margin-left: auto; }
.cut-agents-row { display: flex; align-items: center; gap: 10px; }
.cut-avs { display: flex; } .cut-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #10131f; font-size: 12px; font-weight: 700; border: 2px solid var(--color-surface); margin-left: -8px; }
.cut-avs .cut-av:first-child { margin-left: 0; }
.cut .cu-agent { display: flex; align-items: center; gap: 10px; } .cut .cu-agent > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.cut-ag-ic { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 15px;
  background: linear-gradient(135deg, var(--h), color-mix(in srgb, var(--h) 55%, #312e81)); box-shadow: 0 6px 14px -8px var(--h); }
.cut-act { display: inline-flex; gap: 2px; }
.cut .cu-status { border-radius: 999px; padding: 0 10px; }
.cut-more { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; border-radius: 14px; border: 1px dashed var(--color-border); background: transparent; color: var(--muted); font: inherit; cursor: pointer; text-align: left; }
.cut-more:hover { color: var(--ink); border-color: var(--color-accent); } .cut-more:focus-visible { outline: 2px solid var(--color-focus); }
@media (prefers-reduced-motion: reduce) { .cut-acc, .cut-col-bar, .cut-bar i, .cut-ins-row { animation: none !important; transition: none !important; } .cut-acc:hover { transform: none; } }

/* ---------------------------------------------------------------- Aria in the sidebar (mascot.jsx SideAria), as in the template */
.side-aria { position: relative; margin: 10px 12px 6px; padding: 10px 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  border-radius: 18px; background: radial-gradient(90% 70% at 50% 100%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 70%); }
.side-aria-bubble { align-self: stretch; position: relative; padding: 10px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.45; color: var(--ink);
  background: color-mix(in srgb, var(--color-surface-raised) 90%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
  box-shadow: 0 0 22px -8px color-mix(in srgb, var(--color-accent) 70%, transparent); animation: aria-pop .4s cubic-bezier(.2, .8, .2, 1) both; }
.side-aria-bubble::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px; background: inherit; border-right: inherit; border-bottom: inherit; transform: rotate(45deg); }
.aria-art { display: block; object-fit: contain; animation: aria-float 4.2s ease-in-out infinite; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35)); }
.side-aria .aria-art { margin-top: 6px; }
/* the same picture of Aria in the Assistant panel and in the avatars (mascot.jsx Aria): whole in the floating button, the head cropped in the small round ones */
img.aria-pic.ao-av { display: block; width: 100%; height: 100%; object-fit: contain; animation: none; filter: none; }
img.aria-pic.ao-av.face { object-fit: cover; object-position: 50% 0; transform: scale(1.5); transform-origin: 50% 14%; }
.side-aria-mic { width: 62px; height: 62px; margin-top: -6px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #a99bff, var(--color-accent) 55%, #3b2fb5); box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 22%, transparent), 0 12px 28px -8px var(--color-accent);
  animation: side-mic 2.6s ease-in-out infinite; transition: transform .2s; }
.side-aria-mic:hover { transform: scale(1.06); } .side-aria-mic:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
@keyframes side-mic { 0%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 22%, transparent), 0 12px 28px -8px var(--color-accent); } 50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--color-accent) 8%, transparent), 0 12px 28px -8px var(--color-accent); } }
/* Only where there is room: a short screen keeps the menu, and the floating Assistant keeps its Aria. */
@media (max-height: 860px) { .side-aria { display: none; } }
/* A long menu (administrators) would push her below the screen: she stays pinned to the foot of the sidebar, as in the
   template, and the menu scrolls behind her. */
@media (min-height: 861px) {
  .side-aria { position: sticky; bottom: 0; z-index: 2; margin: 0; border-radius: 0; padding: 12px 22px 10px;
    background: radial-gradient(90% 70% at 50% 100%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 70%), var(--color-sidebar);
    box-shadow: 0 -14px 18px -10px var(--color-sidebar); }
  .side-aria .aria-art { width: 96px; height: 120px; }
  .side-aria-mic { width: 54px; height: 54px; }
}
@media (min-height: 861px) { .has-side-aria .as-bot { display: none; } }
@media (prefers-reduced-motion: reduce) { .aria-art, .side-aria-mic, .side-aria-bubble { animation: none !important; } }

/* ---------------------------------------------------------------- Ant Design text the dark algorithm darkens below AA
   In the dark themes Ant Design darkens its seed colours (accent, link, error) before using them, which leaves links, the
   current page number, an outlined choice and badge counts under 4.5:1 on our grounds. Those take the theme's tokens. */
[data-theme="dark"] a:not([class]):not(.ant-menu *):not(.ant-dropdown *):not(.ant-breadcrumb *):not(.ant-pagination *) { color: var(--color-link); }
[data-theme="dark"] .ant-pagination .ant-pagination-item-active { border-color: var(--color-accent-text); }
[data-theme="dark"] .ant-pagination .ant-pagination-item-active a { color: var(--color-accent-text); }
[data-theme="dark"] .ant-radio-group:not(.ant-radio-group-solid) .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) { color: var(--color-accent-text); }
[data-theme="dark"] .ant-badge .ant-badge-count { background: #c8243f; color: #fff; }
.ant-table-wrapper .ant-table-placeholder .ant-table-cell, .ant-table-wrapper .ant-table-placeholder .ant-table-expanded-row-fixed { color: var(--color-text-muted); }
/* Status tags take the theme's own status colours (AA on their soft ground in every theme). */
.ant-tag.ant-tag-success { color: var(--color-success); background: var(--color-success-soft); border-color: color-mix(in srgb, var(--color-success) 35%, transparent); }
.ant-tag.ant-tag-warning { color: var(--color-warning); background: var(--color-warning-soft); border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); }
.ant-tag.ant-tag-error { color: var(--color-error); background: var(--color-error-soft); border-color: color-mix(in srgb, var(--color-error) 35%, transparent); }
/* Ant Design's preset tag text is under 4.5:1 on its own pale ground; in Light it uses the next darker shade. */
[data-theme="light"] .ant-tag-green, [data-theme="light"] .ant-tag-lime { color: #237804; }
[data-theme="light"] .ant-tag-gold, [data-theme="light"] .ant-tag-orange, [data-theme="light"] .ant-tag-yellow { color: #ad4e00; }
[data-theme="light"] .ant-tag-volcano, [data-theme="light"] .ant-tag-red { color: #a8071a; }
[data-theme="light"] .ant-tag-cyan { color: #006d75; }
[data-theme="light"] .ant-tag-magenta { color: #9e1068; }
/* In the dark themes the same happens to the cool presets: they take a lighter shade. */
[data-theme="dark"] .ant-tag-purple { color: #c69cf5; }
[data-theme="dark"] .ant-tag-magenta { color: #f37fb7; }
[data-theme="dark"] .ant-tag-geekblue { color: #8ea8ff; }
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }
/* Keyboard focus is always visible (WCAG 2.4.7): one ring in the theme's focus colour (3:1 or more on every ground, tested)
   for links, tabs, sortable headers and anything else that had none. Inputs inside Ant Design's wrappers are skipped: the
   wrapper draws the ring. */
:focus-visible:not(.ant-input-affix-wrapper input):not(.ant-select-selection-search-input):not(.ant-input-number-input):not(.ant-picker input):not(.nx-chat__box textarea) {
  outline: 2px solid var(--color-focus) !important; outline-offset: 2px;
}
.ant-tabs-tab-btn:focus-visible, th:focus-visible, .ant-menu-item:focus-visible { outline-offset: -2px; }

/* ---------------------------------------------------------------- 3D surfaces on every page (Sheraz, 12 Oct 2026: "why the other pages
   are not 3D like Claude usage, also the sidebar"). The Claude usage look, made general: raised gradient surfaces with a
   sheen and an accent-tinted depth shadow, gradient icon tiles, a lifted active menu item, a glow behind the page. All from
   the theme tokens, so every theme gets it; motion stops for people who prefer less. */
:root { --depth-glow: 0 2px 6px -2px rgba(15, 23, 42, .10), 0 22px 44px -26px color-mix(in srgb, var(--color-accent) 60%, transparent);
  --depth-glow-hi: 0 4px 10px -4px rgba(15, 23, 42, .12), 0 30px 56px -26px color-mix(in srgb, var(--color-accent) 75%, transparent);
  --depth-surface: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 55%), var(--bk-sheen), linear-gradient(160deg, var(--color-surface-raised), var(--color-surface));
  --depth-border: color-mix(in srgb, var(--color-accent) 20%, var(--color-border-subtle)); }
.ant-layout.shell { background: radial-gradient(1100px 560px at 75% -8%, var(--color-bg-glow), transparent 62%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, var(--color-accent-2) 7%, transparent), transparent 60%), var(--color-bg); background-attachment: fixed; }
.ant-layout.shell .ant-layout { background: transparent; }
.top { background: color-mix(in srgb, var(--color-surface) 78%, transparent) !important; box-shadow: 0 1px 0 var(--color-border-subtle), 0 10px 30px -24px rgba(0, 0, 0, .45); }

/* Page heading: the page's icon in a raised gradient tile */
.page-head-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.page-head-text { min-width: 0; }
.page-logo { flex: 0 0 auto; align-self: flex-start; margin-top: 2px; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-size: 22px;
  background: var(--gradient-brand); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--color-accent) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .12); }
.page-logo .anticon { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
@media (max-width: 640px) { .page-logo { width: 38px; height: 38px; font-size: 18px; border-radius: 12px; } }

/* Cards on a page (not cards inside cards): raised, with a sheen and depth; clickable ones lift */
.content-inner .ant-card:not(.ant-card .ant-card):not(.ant-card-type-inner) {
  border-radius: 18px; border-color: var(--depth-border) !important;
  background: var(--depth-surface);
  box-shadow: var(--shadow-card), var(--depth-glow); transition: box-shadow .3s, transform .35s cubic-bezier(.2, .8, .2, 1), border-color .3s; }
.content-inner .ant-card:not(.ant-card .ant-card):not(.ant-card-type-inner):hover { box-shadow: var(--shadow-raised), var(--depth-glow-hi); border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-border-subtle)) !important; }
.content-inner .ant-card-hoverable:hover { transform: translateY(-3px); }
.content-inner .ant-card .ant-card-head { border-bottom-color: var(--color-border-subtle); }
.content-inner .card { border-radius: 18px; box-shadow: var(--shadow-card), var(--depth-glow); }

/* Figure tiles (the .stat blocks on many pages): the icon in a gradient tile, as in Quick insights */
.stat-ic { background: var(--gradient-brand); color: #fff; box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--color-accent) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); }
.stat.warn .stat-ic { background: linear-gradient(135deg, #fbbf24, #d97706); color: #fff; box-shadow: 0 8px 18px -10px rgba(217, 119, 6, .8), inset 0 1px 0 rgba(255, 255, 255, .3); }

/* Sidebar: a lit panel; the page you are on is a raised pill with a glowing icon */
.ant-layout-sider.side { background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 7%, var(--color-sidebar)) 0%, var(--color-sidebar) 45%) !important;
  box-shadow: 10px 0 32px -26px rgba(0, 0, 0, .55); border-right-color: var(--color-border-subtle); }
.side-menu .ant-menu-item { transition: transform .25s cubic-bezier(.2, .8, .2, 1), background .25s, box-shadow .25s; }
.side-menu .ant-menu-item:not(.ant-menu-item-selected):hover { transform: translateX(3px); }
.side-menu .ant-menu-item-selected { background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 20%, var(--color-sidebar)), color-mix(in srgb, var(--color-accent-2) 8%, var(--color-sidebar))) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 22px -14px var(--color-accent); }
.side-menu .ant-menu-item-selected .anticon { color: var(--color-accent-text); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-accent) 65%, transparent)); }
.side-create-btn.ant-btn-primary { box-shadow: 0 12px 24px -12px var(--color-accent), inset 0 1px 0 rgba(255, 255, 255, .25); }

/* Buttons and dialogs pick up the same depth */
.ant-btn-primary:not(:disabled):not(.ant-btn-dangerous) { box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--color-accent) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .2); }
.ant-btn-primary:not(:disabled):not(.ant-btn-dangerous):hover { transform: translateY(-1px); }
.ant-modal .ant-modal-content, .ant-drawer-content { box-shadow: var(--shadow-raised), var(--depth-glow-hi); }
.ant-modal .ant-modal-content { border-radius: 18px; }
@media (prefers-reduced-motion: reduce) {
  .content-inner .ant-card, .side-menu .ant-menu-item, .ant-btn-primary { transition: none !important; }
  .content-inner .ant-card-hoverable:hover, .side-menu .ant-menu-item:hover, .ant-btn-primary:hover { transform: none !important; }
}
/* The pages' own cards (found by scanning every page for card-like boxes, 12 Oct 2026) get the same depth. Panels are
   raised; items you click are raised, lift and tilt a little toward you, like the Claude usage account cards. */
.h2-panel, .h2-ask, .h2-needs, .gal-side, .am-rec, .am-journey, .chat-side, .chat-main, .fleet-warn, .cmp {
  background: var(--depth-surface);
  border-color: var(--depth-border); box-shadow: var(--shadow-card), var(--depth-glow); }
.af-card, .h2-agent, .h2-idea, .h2-path, .gal-card, .gal-mini, .sd-item, .training-tile, .stat, .load-num {
  background: var(--depth-surface);
  border-color: var(--depth-border); box-shadow: var(--shadow-card), var(--depth-glow);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s; }
.af-card:hover, .af-card:focus-visible, .h2-agent:hover, .h2-idea:hover, .h2-path:hover, .gal-card:hover, .gal-mini:hover, .sd-item:hover, .training-tile:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-3px);
  box-shadow: var(--shadow-raised), var(--depth-glow-hi); border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-border-subtle)); }
@media (prefers-reduced-motion: reduce) {
  .af-card, .h2-agent, .h2-idea, .h2-path, .gal-card, .gal-mini, .sd-item, .training-tile, .stat, .load-num { transition: none; }
  .af-card:hover, .h2-agent:hover, .h2-idea:hover, .h2-path:hover, .gal-card:hover, .gal-mini:hover, .sd-item:hover, .training-tile:hover { transform: none; }
}
/* ---------------------------------------------------------------- What's new (whatsnew.jsx): quiet, under Needs you, never above the work */
.h2-side { display: grid; gap: 14px; align-content: start; min-width: 0; }
.wn-card { position: relative; display: grid; gap: 6px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--depth-border);
  background: var(--depth-surface); box-shadow: var(--shadow-card), var(--depth-glow); }
.wn-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.wn-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--color-accent-text); }
.wn-badge .anticon { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #fff; background: var(--gradient-brand); font-size: 13px;
  box-shadow: 0 6px 14px -8px var(--color-accent), inset 0 1px 0 rgba(255, 255, 255, .3); }
.wn-title { font-size: 15px; line-height: 1.3; }
.wn-benefit { margin: 0; color: var(--color-text-secondary); font-size: 13px; line-height: 1.5; }
.wn-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.wn-more { justify-self: start; margin-top: 2px; padding: 2px 0; border: 0; background: none; color: var(--color-link); font: inherit; font-size: 12.5px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.wn-more:hover { text-decoration: underline; }
.wn-page .wn-bell { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-secondary); cursor: pointer; }
.wn-filter { margin-bottom: 18px; max-width: 100%; overflow-x: auto; }
.wn-month { margin-bottom: 26px; }
.wn-month h3 { margin: 0 0 12px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wn-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.wn-item { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--depth-border);
  background: var(--depth-surface); box-shadow: var(--shadow-card), var(--depth-glow); }
.wn-item.is-new { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border-subtle)); }
.wn-item-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.wn-item-top .ant-tag { margin: 0; }
.wn-where { margin: 0; }
.wn-item-foot { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.wn-stats { border-top: 1px dashed var(--color-border-subtle); padding-top: 8px; margin-top: 4px; }
.side-aria-link { display: block; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--color-link); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.side-aria-link:hover { text-decoration: underline; }
/* ---------------------------------------------------------------- What an agent asks to do, readable (components.jsx ActionValue) */
.act-table-wrap { max-width: 100%; overflow-x: auto; display: grid; gap: 4px; }
.act-table { border-collapse: collapse; font-size: 12.5px; min-width: 100%; }
.act-table th, .act-table td { text-align: left; padding: 5px 10px; border-bottom: 1px solid var(--color-border-subtle); vertical-align: top; white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.act-table th { font-weight: 600; color: var(--muted); text-transform: capitalize; background: var(--color-table-head); position: sticky; top: 0; }
.act-table tbody tr:nth-child(even) td { background: var(--color-row-alt); }
.act-obj { display: grid; gap: 4px; }
.act-obj-row { display: block; }
.act-obj-k { color: var(--muted); text-transform: capitalize; }
/* ---------------------------------------------------------------- My work (mywork.jsx): runs, results, what runs by itself */
.mw-page .ant-tabs-nav { margin-bottom: 14px; }
.mw-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 8px; border-radius: 10px; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--color-accent); }
.mw-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.mw-team { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-secondary); cursor: pointer; }
.mw-list { display: grid; gap: 12px; }
.mw-run { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--depth-border);
  background: var(--depth-surface); box-shadow: var(--shadow-card), var(--depth-glow); position: relative; }
.mw-run.tone-bad { border-color: color-mix(in srgb, var(--color-error) 45%, var(--color-border-subtle)); }
.mw-run.tone-wait { border-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-border-subtle)); }
.mw-run.is-new::after { content: ''; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--color-accent); }
.mw-run.compact { padding: 10px 12px; gap: 10px; }
.mw-type { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 17px; flex: none;
  background: var(--gradient-brand); box-shadow: 0 8px 18px -10px var(--color-accent), inset 0 1px 0 rgba(255, 255, 255, .3); }
.mw-type.t-scheduled, .mw-type.t-routine { background: linear-gradient(135deg, #38bdf8, #2563eb); box-shadow: 0 8px 18px -10px #2563eb, inset 0 1px 0 rgba(255, 255, 255, .3); }
.mw-type.t-flow, .mw-type.t-flow_scheduled { background: linear-gradient(135deg, #2dd4bf, #0f766e); box-shadow: 0 8px 18px -10px #0f766e, inset 0 1px 0 rgba(255, 255, 255, .3); }
.mw-type.t-collector { background: linear-gradient(135deg, #4ade80, #15803d); box-shadow: 0 8px 18px -10px #15803d, inset 0 1px 0 rgba(255, 255, 255, .3); }
.mw-type.t-handoff { background: linear-gradient(135deg, #fbbf24, #c2410c); box-shadow: 0 8px 18px -10px #c2410c, inset 0 1px 0 rgba(255, 255, 255, .3); }
.mw-type.t-test, .mw-type.t-monitor { background: linear-gradient(135deg, #94a3b8, #475569); box-shadow: 0 8px 18px -10px #475569, inset 0 1px 0 rgba(255, 255, 255, .3); }
.mw-run.compact .mw-type { width: 30px; height: 30px; border-radius: 10px; font-size: 14px; }
.mw-run-main { min-width: 0; display: grid; gap: 5px; }
.mw-run-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mw-type-word { font-size: 12.5px; color: var(--color-text-secondary); }
.mw-when { margin-left: auto; }
.mw-new { margin: 0; }
.mw-title { font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; }
.mw-facts, .mw-delivery { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.mw-facts > span, .mw-delivery > span { display: inline-flex; align-items: center; gap: 5px; }
.mw-delivery .bad { color: var(--color-error); }
.mw-preview { margin: 2px 0 0; font-size: 13px; color: var(--color-text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mw-problem, .mw-problem-inline { margin: 2px 0 0; padding: 6px 10px; border-radius: 10px; font-size: 13px; color: var(--color-error); background: var(--color-error-soft); }
.mw-problem-inline { display: block; }
.mw-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mw-state { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.mw-state.tone-ok { color: var(--color-success); background: var(--color-success-soft); }
.mw-state.tone-bad { color: var(--color-error); background: var(--color-error-soft); }
.mw-state.tone-wait { color: var(--color-warning); background: var(--color-warning-soft); }
.mw-state.tone-run { color: var(--color-accent-text); background: var(--color-accent-soft); }
.mw-state.tone-off { color: var(--color-text-muted); background: var(--color-surface-nested); border-color: var(--color-border-subtle); }
/* The only motion: something is working right now. */
.mw-state.live { animation: mw-live 1.8s ease-in-out infinite; }
@keyframes mw-live { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 45%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 0%, transparent); } }
.mw-recent-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 28px 0 12px; }
.mw-agent-filter { margin: -6px 0 12px; }
/* Three ways an agent works */
.mw-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-bottom: 16px; }
.mw-ways > div { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 12px 14px; border-radius: 14px; background: var(--color-surface-nested); border: 1px solid var(--color-border-subtle); }
.mw-ways .anticon { grid-row: span 2; font-size: 18px; color: var(--color-accent-text); margin-top: 2px; }
.mw-ways span { font-size: 12.5px; color: var(--color-text-secondary); }
/* One automation */
.mw-autos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.mw-autos.compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); margin-top: 12px; }
.mw-auto { display: grid; gap: 10px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--depth-border); background: var(--depth-surface); box-shadow: var(--shadow-card), var(--depth-glow); }
.mw-auto.tone-bad { border-color: color-mix(in srgb, var(--color-error) 45%, var(--color-border-subtle)); }
.mw-auto.tone-off { opacity: .92; }
.mw-auto.compact { padding: 12px 14px; gap: 8px; }
/* A narrow card fits 3 of 4 steps and left one alone on a row (agent page, 12 Oct 2026): two by two instead. */
.mw-auto { container-type: inline-size; }
@container (max-width: 520px) {
  .mw-timeline:has(li:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
  .mw-timeline:has(li:nth-child(4)) li::after { display: none; }
}
@container (max-width: 400px) {
  .mw-auto-top { flex-wrap: wrap; }
  .mw-auto-top > .mw-auto-id { flex-basis: calc(100% - 64px); }
  .mw-auto-top > .mw-state { margin-left: 52px; }
}
.mw-auto-top { display: flex; align-items: center; gap: 12px; }
.mw-auto-id { flex: 1; min-width: 0; display: grid; } .mw-auto-id b { overflow-wrap: anywhere; }
.mw-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; counter-reset: s; }
.mw-timeline li { position: relative; display: grid; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--color-surface-nested); border: 1px solid var(--color-border-subtle); font-size: 12px; }
.mw-timeline li:not(:last-child)::after { content: ''; position: absolute; right: -8px; top: 50%; width: 8px; height: 2px; background: var(--color-border); }
.mw-timeline li.now { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent); animation: mw-live 1.8s ease-in-out infinite; }
.mw-step-ic { color: var(--color-accent-text); } .mw-step-t { font-weight: 600; color: var(--color-text-secondary); } .mw-step-x { color: var(--ink); overflow-wrap: anywhere; }
.mw-auto-facts { display: grid; gap: 4px; color: var(--color-text-secondary); }
.mw-paused { color: var(--color-warning); }
.mw-auto-more summary { cursor: pointer; color: var(--color-link); font-size: 13px; }
.mw-auto-more dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 10px 0 0; font-size: 13px; }
.mw-auto-more dt { color: var(--muted); } .mw-auto-more dd { margin: 0; }
/* The agent page's first panel */
.mw-panel { margin: 0 0 18px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--depth-border); background: var(--depth-surface); box-shadow: var(--shadow-card), var(--depth-glow); display: grid; gap: 10px; }
.mw-panel-line { margin: 0; font-size: 15px; font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.mw-panel-line .anticon { color: var(--color-accent-text); }
.mw-panel-line.live .anticon { animation: mw-spin-soft 1.2s linear infinite; }
@keyframes mw-spin-soft { to { transform: rotate(360deg); } }
.mw-panel-last { margin: -4px 0 0; }
.mw-panel-groups { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.mw-panel-group { display: grid; gap: 6px; }
.mw-group-h { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
@media (max-width: 640px) { .mw-when { margin-left: 0; } .mw-timeline li:not(:last-child)::after { display: none; } .mw-auto-more dl { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mw-state.live, .mw-timeline li.now, .mw-panel-line.live .anticon { animation: none !important; } }
.mw-count.soft { color: var(--color-accent-text); background: var(--color-accent-soft); }

/* How it sends email (builder, 12 Oct 2026): two sender cards; the chosen one lifts toward you. */
.send-group { margin-top: 6px; }
.send-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; perspective: 900px; }
.send-opt { display: grid; gap: 8px; align-content: start; padding: 14px 16px; border-radius: 16px; cursor: pointer; border: 1px solid var(--depth-border); background: var(--depth-surface); box-shadow: var(--shadow-card); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.send-opt.on { border-color: var(--color-accent); transform: translateY(-2px) rotateX(2deg); box-shadow: var(--shadow-card), var(--depth-glow), 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent); }
.send-opt.locked { cursor: default; opacity: .8; }
.send-opt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.send-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; }
.send-facts dt { color: var(--muted); } .send-facts dd { margin: 0; overflow-wrap: anywhere; }
.send-rule { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--color-border-subtle); }
/* Permission card: each Cannot says why; what just changed flips in and glows once. */
.perm-why { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.perm-limit { padding: 9px 16px 10px; border-top: 1px solid var(--color-border-subtle); }
.perm-new { animation: perm-in .45s cubic-bezier(.2,.8,.2,1) both, perm-glow 1.6s ease-out; transform-origin: top center; border-radius: 8px; }
@keyframes perm-in { from { opacity: 0; transform: perspective(600px) rotateX(-65deg) translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes perm-glow { 0%, 30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 35%, transparent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; background: transparent; } }
@media (prefers-reduced-motion: reduce) { .perm-new { animation: none; } .send-opt, .send-opt.on { transition: none; transform: none; } }

/* Agent learning (learning.jsx, 12 Oct 2026) */
.fb-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--color-border-subtle); }
.learn-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.learn-kindbox { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--depth-border); background: var(--depth-surface); }
.learn-kind { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 55%, #000)); box-shadow: 0 4px 10px color-mix(in srgb, var(--color-accent) 30%, transparent); }
.learn-kind.k-knowledge, .k-knowledge > .learn-kind { background: linear-gradient(135deg, #0ea5e9, #0369a1); }
.learn-kind.k-capability, .k-capability > .learn-kind { background: linear-gradient(135deg, #f59e0b, #b45309); }
.k-memory > .learn-kind { background: linear-gradient(135deg, #64748b, #334155); }
.k-live > .learn-kind { background: linear-gradient(135deg, #22c55e, #15803d); }
.learn-list { display: grid; gap: 14px; }
.learn-card { display: grid; gap: 10px; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--depth-border); background: var(--depth-surface); box-shadow: var(--shadow-card), var(--depth-glow); transition: transform .2s ease, box-shadow .2s ease; }
.learn-card:hover { transform: translateY(-2px); }
.learn-card.st-quiet, .learn-card.st-rejected, .learn-card.st-closed { opacity: .88; }
.learn-top { display: flex; gap: 12px; align-items: flex-start; }
.learn-head { flex: 1; min-width: 0; display: grid; gap: 2px; }
.learn-title { font-size: 15px; overflow-wrap: anywhere; }
.learn-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
.learn-facts dt { color: var(--muted); } .learn-facts dd { margin: 0; overflow-wrap: anywhere; }
.learn-diff summary { cursor: pointer; color: var(--color-link); font-size: 13px; }
.diff { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--color-surface-nested); border: 1px solid var(--color-border-subtle); font: 12.5px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-x: auto; white-space: pre-wrap; }
.diff-add { background: color-mix(in srgb, var(--color-success, #16a34a) 16%, transparent); color: var(--ink); border-radius: 4px; animation: diff-in 1.4s ease-out; }
.diff-same { color: var(--color-text-secondary); } .diff-skip { color: var(--muted); font-style: italic; }
@keyframes diff-in { from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success, #16a34a) 40%, transparent); } to { box-shadow: none; } }
.learn-after { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: var(--color-surface-nested); font-size: 13px; }
.learn-after.v-better { border-left: 3px solid var(--color-success, #16a34a); } .learn-after.v-worse { border-left: 3px solid var(--color-error); }
.learn-edit { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--color-accent); }
.learn-link { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--depth-border); background: var(--depth-surface); font-size: 13px; }
.ver-list { display: grid; gap: 8px; }
.ver-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--color-border-subtle); }
.ver-row.live { border-color: var(--color-success, #16a34a); background: color-mix(in srgb, var(--color-success, #16a34a) 6%, transparent); }
.learn-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; }
.learn-views { max-width: 100%; min-width: 0; overflow-x: auto; }
@media (max-width: 640px) {
  .learn-facts { grid-template-columns: 1fr; } .learn-top { flex-wrap: wrap; }
  .learn-kinds { grid-template-columns: 1fr 1fr; gap: 8px; }
  .learn-kindbox { padding: 8px 10px; gap: 8px; } .learn-kindbox .muted { display: none; } .learn-kindbox .learn-kind { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .learn-card, .learn-card:hover { transition: none; transform: none; } .diff-add { animation: none; } }
/* Agent learning: live vs new, side by side */
.cmp { display: grid; gap: 8px; }
.cmp-pair { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--color-border-subtle); }
.cmp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.cmp-cell { display: grid; gap: 4px; align-content: start; padding: 8px 10px; border-radius: 10px; background: var(--color-surface-nested); }
.cmp-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; max-height: 260px; overflow-y: auto; }

/* A custom app's explanation after Change it (issue #5): full text, formatted, scrolls when long */
.app-note { max-height: 340px; overflow-y: auto; }


/* The simple menu (navsimple.jsx): the screens of a place as tabs above the page. Only the tab bar: each tab opens the
   page it always was. */
/* Manager and CEO agents (exec.jsx): one question and its answer, one request and its buttons */
.exec-turn { padding: 12px 0; border-top: 1px solid var(--line); }
.exec-turn:first-child { border-top: 0; padding-top: 0; }
.exec-q { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; margin-bottom: 6px; }
.exec-a { overflow-wrap: anywhere; line-height: 1.6; }
/* Team know-how (knowhow.jsx): the text itself, and one request waiting for a decision */
.knowhow-body { overflow-wrap: anywhere; line-height: 1.6; max-width: 900px; }
.knowhow-wait { padding: 12px 0; border-top: 1px solid var(--line); }
.knowhow-wait:first-child { border-top: 0; padding-top: 0; }
/* The direct AI chat answer while it is written (memory.jsx LiveProgress) */
.live-text { margin-bottom: 6px; }
.live-text.provisional { opacity: 0.6; }
.live-draft { font-size: 12px; font-style: italic; opacity: 0.8; margin-bottom: 2px; }
/* The nine steps on an agent's page (agentpath.jsx): one row on a wide screen, wrapping below it */
.agent-path { margin: 4px 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.agent-path-head { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; margin-bottom: 10px; }
.agent-path ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.agent-path li > * { display: flex; gap: 8px; align-items: flex-start; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; }
.agent-path li > button { cursor: pointer; }
.agent-path li > button:hover, .agent-path li > button:focus-visible { background: color-mix(in srgb, var(--line) 45%, transparent); outline: none; }
.agent-path .dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.agent-path .txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.agent-path .txt small { color: var(--muted); overflow-wrap: anywhere; }
.agent-path li.done .dot { background: var(--green, #16a34a); border-color: var(--green, #16a34a); color: #fff; }
.agent-path li.now .dot { border-color: var(--brand, #4d7cfe); color: var(--brand, #4d7cfe); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #4d7cfe) 22%, transparent); animation: path-now 2.2s ease-in-out infinite; }
.agent-path li.now b { color: var(--brand, #4d7cfe); }
.agent-path li.todo { opacity: .62; }
@keyframes path-now { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand, #4d7cfe) 8%, transparent); } }
@media (prefers-reduced-motion: reduce) { .agent-path li.now .dot { animation: none; } }
.hub-tabs { margin: -6px 0 14px; }
.hub-tabs .ant-tabs-content-holder { display: none; }
.hub-tabs .ant-tabs-nav { margin: 0; }
/* Full screen is for the page itself; and a page that fills the window gives the tab bar its room. */
body.focus-mode .hub-tabs { display: none; }
@media (min-width: 1000px) { .nav-simple .chat-shell:not(.embedded) { height: calc(calc(100 * var(--ao-vh)) - 60px - 56px - 54px); } }
.nav-simple .side-menu .ant-menu-item { margin-block: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .nav-simple .content-inner > *:not(.hub-tabs) { animation: page-in .22s ease-out backwards; }
  .nav-simple .side-menu .ant-menu-item { transition: transform .16s ease, background-color .16s ease; }
  .nav-simple .side-menu .ant-menu-item:hover { transform: translateX(2px); }
}
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- chat and train together (chatteach.jsx) */
.teach-line { display: grid; gap: 6px; margin-top: 6px; justify-items: end; max-width: 100%; }
.teach-line .tr-card { justify-self: stretch; text-align: left; background: var(--panel, transparent); }
.teach-levels { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.teach-reply { justify-self: stretch; text-align: left; padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--line); white-space: pre-wrap; }
.teach-next { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.fork-banner { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin: 8px 16px 0; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--depth-surface, transparent); font-size: 13px; }
.fork-what { display: flex; gap: 8px; align-items: baseline; min-width: 0; flex: 1 1 320px; }
.fork-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fork-cut { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--muted, inherit); font-size: 12px; opacity: .8; }
.fork-cut::before, .fork-cut::after { content: ''; flex: 1 1 20px; border-top: 1px dashed var(--line); }
.fork-cut span { flex: 0 1 auto; text-align: center; }
.cmp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cmp-col { border: 1px solid var(--line); border-radius: 10px; padding: 12px; min-width: 0; overflow-x: auto; }
.cmp-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.ct-setting { display: grid; gap: 10px; justify-items: start; }
.ct-people { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; }
@media (max-width: 760px) { .cmp-grid { grid-template-columns: minmax(0, 1fr); } .fork-banner { margin: 8px 8px 0; } }
/* ---- collection agents: the attachments of a row's email (collectors.jsx) */
.col-files { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 320px; }
.col-files .ant-btn { height: auto; padding: 0; white-space: normal; text-align: left; word-break: break-word; }
.col-file-name { font-size: 13px; word-break: break-word; }

/* ---- AI Workspace: remove a conversation from the list (assistant.jsx) */
.asx-h-row { position: relative; }
.asx-h-row .asx-h { padding-right: 30px; }
.asx-h-row .asx-h-del { position: absolute; top: 6px; right: 4px; opacity: 0; transition: opacity .15s ease; }
.asx-h-row:hover .asx-h-del, .asx-h-row .asx-h-del:focus-visible { opacity: .8; }
@media (hover: none) { .asx-h-row .asx-h-del { opacity: .6; } }

/* ---- AI Workspace: full width, with what the conversation touched on the right (assistant.jsx ConvPanel) */
.content-inner:has(.asx) { max-width: none; }
.asx-ctx { position: sticky; top: 16px; max-height: calc(calc(100 * var(--ao-vh)) - 110px); overflow: auto; display: grid; gap: 18px; align-content: start; padding: 14px 16px; border-radius: 14px; background: var(--card, var(--bg)); border: 1px solid var(--line, rgba(0,0,0,.08)); }
.asx-ctx-sec { display: grid; gap: 2px; }
.asx-ctx-head { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 2px; border: 0; background: none; cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: left; }
.asx-ctx-head .anticon { font-size: 9px; }
.asx-ctx-head:hover { color: var(--text, inherit); }
.asx-ctx-body { display: grid; gap: 2px; }
.asx-ctx-body .asx-ctx-sec { padding-left: 6px; }
.asx-ctx-body .asx-ctx-head { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: inherit; }

.asx-ctx-n { font-variant-numeric: tabular-nums; padding: 0 6px; border-radius: 8px; background: var(--soft); letter-spacing: 0; }
.asx-ctx-row { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; padding: 5px 6px; border-radius: 8px; font-size: 13px; line-height: 1.4; color: inherit; }
.asx-ctx-row > span { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.asx-ctx-row > .anticon { margin-top: 3px; color: var(--muted); }
.asx-ctx-row > .anticon.ok { color: var(--ok, #16a34a); }
.asx-ctx-row > .anticon.wait { color: var(--warn, #d97706); }
a.asx-ctx-row:hover, button.asx-ctx-row:hover { background: var(--soft); color: inherit; }
button.asx-ctx-row { width: 100%; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; }
.asx-ctx-item.open > .asx-ctx-row { background: var(--soft); }
.asx-ctx-item.open > .asx-ctx-row > span { -webkit-line-clamp: unset; display: block; }
.asx-ctx-more { display: grid; gap: 6px; justify-items: start; margin: 2px 0 6px 30px; font-size: 12.5px; line-height: 1.5; animation: asxFold .16s cubic-bezier(.2,.8,.2,1); }
.asx-ctx-more ol { margin: 0; padding-left: 18px; }
.asx-ctx-more blockquote { margin: 0; padding-left: 8px; border-left: 2px solid var(--line, rgba(0,0,0,.12)); color: var(--muted); }
.asx-ctx-open { font-size: 12px; font-weight: 500; }
@keyframes asxFold { from { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .asx-ctx-more { animation: none; } }
.asx-ctx-empty { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
/* ---- Train & improve: What it was taught (improve.jsx TaughtPanel) */
.taught-list { display: grid; gap: 0; margin-top: 10px; }
.taught-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border-subtle, rgba(0,0,0,.08)); }
.taught-row:last-child { border-bottom: 0; }
.taught-main { display: grid; gap: 3px; min-width: 0; }
.taught-text { font-weight: 600; overflow-wrap: anywhere; }
.taught-row.off .taught-text { text-decoration: line-through; color: var(--color-text-muted, inherit); }
.taught-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.taught-said { margin-top: 4px; padding: 6px 8px; border-radius: 8px; background: var(--color-surface-nested, rgba(0,0,0,.03)); max-height: 160px; overflow: auto; }
.taught-undo { display: grid; gap: 6px; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--color-warning-soft, #fdf0dc); max-width: 560px; }
@media (max-width: 700px) { .taught-row { grid-template-columns: minmax(0, 1fr); } .taught-side { align-items: flex-start; flex-direction: row; flex-wrap: wrap; } }

/* ---- AI Workspace: training an agent in the conversation (assistant.jsx TrainTurn, chat_first) */
.trn { display: grid; gap: 10px; margin-top: 6px; }
.trn-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--brand-soft); font-weight: 600; }
/* Teach it by saying it (chat-train-2): the card under a lesson, the quick test, the composer's teaching line, the one line for others. */
.teach-card { padding: 10px 12px; border: 1px solid var(--color-border-subtle); border-radius: 12px; background: var(--panel, transparent); max-width: 760px; }
.teach-card .trn-diff { display: grid; gap: 4px; }
.trn-quick { display: grid; gap: 4px; }
.trn-quick-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; overflow-wrap: anywhere; }
.trn-quick-row .muted { flex-basis: 100%; }
.trn-try { display: grid; gap: 4px; padding: 8px 10px; border-radius: 10px; background: var(--brand-soft); }
.trn-history .imp-row { gap: 8px; }
.teach-mode { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 12px; margin-bottom: 6px; border-radius: 10px; background: var(--brand-soft); }
.teach-mode span { flex: 1; min-width: 0; }
.only-owner { display: grid; gap: 4px; justify-items: start; margin-top: 6px; color: var(--color-text-muted, inherit); }
.only-owner .trn-suggest { display: grid; gap: 6px; width: min(520px, 100%); }
.trn-card { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--color-border-subtle, rgba(0,0,0,.08)); background: var(--color-surface, #fff); }
.trn-before .pre { color: var(--color-text-muted, inherit); text-decoration: line-through; }
.trn-after .pre { font-weight: 500; }
.trn-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.trn-tests { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--color-surface-nested, rgba(0,0,0,.03)); }
.trn-tests-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.trn-test { display: grid; gap: 4px; padding: 6px 0; border-top: 1px solid var(--color-border-subtle, rgba(0,0,0,.08)); }
.trn-test-q { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.trn-test-q .pre { font-weight: 500; overflow-wrap: anywhere; }
.trn-fix { display: grid; gap: 6px; }
.asx-advanced { margin-top: 14px; text-align: left; max-width: 640px; margin-inline: auto; }
.asx-advanced summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.asx-adv-links { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 2px; font-size: 13px; }
.trn-blocks { display: grid; gap: 6px; }
.trn-untested .ant-space-compact { max-width: 420px; }

/* R4: the short summary that replaces the nine-step strip in the five-tab layout */
.agent-summary { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 10px 14px; margin: 12px 0; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; }
.agent-summary b { font-weight: 600; margin-right: 4px; }

/* The dashboard chat in the studio (boardchat.jsx) */
.bc-scroll { max-height: calc(46 * var(--ao-vh)); min-height: 90px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 8px; }
.bc-hello { padding: 6px 2px; }
.bc-msg { display: flex; }
.bc-msg.person { justify-content: flex-end; }
.bc-bubble { max-width: 92%; padding: 8px 11px; border-radius: 12px; background: var(--soft); font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.bc-bubble.me { background: var(--brand-soft); color: var(--ink); }
.bc-bubble.wide { max-width: 100%; width: 100%; background: none; padding: 0; }
.bc-q-one { margin-bottom: 8px; }
.bc-choices { margin-top: 6px; }
.bc-card { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.bc-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bc-assumed { background: var(--soft); border-radius: 8px; padding: 6px 9px; }
.bc-files { margin: 4px 0; }
.bc-composer { display: flex; align-items: flex-end; gap: 6px; margin-top: 6px; }
.bc-picked { margin-top: 4px; }

/* the Assistant's answer as it is written (assistant-stream.jsx): quiet, inherits its colours, a bounded height, no motion when it is reduced */
.as-live { margin: 8px 0 0; max-height: 15em; overflow-y: auto; overscroll-behavior: contain; }
.as-live__t { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.as-live__cue { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; opacity: .6; }
.as-live__cue i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: as-dot 1s infinite ease-in-out; }
@media (prefers-reduced-motion: reduce) { .as-live__cue i { animation: none; opacity: .6; } }

/* Personal folders for agents (folders.jsx). Motion: transform and opacity only, 120 to 220 ms, ease-out; none under reduced motion. */
.fo-layout { display: flex; gap: 18px; align-items: flex-start; }
.fo-main { flex: 1; min-width: 0; }
.fo-title { display: flex; align-items: center; gap: 10px; font-size: 18px; margin-bottom: 12px; }
.fo-rail { width: 240px; flex: none; position: sticky; top: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 8px 8px 10px; }
.fo-rail.collapsed { width: 56px; }
.fo-rail.collapsed .fo-lab, .fo-rail.collapsed em, .fo-rail.collapsed .fo-h, .fo-rail.collapsed .fo-hint, .fo-rail.collapsed .fo-more { display: none; }
.fo-collapse { display: block; margin: 0 0 4px auto; }
.fo-h { padding: 8px 10px 2px; }
.fo-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13.5px; border-radius: 10px; cursor: pointer; text-align: left; }
.fo-row:hover { background: var(--soft); }
.fo-row:focus-visible, .fo-more:focus-visible, .af-star:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.fo-row.on, .fo-frow.on .fo-row { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.fo-lab { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-row em { font-style: normal; font-size: 12px; opacity: .65; }
.fo-ico { width: 20px; display: inline-flex; justify-content: center; flex: none; }
.fo-frow { display: flex; align-items: center; }
.fo-frow .fo-row { flex: 1; min-width: 0; }
.fo-hint { padding: 4px 10px 8px; }
.fo-new { color: var(--muted); }
.fo-browse { margin-bottom: 12px; }
.fo-form { display: flex; flex-direction: column; gap: 10px; }
.fo-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.fo-sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; background: var(--fo); }
.fo-sw.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--card) inset; }
.fo-icb { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--fo); cursor: pointer; font-size: 16px; }
.fo-icb.on { border-color: var(--fo); background: color-mix(in srgb, var(--fo) 14%, var(--card)); }
.fo-list { display: flex; flex-direction: column; gap: 8px; }
.fo-opt { display: inline-flex; align-items: center; gap: 8px; }
.fo-c-blue { --fo: #3b6cf6; } .fo-c-green { --fo: #16a34a; } .fo-c-orange { --fo: #ea7a1a; } .fo-c-red { --fo: #dc2626; }
.fo-c-purple { --fo: #8b5cf6; } .fo-c-teal { --fo: #0d9488; } .fo-c-gold { --fo: #ca8a04; } .fo-c-grey { --fo: #6b7280; }
/* the folder tile: an icon with two card layers behind it that fan out a few pixels on hover (not on touch) */
.fo-ic { position: relative; width: 34px; height: 28px; display: inline-flex; flex: none; }
.fo-ic.small { width: 22px; height: 18px; }
.fo-ic i { position: absolute; inset: 3px 4px 0 4px; border-radius: 5px; background: color-mix(in srgb, var(--fo) 26%, var(--card)); border: 1px solid color-mix(in srgb, var(--fo) 40%, var(--line)); transition: transform .18s ease-out; }
.fo-ic i:nth-child(1) { transform: translate(-2px, 1px) rotate(-4deg); }
.fo-ic i:nth-child(2) { transform: translate(2px, 0) rotate(3deg); }
.fo-ic b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--fo); font-size: 15px; font-weight: 400; }
.fo-ic.small b { font-size: 12px; }
@media (hover: hover) { .fo-row:hover .fo-ic i:nth-child(1), .fo-frow:hover .fo-ic i:nth-child(1) { transform: translate(-4px, 1px) rotate(-8deg); } .fo-row:hover .fo-ic i:nth-child(2), .fo-frow:hover .fo-ic i:nth-child(2) { transform: translate(4px, 0) rotate(7deg); } }
/* the agent card with its star and ... menu */
.af-cardwrap { position: relative; animation: fo-in .2s ease-out both; animation-delay: calc(var(--i, 0) * 12ms); }
.af-cardwrap > .agent-card { width: 100%; height: 100%; transition: transform .12s ease-out; }
.af-cardwrap > .agent-card:hover { transform: translateY(-2px); }
.af-tools { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 2px; }
.af-star { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 16px; padding: 4px; border-radius: 8px; }
.af-star.on { color: #eab308; }
.af-star:hover { background: var(--soft); }
@keyframes fo-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .af-cardwrap, .fo-rail, .fo-ic i, .af-cardwrap > .agent-card, .fo-row { animation: none !important; transition: none !important; transform: none !important; } }
@media (max-width: 767px) { .fo-layout { display: block; } }

/* Real links (NavLink, lib.jsx): the cards, rows, pills and tabs that used to be buttons and divs are <a href="#/...">, so a middle click, Ctrl/Cmd+click
   and the right click menu work. They keep the look they had; an anchor only needs its underline and link colour taken off. */
a.agent-card, a.alert-row, a.building-pill, a.h2-path, a.h2-need, a.h2-agent, a.h2-row, a.mail-row, a.mail-thread-row, a.linked-card,
a.agent-card:hover, a.alert-row:hover, a.building-pill:hover, a.h2-path:hover, a.h2-need:hover, a.h2-agent:hover, a.h2-row:hover, a.mail-row:hover, a.mail-thread-row:hover, a.linked-card:hover { color: var(--ink); text-decoration: none; }
a.mail-row, a.mail-thread-row { display: block; }
a.linked-card { display: block; height: 100%; border-radius: 12px; }
a.linked-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
a.linked-card > .ant-card { height: 100%; }
.tabbar a.tab, .tabbar a.tab:hover { color: var(--muted); text-decoration: none; }
.tabbar a.tab.on, .tabbar a.tab.on:hover { color: var(--brand); }
a.wn-more, a.side-aria-link { text-decoration: none; }
a.wn-more:hover, a.side-aria-link:hover { text-decoration: underline; }
a.menu-link, a.menu-link:hover, a.tab-link, a.tab-link:hover { color: inherit; text-decoration: none; }
a.menu-link { display: block; }
.ant-tabs-tab a.tab-link { display: inline-block; }
.stretched-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.stretched-link:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.gal-card .gal-star { z-index: 3; }
.gal-card .gal-title .ant-btn { position: relative; z-index: 3; }

/* The icon and colour pickers on Edit agent (light edits). */
.look-picker { display: grid; gap: 8px; margin-bottom: 4px; }
.look-row { display: flex; flex-wrap: wrap; gap: 6px; }
.look-icon { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 17px; display: grid; place-items: center; cursor: pointer; }
.look-icon.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.look-color { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.look-color.on { box-shadow: 0 0 0 2px var(--brand); }
.look-icon:focus-visible, .look-color:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* The character in the 3D office (migration 142): four small figures with their names. */
.char-tile { width: 76px; padding: 6px 2px 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; justify-items: center; gap: 2px; cursor: pointer; font-size: 11px; line-height: 1.2; text-align: center; }
.char-tile.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.char-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.char-tile:disabled, .look-color:disabled { opacity: .5; cursor: default; }

/* Run view v2 (Part A): the task map, cards with live counts, what changed, the ending with its next step */
.live-steps.rv { width: 100%; max-width: 760px; gap: 6px; }
.rv-map { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 10px; background: var(--bg, #fff); border: 1px solid var(--line); font-size: 13px; }
.rv-map-row { display: flex; gap: 10px; line-height: 1.45; }
.rv-map-row > b { flex: none; width: 52px; color: var(--muted); font-weight: 600; }
.rv-map-row.sub { padding-left: 8px; color: var(--muted); }
.rv-row, .rv-card-head, .rv-call { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; }
.rv-row.bad, .rv-card.bad .rv-card-head, .rv-call.bad { color: var(--warm); }
.rv-row.waiting .rv-ic { color: var(--amber, #d48806); }
.rv-card.mixed .rv-ic { color: var(--amber, #d48806); }
.rv-ic { flex: none; width: 16px; color: var(--green); }
.rv-row.bad .rv-ic, .rv-card.bad .rv-ic { color: var(--warm); }
.rv-what { color: var(--muted); }
.rv-card-title { flex: 1 1 auto; min-width: 0; }
.rv-more { padding: 0 6px; height: auto; font-size: 12px; }
.rv-calls { margin: 4px 0 2px 24px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--muted); }
.rv-time { flex: none; min-width: 96px; font-variant-numeric: tabular-nums; }
.rv-changes { font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; gap: 1px; padding-left: 2px; }
.rv-changes > b { color: var(--text, inherit); }
.rv-changes .bad { color: var(--warm); }
.rv-end { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; font-size: 13px; background: rgba(19, 163, 107, .08); border: 1px solid rgba(19, 163, 107, .25); }
.rv-end.bad { background: rgba(212, 107, 8, .08); border-color: rgba(212, 107, 8, .3); }
.rv-end.bad .rv-ic { color: var(--warm); }
.rv-next { color: var(--muted); margin-top: 2px; }
.rv-row.quiet { color: var(--muted); font-style: italic; }
/* Run view v2 (Part B): actions on the cards, their results, the budget, the answer's source chips */
.rv-item { display: flex; flex-direction: column; }
.rv-acts { flex: none; display: inline-flex; align-items: center; gap: 2px; }
.rv-approve { height: 22px; padding: 0 10px; font-size: 12px; }
.rv-waitfor { font-size: 12px; color: var(--amber, #d48806); white-space: nowrap; }
.rv-act-result { margin: 2px 0 0 24px; font-size: 12px; color: var(--muted); }
.rv-act-result.bad { color: var(--warm); }
.rv-map-row .rv-act-result { margin-left: 8px; }
.rv-budget > span { color: var(--muted); }
.rv-budget.warn > span, .rv-budget.warn > b { color: var(--warm); font-weight: 600; }
.rv-focus, .rv-card.rv-focus { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.rv-focus-call { color: var(--text, inherit); font-weight: 600; }
/* Where the figures came from (5 Nov 2026): one numbered button per distinct step; a small numbered dot after a line only where the steps behind it change. Tokens only. */
.rv-src { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--line); font-size: 12.5px; }
.rv-src-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.rv-src-head > b { color: var(--muted); font-weight: 600; }
.rv-src-note { color: var(--muted); font-size: 12px; }
.rv-src-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rv-step { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 3px 10px 3px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: inherit; font: inherit; font-size: 12px; line-height: 20px; cursor: pointer; }
.rv-step:hover, .rv-step:focus-visible { border-color: var(--brand); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 25%, transparent); }
.rv-step-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-step-time { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.rv-dot { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; font: inherit; font-size: 11px; font-weight: 700; line-height: 1; font-style: normal; color: var(--color-on-accent); cursor: pointer;
  background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--brand) 55%, var(--color-on-accent)), var(--brand) 62%, color-mix(in srgb, var(--brand) 78%, var(--ink)));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--brand) 45%, transparent), inset 0 -1px 1px color-mix(in srgb, var(--ink) 25%, transparent); }
.rv-step.bad .rv-dot { background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--warm) 55%, var(--color-on-accent)), var(--warm) 62%, color-mix(in srgb, var(--warm) 78%, var(--ink))); }
.rv-dot:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.rv-src-row { display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.rv-src-text { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.rv-src-more { color: var(--muted); }
.rv-dots { flex: none; display: inline-flex; gap: 3px; align-items: center; min-height: 20px; }
.rv-dots .rv-dot { width: 18px; height: 18px; font-size: 10.5px; }
@media (pointer: coarse) { .rv-dots .rv-dot { width: 24px; height: 24px; font-size: 12px; } .rv-step { min-height: 36px; } }
.rv-sources-page { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }

/* ---------------------------------------------------------------- Conexa: the big-screen voice communicator of the CEO (conexa.jsx) */
/* Always the dark command-room look of its design, whatever the theme: it is a screen on a wall, read from 3 to 4 metres. */
.cx-root { --cx-ground: #05080d; --cx-panel: rgba(13,21,32,.86); --cx-line: #1d2a3a; --cx-ink: #e6eef5; --cx-mute: #8ea3b6; --cx-hue: #22d3c5;
  position: fixed; inset: 0; overflow: hidden; color: var(--cx-ink); color-scheme: dark;
  background: radial-gradient(ellipse at 50% 38%, rgba(34,211,197,.10), transparent 60%), radial-gradient(ellipse at 50% 100%, rgba(109,123,255,.10), transparent 55%), var(--cx-ground);
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, "Microsoft YaHei", "PingFang SC", sans-serif; }
.cx-plain { display: grid; place-items: center; }
.cx-plain .ant-result-title, .cx-plain .ant-result-subtitle { color: var(--cx-ink); }
.cx-hud { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) minmax(0, auto) auto; padding: clamp(14px, calc(2.2 * var(--ao-vw)), 32px); gap: 12px; }
/* Personal mode (until a CEO is verified on the screen): always visible, as the mode it is in, not as an alarm (W8 U3). */
.cx-unverified { position: relative; z-index: 2; justify-self: center; text-align: center; border: 1px solid var(--cx-line); color: var(--cx-mute); background: transparent;
  border-radius: 99px; padding: 2px 12px; font: 500 clamp(12px, calc(.85 * var(--ao-vw)), 14px) inherit; max-width: 100%; cursor: help; }   /* 159: small and quiet; what it means on hover or tap */
.cx-unverified:hover, .cx-unverified:focus-visible { color: var(--cx-ink); outline: none; border-color: var(--cx-mute); }
/* W8: the kiosk's settings sheet, and a load error in the app's error card. */
/* Review of W8: the sheet is dark like the kiosk (ConfigProvider darkAlgorithm in conexa.jsx), its rows split by the kiosk's own line colour. */
.cx-sheet .ant-drawer-content { background: #0d1520; color: #e6eef5; }
.cx-sheet .ant-drawer-header { border-bottom-color: #1d2a3a; }
.cx-sheet .cx-sheet-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 0; border-bottom: 1px solid #1d2a3a; }
.cx-sheet .cx-sheet-row .ant-slider { width: calc(100% - 40px); margin: 6px 20px 18px; }
.cx-sheet .small { color: #a9b8c8; }
.cx-sheet .cx-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-sheet .cx-lang { border: 1px solid #1d2a3a; background: transparent; color: #a9b8c8; border-radius: 99px; padding: 4px 12px; font: inherit; cursor: pointer; }
.cx-sheet .cx-lang.on { color: #05080d; background: #22d3c5; border-color: #22d3c5; }
/* The head row: the small way back (top left), the mode in the middle. */
.cx-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; position: relative; z-index: 2; }
.cx-back { justify-self: start; color: var(--cx-mute); font-size: clamp(13px, calc(1 * var(--ao-vw)), 16px); text-decoration: none; padding: 2px 4px; border-radius: 6px; }
.cx-back::before { content: '\2039\00a0'; }
.cx-back:hover, .cx-back:focus-visible { color: var(--cx-ink); outline: 1px solid var(--cx-line); }
.cx-langs-sum { font: inherit; cursor: pointer; color: var(--cx-ink); }
.cx-langs-sum:hover, .cx-langs-sum:focus-visible { border-color: var(--cx-hue); outline: none; }
/* What Ruyi is doing, as a sentence (not the spaced capitals of a state). */
.cx-state.cx-state-say { letter-spacing: .02em; text-transform: none; }
/* Talk is the one main control; the typed question is a quiet alternative under it. */
.cx-root .cx-talk { min-width: 180px; font-size: clamp(18px, calc(1.5 * var(--ao-vw)), 24px); height: auto; padding: 10px 28px; }
.cx-type.cx-quiet { width: min(560px, 100%); opacity: .9; }
.cx-type.cx-quiet .ant-input { background: transparent; }
.cx-sheet .cx-sheet-row:last-child { border-bottom: 0; }
.cx-load-error { display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(640px, calc(calc(100 * var(--ao-vw)) - 32px)); }
.cx-load-error > :first-child { width: 100%; }
.cx-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.cx-chip { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--cx-line); background: var(--cx-panel); padding: 6px 14px; border-radius: 99px;
  font-size: clamp(14px, calc(1.3 * var(--ao-vw)), 20px); color: var(--cx-mute); letter-spacing: .02em; }
.cx-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--cx-hue); box-shadow: 0 0 12px var(--cx-hue); flex: none; }
.cx-dot.off { background: var(--cx-mute); box-shadow: none; }
.cx-dot.red { background: #ff6b6b; box-shadow: 0 0 12px #ff6b6b; }
.cx-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 0; position: relative; z-index: 1; overflow: hidden; }
/* The orb takes what height is left (gate 157c: in Listening, with an answer or an error card below, its top was cut at 1366x768): everything
   else in the middle keeps its size, the orb alone shrinks, square, from its size per state down to nothing. */
.cx-mid > * { flex: 0 0 auto; max-width: 100%; }
.cx-mid > .cx-orb { flex: 0 1 auto; min-height: 0; aspect-ratio: 1 / 1; width: auto !important; }
/* A phone has no room for the orb beside the captions and the wrapped controls: there the kiosk scrolls and the orb keeps its size. */
@media (max-width: 640px) { .cx-hud { display: flex; flex-direction: column; overflow-y: auto; } .cx-hud > * { flex-shrink: 0; } .cx-mid { overflow: visible; min-height: auto; } .cx-mid > .cx-orb { flex-shrink: 0; } }
/* With a question and an answer on screen, the orb steps back so the captions have the room. */
.cx-p-thinking .cx-orb, .cx-p-answering .cx-orb, .cx-p-confirm .cx-orb, .cx-p-interrupted .cx-orb { width: min(calc(13 * var(--ao-vh)), calc(13 * var(--ao-vw))); height: min(calc(13 * var(--ao-vh)), calc(13 * var(--ao-vw))); }
.cx-p-thinking .cx-state, .cx-p-answering .cx-state, .cx-p-confirm .cx-state, .cx-p-interrupted .cx-state { font-size: clamp(18px, min(calc(2 * var(--ao-vw)), calc(3.6 * var(--ao-vh))), 34px); }
.cx-orb { width: min(calc(46 * var(--ao-vh)), calc(46 * var(--ao-vw))); height: min(calc(46 * var(--ao-vh)), calc(46 * var(--ao-vw))); display: block; }
.cx-p-asleep .cx-orb { width: min(calc(16 * var(--ao-vh)), calc(16 * var(--ao-vw))); height: min(calc(16 * var(--ao-vh)), calc(16 * var(--ao-vw))); opacity: .8; }
.cx-p-start .cx-orb, .cx-p-teach .cx-orb { width: min(calc(22 * var(--ao-vh)), calc(22 * var(--ao-vw))); height: min(calc(22 * var(--ao-vh)), calc(22 * var(--ao-vw))); }
.cx-state { font-size: clamp(22px, calc(2.4 * var(--ao-vw)), 40px); letter-spacing: .3em; text-transform: uppercase; color: var(--cx-hue); text-shadow: 0 0 16px var(--cx-hue); text-align: center; }
.cx-hint { font-size: clamp(22px, calc(2.2 * var(--ao-vw)), 36px); color: var(--cx-mute); }
.cx-since { margin-top: 10px; font-size: clamp(16px, calc(1.6 * var(--ao-vw)), 26px); color: #c9d6e2; text-align: center; max-width: 48ch; }
/* release 160h: the same line under an answer once it has been said (ready after an answer), inside the answer card in every look */
.cx-captions .cx-since.cx-since-after { margin-top: .5em; font-size: .78em; text-align: left; max-width: none; opacity: .9; }
.cx-panel { max-width: 860px; border: 1px solid var(--cx-line); background: var(--cx-panel); border-radius: 18px; padding: clamp(16px, calc(2 * var(--ao-vw)), 28px); display: grid; gap: 12px; }
.cx-panel .cx-title { color: var(--cx-ink); margin: 0; letter-spacing: .04em; }
.cx-panel .cx-lead { color: var(--cx-mute); font-size: clamp(16px, calc(1.3 * var(--ao-vw)), 20px); margin: 0; }
.cx-panel .cx-warn { color: #f2a14b; font-size: clamp(16px, calc(1.3 * var(--ao-vw)), 20px); margin: 0; }
/* conexa-tts: the CEO's own voice list (the Voice button), scrolls inside the panel on a short screen */
.cx-voices { max-height: calc(70 * var(--ao-vh)); overflow-y: auto; }
.cx-voice-list { display: grid; gap: 10px; }
.cx-voice-lang { display: grid; gap: 6px; color: var(--cx-ink); }
.cx-voice-lang .ct-people { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cx-voice-lang .ct-people > span { min-width: 220px; flex: 1 1 220px; }
.cx-my-voice { display: grid; gap: 6px; margin: 8px 0; }
.cx-my-voice .cx-voice-lang { color: inherit; }
/* Captions for 3 to 4 metres: 48 to 72 px, at most three lines, the newest sentences. */
/* 159: a long answer scrolls inside the captions; the question stays visible at their top (sticky); nothing is cut off above it. While a
   conversation is on screen the orb and the state line take only their own height and the captions get the rest of the screen. */
.cx-captions { display: grid; gap: 10px; justify-items: center; align-content: start; text-align: center; min-height: 3em; overflow-y: auto; scrollbar-width: thin; position: relative; z-index: 1; }
/* The pinned question band, with a thin solid strip under it (--cx-band-solid), and the answer's lines coming to rest whole just below it:
   each line is a snap point (scroll-snap-type on the captions, scroll-snap-align on .cx-line) with its margin the band's own height
   (--cx-band-h, measured by the kiosk) plus the strip. A line is never left half under the band and nothing fades in. */
.cx-root { --cx-band: #070b12; --cx-band-solid: 12px; }
.cx-captions .cx-you { position: sticky; top: 0; z-index: 1; width: 100%; max-width: none; padding: 4px max(16px, calc((100% - 40ch) / 2)) 10px; background: var(--cx-band); }
.cx-captions .cx-you::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: var(--cx-band-solid); pointer-events: none; background: var(--cx-band); }
.cx-captions { scroll-snap-type: y proximity; padding-bottom: var(--cx-end-pad, 0px); }
.cx-answer .cx-line { display: block; scroll-snap-align: start; scroll-margin-top: calc(var(--cx-band-h, 0px) + var(--cx-band-solid)); }   /* about one and a half answer lines: solid where the tails of a line scrolled under the band would be, then fading, so no cut edge shows */
.cx-p-listening .cx-hud, .cx-p-thinking .cx-hud, .cx-p-answering .cx-hud, .cx-p-confirm .cx-hud, .cx-p-interrupted .cx-hud { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.cx-p-listening .cx-mid, .cx-p-thinking .cx-mid, .cx-p-answering .cx-mid, .cx-p-confirm .cx-mid, .cx-p-interrupted .cx-mid { overflow: visible; }
.cx-captions.hidden { display: none; }
.cx-you { font-size: clamp(18px, min(calc(1.9 * var(--ao-vw)), calc(3.6 * var(--ao-vh))), 34px); color: var(--cx-mute); max-width: 40ch; }
.cx-answer { font-weight: 600; line-height: 1.18; max-width: min(34ch, calc(92 * var(--ao-vw))); white-space: pre-line; }
/* 159: a structured answer (paragraphs, a list per department) reads as a list: left aligned, a little lighter, wider lines */
.cx-answer.cx-answer-list { text-align: left; font-weight: 500; line-height: 1.32; max-width: min(60ch, calc(92 * var(--ao-vw))); }
.cx-answer.cx-size-l { font-size: clamp(30px, min(calc(3.8 * var(--ao-vw)), calc(6 * var(--ao-vh))), 72px); }
.cx-answer.cx-size-m { font-size: clamp(24px, min(calc(2.7 * var(--ao-vw)), calc(4.6 * var(--ao-vh))), 50px); max-width: 44ch; }
.cx-answer.cx-size-s { font-size: clamp(20px, min(calc(2 * var(--ao-vw)), calc(3.6 * var(--ao-vh))), 36px); max-width: 56ch; }
.cx-quiet summary { cursor: pointer; color: var(--cx-mute); }
.cx-quiet .cx-quiet-show { text-decoration: underline; }
.cx-quiet[open] .cx-quiet-show { display: none; }
.cx-unsaid { color: inherit; font-weight: 400; }   /* release 160 (e2e B1): what is not said yet keeps the full colour, in lighter type than what was said */
.cx-answer.cx-answer-list .cx-unsaid { font-weight: 300; }
.cx-confirm { display: grid; gap: 8px; justify-items: center; border: 1px solid #e8b75a; border-radius: 16px; padding: 16px 22px; max-width: 900px;
  background: rgba(13,21,32,.94); box-shadow: 0 0 40px rgba(232,183,90,.18); font-size: clamp(18px, calc(1.5 * var(--ao-vw)), 26px); }
.cx-confirm b { color: #e8b75a; font-size: 1.25em; }
.cx-coach { margin: 0; padding: 0 0 0 1.4em; text-align: left; max-width: 60ch; font-size: clamp(18px, calc(1.5 * var(--ao-vw)), 26px); display: grid; gap: 6px; }
.cx-coach span { color: var(--cx-mute); }
.cx-card { display: grid; gap: 10px; justify-items: center; border: 1px solid var(--cx-hue); border-radius: 16px; padding: 16px 22px; max-width: min(900px, 100%);
  background: rgba(13,21,32,.94); font-size: clamp(16px, calc(1.3 * var(--ao-vw)), 22px); }
.cx-card-rule { font-weight: 600; }
.cx-card-note { color: var(--cx-mute); font-size: .85em; }
.cx-card-light { background: #fff; color: #1f2933; text-align: left; justify-items: stretch; font-size: 15px; }
.cx-bottom { display: grid; gap: 10px; justify-items: center; position: relative; z-index: 1; }
.cx-privacy { color: var(--cx-mute); font-size: clamp(13px, calc(1.1 * var(--ao-vw)), 17px); text-align: center; }
.cx-controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* Review of W8: white on the main buttons at least 4.5:1 (antd's #1677ff is 4.1:1). */
.cx-root .ant-btn-primary:not(:disabled):not(.ant-btn-dangerous), .cx-sheet .ant-btn-primary:not(:disabled), .cx-guide-root .ant-btn-primary:not(:disabled) { background: #0958d9; }
.cx-root .ant-btn-primary:not(:disabled):not(.ant-btn-dangerous):hover, .cx-sheet .ant-btn-primary:not(:disabled):hover, .cx-guide-root .ant-btn-primary:not(:disabled):hover { background: #0b4fc0; }
.cx-root .ant-btn-primary.ant-btn-dangerous:not(:disabled) { background: #c62828; border-color: #c62828; color: #fff; }   /* release 160: 5.6:1 (antd's red was 3.3:1) */
.cx-root .ant-btn-primary.ant-btn-dangerous:not(:disabled):hover { background: #a91f1f; border-color: #a91f1f; }
.cx-root .ant-btn-default { background: var(--cx-panel); border-color: var(--cx-line); color: var(--cx-ink); }
.cx-root .ant-btn-default:not(:disabled):hover { border-color: var(--cx-hue); color: var(--cx-hue); }
.cx-root .ant-btn-default:disabled { color: #7d8fa3; }
.cx-root .ant-btn[aria-pressed="true"] { border-color: var(--cx-hue); color: var(--cx-hue); }
.cx-type { width: min(720px, 100%); display: flex; gap: 8px; }
.cx-type .ant-input { flex: 1 1 auto; min-width: 0; }
.cx-type .ant-btn:disabled { color: var(--cx-mute); border-color: var(--cx-line); background: transparent; }
.cx-type .ant-input { background: var(--cx-panel); border-color: var(--cx-line); color: var(--cx-ink); }
.cx-type .ant-input::placeholder { color: var(--cx-mute); }
.cx-note { color: #f2a14b; font-size: clamp(14px, calc(1.2 * var(--ao-vw)), 19px); text-align: center; max-width: 900px; }
/* The screen while nobody is talking to it: the office, dimmed, and company-wide counts only. */
.cx-idle { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.cx-idle .cx-office-art { position: absolute; width: min(calc(92 * var(--ao-vw)), calc(150 * var(--ao-vh))); opacity: .12; filter: invert(1) hue-rotate(180deg) saturate(.6); }
.cx-clock { font-size: clamp(40px, calc(9 * var(--ao-vh)), 120px); font-weight: 300; letter-spacing: .06em; color: rgba(230,238,245,.55); line-height: 1.05; }
.cx-idle.dark { background: #000; }
.cx-clock.dark { color: rgba(230,238,245,.18); }
.cx-counts { margin-top: calc(2 * var(--ao-vh)); display: flex; gap: clamp(20px, calc(4 * var(--ao-vw)), 72px); flex-wrap: wrap; justify-content: center; }
.cx-count { display: grid; justify-items: center; }
.cx-count b { font-size: clamp(32px, calc(7 * var(--ao-vh)), 76px); font-weight: 600; color: rgba(230,238,245,.7); line-height: 1.1; }
.cx-count span { font-size: clamp(15px, calc(1.4 * var(--ao-vw)), 22px); color: var(--cx-mute); }
.cx-p-asleep .cx-mid { align-content: center; gap: 4px; }
.cx-settings { display: grid; gap: 14px; }
.cx-set-sub { display: block; margin-top: 8px; }
/* Review of W8: the administrator's card in sections, and the voice catalogue as a compact list. */
.cx-set-sec { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--ant-color-border-secondary, #e5e7eb); }
.cx-set-sec:first-child { border-top: 0; padding-top: 0; }
.cx-set-sec > h4 { margin: 0; font-size: 15px; font-weight: 600; }
.cx-set-pair { display: grid; gap: 6px; justify-items: start; }
.cx-voice-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cx-voice-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 320px; overflow-y: auto; }
.cx-voice-rows > li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.cx-voice-name { flex: 1 1 auto; min-width: 0; }
.cx-in-use { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--ant-color-primary, #1677ff); }
.cx-voices .cx-voice-rows > li, .cx-voices .cx-voice-name { color: var(--cx-ink); }
.cx-set-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cx-set-grid > div { display: grid; gap: 6px; align-content: start; min-width: 0; }
@media (max-width: 640px) { .cx-answer { font-size: 30px; } .cx-you { font-size: 18px; } }
/* Waiting for a confirmation: the gold panel carries the message, so the answer above it is smaller. */
.cx-p-confirm .cx-answer { font-size: clamp(26px, calc(2.2 * var(--ao-vw)), 40px); }
.cx-p-confirm .cx-orb { width: min(calc(18 * var(--ao-vh)), calc(18 * var(--ao-vw))); height: min(calc(18 * var(--ao-vh)), calc(18 * var(--ao-vw))); }
.cx-p-confirm .cx-state { display: none; }   /* the gold panel says it */
/* A repeat taught to a Manager Agent (chat.jsx RepeatCard, release 156) */
.repeat-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); background: var(--card); max-width: 640px; }
.repeat-head { font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.repeat-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px; align-items: baseline; overflow-wrap: anywhere; }
.repeat-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 560px) { .repeat-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ---- ONE error card for the chat-first screens (errorcard.jsx, release 156): outlined in the area that failed, plain words, theme tokens */
.ao-errcard { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--color-error, #c8361a); border-left-width: 4px; background: var(--color-error-soft, #fff1ec); color: var(--color-text-primary, inherit); overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.ao-errcard b { font-weight: 600; }
.ao-errcard-what .anticon { color: var(--color-error, #c8361a); }
.ao-errcard-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.ao-errcard.compact { padding: 6px 10px; font-size: 13px; }
/* Conexa (Ruyi), 16 Oct 2026: the first-run guide on the kiosk, and the way in on the CEO Agent's pages (switch-named CEO people only). */
/* The first-run guide is an overlay (antd Modal), so it never covers the start card at any size. */
.cx-guide { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: clamp(17px, calc(1.4 * var(--ao-vw)), 24px); line-height: 1.45; }
.cx-guide-root .ant-modal-mask { background: rgba(5, 8, 13, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.cx-guide-modal .ant-modal-content, .cx-guide-modal .ant-modal-header { background: #0d1520; color: #e6eef5; }
.cx-guide-modal .ant-modal-content { border: 1px solid #1d2a3a; }
.cx-guide-modal .ant-modal-title { color: #e6eef5; font-size: clamp(18px, calc(1.5 * var(--ao-vw)), 26px); }
.cx-failure { width: min(860px, 100%); text-align: left; font-size: clamp(16px, calc(1.3 * var(--ao-vw)), 22px); }
.cx-failure .ao-errcard { background: rgba(200, 54, 26, .14); color: var(--cx-ink); }
/* release 160c: one plain line and Retry, in every look (the details go to the console only) */
.cx-failure { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; text-align: center; }
.cx-failure-line { color: var(--cx-ink, #fff); }
.cx-entry { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cx-invite { color: var(--ao-brand, #1677ff); font-weight: 600; white-space: nowrap; animation: cx-invite-in 3s ease-in-out both; text-shadow: 0 0 0 transparent; }
.cx-invite:hover { text-decoration: underline; }
@keyframes cx-invite-in { 0% { opacity: 0; text-shadow: 0 0 0 transparent; } 15% { opacity: 1; text-shadow: 0 0 10px rgba(34, 211, 197, .55); } 70% { opacity: 1; text-shadow: 0 0 0 transparent; } 100% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .cx-invite { animation: none; } }
.cx-langs { gap: 6px; }
.cx-lang { border: 1px solid var(--cx-line); background: transparent; color: var(--cx-mute); border-radius: 99px; padding: 2px 10px; font: inherit; cursor: pointer; }
.cx-lang.on { color: var(--cx-ground); background: var(--cx-hue); border-color: var(--cx-hue); }
.cx-lang:focus-visible { outline: 2px solid var(--cx-hue); outline-offset: 2px; }

/* ---------------------------------------------------------------- Ruyi look Jarvis (release 160; design-notes/ruyi-jarvis/spec.md). Everything here is under
   .cx-jarvis, so the Classic look is untouched. --j is one design pixel of the 1920x1080 wall (2 on a 4K wall, about 0.7 on a laptop).
   Text sits only on the void, the glass or the raised card, never over the bright core; every text colour is at least 4.5:1 on its ground. */
.cx-root.cx-jarvis { --j: min(calc(calc(100 * var(--ao-vw)) / 1920), calc(calc(100 * var(--ao-vh)) / 1080)); --j-void: #02060b; --j-glass: rgba(10, 26, 40, .9); --j-raised: #0f2434; --j-line: #274454;
  --j-edge: rgba(103, 232, 249, .2); --j-cyan: #67e8f9; --j-gold: #e2b96b; --j-amber: #ffca62; --j-red: #ff6f7d; --j-ink: #f1f7fa; --j-ink2: #b7c8d2; --j-mute: #91a7b4;
  --j-hue: var(--j-cyan); --cx-band: var(--j-raised); --cx-ink: var(--j-ink); --cx-mute: var(--j-mute); --cx-line: var(--j-line); --cx-panel: var(--j-glass);
  background: radial-gradient(circle at 50% 43%, #0b2838 0%, #06111c 34%, #02060b 78%);
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-variant-numeric: tabular-nums; }
.cx-jarvis.cx-j-wake, .cx-jarvis.cx-j-thinking, .cx-jarvis.cx-j-speaking { --j-hue: var(--j-gold); }
.cx-jarvis.cx-j-error { --j-hue: var(--j-red); }
.cx-jarvis.cx-j-stopped, .cx-jarvis.cx-j-muted { --j-hue: var(--j-mute); }
/* The horizon grid: one still plane, very faint, vanishing at 54% of the height, fading before the panels (spec 4, 12.3: still). */
.cx-j-bg { position: absolute; inset: 54% -20% 0; pointer-events: none; opacity: .14; transform: perspective(calc(70 * var(--ao-vh))) rotateX(62deg); transform-origin: 50% 0;
  background: repeating-linear-gradient(90deg, var(--j-cyan) 0 1px, transparent 1px calc(6 * var(--ao-vh))), repeating-linear-gradient(0deg, var(--j-cyan) 0 1px, transparent 1px calc(6 * var(--ao-vh)));
  -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 38%, #000 62%, transparent 80%); mask-image: linear-gradient(90deg, transparent 20%, #000 38%, #000 62%, transparent 80%); }
.cx-jarvis .cx-idle .cx-office-art { display: none; }
/* Layout (spec 2): the wall, header and status line, the pulse panels left and right of the stage, the controls and the language row below. */
.cx-jarvis .cx-hud { padding: calc(3.3 * var(--ao-vh)) calc(3 * var(--ao-vw)); gap: calc(var(--j) * 10) calc(2.5 * var(--ao-vw));
  grid-template-columns: calc(15.5 * var(--ao-vw)) minmax(0, 1fr) calc(15.5 * var(--ao-vw)); grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "head head head" "top top top" "left mid right" "bottom bottom bottom"; }
.cx-jarvis .cx-head { grid-area: head; } .cx-jarvis .cx-top { grid-area: top; } .cx-jarvis .cx-mid { grid-area: mid; } .cx-jarvis .cx-bottom { grid-area: bottom; }
.cx-jarvis .cx-captions { grid-area: mid; }
.cx-jarvis .cx-captions:empty { display: none; }
.cx-jarvis .cx-j-left { grid-area: left; } .cx-jarvis .cx-j-right { grid-area: right; }
/* With a question or an answer on screen the stage moves aside and the answer card takes the right of it, never over the right panel. */
.cx-jarvis .cx-hud:has(> .cx-captions:not(.hidden):not(:empty)) { grid-template-columns: calc(15.5 * var(--ao-vw)) minmax(0, .9fr) minmax(0, 1fr) calc(15.5 * var(--ao-vw));
  grid-template-areas: "head head head head" "top top top top" "left mid cap right" "bottom bottom bottom bottom"; }
.cx-jarvis .cx-hud:has(> .cx-captions:not(.hidden):not(:empty)) .cx-captions { grid-area: cap; }
/* Header: Agent Office back (left), the notice (centre), Settings (right). */
.cx-jarvis .cx-back, .cx-j-settings { font-size: max(13px, calc(var(--j) * 22)); color: var(--j-ink2); }
.cx-j-settings { justify-self: end; background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 4px 10px; cursor: pointer; font-family: inherit; min-height: 44px; }
.cx-j-settings:hover, .cx-j-settings:focus-visible, .cx-jarvis .cx-back:focus-visible { color: var(--j-ink); border-color: var(--j-edge); outline: none; }
.cx-jarvis .cx-unverified { color: var(--j-amber); border: 1px solid rgba(255, 202, 98, .55); background: rgba(255, 202, 98, .08); border-radius: 10px;
  font-size: max(13px, calc(var(--j) * 18)); padding: calc(var(--j) * 6) calc(var(--j) * 18); letter-spacing: .02em; }
.cx-jarvis .cx-unverified:hover, .cx-jarvis .cx-unverified:focus-visible { color: #ffe0a0; border-color: var(--j-amber); }
.cx-jarvis .cx-top { justify-content: center; }
.cx-jarvis .cx-chip { font-size: max(12px, calc(var(--j) * 17)); background: var(--j-glass); border-color: var(--j-line); color: var(--j-ink2); padding: calc(var(--j) * 4) calc(var(--j) * 14); }
.cx-jarvis .cx-dot { width: max(10px, calc(var(--j) * 12)); height: max(10px, calc(var(--j) * 12)); background: var(--j-cyan); box-shadow: 0 0 8px rgba(103, 232, 249, .6); }
/* The name, over the stage. */
.cx-j-name { display: flex; gap: .45em; align-items: baseline; color: var(--j-ink); line-height: 1.1; font-size: max(22px, calc(var(--j) * 42)); font-weight: 400; letter-spacing: .06em; }
.cx-j-name b { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.cx-j-name span { color: var(--j-gold); }
/* The stage: as big as the room lets it be; it alone shrinks. */
.cx-jarvis .cx-mid { gap: calc(var(--j) * 10); justify-content: center; }
.cx-jarvis .cx-mid > .cx-orb, .cx-jarvis.cx-p-start .cx-mid > .cx-orb, .cx-jarvis.cx-p-teach .cx-mid > .cx-orb, .cx-jarvis.cx-p-asleep .cx-mid > .cx-orb,
.cx-jarvis.cx-p-thinking .cx-mid > .cx-orb, .cx-jarvis.cx-p-answering .cx-mid > .cx-orb, .cx-jarvis.cx-p-confirm .cx-mid > .cx-orb, .cx-jarvis.cx-p-interrupted .cx-mid > .cx-orb {
  width: 100% !important; height: calc(66 * var(--ao-vh)); max-height: calc(66 * var(--ao-vh)); aspect-ratio: auto; flex: 0 1 auto; min-height: 120px; opacity: 1; }
.cx-jarvis.cx-p-start .cx-mid > .cx-orb, .cx-jarvis.cx-p-offer .cx-mid > .cx-orb, .cx-jarvis.cx-p-teach .cx-mid > .cx-orb { height: calc(40 * var(--ao-vh)); }
.cx-jarvis.cx-p-asleep .cx-mid > .cx-orb { height: calc(30 * var(--ao-vh)); opacity: .85; }
/* The CSS orb: without WebGL, or when the GPU drops the core (the conversation goes on). */
.cx-j-cssorb { position: relative; display: grid; place-items: center; }
.cx-j-cssorb::before { content: ''; width: min(56%, calc(60 * var(--ao-vh))); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #d8faff 0%, color-mix(in srgb, var(--j-hue) 75%, transparent) 14%, rgba(103, 232, 249, .16) 52%, transparent 72%);
  box-shadow: 0 0 calc(var(--j) * 30) rgba(103, 232, 249, .25); }
.cx-j-cssorb i { position: absolute; aspect-ratio: 1; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--j-hue) 55%, transparent); }
.cx-j-cssorb i:nth-child(1) { width: min(64%, calc(70 * var(--ao-vh))); } .cx-j-cssorb i:nth-child(2) { width: min(72%, calc(78 * var(--ao-vh))); border-style: dashed; } .cx-j-cssorb i:nth-child(3) { width: min(80%, calc(88 * var(--ao-vh))); border-color: rgba(226, 185, 107, .5); }
/* The status pill and the line under it (the honest progress line, else the key hint). */
.cx-j-status { display: grid; justify-items: center; gap: calc(var(--j) * 8); }
.cx-j-pill { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-width: max(170px, calc(var(--j) * 230)); padding: calc(var(--j) * 8) calc(var(--j) * 28);
  border-radius: 999px; border: 1px solid var(--j-hue); background: var(--j-glass); color: var(--j-ink); font-size: max(16px, calc(var(--j) * 24)); font-weight: 500; letter-spacing: .10em;
  text-shadow: 0 0 6px rgba(103, 232, 249, .18); box-shadow: 0 0 calc(var(--j) * 14) color-mix(in srgb, var(--j-hue) 22%, transparent); }
.cx-j-pill i { width: .5em; height: .5em; border-radius: 50%; background: var(--j-hue); flex: none; }
.cx-j-progress { color: var(--j-ink2); font-size: max(13px, calc(var(--j) * 18)); text-align: center; max-width: calc(34 * var(--ao-vw)); min-height: 1.3em; }
.cx-jarvis.cx-j-error .cx-j-pill { color: #ffd6da; }
/* The company pulse: two glass panels, two tiles each, value above label. */
.cx-j-side { align-self: center; display: grid; grid-template-rows: auto 1fr 1fr; gap: calc(var(--j) * 16); max-height: calc(58 * var(--ao-vh)); min-height: 0;
  padding: calc(var(--j) * 22) calc(var(--j) * 24); border-radius: 18px; border: 1px solid var(--j-edge); background: var(--j-glass); box-shadow: 0 0 8px rgba(103, 232, 249, .12); }
.cx-j-side h3 { margin: 0; color: var(--j-mute); font-size: max(12px, calc(var(--j) * 18)); font-weight: 500; letter-spacing: .10em; text-transform: uppercase; }
.cx-j-tile { display: grid; align-content: center; gap: calc(var(--j) * 6); min-width: 0; padding-top: calc(var(--j) * 14); border-top: 1px solid var(--j-line); }
.cx-j-tile b { font-size: max(24px, calc(var(--j) * 44)); font-weight: 600; line-height: 1.1; overflow-wrap: anywhere; animation: cx-j-fade .18s ease-out; }
.cx-j-tile span { color: var(--j-ink2); font-size: max(14px, calc(var(--j) * 24)); line-height: 1.25; }
.cx-j-tile.gold b { color: var(--j-gold); } .cx-j-tile.amber b { color: var(--j-amber); } .cx-j-tile.cyan b { color: var(--j-cyan); } .cx-j-tile.time b { color: var(--j-ink); }
.cx-j-tile b.none { font-size: max(18px, calc(var(--j) * 30)); color: var(--j-mute); font-weight: 500; }
@keyframes cx-j-fade { from { opacity: 0; } }
/* The answer card: the question pinned (the 159 band, now the card's own colour), the answer under it by whole lines. Nothing animated behind it. */
.cx-jarvis .cx-captions { align-self: center; max-height: 100%; justify-items: stretch; text-align: left; gap: calc(var(--j) * 12); background: var(--j-raised);
  border: 1px solid var(--j-edge); border-radius: 18px; padding: 0 calc(var(--j) * 32) calc(var(--j) * 24 + var(--cx-end-pad, 0px)); box-shadow: 0 0 8px rgba(103, 232, 249, .12); scrollbar-color: var(--j-line) transparent; }
.cx-jarvis .cx-captions .cx-you { padding: calc(var(--j) * 22) 0 calc(var(--j) * 12); color: var(--j-ink); font-size: max(17px, calc(var(--j) * 30)); font-weight: 500; line-height: 1.3; max-width: none;
  border-bottom: 1px solid var(--j-line); }
.cx-j-eyebrow { display: block; color: var(--j-mute); font-size: max(12px, calc(var(--j) * 16)); letter-spacing: .10em; text-transform: uppercase; margin-bottom: calc(var(--j) * 6); font-weight: 500; }
.cx-jarvis .cx-answer, .cx-jarvis .cx-answer.cx-answer-list, .cx-jarvis .cx-answer.cx-size-s { font-size: max(16px, calc(var(--j) * 26)); line-height: 1.55; font-weight: 500; max-width: none; color: var(--j-ink); text-align: left; }
.cx-jarvis .cx-answer.cx-size-l { font-size: max(19px, calc(var(--j) * 32)); line-height: 1.45; }
.cx-jarvis .cx-answer.cx-size-m { font-size: max(17px, calc(var(--j) * 28)); max-width: none; }
.cx-jarvis .cx-unsaid, .cx-jarvis .cx-answer.cx-answer-list .cx-unsaid { color: var(--j-ink2); font-weight: 400; }   /* 9.2:1 on the card */
.cx-jarvis .cx-confirm { background: var(--j-glass); border-color: var(--j-gold); font-size: max(15px, calc(var(--j) * 22)); max-width: none; }
.cx-jarvis .cx-confirm b { color: var(--j-gold); }
.cx-jarvis.cx-p-confirm .cx-state { display: none; }
/* Start, Teach and the voice list: raised glass. */
.cx-jarvis .cx-panel { background: var(--j-raised); border-color: var(--j-edge); box-shadow: 0 0 8px rgba(103, 232, 249, .12); max-width: min(860px, 100%); }
.cx-jarvis .cx-panel .cx-lead { color: var(--j-ink2); }
.cx-jarvis .cx-panel .cx-warn, .cx-jarvis .cx-note { color: var(--j-amber); }
/* Controls: Talk and Stop always visible (spec 12.1), the typed question quiet under them, the language row. Targets at least 44 px. */
.cx-jarvis .cx-bottom { gap: calc(var(--j) * 10); }
.cx-jarvis .ant-btn { min-height: 44px; font-size: max(15px, calc(var(--j) * 22)); border-radius: 999px; }
.cx-jarvis .ant-btn-primary:not(:disabled):not(.ant-btn-dangerous) { background: #0b6e86; border: 1px solid var(--j-cyan); box-shadow: 0 0 calc(var(--j) * 16) rgba(103, 232, 249, .25); }
.cx-jarvis .ant-btn-primary:not(:disabled):not(.ant-btn-dangerous):hover { background: #0a5f74; }
.cx-jarvis .ant-btn-default { background: var(--j-glass); border-color: var(--j-line); color: var(--j-ink); }
.cx-jarvis .cx-talk { min-width: max(160px, calc(var(--j) * 200)); }
.cx-jarvis .cx-type .ant-input { background: var(--j-glass); border-color: var(--j-line); color: var(--j-ink); font-size: max(14px, calc(var(--j) * 18)); }
.cx-jarvis .cx-type .ant-input::placeholder { color: var(--j-mute); }
.cx-jarvis .cx-privacy { color: var(--j-mute); font-size: max(12px, calc(var(--j) * 16)); }
.cx-j-langs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: calc(var(--j) * 10); background: transparent; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.cx-j-langs-say { color: var(--j-mute); font-size: max(12px, calc(var(--j) * 16)); letter-spacing: .06em; }
.cx-j-lang { display: inline-flex; align-items: center; min-height: 44px; padding: 0 calc(var(--j) * 22); border-radius: 999px; border: 1px solid var(--j-line); background: var(--j-glass);
  color: var(--j-ink); font-size: max(15px, calc(var(--j) * 22)); }
.cx-j-lang.first { border-color: var(--j-gold); color: #f3dcae; }
.cx-j-langs:hover .cx-j-lang, .cx-j-langs:focus-visible .cx-j-lang { border-color: var(--j-cyan); }
.cx-j-langs:focus-visible { outline: 3px solid var(--j-cyan); outline-offset: 3px; border-radius: 12px; }
.cx-jarvis :focus-visible { outline-color: var(--j-cyan); }
/* The screen while nobody is talking to it: the time, the hint and the company-wide counts, quieter. */
.cx-jarvis .cx-clock { color: rgba(241, 247, 250, .6); font-weight: 300; }
.cx-jarvis .cx-count b { color: var(--j-ink2); }
.cx-jarvis .cx-hint, .cx-jarvis .cx-count span { color: var(--j-mute); }
/* Laptop (spec 2): below 1440 px wide or a squarer screen. With an answer the panels become one rail over the stage and the card. */
@media (max-width: 1439px), (max-aspect-ratio: 8/5) {
  .cx-jarvis .cx-hud { padding: calc(2.5 * var(--ao-vh)) calc(2.5 * var(--ao-vw)); grid-template-columns: calc(17 * var(--ao-vw)) minmax(0, 1fr) calc(17 * var(--ao-vw)); }
  .cx-jarvis .cx-hud:has(> .cx-captions:not(.hidden):not(:empty)) { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto; grid-template-areas: "head head head" "top top top" "left left right" "mid cap cap" "bottom bottom bottom"; }
  .cx-jarvis .cx-hud:has(> .cx-captions:not(.hidden):not(:empty)) .cx-j-side { grid-template-rows: none; grid-template-columns: auto 1fr 1fr; align-items: center; max-height: none; padding: 8px 16px; }
  .cx-jarvis .cx-hud:has(> .cx-captions:not(.hidden):not(:empty)) .cx-j-tile { border-top: 0; padding-top: 0; }
  .cx-jarvis .cx-hud:has(> .cx-captions:not(.hidden):not(:empty)) .cx-j-tile b { font-size: max(20px, calc(var(--j) * 32)); }
  .cx-jarvis .cx-hud:has(> .cx-captions:not(.hidden):not(:empty)) .cx-j-name { display: none; }
}
/* Below 1100 px: one column, the card under the stage. */
@media (max-width: 1099px) {
  .cx-jarvis .cx-hud, .cx-jarvis .cx-hud:has(> .cx-captions:not(.hidden):not(:empty)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "head head" "top top" "left right" "mid mid" "cap cap" "bottom bottom"; }
  .cx-jarvis .cx-j-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; max-height: none; padding: 8px 12px; }
  .cx-jarvis .cx-j-side h3 { display: none; }
  .cx-jarvis .cx-hud:has(> .cx-captions:not(.hidden):not(:empty)) .cx-mid > .cx-orb { height: calc(27 * var(--ao-vh)); }
}
@media (max-width: 640px) { .cx-jarvis .cx-j-side { display: none; } }
/* Reduced motion: nothing moves; state colours and a still glow only. */
@media (prefers-reduced-motion: reduce) { .cx-jarvis *, .cx-jarvis *::before { animation: none !important; transition: none !important; } }
/* Start, Teach and the voice list need the room on a laptop: the name steps out, the stage gets smaller, Teach the wake word is a normal large button. */
.cx-jarvis .cx-mid { justify-content: safe center; }
.cx-jarvis .cx-panel .ant-btn-lg { font-size: max(16px, calc(var(--j) * 24)) !important; padding: 8px 28px !important; height: auto !important; }
@media (max-width: 1439px), (max-aspect-ratio: 8/5) { .cx-jarvis .cx-mid:has(> .cx-panel) .cx-j-name { display: none; } .cx-jarvis .cx-mid:has(> .cx-panel) > .cx-orb { min-height: 90px; } }
/* Controls grow with the wall (4K): antd's fixed heights would leave the words larger than their buttons. */
.cx-jarvis .ant-btn { height: auto; padding: max(6px, calc(var(--j) * 8)) max(15px, calc(var(--j) * 24)); line-height: 1.3; }
.cx-jarvis .cx-type, .cx-jarvis .cx-type.cx-quiet { width: min(max(420px, calc(var(--j) * 720)), 100%); }
.cx-jarvis .cx-type .ant-input { padding: max(6px, calc(var(--j) * 10)) max(11px, calc(var(--j) * 16)); }
/* ---------------------------------------------------------------- Ruyi look Jarvis Gold (160a-2, the third look; ChatGPT's picture
   design-notes/ruyi-jarvis/v2-chatgpt-design-full.png, spec.md section 13). Everything here is under .cx-gold (the Gold root), so Classic and Jarvis are untouched.
   The room and the sphere are the painted plate (/ruyi-plate.webp, full-bleed, cover); the live layer (ws-gold.js) sits exactly on the
   painted sphere (centre 46.6% x, 41.4% y of the plate, 23.3% of its width across); the page's parts sit where the picture has them, in percent
   of the screen. --j is one design pixel of the 1920x1080 wall (2 on a 4K wall, about 0.7 on a laptop). Text sits on glass, a button or the
   plate's dark sky, never on the bright sphere or the floor's arcs; every text colour is at least 4.5:1 on its ground. */
.cx-root.cx-gold { --j: min(calc(calc(100 * var(--ao-vw)) / 1920), calc(calc(100 * var(--ao-vh)) / 1080)); --j-void: #02060b; --j-glass: rgba(6, 18, 32, .88); --j-raised: #0b1d2e; --j-line: rgba(103, 232, 249, .16);
  --j-edge: rgba(103, 232, 249, .38); --j-cyan: #67e8f9; --j-gold: #e9bf6e; --j-amber: #ffca62; --j-red: #ff6f6f; --j-blue: #79a8ff; --j-ink: #f1f7fa; --j-ink2: #b7c8d2; --j-mute: #91a7b4;
  --j-hue: var(--j-cyan); --cx-band: var(--j-raised); --cx-ink: var(--j-ink); --cx-mute: var(--j-mute); --cx-line: var(--j-line); --cx-panel: var(--j-glass);
  /* the plate, as background-size: cover centres it: its width and height on this screen, the painted sphere's diameter */
  --j-iw: max(calc(100 * var(--ao-vw)), calc(calc(100 * var(--ao-vh)) * 1672 / 941)); --j-ih: max(calc(100 * var(--ao-vh)), calc(calc(100 * var(--ao-vw)) * 941 / 1672)); --j-d: calc(var(--j-iw) * .233);
  background: #02060b;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-variant-numeric: tabular-nums; }
.cx-gold.cx-j-wake, .cx-gold.cx-j-thinking, .cx-gold.cx-j-speaking { --j-hue: var(--j-gold); }
.cx-gold.cx-j-error { --j-hue: var(--j-red); }
.cx-gold.cx-j-stopped, .cx-gold.cx-j-muted { --j-hue: var(--j-mute); }
.cx-gold .cx-j-icon { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; }
/* The painted room (the live layer draws the faint bokeh drifting over the far city). */
.cx-gold .cx-j-bg { position: absolute; inset: 0; pointer-events: none; background: url(/ruyi-plate.webp) center / cover no-repeat, #02060b; }
.cx-gold .cx-idle .cx-office-art { display: none; }
/* The page's parts at the picture's places. */
.cx-gold .cx-hud { display: block; padding: 0; }
.cx-gold .cx-head, .cx-gold .cx-mid, .cx-gold .cx-bottom, .cx-gold .cx-j-title, .cx-gold .cx-j-status { display: contents; }
.cx-gold .cx-back, .cx-gold .cx-j-settings, .cx-gold .cx-j-name, .cx-gold .cx-j-sub, .cx-gold .cx-unverified, .cx-gold .cx-top, .cx-gold .cx-j-pulse, .cx-gold .cx-captions, .cx-gold .cx-mid > .cx-panel,
.cx-gold .cx-j-pill, .cx-gold .cx-j-hint, .cx-gold .cx-j-langs, .cx-gold .cx-controls.cx-j-controls, .cx-gold .cx-type, .cx-gold .cx-privacy, .cx-gold .cx-note,
.cx-gold .cx-clock, .cx-gold .cx-mid > .cx-hint, .cx-gold .cx-mid > .cx-since, .cx-gold .cx-counts { position: absolute; z-index: 2; }
.cx-gold .cx-back { left: calc(2.4 * var(--ao-vw)); top: calc(5 * var(--ao-vh)); transform: translateY(-50%); font-size: max(14px, calc(var(--j) * 25)); color: var(--j-ink); }
.cx-gold .cx-back::before { content: '\2039\00a0\00a0'; font-size: 1.25em; }
.cx-gold .cx-j-settings { right: calc(2 * var(--ao-vw)); top: calc(5 * var(--ao-vh)); transform: translateY(-50%); display: inline-flex; align-items: center; gap: .5em; font-size: max(13px, calc(var(--j) * 22)); color: var(--j-ink);
  background: transparent; border: 1px solid transparent; border-radius: 10px; padding: calc(var(--j) * 8) calc(var(--j) * 10); cursor: pointer; font-family: inherit; min-height: 44px; }
.cx-gold .cx-j-settings:hover, .cx-gold .cx-j-settings:focus-visible, .cx-gold .cx-back:focus-visible { border-color: var(--j-edge); outline: none; }
.cx-gold .cx-j-name { left: 50%; top: calc(8.7 * var(--ao-vh)); transform: translate(-50%, -50%); display: flex; align-items: center; gap: .45em; white-space: nowrap; line-height: 1; font-size: max(30px, calc(var(--j) * 74)); color: var(--j-ink); }
.cx-gold .cx-j-name b { font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: .01em; }
.cx-gold .cx-j-name span { color: var(--j-gold); font-family: "Noto Serif TC", "PMingLiU", "MingLiU", "SimSun", serif; font-weight: 700; letter-spacing: .06em; }
.cx-gold .cx-j-name i { display: block; width: max(70px, calc(var(--j) * 210)); height: 2px; background: linear-gradient(90deg, transparent, var(--j-gold)); }
.cx-gold .cx-j-name i:last-child { background: linear-gradient(90deg, var(--j-gold), transparent); }
.cx-gold .cx-j-sub { left: 50%; top: calc(14.5 * var(--ao-vh)); transform: translate(-50%, -50%); line-height: 1.2; padding: .15em .8em; border-radius: 999px; background: rgba(2, 6, 11, .82); white-space: nowrap; color: var(--j-cyan); font-size: max(13px, calc(var(--j) * 24)); letter-spacing: .1em; }
/* release 160c: Personal mode sits UNDER the subtitle (half its 1.2 line) with a small gap, whatever the screen size (it overlapped at 1920 and 1366) */
.cx-gold .cx-unverified { left: 50%; top: calc(calc(14.5 * var(--ao-vh)) + max(13px, calc(var(--j) * 24)) * .75 + max(8px, calc(var(--j) * 12))); transform: translateX(-50%); line-height: 1.4; color: var(--j-amber); border: 1px solid rgba(255, 202, 98, .4); background: rgba(2, 6, 11, .75); border-radius: 999px;
  font-size: max(11px, calc(var(--j) * 14)); padding: calc(var(--j) * 2) calc(var(--j) * 12); letter-spacing: .02em; }
.cx-gold .cx-unverified:hover, .cx-gold .cx-unverified:focus-visible { color: #ffe0a0; border-color: var(--j-amber); }
.cx-gold .cx-top { right: calc(2 * var(--ao-vw)); top: calc(9.6 * var(--ao-vh)); display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--j) * 6); }
.cx-gold .cx-chip { font-size: max(11px, calc(var(--j) * 14)); background: rgba(2, 6, 11, .75); border-color: var(--j-line); color: var(--j-ink2); padding: calc(var(--j) * 3) calc(var(--j) * 12); }
.cx-gold .cx-dot { width: max(8px, calc(var(--j) * 9)); height: max(8px, calc(var(--j) * 9)); background: var(--j-cyan); box-shadow: 0 0 8px rgba(103, 232, 249, .6); }
/* The live layer and the state's tint, exactly on the painted sphere (the canvas is 2.4 diameters square, the sphere's centre at 42% of it). */
.cx-gold .cx-mid > .cx-orb.cx-j-stage { position: absolute; z-index: 1; left: calc(calc(50 * var(--ao-vw)) - .034 * var(--j-iw) - 1.2 * var(--j-d)); top: calc(calc(50 * var(--ao-vh)) - .086 * var(--j-ih) - 1.008 * var(--j-d));
  width: calc(2.4 * var(--j-d)) !important; height: calc(2.4 * var(--j-d)) !important; max-height: none; min-height: 0; aspect-ratio: auto; opacity: 1; mix-blend-mode: screen; pointer-events: none; }
.cx-gold .cx-j-tint { position: absolute; z-index: 1; pointer-events: none; left: calc(calc(50 * var(--ao-vw)) - .034 * var(--j-iw) - .6 * var(--j-d)); top: calc(calc(50 * var(--ao-vh)) - .086 * var(--j-ih) - .6 * var(--j-d));
  width: calc(1.2 * var(--j-d)); height: calc(1.2 * var(--j-d)); border-radius: 50%; mix-blend-mode: screen; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle, color-mix(in srgb, var(--j-hue) 45%, transparent) 0, transparent 62%); }
.cx-gold .cx-j-cssorb .cx-j-tint { opacity: .25; }
.cx-gold.cx-j-listening .cx-j-tint { opacity: .35; } .cx-gold.cx-j-thinking .cx-j-tint { opacity: .3; } .cx-gold.cx-j-speaking .cx-j-tint { opacity: .4; } .cx-gold.cx-j-wake .cx-j-tint { opacity: .6; }
.cx-gold.cx-j-error .cx-j-tint { opacity: .55; mix-blend-mode: multiply; background: radial-gradient(circle, rgba(120, 40, 30, .9) 0, rgba(60, 20, 20, .6) 45%, transparent 64%); }
.cx-gold.cx-j-muted .cx-j-tint, .cx-gold.cx-j-stopped .cx-j-tint { opacity: .5; mix-blend-mode: multiply; background: radial-gradient(circle, rgba(40, 50, 60, .8) 0, transparent 64%); }
/* The status pill under the pedestal, its progress in it; the key hint under the microphone. */
.cx-gold .cx-j-pill { left: 50%; top: calc(72.2 * var(--ao-vh)); transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; gap: .55em; white-space: nowrap; max-width: calc(44 * var(--ao-vw));
  padding: calc(var(--j) * 5) calc(var(--j) * 20); border-radius: 999px; border: 1px solid var(--j-hue); background: var(--j-glass); color: var(--j-ink);
  font-size: max(13px, calc(var(--j) * 18)); font-weight: 500; letter-spacing: .08em; box-shadow: 0 0 calc(var(--j) * 12) color-mix(in srgb, var(--j-hue) 22%, transparent); }
.cx-gold .cx-j-pill i { width: .5em; height: .5em; border-radius: 50%; background: var(--j-hue); flex: none; }
.cx-gold .cx-j-progress { color: var(--j-ink2); letter-spacing: .02em; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.cx-gold .cx-j-progress::before { content: '\00b7\00a0'; color: var(--j-mute); }
.cx-gold.cx-j-error .cx-j-pill { color: #ffd6da; }
.cx-gold .cx-j-hint { left: 50%; bottom: calc(1.2 * var(--ao-vh)); transform: translateX(-50%); white-space: nowrap; color: var(--j-ink2); font-size: max(11px, calc(var(--j) * 14)); background: rgba(2, 6, 11, .8); padding: 0 .6em; border-radius: 6px; }
/* The company pulse (x 2.8 to 29.8%, y 23 to 66%): ONE glass card, 2 x 2; an icon in a thin circle, a big coloured number, a label with an arrow. */
.cx-gold .cx-j-pulse { left: calc(2.8 * var(--ao-vw)); top: calc(23 * var(--ao-vh)); width: calc(27 * var(--ao-vw)); height: calc(43 * var(--ao-vh)); display: grid; grid-template-rows: auto 1fr; gap: calc(var(--j) * 10); padding: calc(var(--j) * 30) calc(var(--j) * 32) calc(var(--j) * 18);
  border-radius: 18px; border: 1px solid var(--j-edge); background: var(--j-glass); box-shadow: 0 0 calc(var(--j) * 24) rgba(103, 232, 249, .14), inset 0 1px 0 rgba(255, 255, 255, .05); backdrop-filter: blur(6px); }
.cx-gold .cx-j-pulse h3 { margin: 0; display: flex; align-items: center; gap: .9em; color: var(--j-cyan); font-size: max(12px, calc(var(--j) * 18)); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.cx-gold .cx-j-pulse h3::after { content: ''; width: 2em; height: 2px; background: var(--j-gold); }
.cx-gold .cx-j-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; border-top: 1px solid var(--j-line); min-height: 0; }
.cx-gold .cx-j-tile { display: grid; justify-items: start; align-content: center; gap: calc(var(--j) * 6); min-width: 0; padding: calc(var(--j) * 12) calc(var(--j) * 6) calc(var(--j) * 12) calc(var(--j) * 10);
  background: transparent; border: 0; border-bottom: 1px solid var(--j-line); color: var(--j-ink2); font: inherit; text-align: left; cursor: pointer; border-radius: 0; }
.cx-gold .cx-j-tile:nth-child(odd) { border-right: 1px solid var(--j-line); padding-left: 0; }
.cx-gold .cx-j-tile:nth-child(n + 3) { border-bottom: 0; }
.cx-gold .cx-j-tile:nth-child(even) { padding-left: calc(var(--j) * 30); }
.cx-gold .cx-j-tile:hover, .cx-gold .cx-j-tile:focus-visible { background: rgba(103, 232, 249, .05); outline: none; }
.cx-gold .cx-j-tile:focus-visible { box-shadow: inset 0 0 0 2px var(--j-cyan); }
.cx-gold .cx-j-tile-icon { width: max(28px, calc(var(--j) * 50)) !important; height: max(28px, calc(var(--j) * 50)) !important; padding: calc(var(--j) * 9); border: 1.6px solid currentColor; border-radius: 50%; stroke-width: 1.8 !important; }
.cx-gold .cx-j-tile b { font-size: max(24px, calc(var(--j) * 46)); font-weight: 600; line-height: 1.05; overflow-wrap: anywhere; animation: cx-g-fade .18s ease-out; }
.cx-gold .cx-j-tile span { display: inline-flex; align-items: center; gap: .45em; color: var(--j-ink2); font-size: max(12px, calc(var(--j) * 19)); line-height: 1.25; }
.cx-gold .cx-j-tile-go { width: .95em !important; height: .95em !important; color: var(--j-ink2); }
.cx-gold .cx-j-tile.gold { color: var(--j-gold); } .cx-gold .cx-j-tile.red { color: var(--j-red); } .cx-gold .cx-j-tile.zero { color: var(--j-ink); } .cx-j-tile.zero b { color: var(--j-ink); } .cx-gold .cx-j-tile.cyan { color: #5ff0cf; } .cx-gold .cx-j-tile.blue { color: var(--j-blue); }
.cx-gold .cx-j-tile.blue b { color: var(--j-ink); }
.cx-gold .cx-j-tile b.none { font-size: max(16px, calc(var(--j) * 28)); color: var(--j-mute); font-weight: 500; }
@keyframes cx-g-fade { from { opacity: 0; } }
/* The question and answer card (x 60.5 to 97%, y 18 to 71%): eyebrows, the question with a short gold underline, gold dots; the line being said
   lit. The 159 band (the question pinned) is the card's own colour. */
.cx-gold .cx-captions { left: calc(60.5 * var(--ao-vw)); top: calc(18 * var(--ao-vh)); width: calc(36.5 * var(--ao-vw)); max-height: calc(53 * var(--ao-vh)); display: grid; align-content: start; justify-items: stretch; text-align: left; gap: calc(var(--j) * 10); background: var(--j-raised);
  border: 1px solid var(--j-edge); border-radius: 18px; padding: 0 calc(var(--j) * 40) calc(var(--j) * 24 + var(--cx-end-pad, 0px)); box-shadow: 0 0 calc(var(--j) * 24) rgba(103, 232, 249, .14);
  scrollbar-color: var(--j-line) transparent; }
.cx-gold .cx-captions:empty, .cx-gold .cx-captions.hidden { display: none; }
.cx-gold .cx-captions .cx-you { padding: calc(var(--j) * 30) 0 calc(var(--j) * 22); color: var(--j-ink); font-size: max(18px, calc(var(--j) * 36)); font-weight: 600; line-height: 1.25; max-width: none;
  background: linear-gradient(var(--j-gold), var(--j-gold)) no-repeat 0 calc(100% - 8px) / calc(var(--j) * 72) 2px, var(--cx-band); border-bottom: 1px solid var(--j-line); }
.cx-gold .cx-j-eyebrow { display: flex; align-items: center; gap: .8em; color: var(--j-ink2); font-size: max(11px, calc(var(--j) * 15)); letter-spacing: .16em; text-transform: uppercase; margin-bottom: calc(var(--j) * 10); font-weight: 500; }
.cx-gold .cx-j-eyebrow .cx-j-icon { width: 1.5em; height: 1.5em; color: var(--j-ink); }
.cx-gold .cx-j-eyebrow.cx-j-gold { color: var(--j-gold); margin: calc(var(--j) * 8) 0 0; scroll-snap-align: start; scroll-margin-top: calc(var(--cx-band-h, 0px) + var(--cx-band-solid)); }   /* a rest point too: the card never opens with it under the question */
.cx-gold .cx-j-eyebrow.cx-j-gold .cx-j-icon { color: var(--j-gold); fill: var(--j-gold); }
.cx-gold .cx-answer, .cx-gold .cx-answer.cx-answer-list, .cx-gold .cx-answer.cx-size-s { font-size: max(15px, calc(var(--j) * 25)); line-height: 1.5; font-weight: 400; max-width: none; color: var(--j-ink); text-align: left; }
.cx-gold .cx-answer.cx-size-l { font-size: max(18px, calc(var(--j) * 30)); line-height: 1.45; }
.cx-gold .cx-answer.cx-size-m { font-size: max(16px, calc(var(--j) * 27)); max-width: none; }
.cx-gold .cx-answer .cx-line { padding: calc(var(--j) * 3) 0; border-radius: 6px; }
.cx-gold .cx-j-li { padding-left: 1.4em !important; text-indent: -1.4em; }
.cx-gold .cx-j-dot { color: var(--j-gold); display: inline-block; width: 1.4em; text-indent: 0; font-size: 1.1em; }
.cx-gold .cx-answer .cx-j-now { background: linear-gradient(90deg, rgba(233, 191, 110, .16), transparent 85%); box-shadow: inset 3px 0 0 var(--j-gold); }
.cx-gold .cx-unsaid, .cx-gold .cx-answer.cx-answer-list .cx-unsaid { color: var(--j-ink2); font-weight: 400; }   /* 9.2:1 on the card */
.cx-gold .cx-confirm { background: var(--j-glass); border-color: var(--j-gold); font-size: max(15px, calc(var(--j) * 22)); max-width: none; }
.cx-gold .cx-confirm b { color: var(--j-gold); }
.cx-gold.cx-p-confirm .cx-state { display: none; }
/* Start, Teach and the voice list take the card's place (the card is not shown then). */
.cx-gold .cx-mid > .cx-panel { left: calc(60.5 * var(--ao-vw)); top: calc(18 * var(--ao-vh)); width: calc(36.5 * var(--ao-vw)); max-height: calc(53 * var(--ao-vh)); overflow-y: auto; background: var(--j-raised); border-color: var(--j-edge); box-shadow: 0 0 calc(var(--j) * 24) rgba(103, 232, 249, .14); }
.cx-gold .cx-panel .cx-lead { color: var(--j-ink2); }
.cx-gold .cx-panel .cx-warn, .cx-gold .cx-note { color: var(--j-amber); }
.cx-gold .cx-panel .ant-btn-lg { font-size: max(16px, calc(var(--j) * 24)) !important; padding: 8px 28px !important; height: auto !important; }
/* The screen while nobody is talking to it: the time, the hint and the company-wide counts where the card is. */
.cx-gold .cx-clock { left: calc(60.5 * var(--ao-vw)); width: calc(36.5 * var(--ao-vw)); top: calc(26 * var(--ao-vh)); text-align: center; color: rgba(241, 247, 250, .75); font-weight: 300; }
.cx-gold .cx-mid > .cx-hint { left: calc(60.5 * var(--ao-vw)); width: calc(36.5 * var(--ao-vw)); top: calc(42 * var(--ao-vh)); text-align: center; color: var(--j-ink2); }
.cx-gold .cx-mid > .cx-since { left: calc(60.5 * var(--ao-vw)); width: calc(36.5 * var(--ao-vw)); top: calc(49 * var(--ao-vh)); text-align: center; color: var(--j-ink); font-size: max(15px, calc(var(--j) * 22)); }
.cx-gold .cx-counts { left: calc(60.5 * var(--ao-vw)); width: calc(36.5 * var(--ao-vw)); top: calc(50 * var(--ao-vh)); }
.cx-gold .cx-count b { color: var(--j-ink); }
.cx-gold .cx-count span { color: var(--j-ink2); }
/* The language chips centred at y 77% (x 31 to 69%): the first (the Answer in language) gold with a globe. */
.cx-gold .cx-j-langs { left: 50%; top: calc(77 * var(--ao-vh)); transform: translate(-50%, -50%); display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: calc(var(--j) * 22);
  background: transparent; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.cx-gold .cx-j-langs-say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cx-gold .cx-j-lang { display: inline-flex; align-items: center; gap: .5em; min-height: max(36px, calc(var(--j) * 50)); padding: 0 calc(var(--j) * 28); border-radius: 999px; border: 1px solid var(--j-edge);
  background: rgba(4, 14, 26, .88); color: var(--j-ink); font-size: max(13px, calc(var(--j) * 21)); white-space: nowrap; }
.cx-gold .cx-j-lang.first { border: 1.5px solid var(--j-gold); color: #f6e2b8; background: rgba(40, 30, 10, .75); box-shadow: 0 0 calc(var(--j) * 12) rgba(233, 191, 110, .3); }
.cx-gold .cx-j-langs:hover .cx-j-lang, .cx-gold .cx-j-langs:focus-visible .cx-j-lang { border-color: var(--j-cyan); }
.cx-gold .cx-j-langs:focus-visible { outline: 3px solid var(--j-cyan); outline-offset: 3px; border-radius: 12px; }
.cx-gold :focus-visible { outline-color: var(--j-cyan); }
/* At y 88%: Talk (x 34 to 43%), the gold microphone (49.8%, 6.6% of the width across) between waveform bars, Stop (x 57.5 to 66%). */
.cx-gold .cx-controls.cx-j-controls { left: calc(34 * var(--ao-vw)); width: calc(32 * var(--ao-vw)); top: calc(88 * var(--ao-vh)); transform: translateY(-50%); display: flex; align-items: center; justify-content: space-between; gap: 0; flex-wrap: nowrap; }
.cx-gold .ant-btn { min-height: 44px; height: auto; font-size: max(14px, calc(var(--j) * 22)); border-radius: 999px; padding: max(6px, calc(var(--j) * 8)) max(14px, calc(var(--j) * 24)); line-height: 1.3; }
.cx-gold .ant-btn-primary:not(:disabled):not(.ant-btn-dangerous) { background: #0b6e86; border: 1px solid var(--j-cyan); box-shadow: 0 0 calc(var(--j) * 16) rgba(103, 232, 249, .25); }
.cx-gold .ant-btn-primary:not(:disabled):not(.ant-btn-dangerous):hover { background: #0a5f74; }
.cx-gold .ant-btn-default { background: var(--j-glass); border-color: var(--j-line); color: var(--j-ink); }
.cx-gold .ant-btn.cx-j-btn { width: calc(9 * var(--ao-vw)); min-height: max(44px, calc(var(--j) * 64)); padding: 0; font-weight: 600; font-size: max(15px, calc(var(--j) * 24)); }
.cx-gold .ant-btn.cx-j-stop { width: calc(8.5 * var(--ao-vw)); }
.cx-gold .ant-btn.cx-j-talk:not(:disabled) { background: rgba(4, 14, 26, .92); border: 2px solid var(--j-gold); color: #fbeacb; box-shadow: 0 0 calc(var(--j) * 14) rgba(233, 191, 110, .3); }
.cx-gold .ant-btn.cx-j-talk:not(:disabled):hover { border-color: #f6d595; color: #fff5e0; background: rgba(16, 28, 40, .95); }
.cx-gold .ant-btn.cx-j-stop { background: rgba(4, 14, 26, .92); border: 1.5px solid var(--j-edge); color: var(--j-ink); }
.cx-gold .ant-btn.cx-j-stop .cx-j-icon { fill: currentColor; stroke: none; width: .75em; height: .75em; }
.cx-gold .ant-btn.cx-j-btn:disabled { color: var(--j-mute); border-color: var(--j-line); background: rgba(4, 14, 26, .92); }
.cx-gold .cx-j-mic { flex: none; width: calc(6.6 * var(--ao-vw)); height: calc(6.6 * var(--ao-vw)); min-width: 56px; min-height: 56px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff7e4;
  border: 3px solid #f2cf86; background: radial-gradient(circle at 50% 40%, rgba(60, 44, 14, .95), rgba(14, 12, 8, .98) 70%);
  box-shadow: 0 0 0 calc(var(--j) * 8) rgba(233, 191, 110, .14), 0 0 calc(var(--j) * 36) rgba(233, 191, 110, .55), inset 0 0 calc(var(--j) * 20) rgba(233, 191, 110, .35); }
.cx-gold .cx-j-mic .cx-j-icon { width: 42%; height: 42%; stroke-width: 1.9; }
.cx-gold .cx-j-mic:not(.on) { border-color: var(--j-mute); color: var(--j-ink); box-shadow: 0 0 0 calc(var(--j) * 6) rgba(145, 167, 180, .12); background: radial-gradient(circle at 50% 40%, #2a3644, #121a24 70%); }
.cx-gold .cx-j-mic:focus-visible { outline: 3px solid var(--j-cyan); outline-offset: 4px; }
.cx-gold .cx-j-wave { display: inline-flex; align-items: center; gap: max(3px, calc(var(--j) * 6)); height: max(30px, calc(var(--j) * 54)); }
.cx-gold .cx-j-wave i { display: block; width: max(3px, calc(var(--j) * 4)); height: 100%; border-radius: 2px; background: var(--j-gold); opacity: .9;
  transform: scaleY(calc(.2 + var(--cx-j-lvl, 0) * var(--k, .5) * 1.5 + var(--k, .5) * .3)); transition: transform .08s linear; }
.cx-gold .cx-j-wave i:nth-child(1), .cx-gold .cx-j-wave i:nth-child(5) { --k: .35; } .cx-gold .cx-j-wave i:nth-child(2), .cx-gold .cx-j-wave i:nth-child(4) { --k: .7; } .cx-gold .cx-j-wave i:nth-child(3) { --k: 1; }
/* The typed question (bottom left), the privacy line and notes (bottom right): quiet, on their own dark ground. */
.cx-gold .cx-type, .cx-gold .cx-type.cx-quiet { left: calc(2.8 * var(--ao-vw)); bottom: calc(2.4 * var(--ao-vh)); width: calc(27 * var(--ao-vw)); opacity: 1; }
.cx-gold .cx-type .ant-input { background: var(--j-glass); border-color: var(--j-line); color: var(--j-ink); font-size: max(13px, calc(var(--j) * 17)); padding: max(6px, calc(var(--j) * 9)) max(11px, calc(var(--j) * 16)); }
.cx-gold .cx-type .ant-input::placeholder { color: var(--j-mute); }
.cx-gold .cx-privacy { left: calc(60.5 * var(--ao-vw)); width: calc(36.5 * var(--ao-vw)); bottom: calc(2.4 * var(--ao-vh)); text-align: right; color: var(--j-ink2); font-size: max(11px, calc(var(--j) * 14)); }
.cx-gold .cx-privacy, .cx-gold .cx-note { background: transparent; }
.cx-gold .cx-privacy span, .cx-gold .cx-privacy { text-shadow: none; }
.cx-gold .cx-note { left: calc(60.5 * var(--ao-vw)); width: calc(36.5 * var(--ao-vw)); bottom: calc(5.6 * var(--ao-vh)); text-align: right; font-size: max(12px, calc(var(--j) * 16)); }
.cx-gold .cx-privacy { background: linear-gradient(90deg, transparent, rgba(2, 6, 11, .85) 30%); padding: 2px 6px; border-radius: 6px; }
.cx-gold .cx-note { background: linear-gradient(90deg, transparent, rgba(2, 6, 11, .85) 30%); padding: 2px 6px; border-radius: 6px; }
/* Below 1100 px the cards stack under the stage: one scrolling column. */
@media (max-width: 1099px) {
  .cx-gold .cx-hud { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 16px; overflow-y: auto; }
  .cx-gold .cx-back, .cx-gold .cx-j-settings, .cx-gold .cx-j-name, .cx-gold .cx-j-sub, .cx-gold .cx-unverified, .cx-gold .cx-top, .cx-gold .cx-j-pulse, .cx-gold .cx-captions, .cx-gold .cx-mid > .cx-panel,
  .cx-gold .cx-j-pill, .cx-gold .cx-j-hint, .cx-gold .cx-j-langs, .cx-gold .cx-controls.cx-j-controls, .cx-gold .cx-type, .cx-gold .cx-privacy, .cx-gold .cx-note,
  .cx-gold .cx-clock, .cx-gold .cx-mid > .cx-hint, .cx-gold .cx-mid > .cx-since, .cx-gold .cx-counts { position: static; transform: none; width: auto; height: auto; max-height: none; align-self: stretch; }
  .cx-gold .cx-j-name, .cx-gold .cx-j-sub, .cx-gold .cx-unverified, .cx-gold .cx-j-pill, .cx-gold .cx-j-langs, .cx-gold .cx-controls.cx-j-controls { align-self: center; }
  .cx-gold .cx-mid > .cx-orb.cx-j-stage { position: fixed; }
  .cx-gold .cx-j-pulse { min-height: 0; }
  .cx-gold .ant-btn.cx-j-btn, .cx-gold .ant-btn.cx-j-stop { width: auto; padding: 0 22px; }
  .cx-gold .cx-controls.cx-j-controls { gap: 12px; }
}
@media (max-width: 640px) { .cx-gold .cx-j-wave { display: none; } }
/* Reduced motion: nothing moves; the still plate and the state's colour only. */
@media (prefers-reduced-motion: reduce) { .cx-gold *, .cx-gold *::before, .cx-gold *::after { animation: none !important; transition: none !important; } }
/* Jarvis Gold over the Jarvis look's shared rules: no horizon grid, no CSS orb drawn (the plate's sphere is there), the tint inside the fallback. */
.cx-gold .cx-j-bg { opacity: 1; transform: none; -webkit-mask-image: none; mask-image: none; }
.cx-gold .cx-j-cssorb::before { content: none; }
.cx-gold .cx-j-cssorb > i.cx-j-tint { left: calc(.6 * var(--j-d)); top: calc(.408 * var(--j-d)); width: calc(1.2 * var(--j-d)); height: calc(1.2 * var(--j-d)); border: 0; aspect-ratio: auto; }
/* Settings: the three looks, each with a small picture (both looks' sheets). */
.cx-sheet .cx-looks { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-sheet .cx-look { display: grid; justify-items: center; gap: 6px; padding: 6px; border-radius: 10px; border: 1px solid #1d2a3a; background: transparent; color: #e6eef5; font: inherit; cursor: pointer; }
.cx-sheet .cx-look img { width: 104px; height: 59px; border-radius: 6px; object-fit: cover; display: block; }
.cx-sheet .cx-look.on { border-color: #e9bf6e; box-shadow: 0 0 0 1px #e9bf6e; }
.cx-sheet .cx-look:focus-visible { outline: 2px solid #22d3c5; outline-offset: 2px; }

/* 164-sec4h D: the holding line Ruyi says while it works, under the question, quieter than an answer */
.cx-hold { font-size: clamp(20px, calc(2.4 * var(--ao-vw)), 34px); line-height: 1.35; opacity: 0.78; margin: 14px 0 0; }


/* 164-sec4h: the rows of a batch approval (work.jsx) */
.payload-rows { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 6px; }
.payload-rows th, .payload-rows td { border: 1px solid var(--line, #d0d7de); padding: 4px 6px; text-align: left; vertical-align: top; }
.payload-rows th { background: var(--soft, #f3f4f6); font-weight: 600; }

/* Jonathan UI v2, step 1: the agent picker of the chat page (agentpicker.jsx) and the agent pinned at the top of a chat. */
.ap-note { background: var(--brand-soft); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-size: 13px; }
.ap-search { margin-bottom: 10px; }
.ap-list { max-height: min(calc(60 * var(--ao-vh)), 560px); overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.ap-section + .ap-section { margin-top: 12px; }
.ap-head { font-size: 12px; font-weight: 600; color: var(--muted); padding: 4px 8px; position: sticky; top: 0; background: var(--color-surface, #fff); z-index: 1; }
.ap-item { display: flex; align-items: flex-start; gap: 4px; border-radius: 12px; }
.ap-item:hover { background: var(--soft); }
.ap-item.on { background: var(--brand-soft); }
.ap-row { flex: 1; min-width: 0; text-align: left; background: none; border: 0; color: inherit; font: inherit; padding: 8px 10px; border-radius: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.ap-row:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ap-row:disabled { cursor: wait; }
.ap-line1 { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.ap-name { overflow-wrap: anywhere; }
.ap-dept { font-size: 12px; color: var(--muted); }
.ap-purpose { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ap-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.ap-tags .ant-tag { margin: 0; }
.ap-when { color: var(--muted); }
.ap-star { margin-top: 6px; flex: none; }
.ap-star .anticon-star { color: #faad14; }
.ap-empty { padding: 24px 8px; text-align: center; }
.ap-foot { margin-top: 8px; }
.ap-state { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ap-state-word { font-size: 12px; }
.ap-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #bfbfbf; }
.ap-dot.green { background: var(--green, #13a36b); }
.ap-dot.orange { background: #fa8c16; }
.ap-dot.gold { background: #faad14; }
.ap-dot.blue { background: var(--brand, #1677ff); }
.ap-dot.grey { background: #bfbfbf; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ap-pinned { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); min-width: 0; }
.ap-pinned b { color: var(--text, inherit); }
.ap-pinned .ant-tag { margin: 0; }
.ap-pinned-purpose { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
@media (max-width: 640px) { .ap-pinned-purpose { display: none; } .ap-list { max-height: calc(62 * var(--ao-vh)); } }
/* The helper never covers a control (MG and Sheraz, 19 Oct 2026; helperzone.mjs places it), and the person can hide it: the x on Aria or
   My sign-in. Hidden: only a small chat button (.as-fab.mini, 44 px, the size helperzone.mjs counts with). */
.as-launch { position: relative; }
.as-hide { position: absolute; left: -4px; top: 0; z-index: 2; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--line, #d0d7de);
  background: var(--color-surface, #fff); color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; display: grid; place-items: center; opacity: .8; }
.as-hide:hover, .as-hide:focus-visible { opacity: 1; color: var(--text, #1f2937); }
.as-hide:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.as-fab.mini { width: 44px; height: 44px; font-size: 18px; }
.as-fab.mini .as-chat { width: 24px; height: 24px; }
/* UI v2 chat header (20 Oct 2026, staff report: the header was squeezed into a narrow column, words one per line, and the toolbar sat over it).
   ONE compact row: the agent name with ellipsis (never word by word) and its chips on one line; the toolbar is a row of icons while the header has
   room and ONE "More" menu when it does not (chat.jsx useHeadFit: viewport under 900 px or header under 640 px). Only .v2h: Classic is untouched. */
.chat-head.v2h { flex-wrap: nowrap; align-items: center; gap: 8px; padding: 8px 12px; max-height: 88px; overflow: hidden; min-width: 0; }
.chat-head.v2h .chat-head-main { flex: 1 1 0; min-width: 0; gap: 10px; }
.chat-head.v2h .chat-head-main > div:last-child { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.chat-head.v2h .avatar.big { width: 32px; height: 32px; border-radius: 11px; font-size: 15px; }
.chat-head.v2h .chat-title { font-size: 15px; line-height: 20px; }
.chat-head.v2h .ap-pinned { flex-wrap: nowrap; overflow: hidden; gap: 6px; line-height: 20px; min-width: 0; }
.chat-head.v2h .ap-pinned > * { flex: none; }
.chat-head.v2h .ap-pinned .ap-name, .chat-head.v2h .ap-pinned .ap-dept { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head.v2h .ap-pinned .ap-name { max-width: 60%; }
.chat-head.v2h .ap-pinned-purpose { display: none; }
.chat-head.v2h.icons .ap-dept, .chat-head.v2h.icons .ap-chip-t { display: none; }
.chat-head.v2h .chat-head-actions { flex: none; flex-wrap: nowrap; align-items: center; margin-left: auto; }
.chat-head.v2h .hb { padding-inline: 8px; }
.chat-head.v2h:not(.labels) .hb > span:not(.ant-btn-icon) { display: none; }
@media (max-width: 480px) { .chat-head.v2h .head-more > span:not(.ant-btn-icon) { display: none; } }

/* ---------------------------------------------------------------- The sign-in picture (signin-hero.jsx): a canvas behind the words of the art panel, and a short banner on phones */
.nx-root .nx-auth__art, .auth-art { position: relative; overflow: hidden; }
.sg-hero { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }
.nx-root .nx-auth__art > :not(.sg-hero), .auth-art > :not(.sg-hero) { position: relative; z-index: 1; }
/* The picture has its own room under the words and never lies under them (23 Oct 2026, Sheraz: "I do not like this"): the art panel is a column, words first, the scene takes the rest down to the panel's edge. */
.nx-root .nx-auth__art { justify-content: flex-start; gap: 0; }
.nx-root .nx-auth__art .nx-auth__hero { margin-top: clamp(20px, calc(5 * var(--ao-vh)), 56px); }
.nx-root .nx-auth__scene { position: relative; flex: 1 1 auto; min-height: 300px; margin: 8px -56px -40px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%); }
.nx-root .nx-auth__scene .sg-hero { position: absolute; inset: 0; width: 100%; height: 100%; }
.sg-banner { display: none; position: relative; width: 100%; align-self: stretch; flex: none; height: 150px; margin: 0 0 14px; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #075a8c, #0d8a8f); }
@media (max-width: 900px) { .sg-banner { display: block; } }
/* ---------------------------------------------------------------- The chat panel, more beautiful (22 Oct 2026, Sheraz: "more beautiful the chat ... resize, clear chat, text format")
   Everything is under .as-panel, so no other page changes. The width can be dragged (.as-resize), the text size is --as-fs (set by the panel's options menu). */
.as-panel { position: relative; max-width: calc(100 * var(--ao-vw)); border: 1px solid var(--line); border-radius: 20px; background: var(--card);
  box-shadow: 0 28px 70px -20px rgba(15, 23, 42, .35), 0 6px 18px rgba(15, 23, 42, .08); }
.as-panel.resizing { user-select: none; transition: none; }
.as-resize { position: absolute; left: 0; top: 0; bottom: 0; width: 12px; z-index: 5; cursor: ew-resize; touch-action: none; border-radius: 6px; }
.as-resize::after { content: ''; position: absolute; left: 4px; top: 50%; width: 4px; height: 44px; margin-top: -22px; border-radius: 4px; background: color-mix(in srgb, var(--color-accent, #4f46e5) 55%, var(--line)); opacity: .45; transition: opacity .15s; }
.as-resize:hover::after, .as-resize:focus-visible::after, .as-panel.resizing .as-resize::after { opacity: 1; }
.as-resize:focus-visible { outline: 2px solid var(--color-accent, #4f46e5); outline-offset: -2px; }
.as-panel-head { padding: 12px 14px 12px 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent, #4f46e5) 9%, var(--card)), var(--card)); }
.as-panel-head > b { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; letter-spacing: -.01em; }
.as-panel-tools .ant-btn { width: 32px; height: 32px; border-radius: 10px; color: var(--muted, #667); }
.as-panel-tools .ant-btn:hover { background: color-mix(in srgb, var(--color-accent, #4f46e5) 10%, transparent); color: inherit; }
.as-panel .as-tabs { padding: 10px 12px; gap: 8px; }
.as-panel .as-tab.on { border-color: var(--color-accent, #4f46e5); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #4f46e5) 16%, transparent); }
.as-panel .as-panel-body { scroll-behavior: smooth; scrollbar-width: thin; padding: 16px 18px; }
/* the messages */
.as-panel .xchg { margin-bottom: 20px; display: grid; gap: 12px; }
.as-panel .msg.me { align-items: flex-end; }
.as-panel .msg.me .bubble { max-width: 88%; padding: 11px 16px; border-radius: 20px 20px 6px 20px; font-size: var(--as-fs, 14.5px); line-height: 1.55; box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--color-accent, #4f46e5) 55%, transparent); }
.as-panel .msg.me .bubble .pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.as-panel .msg.agent { gap: 10px; align-items: flex-start; }
.as-panel .msg.agent .avatar { flex: none; width: 34px; height: 34px; border-radius: 12px; font-size: 17px; box-shadow: 0 6px 14px -6px rgba(15, 23, 42, .4); }
.as-panel .agent-body { padding: 12px 15px 13px; border: 1px solid var(--line); border-radius: 6px 18px 18px 18px; background: var(--card);
  box-shadow: 0 8px 22px -14px rgba(15, 23, 42, .35); min-width: 0; }
.as-panel .agent-name { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--muted, #667); margin-bottom: 6px; }
.as-panel .msg-actions { margin-top: 6px; }
.as-panel .msg-time { font-size: 11.5px; }
/* text format: the answer reads like a document */
.as-panel .chat-md { font-size: var(--as-fs, 14.5px); line-height: 1.7; }
.as-panel .chat-md p { margin: 0 0 12px; }
.as-panel .chat-md h1, .as-panel .chat-md h2, .as-panel .chat-md h3 { margin: 18px 0 8px; font-weight: 750; letter-spacing: -.015em; }
.as-panel .chat-md h1 { font-size: 1.28em; } .as-panel .chat-md h2 { font-size: 1.16em; padding-bottom: 5px; border-bottom: 1px solid var(--line); } .as-panel .chat-md h3 { font-size: 1.05em; color: var(--color-accent, #4f46e5); }
.as-panel .chat-md h4 { font-size: .8em; margin-top: 16px; }
.as-panel .chat-md ul, .as-panel .chat-md ol { padding-left: 1.35em; margin: 0 0 12px; }
.as-panel .chat-md li { margin: 5px 0; padding-left: 2px; }
.as-panel .chat-md li::marker { color: var(--color-accent, #4f46e5); font-weight: 700; }
.as-panel .chat-md strong { font-weight: 750; }
.as-panel .chat-md a { color: var(--color-accent, #4f46e5); text-decoration-thickness: 1px; }
.as-panel .chat-md blockquote { margin: 0 0 12px; padding: 8px 14px; border-left: 4px solid var(--color-accent, #4f46e5); background: color-mix(in srgb, var(--color-accent, #4f46e5) 7%, var(--card)); border-radius: 0 12px 12px 0; }
.as-panel .chat-md code { font-size: .88em; padding: 1px 6px; border-radius: 6px; }
.as-panel .chat-md pre, .as-panel .chat-md .code-block { border-radius: 12px; font-size: .88em; }
.as-panel .chat-md table { font-size: .93em; border: 1px solid var(--line); border-radius: 12px; overflow: auto; }
.as-panel .chat-md hr { margin: 16px 0; }
.as-panel .answer-body > * + * { margin-top: 12px; }
/* the thinking dots and the composer */
.as-panel .thinking { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.as-panel .as-dots i { width: 7px; height: 7px; }
.as-panel .as-panel-foot { padding: 10px 14px 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent, #4f46e5) 4%, var(--card)), var(--card)); }
.as-panel .as-ag-box textarea.ant-input, .as-panel .cmp textarea.ant-input { border-radius: 16px; padding: 9px 14px; font-size: var(--as-fs, 14.5px); box-shadow: 0 6px 18px -12px rgba(15, 23, 42, .4); }
.as-panel .as-ag-box textarea.ant-input:focus, .as-panel .cmp textarea.ant-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #4f46e5) 22%, transparent); }
.as-panel .as-ag-bar { padding: 10px 16px; background: color-mix(in srgb, var(--color-accent, #4f46e5) 4%, var(--card)); }
@media (max-width: 600px) { .as-resize { display: none; } .as-panel { border-radius: 18px 18px 0 0; } }
@media (prefers-reduced-motion: reduce) { .as-panel .as-panel-body { scroll-behavior: auto; } }

/* the Copy button of an answer sits on the name line, so the answer uses the whole width (before, a 76 px gutter on the right squeezed every answer) */
.as-panel .answer-body > .answer-copy { top: -26px; right: -4px; }
.as-panel .answer-body > .answer-copy + * { padding-right: 0; }
.as-panel .agent-name { padding-right: 70px; }

/* CR-042 live steps: the step timeline (steptimeline.jsx). One vertical line of steps that grows downwards; finished it folds into one line. */
.stl { margin: 10px 0; padding: 10px 14px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); width: 100%; max-width: 640px; min-width: 0; box-sizing: border-box; overflow-anchor: none; }
.stl-folded { padding: 4px 8px; width: fit-content; }
.stl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; min-width: 0; }
.stl-live, .stl-fold { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text, inherit); min-width: 0; }
.stl-fold { background: none; border: 0; padding: 6px 4px; margin: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: inherit; min-height: 32px; border-radius: 8px; }
.stl-fold:focus-visible, .stl-more:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.stl-sum { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.stl-sw { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; min-height: 32px; }
.stl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.stl-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.stl-step { position: relative; display: flex; gap: 10px; padding: 0 0 12px 0; min-width: 0; }
.stl-step:last-child { padding-bottom: 2px; }
.stl-step::before { content: ''; position: absolute; left: 8px; top: 20px; bottom: -2px; width: 2px; background: var(--line); }
.stl-step:last-child::before { display: none; }
.stl-sub { margin-left: 20px; }
.stl-ic { flex: none; width: 18px; height: 18px; display: inline-grid; place-items: center; font-size: 15px; color: var(--green); position: relative; z-index: 1; background: var(--soft); }
.stl-running .stl-ic, .stl-ic.stl-running { color: var(--brand); }
.stl-waiting .stl-ic, .stl-ic.stl-waiting { color: var(--amber, #d48806); }
.stl-failed .stl-ic, .stl-ic.stl-failed { color: var(--warm); }
.stl-hidden .stl-ic { color: var(--muted); }
.stl-main { min-width: 0; flex: 1 1 auto; }
.stl-title { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.stl-running .stl-title { font-weight: 600; }
.stl-why { margin-top: 1px; font-size: 12px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.stl-note { margin-top: 2px; font-size: 12px; color: #8a5200; overflow-wrap: anywhere; }
.stl-note.stl-bad { color: #a8321d; }
.stl-lock { margin-top: 3px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--line); background: var(--card); }
.stl-more { background: none; border: 0; padding: 4px 0; margin: 2px 0 0; cursor: pointer; font: inherit; font-size: 12px; color: var(--link, var(--brand)); min-height: 28px; border-radius: 6px; }
.stl-detail { margin: 4px 0 0; padding: 6px 8px; font: inherit; font-size: 12px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 8px; max-height: 240px; overflow: auto; }
.stl-earlier { padding: 0 0 8px 0; }
@keyframes stl-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.stl-step { animation: stl-in .18s ease-out both; }
@media (prefers-reduced-motion: reduce) { .stl-step { animation: none; } .stl .anticon-loading, .stl .anticon-loading svg { animation: none !important; } }
@media (max-width: 860px) { .stl { padding: 10px 12px; max-width: 100%; } .stl-fold, .stl-more { min-height: 44px; display: inline-flex; align-items: center; } .stl-sw { min-height: 44px; } }
.stl-ms { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
/* CR-045 QwenWork everywhere: the option in the model lists, the agent page note, the admin card */
.qwo-opt .qwo-why { margin-top: 4px; color: #8a5200; overflow-wrap: anywhere; }
.qwo-opt[class*="disabled"] { background: color-mix(in srgb, var(--line) 25%, transparent); }
.qwo-chosen { margin-top: 8px; }
.qwo-note { margin-top: 8px; }
.qwo-why { color: #8a5200; overflow-wrap: anywhere; }
.qwo-wrap { display: inline-flex; }
.qwo-line { margin: 0 0 12px; }
.qwo-admin .qwo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 24px; }
.qwo-admin .qwo-col { min-width: 0; }
.qwo-admin .qwo-facts > div { margin-top: 4px; overflow-wrap: anywhere; }
.qwo-row { margin-top: 6px; }
@media (max-width: 860px) { .qwo-admin .qwo-grid { grid-template-columns: 1fr; } }
/* External access approval: the administrator's full-disclosure card */
.exd { margin-top: 12px; }
.exd-sec { border: 1px solid var(--line); border-radius: 10px; margin-top: 8px; padding: 0 12px; background: color-mix(in srgb, var(--surface, #fff) 96%, transparent); }
.exd-sec > summary { cursor: pointer; padding: 10px 0; min-height: 44px; list-style-position: inside; }
.exd-sec > summary:focus-visible { outline: 2px solid var(--acc, #4c63d2); outline-offset: 2px; border-radius: 6px; }
.exd-read { border-color: color-mix(in srgb, #22a06b 55%, var(--line)); }
.exd-body { padding: 0 0 12px; overflow-wrap: anywhere; }
.exd-body ul { margin: 4px 0 8px; padding-left: 20px; }
.exd-group { margin-top: 8px; }
.exd-row { display: flex; gap: 12px; padding: 3px 0; }
.exd-k { flex: 0 0 150px; color: var(--muted, #667); }
.exd-v { flex: 1; min-width: 0; }
.exd-decide { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; position: sticky; bottom: 8px; background: var(--surface, #fff); box-shadow: var(--shadow); }
.exd-risks { list-style: none; padding-left: 0; }
.exd-risks li { padding: 4px 0; }
@media (max-width: 860px) { .exd-row { flex-direction: column; gap: 0; } .exd-k { flex: none; } .exd-decide .ant-btn { min-height: 44px; } }
.ext-state { margin-top: 4px; }
.ext-snip { margin-top: 8px; }
.ext-snip pre { margin: 0; padding: 8px; background: rgba(127,127,127,.12); border-radius: 6px; white-space: pre-wrap; word-break: break-all; font-size: 12px; }
/* The agent's own picture, the fifth choice of "Character in the 3D office" (agentpicture.jsx) */
.char-pic__img { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--line); }
.char-pic__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.char-pic__cam svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
.char-pic__acts { align-self: center; margin-inline-start: 4px; }
@media (max-width: 860px) { .char-pic__acts .ant-btn { min-height: 44px; } .char-tile.char-pic { min-height: 44px; } }
.exd-who { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; overflow-wrap: anywhere; }
.exd-who > summary { cursor: pointer; min-height: 32px; }
.exd-told { margin: 6px 0 0; padding-left: 18px; }

/* The standard PA Inbox (pa.jsx): the Home card and the Admin Today line. */
.pa-card { border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: 12px; background: var(--color-surface); color: var(--color-text-primary); padding: 14px 16px; margin: 12px 0; }
.pa-card__t { display: block; font-size: 16px; }
.pa-card__p { margin: 6px 0 10px; line-height: 22px; }
.pa-card__a { display: flex; gap: 8px; flex-wrap: wrap; }
.pa-line { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); color: var(--color-text-primary); padding: 12px 16px; margin: 12px 0; }
.pa-line__s { font-size: 13px; opacity: .8; margin-top: 2px; }

/* Use your agents in other AI apps (27 Oct 2026): the numbered how-to above the agent list, and the box on the review page for a group administrator's own outside access */
.ext-howto-steps { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.ext-howto-steps li { line-height: 1.5; }
.ext-own-note { line-height: 1.45; }
.exd-own p { margin: 0 0 10px; }
.ext-form .ext-lab { margin-bottom: 4px; }
.ext-form .ext-note { margin-top: 6px; }
.ext-connect pre, .ext-test pre { margin: 6px 0; padding: 8px; background: rgba(127,127,127,.12); border-radius: 6px; white-space: pre-wrap; word-break: break-all; font-size: 12px; }
.ext-test { padding: 8px 10px; border-left: 3px solid rgba(127,127,127,.35); }
.ext-agent .ext-h { margin: 18px 0 8px; font-size: 15px; }
.ext-agent .ext-h:first-child { margin-top: 0; }

/* The recipient boxes of the mail composer (mailrecipients.jsx): chips and a combobox with a short list of suggestions under it. Colours are the theme's own variables (--card, --line, --ink, --muted, --soft, --brand, --red), so every theme and the dark ones follow. */
.rcp { color: var(--ink); position: relative; min-width: 0; width: 100%; }
.rcp__box { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 32px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: text; }
.rcp:focus-within .rcp__box { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 22%, transparent); }
.rcp.is-bad .rcp__box { border-color: var(--red); }
.rcp__chip { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rcp__in { flex: 1 1 120px; min-width: 90px; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; padding: 3px 0; }
.rcp__list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.rcp__opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; min-height: 40px; }
.rcp__opt.is-on { background: color-mix(in srgb, var(--brand) 16%, var(--card)); }
.rcp__who { display: flex; flex-direction: column; min-width: 0; }
.rcp__who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcp__addr { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcp__kind { flex: none; font-size: 11.5px; padding: 1px 8px; border-radius: 99px; background: var(--soft); color: var(--muted); }
.rcp__none { padding: 8px 10px; font-size: 13px; color: var(--muted); }
.rcp__hint { margin-top: 3px; font-size: 12.5px; color: var(--red); }
@media (max-width: 640px) { .composer .compose-row { grid-template-columns: 1fr; gap: 2px; } .rcp__list { max-height: 240px; } }

/* My training opened at one task (trainingtask.mjs, training.jsx): the task asked for is lit up for a moment, then keeps a soft outline. */
.tr-focus { border-radius: 10px; outline: 2px solid var(--brand); outline-offset: 2px; animation: tr-glow 2.4s ease-out 1; }
@keyframes tr-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }
@media (prefers-reduced-motion: reduce) { .tr-focus { animation: none; } }

/* The steps of the agent builder are buttons (builder.jsx): a border, the number in a circle, a hint under the name, hover and focus, the step you are on filled. Same in both looks. */
.builder-steps .ant-steps-item { cursor: default; }
.builder-steps .ant-steps-item-container { cursor: pointer; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 8px 10px; background: var(--card); }
.builder-steps .ant-steps-item-container:hover { border-color: var(--brand); box-shadow: 0 1px 6px color-mix(in srgb, var(--brand) 25%, transparent); }
.builder-steps .ant-steps-item-container:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.builder-steps .ant-steps-item-active .ant-steps-item-container { background: color-mix(in srgb, var(--brand) 12%, var(--card)); border-color: var(--brand); }
.builder-steps .ant-steps-item-icon { background: var(--brand) !important; border-color: var(--brand) !important; }
.builder-steps .ant-steps-item-wait .ant-steps-item-icon { background: transparent !important; border-color: var(--muted) !important; }
.builder-steps .ant-steps-item-wait .ant-steps-item-icon .ant-steps-icon { color: var(--muted); }
.builder-steps .ant-steps-item-active .ant-steps-item-icon .ant-steps-icon, .builder-steps .ant-steps-item-finish .ant-steps-item-icon .ant-steps-icon { color: #fff; }
.builder-steps .ant-steps-item-title { color: var(--ink) !important; font-weight: 600; }
.builder-steps .ant-steps-item-description { color: var(--muted) !important; font-size: 12px; }
.builder-steps .ant-steps-item-tail { display: none; }
.builder-savehint { max-width: 420px; display: inline-block; }
.builder-steps .ant-steps-item-title::after { display: none !important; }
.builder-steps .ant-steps-item-finish .ant-steps-item-icon .anticon, .builder-steps .ant-steps-item-finish .ant-steps-item-icon .ant-steps-icon .anticon { color: #fff !important; }

/* Connections: what waits for the administrator (connattention.jsx). Amber = held for you, red = not working; both keep the words, the colour is not the only sign. */
.conn-att { border: 1px solid color-mix(in srgb, #d48806 55%, var(--line)); background: color-mix(in srgb, #d48806 10%, var(--card)); color: var(--ink); border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; }
.conn-att--ok { border-color: var(--line); background: var(--card); color: var(--muted); font-size: 13px; padding: 8px 14px; }
.conn-att--bad { border-color: color-mix(in srgb, var(--red, #cf1322) 60%, var(--line)); background: color-mix(in srgb, var(--red, #cf1322) 8%, var(--card)); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.conn-att__head { margin-bottom: 6px; }
.conn-att__list { list-style: none; margin: 0; padding: 0; }
.conn-att__row { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.conn-att__row:first-child { border-top: 0; }
.conn-att__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.conn-att__pill { flex: 0 0 auto; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 1px 9px; border: 1px solid currentColor; }
.conn-att__pill--warn { color: #ad6800; background: color-mix(in srgb, #d48806 16%, var(--card)); }
.conn-att__pill--bad { color: #cf1322; background: color-mix(in srgb, #cf1322 12%, var(--card)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .conn-att__pill--warn { color: #ffc069; } :root:not([data-theme="light"]) .conn-att__pill--bad { color: #ff7875; } }
:root[data-theme="dark"] .conn-att__pill--warn { color: #ffc069; } :root[data-theme="dark"] .conn-att__pill--bad { color: #ff7875; }
@media (max-width: 640px) { .conn-att__row { flex-wrap: wrap; } .conn-att__text { flex-basis: 100%; order: 3; } }
/* the card the strip's button opened (?open=): lit up once, like a task opened from an email */
.conn-focus { border-radius: 12px; outline: 2px solid var(--brand); outline-offset: 2px; animation: tr-glow 2.4s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .conn-focus { animation: none; } }


/* Connections: the table of every connection and MCP server (connhub.jsx). The state is a pill with its word; Waiting is an outline, Changed is filled, so the two are never mixed up. */
.conn-hub { margin: 0 0 24px; }
.conn-hub__tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.conn-hub__tab, .conn-hub__chip { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; cursor: pointer; white-space: nowrap; }
.conn-hub__tab.is-on, .conn-hub__chip.is-on { border-color: var(--brand); color: var(--brand); font-weight: 600; }
.conn-hub__n { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--line) 60%, transparent); font-size: 12px; text-align: center; }
.conn-hub__bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.conn-hub__search { flex: 1 1 260px; min-width: 0; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.conn-hub__select { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; max-width: 100%; }
.conn-hub__count { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.conn-hub__table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.conn-hub__table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.conn-hub__table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); }
.conn-hub__table tr:last-child td { border-bottom: 0; }
.conn-hub__table tr[data-conn-state="changed"] td:first-child, .conn-hub__table tr[data-conn-state="failing"] td:first-child { box-shadow: inset 3px 0 0 #d48806; }
.conn-hub__table tr[data-conn-state="failing"] td:first-child { box-shadow: inset 3px 0 0 #cf1322; }
.conn-hub__name { font-weight: 600; color: var(--ink); text-decoration: none; }
.conn-hub__name:hover { text-decoration: underline; color: var(--brand); }
.conn-hub__sub { color: var(--muted); font-size: 12px; }
.conn-hub__mode { font-size: 12px; border-radius: 6px; padding: 1px 7px; border: 1px solid var(--line); color: var(--muted); }
.conn-hub__mode--change { font-weight: 700; color: var(--ink); border-color: var(--ink); }
.conn-hub__lock { white-space: nowrap; }
.conn-hub__bad { color: #cf1322; }
.conn-hub__pill { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 1px 9px; border: 1px solid currentColor; white-space: nowrap; }
.conn-hub__pill--ok { color: #1b7a3d; }
.conn-hub__pill--grey { color: var(--muted); }
.conn-hub__pill--bad { color: #cf1322; background: color-mix(in srgb, #cf1322 12%, var(--card)); }
.conn-hub__pill--warn { color: #ad6800; }
.conn-hub__table tr[data-conn-state="changed"] .conn-hub__pill--warn { background: color-mix(in srgb, #d48806 22%, var(--card)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .conn-hub__pill--ok { color: #6fd08c; } :root:not([data-theme="light"]) .conn-hub__pill--warn { color: #ffc069; } :root:not([data-theme="light"]) .conn-hub__pill--bad, :root:not([data-theme="light"]) .conn-hub__bad { color: #ff7875; } }
:root[data-theme="dark"] .conn-hub__pill--ok { color: #6fd08c; } :root[data-theme="dark"] .conn-hub__pill--warn { color: #ffc069; } :root[data-theme="dark"] .conn-hub__pill--bad, :root[data-theme="dark"] .conn-hub__bad { color: #ff7875; }
.conn-hub__none { padding: 18px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; }
/* phone: each row is a card, every cell says what it is */
@media (max-width: 760px) {
  .conn-hub__table, .conn-hub__table tbody, .conn-hub__table tr, .conn-hub__table td { display: block; width: 100%; }
  .conn-hub__table thead { position: absolute; left: -9999px; }
  .conn-hub__table { border: 0; background: transparent; }
  .conn-hub__table tr { background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; padding: 6px 0; }
  .conn-hub__table td { border: 0; padding: 4px 12px; display: flex; gap: 10px; justify-content: space-between; align-items: baseline; }
  .conn-hub__table td::before { content: attr(data-label); color: var(--muted); font-size: 12px; flex: 0 0 38%; }
  .conn-hub__table td:first-child { display: block; }
  .conn-hub__table td:first-child::before { display: none; }
}
@media (min-width: 761px) { .conn-hub__table td:nth-child(6), .conn-hub__table td:nth-child(7), .conn-hub__table td:nth-child(8) { white-space: nowrap; } }

/* Connections: the drawer of one connection (conndrawer.jsx). The diff is a list of what the server now says; the words and the left edge say the kind, the colour is not the only sign. */
.conn-dr__remove { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.conn-dr__removebtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.conn-dr__title { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.conn-dr__facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 14px; }
.conn-dr__facts dt { color: var(--muted); font-size: 13px; }
.conn-dr__facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.conn-dr__diff { border: 1px solid color-mix(in srgb, #d48806 55%, var(--line)); background: color-mix(in srgb, #d48806 8%, var(--card)); border-radius: 12px; padding: 10px 14px; margin: 0 0 16px; color: var(--ink); }
.conn-dr__diff h3, .conn-dr__h { font-size: 14px; margin: 0 0 8px; color: var(--ink); }
.conn-dr__h { margin-top: 4px; }
.conn-dr__diff ul { list-style: none; margin: 0; padding: 0; }
.conn-dr__chg { border-left: 3px solid #d48806; padding: 4px 0 4px 10px; margin: 0 0 8px; }
.conn-dr__chg--identity { border-left-color: #cf1322; }
.conn-dr__chg--removed { border-left-color: var(--muted); }
.conn-dr__line { color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.conn-dr__asked { margin-top: 6px; }
@media (max-width: 640px) { .conn-dr__facts { grid-template-columns: 1fr; } .conn-dr__facts dd { margin-bottom: 6px; } }

/* ONE identity for a connection (connidentity.jsx): the icon of its type, the name, "type · company", its mode and a padlock. The same on the Connections table, the drawer and the Systems page. */
.conn-id { display: inline-flex; gap: 10px; align-items: center; min-width: 0; max-width: 100%; }
.conn-id__ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 14%, var(--card)); color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.conn-id__ic--mcp { background: color-mix(in srgb, #722ed1 14%, var(--card)); color: #722ed1; }
.conn-id__ic--m365 { background: color-mix(in srgb, #1677ff 14%, var(--card)); color: #1677ff; }
.conn-id__ic--collected { background: color-mix(in srgb, #13a8a8 14%, var(--card)); color: #13a8a8; }
.conn-id__ic--builtin, .conn-id__ic--ai { background: color-mix(in srgb, var(--muted) 16%, var(--card)); color: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .conn-id__ic--mcp { color: #b37feb; } :root:not([data-theme="light"]) .conn-id__ic--m365 { color: #69b1ff; } :root:not([data-theme="light"]) .conn-id__ic--collected { color: #5cdbd3; } }
:root[data-theme="dark"] .conn-id__ic--mcp { color: #b37feb; } :root[data-theme="dark"] .conn-id__ic--m365 { color: #69b1ff; } :root[data-theme="dark"] .conn-id__ic--collected { color: #5cdbd3; }
.conn-id__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.conn-id__name { font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; text-align: left; }
.conn-id__btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
a.conn-id__name:hover, .conn-id__btn:hover { text-decoration: underline; color: var(--brand); }
.conn-id__sub { color: var(--muted); font-size: 12px; }
.nx-root .nx-adm .conn-id__ic--mcp.nx-sy-ic, .nx-root .nx-adm .conn-id__ic--m365.nx-sy-ic { font-size: 12px; letter-spacing: 0; }

.conn-hub__views { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.conn-hub__naming { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.conn-hub__viewname { flex: 0 1 220px; padding: 4px 8px; }
.conn-pointer { margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font-size: 13px; }

/* What can it use (use-rows.jsx, 28 Oct 2026): compact rows, groups that open and close, filter chips and the strip of what is chosen. No transition, no animation: the list is long and is scrolled. */
.use-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.use-filter { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.use-filter:hover { border-color: var(--brand); }
.use-filter.on { background: var(--brand-soft); border-color: var(--brand); font-weight: 600; }
.use-filter__n { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; }
.use-sel { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); display: grid; gap: 8px; }
.use-sel__head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.use-sel__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.use-sel__chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 13px; max-width: 100%; }
.use-sel__chip > span { overflow-wrap: anywhere; }
.use-sel__chip button { border: 0; background: transparent; color: var(--muted); cursor: pointer; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; padding: 0; }
.use-sel__chip button:hover { color: var(--ink); background: var(--soft); }
.use-grp { border: 1px solid var(--line); border-radius: 12px; background: var(--card); margin: 0 0 8px; overflow: hidden; }
.use-grp__head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: start; cursor: pointer; min-height: 44px; }
.use-grp__head:hover { background: var(--soft); }
.use-grp__head .anticon { font-size: 11px; color: var(--muted); }
.use-grp__n { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.use-grp__sel { margin-inline-start: auto; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--ink); }
.use-grp__body { border-top: 1px solid var(--line); }
.use-grp__body .use-item:not(:first-child) .use-row { border-top: 1px solid var(--line); }
.use-row { padding: 6px 12px; min-width: 0; }
.use-row__top { display: flex; align-items: center; gap: 4px; }
.use-row__main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.use-row.locked .use-row__main { cursor: default; }
.use-row__text { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.use-row__text > b { overflow-wrap: anywhere; }
.use-row__line { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.use-row.suggested { background: linear-gradient(90deg, var(--brand-soft), transparent 40%); }
.use-row__info { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; display: inline-grid; place-items: center; }
.use-row__info:hover, .use-row__info[aria-expanded="true"] { color: var(--ink); background: var(--soft); }
.use-row__more { padding: 2px 4px 8px 32px; line-height: 1.5; }
.use-row__notes:empty { display: none; }
.use-row__notes { padding: 2px 4px 6px 32px; display: grid; gap: 4px; }
.use-chips { flex: none; display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.use-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; line-height: 20px; color: var(--ink); border: 1px solid transparent; white-space: nowrap; }
.use-chip--look { background: color-mix(in srgb, var(--muted) 14%, var(--card)); }
.use-chip--change { background: color-mix(in srgb, #d48806 24%, var(--card)); }
.use-chip--send { background: color-mix(in srgb, #cf1322 20%, var(--card)); }
.use-chip--conf { background: var(--card); border-color: color-mix(in srgb, #d48806 60%, var(--line)); }
.use-chip--off { background: var(--soft); border-color: var(--line); }
@media (max-width: 640px) {
  .use-row__main { flex-wrap: wrap; row-gap: 2px; }
  .use-row__text { flex-basis: calc(100% - 34px); }
  .use-chips { flex-basis: 100%; justify-content: flex-start; padding-inline-start: 26px; }
  .use-row__line { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* What can it use? (connect-cards.jsx, 29 Oct 2026): five cards, each ONE status and ONE action. No transition, no animation. */
.cc { margin: 0 0 14px; }
.cc-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0 0 10px; }
.cc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cc-card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 12px 14px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.cc-card--dash { border-style: dashed; background: transparent; }
.cc-top { display: flex; gap: 10px; align-items: center; min-width: 0; }
.cc-ic { width: 36px; height: 36px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; font-size: 18px; }
.cc-t { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.cc-d { color: var(--muted); font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.cc-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; }
.cc-st { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; font-size: 12px; line-height: 20px; color: var(--ink); white-space: nowrap; }
.cc-st--ready { background: color-mix(in srgb, #16a34a 18%, var(--card)); }
.cc-st--ask { background: color-mix(in srgb, #d48806 26%, var(--card)); }
.cc-st--waiting { background: color-mix(in srgb, var(--brand) 16%, var(--card)); }
.cc-st--off { background: var(--soft); border: 1px solid var(--line); }
.cc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center; }
.cc-btn:hover { border-color: var(--brand); color: var(--ink); }
.cc-btn--go { background: var(--color-accent, var(--brand)); border-color: var(--color-accent, var(--brand)); color: var(--color-on-accent, #fff); }
.cc-btn--go:hover { color: var(--color-on-accent, #fff); opacity: .92; }
.cc-btn.is-on { background: var(--card); color: var(--ink); border-color: var(--brand); }
.cc-narrow { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--brand-soft); border: 1px solid var(--brand); margin: 0 0 10px; font-size: 13px; }
.cc-narrow button { border: 0; background: transparent; color: var(--ink); cursor: pointer; width: 24px; height: 24px; border-radius: 50%; }
@media (max-width: 640px) { .cc-grid { grid-template-columns: minmax(0, 1fr); } }
/* The search and the filter chips sit at the TOP of "See everything it could use", above the cards (5 Nov 2026, Sheraz: "search is at wrong location"); they stay in view while the long list scrolls. A typed word makes the cards that fit stand out. */
.use-find { position: sticky; top: 0; z-index: 3; margin: 0 -6px 12px; padding: 6px 6px 2px; background: var(--card); }
.use-find .use-search { margin: 0 0 10px; }
.use-find .use-filters { margin: 0 0 6px; }
.cc-card.is-dim { opacity: .45; }
.cc-card.is-match { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* What can it use: group icons, one status per row, the picture of how to choose (use-rows.jsx, 29 Oct 2026). Still here; the motion is in nx-w18.css, New look only, when motion is allowed. */
.use-gic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--soft); color: var(--muted); }
.use-grp__head .use-gic .anticon, .use-row .use-gic .anticon { font-size: 14px; color: inherit; }
.use-st { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; line-height: 20px; color: var(--ink); white-space: nowrap; border: 1px solid transparent; }
.use-st--ready { background: color-mix(in srgb, #16a34a 18%, var(--card)); }
.use-st--ask { background: color-mix(in srgb, #d48806 26%, var(--card)); }
.use-st--waiting { background: color-mix(in srgb, var(--brand) 16%, var(--card)); }
.use-st--off { background: var(--soft); border-color: var(--line); }
.use-st--ready .anticon { color: #15803d; }
.use-st--ask .anticon { color: #b45309; }
.use-st--waiting .anticon { color: var(--brand); }
.use-st--off .anticon { color: var(--muted); }
.use-row__main { flex-wrap: wrap; row-gap: 4px; }
.use-row__text { flex: 1 1 220px; }
.use-chips { margin-inline-start: auto; }
.use-chip--appr { background: color-mix(in srgb, var(--brand) 12%, var(--card)); }
.use-groups__bar { display: flex; justify-content: flex-end; margin: 0 0 4px; }
.use-link { border: 0; background: transparent; color: var(--ink); cursor: pointer; padding: 4px 8px; min-height: 36px; font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.use-link:hover { color: var(--brand); }
.use-picker--settings { margin: 4px 0 12px; }
.use-guide { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 6px 0 0; }
.use-guide__art { position: relative; flex: none; width: 236px; max-width: 100%; height: 44px; }
.ug-find { position: absolute; left: 0; top: 6px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--muted); }
.ug-card { position: absolute; left: 50px; top: 5px; width: 76px; height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); }
.ug-box { flex: none; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; background: var(--color-accent, var(--brand)); color: var(--color-on-accent, #fff); font-size: 10px; }
.ug-line { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--line); }
.ug-sel { position: absolute; right: 0; top: 3px; width: 84px; height: 38px; border-radius: 10px; border: 1.5px dashed var(--brand); }
.ug-fly { position: absolute; left: 10px; top: 11px; width: 60px; height: 14px; border-radius: 7px; background: var(--brand-soft); border: 1px solid var(--brand); }
.use-guide__steps { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; counter-reset: ug; font-size: 13px; color: var(--ink); }
.use-guide__steps li { counter-increment: ug; display: inline-flex; align-items: center; gap: 6px; }
.use-guide__steps li::before { content: counter(ug); width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--soft); border: 1px solid var(--line); font-size: 11px; font-variant-numeric: tabular-nums; }
.use-empty-ill { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; text-align: center; color: var(--muted); }
.use-empty-ill svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.use-empty-ill .ue-lens circle { fill: var(--card); }
@media (max-width: 640px) {
  .use-row__text { flex-basis: calc(100% - 76px); }
  .use-chips { padding-inline-start: 64px; }
}

/* New automation (30 Oct 2026, Sheraz: "redesign this UI UX, more user friendly and 3D"): four numbered step cards that sit raised above the dialog, lift a little
   when you are working in them, with a glossy step badge and a pressed primary button. Only theme tokens; depth is shadow and highlight, no motion here: this file carries none. */
.auto-modal .ant-modal-content { border-radius: 22px; box-shadow: var(--shadow-raised); background: var(--color-surface); padding: 22px 24px 18px; }
.auto-modal .ant-modal-title { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.auto-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; perspective: 900px; }
.auto-card { position: relative; display: flex; gap: 14px; padding: 16px 18px 16px 14px; border-radius: 18px; background: var(--color-surface-nested); border: 1px solid var(--color-border);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, var(--shadow-card); }
.auto-card:hover { transform: translateY(-1px); }
.auto-card:focus-within { transform: translateY(-3px) rotateX(.6deg); border-color: var(--color-accent); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, var(--shadow-raised), 0 0 0 3px var(--color-accent-soft); }
.auto-n { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: var(--color-on-accent);
  background: var(--gradient-brand); box-shadow: 0 -2px 3px rgba(255,255,255,.35) inset, 0 3px 6px rgba(0,0,0,.28), 0 8px 16px -6px var(--color-accent); text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.auto-body { flex: 1 1 auto; min-width: 0; }
.auto-h { font-weight: 700; font-size: 15px; margin: 4px 0 6px; color: var(--color-text-primary); }
.auto-card .field-label:first-of-type { margin-top: 0; }
.auto-card .ant-input, .auto-card .ant-input-affix-wrapper, .auto-card .ant-select-selector, .auto-card textarea.ant-input { box-shadow: 0 1px 2px rgba(0,0,0,.08) inset; border-radius: 12px; }
.auto-card textarea.ant-input { line-height: 1.55; font-size: 14.5px; }
.auto-tip { margin-top: 8px; }
.auto-modal .ant-modal-footer { margin-top: 16px; }
.auto-modal .ant-btn-primary { background: var(--gradient-brand); border: 0; border-radius: 12px; font-weight: 700; box-shadow: 0 -2px 2px rgba(255,255,255,.25) inset, 0 4px 10px -2px var(--color-accent); }
.auto-modal .ant-btn-primary:not(:disabled):hover { transform: translateY(-1px); }
.auto-modal .ant-btn-primary:not(:disabled):active { transform: translateY(1px); box-shadow: 0 2px 4px rgba(0,0,0,.3) inset; }
.auto-modal .ant-btn-default { border-radius: 12px; }
@media (max-width: 640px) { .auto-card { padding: 12px 12px 12px 10px; gap: 10px; } .auto-n { width: 28px; height: 28px; } .auto-modal .ant-modal-content { padding: 16px 14px 14px; } }
/* "More detail" under the change of an agent in the request drawer (agent-diff.jsx MoreDetail; the drawer sits outside .nx-root) */
.drawer-body .agd-more { border: 1px solid var(--color-border); border-radius: 10px; padding: 0 14px; margin-top: 12px; }
.drawer-body .agd-more > summary { cursor: pointer; padding: 10px 0; font-weight: 600; }
.drawer-body .agd-more__b { padding-bottom: 14px; }
.drawer-body .agd-more > summary .nx-small { margin-left: 8px; font-weight: 400; font-size: 13px; color: var(--color-text-muted); }
/* Full screen dashboard (3 Nov 2026, boards.jsx FullView): only the dashboard, above the menu, header and floating helpers; larger on a TV. */
.board-full{position:fixed;inset:0;z-index:3000;overflow:auto;background:var(--bg);color:var(--ink);padding:clamp(10px,calc(1.2 * var(--ao-vw)),40px)}
.board-full-exit{position:fixed !important;bottom:12px;right:12px;z-index:3001;opacity:.55}.board-full-exit:hover,.board-full-exit:focus-visible{opacity:1}
.board-full iframe.app-frame{width:100%;min-height:calc(calc(100 * var(--ao-vh)) - 24px)}
body.board-full-on{overflow:hidden}
@media (min-width:2400px){.board-full .bk-board{zoom:1.4}}
@media (min-width:3200px){.board-full .bk-board{zoom:1.9}}

/* Duplicates view (dupes.jsx, 5 Nov 2026): one box for SharePoint links and agent docs, both looks; colours from the page's own tokens */
.dup { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 10px 14px; margin: 12px 0; }
.dup__sum { cursor: pointer; display: flex; align-items: center; gap: 8px; list-style: none; }
.dup__sum::-webkit-details-marker { display: none; }
.dup__count { color: var(--muted); font-size: 13px; }
.dup__sub { color: var(--muted); font-size: 13px; margin: 6px 0 10px; }
.dup__group { border-top: 1px solid var(--line); padding: 10px 0 4px; }
.dup__by { margin: 0 0 6px; }
.dup__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dup__row { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.dup__row.is-keep { border-color: color-mix(in srgb, #1b7a3d 55%, var(--line)); }
.dup__main { min-width: 0; flex: 1 1 240px; overflow-wrap: anywhere; }
.dup__meta, .dup__why, .dup__agents { color: var(--muted); font-size: 13px; }
.dup__agents { margin: 4px 0 0; padding-left: 18px; }
.dup__acts { display: flex; gap: 6px; flex-wrap: wrap; }
.dup__recent { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 6px; }
@media (max-width: 520px) { .dup { padding: 8px 10px; } .dup__acts { width: 100%; } }
/* The welcome designer (5 Nov 2026): chips with a label and a full prompt, drag to reorder, and a preview that draws the empty chat (frame, welcome, composer line). Tokens only. */
.agw-sug { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 7%, var(--card)); font-size: 13px; line-height: 1.45; }
.agw-field { display: grid; gap: 3px; min-width: 0; }
.agw-count { margin-left: 6px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.agw-count.is-near { color: var(--color-warning, var(--color-accent)); font-weight: 600; }
.agw-chips-head { display: grid; gap: 2px; margin-top: 4px; }
.agw-chip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.agw-chip.is-drag { opacity: .5; border-style: dashed; }
.agw-grip { cursor: grab; padding: 6px 2px; color: var(--color-text-muted); touch-action: none; }
.agw-chip-main { display: grid; gap: 8px; min-width: 0; }
.agw-chip-acts { display: grid; gap: 2px; }
.agw-warn { color: var(--color-error, var(--color-accent)); }
.agp { display: grid; gap: 8px; align-self: start; position: sticky; top: 12px; min-width: 0; }
.agp-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.agp-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.agp-seg button { font: inherit; font-size: 12.5px; padding: 4px 12px; min-height: 32px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.agp-seg button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-on-accent, var(--card)); }
.agp-frame { display: grid; grid-template-rows: auto 1fr auto auto; border-radius: 16px; border: 1px solid var(--line); background: var(--card); overflow: hidden; min-height: 320px; margin-inline: auto; width: 100%; container-type: inline-size; }
.agp-frame.is-phone { max-width: 390px; }
.agp-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.agp-av { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--gradient-brand); color: var(--color-on-accent, var(--card)); font-weight: 700; }
.agp-who { display: grid; line-height: 1.25; min-width: 0; }
.agp-body { display: grid; align-content: start; gap: 12px; padding: 16px 14px; }
.agp-say { margin: 0; text-align: center; font-weight: 700; font-size: 16px; }
.agp-sent { display: grid; gap: 4px; margin: 0 14px 10px; padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--line); }
.agp-sent-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.agp-composer { display: flex; align-items: center; gap: 8px; margin: 0 14px 14px; padding: 8px 8px 8px 14px; border-radius: 14px; border: 1px solid var(--line); color: var(--color-text-muted); }
.agp-input { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.agp-send { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--color-accent); color: var(--color-on-accent, var(--card)); opacity: .5; }
.agp-note { line-height: 1.4; }
@container (max-width: 380px) { .agp-frame .agw-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .agp { position: static; } .agw-chip { grid-template-columns: minmax(0, 1fr) auto; } .agw-grip { display: none; } }

/* The designer's preview is the real chat (welcome-live.jsx): the bar above it, a chip not yet saved, and why "Try it for real" was not available. Tokens only. */
.agp--live { gap: 8px; }
.agp--live .agp-bar { justify-content: flex-start; }
.agw-new { display: block; margin-top: 2px; font-style: normal; font-size: 11px; font-weight: 600; color: var(--color-accent); }
.agp-why { padding: 6px 10px; border-radius: 10px; border: 1px dashed var(--line); color: var(--color-text-muted); }
.agp-wait { display: grid; place-items: center; height: 100%; }
/* beside the form only when the card is wide enough for a real chat (900 px); narrower, the chat sits under the form at full width */
@container (max-width: 900px) { .agw-edit { grid-template-columns: 1fr; } .agp--live { position: static; } }

/* Remove a link of my own (linkremove.jsx, 5 Nov 2026): a compact dialog body, so the reason box and the buttons are on screen without scrolling */
.lrm { display: grid; gap: 8px; text-align: left; }
.lrm p, .lrm ul { margin: 0; }
.lrm ul { padding-left: 18px; }
.lrm select { max-width: 100%; }
.lrm label { display: flex; align-items: center; gap: 6px; }

/* ---------------------------------------------------------------- the New look's pages inside Classic (classic-embed.jsx): the tokens come from .nx-root, the frame and the page width stay Classic's */
.nx-root.nx-embed { background: none; min-height: 0; padding: 0; display: block; }
.top-right .top-ticket-btn { flex: none; }

/* Search and ask in the Classic top bar: the New look's field, left of the buttons, taking the room the bar has */
.top .top-search.nx-root { flex: 1 1 260px; min-width: 0; max-width: 440px; margin: 0 12px; }
.top .top-search .nx-search { width: 100%; max-width: none; border: 1px solid var(--line); background: var(--color-surface); }

/* The Classic top bar fits a small laptop, a tablet and a phone (6 Nov 2026 review: with Search and New ticket added it ran off the right edge at 1280 px and below).
   Wide: every button has its words. Under 1500 px the buttons keep their icons (each has a tooltip and an aria-label) and the name keeps its place; under 1180 px the search field is one icon. */
.top-search-icon { display: none; }
@media (max-width: 1500px) {
  .top .top-right .office-btn > span:not(.anticon):not(.ant-btn-icon), .top .top-right .guide-btn > span:not(.anticon):not(.ant-btn-icon), .top .top-right .report-btn > span:not(.anticon):not(.ant-btn-icon), .top .top-right .top-ticket-btn > span:not(.anticon):not(.ant-btn-icon) { display: none; }
  .top .top-right .office-btn, .top .top-right .guide-btn, .top .top-right .report-btn, .top .top-right .top-ticket-btn { padding-inline: 11px; }
  .top .top-right .ant-btn > .anticon + span:not(.anticon) { margin: 0; }
}
@media (max-width: 1180px) {
  .top .top-search.nx-root { display: none; }
  .top .top-right .top-search-icon { display: inline-flex; }
  .top .top-right { gap: 6px; }
}
@media (max-width: 1000px) { .me-text { display: none; } }
.is-phone .top-right .top-search-icon { display: inline-flex; }
.top-search-icon:focus-visible, .top .top-right .ant-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* THE ANSWER IN CHAT (29 Oct 2026, answerview.mjs and chatfiles.jsx). Used by Classic and the New look: only the tokens of themes.css (--ink, --muted, --line, --soft, --card, --brand, --green, --amber, --red, --blue and
   their -soft), so every palette, light and dark, is covered. Icons are masks coloured by currentColor. Status colours are reserved: each chip has an icon and the word, never colour alone. */
.am-ic { display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -.2em; background: currentColor; -webkit-mask: var(--am-i) center / contain no-repeat; mask: var(--am-i) center / contain no-repeat; }
.am-ic--bolt { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M13%203%205%2014h6l-1%207%208-11h-6z'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--summary { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%206h16M4%2012h16M4%2018h10'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--steps { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%206h11M9%2012h11M9%2018h11M4.5%206h.01M4.5%2012h.01M4.5%2018h.01'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--warn { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203%202%2020h20zM12%2010v5M12%2018h.01'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--done { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2021a9%209%200%201%200%200-18%209%209%200%200%200%200%2018zM8%2012.5l3%203%205-6'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--money { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2021a9%209%200%201%200%200-18%209%209%200%200%200%200%2018zM12%206.5v11M14.8%209.2c-.4-1-1.4-1.6-2.8-1.6-1.6%200-2.8.8-2.8%202s1%201.7%202.8%202.1%202.8.9%202.8%202.1-1.2%202-2.8%202c-1.5%200-2.5-.7-2.9-1.8'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--people { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%2011a3.5%203.5%200%201%200%200-7%203.5%203.5%200%200%200%200%207zM2.5%2020c.6-3.5%203.2-5.5%206.5-5.5s5.9%202%206.5%205.5M17%2010.5a2.8%202.8%200%201%200%200-5.6M18%2014.6c2%20.5%203.2%202.2%203.6%204.9'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--date { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%205h14a1%201%200%200%201%201%201v13a1%201%200%200%201-1%201H5a1%201%200%200%201-1-1V6a1%201%200%200%201%201-1zM4%2010h16M8%203v4M16%203v4'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--files { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20%2011.5%2012%2019.5a5%205%200%200%201-7-7l8-8a3.3%203.3%200%200%201%204.7%204.7l-8%208a1.7%201.7%200%200%201-2.4-2.4l7.3-7.3'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--mail { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%206h16v12H4zM4%207l8%206%208-6'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--numbers { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%2020V11M12%2020V5M19%2020v-7'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--doc { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%203h7l5%205v13H7zM14%203v5h5M10%2013h6M10%2017h6'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--link { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M14%204h6v6M20%204l-9%209M18%2014v5H5V6h5'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--check { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%2012.5%2010%2017.5%2019%207'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--cross { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%206l12%2012M18%206%206%2018'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--clock { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2021a9%209%200%201%200%200-18%209%209%200%200%200%200%2018zM12%207v5l3%202'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--dot { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'5'%20fill%3D'black'%20stroke%3D'none'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--dash { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M6%2012h12'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--ft-sheet { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%203h7l5%205v13H7zM14%203v5h5M9.5%2012.5h7M9.5%2016.5h7M13%2010.5v8'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--ft-word { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%203h7l5%205v13H7zM14%203v5h5M9.5%2012l1.3%205.5%201.2-4%201.2%204%201.3-5.5'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--ft-slides { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%203h7l5%205v13H7zM14%203v5h5M10%2012.5h6v5h-6z'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--ft-pdf { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%203h7l5%205v13H7zM14%203v5h5M9.5%2017v-5h2a1.4%201.4%200%200%201%200%202.8h-2'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--ft-image { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%203h7l5%205v13H7zM14%203v5h5M9%2018l2.5-3%202%202%201.5-1.5L17%2018'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--ft-zip { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%203h7l5%205v13H7zM14%203v5h5M12%209v2M12%2013v2M12%2017h.01'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--ft-text { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%203h7l5%205v13H7zM14%203v5h5M10%2012h6M10%2015h6M10%2018h4'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--agents { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M7%208h10a2%202%200%200%201%202%202v7a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2v-7a2%202%200%200%201%202-2zM12%208V5M9.5%2013h.01M14.5%2013h.01M9.5%2016.5h5'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--tasks { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%206h11M9%2012h11M9%2018h11M4%206l1%201%202-2M4%2012l1%201%202-2M4%2018l1%201%202-2'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--approvals { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203l7%203v5c0%204.5-3%208-7%2010-4-2-7-5.5-7-10V6zM9%2012l2.2%202.2L15%2010.5'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--info { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2021a9%209%200%201%200%200-18%209%209%200%200%200%200%2018zM12%2011v5M12%208h.01'%2F%3E%3C%2Fsvg%3E"); }
.am-ic--tip { --am-i: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%2018h6M10%2021h4M12%203a6%206%200%200%200-3.5%2010.9c.6.5%201%201.2%201%202.1h5c0-.9.4-1.6%201-2.1A6%206%200%200%200%2012%203z'%2F%3E%3C%2Fsvg%3E"); }

/* headings */
.chat-md .am-h { display: flex; align-items: center; gap: 8px; }
.chat-md .am-h .am-h__i { width: 1.25em; height: 1.25em; color: var(--brand); vertical-align: 0; }
.chat-md h4.am-h { text-transform: none; letter-spacing: 0; font-size: 14px; }
.chat-md .am-h--warn, .chat-md .am-h .am-ic--warn { color: var(--amber); }
.chat-md .am-h .am-ic--done { color: var(--green); }

/* the summary box */
.chat-md .am-tldr { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--brand) 9%, var(--card)); }
.chat-md .am-tldr .am-ic { margin-top: .2em; color: var(--brand); }
.chat-md .am-tldr p { margin: 0; font-weight: 600; line-height: 1.5; }

/* Key: value as a card */
.chat-md .am-kv { margin: 0 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; max-width: 760px; }
.chat-md .am-kv__t { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-weight: 700; background: var(--soft); border-bottom: 1px solid var(--line); }
.chat-md .am-kv__t .am-ic { color: var(--brand); }
.chat-md .am-kv dl { margin: 0; }
.chat-md .am-kv__r { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); gap: 4px 14px; padding: 7px 14px; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.chat-md .am-kv__r:first-child { border-top: 0; }
.chat-md .am-kv dt { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.chat-md .am-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* steps */
.chat-md .am-steps { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; counter-reset: none; }
.chat-md .am-steps > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.chat-md .am-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: var(--card); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.chat-md .am-step__b { min-width: 0; padding-top: 3px; overflow-wrap: anywhere; }
.chat-md .am-step__b > :last-child { margin-bottom: 0; }
.chat-md .am-step__b ol, .chat-md .am-step__b ul { margin-top: 6px; }

/* tables: zebra rows, a header that stays, a box that scrolls on a phone */
.chat-md .am-table { max-width: 100%; max-height: min(calc(62 * var(--ao-vh)), 560px); overflow: auto; margin: 8px 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); -webkit-overflow-scrolling: touch; }
.chat-md .am-table table, .nx-root .nx-chat .chat-md .am-table table { display: table; width: max-content; min-width: 100%; max-width: none; margin: 0; border-collapse: separate; border-spacing: 0; overflow: visible; }
.chat-md .am-table th { position: sticky; top: 0; z-index: 1; background: color-mix(in srgb, var(--brand) 12%, var(--soft)); }
.chat-md .am-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--soft) 80%, transparent); }
.chat-md .am-table tbody tr:nth-child(odd) td { background: var(--card); }
.chat-md .am-table td.am-st { white-space: nowrap; }

/* status chips */
.chat-md .am-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 10px 1px 7px; border: 1px solid transparent; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.6; white-space: nowrap; color: var(--ink); vertical-align: baseline; }
.chat-md .am-chip .am-ic { width: 1em; height: 1em; vertical-align: -.12em; }
.chat-md .am-chip--ok { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 35%, transparent); } .chat-md .am-chip--ok .am-ic { color: var(--green); }
.chat-md .am-chip--bad { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 35%, transparent); } .chat-md .am-chip--bad .am-ic { color: var(--red); }
.chat-md .am-chip--warn { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 35%, transparent); } .chat-md .am-chip--warn .am-ic { color: var(--amber); }
.chat-md .am-chip--info { background: var(--blue-soft); border-color: color-mix(in srgb, var(--blue) 35%, transparent); } .chat-md .am-chip--info .am-ic { color: var(--blue); }
.chat-md .am-chip--gray { background: var(--soft); border-color: var(--line); } .chat-md .am-chip--gray .am-ic { color: var(--muted); }
.chat-md .am-p-chip { margin: 0 0 10px; }
.chat-md .am-li-chip { list-style: none; margin-left: -18px; }

/* files and links */
.chat-md .am-file, .chat-md .am-btn { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 2px 0; padding: 7px 14px 7px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; }
.chat-md .am-file:hover, .chat-md .am-btn:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--card)); }
.chat-md .am-file:focus-visible, .chat-md .am-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.chat-md .am-btn { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.chat-md .am-btn .am-ic { width: 1.05em; height: 1.05em; }
.chat-md .am-file .am-ft { width: 1.6em; height: 1.6em; }
.chat-md .am-file--sheet .am-ft { color: var(--green); } .chat-md .am-file--word .am-ft { color: var(--blue); } .chat-md .am-file--slides .am-ft { color: var(--amber); }
.chat-md .am-file--pdf .am-ft { color: var(--red); } .chat-md .am-file--image .am-ft { color: var(--brand); } .chat-md .am-file--zip .am-ft, .chat-md .am-file--text .am-ft { color: var(--muted); }
.chat-md .am-file__n { min-width: 0; overflow-wrap: anywhere; }
.chat-md .am-file__x { flex: none; padding: 0 7px; border-radius: 6px; background: var(--soft); color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; }


/* callouts: Note, Tip, Warning, Success, Danger. Each has an icon and its word; the colour is only the edge */
.chat-md .am-callout { margin: 0 0 12px; padding: 8px 14px; border: 1px solid var(--line); border-left-width: 4px; border-radius: 12px; background: var(--card); max-width: 760px; }
.chat-md .am-callout__h { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 750; }
.chat-md .am-callout__b > :last-child { margin-bottom: 0; }
.chat-md .am-callout--info { border-left-color: var(--blue); background: color-mix(in srgb, var(--blue-soft) 60%, var(--card)); } .chat-md .am-callout--info .am-ic { color: var(--blue); }
.chat-md .am-callout--tip { border-left-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--card)); } .chat-md .am-callout--tip .am-ic { color: var(--brand); }
.chat-md .am-callout--warn { border-left-color: var(--amber); background: color-mix(in srgb, var(--amber-soft) 60%, var(--card)); } .chat-md .am-callout--warn .am-ic { color: var(--amber); }
.chat-md .am-callout--ok { border-left-color: var(--green); background: color-mix(in srgb, var(--green-soft) 60%, var(--card)); } .chat-md .am-callout--ok .am-ic { color: var(--green); }
.chat-md .am-callout--bad { border-left-color: var(--red); background: color-mix(in srgb, var(--red-soft) 60%, var(--card)); } .chat-md .am-callout--bad .am-ic { color: var(--red); }

/* a figure from the platform: a card with its heading, and the definition and as-of line as a quiet footer */
.chat-md .am-card { margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); max-width: 760px; }
.chat-md .am-card > :last-child { margin-bottom: 0; }
.chat-md .am-card > .am-h:first-child { margin-top: 0; }
.chat-md .am-foot { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; padding: 5px 12px; border-radius: 12px; background: var(--soft); color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.chat-md .am-foot .am-ic { margin-top: .25em; }

/* a breakdown: the name, a bar that only decorates, the number as it was written */
.chat-md .am-bars { display: grid; gap: 7px; margin: 0 0 12px; max-width: 760px; }
.chat-md .am-bar { display: grid; grid-template-columns: minmax(80px, 30%) minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.chat-md .am-bar__l { min-width: 0; overflow-wrap: anywhere; }
.chat-md .am-bar__v { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.chat-md progress.am-bar__t { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border: 0; border-radius: 999px; background: var(--soft); overflow: hidden; }
.chat-md progress.am-bar__t::-webkit-progress-bar { background: var(--soft); border-radius: 999px; }
.chat-md progress.am-bar__t::-webkit-progress-value { background: var(--brand); border-radius: 999px; }
.chat-md progress.am-bar__t::-moz-progress-bar { background: var(--brand); border-radius: 999px; }

/* a table's own buttons, and the rows a long one keeps back */
.chat-md .am-tw { margin: 8px 0 14px; }
.chat-md .am-tw .am-table { margin: 0; }
.chat-md .am-tools { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 4px; }
.chat-md .am-tbtn, .as-rich__copy { font: inherit; font-size: 12px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); cursor: pointer; }
.chat-md .am-tbtn:hover, .as-rich__copy:hover { border-color: var(--brand); }
.chat-md .am-tbtn:focus-visible, .as-rich__copy:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.chat-md .am-tmore { margin-top: 6px; }
.chat-md .am-tw:not(.am-open) tr.am-more { display: none; }
.chat-md .am-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* a long answer in sections that fold */
.chat-md .am-sec { margin: 0 0 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.chat-md .am-sec__s { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 14px; cursor: pointer; list-style: none; }
.chat-md .am-sec__s::-webkit-details-marker { display: none; }
.chat-md .am-sec__s::after { content: ""; flex: none; width: .5em; height: .5em; margin-right: 4px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.chat-md .am-sec[open] > .am-sec__s::after { transform: rotate(225deg); }
.chat-md .am-sec__s:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 12px; }
.chat-md .am-sec__s .am-h { margin: 6px 0; }
.chat-md .am-sec__b { padding: 0 14px 6px; }
.chat-md .am-url, .chat-md .am-noimg { color: var(--muted); }

/* the Assistant's answer: HTML, so the plain-text line rules of the old reply do not apply */
.as-rich { position: relative; margin-top: 8px; white-space: normal; overflow-wrap: anywhere; }
.as-rich .chat-md, .as-live .chat-md { white-space: normal; }
.as-rich__foot { display: flex; justify-content: flex-end; margin-top: 8px; }

/* a phone: cards stack, nothing makes the page scroll sideways */
@media (max-width: 520px) {
  .chat-md .am-kv__r { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .chat-md .am-steps > li { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 8px 10px; }
  .chat-md .am-n { width: 26px; height: 26px; }
  .chat-md .am-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .chat-md .am-bar__t { grid-column: 1 / -1; grid-row: 2; }
  .chat-md .am-card, .chat-md .am-callout { padding-left: 12px; padding-right: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .chat-md .am-file, .chat-md .am-btn { transition: border-color .15s ease, background-color .15s ease; }
}

/* SYSTEMS & DATA AS SHELVES (30 Oct 2026, sys-shelf.jsx, sysview.mjs). Used by the New look and the Classic page: only the tokens of themes.css (--ink, --muted, --line, --soft, --card, --brand, --green, --amber, --red, --blue and
   their -soft), so every palette, light and dark, is covered. The depth is layered shadow plus perspective; it moves only for a person who has not asked for less motion (the block at the end). Status colours are reserved:
   every pill has an icon and its words, never colour alone. */
.ss { --ss-top: 0px; --ss-r: 14px; position: relative; display: block; min-width: 0; }
.nx-root .ss { --ss-top: calc(var(--nx-header-h, 0px) + 8px); }
.ss * { box-sizing: border-box; }
.ss button { font: inherit; color: inherit; cursor: pointer; }
.ss button:focus-visible, .ss input:focus-visible, .ss select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ss-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the four numbers: cards that stand up and tilt a few degrees towards the pointer */
.ss-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 16px; perspective: 900px; }
.ss-sum__c { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px; text-align: left; overflow: hidden; border: 1px solid var(--line);
  border-radius: var(--ss-r); background: var(--card); color: var(--ink); transform: rotateX(var(--ss-rx, 0deg)) rotateY(var(--ss-ry, 0deg));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--card) 70%, transparent) inset, 0 2px 0 -1px var(--line), 0 10px 16px -12px color-mix(in srgb, var(--ink) 40%, transparent), 0 24px 30px -22px color-mix(in srgb, var(--ink) 45%, transparent); }
.ss-sum__bg { position: absolute; inset: -30% -10% auto auto; width: 70%; height: 140%; border-radius: 50%; opacity: .5; pointer-events: none; transform: translate(var(--ss-px, 0px), var(--ss-py, 0px)); }
.ss-sum__c--ok .ss-sum__bg { background: radial-gradient(closest-side, var(--green-soft), transparent); }
.ss-sum__c--warn .ss-sum__bg { background: radial-gradient(closest-side, var(--amber-soft), transparent); }
.ss-sum__c--bad .ss-sum__bg { background: radial-gradient(closest-side, var(--red-soft), transparent); }
.ss-sum__c--gray .ss-sum__bg { background: radial-gradient(closest-side, var(--soft), transparent); }
.ss-sum__ic { position: relative; grid-row: 1 / 3; font-size: 22px; }
.ss-sum__c--ok .ss-sum__ic { color: var(--green); } .ss-sum__c--warn .ss-sum__ic { color: var(--amber); } .ss-sum__c--bad .ss-sum__ic { color: var(--red); } .ss-sum__c--gray .ss-sum__ic { color: var(--muted); }
.ss-sum__n { position: relative; font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ss-sum__l { position: relative; font-size: 12.5px; color: var(--muted); }
.ss-sum__c[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent), 0 14px 24px -14px color-mix(in srgb, var(--ink) 50%, transparent); }

/* the bar: search, filter chips, sort, grid or list */
.ss-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--ss-r); background: var(--card); }
.ss-search { display: flex; align-items: center; gap: 8px; flex: 1 1 280px; min-width: 0; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.ss-search input { flex: 1; min-width: 0; height: 38px; border: 0; outline-offset: 6px; background: transparent; color: var(--ink); font: inherit; }
.ss-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-chip, .ss-view button { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 13px; }
.ss-chip:hover, .ss-view button:hover { border-color: var(--brand); }
.ss-chip[aria-pressed="true"], .ss-view button[aria-pressed="true"] { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, var(--card)); font-weight: 700; }
.ss-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ss-sort { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.ss-sort select { height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit; }
.ss-view { display: inline-flex; gap: 4px; }
.ss-view button { display: inline-flex; align-items: center; gap: 6px; border-radius: 10px; }
.ss-count { margin: 4px 2px 12px; font-size: 13px; color: var(--muted); }
.ss-linkbtn { padding: 0; border: 0; background: none; color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* a shelf: its header stays under the bar while its tiles scroll, and sits on a stack of thin ledges */
.ss-shelf { margin: 0 0 20px; }
.ss-shelf__h { position: sticky; top: var(--ss-top); z-index: 2; margin: 0 0 12px; font-size: 15px; }
.ss-shelf__h > button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--soft);
  box-shadow: 0 2px 0 -1px var(--card), 0 3px 0 -1px var(--line), 0 6px 0 -3px var(--card), 0 7px 0 -3px var(--line), 0 12px 16px -12px color-mix(in srgb, var(--ink) 40%, transparent); }
.ss-shelf__h > button:hover { border-color: var(--brand); }
.ss-shelf__ic { color: var(--brand); font-size: 17px; }
.ss-shelf__t { font-weight: 750; }
.ss-count-pill { padding: 0 9px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ss-shelf__chev { margin-left: auto; color: var(--muted); font-size: 12px; }
.ss-shelf__b[hidden] { display: none; }

/* the tiles */
.ss-grid { list-style: none; margin: 0; padding: 0 2px 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; perspective: 1100px; }
.ss-tile { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--ss-r); background: var(--card); transform-style: preserve-3d;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--card) 60%, transparent) inset, 0 1px 0 var(--line), 0 6px 10px -8px color-mix(in srgb, var(--ink) 35%, transparent); }
.ss-tile[data-state="not_approved"], .ss-tile[data-state="not_allowed"] { background: color-mix(in srgb, var(--soft) 55%, var(--card)); }
.ss-tile__id { min-width: 0; font-weight: 750; }
/* the whole tile opens the sheet: the name's button stretches over it; the tile's own button stays above */
.ss-tile__id .conn-id__btn::after, .ss-tile__id .ss-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--ss-r); }
.ss-tile__id .conn-id__btn:focus-visible, .ss-tile__id .ss-link:focus-visible { outline: none; }
.ss-tile__id .conn-id__btn:focus-visible::after, .ss-tile__id .ss-link:focus-visible::after { outline: 2px solid var(--brand); outline-offset: 2px; }
.ss-line { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ss-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.ss-pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px 1px 7px; border: 1px solid transparent; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.6; color: var(--ink); white-space: nowrap; }
.ss-pill .anticon { font-size: 11px; }
.ss-pill--ok { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 35%, transparent); } .ss-pill--ok .anticon { color: var(--green); }
.ss-pill--warn { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 35%, transparent); } .ss-pill--warn .anticon { color: var(--amber); }
.ss-pill--bad { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 35%, transparent); } .ss-pill--bad .anticon { color: var(--red); }
.ss-pill--info { background: var(--blue-soft); border-color: color-mix(in srgb, var(--blue) 35%, transparent); } .ss-pill--info .anticon { color: var(--blue); }
.ss-pill--gray { background: var(--soft); border-color: var(--line); } .ss-pill--gray .anticon { color: var(--muted); }
.ss-act { position: relative; z-index: 1; margin-top: auto; padding-top: 2px; min-height: 8px; font-size: 13px; }
.ss-btn { padding: 6px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.ss-btn--primary { border-color: var(--brand); background: var(--brand); color: var(--card); }
.ss-more { display: block; margin: 12px auto 0; padding: 6px 18px; border: 1px dashed var(--line); border-radius: 999px; background: var(--card); color: var(--brand); font-weight: 700; }
.ss-more:hover { border-color: var(--brand); }

/* the list: a dense table with the same columns */
.ss-tablewrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--ss-r); background: var(--card); }
.ss-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13.5px; }
.ss-table th, .ss-table td { padding: 8px 12px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.ss-table thead th { background: color-mix(in srgb, var(--brand) 10%, var(--soft)); font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.ss-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--soft) 70%, transparent); }
.ss-table tbody tr:last-child > * { border-bottom: 0; }
.ss-table tbody th { font-weight: 700; }
.ss-link { padding: 0; border: 0; background: none; text-align: left; font-weight: 700; }
.ss-link:hover { color: var(--brand); text-decoration: underline; }
.ss-td-line { color: var(--muted); max-width: 360px; }
.ss-td-act { white-space: nowrap; text-align: right; }

.ss-empty { padding: 36px 16px; text-align: center; border: 1px dashed var(--line); border-radius: var(--ss-r); background: var(--card); }
.ss-empty > .anticon { font-size: 28px; color: var(--muted); }
.ss-empty h2 { margin: 8px 0 4px; font-size: 16px; }
.ss-empty p { max-width: 520px; margin: 0 auto 12px; color: var(--muted); }

/* a phone: one column, the numbers two by two, the bar stacks, the list scrolls inside its own box */
@media (max-width: 600px) {
  .ss-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ss-sum__c { padding: 10px 12px; }
  .ss-sum__n { font-size: 23px; }
  .ss-grid { grid-template-columns: minmax(0, 1fr); }
  .ss-tools { width: 100%; margin-left: 0; justify-content: space-between; }
  .ss-view button > span:not(.anticon) { display: none; }
  .ss-shelf__h { top: 0; }
}

/* depth and movement: only where motion is welcome. Tiles lift towards the viewer with a longer shadow; the summary cards ease back when the pointer leaves. */
@media (prefers-reduced-motion: no-preference) {
  .ss-sum__c { transition: transform .18s ease-out, box-shadow .18s ease-out, border-color .15s ease; }
  .ss-sum__bg { transition: transform .25s ease-out; }
  .ss-tile { transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease, border-color .15s ease; }
  .ss-tile:hover, .ss-tile:focus-within { transform: translateY(-3px) translateZ(18px) rotateX(1.5deg); border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
    box-shadow: 0 1px 0 color-mix(in srgb, var(--card) 60%, transparent) inset, 0 2px 0 var(--line), 0 10px 14px -8px color-mix(in srgb, var(--ink) 35%, transparent), 0 26px 30px -18px color-mix(in srgb, var(--ink) 45%, transparent); }
  .ss-shelf__h > button { transition: transform .18s ease, border-color .15s ease; }
  .ss-shelf__h > button:hover { transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-sum__c, .ss-sum__bg, .ss-tile { transform: none !important; }
  .ss-tile:hover, .ss-tile:focus-within { border-color: var(--brand); }
}

/* The shared 3D look of Home and the agent cards (31 Oct 2026, Sheraz: "nice 3D, animated", "for all themes"). One file for every page that wants it; no motion in styles.css (house rule).
   Light palettes: raised tiles (style A). Dark palettes (html[data-theme="dark"], set by theme-boot.js): glass on a shelf (style B). Every colour comes from the theme tokens (themes.css).
   Classes: .h3-grid (gives its cards perspective), .h3-card (lift and tilt on hover), .h3-tile (extruded icon tile), .h3-sunken (sunken panel), .h3-btn (pressed button), .h3-glow (glowing pill).
   Tokens other files may read: --h3-r --h3-r-tile --h3-d1 --h3-d2 --h3-ease --h3-lift --h3-tilt --h3-shadow --h3-shadow-hover --h3-edge --h3-inset --h3-hi --h3-surface --h3-line. */
:root {
  --h3-r: 16px; --h3-r-tile: 12px;
  --h3-d1: 160ms; --h3-d2: 280ms; --h3-ease: cubic-bezier(.2, .7, .2, 1);
  --h3-lift: -4px; --h3-tilt: 3deg;
  --h3-shade: color-mix(in srgb, var(--color-text-primary) 22%, transparent);
  --h3-hi: color-mix(in srgb, #FFFFFF 85%, transparent);
  --h3-surface: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-nested) 100%);
  --h3-line: var(--color-border);
  --h3-edge: inset 0 -3px 0 color-mix(in srgb, var(--color-text-primary) 7%, transparent);
  --h3-shadow: inset 0 1px 0 var(--h3-hi), 0 1px 2px var(--h3-shade), 0 10px 22px -14px var(--h3-shade);
  --h3-shadow-hover: inset 0 1px 0 var(--h3-hi), 0 2px 4px var(--h3-shade), 0 24px 36px -18px var(--h3-shade);
  --h3-inset: inset 0 2px 6px color-mix(in srgb, var(--color-text-primary) 12%, transparent), inset 0 -1px 0 var(--h3-hi);
}
html[data-theme="dark"] {
  --h3-shade: color-mix(in srgb, #000000 70%, transparent);
  --h3-hi: color-mix(in srgb, #FFFFFF 12%, transparent);
  --h3-surface: linear-gradient(180deg, color-mix(in srgb, var(--color-surface-raised) 78%, transparent) 0%, color-mix(in srgb, var(--color-surface) 62%, transparent) 100%);
  --h3-line: color-mix(in srgb, #FFFFFF 14%, transparent);
  --h3-edge: inset 0 -3px 0 color-mix(in srgb, #000000 35%, transparent);
  --h3-inset: inset 0 2px 8px color-mix(in srgb, #000000 55%, transparent), inset 0 -1px 0 var(--h3-hi);
}
.h3-grid { perspective: 1000px; }
.h3-card { background: var(--h3-surface); border: 1px solid var(--h3-line); border-radius: var(--h3-r); box-shadow: var(--h3-shadow), var(--h3-edge);
  transform: translateZ(0); transition: transform var(--h3-d2) var(--h3-ease), box-shadow var(--h3-d2) var(--h3-ease); }
html[data-theme="dark"] .h3-card { -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.h3-card:hover, .h3-card:focus-within { transform: translateY(var(--h3-lift)) rotateX(var(--h3-tilt)); box-shadow: var(--h3-shadow-hover), var(--h3-edge); }
.h3-tile { display: grid; place-items: center; border-radius: var(--h3-r-tile); color: var(--color-on-accent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--color-accent) 78%, #FFFFFF) 0%, var(--color-accent) 55%, color-mix(in srgb, var(--color-accent) 72%, #000000) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #FFFFFF 45%, transparent), inset 0 -3px 0 color-mix(in srgb, #000000 22%, transparent), 0 6px 12px -6px color-mix(in srgb, var(--color-accent) 70%, transparent); }
.h3-sunken { background: var(--color-surface-nested); border: 1px solid var(--h3-line); box-shadow: var(--h3-inset); }
.h3-btn { box-shadow: inset 0 1px 0 color-mix(in srgb, #FFFFFF 30%, transparent), 0 3px 0 color-mix(in srgb, var(--color-accent) 60%, #000000), 0 6px 12px -6px var(--h3-shade);
  transition: transform var(--h3-d1) var(--h3-ease), box-shadow var(--h3-d1) var(--h3-ease); }
.h3-btn:hover { transform: translateY(-1px); }
.h3-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 color-mix(in srgb, #FFFFFF 20%, transparent), 0 1px 0 color-mix(in srgb, var(--color-accent) 60%, #000000); }
.h3-glow { box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 25%, transparent), 0 0 12px -2px color-mix(in srgb, currentColor 55%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .h3-card, .h3-btn { transition: none !important; }
  .h3-card:hover, .h3-card:focus-within, .h3-btn:hover, .h3-btn:active { transform: none !important; }
}

/* "Connect your work" on Home (home-connect.jsx), both looks. Its own file: no motion goes in styles.css (house rule). Every colour is a theme token, so all themes draw it. */
.hc { --hc-card: var(--color-surface); --hc-scr: var(--color-surface-nested); --hc-line: var(--color-border); --hc-ink: var(--color-text-primary); --hc-muted: var(--color-text-muted);
  --hc-pri: var(--color-accent); --hc-on: var(--color-on-accent); --hc-soft: var(--color-accent-soft); --hc-ok: var(--color-success); --hc-ok-soft: var(--color-success-soft);
  --hc-wait: var(--color-warning); --hc-wait-soft: var(--color-warning-soft); --hc-bad: var(--color-error); --hc-bad-soft: var(--color-error-soft); --hc-bar: var(--color-skeleton);
  --hc-loop: 10s;
  display: grid; gap: 12px; margin: 16px 0; color: var(--hc-ink); }
.hc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.hc-top::-webkit-details-marker { display: none; }
.hc-top::before { content: '▸'; color: var(--hc-muted); transition: transform .2s; }
.hc[open] > .hc-top::before { transform: rotate(90deg); }
.hc-top:focus-visible, .hc-go:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 8px; }
.hc-h { font-size: 18px; font-weight: 700; }
.hc-ring { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--hc-muted); }
.hc-ring svg { width: 30px; height: 30px; transform: rotate(-90deg); }
.hc-ring circle { fill: none; stroke-width: 6; }
.hc-ring-bg { stroke: var(--hc-line); } .hc-ring-fg { stroke: var(--hc-ok); stroke-linecap: round; transition: stroke-dashoffset .6s; }
.hc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.hc-tag { grid-column: 1 / -1; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--hc-muted); margin-top: 4px; }
/* depth, shape and hover lift come from home-3d.css (.h3-card, .h3-tile, .h3-sunken, .h3-btn, .h3-glow) */
.hc-card { padding: 12px; display: grid; gap: 8px; min-width: 0; }
.hc-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hc-ic { width: 34px; height: 34px; flex: none; font-size: 17px; }
.hc-name { font-size: 14px; line-height: 1.25; min-width: 0; }
.hc-pill { margin-left: auto; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.hc-pill--ok { background: var(--hc-ok-soft); color: var(--hc-ok); } .hc-pill--wait { background: var(--hc-wait-soft); color: var(--hc-wait); }
.hc-pill--fix { background: var(--hc-bad-soft); color: var(--hc-bad); } .hc-pill--off { color: var(--hc-muted); border: 1px solid var(--hc-line); }
.hc-stage { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; }
.hc-frame { position: absolute; inset: 0; opacity: 0; animation: hcFrame var(--hc-loop) infinite var(--hc-d, 0s); }
.hc-frame:first-child { opacity: 1; }
.hc-frame svg { width: 100%; height: 100%; display: block; }
.hc-cap { position: relative; min-height: 20px; margin: 0; padding: 0; list-style: none; }
.hc-cap li { position: absolute; inset: 0; font-size: 13px; font-weight: 600; opacity: 0; animation: hcFrame var(--hc-loop) infinite var(--hc-d, 0s); }
.hc-cap li:first-child { opacity: 1; }
.hc-foot { display: flex; align-items: center; gap: 8px; }
.hc-dots { display: flex; gap: 5px; }
.hc-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--hc-bar); animation: hcDot var(--hc-loop) infinite var(--hc-d, 0s); }
.hc-go { margin-left: auto; background: var(--hc-pri); color: var(--hc-on) !important; font-weight: 600; font-size: 13px; padding: 6px 14px; border-radius: 999px; text-decoration: none; }
.hc-card[data-state="ok"]:not([data-hc="mcp"]):not([data-hc="api"]) .hc-go { background: var(--hc-card); color: var(--hc-pri) !important; }
/* the mini screens */
.hc-win { fill: var(--hc-card); stroke: var(--hc-line); } .hc-bar { fill: var(--hc-bar); } .hc-dot { fill: var(--hc-card); }
.hc-scr { fill: var(--hc-scr); } .hc-edge { stroke: var(--hc-line); } .hc-soft { fill: var(--hc-soft); } .hc-box { fill: var(--hc-card); stroke: var(--hc-pri); }
.hc-pri { fill: var(--hc-pri); } .hc-on { fill: var(--hc-on); font-weight: 700; } .hc-ink { fill: var(--hc-ink); } .hc-b { font-weight: 700; }
.hc text { font-family: inherit; }
.hc-tick { fill: none; stroke: var(--hc-muted); } .hc-ticked { fill: none; stroke: var(--hc-pri); stroke-width: 1.6; }
.hc-osoft { fill: var(--hc-ok-soft); } .hc-oline { fill: none; stroke: var(--hc-ok); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.hc-wsoft { fill: var(--hc-wait-soft); } .hc-wline { fill: none; stroke: var(--hc-wait); stroke-width: 2.4; stroke-linecap: round; }
.hc-cur { fill: var(--hc-ink); stroke: var(--hc-card); stroke-width: 1; animation: hcCur var(--hc-loop) infinite var(--hc-d, 0s); transform-box: fill-box; }
.hc-tap { fill: var(--hc-pri); opacity: 0; animation: hcTap var(--hc-loop) infinite var(--hc-d, 0s); transform-box: fill-box; transform-origin: center; }
.hc-type { animation: hcType var(--hc-loop) infinite var(--hc-d, 0s); }
.hc-pop { animation: hcPop var(--hc-loop) infinite var(--hc-d, 0s); transform-box: fill-box; transform-origin: center; }
/* the frame, cursor, tap, typing and pop each live in the first quarter of the loop; the delay (--hc-d) moves a step to its own quarter */
/* a card out of view stands still (home-connect.jsx sets hc--off): nothing is drawn for it */
.hc-card.hc--off *, .hc-card.hc--off *::before { animation-play-state: paused !important; }
@keyframes hcFrame { 0%, 24% { opacity: 1 } 25%, 100% { opacity: 0 } }
@keyframes hcDot { 0%, 24% { background: var(--hc-pri); transform: scale(1.3) } 25%, 100% { background: var(--hc-bar); transform: none } }
@keyframes hcCur { 0% { transform: translate(28px, 22px) } 13%, 100% { transform: translate(0, 0) } }
@keyframes hcTap { 0%, 13% { opacity: 0; transform: scale(.3) } 15% { opacity: .4; transform: scale(1) } 20%, 100% { opacity: 0; transform: scale(1.8) } }
@keyframes hcType { 0%, 3% { clip-path: inset(0 100% 0 0) } 17%, 100% { clip-path: inset(0 0 0 0) } }
@keyframes hcPop { 0%, 4% { transform: scale(0) } 10% { transform: scale(1.15) } 13%, 100% { transform: scale(1) } }
/* reduced motion: nothing moves; the four steps stand side by side, each with its caption */
@media (prefers-reduced-motion: reduce) {
  .hc *, .hc *::before { animation: none !important; transition: none !important; }
  .hc-stage { aspect-ratio: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; }
  .hc-frame { position: static; opacity: 1; aspect-ratio: 16 / 10; }
  .hc-cap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; min-height: 0; }
  .hc-cap li { position: static; opacity: 1; font-size: 11px; font-weight: 400; }
  .hc-dots, .hc-cur, .hc-tap { display: none; }
}
@media (max-width: 480px) { .hc-grid { grid-template-columns: 1fr; } }

/* Admin > Connections, redone (connpage.jsx), both looks. Its own file: no motion goes in styles.css (house rule). Colours are theme tokens (the .hc set of home-connect.css, which the page root also carries),
   depth and lift come from home-3d.css (.h3-card, .h3-tile, .h3-sunken, .h3-btn), the how pictures are the Home hub's. */
.cp { gap: 20px; margin: 0; }
.cp-sub { color: var(--hc-muted); font-size: 13px; line-height: 1.35; }
.cp-h { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--hc-ink); display: flex; align-items: center; gap: 8px; }
.cp-count { font-size: 12px; font-weight: 700; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--hc-soft); color: var(--hc-pri); text-align: center; }
.cp-ic { width: 32px; height: 32px; flex: none; font-size: 16px; }
.cp-ic--big { width: 44px; height: 44px; font-size: 22px; }
.cp-ic--sm { width: 24px; height: 24px; font-size: 13px; }
.cp button:focus-visible, .cp a:focus-visible, .cp summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 10px; }

/* TOP: the line and the three numbers */
.cp-top { display: grid; gap: 12px; }
.cp-lead { margin: 0; font-size: 15px; color: var(--hc-ink); }
.cp-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cp-num { display: grid; justify-items: start; gap: 2px; padding: 12px 14px; border: 1px solid var(--hc-line); color: var(--hc-ink); font: inherit; text-align: left; cursor: pointer; }
.cp-num b { font-size: 28px; line-height: 1.1; }
.cp-num span { font-size: 13px; color: var(--hc-muted); }
.cp-num--ok b { color: var(--hc-ok); } .cp-num--bad b { color: var(--hc-bad); } .cp-num--wait b { color: var(--hc-wait); }
.cp-num.is-on { border-color: var(--hc-pri); box-shadow: 0 0 0 2px var(--hc-soft); }
.cp-num:disabled { cursor: default; } .cp-num:disabled b { color: var(--hc-muted); }

/* the one action: a pill; Open is quiet */
.cp-act { flex: none; background: var(--hc-pri); color: var(--hc-on) !important; font-weight: 600; font-size: 13px; padding: 5px 14px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.cp-act--quiet { background: var(--hc-card); color: var(--hc-pri) !important; border: 1px solid var(--hc-line); }

/* ADD A CONNECTION */
.cp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.cp-tile { display: grid; align-content: start; gap: 6px; padding: 14px; min-width: 0; }
.cp-tile.is-on { box-shadow: 0 0 0 2px var(--hc-pri); }
.cp-tile__name { font-size: 15px; }
.cp-tile__btns { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.cp-how-b { background: none; border: 0; padding: 4px 2px; color: var(--hc-pri); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cp-how:empty { display: none; }
.cp-how { margin-top: 12px; }
.cp-how__in { display: grid; gap: 8px; max-width: 520px; padding: 10px; border-radius: 14px; }
.cp-how__in .hc-cap { min-height: 22px; }
.cp-own { margin: 10px 0 0; }

/* CONNECTED */
.cp-listhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.cp-listhead .cp-h { margin: 0; margin-right: auto; }
.cp-search { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; color: var(--hc-muted); }
.cp-search input { border: 0; background: transparent; color: var(--hc-ink); font: inherit; font-size: 13px; width: 150px; outline: none; }
.cp-view { display: inline-flex; padding: 3px; border-radius: 999px; }
.cp-view__b { background: none; border: 0; padding: 4px 12px; border-radius: 999px; color: var(--hc-muted); font: inherit; font-size: 13px; cursor: pointer; }
.cp-view__b.is-on { color: var(--hc-ink); font-weight: 600; }
.cp-group { margin-bottom: 12px; }
.cp-group__h { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; font-size: 14px; color: var(--hc-ink); margin-bottom: 8px; list-style: none; }
.cp-group__h::-webkit-details-marker { display: none; }
.cp-group__h::after { content: '▸'; color: var(--hc-muted); transition: transform .2s; }
.cp-group[open] > .cp-group__h::after { transform: rotate(90deg); }
.cp-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cp-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-width: 0; }
.cp-row__main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cp-row__name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--hc-bar); }
.cp-dot--ok { background: var(--hc-ok); } .cp-dot--bad { background: var(--hc-bad); } .cp-dot--warn { background: var(--hc-wait); }
.cp-st { font-weight: 600; } .cp-st--ok { color: var(--hc-ok); } .cp-st--bad { color: var(--hc-bad); } .cp-st--warn { color: var(--hc-wait); }
.cp-wait .cp-row { border-left: 3px solid var(--hc-wait); }

/* SETTINGS */
.cp-set__h { cursor: pointer; list-style: none; margin: 0; }
.cp-set__h::-webkit-details-marker { display: none; }
.cp-set__h::after { content: '▸'; color: var(--hc-muted); transition: transform .2s; }
.cp-set[open] > .cp-set__h::after { transform: rotate(90deg); }
.cp-set__in { display: grid; gap: 12px; margin-top: 10px; }
.cp-set__row { display: flex; align-items: flex-start; gap: 12px; }
.cp-set__row > div { display: grid; gap: 2px; }

@media (prefers-reduced-motion: reduce) {
  .cp *, .cp *::after { transition: none !important; }
}
@media (max-width: 560px) {
  .cp-strip { gap: 8px; } .cp-num { padding: 10px; } .cp-num b { font-size: 22px; } .cp-num span { font-size: 12px; }
  .cp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cp-tile { padding: 10px; } .cp-ic--big { width: 36px; height: 36px; font-size: 18px; }
  .cp-search input { width: 110px; }
  .cp-row { padding: 10px; gap: 10px; }
}

/* Run view v2, Part C: the lanes strip, "Show it in 3D" (runlanes.jsx). One row of 28px per system; the 3D canvas spans the rows on the right. */
.rvl { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.rvl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--muted); }
.rvl-switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.rvl-none { color: var(--muted); font-style: italic; }
.rvl-grid { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); grid-auto-rows: 28px; column-gap: 10px; padding: 4px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg, #fff); }
.rvl-label { grid-column: 1; display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.rvl-label b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.rvl-label span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rvl-label.failed span { color: var(--warm); }
.rvl-label.waiting span { color: var(--amber, #d48806); }
.rvl-canvas { grid-column: 2; grid-row: 1 / span var(--rvl-n); width: 100%; height: 100%; display: block; }
/* 2D: the same lane, a track from the agent to the system with a dot where the call is. */
.rvl-track { grid-column: 2; position: relative; align-self: center; height: 4px; border-radius: 2px; background: var(--line); }
.rvl-track::after { content: ''; position: absolute; right: -2px; top: -5px; width: 14px; height: 14px; border-radius: 3px; background: var(--line); }
.rvl-track i { position: absolute; top: -4px; left: 0; width: 12px; height: 12px; border-radius: 3px; background: var(--muted); transition: left .5s ease; }
.rvl-track.running i { left: calc(100% - 26px); background: var(--brand); }
.rvl-track.waiting i { left: calc(50% - 6px); background: var(--amber, #d48806); }
.rvl-track.failed i { left: calc(100% - 26px); background: var(--warm); opacity: .6; }
.rvl-track.answered i { background: var(--green); }
.rvl-track.running::after { background: var(--brand); }
.rvl-track.answered::after { background: var(--green); }
.rvl-track.failed::after { background: var(--warm); }
.rvl-track.waiting::after { background: var(--amber, #d48806); }
@media (prefers-reduced-motion: reduce) { .rvl-track i { transition: none; } }
@media (max-width: 480px) { .rvl-grid { grid-template-columns: minmax(0, 55%) minmax(0, 1fr); } }

/* DCC Agent Office, the redesigned look (UI redesign 2026-10-21, step 1: brand tokens and shared components).
   CONTRACT: every rule in this file starts with .nx-root (the root class of the new shell; portals that must wear the look, such as the side panel and menus, are given
   rootClassName="nx-root"). Classic never carries .nx-root, so it is not touched. Only @font-face, @keyframes nx-* and @media wrappers are allowed outside a
   .nx-root selector; the test web/test/nx-css-scoped.test.js enforces it. Names: --nx-* tokens, .nx-* classes. Page builders use ONLY these. */

/* ---------------------------------------------------------------- font: Figtree, served from our own origin (CSP font-src 'self'), Latin only; CJK falls back */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('/fonts/figtree-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------------------------------------------------------------- tokens. THEMES (21 Oct, our own pack): every colour below is taken from the --color-* tokens of web/src/themes.css, which each of the seven palettes
   (Daylight, Midnight, Aurora, Dune, Forest, Ember, Ocean; "Use system appearance" resolves to Daylight or Midnight) redefines, so the look follows the chosen theme with no per-theme rules here, except
   the tokens themes.css has no name for (the menu column, the menu pill, the count badge, the lifted-card shadow): the per-palette blocks right after this one. Corner roundness (--rad), motion speed (--spd),
   the backdrop (--back) and the shadow style (--shadow-card) come from the palette too; the Customizer (nx-customizer.jsx) overrides --rad and --spd on <html>. No rule below this block may
   carry a hard colour (qa-2026-10-21-nx-themes.test.js); tools/nx-contrast.mjs checks the contrast of every pair in every theme. */
.nx-root {
  /* surfaces and text */
  --nx-bg: var(--color-bg); --nx-surface: var(--color-surface); --nx-hover: var(--color-surface-hover); --nx-text: var(--color-text-primary); --nx-muted: var(--color-text-muted);
  --nx-line: var(--color-border); --nx-control-line: var(--color-control-border);
  /* the accent: fills (primary button, avatar, current-tab line), its text on a fill, its soft tint and the text that sits on the tint or on a surface */
  --nx-blue: var(--color-accent); --nx-on-blue: var(--color-on-accent); --nx-blue-soft: var(--color-accent-soft); --nx-blue-text: var(--color-accent-text); --nx-link: var(--color-link); --nx-cyan: var(--color-accent-2);
  /* status: a dot or line (--nx-success ...) and a pill (soft ground + text); a pill always has a word */
  --nx-amber: var(--color-warning); --nx-success: var(--color-success); --nx-danger: var(--color-error);
  --nx-amber-soft: var(--color-warning-soft); --nx-amber-text: var(--color-warning); --nx-ok-soft: var(--color-success-soft); --nx-ok-text: var(--color-success); --nx-bad-soft: var(--color-error-soft); --nx-bad-text: var(--color-error);
  --nx-focus: var(--color-focus); --nx-focus-ring: 3px solid var(--nx-focus);
  --nx-shadow: var(--shadow-card); --nx-back: var(--back, none);
  /* space (4 pt grid), radius (the theme's --rad), motion (the theme's --spd), type */
  --nx-s1: 4px; --nx-s2: 8px; --nx-s3: 12px; --nx-s4: 16px; --nx-s5: 20px; --nx-s6: 24px; --nx-s7: 32px; --nx-s8: 40px;
  --nx-r1: calc(var(--rad, 14px) * .6); --nx-r2: var(--rad, 14px); --nx-rfull: 999px;
  --nx-d1: calc(120ms * var(--spd, 1)); --nx-d2: calc(200ms * var(--spd, 1)); --nx-d3: calc(340ms * var(--spd, 1)); --nx-curve: cubic-bezier(.2, .7, .2, 1);
  --nx-ease: var(--nx-d2); --nx-tap: 40px;
  --nx-plate: #FFFFFF;   /* the plate behind the company logo (W6b): white on every theme, so a logo drawn for a white page reads on a dark menu column too */
  --nx-font: 'Figtree', 'Segoe UI', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
  --nx-fs-h1: 28px; --nx-fs-h2: 24px; --nx-fs-h3: 18px; --nx-fs-body: 15px; --nx-fs-small: 13px;
  --nx-header-h: 60px; --nx-side-w: 248px; --nx-rail-w: 68px; --nx-bar-h: 64px; --nx-comp-top: 0px; --nx-menu-w: var(--nx-rail-w);
  font-family: var(--nx-font); font-size: var(--nx-fs-body); color: var(--nx-text);
}
/* the menu column, the menu pill (the current item), the count badge and the lifted-card shadow of each theme */
[data-palette="daylight"] .nx-root {
  --nx-side: #FFFFFF; --nx-side-text: #4B5578; --nx-side-strong: #161E40; --nx-side-line: #E4E8F2; --nx-side-hover: rgba(63, 87, 211, 0.1); --nx-side-press: rgba(63, 87, 211, 0.18); --nx-side-focus: #3F57D3;
  --nx-pill-a: #3F57D3; --nx-pill-b: #167D93; --nx-pill: linear-gradient(135deg, #3F57D3, #167D93); --nx-pill-text: #FFFFFF;
  --nx-badge-bg: #C6850C; --nx-badge-text: #2B1C00;
  --nx-lift: 0 2px 4px rgba(22, 30, 64, 0.08), 0 22px 36px -16px rgba(22, 30, 64, 0.38); --nx-panel-shadow: -20px 0 40px -20px rgba(22, 30, 64, 0.3); --nx-scrim: rgba(22, 30, 64, 0.45);
}
[data-palette="midnight"] .nx-root {
  --nx-side: #0D1731; --nx-side-text: #AEBBDD; --nx-side-strong: #FFFFFF; --nx-side-line: rgba(255, 255, 255, 0.14); --nx-side-hover: rgba(255, 255, 255, 0.09); --nx-side-press: rgba(255, 255, 255, 0.16); --nx-side-focus: #22C3E6;
  --nx-pill-a: #6379DE; --nx-pill-b: #22C3E6; --nx-pill: linear-gradient(135deg, #6379DE, #22C3E6); --nx-pill-text: #0A1226;
  --nx-badge-bg: #F2A20F; --nx-badge-text: #2B1C00;
  --nx-lift: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 22px 36px -16px rgba(0, 0, 0, .8); --nx-panel-shadow: -20px 0 40px -20px rgba(0, 0, 0, .7); --nx-scrim: rgba(0, 0, 0, 0.62);
}
[data-palette="aurora"] .nx-root {
  --nx-side: #0C1228; --nx-side-text: #B9C1E6; --nx-side-strong: #FFFFFF; --nx-side-line: rgba(255, 255, 255, 0.14); --nx-side-hover: rgba(255, 255, 255, 0.09); --nx-side-press: rgba(255, 255, 255, 0.16); --nx-side-focus: #2DD4BF;
  --nx-pill-a: #9283FF; --nx-pill-b: #2DD4BF; --nx-pill: linear-gradient(135deg, #9283FF, #2DD4BF); --nx-pill-text: #0A0F1F;
  --nx-badge-bg: #F2A20F; --nx-badge-text: #2B1C00;
  --nx-lift: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 22px 36px -16px rgba(0, 0, 0, .8); --nx-panel-shadow: -20px 0 40px -20px rgba(0, 0, 0, .7); --nx-scrim: rgba(0, 0, 0, 0.62);
}
[data-palette="dune"] .nx-root {
  --nx-side: #1B2A24; --nx-side-text: #C6D2CB; --nx-side-strong: #FFFFFF; --nx-side-line: rgba(255, 255, 255, 0.14); --nx-side-hover: rgba(255, 255, 255, 0.09); --nx-side-press: rgba(255, 255, 255, 0.16); --nx-side-focus: #B88A2E;
  --nx-pill-a: #1F6F5B; --nx-pill-b: #1F6F5B; --nx-pill: linear-gradient(135deg, #1F6F5B, #1F6F5B); --nx-pill-text: #FFFFFF;
  --nx-badge-bg: #F2A20F; --nx-badge-text: #2B1C00;
  --nx-lift: 0 2px 4px rgba(27, 42, 36, 0.08), 0 22px 36px -16px rgba(27, 42, 36, 0.38); --nx-panel-shadow: -20px 0 40px -20px rgba(27, 42, 36, 0.3); --nx-scrim: rgba(27, 42, 36, 0.45);
}
[data-palette="forest"] .nx-root {
  --nx-side: #051812; --nx-side-text: #A5D2C2; --nx-side-strong: #FFFFFF; --nx-side-line: rgba(255, 255, 255, 0.14); --nx-side-hover: rgba(255, 255, 255, 0.09); --nx-side-press: rgba(255, 255, 255, 0.16); --nx-side-focus: #A3E635;
  --nx-pill-a: #10B981; --nx-pill-b: #A3E635; --nx-pill: linear-gradient(135deg, #10B981, #A3E635); --nx-pill-text: #07201A;
  --nx-badge-bg: #F2A20F; --nx-badge-text: #2B1C00;
  --nx-lift: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 22px 36px -16px rgba(0, 0, 0, .8); --nx-panel-shadow: -20px 0 40px -20px rgba(0, 0, 0, .7); --nx-scrim: rgba(0, 0, 0, 0.62);
}
[data-palette="ember"] .nx-root {
  --nx-side: #100C09; --nx-side-text: #E2C7B0; --nx-side-strong: #FFFFFF; --nx-side-line: rgba(255, 255, 255, 0.14); --nx-side-hover: rgba(255, 255, 255, 0.09); --nx-side-press: rgba(255, 255, 255, 0.16); --nx-side-focus: #FDE047;
  --nx-pill-a: #F97316; --nx-pill-b: #FDE047; --nx-pill: linear-gradient(135deg, #F97316, #FDE047); --nx-pill-text: #16110E;
  --nx-badge-bg: #FFD23F; --nx-badge-text: #2B1C00;
  --nx-lift: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 22px 36px -16px rgba(0, 0, 0, .8); --nx-panel-shadow: -20px 0 40px -20px rgba(0, 0, 0, .7); --nx-scrim: rgba(0, 0, 0, 0.62);
}
[data-palette="ocean"] .nx-root {
  --nx-side: #0B3A57; --nx-side-text: #BFE0F0; --nx-side-strong: #FFFFFF; --nx-side-line: rgba(255, 255, 255, 0.14); --nx-side-hover: rgba(255, 255, 255, 0.09); --nx-side-press: rgba(255, 255, 255, 0.16); --nx-side-focus: #22D3EE;
  --nx-pill-a: #0369A1; --nx-pill-b: #147F8F; --nx-pill: linear-gradient(135deg, #0369A1, #147F8F); --nx-pill-text: #FFFFFF;
  --nx-badge-bg: #F2A20F; --nx-badge-text: #2B1C00;
  --nx-lift: 0 2px 4px rgba(11, 47, 69, 0.08), 0 22px 36px -16px rgba(11, 47, 69, 0.38); --nx-panel-shadow: -20px 0 40px -20px rgba(11, 47, 69, 0.3); --nx-scrim: rgba(11, 47, 69, 0.45);
}

/* ---------------------------------------------------------------- base: focus, targets, motion */
.nx-root :focus-visible { outline: var(--nx-focus-ring); outline-offset: 2px; border-radius: 6px; }
.nx-root .nx-side :focus-visible, .nx-root .nx-bar :focus-visible { outline-color: var(--nx-side-focus); }   /* the sidebar is its own ground: its own ring colour */
.nx-root .nx-tap { min-height: var(--nx-tap); min-width: var(--nx-tap); }
@media (prefers-reduced-motion: reduce) {
  .nx-root *, .nx-root *::before, .nx-root *::after { animation: none !important; transition: none !important; }
}
.nx-root .nx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- type */
.nx-root .nx-h1 { font-size: var(--nx-fs-h1); line-height: 1.2; font-weight: 800; letter-spacing: -.3px; margin: 0; color: var(--nx-text); }
.nx-root .nx-h2 { font-size: var(--nx-fs-h2); line-height: 1.25; font-weight: 700; margin: 0; color: var(--nx-text); }
.nx-root .nx-h3 { font-size: var(--nx-fs-h3); line-height: 1.3; font-weight: 700; margin: 0 0 var(--nx-s3); color: var(--nx-text); }
.nx-root .nx-sub { color: var(--nx-muted); margin: var(--nx-s1) 0 0; }
.nx-root .nx-small { font-size: var(--nx-fs-small); color: var(--nx-muted); }

/* ---------------------------------------------------------------- page, card, buttons */
.nx-root .nx-page { padding: 0; width: 100%; min-width: 0; }   /* FULL WIDTH (21 Oct): no centred column; the gutter is .nx-content's padding */
.nx-root .content-inner { max-width: none; margin: 0; }   /* old pages mounted in the frame fill the width too (Classic keeps its 1280 px cap: this rule needs .nx-root) */
.nx-root .nx-card { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s5); box-shadow: var(--nx-shadow); }
.nx-root .nx-card--flush { padding: 0; overflow: hidden; }
.nx-root .nx-section { display: flex; align-items: baseline; gap: var(--nx-s3); margin: var(--nx-s7) 0 var(--nx-s3); }
.nx-root .nx-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--nx-s2); min-height: var(--nx-tap); padding: 0 var(--nx-s4); border: 1px solid var(--nx-control-line); border-radius: 10px; background: var(--nx-surface); color: var(--nx-text); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; transition: filter var(--nx-ease), background var(--nx-ease); }
.nx-root .nx-btn:hover { filter: brightness(.97); }
.nx-root .nx-btn--primary { background: var(--nx-blue); border-color: var(--nx-blue); color: var(--nx-on-blue); }
.nx-root .nx-btn--primary:hover { filter: brightness(1.07); }
.nx-root .nx-btn--danger { background: var(--nx-bad-soft); border-color: transparent; color: var(--nx-bad-text); }
.nx-root .nx-btn--ghost { background: transparent; border-color: transparent; }
.nx-root .nx-btn[disabled], .nx-root .nx-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.nx-root .nx-link { color: var(--nx-link); font-weight: 700; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }

/* ---------------------------------------------------------------- status pill: ALWAYS a word (colour never alone); optional leading glyph via .nx-pill__ico */
.nx-root .nx-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--nx-rfull); padding: 2px 10px; font-size: var(--nx-fs-small); font-weight: 700; line-height: 1.5; background: var(--nx-blue-soft); color: var(--nx-blue-text); white-space: nowrap; }
.nx-root .nx-pill--ok { background: var(--nx-ok-soft); color: var(--nx-ok-text); }
.nx-root .nx-pill--warn { background: var(--nx-amber-soft); color: var(--nx-amber-text); }
.nx-root .nx-pill--bad { background: var(--nx-bad-soft); color: var(--nx-bad-text); }
.nx-root .nx-pill--gray { background: var(--nx-bg); color: var(--nx-muted); border: 1px solid var(--nx-line); }
.nx-root .nx-pill__ico { font-weight: 800; }

/* ---------------------------------------------------------------- item row: dot, title, one line, one button. Type label = a pill. */
.nx-root .nx-list { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); overflow: hidden; }
.nx-root .nx-item { display: flex; align-items: center; gap: var(--nx-s4); padding: var(--nx-s3) var(--nx-s4); border-bottom: 1px solid var(--nx-line); min-height: 56px; }
.nx-root .nx-item:last-child { border-bottom: 0; }
.nx-root .nx-item__main { flex: 1; min-width: 0; }
.nx-root .nx-item__title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-item__meta { color: var(--nx-muted); font-size: var(--nx-fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--nx-line); }
.nx-root .nx-dot--amber { background: var(--nx-amber); }
.nx-root .nx-dot--blue { background: var(--nx-blue); }
.nx-root .nx-dot--ok { background: var(--nx-success); }
.nx-root .nx-dot--bad { background: var(--nx-danger); }

/* ---------------------------------------------------------------- approval card: what it allows, tests, who decides, buttons */
.nx-root .nx-approval { background: var(--nx-surface); border: 1px solid var(--nx-line); border-left: 4px solid var(--nx-amber); border-radius: var(--nx-r2); padding: var(--nx-s5); box-shadow: var(--nx-shadow); display: grid; gap: var(--nx-s3); }
.nx-root .nx-approval__head { display: flex; align-items: center; gap: var(--nx-s3); flex-wrap: wrap; }
.nx-root .nx-approval__title { font-size: var(--nx-fs-h3); font-weight: 700; flex: 1; min-width: 0; }
.nx-root .nx-approval__block { display: grid; gap: var(--nx-s1); }
.nx-root .nx-approval__label { font-size: var(--nx-fs-small); font-weight: 700; color: var(--nx-muted); }
.nx-root .nx-approval__list { margin: 0; padding-left: var(--nx-s5); }
.nx-root .nx-approval__actions { display: flex; gap: var(--nx-s2); flex-wrap: wrap; }

/* ---------------------------------------------------------------- empty state: says what to do next */
.nx-root .nx-empty { text-align: center; padding: var(--nx-s8) var(--nx-s4); color: var(--nx-muted); display: grid; gap: var(--nx-s2); justify-items: center; }
.nx-root .nx-empty__title { font-weight: 700; color: var(--nx-text); font-size: var(--nx-fs-h3); }
.nx-root .nx-empty__text { max-width: 44ch; }

/* ---------------------------------------------------------------- confirm card: what I understood, before any send, change, schedule or spend */
.nx-root .nx-confirm { border: 1.5px solid var(--nx-blue-text); background: var(--nx-blue-soft); border-radius: var(--nx-r2); padding: var(--nx-s4); display: grid; gap: var(--nx-s3); }
.nx-root .nx-confirm__facts { display: grid; grid-template-columns: minmax(96px, 130px) 1fr; gap: 6px var(--nx-s3); margin: 0; }
.nx-root .nx-confirm__facts dt { color: var(--nx-muted); font-weight: 700; }
.nx-root .nx-confirm__facts dd { margin: 0; }
.nx-root .nx-confirm__actions { display: flex; gap: var(--nx-s2); flex-wrap: wrap; }

/* ---------------------------------------------------------------- tabs (a place's tab strip: links, the current one marked by line AND weight) */
.nx-root .nx-tabs { display: flex; gap: var(--nx-s1); border-bottom: 1px solid var(--nx-line); margin: 0 0 var(--nx-s5); overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--nx-control-line) transparent; }
.nx-root .nx-tab { display: inline-flex; align-items: center; gap: 6px; min-height: var(--nx-tap); padding: 0 14px; font-weight: 600; color: var(--nx-muted); border-bottom: 3px solid transparent; white-space: nowrap; text-decoration: none; }
.nx-root .nx-tab:hover { color: var(--nx-text); }
.nx-root .nx-tab[aria-current="page"] { color: var(--nx-text); font-weight: 800; border-color: var(--nx-blue); }
.nx-root .nx-pv-banner { margin: 0 0 var(--nx-s3); padding: var(--nx-s2) var(--nx-s3); border: 1px solid var(--nx-line); border-radius: 10px; background: var(--nx-blue-soft); color: var(--nx-text); }
.nx-root .nx-pv-ro .nx-btn--primary, .nx-root .nx-pv-ro .nx-btn--danger { display: none; }   /* view only: the buttons that change something are not drawn (the pages' writes answer View only anyway) */
.nx-root .nx-count { background: var(--nx-badge-bg); color: var(--nx-badge-text); border-radius: var(--nx-rfull); font-size: 12px; font-weight: 800; padding: 1px 8px; line-height: 1.4; }

/* ---------------------------------------------------------------- SHELL (step 2) */
.nx-root.nx-shell { display: block; min-height: calc(100 * var(--ao-vh)); background-color: var(--nx-bg); background-image: var(--nx-back); background-attachment: fixed; --nx-menu-w: var(--nx-rail-w); }
.nx-root.nx-shell.is-open { --nx-menu-w: var(--nx-side-w); }
.nx-root .nx-side { background: var(--nx-side); color: var(--nx-side-text); padding: 18px 12px; display: flex; flex-direction: column; gap: var(--nx-s1); position: fixed; left: 0; top: 0; bottom: 0; width: var(--nx-menu-w); z-index: 70; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; border-right: 1px solid var(--nx-side-line); transition: width var(--nx-d3) var(--nx-curve), box-shadow var(--nx-d3); }
/* the menu still scrolls (wheel, touch, keys) but shows no scrollbar (23 Oct 2026, Sheraz: hide the slider of the menu) */
.nx-root .nx-side::-webkit-scrollbar { display: none; width: 0; height: 0; }
.nx-root .nx-brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 18px; color: var(--nx-side-strong); text-decoration: none; }
.nx-root .nx-brand__mark { width: 38px; height: 38px; flex: none; display: block; }
.nx-root .nx-brand__name { display: block; font-weight: 800; font-size: 18px; letter-spacing: .4px; line-height: 1.1; color: var(--nx-side-strong); }
.nx-root .nx-brand__sub { display: block; font-size: var(--nx-fs-small); font-weight: 500; color: var(--nx-side-text); }
.nx-root .nx-nav { display: flex; align-items: center; gap: 12px; min-height: var(--nx-tap); padding: 8px 12px; border-radius: 10px; font-weight: 600; color: var(--nx-side-text); width: 100%; text-align: left; text-decoration: none; border: 0; background: none; font-family: inherit; font-size: var(--nx-fs-body); cursor: pointer; }
.nx-root .nx-nav:hover { background: var(--nx-side-hover); color: var(--nx-side-strong); }
.nx-root .nx-nav[aria-current="page"] { background: var(--nx-pill); color: var(--nx-pill-text); box-shadow: 0 8px 18px -10px var(--nx-blue); }
.nx-root .nx-nav__ico { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-nav__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity var(--nx-d2); }
.nx-root .nx-nav .nx-count { margin-left: auto; }
.nx-root .nx-nav[data-place="admin"] .nx-count { background: var(--nx-bad-soft); color: var(--nx-bad-text); box-shadow: 0 0 0 2px var(--nx-danger) inset; }   /* Admin's number is red: something waits for a decision */
.nx-root .nx-side__divider { border: 0; border-top: 1px solid var(--nx-side-line); margin: 10px 8px; width: auto; }
.nx-root .nx-side__grow { flex: 1; }
.nx-root .nx-side__label { padding: 10px 12px 2px; font-size: var(--nx-fs-small); font-weight: 700; color: var(--nx-side-text); opacity: .8; }
.nx-root .nx-nav--small { font-size: var(--nx-fs-small); padding-left: 20px; }
.nx-root .nx-main { min-width: 0; display: flex; flex-direction: column; margin-left: var(--nx-menu-w); transition: margin var(--nx-d3) var(--nx-curve); position: relative; z-index: 1; }
.nx-root .nx-header { display: flex; align-items: center; gap: 10px; padding: 8px 16px; min-height: var(--nx-header-h); margin: 12px 28px 0; border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: color-mix(in srgb, var(--nx-surface) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--nx-shadow); position: sticky; top: 12px; z-index: 50; }
.nx-root .nx-header__mark { display: none; width: 34px; height: 34px; }
.nx-root .nx-search { flex: 1; max-width: 520px; min-height: var(--nx-tap); display: flex; align-items: center; gap: 10px; border: 1px solid var(--nx-control-line); border-radius: var(--nx-rfull); padding: 0 16px; color: var(--nx-muted); background: var(--nx-bg); text-align: left; font: inherit; cursor: pointer; min-width: 0; }
.nx-root .nx-search__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nx-root .nx-search kbd { margin-left: auto; font: 600 12px var(--nx-font); border: 1px solid var(--nx-line); border-radius: 6px; padding: 0 6px; background: var(--nx-surface); color: var(--nx-muted); }
.nx-root .nx-header__right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.nx-root .nx-iconbtn { position: relative; width: var(--nx-tap); height: var(--nx-tap); border-radius: 50%; display: inline-grid; place-items: center; color: var(--nx-text); background: none; border: 0; cursor: pointer; font: inherit; text-decoration: none; }
.nx-root .nx-iconbtn:hover { background: var(--nx-hover); }
.nx-root .nx-iconbtn svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-iconbtn .nx-count { position: absolute; top: 0; right: -2px; font-size: 11px; padding: 0 6px; }
.nx-root .nx-lang { min-height: var(--nx-tap); font-weight: 700; font-size: var(--nx-fs-small); border: 1px solid var(--nx-control-line); border-radius: var(--nx-rfull); padding: 0 12px; background: none; color: var(--nx-text); cursor: pointer; font-family: inherit; }
.nx-root .nx-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--nx-blue); color: var(--nx-on-blue); display: inline-grid; place-items: center; font-weight: 800; flex: none; }
.nx-root .nx-me { display: inline-flex; align-items: center; gap: 8px; min-height: var(--nx-tap); padding: 0 4px 0 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--nx-text); border-radius: var(--nx-rfull); }
.nx-root .nx-me__text { text-align: left; line-height: 1.2; max-width: 150px; }
.nx-root .nx-me__text b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-me__text small { display: block; color: var(--nx-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-content { padding: 28px 28px 20px; min-width: 0; }
.nx-root .nx-bar { display: none; }
.nx-root .nx-menu { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); padding: 8px; min-width: 240px; max-width: calc(calc(100 * var(--ao-vw)) - 24px); }
.nx-root .nx-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--nx-tap); padding: 8px 12px; border-radius: 8px; font-weight: 500; text-align: left; color: var(--nx-text); background: none; border: 0; cursor: pointer; font: inherit; text-decoration: none; }
.nx-root .nx-menu__item:hover { background: var(--nx-hover); }
.nx-root .nx-menu__head { display: block; color: var(--nx-muted); padding: 8px 12px 2px; font-weight: 700; font-size: var(--nx-fs-small); }
.nx-root .nx-menu__sep { border: 0; border-top: 1px solid var(--nx-line); margin: 6px 0; }
.nx-root .nx-denied { max-width: 560px; margin: var(--nx-s8) auto; text-align: center; display: grid; gap: var(--nx-s3); justify-items: center; }

@media (max-width: 860px) {
  .nx-root .nx-side { display: none; }
  .nx-root .nx-main { margin-left: 0; }
  .nx-root .nx-header, .nx-root.is-bar-static .nx-header { padding: 6px 10px; gap: 6px; margin: 8px 10px 0; top: 8px; border: 1px solid var(--nx-line); border-radius: var(--nx-r2); border-width: 1px; }
  .nx-root .nx-header__mark { display: block; flex: none; }
  .nx-root .nx-search { flex: none; max-width: none; padding: 0 12px; width: var(--nx-tap); justify-content: center; }
  .nx-root .nx-search__text, .nx-root .nx-search kbd, .nx-root .nx-me__text { display: none; }
  .nx-root .nx-content { padding: 16px 16px calc(var(--nx-bar-h) + 24px + env(safe-area-inset-bottom)); }
  .nx-root .nx-page { padding: 18px 0; }
  .nx-root .nx-h1 { font-size: 24px; }
  .nx-root .nx-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: var(--nx-side); border-top: 1px solid var(--nx-side-line); padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); min-height: var(--nx-bar-h); }
  .nx-root .nx-bar .nx-nav { flex-direction: column; gap: 2px; font-size: 11px; padding: 6px 2px; text-align: center; justify-content: center; align-items: center; min-width: var(--nx-tap); }
  .nx-root .nx-bar .nx-nav[aria-current="page"] { box-shadow: none; background: var(--nx-pill); color: var(--nx-pill-text); }
  .nx-root .nx-bar .nx-nav .nx-count { margin: 0; position: absolute; top: 2px; right: 14%; }
  .nx-root .nx-bar .nx-nav { position: relative; }
  .nx-root .nx-confirm__facts { grid-template-columns: 1fr; }
}
.nx-root .nx-skip { position: absolute; left: 8px; top: -60px; z-index: 2000; background: var(--nx-surface); color: var(--nx-text); padding: 8px 14px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.nx-root .nx-skip:focus { top: 8px; }
.nx-root .nx-search-gap { flex: 1; }
.nx-root .nx-search__ico, .nx-root .nx-iconbtn__ico { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-menuwrap { position: relative; }
.nx-root .nx-menu--right { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; max-height: calc(calc(100 * var(--ao-vh)) - 90px); overflow-y: auto; }
.nx-root .nx-menu__row { padding: 4px 8px; }
.nx-root .nx-menu__row .ant-btn { width: 100%; justify-content: flex-start; min-height: var(--nx-tap); }
.nx-root #nx-main:focus { outline: none; }
/* one plain sentence under the tabs, the filter chip and its Clear filter button, the More list of Work */
.nx-root .nx-tabsub { margin: 0 0 var(--nx-s4); color: var(--nx-muted); }
.nx-root .nx-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2) var(--nx-s3); margin: 0 0 var(--nx-s3); }
.nx-root .nx-filter__chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--nx-s3); border-radius: var(--nx-rfull); background: var(--nx-blue-soft); color: var(--nx-blue-text); border: 1px solid var(--nx-blue-text); font-weight: 800; }
.nx-root .nx-filter__pick { display: inline-flex; align-items: center; gap: var(--nx-s2); color: var(--nx-muted); font-weight: 600; }
.nx-root .nx-select { min-height: var(--nx-tap); padding: 0 var(--nx-s3); border: 1px solid var(--nx-control-line); border-radius: 10px; background: var(--nx-surface); color: var(--nx-text); font: inherit; }
.nx-root .nx-tabs--more { overflow: visible; flex-wrap: wrap; }
.nx-root .nx-more { position: relative; margin-left: auto; }
.nx-root .nx-more > summary { list-style: none; cursor: pointer; }
.nx-root .nx-more > summary::-webkit-details-marker { display: none; }
.nx-root .nx-more > summary::after { content: '\25BE'; margin-left: 4px; }
.nx-root .nx-more__on { color: var(--nx-text); font-weight: 800; border-color: var(--nx-blue); }
.nx-root .nx-more__list { position: absolute; right: 0; top: 100%; z-index: 40; min-width: 220px; }
.nx-root .nx-more__list .nx-menu__item[aria-current="page"] { font-weight: 800; background: var(--nx-hover); }
/* header: New | Classic pill and the theme icon, 40 px targets */
.nx-root .nx-header .ant-segmented { padding: 4px; background: var(--nx-bg); border: 1px solid var(--nx-control-line); border-radius: var(--nx-rfull); flex: none; }
.nx-root .nx-header .ant-segmented .ant-segmented-item { border-radius: var(--nx-rfull); }
.nx-root .nx-header .ant-segmented .ant-segmented-item-label { min-height: 30px; line-height: 30px; padding: 0 12px; font-weight: 700; font-family: var(--nx-font); }
.nx-root .nx-header .ant-segmented .ant-segmented-thumb { border-radius: var(--nx-rfull); }
.nx-root .nx-themebtn .ant-btn { width: var(--nx-tap); height: var(--nx-tap); border-radius: 50%; padding: 0; color: var(--nx-text); }
.nx-root .nx-menu__row .ant-segmented { margin-top: 4px; }
.nx-root .nx-menu__rowlabel { display: block; color: var(--nx-muted); font-size: var(--nx-fs-small); font-weight: 700; }
.nx-root .nx-assist.as-float { top: 0; right: 0; bottom: 0; left: auto; align-items: stretch; justify-content: flex-start; z-index: 1050; }
.nx-root .nx-assist:not(:has(.as-panel)) { top: auto; left: auto; right: 20px; bottom: 20px; }
.nx-root .nx-assist__fab { width: 56px; height: 56px; }
@media (max-width: 900px) { .nx-root .nx-assist:not(:has(.as-panel)) { right: 14px; bottom: calc(76px + env(safe-area-inset-bottom)); } }
.nx-root .nx-assist .as-panel { width: min(440px, calc(100 * var(--ao-vw))); height: calc(100 * var(--ao-vh)); max-height: none; border-radius: 0; border-top: 0; border-bottom: 0; border-right: 0; box-shadow: var(--nx-panel-shadow); }
@keyframes nx-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-menu, .nx-root .nx-confirm { animation: nx-in var(--nx-ease) ease-out; }
}

/* ---------------------------------------------------------------- LAYOUT CONTRACT (full width, 21 Oct). Page builders (Home, Work, Agents, Library, Admin) use ONLY these:
   .nx-grid      responsive columns that fill the row (min 340 px each)
   .nx-split     a main column and a side column (preview / right column); the side is .nx-split__side and stays in view while the list scrolls
   .nx-cardgrid  cards that fill the row (min 260 px each)
   Under 1100 px a split is one column and its preview pane is hidden (every row keeps its own button). */
.nx-root .nx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: var(--nx-s5); align-items: start; min-width: 0; }
.nx-root .nx-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--nx-s4); align-items: stretch; min-width: 0; }
.nx-root .nx-split { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); gap: var(--nx-s5); align-items: start; min-width: 0; }
.nx-root .nx-split > * { min-width: 0; }
.nx-root .nx-split__side { position: sticky; top: calc(var(--nx-header-h) + 12px + var(--nx-s4)); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nx-s5); align-self: start; }
.nx-root .nx-split--home { grid-template-columns: minmax(0, 1.2fr) minmax(400px, 1fr); }
.nx-root .nx-split--home .nx-section:first-child { margin-top: 0; }
.nx-root .nx-section--first { margin-top: 0; }
.nx-root .nx-preview { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); padding: var(--nx-s5); display: grid; gap: var(--nx-s3); }
.nx-root .nx-preview__title { font-size: var(--nx-fs-h3); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.nx-root .nx-preview__lines { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--nx-s2); color: var(--nx-muted); }
.nx-root .nx-preview__lines li { overflow-wrap: anywhere; }
.nx-root .nx-preview__lines li:first-child { color: var(--nx-text); }
.nx-root .nx-item[data-selectable] { cursor: pointer; }
.nx-root .nx-item[data-selectable]:hover { background: var(--nx-hover); }
.nx-root .nx-item[aria-current="true"] { background: var(--nx-blue-soft); box-shadow: inset 3px 0 0 var(--nx-blue-text); }
@media (max-width: 1100px) {
  .nx-root .nx-split, .nx-root .nx-split--home { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-split__side { position: static; }
  .nx-root .nx-split--list .nx-split__side { display: none; }
}.nx-root .nx-stack { display: grid; gap: var(--nx-s4); min-width: 0; align-content: start; }
.nx-root .nx-split__side--home { position: static; }

/* ---------------------------------------------------------------- BRAND: the logo slot (nx-shell.jsx NxLogo, files in app/public/brand). Transparent, no plate or box. */
.nx-root .nx-brand { display: block; margin: 2px 0 18px; padding: 6px 12px; }
.nx-root .nx-brand__lockup { display: block; width: 100%; max-width: 200px; height: auto; }
.nx-root .nx-brand__mark { width: 38px; height: 38px; display: block; }

/* ---------------------------------------------------------------- DEPTH AND MOTION (CSS 3D only; transform and opacity only; all of it off with prefers-reduced-motion)
   .nx-depth-page  the page settles in from a little behind (about 220 ms)          .nx-depth-card  a card that tilts toward the pointer (nxTilt in nx-kit.jsx sets --nx-tx / --nx-ty, no re-render)
   .nx-agentcard   an agent card: a depth layer and a status glow                    .nx-dot--live   a status dot that pulses (the only motion on a timer besides the logo) */
.nx-root { --nx-glow: var(--nx-blue); }
.nx-root .nx-depth-card { position: relative; transform: perspective(720px) rotateX(var(--nx-tx, 0deg)) rotateY(var(--nx-ty, 0deg)); transform-style: preserve-3d; transition: transform var(--nx-d1) ease-out; backface-visibility: hidden; }
.nx-root .nx-depth-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--nx-lift); opacity: 0; transition: opacity 160ms; pointer-events: none; z-index: -1; }
.nx-root .nx-depth-card:hover { will-change: transform; }
.nx-root .nx-depth-card:hover::after, .nx-root .nx-depth-card:focus-within::after { opacity: 1; }
/* a list of cards: every row is its own card, which is what tilts */
.nx-root .nx-list--cards { background: none; border: 0; box-shadow: none; overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nx-s3); }
.nx-root .nx-list--cards .nx-item { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); }
.nx-root .nx-list--cards .nx-item:last-child { border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-list--cards .nx-item[aria-current="true"] { border-color: var(--nx-blue); }
/* agent card */
.nx-root .nx-agentcard { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); padding: var(--nx-s4); display: grid; gap: var(--nx-s2); align-content: start; min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-agentcard::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 1px var(--nx-glow), 0 0 22px -4px var(--nx-glow); opacity: .0; pointer-events: none; }
.nx-root .nx-agentcard[data-status="working"], .nx-root .nx-agentcard[data-status="waiting"], .nx-root .nx-agentcard[data-status="done"], .nx-root .nx-agentcard[data-status="failed"] { --nx-glow-on: 1; }
.nx-root .nx-agentcard[data-status="working"] { --nx-glow: var(--nx-blue); }
.nx-root .nx-agentcard[data-status="waiting"] { --nx-glow: var(--nx-amber); }
.nx-root .nx-agentcard[data-status="done"] { --nx-glow: var(--nx-success); }
.nx-root .nx-agentcard[data-status="failed"] { --nx-glow: var(--nx-danger); }
.nx-root .nx-agentcard[data-status="working"]::before, .nx-root .nx-agentcard[data-status="waiting"]::before, .nx-root .nx-agentcard[data-status="done"]::before, .nx-root .nx-agentcard[data-status="failed"]::before { opacity: .55; }
.nx-root .nx-agentcard:hover::before { opacity: .9; }
.nx-root .nx-agentcard__layer { transform: translateZ(22px); display: grid; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-agentcard__name { font-weight: 800; font-size: var(--nx-fs-body); line-height: 1.3; }
.nx-root .nx-agentcard__status { display: flex; align-items: center; gap: var(--nx-s2); font-weight: 700; font-size: var(--nx-fs-small); }
.nx-root .nx-agentcard__meta { color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-agentcard__action { margin-top: var(--nx-s1); }
/* live dot pulse: a ring that grows and fades (transform and opacity only) */
.nx-root .nx-dot--live { position: relative; }
.nx-root .nx-dot--live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: 0; }
/* sidebar items press in */
.nx-root .nx-nav { transition: transform var(--nx-d1) ease-out, background var(--nx-d2), color var(--nx-d2); }
.nx-root .nx-nav:hover { transform: translateX(3px); }
.nx-root .nx-nav:active { transform: translateX(3px) scale(.965); background: var(--nx-side-press); }
.nx-root .nx-bar .nx-nav:hover { transform: none; }
.nx-root .nx-bar .nx-nav:active { transform: scale(.94); }
@keyframes nx-depth-in { from { opacity: 0; transform: perspective(1400px) translate3d(0, 14px, -70px) rotateX(3deg); } to { opacity: 1; transform: none; } }
@keyframes nx-sway { from { transform: perspective(260px) rotateY(-16deg) rotateX(4deg); } to { transform: perspective(260px) rotateY(16deg) rotateX(-4deg); } }
@keyframes nx-sway-soft { from { transform: perspective(520px) rotateY(-9deg) rotateX(2deg); } to { transform: perspective(520px) rotateY(9deg) rotateX(-2deg); } }
@keyframes nx-pulse { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-depth-page { animation: nx-depth-in var(--nx-d3) var(--nx-curve) backwards; }
  .nx-root .nx-header__mark .nx-brand__mark { animation: nx-sway 7s ease-in-out infinite alternate; }
  .nx-root .nx-brand__lockup { animation: nx-sway-soft 7s ease-in-out infinite alternate; }
  .nx-root .nx-dot--live::after { animation: nx-pulse 1.8s ease-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-root .nx-depth-card, .nx-root .nx-nav:hover, .nx-root .nx-nav:active, .nx-root .nx-bar .nx-nav:active, .nx-root.is-calm .nx-depth-card, .nx-root.is-calm .nx-nav:hover, .nx-root.is-calm .nx-nav:active { transform: none !important; }
}.nx-root .nx-list:not(.nx-list--cards) .nx-depth-card { transform: none; }
.nx-root .nx-list:not(.nx-list--cards) .nx-depth-card::after { display: none; }
/* ---------------------------------------------------------------- FILL (21 Oct, after the manager check): no area of a page is left blank */
.nx-root .nx-split--fill { align-items: stretch; }
.nx-root .nx-split--fill > .nx-stack { grid-auto-rows: 1fr; align-content: stretch; }
.nx-root .nx-split--below { margin-top: var(--nx-s6); }
.nx-root .nx-split--below > section > .nx-section:first-child { margin-top: 0; }
.nx-root .nx-split--short { align-items: stretch; }
.nx-root .nx-split--short .nx-split__side { position: static; align-content: stretch; grid-auto-rows: 1fr; }
.nx-root .nx-split--short .nx-preview { align-content: start; }
.nx-root .nx-hintcard { background: var(--nx-surface); border: 1px dashed var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s3); }
.nx-root .nx-hintcard .nx-empty { padding: var(--nx-s6) var(--nx-s4); }
.nx-root .nx-preview__more { display: grid; gap: var(--nx-s1); border-top: 1px solid var(--nx-line); padding-top: var(--nx-s3); margin-top: var(--nx-s2); }
.nx-root .nx-preview__pick { display: flex; align-items: center; gap: var(--nx-s3); min-height: var(--nx-tap); padding: 0 var(--nx-s2); border: 0; border-radius: 8px; background: none; color: var(--nx-text); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.nx-root .nx-preview__pick:hover { background: var(--nx-hover); }
.nx-root .nx-preview__picktext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }.nx-root .nx-split--fill .nx-split__side { grid-template-rows: auto auto 1fr; align-content: stretch; }
.nx-root .nx-hintcard--grow { display: grid; align-content: center; }
.nx-root .nx-split--home .nx-cardgrid { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.nx-root .nx-list--cards .nx-item { flex-wrap: wrap; }
.nx-root .nx-list--cards .nx-item__main { flex: 1 1 9em; }
.nx-root .nx-list--cards .nx-item__title { white-space: normal; overflow-wrap: anywhere; }.nx-root .nx-split--home .nx-cardgrid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }.nx-root .nx-split--short { min-height: calc(calc(100 * var(--ao-vh)) - 260px); }
.nx-root .nx-split--short > .nx-stack { display: flex; flex-direction: column; }
.nx-root .nx-split--short .nx-hintcard { flex: 1; display: grid; align-content: center; }.nx-root .nx-split--short .nx-split__side { align-self: stretch; }

/* The quick switches of the top bar (23 Oct 2026): the 3D office, language, New | Classic and Report an issue, on a wide screen. Under 1280 px the words of the two buttons fold away (the icons stay), under 980 px
   the language and the look are left to the avatar menu so the ask box keeps its room. */
.nx-root .nx-hq { display: flex; align-items: center; gap: 8px; flex: none; margin-right: 4px; }
.nx-root .nx-hq__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--nx-control-line); border-radius: var(--nx-rfull); background: transparent; color: var(--nx-text); font: inherit; font-weight: 700; font-size: var(--nx-fs-small); text-decoration: none; cursor: pointer; white-space: nowrap; }
.nx-root .nx-hq__btn:hover, .nx-root .nx-hq__btn:focus-visible { background: var(--nx-hover, color-mix(in srgb, var(--nx-text) 8%, transparent)); }
.nx-root .nx-hq__btn--report { border-color: color-mix(in srgb, var(--nx-amber-text) 70%, var(--nx-control-line)); }
.nx-root .nx-hq__ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nx-root .nx-hq .look-switch { flex: none; }
.nx-root .nx-hq__lang button { min-width: 40px; min-height: 32px; }
@media (max-width: 1280px) { .nx-root .nx-hq__txt { display: none; } .nx-root .nx-hq__btn { padding: 0 9px; } }
@media (max-width: 1040px) { .nx-root .nx-hq__lang, .nx-root .nx-hq .look-switch { display: none; } }

/* R2 (Home + Work): only .nx-root selectors. The integrator adds this file to web/build.mjs after nx.css. */
.nx-root .nx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--nx-s3); }
.nx-root .nx-chip { min-height: var(--nx-tap); padding: 0 16px; border-radius: var(--nx-rfull); border: 1px solid var(--nx-control-line); background: var(--nx-surface); color: var(--nx-text); font: inherit; font-weight: 600; cursor: pointer; }
.nx-root .nx-chip[aria-pressed="true"] { background: var(--nx-blue); border-color: var(--nx-blue); color: var(--nx-on-blue); }
.nx-root .nx-composer { display: grid; gap: var(--nx-s3); }
.nx-root .nx-composer__hint { color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-composer__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nx-root .nx-grow { flex: 1; }
.nx-root .nx-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--nx-s3); }
.nx-root .nx-tab { text-decoration: none; }

/* R3 pages (Agents, Library, Admin) of the redesigned look. Every rule starts with .nx-root (web/test/nx-css-scoped.test.js). Add this file to web/build.mjs after nx.css. */
.nx-root .nx-grow { flex: 1; }
.nx-root .nx-back { margin: 0 0 var(--nx-s3); }
.nx-root .nx-stack { display: grid; gap: var(--nx-s4); min-width: 0; }
.nx-root .nx-toolbar { display: flex; align-items: center; gap: var(--nx-s3); flex-wrap: wrap; margin: var(--nx-s4) 0 var(--nx-s3); }
.nx-root .nx-pillrow { display: flex; align-items: center; gap: var(--nx-s2); flex-wrap: wrap; margin: 0 0 var(--nx-s4); }

/* view toggle: List or 3D office */
.nx-root .nx-seg { display: inline-flex; border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); overflow: hidden; background: var(--nx-surface); }
.nx-root .nx-seg__b { display: inline-flex; align-items: center; min-height: var(--nx-tap); padding: 0 16px; font: inherit; font-weight: 700; color: var(--nx-muted); background: none; border: 0; cursor: pointer; text-decoration: none; }
.nx-root .nx-seg__b[aria-pressed="true"] { background: var(--nx-blue-soft); color: var(--nx-blue-text); }

/* filters: chips (links or buttons, the chosen one marked by fill AND weight), search, select */
.nx-root .nx-filters { display: flex; align-items: center; gap: var(--nx-s3); flex-wrap: wrap; margin: 0 0 var(--nx-s3); }
.nx-root .nx-chips { display: flex; gap: var(--nx-s2); flex-wrap: wrap; }
.nx-root .nx-chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--nx-tap); padding: 0 14px; border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); background: var(--nx-surface); color: var(--nx-text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.nx-root .nx-chip b { color: var(--nx-muted); font-weight: 700; font-size: var(--nx-fs-small); }
.nx-root .nx-chip[aria-pressed="true"], .nx-root .nx-chip[aria-current="true"] { background: var(--nx-blue); border-color: var(--nx-blue); color: var(--nx-on-blue, var(--nx-surface)); font-weight: 800; }
.nx-root .nx-chip[aria-pressed="true"] b, .nx-root .nx-chip[aria-current="true"] b { color: var(--nx-on-blue, var(--nx-surface)); }
.nx-root .nx-input, .nx-root .nx-select { min-height: var(--nx-tap); border: 1px solid var(--nx-line); border-radius: 10px; padding: 0 12px; background: var(--nx-surface); color: var(--nx-text); font: inherit; }
.nx-root .nx-input { flex: 1; min-width: 200px; }
.nx-root .nx-textarea { padding: 10px 12px; width: 100%; resize: vertical; }
.nx-root .nx-count-line { margin: 0 0 var(--nx-s3); }

/* a part of a tab (quieter than the tab strip) */
.nx-root .nx-parts { display: flex; gap: var(--nx-s2); flex-wrap: wrap; margin: 0 0 var(--nx-s4); }
.nx-root .nx-part { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: var(--nx-rfull); color: var(--nx-muted); font-weight: 600; text-decoration: none; border: 1px solid transparent; }
.nx-root .nx-part:hover { color: var(--nx-text); }
.nx-root .nx-part[aria-current="true"] { background: var(--nx-blue-soft); color: var(--nx-blue-text); font-weight: 800; }

.nx-root .nx-results { margin: 0 0 var(--nx-s5); }

/* simplify: the sidebar already names the places, so an old page mounted in the frame shows no second row of the same places; Private offices sit above Mail as quiet links */
.nx-root .hub-tabs { display: none; }
.nx-root .nx-mailoffices { align-items: center; margin: 0 0 var(--nx-s3); }

@media (max-width: 860px) {
  .nx-root .nx-input { min-width: 0; flex-basis: 100%; }
  .nx-root .nx-toolbar .nx-seg { order: 2; }
}

/* the search takes its own row; a short page still fills the screen (an empty card is as tall as the room it has); the old pages' round page icon is decoration the frame does not need */
.nx-root .nx-filters--search .nx-input { flex: 1 1 320px; }
.nx-root .nx-fill { min-height: max(240px, calc(calc(100 * var(--ao-vh)) - 430px)); display: grid; align-content: center; }
.nx-root .ant-card:has(> .ant-card-body > .ant-empty) { min-height: max(240px, calc(calc(100 * var(--ao-vh)) - 460px)); }
.nx-root .ant-card:has(> .ant-card-body > .ant-empty) > .ant-card-body { display: grid; align-content: center; }
.nx-root .page-head .page-logo { display: none; }
.nx-root .nx-newagent .page-head-text { display: none; }
.nx-root .nx-newagent .page-head { justify-content: flex-end; }

.nx-root .nx-old { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s4); min-height: max(240px, calc(calc(100 * var(--ao-vh)) - 500px)); min-width: 0; }
.nx-root .arch-setup { grid-template-columns: minmax(0, 1fr); }
.nx-root .arch-setup > *, .nx-root .arch-ways { min-width: 0; max-width: 100%; }
.nx-root .arch-ways { overflow-x: auto; }
.nx-root .ant-space { flex-wrap: wrap; max-width: 100%; }
.nx-root .ant-space-vertical { flex-wrap: nowrap; }   /* CR-018 review: a column that wraps was measured at its narrowest and grew thousands of pixels tall: a blank gap of 4000 px between the cards of Use my agents in other AI apps */
.nx-root .ant-input { max-width: 100%; }
@media (max-width: 860px) { .nx-root .nx-old { padding: var(--nx-s2); } }
.nx-root .ant-space-item { min-width: 0; max-width: 100%; }
.nx-root .ant-card-head-wrapper { flex-wrap: wrap; gap: 8px; }
.nx-root .ant-card-head-title { white-space: normal; }

/* placeholder text (the Department picker on Home, search fields) reaches 4.5:1 in every theme: the muted text token, not the lighter placeholder grey */
.nx-root .ant-select-selection-placeholder, .nx-root .ant-input::placeholder, .nx-root textarea::placeholder, .nx-root .nx-input::placeholder { color: var(--nx-muted); opacity: 1; }

.nx-root .nx-toolbar .nx-parts { margin: 0; }

/* W1 of the redesigned look (21 Oct 2026): the icon rail with a pin, the floating bar, the header dropdowns, Ctrl K, the Customizer, the motion kit, the colour effects, the dialogs and the toasts.
   Every rule starts with .nx-root (web/test: qa-2026-10-21-nx-css-scoped) and takes every colour from the --nx-* tokens (qa-2026-10-21-nx-themes): no hex, no rgb, no colour word.
   Motion: all times are --nx-d1 (press, 120 ms), --nx-d2 (hover, 200 ms), --nx-d3 (enter, 340 ms), each times the theme's or the person's speed (--spd); everything is off under
   prefers-reduced-motion and when the Customizer's motion is Off (.is-calm). */

/* ---------------------------------------------------------------- rail: icons only until the pointer or the keyboard comes, a pin keeps it open */
.nx-root .nx-side .nx-nav { position: relative; }
.nx-root.nx-shell:not(.is-open) .nx-side:hover, .nx-root.nx-shell:not(.is-open) .nx-side:has(:focus-visible) { width: var(--nx-side-w); box-shadow: var(--nx-panel-shadow); }
.nx-root.nx-shell:not(.is-open) .nx-side:not(:hover):not(:has(:focus-visible)) .nx-nav__label { opacity: 0; }
.nx-root.nx-shell:not(.is-open) .nx-side:not(:hover):not(:has(:focus-visible)) .nx-nav .nx-count { position: absolute; top: 2px; right: 2px; margin: 0; font-size: 10px; padding: 0 5px; }
.nx-root .nx-brand__rail { display: none; width: 38px; height: 38px; }
.nx-root.nx-shell:not(.is-open) .nx-side:not(:hover):not(:has(:focus-visible)) .nx-brand__lockup { display: none; }
.nx-root.nx-shell:not(.is-open) .nx-side:not(:hover):not(:has(:focus-visible)) .nx-brand__rail { display: block; }
.nx-root.nx-shell:not(.is-open) .nx-side:not(:hover):not(:has(:focus-visible)) .nx-brand { padding-left: 2px; padding-right: 2px; }
.nx-root .nx-pin[aria-pressed="true"] { color: var(--nx-side-strong); }
.nx-root .nx-pin[aria-pressed="true"] .nx-nav__ico { fill: currentColor; }

/* ---------------------------------------------------------------- bar and page options of the Customizer */
.nx-root.is-bar-static .nx-header { position: static; margin: 0; border-width: 0 0 1px; border-radius: 0; box-shadow: none; padding: 8px 28px; background: var(--nx-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
.nx-root.is-compact .nx-content > .content-inner, .nx-root.is-compact .nx-content > .nx-page { max-width: 1180px; margin-left: auto; margin-right: auto; }
.nx-root.is-bordered { --nx-shadow: none; --nx-line: var(--nx-control-line); --nx-lift: none; }
.nx-root.is-bordered .nx-card, .nx-root.is-bordered .nx-list, .nx-root.is-bordered .nx-preview, .nx-root.is-bordered .nx-agentcard, .nx-root.is-bordered .nx-approval { border-width: 1.5px; }
.nx-root .nx-header .nx-themebtn { display: inline-flex; }
@media (max-width: 1100px) { .nx-root.nx-shell .nx-header .nx-kbd-hide { display: none; } }

/* ---------------------------------------------------------------- header controls: one 40 px button each, one dropdown each */
.nx-root .nx-iconbtn[aria-expanded="true"] { background: var(--nx-hover); }
.nx-root .nx-iconbtn--text { width: auto; padding: 0 12px; border-radius: var(--nx-rfull); font-weight: 700; font-size: var(--nx-fs-small); gap: 4px; display: inline-flex; align-items: center; }
.nx-root .nx-pop { width: 340px; max-width: calc(calc(100 * var(--ao-vw)) - 24px); padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.nx-root .nx-pop--sm { width: 220px; padding: 8px; }
.nx-root .nx-pop__head { display: flex; align-items: center; gap: var(--nx-s2); padding: 12px 16px; border-bottom: 1px solid var(--nx-line); font-weight: 800; }
.nx-root .nx-pop__head .nx-grow { flex: 1; }
.nx-root .nx-pop__body { overflow-y: auto; max-height: min(calc(60 * var(--ao-vh)), 440px); }
.nx-root .nx-pop__foot { padding: 8px; border-top: 1px solid var(--nx-line); display: flex; gap: var(--nx-s2); }
.nx-root .nx-pop__foot .nx-btn { flex: 1; }
.nx-root .nx-menu__item[aria-checked="true"] { font-weight: 800; background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-menu__tick { margin-left: auto; font-weight: 800; }
.nx-root .nx-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-note:last-child { border-bottom: 0; }
.nx-root .nx-note__main { flex: 1; min-width: 0; }
.nx-root .nx-note__title { font-weight: 700; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nx-root .nx-note__meta { color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nx-root .nx-note__acts { display: flex; gap: var(--nx-s2); margin-top: var(--nx-s2); flex-wrap: wrap; }
.nx-root .nx-btn--sm { min-height: 32px; padding: 0 12px; font-size: var(--nx-fs-small); }
.nx-root .nx-pop__empty { padding: var(--nx-s6) var(--nx-s4); color: var(--nx-muted); text-align: center; }
/* shortcuts grid */
.nx-root .nx-shortgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nx-s2); padding: var(--nx-s3); }
.nx-root .nx-short { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: var(--nx-r1); border: 1px solid var(--nx-line); color: var(--nx-text); text-decoration: none; background: var(--nx-surface); font: inherit; font-weight: 700; font-size: var(--nx-fs-small); cursor: pointer; text-align: center; min-width: 0; transition: transform var(--nx-d2) var(--nx-curve), background var(--nx-d2); }
.nx-root .nx-short:hover { background: var(--nx-hover); transform: translateY(-2px); }
.nx-root .nx-short__ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-short__ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-short__label { overflow-wrap: anywhere; line-height: 1.2; }
.nx-root .nx-short[aria-pressed="false"] { opacity: .6; border-style: dashed; }
.nx-root .nx-short[aria-pressed="true"] { border-color: var(--nx-blue-text); }

/* ---------------------------------------------------------------- Ctrl K */
.nx-root .nx-pal { position: fixed; inset: 0; z-index: 2100; display: flex; justify-content: center; align-items: flex-start; padding: calc(10 * var(--ao-vh)) 12px 12px; background: var(--nx-scrim); animation: nx-fade var(--nx-d2) ease-out; }
.nx-root .nx-pal__box { width: min(660px, 100%); max-height: calc(78 * var(--ao-vh)); display: flex; flex-direction: column; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-lift); overflow: hidden; animation: nx-pop-in var(--nx-d3) var(--nx-curve); }
.nx-root .nx-pal__bar { display: flex; align-items: center; gap: var(--nx-s3); padding: 0 var(--nx-s4); border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-pal__input { flex: 1; min-width: 0; min-height: 56px; border: 0; background: none; color: var(--nx-text); font: inherit; font-size: 17px; outline: none; }
.nx-root .nx-pal__input::placeholder { color: var(--nx-muted); opacity: 1; }
.nx-root .nx-pal__bar:focus-within { box-shadow: inset 0 -3px 0 var(--nx-blue); }
.nx-root .nx-pal__modes { display: inline-flex; border: 1px solid var(--nx-control-line); border-radius: var(--nx-rfull); overflow: hidden; flex: none; }
.nx-root .nx-pal__mode { min-height: 32px; padding: 0 12px; border: 0; background: none; color: var(--nx-text); font: inherit; font-weight: 600; font-size: var(--nx-fs-small); cursor: pointer; }
.nx-root .nx-pal__mode[aria-pressed="true"] { background: var(--nx-blue); color: var(--nx-on-blue); font-weight: 800; }
.nx-root .nx-pal__list { overflow-y: auto; padding: 4px 8px 8px; }
.nx-root .nx-pal__group { padding: 12px 8px 4px; font-size: var(--nx-fs-small); font-weight: 800; color: var(--nx-muted); display: flex; gap: var(--nx-s2); align-items: center; }
.nx-root .nx-pal__row { display: flex; align-items: center; gap: var(--nx-s3); width: 100%; min-height: 44px; padding: 6px 10px; border-radius: var(--nx-r1); border: 0; background: none; color: var(--nx-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background var(--nx-d1), transform var(--nx-d1); }
.nx-root .nx-pal__row[aria-selected="true"], .nx-root .nx-pal__row:hover { background: var(--nx-blue-soft); }
.nx-root .nx-pal__row[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--nx-blue-text); }
.nx-root .nx-pal__row:active { transform: scale(.99); }
.nx-root .nx-pal__main { flex: 1; min-width: 0; }
.nx-root .nx-pal__title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-pal__meta { color: var(--nx-muted); font-size: var(--nx-fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-pal__foot { display: flex; gap: var(--nx-s4); padding: 8px 16px; border-top: 1px solid var(--nx-line); color: var(--nx-muted); font-size: var(--nx-fs-small); flex-wrap: wrap; }
.nx-root .nx-pal__foot kbd { font: 600 12px var(--nx-font); border: 1px solid var(--nx-line); border-radius: 6px; padding: 0 6px; background: var(--nx-bg); }
.nx-root .nx-pal__ask { display: flex; align-items: center; gap: var(--nx-s3); padding: var(--nx-s4); }
@keyframes nx-fade { from { opacity: 0; } }
@keyframes nx-pop-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* ---------------------------------------------------------------- Customizer drawer */
.nx-root .nx-cz__gear { position: fixed; right: 0; top: 42%; z-index: 80; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--nx-r1) 0 0 var(--nx-r1); background: var(--nx-pill); color: var(--nx-pill-text); cursor: pointer; box-shadow: var(--nx-shadow); }
.nx-root .nx-cz__gear svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-cz__scrim { position: fixed; inset: 0; z-index: 2090; background: var(--nx-scrim); animation: nx-fade var(--nx-d2) ease-out; }
.nx-root .nx-cz { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, calc(100 * var(--ao-vw))); z-index: 2091; background: var(--nx-surface); border-left: 1px solid var(--nx-line); box-shadow: var(--nx-panel-shadow); display: flex; flex-direction: column; animation: nx-slide var(--nx-d3) var(--nx-curve); }
.nx-root .nx-cz__head { display: flex; align-items: center; gap: var(--nx-s3); padding: var(--nx-s4) var(--nx-s5); border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-cz__head h2 { margin: 0; font-size: var(--nx-fs-h3); flex: 1; }
.nx-root .nx-cz__body { overflow-y: auto; padding: 0 var(--nx-s5) var(--nx-s5); flex: 1; }
.nx-root .nx-cz__h { margin: 20px 0 8px; font-size: var(--nx-fs-small); font-weight: 800; color: var(--nx-muted); letter-spacing: .02em; }
.nx-root .nx-cz__themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nx-s2); }
.nx-root .nx-cz__theme { border: 2px solid var(--nx-line); border-radius: var(--nx-r1); padding: 8px; background: var(--nx-surface); color: var(--nx-text); text-align: left; font: inherit; font-weight: 700; font-size: var(--nx-fs-small); cursor: pointer; transition: transform var(--nx-d1); }
.nx-root .nx-cz__theme:hover { transform: translateY(-2px); }
.nx-root .nx-cz__theme[aria-pressed="true"] { border-color: var(--nx-blue-text); }
.nx-root .nx-cz__swatch { display: flex; height: 34px; border-radius: 8px; margin-bottom: 6px; overflow: hidden; border: 1px solid var(--nx-line); }
.nx-root .nx-cz__swatch i { flex: 1; display: block; }
.nx-root .nx-cz__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: var(--nx-s2); }
.nx-root .nx-cz__opt { min-height: var(--nx-tap); border: 2px solid var(--nx-line); border-radius: var(--nx-r1); background: var(--nx-surface); color: var(--nx-text); font: inherit; font-weight: 700; font-size: var(--nx-fs-small); cursor: pointer; padding: 4px 6px; }
.nx-root .nx-cz__opt[aria-pressed="true"] { border-color: var(--nx-blue-text); color: var(--nx-blue-text); background: var(--nx-blue-soft); }
.nx-root .nx-cz__dots { display: flex; gap: var(--nx-s2); flex-wrap: wrap; }
.nx-root .nx-cz__dot { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--nx-surface); outline: 2px solid var(--nx-line); cursor: pointer; padding: 0; display: grid; place-items: center; font-weight: 800; }
.nx-root .nx-cz__dot[aria-pressed="true"] { outline: 3px solid var(--nx-blue-text); }
.nx-root .nx-cz__range { width: 100%; accent-color: var(--nx-blue); min-height: var(--nx-tap); }
.nx-root .nx-cz__foot { padding: var(--nx-s4) var(--nx-s5); border-top: 1px solid var(--nx-line); display: flex; gap: var(--nx-s2); }
@keyframes nx-slide { from { transform: translateX(30px); opacity: 0; } }

/* ---------------------------------------------------------------- MOTION KIT: press 120 ms, hover 200 ms, enter 340 ms, ease-out; soft layered shadows; a glow on the primary button */
.nx-root .nx-btn { position: relative; overflow: hidden; transition: transform var(--nx-d1) var(--nx-curve), box-shadow var(--nx-d2), filter var(--nx-d2), background var(--nx-d2); }
.nx-root .nx-btn:active { transform: translateY(1px) scale(.98); }
.nx-root .nx-btn--primary { box-shadow: 0 1px 2px color-mix(in srgb, var(--nx-blue) 30%, transparent), 0 6px 14px -6px var(--nx-blue); }
.nx-root .nx-btn--primary:hover { box-shadow: 0 2px 4px color-mix(in srgb, var(--nx-blue) 30%, transparent), 0 12px 20px -8px var(--nx-blue); transform: translateY(-1px); }
.nx-root .nx-btn--primary:active { transform: translateY(1px) scale(.98); box-shadow: 0 2px 6px -4px var(--nx-blue); }
.nx-root .nx-iconbtn, .nx-root .nx-lang, .nx-root .nx-chip, .nx-root .nx-seg__b { transition: background var(--nx-d2), transform var(--nx-d1) var(--nx-curve); }
.nx-root .nx-iconbtn:active, .nx-root .nx-lang:active, .nx-root .nx-chip:active { transform: scale(.92); }
.nx-root .nx-ripple { position: absolute; border-radius: 50%; background: color-mix(in srgb, currentColor 28%, transparent); transform: scale(0); animation: nx-rp calc(600ms * var(--spd, 1)) ease-out forwards; pointer-events: none; }
@keyframes nx-rp { to { transform: scale(4); opacity: 0; } }
/* a card rises from a little behind when it first appears (the tilt toward the pointer is nxTilt in nx-kit.jsx) */
.nx-root .nx-rise { animation: nx-rise var(--nx-d3) var(--nx-curve) both; }
@keyframes nx-rise { from { opacity: 0; transform: translate3d(0, 14px, -40px); } }
/* skeleton shimmer while loading */
.nx-root .nx-skel { display: block; height: 14px; border-radius: 10px; background: linear-gradient(90deg, var(--color-skeleton), color-mix(in srgb, var(--color-skeleton) 40%, var(--nx-surface)), var(--color-skeleton)); background-size: 200% 100%; animation: nx-shim 1.3s linear infinite; }
.nx-root .nx-skel--block { height: 56px; border-radius: var(--nx-r1); }
.nx-root .nx-skeletons { display: grid; gap: var(--nx-s2); padding: var(--nx-s4); }
@keyframes nx-shim { to { background-position: -200% 0; } }
/* charts draw in (hooks for the chart pages): put pathLength="1" on a line and class nx-draw; a bar gets nx-grow; a ring or gauge nx-draw too */
.nx-root .nx-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: nx-dr calc(1400ms * var(--spd, 1)) var(--nx-curve) .2s forwards; }
.nx-root .nx-grow-bar { transform-origin: bottom; transform-box: fill-box; animation: nx-gr calc(900ms * var(--spd, 1)) var(--nx-curve) both; }
@keyframes nx-dr { to { stroke-dashoffset: 0; } }
@keyframes nx-gr { from { transform: scaleY(0); } }
/* count-up numbers keep their width while they count */
.nx-root .nx-countup { font-variant-numeric: tabular-nums; }
/* the live dot of a notification */
.nx-root .nx-iconbtn .nx-count { animation: nx-pop-in var(--nx-d3) var(--nx-curve) both; }

/* ---------------------------------------------------------------- COLOUR EFFECTS (Off, Subtle, Rich). Subtle: a glow that follows the pointer on a card. Rich: also moving colour blobs behind the page and a shine on the primary button. */
.nx-root { --nx-fx-glow: color-mix(in srgb, var(--nx-blue) 13%, transparent); }
.nx-root.is-fx-subtle .nx-card, .nx-root.is-fx-subtle .nx-item, .nx-root.is-fx-subtle .nx-agentcard, .nx-root.is-fx-subtle .nx-preview, .nx-root.is-fx-subtle .nx-approval,
.nx-root.is-fx-rich .nx-card, .nx-root.is-fx-rich .nx-item, .nx-root.is-fx-rich .nx-agentcard, .nx-root.is-fx-rich .nx-preview, .nx-root.is-fx-rich .nx-approval {
  background-image: radial-gradient(260px circle at var(--nx-fx-x, -400px) var(--nx-fx-y, -400px), var(--nx-fx-glow), transparent 70%);
}
.nx-root .nx-fx { display: none; }
.nx-root.is-fx-rich .nx-fx { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.nx-root .nx-fx > i { position: absolute; width: calc(46 * var(--ao-vmax)); height: calc(46 * var(--ao-vmax)); border-radius: 50%; opacity: .5; animation: nx-blob calc(26s * var(--spd, 1)) ease-in-out infinite alternate; }
.nx-root .nx-fx > i:nth-child(1) { left: calc(-10 * var(--ao-vmax)); top: calc(-12 * var(--ao-vmax)); background: radial-gradient(closest-side, color-mix(in srgb, var(--nx-blue) 22%, transparent), transparent); }
.nx-root .nx-fx > i:nth-child(2) { right: calc(-14 * var(--ao-vmax)); top: calc(18 * var(--ao-vh)); background: radial-gradient(closest-side, color-mix(in srgb, var(--nx-cyan) 20%, transparent), transparent); animation-delay: -9s; }
.nx-root .nx-fx > i:nth-child(3) { left: calc(30 * var(--ao-vw)); bottom: calc(-22 * var(--ao-vmax)); background: radial-gradient(closest-side, color-mix(in srgb, var(--nx-amber) 14%, transparent), transparent); animation-delay: -17s; }
@keyframes nx-blob { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(calc(8 * var(--ao-vw)), calc(6 * var(--ao-vh)), 0) scale(1.15); } }
.nx-root.is-fx-rich .nx-btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--nx-on-blue) 35%, transparent), transparent); transition: left calc(600ms * var(--spd, 1)) ease-out; pointer-events: none; }
.nx-root.is-fx-rich .nx-btn--primary:hover::after { left: 130%; }
.nx-root.is-fx-off .nx-fx, .nx-root.is-calm .nx-fx { display: none; }

/* ---------------------------------------------------------------- everything off: the device asks for less motion, or the Customizer's motion is Off */
@media (prefers-reduced-motion: reduce) {
  .nx-root .nx-fx { display: none !important; }
  .nx-root .nx-btn--primary:hover, .nx-root .nx-btn:active, .nx-root .nx-short:hover, .nx-root .nx-cz__theme:hover { transform: none !important; }
  .nx-root .nx-skel { background: var(--color-skeleton); }
  .nx-root .nx-draw { stroke-dashoffset: 0; }
}
.nx-root.is-calm *, .nx-root.is-calm *::before, .nx-root.is-calm *::after { animation: none !important; transition: none !important; }
.nx-root.is-calm .nx-fx { display: none !important; }
.nx-root.is-calm .nx-btn--primary:hover, .nx-root.is-calm .nx-btn:active, .nx-root.is-calm .nx-short:hover, .nx-root.is-calm .nx-cz__theme:hover { transform: none !important; }
.nx-root.is-calm .nx-draw { stroke-dashoffset: 0; }
.nx-root.is-calm .nx-skel { background: var(--color-skeleton); }

@media (max-width: 860px) {
  .nx-root .nx-cz__gear { display: none; }
  .nx-root .nx-pal { padding-top: calc(6 * var(--ao-vh)); }
  .nx-root .nx-header .nx-hide-narrow { display: none; }
}

/* ---------------------------------------------------------------- hover lift: 2 px in about 160 ms (manager's design decision, 21 Oct) */
.nx-root { --nx-lift-t: calc(160ms * var(--spd, 1)); }
.nx-root .nx-short, .nx-root .nx-cz__theme { transition: transform var(--nx-lift-t) var(--nx-curve), background var(--nx-d2); }
.nx-root .nx-iconbtn:hover, .nx-root .nx-lang:hover, .nx-root .nx-chip:hover { transform: translateY(-2px); }
.nx-root .nx-iconbtn:active, .nx-root .nx-lang:active, .nx-root .nx-chip:active { transform: scale(.92); }
.nx-root .nx-iconbtn, .nx-root .nx-lang, .nx-root .nx-chip { transition: background var(--nx-d2), transform var(--nx-lift-t) var(--nx-curve); }
.nx-root.is-calm .nx-iconbtn:hover, .nx-root.is-calm .nx-lang:hover, .nx-root.is-calm .nx-chip:hover { transform: none !important; }
@media (prefers-reduced-motion: reduce) { .nx-root .nx-iconbtn:hover, .nx-root .nx-lang:hover, .nx-root .nx-chip:hover { transform: none !important; } }

/* ---------------------------------------------------------------- DIALOGS (nx-dialog.jsx): one set for confirm, success, error, warning, info, question, loading, a side panel and a bottom sheet */
.nx-root .nx-dlg__scrim { position: fixed; inset: 0; z-index: 2200; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--nx-scrim); animation: nx-fade var(--nx-d2) ease-out; }
.nx-root .nx-dlg__scrim--panel { padding: 0; align-items: stretch; justify-content: flex-end; }
.nx-root .nx-dlg__scrim--sheet { padding: 0; align-items: flex-end; }
.nx-root .nx-dlg { position: relative; overflow: hidden; width: min(440px, 100%); max-height: calc(calc(100 * var(--ao-vh)) - 32px); overflow-y: auto; padding: 28px 24px 22px; display: grid; gap: 12px; justify-items: center; text-align: center; background: var(--nx-surface); color: var(--nx-text); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-lift); animation: nx-pop-in var(--nx-d3) var(--nx-curve); }
.nx-root .nx-dlg:focus { outline: none; }
.nx-root .nx-dlg--panel { width: min(460px, calc(100 * var(--ao-vw))); max-height: none; height: calc(100 * var(--ao-vh)); border-radius: 0; border-width: 0 0 0 1px; justify-items: stretch; text-align: left; align-content: start; box-shadow: var(--nx-panel-shadow); animation: nx-slide var(--nx-d3) var(--nx-curve); }
.nx-root .nx-dlg--panel.nx-dlg--left { margin-right: auto; border-width: 0 1px 0 0; animation-name: nx-slide-l; }
.nx-root .nx-dlg--sheet { width: min(600px, 100%); max-height: calc(86 * var(--ao-vh)); border-radius: var(--nx-r2) var(--nx-r2) 0 0; border-bottom-width: 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); animation: nx-sheet-in var(--nx-d3) var(--nx-curve); }
.nx-root .nx-dlg__grip { width: 44px; height: 5px; border-radius: 9px; background: var(--nx-control-line); justify-self: center; }
.nx-root .nx-dlg__title { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 800; overflow-wrap: anywhere; }
.nx-root .nx-dlg__text { margin: 0; color: var(--nx-muted); overflow-wrap: anywhere; max-width: 52ch; }
.nx-root .nx-dlg__content { width: 100%; text-align: left; min-width: 0; }
.nx-root .nx-dlg__type { display: grid; gap: 6px; width: 100%; text-align: left; font-weight: 600; }
.nx-root .nx-dlg__err { margin: 0; color: var(--nx-bad-text); font-weight: 700; }
.nx-root .nx-dlg__acts { display: flex; gap: var(--nx-s2); justify-content: center; flex-wrap: wrap; margin-top: 6px; width: 100%; }
.nx-root .nx-dlg--panel .nx-dlg__acts, .nx-root .nx-dlg--sheet .nx-dlg__acts { justify-content: flex-end; }
.nx-root .nx-dlg__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--nx-blue); transform-origin: left; animation: nx-timer linear forwards; }
@keyframes nx-timer { to { transform: scaleX(0); } }
@keyframes nx-slide-l { from { transform: translateX(-30px); opacity: 0; } }
@keyframes nx-sheet-in { from { transform: translateY(40px); opacity: 0; } }
/* the animated icons: the ring and the mark draw themselves, a warning wiggles once, the dot of an info, a question and a warning pops in */
.nx-root .nx-dlg__icon { width: 76px; height: 76px; color: var(--nx-blue-text); display: grid; place-items: center; }
.nx-root .nx-dlg__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.nx-root .nx-dlg__icon--success { color: var(--nx-success); }
.nx-root .nx-dlg__icon--error { color: var(--nx-danger); }
.nx-root .nx-dlg__icon--warning { color: var(--nx-amber); }
.nx-root .nx-dlg__ring, .nx-root .nx-dlg__mark { stroke-dasharray: 1; stroke-dashoffset: 1; animation: nx-dr calc(520ms * var(--spd, 1)) var(--nx-curve) forwards; }
.nx-root .nx-dlg__mark { stroke-width: 2.4; animation-delay: calc(300ms * var(--spd, 1)); }
.nx-root .nx-dlg__dot { stroke-width: 2.8; opacity: 0; animation: nx-pop-in var(--nx-d2) var(--nx-curve) calc(700ms * var(--spd, 1)) forwards; }
.nx-root .nx-dlg__icon--warning svg { transform-origin: 50% 90%; animation: nx-wiggle calc(700ms * var(--spd, 1)) ease-out calc(700ms * var(--spd, 1)); }
@keyframes nx-wiggle { 20% { transform: rotate(-8deg); } 40% { transform: rotate(7deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(2deg); } }
.nx-root .nx-dlg__spin { width: 48px; height: 48px; border-radius: 50%; border: 5px solid var(--nx-line); border-top-color: var(--nx-blue); animation: nx-spin .9s linear infinite; }
@keyframes nx-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- TOASTS (nx-toast.jsx): four corners, stacked, with an Undo */
.nx-root .nx-toasts { position: fixed; z-index: 2300; width: min(400px, calc(100 * var(--ao-vw))); padding: 12px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
/* Top toasts start BELOW the top bar (--nx-header-h plus a gap), never over New/Classic, Search, New ticket or Report an issue. Example: a "QwenWork usage could not be read" toast used to open at 8px and
   cover the New/Classic switch, so the first click on Classic hit the toast. The strip itself lets clicks through (pointer-events none above); only a toast takes them. */
.nx-root .nx-toasts--top-right { top: calc(var(--nx-header-h) + 16px); right: 0; }
.nx-root .nx-toasts--top-left { top: calc(var(--nx-header-h) + 16px); left: 0; }
.nx-root .nx-toasts--bottom-right { bottom: 8px; right: 0; flex-direction: column-reverse; }
.nx-root .nx-toasts--bottom-left { bottom: 8px; left: 0; flex-direction: column-reverse; }
.nx-root .nx-toast { --nx-kind: var(--nx-blue-text); pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; padding: 12px 8px 12px 14px; background: var(--nx-surface); color: var(--nx-text); border: 1px solid var(--nx-line); border-left: 5px solid var(--nx-kind); border-radius: var(--nx-r2); box-shadow: var(--nx-lift); animation: nx-toast-in var(--nx-d3) var(--nx-curve) both; }
.nx-root .nx-toasts--top-left .nx-toast, .nx-root .nx-toasts--bottom-left .nx-toast { animation-name: nx-toast-in-l; }
.nx-root .nx-toast.is-leaving { animation: nx-toast-out var(--nx-d2) ease-in forwards; }
.nx-root .nx-toast--success { --nx-kind: var(--nx-success); }
.nx-root .nx-toast--error { --nx-kind: var(--nx-danger); }
.nx-root .nx-toast--warning { --nx-kind: var(--nx-amber); }
.nx-root .nx-toast__ico { width: 24px; height: 24px; flex: none; margin-top: 1px; fill: none; stroke: var(--nx-kind); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-toast__ring { stroke-width: 1.6; }
.nx-root .nx-toast__main { flex: 1; min-width: 0; display: grid; gap: 2px; justify-items: start; }
.nx-root .nx-toast__title { font-weight: 800; overflow-wrap: anywhere; }
.nx-root .nx-toast__text { color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }
.nx-root .nx-toast__undo { margin-top: 6px; }
.nx-root .nx-toast__x { width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; background: none; color: var(--nx-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.nx-root .nx-toast__x:hover { background: var(--nx-hover); color: var(--nx-text); }
@keyframes nx-toast-in { from { opacity: 0; transform: translateX(130%); } }
@keyframes nx-toast-in-l { from { opacity: 0; transform: translateX(-130%); } }
@keyframes nx-toast-out { to { opacity: 0; transform: scale(.96); } }
@media (max-width: 860px) { .nx-root .nx-toasts--bottom-right, .nx-root .nx-toasts--bottom-left { bottom: calc(var(--nx-bar-h) + 8px); } }
@media (prefers-reduced-motion: reduce) {
  .nx-root .nx-dlg__ring, .nx-root .nx-dlg__mark { stroke-dashoffset: 0; }
  .nx-root .nx-dlg__dot { opacity: 1; }
  .nx-root .nx-dlg__timer { display: none; }
  .nx-root .nx-dlg__spin { border-top-color: var(--nx-blue); border-right-color: var(--nx-blue); }
}
.nx-root.is-calm .nx-dlg__ring, .nx-root.is-calm .nx-dlg__mark { stroke-dashoffset: 0; }
.nx-root.is-calm .nx-dlg__dot { opacity: 1; }
.nx-root.is-calm .nx-dlg__timer { display: none; }
.nx-root.is-calm .nx-dlg__spin { border-top-color: var(--nx-blue); border-right-color: var(--nx-blue); }.nx-root .nx-pal__input:focus-visible { outline: none; }

.nx-root .nx-toasts--top-center { top: calc(var(--nx-header-h) + 16px); left: 50%; transform: translateX(-50%); }
.nx-root .nx-toasts--top-center .nx-toast { animation-name: nx-toast-in-t; }
@keyframes nx-toast-in-t { from { opacity: 0; transform: translateY(-130%); } }
.nx-root .nx-dlg__field { width: 100%; }

/* W0: the Agents page (glance card, Peek panel,  of the redesigned look: folder rail, organise (drag, select, Move to folder), overview cards in three densities. Every rule starts with .nx-root
   (web/test/nx-css-scoped.test.js); colours are --nx-* tokens only (a folder colour is a mix of them, never a hex). Add this file to web/build.mjs after nx-r3.css.
   --fc is the colour of the folder an agent is shown in; it fills bars, avatars and chips and is never the only signal (names and words are always beside it). */

/* ---------------------------------------------------------------- folder colours (the 8 words the folder routes store) */
.nx-root .nx-fc-blue { --fc: var(--nx-blue); }
.nx-root .nx-fc-green { --fc: var(--nx-success); }
.nx-root .nx-fc-orange { --fc: color-mix(in srgb, var(--nx-amber) 60%, var(--nx-danger)); }
.nx-root .nx-fc-red { --fc: var(--nx-danger); }
.nx-root .nx-fc-purple { --fc: color-mix(in srgb, var(--nx-blue) 55%, var(--nx-danger)); }
.nx-root .nx-fc-teal { --fc: color-mix(in srgb, var(--nx-cyan) 65%, var(--nx-text)); }
.nx-root .nx-fc-gold { --fc: var(--nx-amber); }
.nx-root .nx-fc-grey { --fc: var(--nx-muted); }

/* ---------------------------------------------------------------- small controls */
.nx-root .nx-iconb { width: 34px; height: 34px; flex: none; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--nx-muted); cursor: pointer; font: inherit; }
.nx-root .nx-iconb:hover { background: var(--nx-hover); color: var(--nx-text); }
.nx-root .nx-iconb[aria-expanded="true"] { background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-iconb--sm { width: 28px; height: 28px; }
.nx-root .nx-iconb[disabled] { opacity: .45; cursor: not-allowed; }
.nx-root .nx-btn--sm { min-height: 34px; padding: 0 12px; font-size: var(--nx-fs-small); border-radius: 9px; text-decoration: none; }
.nx-root .nx-menuwrap2 { position: relative; display: inline-flex; }
.nx-root .nx-menu__list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 90; min-width: 210px; padding: 6px; }
.nx-root .nx-menu__list--fixed { position: fixed; right: auto; top: auto; }
.nx-root .nx-menuwrap2--portal { display: contents; }
.nx-root .nx-menu__list--portal { position: fixed; right: auto; bottom: auto; z-index: 2000; overflow-y: auto; }
.nx-root .nx-menu__item[disabled] { opacity: .45; cursor: not-allowed; }
.nx-root .nx-menu__item--danger { color: var(--nx-bad-text); }
.nx-root .nx-fg { width: 26px; height: 26px; flex: none; display: inline-grid; place-items: center; border-radius: 8px; font-size: 14px; background: color-mix(in srgb, var(--fc) 22%, var(--nx-surface)); color: color-mix(in srgb, var(--fc) 35%, var(--nx-text)); border: 1px solid color-mix(in srgb, var(--fc) 45%, transparent); }
.nx-root .nx-fg--lg { width: 44px; height: 44px; font-size: 22px; border-radius: 13px; }

/* ---------------------------------------------------------------- layout: rail and stage */
.nx-root .nx-w0 { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--nx-s5); align-items: stretch; min-width: 0; }
/* the rail is a panel as tall as the page (nothing blank under it); its list stays in view while the cards scroll */
.nx-root .nx-rail { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); min-width: 0; }
.nx-root .nx-rail__in { display: grid; gap: 2px; align-content: start; padding: var(--nx-s3); position: sticky; top: calc(var(--nx-header-h) + var(--nx-s4)); max-height: calc(calc(100 * var(--ao-vh)) - var(--nx-header-h) - 2 * var(--nx-s4)); overflow-y: auto; }
.nx-root .nx-rail__h { display: flex; align-items: center; justify-content: space-between; min-height: 28px; padding: var(--nx-s3) var(--nx-s2) var(--nx-s1); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--nx-muted); }
.nx-root .nx-rail__h--row { padding-top: var(--nx-s4); }
.nx-root .nx-rail__row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 var(--nx-s2); border: 0; border-radius: 10px; background: none; color: var(--nx-text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; min-width: 0; }
.nx-root .nx-rail__row:hover { background: var(--nx-hover); }
.nx-root .nx-rail__row[aria-current="true"] { background: var(--nx-blue-soft); color: var(--nx-blue-text); font-weight: 800; box-shadow: inset 3px 0 0 var(--nx-blue-text); }
.nx-root .nx-rail__row[disabled] { opacity: .5; cursor: not-allowed; }
.nx-root .nx-rail__ico { width: 26px; height: 26px; flex: none; display: inline-grid; place-items: center; font-size: 16px; }
.nx-root .nx-rail__lab { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-rail__row em { font-style: normal; font-size: var(--nx-fs-small); font-weight: 700; color: var(--nx-muted); }
.nx-root .nx-rail__row[aria-current="true"] em { color: var(--nx-blue-text); }
.nx-root .nx-rail__f { display: flex; align-items: center; gap: 2px; border-radius: 10px; border: 2px solid transparent; transition: background var(--nx-ease), transform var(--nx-ease); }
.nx-root .nx-rail__f[draggable="true"] { cursor: grab; }
.nx-root .nx-rail__f.is-over { border-color: var(--nx-blue); background: var(--nx-blue-soft); transform: scale(1.02); }
.nx-root .nx-rail__more { opacity: 0; transition: opacity var(--nx-ease); }
.nx-root .nx-rail__f:hover .nx-rail__more, .nx-root .nx-rail__f:focus-within .nx-rail__more { opacity: 1; }
.nx-root .nx-rail__hint { margin: var(--nx-s2) var(--nx-s2) var(--nx-s1); }
.nx-root .nx-rail__new { color: var(--nx-muted); }
.nx-root .nx-rail__find { min-width: 0; min-height: 36px; margin: 0 var(--nx-s1) var(--nx-s1); flex: none; }
.nx-root .nx-w0__stage { background: var(--nx-bg); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s5); min-width: 0; min-height: max(420px, calc(calc(100 * var(--ao-vh)) - 300px)); display: flex; flex-direction: column; gap: var(--nx-s3); }
.nx-root .nx-w0__title { display: flex; align-items: center; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-w0__tt { flex: 1; min-width: 0; }
.nx-root .nx-w0__tt .nx-small { margin: 2px 0 0; }
.nx-root .nx-w0__bar { margin: 0; }
.nx-root .nx-w0__bar .nx-input { flex: 1 1 100%; }
.nx-root .nx-w0__bar .nx-select { flex: 0 1 auto; width: auto; max-width: 190px; min-width: 0; }
.nx-root .nx-w0 .nx-count-line { margin: 0; }
.nx-root .nx-w0__groups { display: grid; gap: var(--nx-s5); align-content: start; flex: 1; }
.nx-root .nx-w0__more { text-align: center; }
.nx-root .nx-w0__tip { margin: 0; text-align: center; }
.nx-root .nx-grp__h { display: flex; align-items: baseline; gap: var(--nx-s2); margin: 0 0 var(--nx-s3); font-size: var(--nx-fs-h3); font-weight: 800; }
.nx-root .nx-w0 .nx-fill { flex: 1; }

/* ---------------------------------------------------------------- the glance card (Overview and Compact). Colour means status: green ready, amber needs you, red a run needs a look, grey the rest.
   The folder colour fills the icon tile and the small folder chip, nowhere else. Hover lifts the card 2 px in 160 ms (transform only); nothing pulses on a timer but a live dot. */
.nx-root .nx-acgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: var(--nx-s4); align-items: stretch; min-width: 0; }
.nx-root .nx-acgrid--compact { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: var(--nx-s3); }
.nx-root .nx-ac { position: relative; display: flex; flex-direction: column; gap: var(--nx-s3); min-width: 0; padding: var(--nx-s4); background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); overflow-wrap: anywhere; transition: transform 160ms ease-out, box-shadow 160ms ease-out, border-color var(--nx-ease); }
.nx-root .nx-ac:hover, .nx-root .nx-ac:focus-within { transform: translateY(-2px); box-shadow: var(--nx-lift); }
.nx-root .nx-ac__top { position: relative; display: flex; align-items: flex-start; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-ac__ava { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 13px; font-size: 21px; font-weight: 800; color: color-mix(in srgb, var(--fc) 35%, var(--nx-text)); background: color-mix(in srgb, var(--fc) 22%, var(--nx-surface)); border: 1px solid color-mix(in srgb, var(--fc) 45%, transparent); }
.nx-root .nx-ac__ava--sm { width: 36px; height: 36px; font-size: 17px; border-radius: 11px; }
.nx-root .nx-ac__id { flex: 1; min-width: 0; display: grid; gap: 1px; }
.nx-root .nx-ac__name { margin: 0; font-size: 17px; font-weight: 700; line-height: 24px; }
.nx-root .nx-ac__link { color: var(--nx-text); text-decoration: none; }
.nx-root .nx-ac__link:hover { color: var(--nx-link); text-decoration: underline; }
.nx-root .nx-ac__who { font-size: 12px; line-height: 16px; color: var(--nx-muted); }
.nx-root .nx-ac__desc { margin: 0; font-size: 15px; line-height: 22px; color: var(--nx-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nx-root .nx-ac--compact .nx-ac__desc { -webkit-line-clamp: 1; font-size: var(--nx-fs-small); line-height: 20px; }
.nx-root .nx-ac--compact { padding: var(--nx-s3); gap: var(--nx-s2); }
.nx-root .nx-ac--compact .nx-ac__ava { width: 36px; height: 36px; font-size: 17px; border-radius: 11px; }
.nx-root .nx-ac--compact .nx-ac__name { font-size: 15px; line-height: 20px; }
.nx-root .nx-ac__st { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: var(--nx-fs-small); font-weight: 600; color: var(--nx-muted); }
.nx-root .nx-ac__st b { font-weight: 800; }
.nx-root .nx-ac__st[data-tone="ok"] b { color: var(--nx-ok-text); }
.nx-root .nx-ac__st[data-tone="warn"] b { color: var(--nx-amber-text); }
.nx-root .nx-ac__st[data-tone="bad"] b { color: var(--nx-bad-text); }
.nx-root .nx-ac__st[data-tone="info"] b { color: var(--nx-blue-text); }
.nx-root .nx-ac__st[data-tone="gray"] b { color: var(--nx-text); }
.nx-root .nx-ac__since { font-weight: 500; }
.nx-root .nx-ac__safe { display: flex; align-items: flex-start; gap: 8px; font-size: var(--nx-fs-small); color: var(--nx-muted); }
.nx-root .nx-ac__safe .anticon { margin-top: 2px; }
.nx-root .nx-ac__safe[data-tone="warn"] { color: var(--nx-amber-text); font-weight: 600; }
.nx-root .nx-ac__chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.nx-root .nx-ac__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2) var(--nx-s3); margin-top: auto; padding-top: var(--nx-s1); }
.nx-root .nx-ac__acts { display: inline-flex; align-items: center; gap: var(--nx-s3); flex-wrap: wrap; }
.nx-root .nx-btn--solid { background: var(--nx-blue); border-color: var(--nx-blue); color: var(--nx-on-blue); }
.nx-root .nx-btn--solid:hover { filter: brightness(1.07); }
.nx-root .nx-btn--quiet { background: none; border-color: transparent; color: var(--nx-link); }
.nx-root .nx-btn--quiet:hover { background: var(--nx-hover); filter: none; }
.nx-root .nx-ql { color: var(--nx-link); font-weight: 600; font-size: var(--nx-fs-small); text-decoration: none; padding: 6px 2px; }
.nx-root .nx-ql:hover { text-decoration: underline; }
.nx-root .nx-ac.is-selected { border-color: var(--nx-blue); box-shadow: 0 0 0 2px var(--nx-blue); }
.nx-root .nx-ac.is-over, .nx-root .nx-ar.is-over { outline: 2px dashed var(--nx-blue); outline-offset: 3px; }
.nx-root .nx-ac.is-dragging, .nx-root .nx-ar.is-dragging { opacity: .45; }
.nx-root .nx-ac.is-locked { border-style: dashed; }
.nx-root .nx-ac[draggable="true"], .nx-root .nx-ar[draggable="true"] { cursor: grab; }
.nx-root .nx-star { width: 34px; height: 34px; flex: none; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--nx-muted); cursor: pointer; font-size: 17px; }
.nx-root .nx-star:hover { background: var(--nx-hover); }
.nx-root .nx-star.is-on { color: var(--nx-amber-text); }
.nx-root .nx-star--none { visibility: hidden; cursor: default; }
.nx-root .nx-ac__check { position: absolute; left: -10px; top: -12px; z-index: 3; width: 30px; height: 30px; display: block; opacity: 0; transition: opacity var(--nx-ease); }
.nx-root .nx-ac:hover .nx-ac__check, .nx-root .nx-ac:focus-within .nx-ac__check, .nx-root .nx-ac.is-selected .nx-ac__check, .nx-root .nx-ar:hover .nx-ac__check, .nx-root .nx-ar:focus-within .nx-ac__check, .nx-root .nx-ar.is-selected .nx-ac__check, .nx-root .nx-w0.is-picking .nx-ac__check { opacity: 1; }
.nx-root .nx-ac__check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.nx-root .nx-ac__check span { position: absolute; inset: 4px; border-radius: 7px; border: 2px solid var(--nx-control-line); background: var(--nx-surface); display: grid; place-items: center; }
.nx-root .nx-ac__check input:checked + span { background: var(--nx-blue); border-color: var(--nx-blue); }
.nx-root .nx-ac__check input:checked + span::after { content: ""; width: 5px; height: 10px; border: solid var(--nx-on-blue); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.nx-root .nx-ac__check input:focus-visible + span { outline: var(--nx-focus-ring); outline-offset: 2px; }
.nx-root .nx-ar .nx-ac__check { position: relative; left: 0; top: 0; opacity: 1; flex: none; }
.nx-root .nx-ar__nocheck { width: 30px; flex: none; }
.nx-root .nx-avs { display: inline-flex; }
.nx-root .nx-av { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--nx-blue-soft); color: var(--nx-blue-text); border: 2px solid var(--nx-surface); font-size: 12px; font-weight: 800; }
.nx-root .nx-av + .nx-av { margin-left: -8px; }
.nx-root .nx-fchip { display: inline-flex; align-items: center; gap: 6px; max-width: 160px; padding: 2px 10px 2px 3px; border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); background: var(--nx-surface); font-size: 12px; font-weight: 600; color: var(--nx-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-fchip .nx-fg { width: 20px; height: 20px; font-size: 11px; border-radius: 6px; }

/* ---------------------------------------------------------------- the Peek panel: the rest of the overview, in a side panel */
.nx-root .nx-peek__veil { position: fixed; inset: 0; z-index: 1900; display: flex; justify-content: flex-end; background: color-mix(in srgb, var(--nx-text) 32%, transparent); }
.nx-root .nx-peek { width: min(440px, 100%); height: 100%; display: flex; flex-direction: column; background: var(--nx-surface); color: var(--nx-text); border-left: 1px solid var(--nx-line); box-shadow: var(--nx-panel-shadow); }
.nx-root .nx-peek__head { display: flex; align-items: center; gap: var(--nx-s3); padding: var(--nx-s4) var(--nx-s5); background: color-mix(in srgb, var(--fc) 14%, var(--nx-surface)); border-bottom: 3px solid var(--fc); }
.nx-root .nx-peek__id { flex: 1; min-width: 0; }
.nx-root .nx-peek__body { flex: 1; overflow-y: auto; padding: var(--nx-s4) var(--nx-s5); display: grid; gap: var(--nx-s4); align-content: start; }
.nx-root .nx-peek__h { margin: 0 0 var(--nx-s2); font-size: var(--nx-fs-small); font-weight: 800; color: var(--nx-muted); }
.nx-root .nx-peek__p { margin: 0; line-height: 1.5; }
.nx-root .nx-peek__attn { color: var(--nx-amber-text); font-weight: 600; }
.nx-root .nx-peek__row { display: flex; align-items: center; gap: var(--nx-s3); margin-bottom: var(--nx-s2); }
.nx-root .nx-peek__cannot { margin: var(--nx-s2) 0 0; color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-peek__conf { margin: var(--nx-s2) 0 0; display: flex; align-items: center; gap: 8px; }
.nx-root .nx-peek__foot { display: flex; flex-wrap: wrap; gap: var(--nx-s2); padding: var(--nx-s3) var(--nx-s5) var(--nx-s4); border-top: 1px solid var(--nx-line); }
.nx-root .nx-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nx-root .nx-ticks li { display: flex; gap: 8px; align-items: flex-start; }
.nx-root .nx-ticks .anticon { margin-top: 4px; color: var(--nx-ok-text); }
.nx-root .nx-ticks__warn .anticon { color: var(--nx-amber-text); }
.nx-root .nx-tl { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--nx-line); display: grid; gap: var(--nx-s2); }
.nx-root .nx-tl li { position: relative; color: var(--nx-muted); }
.nx-root .nx-tl li::before { content: ""; position: absolute; left: -20px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--nx-surface); border: 2px solid var(--nx-control-line); }
.nx-root .nx-tl li.is-on { color: var(--nx-text); font-weight: 700; }
.nx-root .nx-tl li.is-on::before { background: var(--nx-blue); border-color: var(--nx-blue); }

/* ---------------------------------------------------------------- the List density */
.nx-root .nx-ar-list { display: grid; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-ar { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--nx-s3); padding: 10px var(--nx-s3); background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: 12px; box-shadow: var(--nx-shadow); min-width: 0; transition: border-color var(--nx-ease), background var(--nx-ease); }
.nx-root .nx-ar:hover { background: var(--nx-hover); }
.nx-root .nx-ar.is-selected { border-color: var(--nx-blue); box-shadow: 0 0 0 2px var(--nx-blue); }
.nx-root .nx-ar__main { flex: 1 1 240px; min-width: 0; }
.nx-root .nx-ar__name { font-weight: 800; }
.nx-root .nx-ar__meta { font-size: var(--nx-fs-small); color: var(--nx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-ar__chips { min-width: 0; }
.nx-root .nx-ar__st { flex: none; width: 150px; }
.nx-root .nx-ar__used { width: 84px; flex: none; }

/* ---------------------------------------------------------------- dialogs, toasts, the selection bar */
.nx-root .nx-dialog__veil { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: var(--nx-s4); background: color-mix(in srgb, var(--nx-text) 48%, transparent); }
.nx-root .nx-dialog { width: min(480px, 100%); max-height: calc(calc(100 * var(--ao-vh)) - 32px); overflow: auto; background: var(--nx-surface); color: var(--nx-text); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-lift); padding: var(--nx-s5); display: grid; gap: var(--nx-s4); }
.nx-root .nx-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s3); }
.nx-root .nx-dialog__foot { display: flex; justify-content: flex-end; gap: var(--nx-s2); flex-wrap: wrap; }
.nx-root .nx-dialog__foot--in { margin-top: var(--nx-s2); }
.nx-root .nx-fform { display: grid; gap: var(--nx-s2); }
.nx-root .nx-fform__l { font-weight: 700; margin-top: var(--nx-s2); }
.nx-root .nx-fform__preview { display: flex; align-items: center; gap: var(--nx-s3); padding: var(--nx-s3); border-radius: 12px; background: var(--nx-bg); border: 1px solid var(--nx-line); }
.nx-root .nx-fform .nx-input { flex: none; width: 100%; }
.nx-root .nx-moves { display: grid; gap: 4px; max-height: calc(46 * var(--ao-vh)); overflow: auto; }
.nx-root .nx-move { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 4px 10px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--nx-text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.nx-root .nx-move:hover { background: var(--nx-hover); }
.nx-root .nx-move.is-on { background: var(--nx-blue-soft); border-color: var(--nx-blue); }
.nx-root .nx-move__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-move__box { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 2px solid var(--nx-control-line); border-radius: 7px; background: var(--nx-surface); color: var(--nx-on-blue); font-size: 12px; }
.nx-root .nx-move.is-on .nx-move__box, .nx-root .nx-move[aria-checked="mixed"] .nx-move__box { background: var(--nx-blue); border-color: var(--nx-blue); }
.nx-root .nx-move__half { width: 10px; height: 2px; background: var(--nx-on-blue); border-radius: 2px; }
.nx-root .nx-ftoasts { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%); z-index: 2100; display: grid; gap: var(--nx-s2); width: min(540px, calc(calc(100 * var(--ao-vw)) - 32px)); pointer-events: none; }
.nx-root .nx-ftoast { pointer-events: auto; display: flex; align-items: center; gap: var(--nx-s3); padding: 10px 12px 10px 16px; border-radius: 12px; background: var(--nx-text); color: var(--nx-bg); box-shadow: var(--nx-lift); font-weight: 600; }
.nx-root .nx-ftoast--bad { outline: 2px solid var(--nx-danger); }
.nx-root .nx-ftoast__text { flex: 1; min-width: 0; }
.nx-root .nx-ftoast__undo { border: 0; background: none; color: var(--nx-bg); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; min-height: 34px; padding: 0 8px; }
.nx-root .nx-ftoast__x { border: 0; background: none; color: var(--nx-bg); cursor: pointer; width: 32px; height: 32px; border-radius: 50%; opacity: .85; }
.nx-root .nx-ftoast :focus-visible { outline-color: var(--nx-bg); }
.nx-root .nx-selbar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1500; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--nx-s2); max-width: calc(calc(100 * var(--ao-vw)) - 24px); padding: 10px 14px; background: var(--nx-surface); color: var(--nx-text); border: 1px solid var(--nx-line); border-radius: 18px; box-shadow: var(--nx-lift); }

/* ---------------------------------------------------------------- skeletons */
.nx-root .nx-skel { background: linear-gradient(90deg, var(--nx-hover), var(--nx-surface), var(--nx-hover)); background-size: 220% 100%; border-radius: var(--nx-r2); border: 1px solid var(--nx-line); }
.nx-root .nx-skel--card { min-height: 230px; }
.nx-root .nx-skel--list { min-height: 58px; }
.nx-root .nx-skel--row { min-height: 40px; margin: 2px 0; }
.nx-root .nx-ar-list[aria-hidden] { display: grid; gap: var(--nx-s2); }
@keyframes nx-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes nx-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes nx-peekin { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes nx-cardin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-skel { animation: nx-shimmer 1.4s linear infinite; }
  .nx-root .nx-dialog { animation: nx-pop 160ms ease-out; }
  .nx-root .nx-ftoast, .nx-root .nx-selbar .nx-btn:first-of-type { animation: nx-pop 160ms ease-out; }
  .nx-root .nx-acgrid > .nx-ac { animation: nx-cardin 240ms cubic-bezier(.2, .7, .2, 1) backwards; }
  .nx-root .nx-peek { animation: nx-peekin 200ms cubic-bezier(.2, .7, .2, 1); }
  .nx-root .nx-acgrid > .nx-ac:nth-child(2) { animation-delay: 30ms; }
  .nx-root .nx-acgrid > .nx-ac:nth-child(3) { animation-delay: 60ms; }
  .nx-root .nx-acgrid > .nx-ac:nth-child(4) { animation-delay: 90ms; }
  .nx-root .nx-acgrid > .nx-ac:nth-child(n+5) { animation-delay: 120ms; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-root .nx-ac:hover, .nx-root .nx-ac:focus-within { transform: none; }
  .nx-root .nx-rail__f.is-over { transform: none; }
}

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1100px) {
  .nx-root .nx-w0 { grid-template-columns: 224px minmax(0, 1fr); gap: var(--nx-s4); }
}
@media (pointer: coarse) {
  .nx-root .nx-btn--sm { min-height: 40px; }
  .nx-root .nx-w0 .nx-ac__check { opacity: 1; }
  .nx-root .nx-rail__more { opacity: 1; }
  .nx-root .nx-iconb, .nx-root .nx-star { width: 40px; height: 40px; }
}
@media (max-width: 860px) {
  .nx-root .nx-w0 { grid-template-columns: minmax(0, 1fr); gap: var(--nx-s3); }
  .nx-root .nx-rail { background: none; border: 0; box-shadow: none; }
  .nx-root .nx-rail__in { position: static; max-height: none; display: flex; gap: var(--nx-s2); overflow-x: auto; overflow-y: hidden; padding: 2px 0 var(--nx-s2); scrollbar-width: none; }
  .nx-root .nx-rail__in::-webkit-scrollbar { display: none; }
  .nx-root .nx-rail__h, .nx-root .nx-rail__hint, .nx-root .nx-rail__find, .nx-root .nx-rail__more { display: none; }
  .nx-root .nx-rail__row, .nx-root .nx-rail__f { flex: none; width: auto; border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); background: var(--nx-surface); padding: 0 12px; }
  .nx-root .nx-rail__f { padding: 0; border-width: 1px; }
  .nx-root .nx-rail__f .nx-rail__row { border: 0; background: none; }
  .nx-root .nx-rail__row[aria-current="true"] { background: var(--nx-blue); color: var(--nx-on-blue); box-shadow: none; border-color: var(--nx-blue); }
  .nx-root .nx-rail__row[aria-current="true"] em { color: var(--nx-on-blue); }
  .nx-root .nx-rail__f:has(.nx-rail__row[aria-current="true"]) { background: var(--nx-blue); border-color: var(--nx-blue); }
  .nx-root .nx-rail__lab { max-width: 150px; }
  .nx-root .nx-w0__stage { padding: var(--nx-s3); min-height: 0; }
  .nx-root .nx-acgrid, .nx-root .nx-acgrid--compact { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-ar__chips, .nx-root .nx-ar__used { display: none; }
  .nx-root .nx-ftoasts { bottom: calc(var(--nx-bar-h) + 88px); }
  .nx-root .nx-selbar { bottom: calc(var(--nx-bar-h) + 12px); }
  .nx-root .nx-w0__bar .nx-select { flex: 1 1 140px; padding: 0 8px; font-size: 14px; }
}

/* W0b (21 Oct 2026): the numbers on the Agents page cards and the Peek panel (GET /api/ws/agent-stats). Tokens only; every rule starts with .nx-root.
   Nothing here draws until the numbers have arrived: before that the cards are exactly what nx-w0.css makes them. Colour never stands alone: every figure has its word,
   the trend has a sentence and a table, the last result is a word. Motion only under prefers-reduced-motion: no-preference. */

/* ---------------------------------------------------------------- on a card: four small facts, two to a row */
.nx-root .nx-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nx-s3) var(--nx-s4); margin: 0; padding: var(--nx-s3) 0 0; border-top: 1px solid var(--nx-line); }
.nx-root .nx-ov__f { min-width: 0; display: grid; gap: 2px; align-content: start; }
.nx-root .nx-ov__f dt { margin: 0; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--nx-muted); }
.nx-root .nx-ov__f dd { margin: 0; min-width: 0; display: grid; gap: 2px; }
.nx-root .nx-ov__f dd b { font-size: 20px; line-height: 26px; font-weight: 800; color: var(--nx-text); font-variant-numeric: tabular-nums; }
.nx-root .nx-ov__res { font-size: var(--nx-fs-small); font-weight: 700; color: var(--nx-muted); }
.nx-root .nx-ov__res[data-tone="ok"] { color: var(--nx-ok-text); }
.nx-root .nx-ov__res[data-tone="warn"] { color: var(--nx-amber-text); }
.nx-root .nx-ov__res[data-tone="bad"] { color: var(--nx-bad-text); }
.nx-root .nx-ov-line { display: block; width: 100%; max-width: 120px; height: 24px; overflow: visible; }
.nx-root .nx-ov-line polyline { fill: none; stroke: var(--nx-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.nx-root .nx-ov-line circle { fill: var(--nx-blue); }
.nx-root .nx-ov-meter { display: block; width: 100%; max-width: 120px; height: 6px; border-radius: var(--nx-rfull); background: var(--nx-hover); overflow: hidden; }
.nx-root .nx-ov-meter i { display: block; height: 100%; border-radius: var(--nx-rfull); background: var(--nx-blue); }
.nx-root .nx-ac__none, .nx-root .nx-ac__mini { margin: 0; color: var(--nx-muted); }
.nx-root .nx-ac--compact .nx-ac__mini { font-weight: 600; }

/* ---------------------------------------------------------------- in a List row: one quiet line under the job */
.nx-root .nx-ar__nums { color: var(--nx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- in the Peek panel: the same facts, then seven bars and the table behind Show data */
.nx-root .nx-peek .nx-facts { border-top: 0; padding-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nx-root .nx-ov-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--nx-s2); align-items: end; height: 120px; margin-top: var(--nx-s3); padding: var(--nx-s2) var(--nx-s2) 0; background: var(--nx-bg); border: 1px solid var(--nx-line); border-radius: var(--nx-r1); }
.nx-root .nx-ov-bars__c { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: 2px; min-width: 0; }
.nx-root .nx-ov-bars__v { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--nx-text); font-variant-numeric: tabular-nums; }
.nx-root .nx-ov-bars__bar { align-self: end; width: 70%; max-width: 28px; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--nx-blue); transform-origin: bottom; }
.nx-root .nx-ov-bars__d { font-size: 11px; line-height: 16px; color: var(--nx-muted); }
.nx-root .nx-ov-data { margin-top: var(--nx-s3); }
.nx-root .nx-ov-data summary { cursor: pointer; font-size: var(--nx-fs-small); font-weight: 700; color: var(--nx-link); min-height: 24px; }
.nx-root .nx-ov-data summary:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; border-radius: 4px; }
.nx-root .nx-ov-table { width: 100%; margin-top: var(--nx-s2); border-collapse: collapse; font-size: var(--nx-fs-small); }
.nx-root .nx-ov-table th, .nx-root .nx-ov-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--nx-line); color: var(--nx-text); font-weight: 600; }
.nx-root .nx-ov-table thead th { color: var(--nx-muted); font-weight: 700; }
.nx-root .nx-ov-table td { text-align: right; font-variant-numeric: tabular-nums; }

@keyframes nx-barup { from { transform: scaleY(0); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-ov-bars__bar { animation: nx-barup 260ms cubic-bezier(.2, .7, .2, 1) backwards; }
  .nx-root .nx-ov-meter i { transition: width 260ms ease-out; }
}
@media (max-width: 420px) {
  .nx-root .nx-facts { gap: var(--nx-s2) var(--nx-s3); }
  .nx-root .nx-ov__f dd b { font-size: 18px; }
}

/* ---------------------------------------------------------------- W0c: a folder is made in the rail (no dialog), and in the Move to folder dialog */
.nx-root .nx-rail__newbtn { position: relative; display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px; margin: 0 0 var(--nx-s1); padding: 0 12px; background: none; border: 1px dashed var(--nx-control-line); border-radius: 12px; color: var(--nx-link); font: inherit; font-weight: 700; cursor: pointer; text-align: left; }
.nx-root .nx-rail__newbtn:hover:not(:disabled) { background: var(--nx-hover); }
.nx-root .nx-rail__newbtn:focus-visible { outline: var(--nx-focus-ring); outline-offset: 2px; }
.nx-root .nx-rail__newbtn:disabled { opacity: .6; cursor: not-allowed; }
.nx-root .nx-rail__add { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; width: 100%; padding: 2px 0 var(--nx-s2); }
.nx-root .nx-rail__add .nx-input { width: 100%; min-width: 0; flex: none; min-height: 40px; box-sizing: border-box; }
.nx-root .nx-rail__addhint { color: var(--nx-muted); }
.nx-root .nx-rail__row--edit { display: flex; align-items: flex-start; gap: var(--nx-s2); cursor: default; }
.nx-root .nx-rail__row--edit { box-sizing: border-box; width: 100%; min-width: 0; }
.nx-root .nx-rail__row--edit .nx-rail__add { flex: 1 1 0; width: auto; min-width: 0; padding: 0; }
.nx-root .nx-rail__first { display: grid; justify-items: center; gap: var(--nx-s2); padding: var(--nx-s4) var(--nx-s3); text-align: center; background: var(--nx-bg); border: 1px solid var(--nx-line); border-radius: 12px; }
.nx-root .nx-rail__firsticon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; font-size: 22px; background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-rail__firsth { margin: 0; font-size: var(--nx-fs-h3); font-weight: 800; color: var(--nx-text); }
.nx-root .nx-rail__firstp { margin: 0; color: var(--nx-muted); }
.nx-root .nx-rail__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--nx-s2); }
.nx-root .nx-rail__chip { min-height: 32px; padding: 0 12px; background: var(--nx-surface); border: 1px solid var(--nx-control-line); border-radius: var(--nx-rfull); color: var(--nx-text); font: inherit; font-size: var(--nx-fs-small); font-weight: 600; cursor: pointer; }
.nx-root .nx-rail__chip:hover { background: var(--nx-hover); }
.nx-root .nx-rail__chip:focus-visible { outline: var(--nx-focus-ring); outline-offset: 2px; }
.nx-root .nx-newmove { display: grid; gap: var(--nx-s2); margin: 0 0 var(--nx-s3); }
.nx-root .nx-newmove__row { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-newmove__row .nx-input { flex: 1 1 180px; min-width: 0; width: auto; }
.nx-root .nx-rail__drop { margin-top: var(--nx-s3); padding: var(--nx-s3); text-align: center; border: 2px dashed var(--nx-control-line); border-radius: 12px; color: var(--nx-muted); font-size: var(--nx-fs-small); font-weight: 600; }
.nx-root .nx-rail__drop.is-over { border-color: var(--nx-blue); color: var(--nx-blue-text); background: var(--nx-blue-soft); }
@media (pointer: coarse) {
  .nx-root .nx-rail__chip { min-height: 40px; }
}
@media (max-width: 860px) {
  .nx-root .nx-rail__in { align-items: flex-start; }
  .nx-root .nx-rail__newbtn { flex: none; width: auto; }
  .nx-root .nx-rail__add { flex: none; width: min(320px, calc(86 * var(--ao-vw))); }
  .nx-root .nx-rail__drop { display: none; }
  /* in the one row of pills the first-time card is one row too: its name, the three starting names and Name my own */
  .nx-root .nx-rail__first { display: flex; flex-direction: row; align-items: center; flex: none; width: auto; gap: var(--nx-s2); padding: 4px 12px; border-radius: var(--nx-rfull); }
  .nx-root .nx-rail__firsticon, .nx-root .nx-rail__firstp { display: none; }
  .nx-root .nx-rail__firsth { font-size: var(--nx-fs-small); white-space: nowrap; }
  .nx-root .nx-rail__chips { flex-wrap: nowrap; }
  .nx-root .nx-rail__chip, .nx-root .nx-rail__first .nx-btn { white-space: nowrap; flex: none; }
}

/* ---------------------------------------------------------------- W0d: Home and Ctrl K draw the same glance card; in the search box an agent is one compact row */
.nx-root .nx-stack--home { display: grid; gap: var(--nx-s5); min-width: 0; }
.nx-root .nx-pal__tile { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; font-size: 16px; font-weight: 800; background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-pal__st { display: flex; align-items: center; gap: 6px; }
.nx-root .nx-pal__st b { font-weight: 800; color: var(--nx-muted); }
.nx-root .nx-pal__st[data-tone="ok"] b { color: var(--nx-ok-text); }
.nx-root .nx-pal__st[data-tone="warn"] b { color: var(--nx-amber-text); }
.nx-root .nx-pal__st[data-tone="bad"] b { color: var(--nx-bad-text); }
.nx-root .nx-pal__st[data-tone="info"] b { color: var(--nx-blue-text); }
.nx-root .nx-pal__row .nx-btn--sm { flex: none; min-height: 30px; }


/* ---------------------------------------------------------------- W0d: the folder dialog. Colours are 32 px circles FILLED with the folder colour, icons are 40 px tiles in it (nx-fsw: nx-sw is the chart legend of nx-w2.css). */
.nx-root .nx-fform { display: grid; gap: var(--nx-s4); }
.nx-root .nx-fform__l { margin: 0; }
.nx-root .nx-fform__preview { display: flex; align-items: center; gap: var(--nx-s3); padding: var(--nx-s3); border-radius: 12px; background: var(--nx-bg); border: 1px solid var(--nx-line); }
.nx-root .nx-fform__preview b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-fsw-row { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px; }
.nx-root .nx-fsw-grid { display: grid; grid-template-columns: repeat(6, 40px); gap: 8px; padding: 4px; }
.nx-root .nx-fsw { position: relative; box-sizing: border-box; width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; flex: none; border-radius: 50%; border: 2px solid var(--nx-surface); background: var(--fc); color: var(--nx-text); font-size: 16px; cursor: pointer; box-shadow: 0 0 0 1px var(--nx-control-line); }
.nx-root .nx-fsw:hover { box-shadow: 0 0 0 1px var(--nx-control-line), 0 0 0 4px var(--nx-hover); }
.nx-root .nx-fsw.is-on { box-shadow: 0 0 0 2px var(--nx-surface), 0 0 0 5px var(--nx-text); }
.nx-root .nx-fsw:focus-visible { outline: var(--nx-focus-ring); outline-offset: 4px; }
.nx-root .nx-fsw__tick { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--nx-surface); color: var(--nx-text); font-size: 11px; }
.nx-root .nx-fsw__tick--sm { inset: auto 2px 2px auto; width: 14px; height: 14px; font-size: 9px; }
.nx-root .nx-fsw--icon { width: 40px; height: 40px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--fc) 45%, transparent); background: color-mix(in srgb, var(--fc) 22%, var(--nx-surface)); color: color-mix(in srgb, var(--fc) 35%, var(--nx-text)); font-size: 19px; box-shadow: none; }
.nx-root .nx-fsw--icon:hover { background: color-mix(in srgb, var(--fc) 32%, var(--nx-surface)); box-shadow: none; }
.nx-root .nx-fsw--icon.is-on { border-color: var(--nx-text); box-shadow: 0 0 0 2px var(--nx-text); background: color-mix(in srgb, var(--fc) 34%, var(--nx-surface)); }
@media (pointer: coarse) {
  .nx-root .nx-fsw { width: 40px; height: 40px; }
}
@media (max-width: 420px) {
  .nx-root .nx-fsw-grid { grid-template-columns: repeat(6, minmax(36px, 1fr)); }
  .nx-root .nx-fsw--icon { width: 100%; }
}

/* Home: fewer cards than columns stretch to fill the row (nothing is left blank beside them) */
.nx-root .nx-acgrid--home { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }

/* W2 (statistic tiles and charts, 21 Oct 2026): Home strip and Work > Dashboards. Every rule starts with .nx-root (web/test/nx-css-scoped.test.js) and takes its colours only from the
   --nx-* tokens (accent = --nx-blue, accent 2 = --nx-text (the cyan failed 3:1 on Daylight and Ocean), success, warning = --nx-amber, bad = --nx-danger, --nx-muted); series colours: 0 accent, 1 accent 2, 2 success, 3 warning, 4 muted.
   Motion (tiles settle in, bars grow, the line is drawn, the gauge and the donut sweep) is only under prefers-reduced-motion: no-preference. web/build.mjs adds this file after nx-r3.css. */

/* ---------------------------------------------------------------- statistic tiles */
.nx-root .nx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: var(--nx-s4); margin: 0 0 var(--nx-s5); }
@media (min-width: 1000px) { .nx-root .nx-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nx-root .nx-stat { position: relative; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s4); box-shadow: var(--nx-shadow); display: grid; gap: var(--nx-s2); align-content: start; min-width: 0; }
.nx-root .nx-stat__top { display: flex; align-items: center; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-stat__ico { width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--nx-blue-soft); color: var(--nx-blue-text); display: grid; place-items: center; }
.nx-root .nx-stat__svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-stat__label { font-weight: 700; font-size: var(--nx-fs-small); color: var(--nx-muted); min-width: 0; overflow-wrap: anywhere; text-decoration: none; }
.nx-root .nx-stat__link { background: none; border: 0; padding: 0; font: inherit; font-size: var(--nx-fs-small); font-weight: 700; text-align: left; cursor: pointer; }
.nx-root .nx-stat__link:hover { color: var(--nx-text); text-decoration: underline; }
.nx-root .nx-stat__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--nx-r2); }
.nx-root .nx-stat__link:focus-visible { outline: none; }
.nx-root .nx-stat__link:focus-visible::after { outline: var(--nx-focus-ring); outline-offset: 2px; }
.nx-root .nx-stat--open { cursor: pointer; }
.nx-root .nx-stat__value { font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.5px; color: var(--nx-text); font-variant-numeric: tabular-nums; min-height: 33px; }
.nx-root .nx-stat__value--none { color: var(--nx-muted); }
.nx-root .nx-stat__foot { display: flex; flex-wrap: wrap; gap: 2px var(--nx-s2); font-size: var(--nx-fs-small); color: var(--nx-muted); min-height: 18px; align-items: baseline; }
.nx-root .nx-delta { color: var(--nx-text); font-weight: 700; }
.nx-root .nx-delta__mark { font-size: 10px; }
.nx-root .nx-delta--up .nx-delta__mark { color: var(--nx-success); }
.nx-root .nx-delta--down .nx-delta__mark { color: var(--nx-amber); }
.nx-root .nx-delta--same .nx-delta__mark { color: var(--nx-muted); }
.nx-root .nx-stats--compact { gap: var(--nx-s3); margin-bottom: var(--nx-s5); }
.nx-root .nx-stats--compact .nx-stat { padding: var(--nx-s3) var(--nx-s4); gap: 6px; }
.nx-root .nx-stats--compact .nx-stat__value { font-size: 26px; min-height: 29px; }

/* skeleton: a quiet block that pulses while the number or the chart loads */
.nx-root .nx-skel { background: var(--nx-line); border-radius: 8px; }
.nx-root .nx-skel--num { height: 29px; width: 52%; }
.nx-root .nx-skel--line { display: block; height: 12px; width: 72%; }
.nx-root .nx-skel--chart { height: 190px; width: 100%; }

/* ---------------------------------------------------------------- overview on Work > Dashboards */
.nx-root .nx-w2 { margin: 0 0 var(--nx-s7); }
.nx-root .nx-w2-bar { display: flex; align-items: center; gap: var(--nx-s3); flex-wrap: wrap; margin: 0 0 var(--nx-s4); }
.nx-root .nx-w2-pick { display: inline-flex; align-items: center; gap: var(--nx-s2); font-weight: 600; min-width: 0; }
.nx-root .nx-w2-pick .nx-select { max-width: min(360px, calc(70 * var(--ao-vw))); }
.nx-root .nx-w2-queue .nx-section { margin-top: 0; }
.nx-root .nx-w2-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nx-s4); grid-auto-flow: dense; }
@media (min-width: 760px) {
  .nx-root .nx-w2-queue .nx-section { margin-top: 0; }
.nx-root .nx-w2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-root .nx-chart--wide { grid-column: span 2; }
}
@media (min-width: 1700px) { .nx-root .nx-w2-queue .nx-section { margin-top: 0; }
.nx-root .nx-w2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- chart card */
.nx-root .nx-chart { display: grid; gap: var(--nx-s3); align-content: start; min-width: 0; }
.nx-root .nx-chart__head { display: flex; align-items: baseline; gap: var(--nx-s3); }
.nx-root .nx-chart__title { flex: 1; min-width: 0; margin: 0; font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--nx-text); }
.nx-root .nx-chart__toggle { min-height: 32px; padding: 0 4px; white-space: nowrap; }
.nx-root .nx-chart__sub { margin: -4px 0 0; }
.nx-root .nx-chart--note { align-content: center; }
.nx-root .nx-chart .nx-empty { padding: var(--nx-s6) var(--nx-s3); }
.nx-root .nx-chart__table { overflow-x: auto; border-top: 1px solid var(--nx-line); padding-top: var(--nx-s2); }
.nx-root .nx-chart__table table { width: 100%; border-collapse: collapse; font-size: var(--nx-fs-small); }
.nx-root .nx-chart__table th, .nx-root .nx-chart__table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--nx-line); font-variant-numeric: tabular-nums; }
.nx-root .nx-chart__table thead th { color: var(--nx-muted); font-weight: 700; }
.nx-root .nx-chart__table tbody th { font-weight: 600; color: var(--nx-text); }
.nx-root .nx-chart__table td { color: var(--nx-text); }

/* series colours (a swatch, a donut segment) */
.nx-root .nx-s0 { --c: var(--nx-blue); }
.nx-root .nx-s1 { --c: var(--nx-text); }
.nx-root .nx-s2 { --c: var(--nx-success); }
.nx-root .nx-s3 { --c: var(--nx-amber); }
.nx-root .nx-s4 { --c: var(--nx-muted); }
.nx-root .nx-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; background: var(--c); }
.nx-root .nx-sw--a { --c: var(--nx-blue); }
.nx-root .nx-sw--b { border: 1.5px solid var(--nx-danger); background: repeating-linear-gradient(135deg, var(--nx-danger) 0 2px, transparent 2px 4px); }
.nx-root .nx-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px var(--nx-s4); font-size: var(--nx-fs-small); color: var(--nx-text); }
.nx-root .nx-legend li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.nx-root .nx-legend--col { display: grid; gap: var(--nx-s2); flex: 1; min-width: 170px; }
.nx-root .nx-legend--col li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: var(--nx-s2); align-items: center; }
.nx-root .nx-legend__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- bars */
.nx-root .nx-bars { display: grid; gap: var(--nx-s3); }
.nx-root .nx-bars__plot { display: flex; align-items: stretch; gap: 4px; height: 200px; border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-bars__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; }
.nx-root .nx-bars__n { font-size: var(--nx-fs-small); font-weight: 700; color: var(--nx-text); min-height: 17px; font-variant-numeric: tabular-nums; }
.nx-root .nx-bars__stack { width: 100%; max-width: 36px; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; }
.nx-root .nx-bars__a, .nx-root .nx-bars__b { display: block; width: 100%; min-height: 3px; transform-origin: 50% 100%; }
.nx-root .nx-bars__a { background: var(--nx-blue); border-radius: 4px 4px 0 0; }
.nx-root .nx-bars__b { border: 1.5px solid var(--nx-danger); background: repeating-linear-gradient(135deg, var(--nx-danger) 0 2px, transparent 2px 4px); border-radius: 4px 4px 0 0; }
.nx-root .nx-bars__a + .nx-bars__b { border-radius: 0; }
.nx-root .nx-bars__axis { display: flex; gap: 4px; margin-top: -6px; }
.nx-root .nx-bars__x { flex: 1 1 0; min-width: 0; text-align: center; font-size: var(--nx-fs-small); color: var(--nx-muted); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- line */
.nx-root .nx-line { display: grid; gap: 6px; }
.nx-root .nx-line__plot { position: relative; height: 170px; border-bottom: 1px solid var(--nx-line); margin: 0 6px; }
.nx-root .nx-line__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nx-root .nx-line__path { fill: none; stroke: var(--nx-blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.nx-root .nx-line__area { fill: var(--nx-blue-soft); stroke: none; opacity: .7; }
.nx-root .nx-line__dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--nx-surface); border: 2.5px solid var(--nx-blue); transform: translate(-50%, -50%); box-sizing: border-box; }
.nx-root .nx-line__axis { display: flex; justify-content: space-between; font-size: var(--nx-fs-small); color: var(--nx-muted); }
.nx-root .nx-line__end { text-align: right; font-size: var(--nx-fs-small); color: var(--nx-muted); }
.nx-root .nx-line__end b { color: var(--nx-text); font-size: 16px; }

/* ---------------------------------------------------------------- gauge */
.nx-root .nx-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--nx-s4); }
.nx-root .nx-gauge { display: grid; justify-items: center; gap: 4px; min-width: 0; text-align: center; }
.nx-root .nx-gauge__dial { display: grid; width: min(100%, 210px); }
.nx-root .nx-gauge__dial > * { grid-area: 1 / 1; }
.nx-root .nx-gauge__dial svg { width: 100%; height: auto; display: block; }
.nx-root .nx-gauge__track, .nx-root .nx-gauge__bar { fill: none; stroke-width: 16; stroke-linecap: round; }
.nx-root .nx-gauge__track { stroke: var(--nx-line); }
.nx-root .nx-gauge__bar { stroke: var(--nx-success); }
.nx-root .nx-gauge--near .nx-gauge__bar { stroke: var(--nx-amber); }
.nx-root .nx-gauge--out .nx-gauge__bar { stroke: var(--nx-danger); }
.nx-root .nx-gauge__mid { align-self: end; justify-self: center; padding-bottom: 2px; font-size: 26px; line-height: 1.1; font-weight: 800; color: var(--nx-text); font-variant-numeric: tabular-nums; }
.nx-root .nx-gauge__name { font-weight: 700; color: var(--nx-text); overflow-wrap: anywhere; }
.nx-root .nx-gauge__sub { min-height: 18px; }

/* ---------------------------------------------------------------- donut */
.nx-root .nx-donut { display: flex; align-items: center; gap: var(--nx-s5); flex-wrap: wrap; }
.nx-root .nx-donut__ring { position: relative; width: 150px; height: 150px; flex: none; }
.nx-root .nx-donut__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.nx-root .nx-donut__track, .nx-root .nx-donut__seg { fill: none; stroke-width: 14; }
.nx-root .nx-donut__track { stroke: var(--nx-line); }
.nx-root .nx-donut__seg { stroke: var(--c); }
.nx-root .nx-donut__mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.nx-root .nx-donut__mid b { font-size: 26px; line-height: 1.1; font-weight: 800; color: var(--nx-text); font-variant-numeric: tabular-nums; }
.nx-root .nx-donut__mid span { font-size: var(--nx-fs-small); color: var(--nx-muted); }

/* ---------------------------------------------------------------- heat map */
.nx-root .nx-heat { display: grid; gap: 3px; min-width: 0; }
.nx-root .nx-heat__hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); margin-left: 40px; font-size: var(--nx-fs-small); color: var(--nx-muted); }
.nx-root .nx-heat__row { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 6px; }
.nx-root .nx-heat__d { font-size: var(--nx-fs-small); color: var(--nx-muted); }
.nx-root .nx-heat__cells { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; }
.nx-root .nx-heat__c { display: block; height: 20px; border-radius: 4px; background: var(--nx-line); }
.nx-root .nx-heat__c[data-l="1"] { background: var(--nx-blue-soft); }
.nx-root .nx-heat__c[data-l="2"] { background: var(--nx-blue-soft); box-shadow: inset 0 0 0 2px var(--nx-blue); }
.nx-root .nx-heat__c[data-l="3"] { background: var(--nx-blue); opacity: .72; }
.nx-root .nx-heat__c[data-l="4"] { background: var(--nx-blue); }
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .nx-root .nx-heat__c { background: color-mix(in srgb, var(--nx-line) 60%, transparent); }
  .nx-root .nx-heat__c[data-l="1"] { background: color-mix(in srgb, var(--nx-blue) 24%, var(--nx-surface)); box-shadow: none; }
  .nx-root .nx-heat__c[data-l="2"] { background: color-mix(in srgb, var(--nx-blue) 48%, var(--nx-surface)); box-shadow: none; }
  .nx-root .nx-heat__c[data-l="3"] { background: color-mix(in srgb, var(--nx-blue) 74%, var(--nx-surface)); opacity: 1; }
}
.nx-root .nx-heat__key { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: var(--nx-s2); font-size: var(--nx-fs-small); color: var(--nx-muted); }
.nx-root .nx-heat__key .nx-heat__c { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- horizontal bars */
.nx-root .nx-hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s3); }
.nx-root .nx-hbars li { display: grid; grid-template-columns: minmax(90px, 30%) minmax(0, 1fr) auto; gap: var(--nx-s3); align-items: center; }
.nx-root .nx-hbars__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.nx-root .nx-hbars__track { height: 12px; border-radius: 6px; background: var(--nx-line); overflow: hidden; }
.nx-root .nx-hbars__track i { display: block; height: 100%; border-radius: 6px; background: var(--nx-blue); transform-origin: 0 50%; }
.nx-root .nx-hbars__val { font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; }

@media (max-width: 520px) {
  .nx-root .nx-hbars li { grid-template-columns: minmax(70px, 34%) minmax(0, 1fr) auto; gap: var(--nx-s2); }
  .nx-root .nx-donut { justify-content: center; }
}

/* ---------------------------------------------------------------- motion (all of it off with reduced motion; nx.css also turns every animation off then) */
@keyframes nx-w2-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes nx-w2-grow { from { transform: scaleY(0); } }
@keyframes nx-w2-growx { from { transform: scaleX(0); } }
@keyframes nx-w2-reveal { from { clip-path: inset(0 100% -10% 0); } to { clip-path: inset(0 0 -10% 0); } }
@keyframes nx-w2-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } }
@keyframes nx-w2-sweep { from { stroke-dasharray: 0 100; } }
@keyframes nx-w2-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-stat { animation: nx-w2-in 360ms cubic-bezier(.2, .7, .2, 1) backwards; }
  .nx-root .nx-stat:nth-child(2) { animation-delay: 50ms; }
  .nx-root .nx-stat:nth-child(3) { animation-delay: 100ms; }
  .nx-root .nx-stat:nth-child(4) { animation-delay: 150ms; }
  .nx-root .nx-stat--open { transition: transform 160ms ease-out, box-shadow 160ms ease-out; }
  .nx-root .nx-stat--open:hover, .nx-root .nx-stat--open:focus-within { transform: translateY(-2px); box-shadow: var(--nx-lift); }
  .nx-root .nx-skel { animation: nx-w2-pulse 1.4s ease-in-out infinite; }
  .nx-root .nx-bars__a, .nx-root .nx-bars__b { animation: nx-w2-grow 650ms cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 35ms); }
  .nx-root .nx-line__plot svg { animation: nx-w2-reveal 1100ms cubic-bezier(.3, .6, .2, 1) backwards; }
  .nx-root .nx-line__dot { animation: nx-w2-pop 320ms cubic-bezier(.2, .8, .3, 1.3) backwards; animation-delay: calc(300ms + var(--i, 0) * 70ms); }
  .nx-root .nx-gauge__bar { animation: nx-w2-sweep 900ms cubic-bezier(.3, .6, .2, 1) backwards; }
  .nx-root .nx-donut__seg { animation: nx-w2-sweep 800ms cubic-bezier(.3, .6, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 120ms); }
  .nx-root .nx-hbars__track i { animation: nx-w2-growx 650ms cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
}

/* W3, the Work views of the redesigned look: the List | Board | Agenda choice, the board (nx-board.jsx) and the agenda calendar (nx-agenda.jsx).
   Every rule starts with .nx-root (web/test/nx-css-scoped.test.js) and takes its colours from the --nx-* tokens only, so all themes follow (qa-2026-10-21-nx-themes).
   Motion (rising cards, skeleton pulse) is only declared inside prefers-reduced-motion: no-preference. Add this file to web/build.mjs after nx-r3.css. */

.nx-root .nx-w3-bar { display: flex; align-items: center; justify-content: flex-end; gap: var(--nx-s3); flex-wrap: wrap; margin: 0 0 var(--nx-s4); }

/* ---------------------------------------------------------------- skeleton and rising lists */
.nx-root .nx-w3-skelwrap { display: grid; gap: var(--nx-s3); }
.nx-root .nx-w3-skelcard { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s4); display: grid; gap: var(--nx-s2); }
.nx-root .nx-w3-skel { height: 14px; border-radius: var(--nx-r1); background: var(--nx-line); }
@keyframes nx-w3-rise { from { opacity: 0; transform: translate3d(0, 12px, -30px); } }
@keyframes nx-w3-shimmer { from { opacity: .4; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-w3-rise > * { animation: nx-w3-rise 260ms cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
  .nx-root .nx-w3-skel { animation: nx-w3-shimmer 1.2s ease-in-out infinite alternate; }
}

/* ---------------------------------------------------------------- board: three read-only columns (one column with a switcher under 860 px) */
.nx-root .nx-board { display: grid; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-board__hint { margin: 0; }
.nx-root .nx-board__switch { display: none; }
.nx-root .nx-board__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nx-s4); align-items: stretch; min-width: 0; }
.nx-root .nx-bcol { background: var(--nx-hover); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s3); min-width: 0; display: flex; flex-direction: column; gap: var(--nx-s3); min-height: max(260px, calc(calc(100 * var(--ao-vh)) - 400px)); }
.nx-root .nx-bcol[data-focus] { border-color: var(--nx-blue); box-shadow: inset 0 3px 0 var(--nx-blue); }
.nx-root .nx-bcol__head { display: flex; align-items: center; gap: var(--nx-s2); min-height: 32px; }
.nx-root .nx-bcol__title { margin: 0; font-size: var(--nx-fs-body); font-weight: 800; flex: 1; min-width: 0; color: var(--nx-text); }
.nx-root .nx-bcol__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s3); }
.nx-root .nx-bcol .nx-empty { padding: var(--nx-s6) var(--nx-s2); }
/* the column fills the height; what is left is a dashed tile that says what lands here (read only: nothing is dropped on it, it is only a hint) */
.nx-root .nx-bcol__drop { flex: 1; min-height: 64px; display: grid; place-items: center; text-align: center; padding: var(--nx-s3); border: 2px dashed var(--nx-control-line); border-radius: var(--nx-r2); color: var(--nx-muted); font-size: var(--nx-fs-small); font-weight: 600; }
.nx-root .nx-bcol__drop--empty { align-content: center; font-weight: inherit; font-size: inherit; }
.nx-root .nx-bcol__drop--empty .nx-empty { padding: var(--nx-s4) var(--nx-s2); }
.nx-root .nx-bcard { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); padding: var(--nx-s3) var(--nx-s4); display: grid; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-bcard__top { display: flex; align-items: center; gap: var(--nx-s2); flex-wrap: wrap; }
.nx-root .nx-bcard__age { margin-left: auto; }
.nx-root .nx-bcard__title { font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.nx-root .nx-bcard__agent { font-weight: 600; font-size: var(--nx-fs-small); color: var(--nx-muted); overflow-wrap: anywhere; }
.nx-root .nx-bcard__note { font-size: var(--nx-fs-small); color: var(--nx-muted); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nx-root .nx-bcard__action .nx-btn { white-space: normal; text-align: center; max-width: 100%; }
/* hover: the card lifts 2 px in 160 ms (the separate translate property, so the tilt of the depth card is untouched) */
.nx-root .nx-bcard, .nx-root .nx-arow { transition: transform 140ms ease-out, translate 160ms ease-out; }
.nx-root .nx-bcard:hover, .nx-root .nx-bcard:focus-within, .nx-root .nx-arow:hover { translate: 0 -2px; }
@media (prefers-reduced-motion: reduce) { .nx-root .nx-bcard:hover, .nx-root .nx-bcard:focus-within, .nx-root .nx-arow:hover { translate: none; } }
@media (max-width: 860px) {
  .nx-root .nx-board__switch { display: inline-flex; justify-self: start; max-width: 100%; }
  .nx-root .nx-board__switch .nx-seg__b { padding: 0 var(--nx-s3); }
  .nx-root .nx-board__cols { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-bcol:not([data-on]) { display: none; }
  .nx-root .nx-bcol { min-height: 0; }
}

/* ---------------------------------------------------------------- agenda: bar, weekday filter, month grid, week rows, day list */
.nx-root .nx-agenda { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: var(--nx-s4) var(--nx-s5); align-items: start; min-width: 0; }
.nx-root .nx-agenda > * { min-width: 0; }
.nx-root .nx-agenda__bar, .nx-root .nx-agenda__filters, .nx-root .nx-agenda__undated { grid-column: 1 / -1; }
.nx-root .nx-agenda__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s3); flex-wrap: wrap; }
.nx-root .nx-agenda__nav { display: flex; align-items: center; gap: var(--nx-s2); flex-wrap: wrap; min-width: 0; }
.nx-root .nx-agenda__nav .nx-btn[aria-label] { min-width: var(--nx-tap); padding: 0; font-size: var(--nx-fs-h3); }
.nx-root .nx-agenda__title { margin: 0 0 0 var(--nx-s2); font-size: var(--nx-fs-h3); font-weight: 800; min-width: 0; }
.nx-root .nx-agenda__filters { margin: 0; }
.nx-root .nx-agenda__side { display: grid; gap: var(--nx-s4); align-content: start; min-width: 0; }
.nx-root .nx-agenda__group { display: grid; gap: var(--nx-s2); margin-top: var(--nx-s3); }
.nx-root .nx-agenda__legend { display: flex; align-items: center; gap: var(--nx-s2); flex-wrap: wrap; margin: var(--nx-s3) 0 0; }
.nx-root .nx-agenda__undated .nx-small { margin: 0 0 var(--nx-s3); }

.nx-root .nx-cal { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.nx-root .nx-cal th { font-size: var(--nx-fs-small); font-weight: 700; color: var(--nx-muted); padding: var(--nx-s1) 0; text-align: center; }
.nx-root .nx-cal td { padding: 0; }
.nx-root .nx-cal__day { width: 100%; min-height: 68px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--nx-s1); padding: 6px var(--nx-s2); border: 1px solid var(--nx-line); border-radius: var(--nx-r1); background: var(--nx-surface); color: var(--nx-text); font: inherit; text-align: left; cursor: pointer; transition: background var(--nx-ease); }
.nx-root .nx-cal__day:hover { background: var(--nx-hover); }
.nx-root .nx-cal__day[data-out], .nx-root .nx-cal__day[data-off] { background: var(--nx-bg); color: var(--nx-muted); }
.nx-root .nx-cal td[aria-selected="true"] .nx-cal__day { border-color: var(--nx-blue); box-shadow: inset 0 0 0 1px var(--nx-blue); font-weight: 800; }
.nx-root .nx-cal__n { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 2px; border-radius: var(--nx-rfull); font-weight: 700; }
.nx-root .nx-cal__day[aria-current="date"] .nx-cal__n { background: var(--nx-blue); color: var(--nx-on-blue); }
.nx-root .nx-cal__dots { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; min-height: 10px; }
.nx-root .nx-adot { --w3d: var(--nx-blue); display: inline-block; width: 9px; height: 9px; box-sizing: border-box; border-radius: 50%; background: var(--w3d); flex: none; }
.nx-root .nx-adot--ok { --w3d: var(--nx-success); }
.nx-root .nx-adot--bad { --w3d: var(--nx-danger); }
.nx-root .nx-adot--amber { --w3d: var(--nx-amber); }
.nx-root .nx-adot--past { background: transparent; border: 2px solid var(--w3d); }

.nx-root .nx-arows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-arow { display: flex; align-items: center; gap: var(--nx-s3); flex-wrap: wrap; background: var(--nx-bg); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s3); min-width: 0; }
.nx-root .nx-arow__time { min-width: 52px; display: grid; line-height: 1.25; font-variant-numeric: tabular-nums; }
.nx-root .nx-arow__main { flex: 1 1 9em; min-width: 0; }
.nx-root .nx-arow__title { font-weight: 700; overflow-wrap: anywhere; }
.nx-root .nx-arow__meta { color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }
.nx-root .nx-arow .nx-btn { white-space: normal; max-width: 100%; }

.nx-root .nx-wk { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-wk__day { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--nx-s3); padding: var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); min-width: 0; }
.nx-root .nx-wk__day[data-today] { border-color: var(--nx-blue); box-shadow: inset 3px 0 0 var(--nx-blue); }
.nx-root .nx-wk__label { margin: 0; font-size: var(--nx-fs-body); font-weight: 800; display: grid; gap: 2px; align-content: start; justify-items: start; color: var(--nx-text); }
.nx-root .nx-wk__label span:not(.nx-pill) { font-weight: 600; color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-wk__none { margin: 0; align-self: center; }

@media (max-width: 1100px) {
  .nx-root .nx-agenda { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .nx-root .nx-wk__day { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-wk__label { grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--nx-s2); }
  .nx-root .nx-cal { border-spacing: 2px; }
  .nx-root .nx-cal__day { min-height: 52px; padding: 4px; }
  .nx-root .nx-cal__n { min-width: 24px; height: 24px; }
  .nx-root .nx-agenda__title { margin-left: 0; flex-basis: 100%; }
}

/* W4, the shared table of the redesigned look (nx-table.jsx, nx-tablelib.mjs). Search, quick filters, sort, row choice with a bulk bar, paging, hide a column, two row spacings, a sticky header,
   skeleton rows, an empty state. Every rule starts with .nx-root (web/test/nx-css-scoped.test.js) and takes its colours from the --nx-* tokens only, so all seven themes follow (tools/nx-contrast.mjs
   has the pairs of this file). Motion (the 1 px lift of a row, the skeleton pulse) is declared only inside prefers-reduced-motion: no-preference. Under 860 px a table becomes stacked cards, so the
   page never scrolls sideways; a table wider than its box scrolls inside its own box and says so. Add this file to web/build.mjs after nx-w3.css. */

.nx-root .nx-tbl { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-tbl--blank { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); }
.nx-root .nx-tbl__grow { flex: 1 1 0; }

/* ---------------------------------------------------------------- the bar above: search, sort (narrow only), columns and row spacing */
.nx-root .nx-tbl__bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--nx-s3); }
.nx-root .nx-tbl__search { flex: 1 1 240px; max-width: 380px; min-width: 0; }
.nx-root .nx-tbl__sortpick { display: none; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-tbl__pop { position: relative; display: inline-block; }
.nx-root .nx-tbl__panel { position: fixed; z-index: 2300; min-width: 240px; max-width: calc(calc(100 * var(--ao-vw)) - 16px); overflow-y: auto; }
.nx-root .nx-tbl__set { border: 0; margin: 0; padding: 0; min-width: 0; }
.nx-root .nx-tbl__set + .nx-tbl__set { margin-top: var(--nx-s2); border-top: 1px solid var(--nx-line); padding-top: var(--nx-s1); }
.nx-root .nx-tbl__set legend { padding: 0; }
.nx-root .nx-tbl__set .nx-menu__item > span[aria-hidden] { width: 18px; flex: none; text-align: center; color: var(--nx-blue-text); font-weight: 800; }
.nx-root .nx-tbl__check { cursor: pointer; }
.nx-root .nx-tbl__check input { width: 20px; height: 20px; accent-color: var(--nx-blue); flex: none; margin: 0 var(--nx-s1) 0 0; }
.nx-root .nx-tbl__chips { align-items: center; margin: 0; }
.nx-root .nx-tbl__chiplabel { font-weight: 700; margin-right: var(--nx-s1); }
.nx-root .nx-tbl__bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s3); padding: var(--nx-s3) var(--nx-s4); background: var(--nx-blue-soft); color: var(--nx-text); border: 1px solid var(--nx-blue-text); border-radius: var(--nx-r2); }
.nx-root .nx-tbl__bulk strong { margin-right: auto; }

/* ---------------------------------------------------------------- the table: a sticky header inside its own scrolling box */
/* a table that fits has no scroll box of its own: its header sticks under the page header while the page scrolls. A table wider than its box (class is-wide, set by nx-table.jsx) scrolls inside its own box, header sticking inside it. */
.nx-root .nx-tbl__scroll { overflow: visible; overflow: clip; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); scrollbar-width: thin; scrollbar-color: var(--nx-control-line) transparent; }
.nx-root .nx-tbl__scroll.is-wide { overflow: auto; max-height: min(calc(72 * var(--ao-vh)), 760px); }
.nx-root .nx-tbl__table { width: 100%; border-collapse: separate; border-spacing: 0; }
.nx-root .nx-tbl__table th { position: sticky; top: calc(var(--nx-header-h) + 20px); z-index: 2; background: var(--nx-hover); color: var(--nx-muted); font-size: var(--nx-fs-small); font-weight: 700; text-align: left; white-space: nowrap; padding: 0 var(--nx-s4); border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-tbl__scroll.is-wide .nx-tbl__table th { top: 0; }
.nx-root .nx-tbl__table th[aria-sort="ascending"], .nx-root .nx-tbl__table th[aria-sort="descending"] { color: var(--nx-text); }
.nx-root .nx-tbl__sort { display: inline-flex; align-items: center; gap: 6px; min-height: var(--nx-tap); padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.nx-root .nx-tbl__sort:hover { color: var(--nx-text); }
.nx-root .nx-tbl__arrow { color: var(--nx-muted); font-weight: 800; }
.nx-root .nx-tbl__table th[aria-sort="ascending"] .nx-tbl__arrow, .nx-root .nx-tbl__table th[aria-sort="descending"] .nx-tbl__arrow { color: var(--nx-blue-text); }
.nx-root .nx-tbl__th--number, .nx-root .nx-tbl__td--number { text-align: right; }
.nx-root .nx-tbl__th--number .nx-tbl__sort { justify-content: flex-end; }
.nx-root .nx-tbl__table td { padding: var(--nx-s3) var(--nx-s4); border-bottom: 1px solid var(--nx-line); vertical-align: middle; color: var(--nx-text); min-width: 0; }
.nx-root .nx-tbl__table tbody tr:last-child td { border-bottom: 0; }
.nx-root .nx-tbl--compact .nx-tbl__table td { padding-top: var(--nx-s1); padding-bottom: var(--nx-s1); }
.nx-root .nx-tbl__td--primary { font-weight: 700; }
.nx-root .nx-tbl__text { overflow-wrap: anywhere; }
.nx-root .nx-tbl__table .nx-pill { white-space: normal; max-width: 100%; }   /* a long status word wraps inside its cell instead of running out of it */
.nx-root .nx-tbl__date { white-space: nowrap; }
.nx-root .nx-tbl__num { font-variant-numeric: tabular-nums; }
.nx-root .nx-tbl__td--actions { text-align: right; }
.nx-root .nx-tbl__acts { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--nx-s2); }
.nx-root .nx-tbl__person { display: inline-flex; align-items: center; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-tbl__av { width: 32px; height: 32px; font-size: var(--nx-fs-small); }
.nx-root .nx-tbl__who { display: grid; min-width: 0; line-height: 1.3; }
.nx-root .nx-tbl__who b { overflow-wrap: anywhere; }
.nx-root .nx-tbl__who small { color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }
.nx-root .nx-tbl__selcol { width: 56px; padding-right: 0 !important; }
.nx-root .nx-tbl__box { display: inline-grid; place-items: center; width: var(--nx-tap); height: var(--nx-tap); cursor: pointer; }
.nx-root .nx-tbl__box input { width: 20px; height: 20px; margin: 0; accent-color: var(--nx-blue); cursor: pointer; }
.nx-root .nx-tbl__row:hover td { background: var(--nx-hover); }
.nx-root .nx-tbl__row.is-chosen td { background: var(--nx-blue-soft); }
.nx-root .nx-tbl__row.is-chosen td:first-child { box-shadow: inset 3px 0 0 var(--nx-blue); }
.nx-root .nx-tbl__row--none:hover td, .nx-root .nx-tbl__row--skel:hover td { background: transparent; }
.nx-root .nx-tbl__row--none .nx-empty { padding: var(--nx-s7) var(--nx-s4); }
.nx-root .nx-tbl__skel { display: block; height: 14px; border-radius: var(--nx-r1); background: var(--nx-line); }
.nx-root .nx-tbl__hint { margin: 0; }

/* ---------------------------------------------------------------- the foot: how many, rows per page, the pages */
.nx-root .nx-tbl__foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--nx-s3); }
.nx-root .nx-tbl__size { display: inline-flex; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-tbl__pager { display: inline-flex; align-items: center; gap: var(--nx-s1); flex-wrap: wrap; }
.nx-root .nx-tbl__pg { min-width: var(--nx-tap); padding: 0 var(--nx-s2); }
.nx-root .nx-tbl__pg[aria-current="page"] { background: var(--nx-blue); border-color: var(--nx-blue); color: var(--nx-on-blue); }

/* ---------------------------------------------------------------- motion: only for people who did not ask for less. A row rises less than 2 px; the skeleton breathes. */
@keyframes nx-w4-pulse { from { opacity: .45; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-tbl__row { transition: transform var(--nx-lift-t, 160ms) var(--nx-curve); }
  .nx-root .nx-tbl__row:hover { transform: translateY(-1px); }
  .nx-root .nx-tbl__row--none:hover, .nx-root .nx-tbl__row--skel:hover { transform: none; }
  .nx-root .nx-tbl__skel { animation: nx-w4-pulse 1.2s ease-in-out infinite alternate; }
}
.nx-root.is-calm .nx-tbl__row:hover { transform: none !important; }

/* ---------------------------------------------------------------- narrow: stacked cards, one per row, each value under its label. Never a sideways page. */
@media (max-width: 860px) {
  .nx-root .nx-tbl__sortpick { display: inline-flex; }
  .nx-root .nx-tbl__scroll, .nx-root .nx-tbl__scroll.is-wide { overflow: visible; max-height: none; background: none; border: 0; box-shadow: none; }
  .nx-root .nx-tbl__table, .nx-root .nx-tbl__table thead, .nx-root .nx-tbl__table tbody, .nx-root .nx-tbl__table tr, .nx-root .nx-tbl__table th, .nx-root .nx-tbl__table td { display: block; }
  .nx-root .nx-tbl__table thead tr { display: flex; }
  .nx-root .nx-tbl__table th:not(.nx-tbl__selcol) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; border: 0; white-space: nowrap; }
  .nx-root .nx-tbl__table th.nx-tbl__selcol { position: static; background: none; border: 0; padding: 0; width: auto; }
  .nx-root .nx-tbl__table tbody tr { display: grid; gap: var(--nx-s1); padding: var(--nx-s3) var(--nx-s4); margin: 0 0 var(--nx-s3); background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); }
  .nx-root .nx-tbl__table td { display: grid; grid-template-columns: minmax(88px, 36%) minmax(0, 1fr); align-items: center; gap: var(--nx-s3); padding: var(--nx-s1) 0; border: 0; background: transparent !important; box-shadow: none !important; text-align: left; }
  .nx-root .nx-tbl__table td:not([data-label]) { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-tbl__table td[data-label]::before { content: attr(data-label); color: var(--nx-muted); font-size: var(--nx-fs-small); font-weight: 700; }
  .nx-root .nx-tbl__table td .nx-pill { justify-self: start; }
  .nx-root .nx-tbl__td--primary { font-size: var(--nx-fs-h3); }
  .nx-root .nx-tbl__td--number { text-align: left; }
  .nx-root .nx-tbl__td--actions { text-align: left; padding-top: var(--nx-s2); }
  .nx-root .nx-tbl__acts { justify-content: flex-start; }
  .nx-root .nx-tbl__row.is-chosen { background: var(--nx-blue-soft); border-color: var(--nx-blue-text); }
  .nx-root .nx-tbl__table tbody tr.nx-tbl__row--none { display: block; padding: 0; }
  .nx-root .nx-tbl__table tbody tr.nx-tbl__row--none td { display: block; }
  .nx-root .nx-tbl__table .nx-tbl__selcol { width: auto; }
  .nx-root .nx-tbl__bulk strong { flex: 1 0 100%; }
  .nx-root .nx-tbl__search { max-width: none; flex-basis: 100%; }
}

/* DCC Agent Office, the redesigned look: W7 (21 Oct 2026), the pages a person sees when something is not normal.
   The sign-in screen and its notice, the state pages (page not found, you cannot open this, something went wrong, cannot be reached, updating), the update bar.
   CONTRACT as nx.css: every rule starts with .nx-root (the sign-in screen and a state that stands alone carry the root class themselves, so they get the tokens and the
   theme saved on this device); colour only from --nx-* tokens; motion only inside prefers-reduced-motion: no-preference; targets of at least 40 px; a visible focus ring
   (the one in nx.css); a state is never told by colour alone (a glyph and a word go with it). The page the SERVER draws for a failed sign-in is app/public/app.css (the gate block). */

/* ---------------------------------------------------------------- state pages */
.nx-root.nx-screen { min-height: calc(100 * var(--ao-vh)); display: grid; place-items: center; padding: var(--nx-s6) var(--nx-s4); background-color: var(--nx-bg); background-image: var(--nx-back); background-attachment: fixed; }
.nx-root .nx-screen__main { width: 100%; }
.nx-root { --nx-st-soft: var(--nx-hover); --nx-st-text: var(--nx-muted); }   /* a state's own tint and glyph colour (the plain, gray one); each kind below sets its own */
.nx-root .nx-state { max-width: 580px; margin: var(--nx-s8) auto; padding: var(--nx-s7) var(--nx-s5); text-align: center; display: grid; gap: var(--nx-s3); justify-items: center; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); }
.nx-root .nx-state--denied, .nx-root .nx-state--updating { --nx-st-soft: var(--nx-blue-soft); --nx-st-text: var(--nx-blue-text); }
.nx-root .nx-state--crash { --nx-st-soft: var(--nx-bad-soft); --nx-st-text: var(--nx-bad-text); }
.nx-root .nx-state--down, .nx-root .nx-state--ended { --nx-st-soft: var(--nx-amber-soft); --nx-st-text: var(--nx-amber-text); }
.nx-root .nx-state__glyph { position: relative; width: 104px; height: 104px; margin: var(--nx-s3) 0 var(--nx-s6); border-radius: 50%; display: grid; place-items: center; background: var(--nx-st-soft); color: var(--nx-st-text); }
.nx-root .nx-state__glyph::before, .nx-root .nx-state__glyph::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 1.5px solid var(--nx-st-text); opacity: .28; }
.nx-root .nx-state__glyph::after { inset: -24px; opacity: .14; }
.nx-root .nx-state__glyph svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-state__title { margin: 0; font-size: var(--nx-fs-h2); line-height: 1.25; font-weight: 800; letter-spacing: -.2px; color: var(--nx-text); overflow-wrap: anywhere; }
.nx-root .nx-state__text { margin: 0; max-width: 46ch; color: var(--nx-muted); line-height: 1.55; }
.nx-root .nx-state__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--nx-s2); margin-top: var(--nx-s2); }
.nx-root .nx-state__acts a.nx-btn { text-decoration: none; }
.nx-root .nx-state__note { margin: 0; }
.nx-root .nx-state--compact { margin: var(--nx-s4) auto; padding: var(--nx-s5) var(--nx-s4); box-shadow: none; }
.nx-root .nx-state--compact .nx-state__glyph { width: 72px; height: 72px; margin: var(--nx-s2) 0 var(--nx-s4); }
.nx-root .nx-state--compact .nx-state__glyph::before { inset: -8px; }
.nx-root .nx-state--compact .nx-state__glyph::after { display: none; }
.nx-root .nx-state--compact .nx-state__glyph svg { width: 34px; height: 34px; }
.nx-root .nx-state--compact .nx-state__title { font-size: var(--nx-fs-h3); }
.nx-root .nx-denied > .nx-state { margin-top: 0; margin-bottom: 0; }
@media (max-width: 480px) { .nx-root .nx-state { margin: var(--nx-s4) auto; padding: var(--nx-s6) var(--nx-s4); } .nx-root .nx-state__title { font-size: 20px; } }

/* a short notice (the sign-in screen: Session ended): a label, a sentence, no pop-up */
.nx-root .nx-notice { display: flex; align-items: center; gap: var(--nx-s3); flex-wrap: wrap; margin-bottom: var(--nx-s4); padding: var(--nx-s3) var(--nx-s4); background: var(--nx-surface); border: 1px solid var(--nx-line); border-left: 4px solid var(--nx-amber); border-radius: var(--nx-r1); }
.nx-root .nx-notice__text { flex: 1 1 200px; min-width: 0; color: var(--nx-text); }

/* ---------------------------------------------------------------- the update bar (calm.jsx): a slim bar, never a window; the icon and the words say the state, the edge colour only helps */
.nx-root .calm-banner { margin: 0 0 var(--nx-s4); padding: 10px var(--nx-s4); border: 1px solid var(--nx-line); border-left: 4px solid var(--nx-blue-text); border-radius: var(--nx-r2); background: var(--nx-blue-soft); color: var(--nx-text); font-size: var(--nx-fs-body); }
.nx-root .calm-banner .calm-ic { color: var(--nx-blue-text); }
.nx-root .calm-banner.restarting { background: var(--nx-amber-soft); border-left-color: var(--nx-amber-text); border-color: var(--nx-line); }
.nx-root .calm-banner.restarting .calm-ic { color: var(--nx-amber-text); }

/* ---------------------------------------------------------------- sign-in (signin.jsx NxFrame) */
.nx-root.nx-auth { min-height: calc(100 * var(--ao-vh)); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background-color: var(--nx-bg); background-image: var(--nx-back); background-attachment: fixed; }
.nx-root .nx-auth__art { margin: var(--nx-s4); padding: 56px 56px 40px; border-radius: calc(var(--nx-r2) * 1.4); background: var(--nx-pill); color: var(--nx-pill-text); display: flex; flex-direction: column; justify-content: space-between; gap: var(--nx-s6); overflow: hidden; min-width: 0; }
.nx-root .nx-auth__eyebrow { font-size: var(--nx-fs-h3); font-weight: 800; letter-spacing: .3px; }
.nx-root .nx-auth__title { font-size: clamp(30px, calc(3.4 * var(--ao-vw)), 46px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; margin-bottom: var(--nx-s5); }
.nx-root .nx-auth__title em { font-style: normal; font-weight: 600; }
.nx-root .nx-auth__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s3); font-size: var(--nx-fs-body); }
.nx-root .nx-auth__points li { display: flex; align-items: flex-start; gap: var(--nx-s3); }
.nx-root .nx-auth__points li::before { content: ''; flex: none; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; border: 2px solid var(--nx-pill-text); }
.nx-root .nx-auth__net { align-self: flex-end; width: min(300px, 70%); height: auto; fill: none; stroke: var(--nx-pill-text); stroke-width: 2; stroke-linecap: round; }
.nx-root .nx-auth__net circle { fill: color-mix(in srgb, var(--nx-pill-text) 22%, transparent); }
.nx-root .nx-auth__side { position: relative; display: flex; align-items: center; justify-content: center; padding: var(--nx-s8) var(--nx-s5); min-width: 0; }
.nx-root .nx-auth__lang { position: absolute; top: 20px; right: 24px; }
.nx-root .nx-auth__lang .ant-segmented-item-label { min-height: 40px; line-height: 40px; padding: 0 14px; }
.nx-root .nx-auth__card { width: 100%; max-width: 440px; padding: var(--nx-s7); background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); }
.nx-root .nx-auth__logo { display: block; height: 44px; width: auto; max-width: 100%; margin: 0 0 var(--nx-s6); }
/* the form is the same Ant Design controls as ever; here they take the look of the kit */
.nx-root.nx-auth .ant-typography { color: var(--nx-text); }
.nx-root.nx-auth .ant-typography.ant-typography-secondary { color: var(--nx-muted); }
.nx-root.nx-auth h2.ant-typography, .nx-root.nx-auth h3.ant-typography { font-weight: 800; letter-spacing: -.3px; }
.nx-root.nx-auth .ant-btn { height: auto; min-height: 40px; padding-top: 6px; padding-bottom: 6px; border-radius: 10px; font-weight: 700; }
.nx-root.nx-auth .ant-btn-lg { min-height: 44px; }
.nx-root.nx-auth .ant-input-lg { min-height: 44px; border-radius: 10px; }
.nx-root.nx-auth .ant-alert { border-radius: var(--nx-r1); }
.nx-root.nx-auth .ant-divider { border-color: var(--nx-line); }
.nx-root.nx-auth .field-label { display: block; margin-bottom: 6px; font-weight: 700; }
@media (max-width: 900px) {
  .nx-root.nx-auth { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-auth__art { display: none; }
  .nx-root .nx-auth__side { flex-direction: column; align-items: center; justify-content: flex-start; padding: 72px var(--nx-s4) var(--nx-s6); }   /* CR-READY: the phone banner and the card are stacked, not side by side (the card was pushed off the screen) */
  .nx-root .nx-auth__card { padding: var(--nx-s5); }
  .nx-root .nx-auth__lang { right: 16px; }
}

/* ---------------------------------------------------------------- motion: only for people who did not ask for less */
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-state { animation: nx-pop-in var(--nx-d3) var(--nx-curve) both; }
  .nx-root .nx-state__glyph::before { animation: nx-w7-ring 3.4s ease-out infinite; }
  .nx-root .nx-state--updating .nx-state__glyph svg { animation: nx-spin 2.4s linear infinite; }
  .nx-root .nx-state--crash .nx-state__glyph svg { animation: nx-wiggle 700ms ease-out 1; }
  .nx-root .nx-auth__card { animation: nx-pop-in var(--nx-d3) var(--nx-curve) both; }
  .nx-root .nx-auth__net { animation: nx-w7-drift 9s ease-in-out infinite alternate; }
}
@keyframes nx-w7-ring { from { transform: scale(.92); opacity: .42; } to { transform: scale(1.16); opacity: 0; } }
@keyframes nx-w7-drift { to { transform: translateY(-8px); } }

/* W6, the setting rows, cards, notification list and connection list of the Profile page (nx-profile.jsx, W6b). The hero, the photo and the account menu are in nx-w6b.css.
   Every rule starts with .nx-root (qa-2026-10-21-nx-css-scoped) and takes its colours from the --nx-* tokens only, so all seven themes follow (tools/nx-contrast.mjs has the W6 pairs).
   Motion is only declared inside prefers-reduced-motion: no-preference. Add this file to web/build.mjs after nx-w3.css. */

.nx-root .nx-w6 { display: grid; gap: var(--nx-s5); min-width: 0; }
.nx-root .nx-w6 > * { min-width: 0; }
/* two columns when there is room, one under about 900 px; the cards of a row stretch to the same height so no area of the page is blank */
.nx-root .nx-w6-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--nx-s5); align-items: stretch; min-width: 0; }
.nx-root .nx-w6-cols > * { min-width: 0; }
.nx-root .nx-w6-card { display: grid; gap: var(--nx-s4); align-content: start; min-width: 0; }
.nx-root .nx-w6-card .nx-h3 { margin: 0; }
.nx-root .nx-w6-card__sub { margin: calc(var(--nx-s2) * -1) 0 0; color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }
.nx-root .nx-w6-card .nx-list, .nx-root .nx-w6-card .nx-empty { margin: 0; }

/* a list row may wrap its second line (a phone is narrow) */
.nx-root .nx-w6 .nx-item__meta { white-space: normal; overflow-wrap: anywhere; }
.nx-root .nx-w6 .nx-item__title { overflow-wrap: anywhere; }
.nx-root .nx-w6-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--nx-s4) var(--nx-s6); }
.nx-root .nx-w6-points > div { display: grid; gap: var(--nx-s1); align-content: start; min-width: 0; }
.nx-root .nx-w6-points b { font-weight: 700; }
.nx-root .nx-w6-points p { margin: 0; color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- facts (company, departments, who heads them) */
.nx-root .nx-w6-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--nx-s4) var(--nx-s6); margin: var(--nx-s2) 0 0; }
.nx-root .nx-w6-facts > div { display: grid; gap: 2px; min-width: 0; align-content: start; }
.nx-root .nx-w6-facts dt { font-size: var(--nx-fs-small); font-weight: 700; color: var(--nx-muted); }
.nx-root .nx-w6-facts dd { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-w6-facts dd small { display: block; color: var(--nx-muted); font-size: var(--nx-fs-small); }

/* ---------------------------------------------------------------- setting rows */
.nx-root .nx-w6-rows { display: grid; gap: 0; margin: 0; }
.nx-root .nx-w6-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s3) var(--nx-s5); padding: var(--nx-s4) 0; border-top: 1px solid var(--nx-line); min-width: 0; }
.nx-root .nx-w6-row:first-child { border-top: 0; padding-top: 0; }
.nx-root .nx-w6-row:last-child { padding-bottom: 0; }
.nx-root .nx-w6-row__main { flex: 1 1 240px; min-width: 0; display: grid; gap: 2px; }
.nx-root .nx-w6-row__title { font-weight: 700; overflow-wrap: anywhere; }
.nx-root .nx-w6-row__text { color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }
.nx-root .nx-w6-row__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); min-width: 0; max-width: 100%; }
.nx-root .nx-w6-row__value { overflow-wrap: anywhere; text-align: right; max-width: 100%; }
.nx-root .nx-w6-note { margin: 0; padding: var(--nx-s3) var(--nx-s4); border-radius: var(--nx-r1); background: var(--nx-hover); color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }
.nx-root .nx-w6-note b { color: var(--nx-text); }

/* ---------------------------------------------------------------- notifications: a list of kinds, each with an Email and a Teams box */
.nx-root .nx-w6-kinds { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.nx-root .nx-w6-kind { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s3) var(--nx-s5); padding: var(--nx-s4) 0; border-top: 1px solid var(--nx-line); }
.nx-root .nx-w6-kind:first-child { border-top: 0; padding-top: 0; }
.nx-root .nx-w6-kind:last-child { padding-bottom: 0; }
.nx-root .nx-w6-check { display: inline-flex; align-items: center; gap: var(--nx-s2); min-height: var(--nx-tap); padding: 0 var(--nx-s3); border: 1px solid var(--nx-control-line); border-radius: var(--nx-r1); background: var(--nx-surface); color: var(--nx-text); font-weight: 600; cursor: pointer; }
.nx-root .nx-w6-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--nx-blue); cursor: inherit; }
.nx-root .nx-w6-check.is-off { background: var(--nx-hover); color: var(--nx-muted); cursor: not-allowed; }
.nx-root .nx-w6-check.is-always { background: var(--nx-hover); cursor: default; }

/* ---------------------------------------------------------------- phone: rows stack, the control sits under its words */
@media (max-width: 640px) {
  .nx-root .nx-w6-row__ctl { width: 100%; }
  .nx-root .nx-w6-row__value { text-align: left; }
  .nx-root .nx-w6-kind .nx-w6-row__ctl { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-w6-check { transition: background var(--nx-d1), border-color var(--nx-d1); }
}

/* UI redesign W10 (21 Oct 2026): colourful icons and the menu size. Colour means DEPARTMENT only (the tile of an agent), PLACE (the rail icons) or FOLDER; status keeps its own
   semantic colours and always has its word. Every colour in this file is a token; the only hex values are in the token block right below (a new test checks that).
   Every rule starts with .nx-root (the nx-css-scoped test). Motion lives inside prefers-reduced-motion: no-preference. Tap targets are 40 px; focus is always drawn. */

/* ---------------------------------------------------------------- tokens */
.nx-root {
  /* the white of a glyph on a coloured tile and the deep navy a folder colour is mixed with so a white glyph can sit on it */
  --nx-w10-white: #FFFFFF; --nx-w10-deep: #0A1226;
  /* a FOLDER tile is the folder colour mixed into the deep navy: the lighter end keeps [fa] of the colour, the darker end [fb]. On a dark theme the folder colours are pale, so a white icon needs 60% (the pairs of tools/nx-contrast.mjs fail above that); on a light theme the colour itself is dark enough. */
  --nx-w10-fa: 60%; --nx-w10-fb: 42%;
  /* DEPARTMENT tiles. [-a] is the lighter end of the gradient, [-b] the darker end. The brand colours of the brief are Finance 3F57D3, Sales F2851F, Network operations 7B4FD8,
     HR D6336C, Legal 2F7D7A, IT 0891B2, Marketing C026D3, Procurement D99A06, Company 16A34A, unknown 4A5A85. The white glyph must reach 3:1 on BOTH ends in every theme
     (tools/nx-contrast.mjs), so Sales, Procurement and Company use a darker tint of their brand colour at the lighter end. */
  --nx-dept-finance-a: #3F57D3; --nx-dept-finance-b: #2B3D9E;
  --nx-dept-sales-a: #D96A0D; --nx-dept-sales-b: #A8480A;
  --nx-dept-network-a: #7B4FD8; --nx-dept-network-b: #5A33B3;
  --nx-dept-hr-a: #D6336C; --nx-dept-hr-b: #A31F4F;
  /* the colour of each KIND of request (Admin, Decisions): a tile gradient, light to dark */
  --nx-w10-kind-violet-a: #7C5CE0; --nx-w10-kind-violet-b: #5636B8;
  --nx-w10-kind-indigo-a: #4A66DE; --nx-w10-kind-indigo-b: #3047AE;
  --nx-w10-kind-sky-a: #1F93D6; --nx-w10-kind-sky-b: #14699E;
  --nx-w10-kind-cyan-a: #0E9DB3; --nx-w10-kind-cyan-b: #08717F;
  --nx-w10-kind-orange-a: #E8741C; --nx-w10-kind-orange-b: #B55410;
  --nx-w10-kind-amber-a: #D99A1A; --nx-w10-kind-amber-b: #A56D0A;
  --nx-w10-kind-blue-a: #2F6BD1; --nx-w10-kind-blue-b: #1E4C9E;
  --nx-w10-kind-magenta-a: #BA45BA; --nx-w10-kind-magenta-b: #8B2C8B;
  --nx-w10-kind-teal-a: #12A08C; --nx-w10-kind-teal-b: #0A7466;
  --nx-w10-kind-red-a: #D2382F; --nx-w10-kind-red-b: #9C241D;
  --nx-w10-kind-gold-a: #C79A12; --nx-w10-kind-gold-b: #946F05;
  --nx-w10-kind-rose-a: #D6336C; --nx-w10-kind-rose-b: #A31F4F;
  --nx-w10-kind-slate-a: #64748B; --nx-w10-kind-slate-b: #475569;
  --nx-w10-kind-green-a: #2F9E50; --nx-w10-kind-green-b: #1F7A38;
  --nx-w10-kind-gray-a: #8B95A5; --nx-w10-kind-gray-b: #677285;
  --nx-dept-legal-a: #2F7D7A; --nx-dept-legal-b: #1D5856;
  --nx-dept-it-a: #0891B2; --nx-dept-it-b: #0A6580;
  --nx-dept-marketing-a: #C026D3; --nx-dept-marketing-b: #8A199A;
  --nx-dept-procurement-a: #B87D00; --nx-dept-procurement-b: #85590A;
  --nx-dept-company-a: #138C42; --nx-dept-company-b: #0D6431;
  --nx-dept-unknown-a: #4A5A85; --nx-dept-unknown-b: #323F66;
  /* PLACES on a dark menu column (Midnight, Aurora, Dune, Forest, Ember, Ocean): the brand colour of each place, lightened until it reaches 3:1 on the column */
  --nx-place-home: #93A5FF; --nx-place-agents: #B79DFF; --nx-place-work: #4ADE80; --nx-place-mail: #FDA55C; --nx-place-library: #3FC8E8; --nx-place-admin: #F47FB0;
}
/* PLACES on the light menu column (Daylight): the brand colours, darkened where the brief's colour is under 3:1 on white */
[data-palette="daylight"] .nx-root {
  --nx-w10-fa: 100%; --nx-w10-fb: 76%;
  --nx-place-home: #3F57D3; --nx-place-agents: #7B4FD8; --nx-place-work: #15803D; --nx-place-mail: #C85F0A; --nx-place-library: #0A7F9E; --nx-place-admin: #D6336C;
}
[data-palette="dune"] .nx-root { --nx-w10-fa: 100%; --nx-w10-fb: 76%; }
[data-palette="ocean"] .nx-root { --nx-w10-fa: 100%; --nx-w10-fb: 76%; }

/* ---------------------------------------------------------------- glyphs: the line is 1.9 px at every size (--gls is the size in px, unitless) */
.nx-root .nx-gl { display: block; flex: none; width: calc(var(--gls, 20) * 1px); height: calc(var(--gls, 20) * 1px); fill: none; stroke: currentColor; stroke-width: calc(45.6 / var(--gls, 20)); stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- DEPARTMENT IDENTITY: a rounded tile, the department gradient, a white glyph */
.nx-root .nx-dt { --dt-a: var(--nx-dept-unknown-a); --dt-b: var(--nx-dept-unknown-b); box-sizing: border-box; width: 44px; height: 44px; flex: none; display: inline-grid; place-items: center; border-radius: 12px;
  color: var(--nx-w10-white); background: linear-gradient(135deg, var(--dt-a), var(--dt-b)); background-color: var(--dt-b); border: 1px solid var(--dt-a); }
.nx-root .nx-dt .nx-gl { --gls: 24; }
.nx-root .nx-dt--sm { width: 34px; height: 34px; }
.nx-root .nx-dt--sm .nx-gl { --gls: 20; }
.nx-root .nx-dt--lg { width: 56px; height: 56px; }
.nx-root .nx-dt--lg .nx-gl { --gls: 30; }
.nx-root .nx-dt b { font-size: 18px; font-weight: 800; line-height: 1; }
.nx-root .nx-dt--finance { --dt-a: var(--nx-dept-finance-a); --dt-b: var(--nx-dept-finance-b); }
.nx-root .nx-dt--sales { --dt-a: var(--nx-dept-sales-a); --dt-b: var(--nx-dept-sales-b); }
.nx-root .nx-dt--network { --dt-a: var(--nx-dept-network-a); --dt-b: var(--nx-dept-network-b); }
.nx-root .nx-dt--hr { --dt-a: var(--nx-dept-hr-a); --dt-b: var(--nx-dept-hr-b); }
.nx-root .nx-dt--legal { --dt-a: var(--nx-dept-legal-a); --dt-b: var(--nx-dept-legal-b); }
.nx-root .nx-dt--it { --dt-a: var(--nx-dept-it-a); --dt-b: var(--nx-dept-it-b); }
.nx-root .nx-dt--marketing { --dt-a: var(--nx-dept-marketing-a); --dt-b: var(--nx-dept-marketing-b); }
.nx-root .nx-dt--procurement { --dt-a: var(--nx-dept-procurement-a); --dt-b: var(--nx-dept-procurement-b); }
.nx-root .nx-dt--company { --dt-a: var(--nx-dept-company-a); --dt-b: var(--nx-dept-company-b); }
.nx-root .nx-dt--unknown { --dt-a: var(--nx-dept-unknown-a); --dt-b: var(--nx-dept-unknown-b); }
.nx-root .nx-ac--compact .nx-dt { width: 34px; height: 34px; }
.nx-root .nx-ac--compact .nx-dt .nx-gl { --gls: 20; }
.nx-root .nx-pal__dt { margin: 0; }
.nx-root .nx-item > .nx-dt { flex: none; }
.nx-root .nx-pillrow--agent { gap: var(--nx-s3); }

/* ---------------------------------------------------------------- FOLDERS: a 24 px tile in the folder colour (darkened so a white icon reads), a white icon */
.nx-root .nx-fg { --gls: 14; --fg-a: color-mix(in srgb, var(--fc) var(--nx-w10-fa), var(--nx-w10-deep)); --fg-b: color-mix(in srgb, var(--fc) var(--nx-w10-fb), var(--nx-w10-deep)); box-sizing: border-box; width: 24px; height: 24px; border-radius: 7px; border: 0;
  font-size: 0; background: linear-gradient(135deg, var(--fg-a), var(--fg-b)); background-color: var(--fg-b); color: var(--nx-w10-white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc) 55%, transparent); }
.nx-root .nx-fg--lg { width: 44px; height: 44px; border-radius: 12px; --gls: 24; }
.nx-root .nx-fchip .nx-fg { width: 22px; height: 22px; border-radius: 7px; --gls: 13; }
.nx-root .nx-rail__ico { width: 26px; height: 26px; }
/* the icon tiles of the folder dialog: the same tile at 40 px, the chosen one has a ring and a check */
.nx-root .nx-fsw--icon { --gls: 22; --fg-a: color-mix(in srgb, var(--fc) var(--nx-w10-fa), var(--nx-w10-deep)); --fg-b: color-mix(in srgb, var(--fc) var(--nx-w10-fb), var(--nx-w10-deep)); background: linear-gradient(135deg, var(--fg-a), var(--fg-b)); background-color: var(--fg-b); color: var(--nx-w10-white); border: 1px solid color-mix(in srgb, var(--fc) 70%, transparent); font-size: 0; }
.nx-root .nx-fsw--icon:hover { background: linear-gradient(135deg, var(--fg-a), var(--fg-b)); background-color: var(--fg-b); filter: brightness(1.12); box-shadow: none; }
.nx-root .nx-fsw--icon.is-on { background: linear-gradient(135deg, var(--fg-a), var(--fg-b)); background-color: var(--fg-b); border-color: var(--nx-text); }
.nx-root .nx-fsw--icon .nx-fsw__tick { font-size: 9px; }

/* ---------------------------------------------------------------- STATUS: a picture beside the word, in the status colour */
.nx-root .nx-si { --gls: 18; display: inline-grid; place-items: center; flex: none; color: var(--nx-muted); }
.nx-root .nx-si .nx-gl { stroke-width: calc(50 / var(--gls, 18)); }
.nx-root .nx-si--ok { color: var(--nx-ok-text); }
.nx-root .nx-si--warn { color: var(--nx-amber-text); }
.nx-root .nx-si--bad { color: var(--nx-bad-text); }
.nx-root .nx-si--info { color: var(--nx-blue-text); }
.nx-root .nx-si--gray { color: var(--nx-muted); }
.nx-root .nx-pill__ico .nx-si { --gls: 14; }
.nx-root .nx-pal__st .nx-si, .nx-root .nx-ar__st .nx-si { --gls: 16; }
.nx-root .nx-ac__safe { align-items: center; }
.nx-root .nx-ac__safe .nx-si { --gls: 18; }
.nx-root .nx-ac__safe[data-tone="warn"] { color: var(--nx-amber-text); }
.nx-root .nx-ticks li { align-items: center; }
.nx-root .nx-ticks .nx-si { --gls: 18; margin-top: 0; }
.nx-root .nx-peek__cannot { display: flex; gap: 8px; align-items: center; }
.nx-root .nx-ticks__warn .nx-si { color: var(--nx-amber-text); }

/* ---------------------------------------------------------------- RAIL: each place has its own icon colour; the current place is the theme's gradient pill with the pill's own text colour */
.nx-root .nx-nav[data-place="home"] .nx-nav__ico { color: var(--nx-place-home); }
.nx-root .nx-nav[data-place="agents"] .nx-nav__ico { color: var(--nx-place-agents); }
.nx-root .nx-nav[data-place="work"] .nx-nav__ico { color: var(--nx-place-work); }
.nx-root .nx-nav[data-place="mail"] .nx-nav__ico { color: var(--nx-place-mail); }
.nx-root .nx-nav[data-place="library"] .nx-nav__ico { color: var(--nx-place-library); }
.nx-root .nx-nav[data-place="admin"] .nx-nav__ico { color: var(--nx-place-admin); }
.nx-root .nx-nav[data-place][aria-current="page"] .nx-nav__ico { color: var(--nx-pill-text); }

/* ---------------------------------------------------------------- MENU SIZE: S / M / L buttons, the drag handle, the large size */
.nx-root .nx-msize { display: grid; gap: 4px; padding: 6px 4px 4px; }
.nx-root .nx-msize__label { font-size: 12px; font-weight: 700; color: var(--nx-side-text); white-space: nowrap; }
.nx-root .nx-msize__seg { display: flex; gap: 4px; }
.nx-root .nx-msize__b { flex: 1; min-width: 40px; min-height: 40px; border-radius: 10px; border: 1px solid var(--nx-side-line); background: none; color: var(--nx-side-text); font: 800 14px var(--nx-font); cursor: pointer; }
.nx-root .nx-msize__b:hover { background: var(--nx-side-hover); color: var(--nx-side-strong); }
.nx-root .nx-msize__b[aria-pressed="true"] { background: var(--nx-pill); color: var(--nx-pill-text); border-color: transparent; }
/* the small rail shows only icons: the size buttons appear when the menu opens (hover or keyboard focus), like the labels */
.nx-root.nx-shell:not(.is-open) .nx-side:not(:hover):not(:has(:focus-visible)) .nx-msize { display: none; }
/* a short desktop window (1280 x 720 after the screen fit zoom, about 850 px of page): the S / M / L row would sit half cut under the list, so it steps aside; the same choice is in the Customizer, Menu */
@media (max-height: 740px) and (min-width: 861px) { .nx-root .nx-msize { display: none; } }
.nx-root .nx-side__resize { position: fixed; top: 0; bottom: 0; left: calc(var(--nx-menu-w) - 4px); width: 8px; z-index: 72; cursor: col-resize; touch-action: none; }
.nx-root.nx-shell:not(.is-open) .nx-side:hover .nx-side__resize, .nx-root.nx-shell:not(.is-open) .nx-side:has(:focus-visible) .nx-side__resize { left: calc(var(--nx-side-w) - 4px); }
.nx-root .nx-side__resize::after { content: ""; position: absolute; left: 2px; top: 50%; width: 4px; height: 44px; margin-top: -22px; border-radius: 4px; background: var(--nx-side-text); opacity: 0; }
.nx-root .nx-side:hover .nx-side__resize::after, .nx-root .nx-side__resize:hover::after, .nx-root .nx-side__resize:focus-visible::after, .nx-root.is-sizing .nx-side__resize::after { opacity: .7; }
.nx-root .nx-side__resize:focus-visible { outline: 3px solid var(--nx-side-focus); outline-offset: -1px; border-radius: 4px; }
/* THE ARROW (W6b, redone 26 Oct 2026): the last row of the menu, drawn as a place (nx-menu.jsx MenuArrow), under the part of the menu that scrolls so it is never scrolled away and never over the page; the label shows when the menu is open
   (pinned or opened by the pointer) and the chevron stays in the same column as the place icons. */
.nx-root .nx-side { overflow-y: hidden; }
.nx-root .nx-side__scroll { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.nx-root .nx-side__scroll::-webkit-scrollbar { display: none; }
.nx-root .nx-side__arrow { flex: none; margin-top: 4px; }
.nx-root .nx-side__arrow:focus-visible { outline: var(--nx-focus-ring); outline-offset: -2px; }
.nx-root .nx-side__arrow .nx-nav__ico { stroke-width: 2.4; }
.nx-root.is-sizing { cursor: col-resize; user-select: none; }
.nx-root.is-sizing .nx-side, .nx-root.is-sizing .nx-main { transition: none; }
.nx-root.nx-shell.is-large .nx-side .nx-nav { font-size: 17px; min-height: 48px; }
.nx-root.nx-shell.is-large .nx-side .nx-nav__ico { width: 24px; height: 24px; }
.nx-root.nx-shell.is-large .nx-msize__b { font-size: 16px; min-height: 44px; }
.nx-root.nx-shell.is-large .nx-msize__label { font-size: 14px; }

@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-side__resize::after { transition: opacity var(--nx-d2); }
  .nx-root .nx-dt, .nx-root .nx-fg, .nx-root .nx-si { transition: transform var(--nx-d2) var(--nx-curve), filter var(--nx-d2); }
  .nx-root .nx-ac:hover .nx-dt, .nx-root .nx-ar:hover .nx-dt { transform: scale(1.05); }
}

/* ---------------------------------------------------------------- small screens: the menu is the bottom bar there, so no size buttons and no handle; the tiles keep a 40 px tap area where they are links */
@media (max-width: 860px) {
  .nx-root .nx-msize, .nx-root .nx-side__resize, .nx-root .nx-side__arrow { display: none; }
  .nx-root .nx-pillrow--agent .nx-dt { width: 48px; height: 48px; }
  .nx-root .nx-pillrow--agent .nx-dt .nx-gl { --gls: 26; }
}

/* W9, the Home composer and Recent work of the redesigned look (21 Oct 2026). Every rule starts with .nx-root and takes its colours from the --nx-* tokens only, so all themes follow.
   Motion (the sliding pill, the lift of the send button, the rise of a card) is only declared inside prefers-reduced-motion: no-preference. Targets are 40 px (44 px on touch).
   Add this file to web/build.mjs after nx-w3.css. */

/* ---------------------------------------------------------------- the composer card */
.nx-root .nx-cmp-wrap > * { min-width: 0; }
.nx-root .nx-cmp-wrap { max-width: 960px; width: 100%; margin-inline: auto; display: flex; flex-direction: column; gap: var(--nx-s3); min-width: 0; }
/* on Home the section fills the height of the row beside it (nx-split--fill), so the card grows with it and no blank strip is left under it */
.nx-root .nx-cmp-sec { display: flex; flex-direction: column; min-width: 0; }
.nx-root .nx-cmp-sec > .nx-cmp-wrap { flex: 1 1 auto; }
.nx-root .nx-cmp-wrap > .nx-cmp { flex: 1 1 auto; }
.nx-root .nx-cmp { position: relative; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: 22px; padding: var(--nx-s4) var(--nx-s5) var(--nx-s4); box-shadow: var(--nx-shadow); display: flex; flex-direction: column; gap: var(--nx-s3); min-width: 0; }
/* focus: a 2 px accent ring and a restrained 7 px soft glow, never animated */
.nx-root .nx-cmp:focus-within { box-shadow: 0 0 0 2px var(--nx-blue), 0 0 0 7px color-mix(in srgb, var(--nx-blue) 14%, transparent); border-color: var(--nx-blue); }
.nx-root .nx-cmp.is-drag { outline: 2px dashed var(--nx-blue); outline-offset: 4px; }
.nx-root .nx-cmp__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2) var(--nx-s4); justify-content: space-between; min-width: 0; }
.nx-root .nx-cmp__seg { position: relative; display: inline-flex; background: var(--nx-hover); border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); padding: 3px; min-width: 0; }
.nx-root .nx-cmp__pill { position: absolute; top: 0; left: 0; background: var(--nx-blue); border-radius: var(--nx-rfull); pointer-events: none; }
.nx-root .nx-cmp__mode { position: relative; z-index: 1; min-height: var(--nx-tap); padding: 0 var(--nx-s4); border: 0; border-radius: var(--nx-rfull); background: transparent; color: var(--nx-text); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.nx-root .nx-cmp__mode[aria-checked="true"] { color: var(--nx-on-blue); }
.nx-root .nx-cmp__draft { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r2); background: var(--nx-blue-soft); color: var(--nx-text); font-size: var(--nx-fs-small); }
.nx-root .nx-cmp__draft span { flex: 1 1 200px; }
.nx-root .nx-cmp__guide { margin: 0; flex: 1 1 240px; min-width: 0; text-align: right; color: var(--nx-muted); font-size: var(--nx-fs-small); line-height: 1.4; }

.nx-root .nx-cmp__box { display: grid; gap: var(--nx-s1); flex: 1 1 auto; align-content: start; }
.nx-root .nx-cmp__ta { display: block; width: 100%; box-sizing: border-box; min-height: 64px; max-height: 260px; margin: 0; padding: var(--nx-s2) 0; border: 0; outline: none; resize: none; background: transparent; color: var(--nx-text); font: inherit; font-size: 16px; line-height: 1.55; }
.nx-root .nx-cmp__ta::placeholder { color: var(--nx-muted); opacity: 1; }
.nx-root .nx-cmp__count { text-align: right; color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-cmp__count[data-over] { color: var(--nx-bad-text); font-weight: 800; }

.nx-root .nx-cmp__menu { list-style: none; margin: 0; padding: var(--nx-s1); background: var(--nx-surface); border: 1px solid var(--nx-control-line); border-radius: var(--nx-r2); display: grid; gap: 2px; }
.nx-root .nx-cmp__opt { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nx-s2); width: 100%; min-height: var(--nx-tap); padding: 0 var(--nx-s3); border: 0; border-radius: var(--nx-r1); background: transparent; color: var(--nx-text); font: inherit; text-align: left; cursor: pointer; }
.nx-root .nx-cmp__opt.is-on { background: var(--nx-hover); box-shadow: inset 3px 0 0 var(--nx-blue); font-weight: 800; }

.nx-root .nx-cmp__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-cmp__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); min-width: 0; flex: 1; }
.nx-root .nx-cmp__chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--nx-tap); max-width: 100%; padding: 0 var(--nx-s3); border: 1px solid var(--nx-control-line); border-radius: var(--nx-rfull); background: var(--nx-surface); color: var(--nx-text); font: inherit; font-size: var(--nx-fs-small); font-weight: 600; cursor: pointer; text-decoration: none; }
.nx-root .nx-cmp__chip:hover:not(:disabled) { background: var(--nx-hover); }
.nx-root .nx-cmp__chip:disabled { cursor: default; border-style: dashed; color: var(--nx-muted); }
.nx-root .nx-cmp__chip b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nx-root .nx-cmp__chip--ro { cursor: default; }
.nx-root .nx-cmp__chip--sel select { min-height: 32px; max-width: 150px; border: 0; background: transparent; color: var(--nx-text); font: inherit; font-weight: 800; cursor: pointer; }
.nx-root .nx-cmp__chip--shield { background: var(--nx-blue-soft); color: var(--nx-blue-text); border-color: transparent; }
.nx-root .nx-cmp__chip--shield:hover:not(:disabled) { background: var(--nx-blue-soft); filter: brightness(.97); }
.nx-root .nx-cmp__lbl { color: var(--nx-muted); font-weight: 600; }
.nx-root .nx-cmp__mic .ant-btn { width: var(--nx-tap); height: var(--nx-tap); min-width: var(--nx-tap); border: 1px solid var(--nx-control-line); border-radius: var(--nx-rfull); display: inline-flex; align-items: center; justify-content: center; }
.nx-root .nx-cmp__send { flex: none; width: 48px; height: 48px; border: 0; border-radius: var(--nx-rfull); background: var(--nx-blue); color: var(--nx-on-blue); font-size: 20px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.nx-root .nx-cmp__send:disabled { background: var(--nx-hover); color: var(--nx-muted); box-shadow: inset 0 0 0 1px var(--nx-line); cursor: not-allowed; }

.nx-root .nx-cmp__files { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-cmp__file { display: inline-flex; align-items: center; gap: var(--nx-s2); min-height: var(--nx-tap); max-width: 100%; padding: 0 0 0 var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); background: var(--nx-hover); color: var(--nx-text); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }
.nx-root .nx-cmp__x { width: var(--nx-tap); height: var(--nx-tap); border: 0; border-radius: var(--nx-rfull); background: transparent; color: var(--nx-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.nx-root .nx-cmp__sched { padding: var(--nx-s2) 0; }

.nx-root .nx-cmp__panel { border: 1px solid var(--nx-line); background: var(--nx-hover); border-radius: var(--nx-r2); padding: var(--nx-s3); display: grid; gap: var(--nx-s2); max-height: 360px; overflow: auto; color: var(--nx-text); }
.nx-root .nx-cmp__panel--shield { background: var(--nx-blue-soft); border-color: transparent; }
.nx-root .nx-cmp__search { display: flex; align-items: center; gap: var(--nx-s2); min-height: var(--nx-tap); padding: 0 var(--nx-s3); border: 1px solid var(--nx-control-line); border-radius: var(--nx-r1); background: var(--nx-surface); }
.nx-root .nx-cmp__search input { flex: 1; min-width: 0; min-height: 34px; border: 0; outline: none; background: transparent; color: var(--nx-text); font: inherit; }
.nx-root .nx-cmp__search input:focus-visible { outline: none; }
.nx-root .nx-cmp__search:focus-within { border-color: var(--nx-blue); box-shadow: 0 0 0 2px var(--nx-blue); }
.nx-root .nx-cmp__agents { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-cmp__agent { display: grid; gap: 2px; width: 100%; padding: var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-r1); background: var(--nx-surface); color: var(--nx-text); font: inherit; text-align: left; cursor: pointer; min-height: var(--nx-tap); }
.nx-root .nx-cmp__agent:hover { background: var(--nx-hover); }
.nx-root .nx-cmp__agent.is-on { border-color: var(--nx-blue); box-shadow: inset 0 0 0 1px var(--nx-blue); }
.nx-root .nx-cmp__sent { color: var(--nx-muted); font-size: var(--nx-fs-small); line-height: 1.4; overflow-wrap: anywhere; }
.nx-root .nx-cmp__safe { display: inline-flex; align-items: center; gap: 6px; font-size: var(--nx-fs-small); font-weight: 700; }
.nx-root .nx-cmp__safe[data-tone="ok"] { color: var(--nx-ok-text); }
.nx-root .nx-cmp__safe[data-tone="warn"] { color: var(--nx-amber-text); }

.nx-root .nx-cmp__und { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); font-size: var(--nx-fs-small); }
.nx-root .nx-cmp__ok { color: var(--nx-ok-text); font-weight: 800; }
.nx-root .nx-cmp__u { display: inline-flex; align-items: center; gap: var(--nx-s2); padding: 4px 10px; border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); background: var(--nx-hover); color: var(--nx-text); font: inherit; font-size: var(--nx-fs-small); font-weight: 600; }
.nx-root .nx-cmp__u[data-tone="warn"] { background: var(--nx-amber-soft); color: var(--nx-amber-text); border-color: transparent; }
.nx-root button.nx-cmp__u { min-height: var(--nx-tap); cursor: pointer; }
.nx-root .nx-cmp__uact { color: var(--nx-blue-text); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.nx-root .nx-cmp__asked { padding: var(--nx-s3); border-radius: var(--nx-r2); background: var(--nx-hover); color: var(--nx-text); overflow-wrap: anywhere; white-space: pre-wrap; }

.nx-root .nx-cmp__sugs { min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--nx-s2); }
.nx-root .nx-cmp__sug { min-height: var(--nx-tap); max-width: 100%; padding: 0 var(--nx-s4); border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); background: var(--nx-surface); color: var(--nx-text); font: inherit; font-size: var(--nx-fs-small); font-weight: 600; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-cmp__sug:hover { background: var(--nx-hover); }

/* ---------------------------------------------------------------- after a send */
.nx-root .nx-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--nx-s2) var(--nx-s4); }
.nx-root .nx-strip__s { display: inline-flex; align-items: center; gap: var(--nx-s2); color: var(--nx-muted); font-weight: 600; }
.nx-root .nx-strip__s.is-now { color: var(--nx-text); font-weight: 800; }
.nx-root .nx-strip__mark { width: 26px; height: 26px; border-radius: var(--nx-rfull); border: 1px solid var(--nx-control-line); display: inline-flex; align-items: center; justify-content: center; font-size: var(--nx-fs-small); background: var(--nx-surface); }
.nx-root .nx-strip__s.is-done .nx-strip__mark { background: var(--nx-ok-soft); color: var(--nx-ok-text); border-color: transparent; }
.nx-root .nx-strip__s.is-now .nx-strip__mark { background: var(--nx-blue-soft); color: var(--nx-blue-text); border-color: transparent; }
.nx-root .nx-out { border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); padding: var(--nx-s4); display: grid; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-out__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-out__text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; color: var(--nx-text); }
.nx-root .nx-out__list { margin: 0; padding-left: var(--nx-s5); display: grid; gap: var(--nx-s1); }
.nx-root .nx-out__actions { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-out__chips, .nx-root .nx-out__follow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-out__chip { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); background: var(--nx-hover); color: var(--nx-text); font: inherit; font-size: var(--nx-fs-small); font-weight: 600; }
.nx-root button.nx-out__chip--btn { min-height: var(--nx-tap); padding: 0 var(--nx-s4); background: var(--nx-surface); border-color: var(--nx-control-line); cursor: pointer; }
.nx-root button.nx-out__chip--btn:hover { background: var(--nx-hover); }

/* ---------------------------------------------------------------- Recent work */
.nx-root .nx-rwlist { display: grid; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-rw__group { margin: 0 0 var(--nx-s2); font-size: var(--nx-fs-small); font-weight: 800; color: var(--nx-muted); }
.nx-root .nx-rw__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-rw { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--nx-s3); padding: var(--nx-s3); background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); }
.nx-root .nx-rw--check { background: var(--nx-bg); box-shadow: none; }
.nx-root .nx-rw__confirm { list-style: none; }
.nx-root .nx-rw__ava { width: 40px; height: 40px; border-radius: var(--nx-rfull); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-rw__ava--1, .nx-root .nx-rw__ava--c { background: var(--nx-ok-soft); color: var(--nx-ok-text); }
.nx-root .nx-rw__ava--2 { background: var(--nx-amber-soft); color: var(--nx-amber-text); }
.nx-root .nx-rw__ava--3 { background: var(--nx-bad-soft); color: var(--nx-bad-text); }
.nx-root .nx-rw__ava--4 { background: var(--nx-hover); color: var(--nx-text); }
.nx-root .nx-rw__main { min-width: 0; display: grid; gap: var(--nx-s1); }
.nx-root .nx-rw__title { font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nx-root .nx-rw__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-rw__fig { padding: 0 8px; border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); background: var(--nx-hover); color: var(--nx-text); font-weight: 700; }
.nx-root .nx-rw__count { font-weight: 700; }
.nx-root .nx-rw__acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-rw__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s2); }

/* ---------------------------------------------------------------- narrow screens and touch */
@media (min-width: 1700px) {
  .nx-root .nx-rw:not(.nx-rw--check) { grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; }
  .nx-root .nx-rw__acts { grid-column: 3; grid-row: 1; }
}
@media (max-width: 1500px) {
  .nx-root .nx-cmp__guide { text-align: left; flex-basis: 100%; }
}
@media (max-width: 640px) {
  .nx-root .nx-cmp { padding: var(--nx-s3); border-radius: 18px; }
  .nx-root .nx-cmp__seg { display: grid; grid-template-columns: 1fr 1fr; border-radius: 20px; width: 100%; }
  .nx-root .nx-cmp__guide { text-align: left; flex-basis: 100%; }
  .nx-root .nx-cmp__bar { align-items: flex-end; }
}
@media (pointer: coarse) {
  .nx-root .nx-cmp__mode, .nx-root .nx-cmp__chip, .nx-root .nx-cmp__sug, .nx-root .nx-cmp__opt, .nx-root .nx-cmp__x, .nx-root .nx-cmp__file, .nx-root button.nx-cmp__u, .nx-root button.nx-out__chip--btn { min-height: 44px; }
  .nx-root .nx-cmp__mic .ant-btn, .nx-root .nx-cmp__x { width: 44px; height: 44px; }
  .nx-root .nx-rw__acts .nx-btn { min-height: 44px; }
}

/* ---------------------------------------------------------------- motion: only for people who have not asked for less */
@keyframes nx-w9-rise { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-cmp__pill.is-on { transition: transform var(--nx-d3) var(--nx-curve), width var(--nx-d3) var(--nx-curve), height var(--nx-d2) var(--nx-curve); }
  .nx-root .nx-cmp__mode { transition: color var(--nx-d2) var(--nx-curve); }
  .nx-root .nx-cmp { transition: box-shadow var(--nx-d2) var(--nx-curve), border-color var(--nx-d2) var(--nx-curve); }
  .nx-root .nx-cmp__send { transition: transform var(--nx-d1) var(--nx-curve), filter var(--nx-d1) var(--nx-curve); }
  .nx-root .nx-cmp__send:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.07); }
  .nx-root .nx-cmp__send:active:not(:disabled) { transform: translateY(0); }
  .nx-root .nx-cmp__menu, .nx-root .nx-cmp__panel, .nx-root .nx-out { animation: nx-w9-rise var(--nx-d2) var(--nx-curve) backwards; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-root .nx-strip .anticon-spin, .nx-root .nx-cmp__send .anticon-spin { animation-name: none; }
}

/* SKIN (21 Oct 2026): the OLD Ant Design pages and dialogs, wearing the redesigned look. No page is restructured and nothing is moved or hidden: only borders, radii, grounds, type and
   states change, with the --nx-* tokens. CONTRACT: every rule starts with .nx-root (the page area) or body.nx-on (the page area AND the portals Ant Design draws under <body>: dialogs, drawers,
   menus, tooltips, notices). body.nx-on is on while the redesigned shell is mounted (nx-skin.jsx) and off for Classic, so Classic is never touched. The same tokens are defined for body.nx-on
   below (copied from the --color-* tokens, nothing else), so a portal reads exactly what the page reads. Colours come from tokens only (no hex), motion lives under
   prefers-reduced-motion: no-preference, every pair is in tools/nx-contrast.mjs (SKIN). The tokens Ant Design takes as numbers (radii, control height, font) are in nx-skin.mjs. */

/* ---------------------------------------------------------------- tokens for the portals (the page already has them from .nx-root in nx.css) */
body.nx-on {
  --nx-bg: var(--color-bg); --nx-surface: var(--color-surface); --nx-hover: var(--color-surface-hover); --nx-text: var(--color-text-primary); --nx-muted: var(--color-text-muted);
  --nx-line: var(--color-border); --nx-control-line: var(--color-control-border);
  --nx-blue: var(--color-accent); --nx-on-blue: var(--color-on-accent); --nx-blue-soft: var(--color-accent-soft); --nx-blue-text: var(--color-accent-text); --nx-link: var(--color-link);
  --nx-amber: var(--color-warning); --nx-success: var(--color-success); --nx-danger: var(--color-error);
  --nx-amber-soft: var(--color-warning-soft); --nx-amber-text: var(--color-warning); --nx-ok-soft: var(--color-success-soft); --nx-ok-text: var(--color-success); --nx-bad-soft: var(--color-error-soft); --nx-bad-text: var(--color-error);
  --nx-focus: var(--color-focus); --nx-shadow: var(--shadow-card);
  --nx-s1: 4px; --nx-s2: 8px; --nx-s3: 12px; --nx-s4: 16px; --nx-s5: 20px; --nx-s6: 24px;
  --nx-r1: calc(var(--rad, 14px) * .6); --nx-r2: var(--rad, 14px); --nx-rfull: 999px;
  --nx-d1: calc(120ms * var(--spd, 1)); --nx-d2: calc(200ms * var(--spd, 1)); --nx-curve: cubic-bezier(.2, .7, .2, 1);
  --nx-font: 'Figtree', 'Segoe UI', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
  --nx-fs-h1: 28px; --nx-fs-h2: 24px; --nx-fs-h3: 18px; --nx-fs-small: 13px; --nx-tap: 40px;
  /* THE ROOT LEVER: styles.css draws the old pages' cards, panels, dialogs and tiles from these five variables (the 3D depth skin: a gradient sheen, a coloured glow, a tinted border).
     Flattened here, every one of those boxes becomes the nx card (flat surface, 1px line, the one soft shadow) with no rule per class. Classic keeps its own values (:root). */
  --depth-surface: var(--color-surface); --depth-border: var(--color-border); --depth-glow: 0 0 0 transparent; --depth-glow-hi: 0 0 0 transparent; --bk-sheen: none;
}
body.nx-on .ant-modal-root, body.nx-on .ant-drawer, body.nx-on .ant-dropdown, body.nx-on .ant-select-dropdown, body.nx-on .ant-popover, body.nx-on .ant-tooltip,
body.nx-on .ant-picker-dropdown, body.nx-on .ant-message, body.nx-on .ant-notification, body.nx-on .ant-cascader-dropdown, body.nx-on .ant-tree-select-dropdown { font-family: var(--nx-font); color: var(--nx-text); }

/* ---------------------------------------------------------------- headings: the new scale (Typography.Title and the old page head) */
body.nx-on h1.ant-typography, body.nx-on .ant-typography h1 { font-size: var(--nx-fs-h1); line-height: 1.2; font-weight: 800; letter-spacing: -.3px; color: var(--nx-text); }
body.nx-on .page-head h2.ant-typography, body.nx-on .page-head h2 { font-size: var(--nx-fs-h1); line-height: 1.2; font-weight: 800; letter-spacing: -.3px; color: var(--nx-text); margin: 0; }
body.nx-on h2.ant-typography, body.nx-on .ant-typography h2 { font-size: var(--nx-fs-h2); line-height: 1.25; font-weight: 700; color: var(--nx-text); }
body.nx-on h3.ant-typography, body.nx-on .ant-typography h3 { font-size: var(--nx-fs-h3); line-height: 1.3; font-weight: 700; color: var(--nx-text); }
body.nx-on h4.ant-typography, body.nx-on .ant-typography h4, body.nx-on h5.ant-typography { font-size: 16px; line-height: 1.35; font-weight: 700; color: var(--nx-text); }
body.nx-on .ant-typography.ant-typography-secondary { color: var(--nx-muted); }
body.nx-on .ant-modal-title, body.nx-on .ant-drawer-title { font-weight: 800; letter-spacing: -.2px; color: var(--nx-text); }

/* ---------------------------------------------------------------- cards and collapse panels: the nx card (surface, 1px line, radius 14, the one soft shadow) */
body.nx-on .ant-card.ant-card-bordered { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); }
body.nx-on .ant-card.ant-card-bordered .ant-card { box-shadow: none; }
/* styles.css gives the page cards a rule of its own (18 px, a tinted border with !important, a lift on hover): the same selector with .nx-root in front is the stronger one */
.nx-root .content-inner .ant-card:not(.ant-card .ant-card):not(.ant-card-type-inner), .nx-root .content-inner .card { border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); }
.nx-root .content-inner .ant-card:not(.ant-card .ant-card):not(.ant-card-type-inner) { border-color: var(--nx-line) !important; }
.nx-root .content-inner .ant-card:not(.ant-card .ant-card):not(.ant-card-type-inner):hover { box-shadow: var(--nx-shadow); border-color: var(--nx-line) !important; }
body.nx-on .ant-card .ant-card-head { border-bottom: 1px solid var(--nx-line); min-height: 52px; border-radius: var(--nx-r2) var(--nx-r2) 0 0; }
body.nx-on .ant-card .ant-card-head-title { font-size: 16px; font-weight: 700; color: var(--nx-text); }
body.nx-on .ant-card .ant-card-meta-title { font-weight: 700; color: var(--nx-text); }
body.nx-on .ant-card .ant-card-meta-description { color: var(--nx-muted); }
.nx-root .content-inner > .ant-card + .ant-card, .nx-root .nx-old > .ant-card + .ant-card, .nx-root .nx-old > div > .ant-card + .ant-card { margin-top: var(--nx-s4); }
body.nx-on .ant-collapse { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); overflow: hidden; }
body.nx-on .ant-collapse.ant-collapse-ghost, body.nx-on .ant-collapse-borderless { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
body.nx-on .ant-collapse > .ant-collapse-item { border-bottom: 1px solid var(--nx-line); }
body.nx-on .ant-collapse > .ant-collapse-item:last-child { border-bottom: 0; }
body.nx-on .ant-collapse .ant-collapse-header { font-weight: 700; color: var(--nx-text); align-items: center; }
body.nx-on .ant-collapse .ant-collapse-content { background: var(--nx-surface); border-top: 1px solid var(--nx-line); color: var(--nx-text); }
body.nx-on .ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content { background: transparent; border-top: 0; }
body.nx-on .ant-list-bordered { border-color: var(--nx-line); border-radius: var(--nx-r2); }
body.nx-on .ant-list-item { border-color: var(--nx-line); }
body.nx-on .ant-divider { border-color: var(--nx-line); }
body.nx-on .ant-descriptions-bordered .ant-descriptions-view { border-color: var(--nx-line); border-radius: var(--nx-r2); }
body.nx-on .ant-descriptions-bordered .ant-descriptions-item-label { background: var(--nx-hover); color: var(--nx-muted); font-weight: 600; }
body.nx-on .ant-descriptions-bordered .ant-descriptions-row, body.nx-on .ant-descriptions-bordered .ant-descriptions-item-label, body.nx-on .ant-descriptions-bordered .ant-descriptions-item-content { border-color: var(--nx-line); }

/* ---------------------------------------------------------------- tables: the header on the hover ground, muted label, no zebra, a row hover, 12 px of air */
body.nx-on .ant-table-wrapper .ant-table { background: transparent; color: var(--nx-text); border-radius: var(--nx-r2); }
body.nx-on .ant-table-wrapper .ant-table-thead > tr > th, body.nx-on .ant-table-wrapper .ant-table-thead > tr > td { background: var(--nx-hover); color: var(--nx-muted); font-size: var(--nx-fs-small); font-weight: 700; letter-spacing: .1px; border-bottom: 1px solid var(--nx-line); }
body.nx-on .ant-table-wrapper .ant-table-thead > tr > th::before { display: none; }
body.nx-on .ant-table-wrapper .ant-table-thead > tr > th:first-child { border-top-left-radius: var(--nx-r1); }
body.nx-on .ant-table-wrapper .ant-table-thead > tr > th:last-child { border-top-right-radius: var(--nx-r1); }
body.nx-on .ant-table-wrapper .ant-table-tbody > tr > td { border-bottom: 1px solid var(--nx-line); }
body.nx-on .ant-table-wrapper .ant-table-tbody > tr:last-child > td { border-bottom: 0; }
body.nx-on .ant-table-wrapper .ant-table-tbody > tr.ant-table-row:hover > td, body.nx-on .ant-table-wrapper .ant-table-tbody > tr > td.ant-table-cell-row-hover { background: var(--nx-hover); }
body.nx-on .ant-table-wrapper .ant-table-tbody > tr.ant-table-row-selected > td { background: var(--nx-blue-soft); }
body.nx-on .ant-table-wrapper .ant-table-column-sorter-up.active, body.nx-on .ant-table-wrapper .ant-table-column-sorter-down.active { color: var(--nx-blue-text); }
body.nx-on .ant-table-wrapper .ant-table-placeholder .ant-table-cell { background: var(--nx-surface); }
body.nx-on .ant-table-wrapper .ant-pagination { margin: var(--nx-s4) 0 0; }
body.nx-on .ant-pagination .ant-pagination-item { border-radius: var(--nx-r1); border-color: var(--nx-line); }
body.nx-on .ant-pagination .ant-pagination-item-active { border-color: var(--nx-blue); background: var(--nx-blue-soft); }
body.nx-on .ant-pagination .ant-pagination-item-active a { color: var(--nx-blue-text); font-weight: 700; }

/* ---------------------------------------------------------------- tabs (underline in the accent), segmented, steps */
body.nx-on .ant-tabs .ant-tabs-nav::before { border-bottom: 1px solid var(--nx-line); }
body.nx-on .ant-tabs .ant-tabs-tab { font-weight: 600; min-height: var(--nx-tap); align-items: center; padding: 8px 2px; }
body.nx-on .ant-tabs .ant-tabs-tab .ant-tabs-tab-btn { color: var(--nx-muted); }
body.nx-on .ant-tabs .ant-tabs-tab:hover .ant-tabs-tab-btn { color: var(--nx-text); }
body.nx-on .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn { color: var(--nx-blue-text); font-weight: 800; text-shadow: none; }
body.nx-on .ant-tabs .ant-tabs-ink-bar { height: 3px; border-radius: 3px 3px 0 0; background: var(--nx-blue); }
body.nx-on .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab { border-radius: var(--nx-r1) var(--nx-r1) 0 0; border-color: var(--nx-line); }
body.nx-on .ant-segmented { border-radius: var(--nx-rfull); padding: 4px; }
body.nx-on .ant-segmented .ant-segmented-item { border-radius: var(--nx-rfull); }
body.nx-on .ant-segmented .ant-segmented-item-label { font-weight: 600; }   /* the height is the responsive layer's (nx-w11: 40 px at <= 860), not ours */
body.nx-on .ant-segmented .ant-segmented-item-selected { box-shadow: var(--nx-shadow); }
body.nx-on .ant-segmented .ant-segmented-item-selected .ant-segmented-item-label { color: var(--nx-text); font-weight: 800; }
body.nx-on .ant-segmented .ant-segmented-thumb { border-radius: var(--nx-rfull); box-shadow: var(--nx-shadow); }
body.nx-on .ant-steps .ant-steps-item-process .ant-steps-item-icon { background: var(--nx-blue); border-color: var(--nx-blue); }
body.nx-on .ant-steps .ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon { color: var(--nx-on-blue); }
body.nx-on .ant-steps .ant-steps-item-finish .ant-steps-item-icon { background: var(--nx-blue-soft); border-color: var(--nx-blue); }
body.nx-on .ant-steps .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon { color: var(--nx-blue-text); }
body.nx-on .ant-steps .ant-steps-item-wait .ant-steps-item-icon { background: var(--nx-hover); border-color: transparent; }
body.nx-on .ant-steps .ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon { color: var(--nx-muted); }
body.nx-on .ant-steps .ant-steps-item-title { color: var(--nx-text); font-weight: 600; }
body.nx-on .ant-steps .ant-steps-item-description { color: var(--nx-muted); }

/* ---------------------------------------------------------------- buttons: primary = the accent fill with the glow of the motion kit, default = outlined, danger keeps its meaning */
body.nx-on .ant-btn { font-family: var(--nx-font); font-weight: 600; border-radius: 10px; }
body.nx-on .ant-btn.ant-btn-sm { border-radius: 8px; }
body.nx-on .ant-btn-primary:not(.ant-btn-dangerous):not(:disabled) { background: var(--nx-blue); border-color: var(--nx-blue); color: var(--nx-on-blue); box-shadow: var(--glow); }
body.nx-on .ant-btn-primary:not(.ant-btn-dangerous):not(:disabled):hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--nx-on-blue); }
body.nx-on .ant-btn-default:not(:disabled), body.nx-on .ant-btn-dashed:not(:disabled) { background: var(--nx-surface); color: var(--nx-text); border-color: var(--nx-control-line); }
body.nx-on .ant-btn-default:not(:disabled):hover, body.nx-on .ant-btn-dashed:not(:disabled):hover { background: var(--nx-hover); color: var(--nx-text); border-color: var(--nx-control-line); }
body.nx-on .ant-btn-default.ant-btn-dangerous:not(:disabled), body.nx-on .ant-btn-dangerous.ant-btn-primary:not(:disabled) { color: var(--nx-bad-text); }
body.nx-on .ant-btn-default.ant-btn-dangerous:not(:disabled) { background: var(--nx-bad-soft); border-color: transparent; }
body.nx-on .ant-btn-dangerous.ant-btn-primary:not(:disabled) { background: var(--nx-bad-soft); border-color: var(--nx-danger); }
body.nx-on .ant-btn-link:not(:disabled) { color: var(--nx-link); font-weight: 700; }
body.nx-on .ant-btn-text:not(:disabled) { color: var(--nx-text); }
body.nx-on .ant-btn[disabled], body.nx-on .ant-btn:disabled { opacity: .55; }

/* ---------------------------------------------------------------- fields: radius 10, a 2 px accent ring on focus, a visible border (3:1) */
body.nx-on .ant-input, body.nx-on .ant-input-affix-wrapper, body.nx-on .ant-input-number, body.nx-on .ant-picker, body.nx-on .ant-select:not(.ant-select-customize-input) .ant-select-selector { border-radius: var(--nx-r1); font-family: var(--nx-font); }
body.nx-on .ant-input-group-addon { border-radius: var(--nx-r1); }
body.nx-on .ant-input:focus, body.nx-on .ant-input-focused, body.nx-on .ant-input-affix-wrapper-focused, body.nx-on .ant-input-number-focused, body.nx-on .ant-picker-focused,
body.nx-on .ant-select-focused:not(.ant-select-disabled) .ant-select-selector { border-color: var(--nx-blue-text); box-shadow: 0 0 0 2px var(--nx-focus); outline: 0; }
body.nx-on .ant-input::placeholder, body.nx-on textarea.ant-input::placeholder { color: var(--nx-muted); opacity: 1; }
body.nx-on .ant-input-disabled, body.nx-on .ant-input[disabled], body.nx-on .ant-select-disabled .ant-select-selector { background: var(--nx-hover); color: var(--nx-muted); }
body.nx-on .ant-form-item-label > label { color: var(--nx-text); font-weight: 600; }
body.nx-on .ant-form-item-explain-error { color: var(--nx-bad-text); }
body.nx-on .ant-checkbox-wrapper, body.nx-on .ant-radio-wrapper { color: var(--nx-text); }
body.nx-on .ant-upload.ant-upload-drag { border-radius: var(--nx-r2); background: var(--nx-hover); border-color: var(--nx-control-line); }
body.nx-on .ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) { font-weight: 700; }

/* ---------------------------------------------------------------- tags and badges: pills with their words (a status is a word, never colour alone) */
body.nx-on .ant-tag { border-radius: var(--nx-rfull); padding: 1px 10px; font-size: var(--nx-fs-small); font-weight: 700; line-height: 1.55; border: 1px solid transparent; background: var(--nx-hover); color: var(--nx-text); margin-inline-end: 6px; }
body.nx-on .ant-tag.ant-tag-bordered, body.nx-on .ant-tag:not([class*="ant-tag-"]) { border-color: var(--nx-line); }
body.nx-on .ant-tag-success, body.nx-on .ant-tag-green { background: var(--nx-ok-soft); color: var(--nx-ok-text); border-color: transparent; }
body.nx-on .ant-tag-warning, body.nx-on .ant-tag-gold, body.nx-on .ant-tag-orange, body.nx-on .ant-tag-yellow { background: var(--nx-amber-soft); color: var(--nx-amber-text); border-color: transparent; }
body.nx-on .ant-tag-error, body.nx-on .ant-tag-red, body.nx-on .ant-tag-magenta, body.nx-on .ant-tag-volcano { background: var(--nx-bad-soft); color: var(--nx-bad-text); border-color: transparent; }
body.nx-on .ant-tag-processing, body.nx-on .ant-tag-blue, body.nx-on .ant-tag-geekblue, body.nx-on .ant-tag-cyan, body.nx-on .ant-tag-purple, body.nx-on .ant-tag-lime { background: var(--nx-blue-soft); color: var(--nx-blue-text); border-color: transparent; }
body.nx-on .ant-tag .anticon-close { color: inherit; }
body.nx-on .ant-badge-count { font-weight: 700; border-radius: var(--nx-rfull); box-shadow: none; }

/* ---------------------------------------------------------------- alerts: the semantic soft grounds, a status bar, the icon in the status colour (the words are always there) */
body.nx-on .ant-alert { border-radius: var(--nx-r2); border: 1px solid transparent; color: var(--nx-text); }
body.nx-on .ant-alert .ant-alert-message { color: var(--nx-text); font-weight: 700; }
body.nx-on .ant-alert .ant-alert-description { color: var(--nx-text); }
body.nx-on .ant-alert-success { background: var(--nx-ok-soft); box-shadow: inset 4px 0 0 var(--nx-success); }
body.nx-on .ant-alert-warning { background: var(--nx-amber-soft); box-shadow: inset 4px 0 0 var(--nx-amber); }
body.nx-on .ant-alert-error { background: var(--nx-bad-soft); box-shadow: inset 4px 0 0 var(--nx-danger); }
body.nx-on .ant-alert-info { background: var(--nx-blue-soft); box-shadow: inset 4px 0 0 var(--nx-blue); }
body.nx-on .ant-alert-success .ant-alert-icon { color: var(--nx-ok-text); }
body.nx-on .ant-alert-warning .ant-alert-icon { color: var(--nx-amber-text); }
body.nx-on .ant-alert-error .ant-alert-icon { color: var(--nx-bad-text); }
body.nx-on .ant-alert-info .ant-alert-icon { color: var(--nx-blue-text); }
body.nx-on .ant-alert-with-description { padding: var(--nx-s4); }
body.nx-on .ant-result-title { color: var(--nx-text); font-weight: 800; }
body.nx-on .ant-result-subtitle { color: var(--nx-muted); }
body.nx-on .ant-empty-description { color: var(--nx-muted); }
/* the centred error alert card (alertdialog.jsx) and its inline twin (errorcard.jsx): the same card family as the W7 state pages. They keep their words, place and behaviour. */
body.nx-on .ant-modal-content:has([role="alertdialog"]) { border: 1px solid var(--nx-line); border-radius: 20px !important; box-shadow: var(--shadow-raised) !important; background: var(--color-overlay); }
body.nx-on .ant-modal-content:has([role="alertdialog"]) .ant-btn-primary { min-height: var(--nx-tap); }
body.nx-on .ao-errcard { border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-bad-soft); color: var(--nx-text); box-shadow: inset 4px 0 0 var(--nx-danger); }
body.nx-on .ao-errcard b { color: var(--nx-text); }
body.nx-on .ao-errcard .anticon-warning { color: var(--nx-bad-text); }

/* ---------------------------------------------------------------- progress, spin, skeleton in the accent */
body.nx-on .ant-spin { color: var(--nx-blue); }
body.nx-on .ant-spin .ant-spin-dot-item { background-color: var(--nx-blue); }
body.nx-on .ant-skeleton .ant-skeleton-content .ant-skeleton-title, body.nx-on .ant-skeleton .ant-skeleton-content .ant-skeleton-paragraph > li, body.nx-on .ant-skeleton .ant-skeleton-avatar, body.nx-on .ant-skeleton .ant-skeleton-button, body.nx-on .ant-skeleton .ant-skeleton-input { background: var(--color-skeleton); border-radius: var(--nx-r1); }
body.nx-on .ant-progress .ant-progress-bg { background-color: var(--nx-blue); }
body.nx-on .ant-progress .ant-progress-text { color: var(--nx-text); }

/* ---------------------------------------------------------------- dialogs: centred cards (radius 20), a bottom sheet at 860 px and under */
body.nx-on .ant-modal .ant-modal-content { background: var(--color-overlay); border: 1px solid var(--nx-line); border-radius: 20px; box-shadow: var(--shadow-raised); padding: var(--nx-s6); }
body.nx-on .ant-modal .ant-modal-header { background: transparent; margin-bottom: var(--nx-s4); }
body.nx-on .ant-modal .ant-modal-title { font-size: var(--nx-fs-h3); line-height: 1.3; }
body.nx-on .ant-modal .ant-modal-footer { margin-top: var(--nx-s5); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--nx-s2); }
body.nx-on .ant-modal .ant-modal-footer .ant-btn + .ant-btn { margin-inline-start: 0; }
body.nx-on .ant-modal .ant-modal-close { border-radius: 50%; width: var(--nx-tap); height: var(--nx-tap); top: var(--nx-s3); inset-inline-end: var(--nx-s3); color: var(--nx-muted); }
body.nx-on .ant-modal .ant-modal-close:hover { background: var(--nx-hover); color: var(--nx-text); }
body.nx-on .ant-modal-confirm .ant-modal-confirm-title { font-weight: 800; color: var(--nx-text); }
body.nx-on .ant-modal-confirm .ant-modal-confirm-content { color: var(--nx-muted); }
body.nx-on .ant-modal-body { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 860px) {
  body.nx-on .ant-modal-root .ant-modal:not(:has([role="alertdialog"])) { position: fixed; inset: auto 0 0 0; top: auto !important; width: 100% !important; max-width: 100% !important; margin: 0; padding: 0; transform-origin: 50% 100%; }
  body.nx-on .ant-modal-root .ant-modal:not(:has([role="alertdialog"])) .ant-modal-content { border-radius: 20px 20px 0 0; max-height: calc(88 * var(--ao-vh)); max-height: calc(88 * var(--ao-dvh)); overflow: auto; padding: var(--nx-s5) var(--nx-s4) calc(var(--nx-s5) + env(safe-area-inset-bottom)); border-bottom: 0; }
  body.nx-on .ant-modal-root .ant-modal:not(:has([role="alertdialog"])) .ant-modal-content::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--nx-control-line); margin: calc(var(--nx-s2) * -1) auto var(--nx-s3); }
  body.nx-on .ant-modal .ant-modal-footer .ant-btn { flex: 1 1 140px; }
  body.nx-on .ant-modal-confirm .ant-modal-confirm-btns { display: flex; gap: var(--nx-s2); flex-wrap: wrap; justify-content: flex-end; }
}

/* ---------------------------------------------------------------- drawers: radius on the open side, full width at 860 px and under */
body.nx-on .ant-drawer .ant-drawer-content { background: var(--color-overlay); color: var(--nx-text); }
body.nx-on .ant-drawer-right > .ant-drawer-content-wrapper > .ant-drawer-content { border-radius: 20px 0 0 20px; }
body.nx-on .ant-drawer-left > .ant-drawer-content-wrapper > .ant-drawer-content { border-radius: 0 20px 20px 0; }
body.nx-on .ant-drawer-bottom > .ant-drawer-content-wrapper > .ant-drawer-content { border-radius: 20px 20px 0 0; }
body.nx-on .ant-drawer-top > .ant-drawer-content-wrapper > .ant-drawer-content { border-radius: 0 0 20px 20px; }
body.nx-on .ant-drawer .ant-drawer-header { border-bottom: 1px solid var(--nx-line); padding: var(--nx-s4) var(--nx-s5); }
body.nx-on .ant-drawer .ant-drawer-title { font-size: var(--nx-fs-h3); }
body.nx-on .ant-drawer .ant-drawer-footer { border-top: 1px solid var(--nx-line); }
body.nx-on .ant-drawer .ant-drawer-close { border-radius: 50%; width: var(--nx-tap); height: var(--nx-tap); color: var(--nx-muted); }
body.nx-on .ant-drawer .ant-drawer-close:hover { background: var(--nx-hover); color: var(--nx-text); }
@media (max-width: 860px) {
  body.nx-on .ant-drawer-left > .ant-drawer-content-wrapper, body.nx-on .ant-drawer-right > .ant-drawer-content-wrapper { width: 100% !important; max-width: calc(100 * var(--ao-vw)); }
  body.nx-on .ant-drawer-right > .ant-drawer-content-wrapper > .ant-drawer-content, body.nx-on .ant-drawer-left > .ant-drawer-content-wrapper > .ant-drawer-content { border-radius: 0; }
}

/* ---------------------------------------------------------------- popups: dropdowns, selects, popovers, tooltips, pickers, notices (surface, radius, shadow) */
body.nx-on .ant-dropdown .ant-dropdown-menu, body.nx-on .ant-select-dropdown, body.nx-on .ant-popover .ant-popover-inner, body.nx-on .ant-picker-dropdown .ant-picker-panel-container, body.nx-on .ant-cascader-dropdown, body.nx-on .ant-tree-select-dropdown { background: var(--color-overlay); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--shadow-raised); color: var(--nx-text); }
body.nx-on .ant-dropdown .ant-dropdown-menu { padding: 6px; }
body.nx-on .ant-dropdown .ant-dropdown-menu-item, body.nx-on .ant-dropdown .ant-dropdown-menu-submenu-title { border-radius: var(--nx-r1); min-height: 36px; display: flex; align-items: center; color: var(--nx-text); }
body.nx-on .ant-dropdown .ant-dropdown-menu-item:hover, body.nx-on .ant-dropdown .ant-dropdown-menu-submenu-title:hover { background: var(--nx-hover); }
body.nx-on .ant-dropdown .ant-dropdown-menu-item-danger { color: var(--nx-bad-text); }
body.nx-on .ant-select-dropdown { padding: 6px; }
body.nx-on .ant-select-dropdown .ant-select-item { border-radius: var(--nx-r1); min-height: 36px; color: var(--nx-text); }
body.nx-on .ant-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled) { background: var(--nx-hover); }
body.nx-on .ant-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) { background: var(--nx-blue-soft); color: var(--nx-text); }
body.nx-on .ant-popover .ant-popover-inner { padding: var(--nx-s4); }
body.nx-on .ant-popover .ant-popover-title, body.nx-on .ant-popover .ant-popconfirm-title { color: var(--nx-text); font-weight: 700; }
body.nx-on .ant-popover .ant-popover-inner-content, body.nx-on .ant-popover .ant-popconfirm-description { color: var(--nx-text); }
body.nx-on .ant-tooltip .ant-tooltip-inner { border-radius: var(--nx-r1); font-size: var(--nx-fs-small); padding: 6px 10px; box-shadow: var(--shadow-raised); }
body.nx-on .ant-message .ant-message-notice-content, body.nx-on .ant-notification .ant-notification-notice { background: var(--color-overlay); color: var(--nx-text); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--shadow-raised); }
body.nx-on .ant-notification .ant-notification-notice-message { color: var(--nx-text); font-weight: 700; }
body.nx-on .ant-notification .ant-notification-notice-description { color: var(--nx-muted); }
body.nx-on .ant-picker-dropdown .ant-picker-panel-container { padding: 0; }
body.nx-on .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner { background: var(--nx-blue); color: var(--nx-on-blue); }

/* ---------------------------------------------------------------- the old pages' own boxes (web/src/styles.css): the same card family, tokens only, layout untouched */
/* The boxes found by tools/nx-skin-shot.mjs --audit: all take the theme's card radius; their ground, border and glow already come from the five depth variables above. */
.nx-root .empty-card, .nx-root .stat, .nx-root .mw-run, .nx-root .chat-side, .nx-root .chat-main, .nx-root .sd-item, .nx-root .wn-item, .nx-root .wn-card, .nx-root .h2-panel, .nx-root .gal-side, .nx-root .am-rec, .nx-root .am-journey,
.nx-root .imp-sections, .nx-root .imp-next, .nx-root .imp-chip, .nx-root .q-box, .nx-root .mini-panel, .nx-root .ver-row, .nx-root .fleet-warn, .nx-root .cmp { border-radius: var(--nx-r2); }
.nx-root .q-box, .nx-root .mini-panel { background: var(--nx-hover); border: 1px solid var(--nx-line); }
.nx-root .sd-bar, .nx-root .pp-depts { background: var(--nx-hover); }

/* ---------------------------------------------------------------- phones: no sideways scroll from old tables, 16 px type in fields so a phone does not zoom in */
@media (max-width: 860px) {
  .nx-root .ant-table-wrapper .ant-table-content { overflow-x: auto; }
  .nx-root .ant-table-wrapper, .nx-root .ant-card, .nx-root .ant-tabs, .nx-root .ant-alert { max-width: 100%; }
  .nx-root .ant-tabs-nav { max-width: 100%; }
  body.nx-on .ant-input, body.nx-on .ant-input-number-input, body.nx-on .ant-select-selection-search-input, body.nx-on .ant-select-selection-item, body.nx-on .ant-picker-input > input, body.nx-on textarea.ant-input { font-size: 16px; }
}

/* ---------------------------------------------------------------- motion: only for people who did not ask for less */
@media (prefers-reduced-motion: no-preference) {
  body.nx-on .ant-btn-primary:not(.ant-btn-dangerous):not(:disabled) { transition: background var(--nx-d2) var(--nx-curve), box-shadow var(--nx-d2) var(--nx-curve), border-color var(--nx-d2) var(--nx-curve); }
  body.nx-on .ant-btn-primary:not(.ant-btn-dangerous):not(:disabled):hover { box-shadow: var(--glow); }
  body.nx-on .ant-input, body.nx-on .ant-input-affix-wrapper, body.nx-on .ant-select-selector, body.nx-on .ant-picker { transition: border-color var(--nx-d2) var(--nx-curve), box-shadow var(--nx-d2) var(--nx-curve); }
  body.nx-on .ant-card.ant-card-bordered, body.nx-on .ant-collapse { transition: box-shadow var(--nx-d2) var(--nx-curve), border-color var(--nx-d2) var(--nx-curve); }
  body.nx-on .ant-tabs .ant-tabs-tab .ant-tabs-tab-btn, body.nx-on .ant-table-wrapper .ant-table-tbody > tr > td { transition: color var(--nx-d1) var(--nx-curve), background var(--nx-d1) var(--nx-curve); }
}

/* THE TASK PAGE of the redesigned look (nx-task.jsx, #/work/<task id>): the header card, the approval card, the request, the live view, the answer, the timeline in plain words, what it
   looked at and did, and the notes. Every rule starts with .nx-root (qa-2026-10-21-nx-css-scoped) and takes its colours from the --nx-* tokens only, so all seven themes follow
   (tools/nx-contrast.mjs has the "task page" pairs). Nothing here moves. 40 px targets, 16 px fields on a phone, no sideways page scroll from 320 to 2560 px.
   Add this file to web/build.mjs after the last nx-w*.css line. */

.nx-root .nx-tk { display: grid; gap: var(--nx-s5); min-width: 0; }
.nx-root .nx-tk > * { min-width: 0; }
.nx-root .nx-tk-card { display: grid; gap: var(--nx-s3); align-content: start; min-width: 0; }
.nx-root .nx-tk-card .nx-h3 { margin: 0; }
.nx-root .nx-tk-card__sub { margin: calc(var(--nx-s1) * -1) 0 0; color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- the header */
.nx-root .nx-tk-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--nx-s4) var(--nx-s5); align-items: start; }
.nx-root .nx-tk-head__main { display: grid; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-tk-title { margin: 0; font-size: var(--nx-fs-h1); line-height: 1.2; font-weight: 800; letter-spacing: -.3px; color: var(--nx-text); overflow-wrap: anywhere; }
.nx-root .nx-tk-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-tk-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--nx-s1) var(--nx-s3); color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-tk-facts li { overflow-wrap: anywhere; min-width: 0; }
.nx-root .nx-tk-facts li + li::before { content: "\00b7"; margin-right: var(--nx-s3); }
@media (max-width: 860px) { .nx-root .nx-tk-facts { gap: var(--nx-s1) var(--nx-s4); } .nx-root .nx-tk-facts li + li::before { content: none; } }
@media (max-width: 860px) {
  .nx-root .nx-tk-title { font-size: var(--nx-fs-h2); }
}
@media (max-width: 420px) {
  .nx-root .nx-tk-head { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- notices (decided, failed, private office) */
.nx-root .nx-tk-note-box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--nx-s3); align-items: start; padding: var(--nx-s4); border: 1px solid var(--nx-line); border-left: 4px solid var(--nx-blue); border-radius: var(--nx-r2); background: var(--nx-surface); color: var(--nx-text); }
.nx-root .nx-tk-note-box.is-ok { border-left-color: var(--nx-success); }
.nx-root .nx-tk-note-box.is-bad { border-left-color: var(--nx-danger); }
.nx-root .nx-tk-note-box p { margin: var(--nx-s1) 0 var(--nx-s2); color: var(--nx-muted); overflow-wrap: anywhere; }
.nx-root .nx-tk-note-box b { overflow-wrap: anywhere; }
.nx-root .nx-tk-warn { display: flex; gap: var(--nx-s2); align-items: flex-start; padding: var(--nx-s3) var(--nx-s4); border-radius: var(--nx-r1); background: var(--nx-amber-soft); color: var(--nx-text); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- the approval card (the shared .nx-approval, a little more inside) */
.nx-root .nx-tk-appr { min-width: 0; }
.nx-root .nx-tk-appr__when { margin: calc(var(--nx-s1) * -1) 0 0; color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-tk-appr .nx-approval__block { min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-tk-appr .act-details, .nx-root .nx-tk-appr .pre { max-width: 100%; }
.nx-root .nx-tk-rows { display: grid; gap: var(--nx-s2); margin-top: var(--nx-s2); min-width: 0; }
.nx-root .nx-tk-details { margin-top: var(--nx-s2); min-width: 0; }
.nx-root .nx-tk-details > summary { cursor: pointer; min-height: var(--nx-tap); display: flex; align-items: center; color: var(--nx-link); font-weight: 700; }
.nx-root .nx-tk-code { margin: var(--nx-s2) 0 0; padding: var(--nx-s3); max-height: 360px; overflow: auto; background: var(--nx-hover); color: var(--nx-text); border-radius: var(--nx-r1); font-size: var(--nx-fs-small); white-space: pre-wrap; overflow-wrap: anywhere; }
.nx-root .nx-tk-note { display: grid; gap: var(--nx-s1); }
.nx-root .nx-tk-note__field { width: 100%; min-width: 0; flex: none; padding: var(--nx-s2) var(--nx-s3); min-height: 72px; resize: vertical; }
.nx-root .nx-tk-need { margin: 0; color: var(--nx-bad-text); font-weight: 700; }
.nx-root .nx-tk-dlgnote { margin: var(--nx-s2) 0 0; text-align: left; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- the two columns */
.nx-root .nx-tk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: var(--nx-s5); align-items: start; }
.nx-root .nx-tk-main, .nx-root .nx-tk-side { display: grid; gap: var(--nx-s4); min-width: 0; align-content: start; }
@media (max-width: 1000px) { .nx-root .nx-tk-grid { grid-template-columns: minmax(0, 1fr); } }

.nx-root .nx-tk-pre { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--nx-text); }
.nx-root .nx-tk-pre.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }   /* six lines, then Show all */
.nx-root .nx-tk-more-btn { min-height: var(--nx-tap); display: inline-flex; align-items: center; }
.nx-root .nx-tk-took { margin: 0; display: flex; align-items: center; gap: var(--nx-s2); color: var(--nx-ok-text); font-weight: 700; }
.nx-root .nx-tk-result.is-warn { border-left: 4px solid var(--nx-amber); }
.nx-root .nx-tk-result .pre, .nx-root .nx-tk-result table { max-width: 100%; }
.nx-root .nx-tk-result, .nx-root .nx-tk-live, .nx-root .nx-tk-ask { overflow-wrap: anywhere; }
.nx-root .nx-tk-result, .nx-root .nx-tk-live { overflow-x: auto; }   /* a wide table scrolls inside its card, never the page */
.nx-root .nx-tk-result img, .nx-root .nx-tk-result pre, .nx-root .nx-tk-live pre { max-width: 100%; overflow: auto; }
.nx-root .nx-tk-acts { display: flex; flex-wrap: wrap; gap: var(--nx-s2); align-items: center; }
.nx-root .nx-tk-checked, .nx-root .nx-tk-feedback, .nx-root .nx-tk-memo, .nx-root .nx-tk-next { min-width: 0; }

/* ---------------------------------------------------------------- the timeline in plain words */
.nx-root .nx-tk-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.nx-root .nx-tk-tl__i { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--nx-s3); padding: 0 0 var(--nx-s4); min-width: 0; }
.nx-root .nx-tk-tl__i:last-child { padding-bottom: 0; }
.nx-root .nx-tk-tl__i::before { content: ""; position: absolute; left: 8px; top: 18px; bottom: 0; width: 2px; background: var(--nx-line); }
.nx-root .nx-tk-tl__i:last-child::before { display: none; }
.nx-root .nx-tk-tl__mark { width: 14px; height: 14px; margin: 3px 2px 0; border-radius: 50%; background: var(--nx-success); box-shadow: 0 0 0 3px var(--nx-surface); position: relative; z-index: 1; }
.nx-root .nx-tk-tl__i--warn .nx-tk-tl__mark { background: var(--nx-amber); }
.nx-root .nx-tk-tl__i--bad .nx-tk-tl__mark { background: var(--nx-danger); }
.nx-root .nx-tk-tl__i--info .nx-tk-tl__mark { background: var(--nx-blue); }
.nx-root .nx-tk-tl__i--gray .nx-tk-tl__mark { background: var(--nx-muted); }
.nx-root .nx-tk-tl__i.is-sub { padding-left: var(--nx-s4); }
.nx-root .nx-tk-tl__body { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nx-s1) var(--nx-s2); min-width: 0; }
.nx-root .nx-tk-tl__text { overflow-wrap: anywhere; min-width: 0; color: var(--nx-text); }
.nx-root .nx-tk-tl__at { flex-basis: 100%; color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-tk-tl__gap { padding: 0 0 var(--nx-s3) calc(18px + var(--nx-s3)); }
.nx-root .nx-tk-knowhow { margin: 0; color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }
.nx-root .nx-tk-knowhow b { color: var(--nx-text); }

/* ---------------------------------------------------------------- looked at, did */
.nx-root .nx-tk-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-tk-ticks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--nx-s2); align-items: start; overflow-wrap: anywhere; color: var(--nx-text); }
.nx-root .nx-tk-ticks li.is-bad { color: var(--nx-bad-text); }
.nx-root .nx-tk-ticks .nx-si { margin-top: 2px; }

/* ---------------------------------------------------------------- for administrators and IT */
.nx-root .nx-tk-tech { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: 0 var(--nx-s4) var(--nx-s3); }
.nx-root .nx-tk-tech__step { padding: var(--nx-s2) 0; border-top: 1px solid var(--nx-line); overflow-wrap: anywhere; }
.nx-root .nx-tk-tech code { font-size: var(--nx-fs-small); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- the old pieces mounted inside the cards: they never make the page wider */
.nx-root .nx-tk .live-steps, .nx-root .nx-tk .act-details { max-width: 100%; min-width: 0; }
.nx-root .nx-tk .nx-tbl { min-width: 0; max-width: 100%; }


/* ---------------------------------------------------------------- the status line, the safety strip, the action area, the folds */
.nx-root .nx-tk-safe { margin: 0; display: flex; align-items: center; gap: var(--nx-s2); color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }
.nx-root .nx-tk-partial { margin: 0; }
.nx-root .nx-tk-split { color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-tk-line { margin: 0; color: var(--nx-text); overflow-wrap: anywhere; }
.nx-root .nx-tk-quiet { margin: 0; color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }
.nx-root .nx-tk-quiet b { color: var(--nx-text); }
.nx-root .nx-tk-bar { position: sticky; top: calc(var(--nx-header-h) + var(--nx-s6)); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s3); padding: var(--nx-s3) var(--nx-s4); min-width: 0; }
.nx-root .nx-tk-bar__main, .nx-root .nx-tk-bar__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-tk-bar__msg { display: inline-flex; align-items: center; gap: var(--nx-s2); font-weight: 700; color: var(--nx-text); overflow-wrap: anywhere; }
.nx-root .nx-tk-menu { position: relative; }
.nx-root .nx-tk-menu__list { position: absolute; right: 0; top: calc(100% + var(--nx-s1)); z-index: 6; display: grid; gap: var(--nx-s1); min-width: 220px; max-width: min(320px, calc(86 * var(--ao-vw))); padding: var(--nx-s2); background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r1); box-shadow: var(--nx-shadow); }
.nx-root .nx-tk-menu__list[hidden] { display: none; }
.nx-root .nx-tk-menu__item { justify-content: flex-start; width: 100%; text-align: left; border-color: transparent; }
.nx-root .nx-tk-menu__node { display: grid; min-width: 0; }
.nx-root .nx-tk-menu__node .ant-btn { width: 100%; justify-content: flex-start; }
.nx-root .nx-tk-menu__icon { min-width: var(--nx-tap); padding: 0; font-size: 20px; line-height: 1; }
.nx-root .nx-tk-fold__sum { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s3); min-height: var(--nx-tap); margin: 0; list-style-position: inside; }
.nx-root .nx-tk-fold[open] > .nx-tk-fold__sum { margin-bottom: var(--nx-s3); }
.nx-root .nx-tk-copy { margin-top: var(--nx-s3); }
@media (max-width: 860px) {
  /* a phone: the answer first, the request after it, and the one thing to do in a bar at the bottom, above the menu bar */
  .nx-root .nx-tk-bar { order: 99; top: auto; bottom: calc(var(--nx-bar-h) + var(--nx-s2) + env(safe-area-inset-bottom)); }
  .nx-root .nx-tk-safe { order: 98; }
  .nx-root .nx-tk-bar { flex-wrap: nowrap; padding: var(--nx-s2) var(--nx-s3); gap: var(--nx-s2); }
  .nx-root .nx-tk-bar__main { flex: 1 1 auto; }
  .nx-root .nx-tk-bar__main > .nx-btn, .nx-root .nx-tk-bar__main > .ant-btn { flex: 1 1 100%; width: 100%; }
  .nx-root .nx-tk-bar__acts { flex: none; }
  .nx-root .nx-tk-menu__list { right: 0; left: auto; bottom: calc(100% + var(--nx-s1)); top: auto; }
}
/* ---------------------------------------------------------------- a phone: 16 px fields so the page never zooms, buttons on a full row */
@media (max-width: 860px) {
  .nx-root .nx-tk-note__field { font-size: 16px; }
  .nx-root .nx-tk-appr .nx-approval__title { flex: 1 1 100%; }
  .nx-root .nx-tk .nx-approval__actions .nx-btn, .nx-root .nx-tk-acts .nx-btn { flex: 1 1 100%; }
}
@media (min-width: 2000px) { .nx-root .nx-tk-grid { grid-template-columns: minmax(0, 1fr) 460px; } }

/* Wave 13 (21 Oct 2026): the tabs of the agent page in the redesigned look: Run, Who can use it, Details and approval, Improve, Activity.
   Every rule starts with .nx-root and uses tokens only (--nx-*). Motion only inside prefers-reduced-motion: no-preference. 40 px targets, visible focus (the shell's), no sideways page scroll. */

.nx-root .nx-ag-sec { display: grid; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-ag-sec__head { display: flex; align-items: center; gap: var(--nx-s3); flex-wrap: wrap; }
.nx-root .nx-ag-sec__head .nx-h3 { margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-ag-sec__act { display: flex; gap: var(--nx-s2); flex-wrap: wrap; }
.nx-root .nx-ag-sec__sub { margin: 0; }
.nx-root .nx-ag-sub { font-size: var(--nx-fs-body); font-weight: 700; margin: 0 0 var(--nx-s2); color: var(--nx-text); }
.nx-root .nx-ag-none { margin: 0; }
.nx-root .nx-ag-meta { margin: 0; }
.nx-root .nx-ag-job { margin: 0; font-size: var(--nx-fs-body); overflow-wrap: anywhere; }
.nx-root .nx-ag-scope { margin: 0; overflow-wrap: anywhere; }

/* the form of the Run tab and of the test box */
.nx-root .nx-ag-form { display: grid; gap: var(--nx-s4); min-width: 0; }
.nx-root .nx-ag-field { display: grid; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-ag-label { font-weight: 700; }
.nx-root .nx-ag-foot { display: flex; align-items: center; gap: var(--nx-s3); flex-wrap: wrap; justify-content: space-between; }
.nx-root .nx-ag-foot > .nx-small { flex: 1; min-width: 200px; }
.nx-root .nx-ag-note-in { width: 100%; }
.nx-root .nx-ag-quote { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.nx-root .nx-ag-form .nx-input, .nx-root .nx-ag-form .nx-select, .nx-root .nx-ag-pick .nx-input, .nx-root .nx-ag-ask .nx-input { width: 100%; max-width: 100%; box-sizing: border-box; }
.nx-root .nx-ag-time { display: inline-flex; align-items: center; gap: var(--nx-s2); font-weight: 600; }
.nx-root .nx-ag-time .nx-input { width: auto; }

/* when it runs: choices as chips, never colour alone (the pressed one is bold and has a check) */
.nx-root .nx-ag-when { display: grid; gap: var(--nx-s3); }
.nx-root .nx-ag-chips { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-ag-chip { min-height: var(--nx-tap); min-width: var(--nx-tap); padding: 0 var(--nx-s4); border: 1px solid var(--nx-control-line); border-radius: var(--nx-rfull); background: var(--nx-surface); color: var(--nx-text); font: inherit; cursor: pointer; }
.nx-root .nx-ag-chip:hover { background: var(--nx-hover); }
.nx-root .nx-ag-chip[aria-pressed="true"] { background: var(--nx-blue-soft); color: var(--nx-blue-text); border-color: var(--nx-blue-text); font-weight: 800; }
.nx-root .nx-ag-chip[aria-pressed="true"]::before { content: '\2713'; margin-right: 6px; }
.nx-root .nx-ag-check { display: inline-flex; align-items: center; gap: var(--nx-s2); min-height: var(--nx-tap); }
.nx-root .nx-ag-check input, .nx-root .nx-ag-radio input, .nx-root .nx-ag-pick__row input { width: 20px; height: 20px; flex: none; }

/* the files */
.nx-root .nx-ag-files { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-ag-file { display: flex; align-items: center; gap: var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-r1); padding: 4px var(--nx-s3); min-width: 0; }
.nx-root .nx-ag-file__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.nx-root .nx-ag-x { width: var(--nx-tap); height: var(--nx-tap); border: 0; border-radius: 50%; background: none; color: var(--nx-muted); font-size: 22px; line-height: 1; cursor: pointer; flex: none; }
.nx-root .nx-ag-x:hover { background: var(--nx-hover); color: var(--nx-text); }

/* notes: a word in front, a tinted card; the tint is soft and the text keeps the normal colour */
.nx-root .nx-ag-note { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--nx-s3); padding: var(--nx-s3) var(--nx-s4); border: 1px solid var(--nx-line); border-left-width: 4px; border-radius: var(--nx-r2); background: var(--nx-surface); color: var(--nx-text); min-width: 0; }
.nx-root .nx-ag-note--info { border-left-color: var(--nx-blue); background: var(--nx-blue-soft); }
.nx-root .nx-ag-note--warn { border-left-color: var(--nx-amber); background: var(--nx-amber-soft); }
.nx-root .nx-ag-note--bad { border-left-color: var(--nx-danger); background: var(--nx-bad-soft); }
.nx-root .nx-ag-note--ok { border-left-color: var(--nx-success); background: var(--nx-ok-soft); }
.nx-root .nx-ag-note__main { flex: 1 1 18rem; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.nx-root .nx-ag-note__text { font-size: var(--nx-fs-small); }
.nx-root .nx-ag-note__text ul { margin: 4px 0 0; padding-left: var(--nx-s5); }
.nx-root .nx-ag-note__act { display: flex; gap: var(--nx-s2); flex-wrap: wrap; align-items: center; }
.nx-root .nx-ag-note .nx-si { margin-top: 2px; }

/* tick lines and the four groups of what it can and cannot do */
.nx-root .nx-ag-can { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--nx-s4); }
.nx-root .nx-ag-can > div { min-width: 0; }
.nx-root .nx-ag-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-ag-ticks li { display: flex; align-items: flex-start; gap: var(--nx-s2); overflow-wrap: anywhere; }
.nx-root .nx-ag-draft { border-top: 1px dashed var(--nx-line); padding-top: var(--nx-s4); display: grid; gap: var(--nx-s3); }

/* the header of Details: its state and the one safety line */
.nx-root .nx-ag-head { display: grid; gap: var(--nx-s3); }
.nx-root .nx-ag-safe { display: flex; align-items: center; gap: var(--nx-s2); font-weight: 600; }
.nx-root .nx-ag-safe[data-tone="warn"] { color: var(--nx-amber-text); }
.nx-root .nx-ag-actions { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }

/* facts, lists, versions, timelines */
.nx-root .nx-ag-dl { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: 6px var(--nx-s4); margin: 0; }
.nx-root .nx-ag-dl dt { color: var(--nx-muted); font-weight: 700; }
.nx-root .nx-ag-dl dd { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-ag-facts { margin: 0; padding-left: var(--nx-s5); display: grid; gap: var(--nx-s1); }
.nx-root .nx-ag-people { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-ag-people li { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s3); flex-wrap: wrap; border-bottom: 1px solid var(--nx-line); padding: var(--nx-s2) 0; overflow-wrap: anywhere; }
.nx-root .nx-ag-people li:last-child { border-bottom: 0; }
.nx-root .nx-ag-versions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-ag-versions li { display: flex; align-items: center; gap: var(--nx-s2); flex-wrap: wrap; }
.nx-root .nx-ag-timeline { list-style: none; margin: 0; padding: 0 0 0 var(--nx-s5); display: grid; gap: var(--nx-s4); border-left: 2px solid var(--nx-line); margin-left: 6px; }
.nx-root .nx-ag-timeline > li { position: relative; display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-ag-timeline > li::before { content: ''; position: absolute; left: calc(-1 * var(--nx-s5) - 7px); top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--nx-line); border: 2px solid var(--nx-surface); }
.nx-root .nx-ag-timeline > li.is-live::before, .nx-root .nx-ag-timeline > li[data-decision="ok"]::before { background: var(--nx-success); }
.nx-root .nx-ag-timeline > li[data-decision="bad"]::before { background: var(--nx-danger); }
.nx-root .nx-ag-timeline > li[data-decision="info"]::before { background: var(--nx-blue); }
.nx-root .nx-ag-timeline__head { display: flex; align-items: center; gap: var(--nx-s2); flex-wrap: wrap; }
.nx-root .nx-ag-steps { margin: 0; padding-left: var(--nx-s5); display: grid; gap: var(--nx-s2); }
.nx-root .nx-ag-more > summary { cursor: pointer; font-weight: 700; min-height: var(--nx-tap); display: flex; align-items: center; }
.nx-root .nx-ag-pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--nx-bg); border: 1px solid var(--nx-line); border-radius: var(--nx-r1); padding: var(--nx-s3); max-height: 360px; overflow: auto; font-family: inherit; }
.nx-root .nx-ag-recent ul { margin: 0; padding-left: var(--nx-s5); }

/* a request to use the agent, and the people picker */
.nx-root .nx-ag-req { border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s4); display: grid; gap: var(--nx-s2); background: var(--nx-surface); min-width: 0; }
.nx-root .nx-ag-req__head { display: flex; align-items: center; gap: var(--nx-s2); flex-wrap: wrap; }
.nx-root .nx-ag-req__why { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-ag-req__act { display: flex; gap: var(--nx-s2); flex-wrap: wrap; }
.nx-root .nx-ag-conf { border: 1px solid var(--nx-line); background: var(--nx-amber-soft); border-radius: var(--nx-r1); padding: var(--nx-s3); display: grid; gap: var(--nx-s2); }
.nx-root .nx-ag-pick { display: grid; gap: var(--nx-s2); min-width: 0; text-align: left; }
.nx-root .nx-ag-pick__list { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow: auto; border: 1px solid var(--nx-line); border-radius: var(--nx-r1); }
.nx-root .nx-ag-pick__row { display: flex; align-items: center; gap: var(--nx-s3); min-height: var(--nx-tap); padding: 4px var(--nx-s3); cursor: pointer; overflow-wrap: anywhere; }
.nx-root .nx-ag-pick__row:hover { background: var(--nx-hover); }
.nx-root .nx-ag-pick__tag { color: var(--nx-amber-text); font-size: var(--nx-fs-small); font-weight: 700; }
.nx-root .nx-ag-radios { border: 0; margin: 0; padding: 0; display: grid; gap: var(--nx-s1); min-width: 0; }
.nx-root .nx-ag-radio { display: flex; align-items: center; gap: var(--nx-s3); min-height: var(--nx-tap); }

/* an old component mounted inside a new section: it fills the card, its own card edge is quiet */
.nx-root .nx-ag-old { min-width: 0; }
.nx-root .nx-ag-old .ant-card { box-shadow: none; }

@media (max-width: 860px) {
  .nx-root .nx-ag-form .nx-input, .nx-root .nx-ag-form .nx-select, .nx-root .nx-ag-form .nx-textarea, .nx-root .nx-ag-pick .nx-input, .nx-root .nx-ag-ask .nx-input, .nx-root .nx-ag-note-in, .nx-root .nx-dlg .nx-input { font-size: 16px; }
  .nx-root .nx-ag-dl { grid-template-columns: 1fr; }
  .nx-root .nx-ag-dl dt { margin-top: var(--nx-s2); }
  .nx-root .nx-ag-note { flex-wrap: wrap; }
  .nx-root .nx-ag-note__act { width: 100%; }
  .nx-root .nx-ag-foot { align-items: stretch; }
  .nx-root .nx-ag-foot .nx-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-ag-chip { transition: background var(--nx-d1), border-color var(--nx-d1); }
  .nx-root .nx-ag-pick__row { transition: background var(--nx-d1); }
}

/* design note A: the one quiet safety strip, the run steps with the preview beside them, approval apart from looking after it, before and after */
.nx-root .nx-ag-strip { display: flex; align-items: center; gap: var(--nx-s2); margin: 0 0 var(--nx-s4); color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-ag-run { display: grid; gap: var(--nx-s5); min-width: 0; }
.nx-root .nx-ag-run__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: var(--nx-s5); align-items: start; }
.nx-root .nx-ag-run__grid > * { min-width: 0; }
.nx-root .nx-ag-run__side { position: sticky; top: calc(var(--nx-header-h) + 12px); }
.nx-root .nx-ag-step { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: var(--nx-s2); border-radius: 50%; background: var(--nx-blue-soft); color: var(--nx-blue-text); font-size: var(--nx-fs-small); font-weight: 800; }
.nx-root .nx-ag-acts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s3); }
.nx-root .nx-ag-acts li { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: var(--nx-s3); align-items: center; }
.nx-root .nx-ag-acts li .nx-btn { justify-self: start; }
.nx-root .nx-ag-ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nx-s4); }
.nx-root .nx-ag-ba > div { min-width: 0; }
@media (max-width: 1100px) { .nx-root .nx-ag-run__grid { grid-template-columns: minmax(0, 1fr); } .nx-root .nx-ag-run__side { position: static; } }
@media (max-width: 860px) { .nx-root .nx-ag-acts li, .nx-root .nx-ag-ba { grid-template-columns: minmax(0, 1fr); } }.nx-root .nx-ag-banner { margin-bottom: var(--nx-s4); }
.nx-root .nx-ag-strip + .nx-ag-banner { margin-top: 0; }

/* before it can go live (one card, ordered rows), the phone header menu */
.nx-root .nx-ag-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s3); }
.nx-root .nx-ag-check-row { display: flex; align-items: center; gap: var(--nx-s3); flex-wrap: wrap; }
.nx-root .nx-ag-check-row__main { flex: 1; min-width: 200px; overflow-wrap: anywhere; }
.nx-root .nx-ag-menu { display: none; position: relative; }
.nx-root .nx-ag-menu > summary { list-style: none; cursor: pointer; min-width: var(--nx-tap); }
.nx-root .nx-ag-menu > summary::-webkit-details-marker { display: none; }
.nx-root .nx-ag-menu__list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 200px; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); padding: var(--nx-s1); }
@media (max-width: 860px) {
  .nx-root .nx-ag-edit-wide { display: none; }
  .nx-root .nx-ag-menu { display: block; position: absolute; top: 0; right: 0; }
  .nx-root .nx-pillrow--agent { position: relative; padding-right: 56px; }
  .nx-root .nx-pillrow--agent { gap: var(--nx-s2); }
  .nx-root .nx-pillrow--agent .nx-dt--lg { width: 44px; height: 44px; }
  .nx-root .nx-back { margin-bottom: var(--nx-s1); }
}

/* UI redesign W14 (21 Oct 2026): Admin > Approvals and Admin > People of the redesigned look (nx-approvals.jsx, nx-people.jsx).
   Tokens only (--nx-*), every rule starts with .nx-root, motion only inside prefers-reduced-motion: no-preference, 40 px targets, no sideways page scroll (a table scrolls inside its card). */

.nx-root .nx-w14 { min-width: 0; }
.nx-root .nx-w14 .nx-chips { margin: 0; }
.nx-root .nx-w14-tabs .nx-chip b { margin-left: 8px; font-weight: 800; }
.nx-root .nx-w14-earlier { margin: var(--nx-s6) 0 0; }
.nx-root .nx-w14-back { display: inline-flex; align-items: center; min-height: var(--nx-tap); width: fit-content; }
.nx-root .nx-w14-back::before { content: "\2039"; margin-right: 6px; font-weight: 800; }

/* a row title with its department tile */
.nx-root .nx-w14-what { display: inline-flex; align-items: flex-start; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-w14-what__t { display: grid; gap: 2px; min-width: 0; }
.nx-root .nx-w14-what__t small { color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }
.nx-root .nx-w14-what__t a { overflow-wrap: anywhere; }

/* the head of one request */
.nx-root .nx-w14-head { display: flex; gap: var(--nx-s4); align-items: flex-start; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s5); box-shadow: var(--nx-shadow); }
.nx-root .nx-w14-head__main { min-width: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-w14-head__pills { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-w14-head__title { overflow-wrap: anywhere; }
.nx-root .nx-w14-head .nx-small { margin: 0; }

/* the page: the facts on the left, the decision on the right (one column under 1100 px) */
.nx-root .nx-w14-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nx-s5); align-items: start; }
.nx-root .nx-w14-main, .nx-root .nx-w14-side { min-width: 0; }
@media (min-width: 1100px) {
  .nx-root .nx-w14-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
  .nx-root .nx-w14-side { position: sticky; top: calc(var(--nx-header-h) + 12px + var(--nx-s4)); }
}
.nx-root .nx-w14-sec { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s5); box-shadow: var(--nx-shadow); display: grid; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-w14-sec > .nx-h3 { margin: 0; }
.nx-root .nx-w14-sec p { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-w14-block { display: grid; gap: var(--nx-s1); min-width: 0; }

/* facts */
.nx-root .nx-w14-defs { display: grid; grid-template-columns: minmax(110px, 170px) minmax(0, 1fr); gap: var(--nx-s2) var(--nx-s4); margin: 0; }
.nx-root .nx-w14-defs dt { color: var(--nx-muted); font-weight: 700; }
.nx-root .nx-w14-defs dd { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-w14-lines { margin: 0; padding-left: var(--nx-s5); display: grid; gap: var(--nx-s1); overflow-wrap: anywhere; }
.nx-root .nx-w14-pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--nx-bg); border: 1px solid var(--nx-line); border-radius: var(--nx-r1); padding: var(--nx-s3); margin: var(--nx-s2) 0 0; font: inherit; max-height: 320px; overflow: auto; }
.nx-root .nx-w14-pre-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.nx-root .nx-w14-step { padding: 2px 0; }

/* a notice: its word first */
.nx-root .nx-w14-note { display: flex; gap: var(--nx-s3); align-items: flex-start; border: 1px solid var(--nx-line); border-left: 4px solid var(--nx-blue); border-radius: var(--nx-r1); background: var(--nx-surface); padding: var(--nx-s3) var(--nx-s4); }
.nx-root .nx-w14-note--warn { border-left-color: var(--nx-amber); }
.nx-root .nx-w14-note--bad { border-left-color: var(--nx-danger); }
.nx-root .nx-w14-note--ok { border-left-color: var(--nx-success); }
.nx-root .nx-w14-note .nx-pill { flex: none; }
.nx-root .nx-w14-note__body { display: grid; gap: var(--nx-s2); min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-w14-note__body p { margin: 0; }

/* what it can send or change: three columns that stack */
.nx-root .nx-w14-three { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--nx-s4); }
.nx-root .nx-w14-lab { display: flex; align-items: center; gap: var(--nx-s2); font-weight: 700; margin-bottom: var(--nx-s1); }
.nx-root .nx-w14-more { border-top: 1px solid var(--nx-line); padding-top: var(--nx-s3); }
.nx-root .nx-w14-more > summary { cursor: pointer; min-height: var(--nx-tap); display: flex; align-items: center; font-weight: 700; color: var(--nx-link); }
.nx-root .nx-w14-mcp .nx-w14-lines li { list-style: disc; }

/* tests and the checklist */
.nx-root .nx-w14-counts, .nx-root .nx-w14-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-w14-counts li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); overflow-wrap: anywhere; }
.nx-root .nx-w14-checks li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s3); }
.nx-root .nx-w14-checks li > span:not(.nx-si) { flex: 1 1 14em; min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-w14-runs { display: grid; gap: var(--nx-s2); }
.nx-root .nx-w14-run { border: 1px solid var(--nx-line); border-radius: var(--nx-r1); padding: 0 var(--nx-s3); }
.nx-root .nx-w14-run > summary { cursor: pointer; min-height: var(--nx-tap); display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); overflow-wrap: anywhere; }
.nx-root .nx-w14-answer { padding: var(--nx-s2) 0 var(--nx-s3); overflow-wrap: anywhere; }
.nx-root .nx-w14-diff { display: flex; gap: var(--nx-s2); padding: 2px 0; }
.nx-root .nx-w14-diff--add > span:first-child { color: var(--nx-ok-text); font-weight: 800; }
.nx-root .nx-w14-diff--del > span:first-child { color: var(--nx-bad-text); font-weight: 800; }
.nx-root .nx-w14-ceotest { display: flex; flex-wrap: wrap; gap: var(--nx-s2); align-items: center; }

/* the old Alert and Card pieces mounted inside the new cards sit flat on them */
.nx-root .nx-w14-sec .ant-alert { border-radius: var(--nx-r1); }
.nx-root .nx-w14-sec .ant-card { box-shadow: none; }

/* who decides, the decision, the history */
.nx-root .nx-w14-who-use { border: 1px solid var(--nx-line); border-radius: var(--nx-r1); padding: var(--nx-s3); margin: 0; display: grid; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-w14-who-use legend { font-weight: 700; padding: 0 var(--nx-s2); }
.nx-root .nx-w14-radio { display: flex; align-items: flex-start; gap: var(--nx-s2); min-height: var(--nx-tap); padding: var(--nx-s2) 0; overflow-wrap: anywhere; cursor: pointer; }
.nx-root .nx-w14-radio input { margin-top: 4px; flex: none; width: 18px; height: 18px; }
.nx-root .nx-w14-people { display: grid; gap: 0; max-height: 240px; overflow: auto; padding-left: var(--nx-s5); }
.nx-root .nx-w14-warnline { color: var(--nx-amber-text); }
.nx-root .nx-w14-notelabel { font-weight: 700; }
.nx-root .nx-w14-decide .nx-textarea { min-height: 88px; }
.nx-root .nx-w14-decide .nx-approval__actions { margin-top: var(--nx-s1); }
.nx-root .nx-w14-next { background: var(--nx-blue-soft); border-radius: var(--nx-r1); padding: var(--nx-s3) var(--nx-s4); display: grid; gap: var(--nx-s1); }
.nx-root .nx-w14-time { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s3); }
.nx-root .nx-w14-time li { display: flex; gap: var(--nx-s3); align-items: flex-start; }
.nx-root .nx-w14-time li > div { min-width: 0; overflow-wrap: anywhere; }

/* the dialogs' picks (role, departments, 3D character) and the department filter */
.nx-root .nx-w14-pick { border: 0; margin: 0; padding: 0; display: grid; gap: 0; text-align: left; max-height: calc(50 * var(--ao-vh)); overflow: auto; }
.nx-root .nx-w14-pick fieldset { border: 0; margin: 0 0 var(--nx-s3); padding: 0; }
.nx-root .nx-w14-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--nx-control-line); flex: none; margin-top: 3px; }
.nx-root .nx-w14-deptfilter { display: inline-flex; align-items: center; gap: var(--nx-s3); width: fit-content; max-width: 100%; }

/* the roles page: a read-only grid of Yes and No words */
.nx-root .nx-w14-matrix { display: grid; gap: var(--nx-s3); }
.nx-root .nx-w14-mx__h { margin: 0; padding: var(--nx-s4) var(--nx-s4) 0; }
.nx-root .nx-w14-mx { min-width: 760px; }
.nx-root .nx-w14-mx__what { text-align: left; font-weight: 700; }
.nx-root .nx-w14-yn { display: inline-flex; align-items: center; gap: var(--nx-s2); white-space: nowrap; }

/* phones: the roles grid turns into one card per row, a decision card is full width, inputs are 16 px */
@media (max-width: 860px) {
  .nx-root .nx-w14-mx { min-width: 0; }
  .nx-root .nx-w14-mx thead { display: none; }
  .nx-root .nx-w14-mx tr { display: block; border-bottom: 1px solid var(--nx-line); padding: var(--nx-s3) var(--nx-s4); }
  .nx-root .nx-w14-mx td { display: flex; justify-content: space-between; gap: var(--nx-s3); padding: 2px 0; border: 0; }
  .nx-root .nx-w14-mx td::before { content: attr(data-label); color: var(--nx-muted); font-size: var(--nx-fs-small); }
  .nx-root .nx-w14-mx__what { display: block; padding: 0 0 var(--nx-s2); }
  .nx-root .nx-w14-head { padding: var(--nx-s4); }
  .nx-root .nx-w14-defs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .nx-root .nx-w14-defs dd { margin-bottom: var(--nx-s2); }
  .nx-root .nx-w14-decide .nx-approval__actions .nx-btn { flex: 1 1 100%; }
  .nx-root .nx-w14 .nx-input, .nx-root .nx-w14 .nx-select, .nx-root .nx-w14 .nx-textarea { font-size: 16px; }
  .nx-root .nx-w14-deptfilter { width: 100%; }
  .nx-root .nx-w14-deptfilter .nx-select { flex: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-w14-note, .nx-root .nx-w14-sec { animation: nx-w14-in .22s ease-out both; }
  @keyframes nx-w14-in { from { opacity: 0; } to { opacity: 1; } }
}
.nx-root .nx-w14-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s3); }
.nx-root .nx-w14-bar .nx-chips { flex: 1 1 auto; }

/* W14 approvals: tabs, a queue on the left and the request on the right (the earlier list was a table) */
.nx-root .nx-w14-tabsrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s3); }
.nx-root .nx-w14-ws { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: var(--nx-s4); align-items: start; }
.nx-root .nx-w14-queue { display: grid; gap: var(--nx-s3); min-width: 0; align-content: start; position: sticky; top: calc(var(--nx-header-h) + 12px + var(--nx-s4)); max-height: calc(calc(100 * var(--ao-vh)) - var(--nx-header-h) - 40px); overflow: auto; }
.nx-root .nx-w14-queue__bar { display: grid; gap: var(--nx-s2); }
.nx-root .nx-w14-queue__bar .nx-input { min-width: 0; width: 100%; }
.nx-root .nx-w14-queue__bar .nx-select { width: 100%; }
.nx-root .nx-w14-q { list-style: none; margin: 0; padding: 0; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); overflow: hidden; }
.nx-root .nx-w14-q li { border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-w14-q li:last-child { border-bottom: 0; }
.nx-root .nx-w14-q__it { display: flex; gap: var(--nx-s3); align-items: flex-start; width: 100%; min-height: var(--nx-tap); text-align: left; padding: var(--nx-s3) var(--nx-s4); background: transparent; border: 0; color: var(--nx-text); font: inherit; cursor: pointer; }
.nx-root .nx-w14-q__it:hover { background: var(--nx-hover); }
.nx-root .nx-w14-q__it[aria-current="true"] { background: var(--nx-blue-soft); box-shadow: inset 3px 0 0 var(--nx-blue); }
.nx-root .nx-w14-q__t { display: grid; gap: 4px; min-width: 0; }
.nx-root .nx-w14-q__t b { overflow-wrap: anywhere; }
.nx-root .nx-w14-q__t small { color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }
.nx-root .nx-w14-q__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.nx-root .nx-w14-pane { min-width: 0; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s5); box-shadow: var(--nx-shadow); }
.nx-root .nx-w14-pane .nx-w14-sec, .nx-root .nx-w14-pane .nx-w14-head { box-shadow: none; }
.nx-root .nx-w14-pane .nx-w14-head { padding: 0 0 var(--nx-s3); border: 0; border-bottom: 1px solid var(--nx-line); border-radius: 0; background: transparent; }
.nx-root .nx-w14-back--phone { display: none; }
@media (max-width: 1100px) { .nx-root .nx-w14-ws { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); } }

/* the signature card: What changes */
.nx-root .nx-w14-wch { border: 1.5px solid var(--nx-line); border-radius: var(--nx-r2); overflow: hidden; background: var(--nx-surface); }
.nx-root .nx-w14-wch__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nx-s2) var(--nx-s3); padding: var(--nx-s3) var(--nx-s4); background: var(--nx-blue-soft); }
.nx-root .nx-w14-wch__h .nx-h3 { margin: 0; }
.nx-root .nx-w14-wch__rows { list-style: none; margin: 0; padding: 0; }
.nx-root .nx-w14-wch__r { display: grid; grid-template-columns: minmax(110px, 170px) minmax(0, 1fr) 24px minmax(0, 1fr); gap: var(--nx-s3); align-items: center; padding: var(--nx-s3) var(--nx-s4); border-top: 1px solid var(--nx-line); overflow-wrap: anywhere; }
.nx-root .nx-w14-wch__k { color: var(--nx-muted); font-size: var(--nx-fs-small); font-weight: 700; }
.nx-root .nx-w14-wch__a { text-align: center; color: var(--nx-muted); }
.nx-root .nx-w14-new { display: inline-block; margin-left: var(--nx-s2); padding: 1px 8px; border-radius: 6px; background: var(--nx-amber-soft); color: var(--nx-amber-text); font-size: 12px; font-weight: 800; }
.nx-root .nx-w14-wch__f { margin: 0; padding: var(--nx-s3) var(--nx-s4); border-top: 1px solid var(--nx-line); }
.nx-root .nx-w14-cc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--nx-s4); }

/* the decision bar: in the page on a wide screen, pinned above the bottom bar on a phone */
.nx-root .nx-w14-decbar { display: grid; gap: var(--nx-s2); }

@media (max-width: 860px) {
  .nx-root .nx-w14-ws { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-w14-ws.is-detail .nx-w14-queue { display: none; }
  .nx-root .nx-w14-ws:not(.is-detail) .nx-w14-pane { display: none; }
  .nx-root .nx-w14-tabsrow.is-detail { display: none; }
  .nx-root .nx-w14-queue { position: static; max-height: none; overflow: visible; }
  .nx-root .nx-w14-pane { padding: var(--nx-s4); }
  .nx-root .nx-w14-back--phone { display: inline-flex; }
  .nx-root .nx-w14-wch__r { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .nx-root .nx-w14-wch__a { display: none; }
  .nx-root .nx-w14-req { padding-bottom: 200px; }
  .nx-root .nx-w14-decbar { position: fixed; left: 0; right: 0; bottom: calc(var(--nx-bar-h) + env(safe-area-inset-bottom)); z-index: 850; background: var(--nx-surface); border-top: 1px solid var(--nx-line); padding: var(--nx-s3) var(--nx-s4); box-shadow: 0 -6px 18px var(--nx-line); }
  .nx-root .nx-w14-decbar .nx-textarea { min-height: 48px; }
  .nx-root .nx-w14-decbar .nx-approval__actions { flex-wrap: nowrap; }
  .nx-root .nx-w14-decbar .nx-approval__actions .nx-btn { flex: 1 1 0; padding: 0 var(--nx-s2); }
  .nx-root .nx-w14-decbar .nx-small { font-size: 12px; margin: 0; }
}

/* W14 people: the person sheet, the bulk preview, Add person, the saved view */
.nx-root .nx-w14-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s3) var(--nx-s5); }
.nx-root .nx-w14-sheet, .nx-root .nx-w14-bulk, .nx-root .nx-w14-add { display: grid; gap: var(--nx-s3); text-align: left; min-width: 0; max-height: calc(60 * var(--ao-vh)); overflow: auto; }
.nx-root .nx-w14-bulk__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--nx-line); border-radius: var(--nx-r1); }
.nx-root .nx-w14-bulk__list li { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s3); padding: var(--nx-s3); border-bottom: 1px solid var(--nx-line); overflow-wrap: anywhere; }
.nx-root .nx-w14-bulk__list li:last-child { border-bottom: 0; }
.nx-root .nx-w14-field { display: grid; gap: 4px; font-weight: 700; }
.nx-root .nx-w14-field .nx-input, .nx-root .nx-w14-field .nx-select { font-weight: 400; width: 100%; }
.nx-root .nx-w14-safe { text-align: center; color: var(--nx-muted); font-size: var(--nx-fs-small); margin: 0; }
@media (max-width: 860px) { .nx-root .nx-w14-sheet, .nx-root .nx-w14-bulk, .nx-root .nx-w14-add { max-height: calc(55 * var(--ao-vh)); } .nx-root .nx-w14-add .nx-input, .nx-root .nx-w14-add .nx-select, .nx-root .nx-w14-bulk .nx-select { font-size: 16px; } }

@media (max-width: 860px) {
  .nx-root .nx-w14-statwrap.is-detail { display: none; }
  .nx-root .nx-w14 .nx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.nx-root a.nx-w14-q__it { text-decoration: none; box-sizing: border-box; }

@media (max-width: 860px) {
  .nx-root .nx-w14-decbar .nx-textarea { height: 56px; min-height: 48px; }
  .nx-root .nx-w14-decbar .nx-w14-notelabel { font-size: var(--nx-fs-small); }
  .nx-root .nx-w14-req { padding-bottom: 170px; }
}

/* WHAT KIND OF REQUEST (Decisions, 26 Oct 2026): each kind has its own picture and colour on the tile and the header; the small status icons say what the row says. Colour never stands alone. */
.nx-root .nx-dt--k-violet { --dt-a: var(--nx-w10-kind-violet-a); --dt-b: var(--nx-w10-kind-violet-b); }
.nx-root .nx-dt--k-indigo { --dt-a: var(--nx-w10-kind-indigo-a); --dt-b: var(--nx-w10-kind-indigo-b); }
.nx-root .nx-dt--k-sky { --dt-a: var(--nx-w10-kind-sky-a); --dt-b: var(--nx-w10-kind-sky-b); }
.nx-root .nx-dt--k-cyan { --dt-a: var(--nx-w10-kind-cyan-a); --dt-b: var(--nx-w10-kind-cyan-b); }
.nx-root .nx-dt--k-orange { --dt-a: var(--nx-w10-kind-orange-a); --dt-b: var(--nx-w10-kind-orange-b); }
.nx-root .nx-dt--k-amber { --dt-a: var(--nx-w10-kind-amber-a); --dt-b: var(--nx-w10-kind-amber-b); }
.nx-root .nx-dt--k-blue { --dt-a: var(--nx-w10-kind-blue-a); --dt-b: var(--nx-w10-kind-blue-b); }
.nx-root .nx-dt--k-magenta { --dt-a: var(--nx-w10-kind-magenta-a); --dt-b: var(--nx-w10-kind-magenta-b); }
.nx-root .nx-dt--k-teal { --dt-a: var(--nx-w10-kind-teal-a); --dt-b: var(--nx-w10-kind-teal-b); }
.nx-root .nx-dt--k-red { --dt-a: var(--nx-w10-kind-red-a); --dt-b: var(--nx-w10-kind-red-b); }
.nx-root .nx-dt--k-gold { --dt-a: var(--nx-w10-kind-gold-a); --dt-b: var(--nx-w10-kind-gold-b); }
.nx-root .nx-dt--k-rose { --dt-a: var(--nx-w10-kind-rose-a); --dt-b: var(--nx-w10-kind-rose-b); }
.nx-root .nx-dt--k-slate { --dt-a: var(--nx-w10-kind-slate-a); --dt-b: var(--nx-w10-kind-slate-b); }
.nx-root .nx-dt--k-green { --dt-a: var(--nx-w10-kind-green-a); --dt-b: var(--nx-w10-kind-green-b); }
.nx-root .nx-dt--k-gray { --dt-a: var(--nx-w10-kind-gray-a); --dt-b: var(--nx-w10-kind-gray-b); }
.nx-root .nx-kf-row { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nx-root .nx-kf { display: inline-flex; align-items: center; gap: 3px; min-width: 26px; height: 26px; padding: 0 6px; justify-content: center; border-radius: 13px; border: 1px solid var(--nx-line); color: var(--nx-muted); font-size: 12px; background: var(--nx-surface); }
.nx-root .nx-kf .nx-gl { --gls: 15; }
.nx-root .nx-kf b { font-weight: 800; }
.nx-root .nx-kf--warn { color: var(--nx-amber-text); border-color: var(--nx-amber); background: var(--nx-amber-soft); }
.nx-root .nx-kf--bad { color: var(--nx-bad-text); border-color: var(--nx-danger); background: color-mix(in srgb, var(--nx-danger) 12%, var(--nx-surface)); }
.nx-root .nx-w14-q__pills .nx-pill .nx-gl { --gls: 14; vertical-align: -2px; }
.nx-root .nx-kchips { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--nx-s2) var(--nx-s3); }
.nx-root .nx-kchip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--nx-tap); padding: 0 12px; border-radius: 999px; border: 1px solid var(--nx-line); background: transparent; color: var(--nx-text); font: inherit; font-weight: 700; cursor: pointer; }
.nx-root .nx-kchip b { font-size: 12px; color: var(--nx-muted); }
.nx-root .nx-kchip[aria-pressed="true"] { background: var(--nx-blue-soft); color: var(--nx-blue-text); border-color: var(--nx-blue); }
.nx-root .nx-kchip:focus-visible { outline: 2px solid var(--nx-blue); outline-offset: 2px; }
.nx-root .nx-kap { margin: 0; font-size: 17px; line-height: 26px; }
.nx-root .nx-kap__flags { margin: var(--nx-s2) 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.nx-root .nx-adm-confirm--named { border-left: 4px solid var(--nx-amber); }
/* the plain summary at the top of a waiting request: one verdict chip, then what exists / what is asked / if you approve (nx-approvals.jsx Summary); the colour of the left edge repeats the chip, never alone */
.nx-root .nx-sum { display: grid; gap: var(--nx-s2); padding: var(--nx-s3) var(--nx-s4); border-radius: var(--nx-r1); border-left: 4px solid var(--nx-muted); background: var(--nx-hover); }
.nx-root .nx-sum--ok { border-left-color: var(--nx-ok-text); }
.nx-root .nx-sum--warn { border-left-color: var(--nx-amber); }
.nx-root .nx-sum--bad { border-left-color: var(--nx-bad-text); }
.nx-root .nx-sum__v { margin: 0; }
.nx-root .nx-sum__v .nx-pill { white-space: normal; max-width: 100%; height: auto; text-align: left; }
.nx-root .nx-sum__r { margin: 0; line-height: 24px; overflow-wrap: anywhere; }
.nx-root .nx-sum__r b { display: block; font-size: var(--nx-fs-small); color: var(--nx-muted); font-weight: 600; }
.nx-root .nx-sum--c { margin-top: 4px; padding: var(--nx-s2) var(--nx-s3); gap: 4px; }
.nx-root .nx-sum--c .nx-sum__r { font-size: var(--nx-fs-small); line-height: 20px; }
.nx-root .nx-sum--c .nx-sum__r b { display: inline; }

/* POLISH (nx-w15, 21 Oct 2026): small fixes the reviewers asked for after looking at screenshots. Front end only, no change of behaviour.
   Every rule starts with .nx-root and takes its colours from the --nx-* tokens only, so all themes follow. Motion is only declared inside prefers-reduced-motion: no-preference.
   Targets are 40 px (var(--nx-tap)) and the focus ring is the shell's own. Added LAST in web/build.mjs after the last nx-w*.css line.
   Parts: 1 statistic tiles, 2 Home, 3 Agents filter sheet, 4 Work tabs, 5 bars above the phone bottom bar, 6 menu, 7 Mail. */

/* ---------------------------------------------------------------- 5. shared: the room the phone bottom bar takes (the bar itself is nx.css .nx-bar, --nx-bar-h tall)
   --nx-bar-clear = the bar plus the safe area under it. Anything that sticks to the bottom of the screen on a phone sits this far up, never under the bar. */
.nx-root { --nx-bar-clear: calc(var(--nx-bar-h) + env(safe-area-inset-bottom, 0px)); }

/* ---------------------------------------------------------------- 1. statistic tiles */
/* Home: ONE slim strip. Four numbers in a row on a wide screen, 56 px high, the label on one line; 2 x 2 under 1000 px. The foot (change, sub line) moves to the tile's tooltip. */
.nx-root .nx-stats--compact { gap: var(--nx-s3); margin-bottom: var(--nx-s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nx-root .nx-stats--compact .nx-stat { min-height: 56px; padding: 6px var(--nx-s4); display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--nx-s3); row-gap: 0; align-content: center; align-items: center; box-shadow: none; }
.nx-root .nx-stats--compact .nx-stat__top { display: contents; }
.nx-root .nx-stats--compact .nx-stat__ico { grid-column: 1; grid-row: 1 / span 2; }
.nx-root .nx-stats--compact .nx-stat__label { grid-column: 2; grid-row: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; line-height: 1.25; display: block; min-height: 0; }
.nx-root .nx-stats--compact .nx-stat__value { grid-column: 2; grid-row: 2; font-size: 22px; line-height: 1.15; min-height: 0; letter-spacing: 0; }
.nx-root .nx-stats--compact .nx-stat__foot { display: none; }
.nx-root .nx-stats--compact .nx-skel--num { height: 22px; }
@media (min-width: 1000px) {
  .nx-root .nx-stats--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Home under 560 px: the composer comes ABOVE the tiles. The split row dissolves into its children, so the composer, the tiles, then what needs you can be put in that order. */
.nx-root .nx-home { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 560px) {
  .nx-root .nx-home > .nx-home__top { display: contents; }
  .nx-root .nx-home__top > .nx-stack { order: 1; margin-bottom: var(--nx-s4); }
  .nx-root .nx-home > .nx-stats { order: 2; }
  .nx-root .nx-home__top > .nx-split__side { order: 3; }
  .nx-root .nx-home > .nx-home__calm { order: 2; }
  .nx-root .nx-home > :not(.nx-stats):not(.nx-home__top):not(.nx-home__calm) { order: 4; }
}
/* under 560 px every row of tiles is 2 x 2 and compact: a smaller number and a one line label (the Home strip, Work > Dashboards, the profile, the Approvals tiles) */
@media (max-width: 560px) {
  .nx-root .nx-stats, .nx-root .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nx-s2); margin-bottom: var(--nx-s4); }
  .nx-root .nx-stats .nx-stat { padding: var(--nx-s2) var(--nx-s3); gap: 2px; }
  .nx-root .nx-stats .nx-stat__top { gap: var(--nx-s2); }
  .nx-root .nx-stats .nx-stat__ico { width: 24px; height: 24px; border-radius: 7px; }
  .nx-root .nx-stats .nx-stat__svg { width: 16px; height: 16px; }
  .nx-root .nx-stats .nx-stat__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; display: block; }
  .nx-root .nx-stats .nx-stat__value { font-size: 20px; min-height: 0; }
  .nx-root .nx-stats .nx-stat__foot { flex-wrap: nowrap; min-height: 0; overflow: hidden; }
  .nx-root .nx-stats .nx-stat__foot > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .nx-root .nx-stats--compact .nx-stat { min-height: 52px; padding: 6px var(--nx-s3); column-gap: var(--nx-s2); grid-template-columns: 24px minmax(0, 1fr); }
  .nx-root .nx-stats--compact .nx-stat__value { font-size: 18px; }
  .nx-root .stats .stat { padding: var(--nx-s2) var(--nx-s3); }
  .nx-root .stats .stat-v { font-size: 20px; }
  .nx-root .stats .stat-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}

/* ---------------------------------------------------------------- 2. Home */
/* nothing waits: one quiet line under the strip, and the composer takes the width (880 px, centred); when items wait the two columns stay */
.nx-root .nx-home__calm { margin: 0 0 var(--nx-s3); display: flex; align-items: center; gap: var(--nx-s2); color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-home__calm span { color: var(--nx-ok-text); font-weight: 800; }
.nx-root .nx-split--solo { grid-template-columns: minmax(0, 880px); justify-content: center; }
.nx-root .nx-split--solo .nx-cmp-wrap { max-width: 880px; }
/* the draft the person left behind: one small line above the box, not a card */
.nx-root .nx-cmp__draft { display: inline-flex; align-items: center; align-self: flex-start; max-width: 100%; gap: 0; padding: 0 0 0 var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); background: var(--nx-blue-soft); color: var(--nx-blue-text); font-size: var(--nx-fs-small); }
.nx-root .nx-cmp__draftb { min-height: var(--nx-tap); padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 800; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-cmp__draftt { font-weight: 600; color: var(--nx-muted); }
.nx-root .nx-cmp__draft .nx-cmp__x { color: var(--nx-blue-text); }
/* the safety line: always there, always quiet */
.nx-root .nx-cmp__safety { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--nx-muted); font-size: var(--nx-fs-small); text-align: center; }
/* Recent work: the whole headline is the click target; Open stays the one button; Run again and Ask a follow-up are quiet links (one ... menu on a phone) */
.nx-root .nx-rw:not(.nx-rw--check) { position: relative; }
.nx-root .nx-rw__title::after { content: ""; position: absolute; inset: 0; border-radius: var(--nx-r2); }
.nx-root .nx-rw__title:focus-visible { outline: none; }
.nx-root .nx-rw__title:focus-visible::after { outline: var(--nx-focus-ring); outline-offset: -2px; }
.nx-root .nx-rw:not(.nx-rw--check):hover { background: var(--nx-hover); }
.nx-root .nx-rw__acts { position: relative; z-index: 1; align-items: center; }
.nx-root .nx-rw__quiet { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--nx-s2); }
.nx-root .nx-rw__ql { min-height: var(--nx-tap); padding: 0 var(--nx-s2); border: 0; border-radius: var(--nx-r1); background: none; color: var(--nx-blue-text); font: inherit; font-size: var(--nx-fs-small); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nx-root .nx-rw__ql:hover:not(:disabled) { background: var(--nx-hover); }
.nx-root .nx-rw__ql:disabled { color: var(--nx-muted); cursor: default; }
.nx-root .nx-rw__more { display: none; }
@media (max-width: 640px) {
  .nx-root .nx-rw__quiet { display: none; }
  .nx-root .nx-rw__more { display: inline-flex; }
  .nx-root .nx-rw__acts { flex-wrap: nowrap; }
}

/* ---------------------------------------------------------------- 3. Agents list on a phone: ONE Filters button and a bottom sheet (nx-agents.jsx, nx-dialog.jsx) */
.nx-root .nx-filterbtn { gap: var(--nx-s2); min-height: var(--nx-tap); }
.nx-root .nx-filterbtn .nx-count { margin: 0; }
.nx-root .nx-fsheet { display: grid; gap: var(--nx-s3); text-align: left; }
.nx-root .nx-fsheet__f { display: grid; gap: var(--nx-s1); color: var(--nx-muted); font-size: var(--nx-fs-small); font-weight: 700; }
.nx-root .nx-fsheet__f .nx-select { width: 100%; min-height: var(--nx-tap); font-size: 16px; }

/* ---------------------------------------------------------------- 4. Work tabs and NxTabs: up to 860 px ONE line that scrolls sideways, More last (it opens a sheet) */
.nx-root .nx-more__btn { background: none; border-top: 0; border-left: 0; border-right: 0; font-family: inherit; font-size: inherit; cursor: pointer; flex: none; }
.nx-root .nx-more__btn::after { content: '\25BE'; margin-left: 4px; }
.nx-root .nx-more__sheet { display: grid; gap: 2px; }
.nx-root .nx-more__sheet .nx-menu__item { display: flex; align-items: center; min-height: var(--nx-tap); text-decoration: none; }
.nx-root .nx-more__sheet .nx-menu__item[aria-current="page"] { font-weight: 800; background: var(--nx-hover); }
@media (max-width: 860px) {
  .nx-root .nx-tabs, .nx-root .nx-tabs--more, .nx-root .nx-w6-tabs .nx-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .nx-root .nx-tabs::-webkit-scrollbar { display: none; }
  .nx-root .nx-tabs > .nx-tab, .nx-root .nx-tabs > .nx-more { flex: none; }
  .nx-root .nx-tabs--more .nx-more__btn { margin-left: auto; }
}

/* ---------------------------------------------------------------- 5. bars that stick to the bottom of the screen sit ABOVE the phone bottom bar, with the safe area under them.
   --nx-bar-clear (top of this file) is the height to keep clear. A new bar uses the class .nx-stickybar (an approve / decline bar, a chat box): it sticks at the bottom of the page on a wide screen
   and above the bottom bar on a phone. */
.nx-root .nx-stickybar { position: sticky; bottom: 0; z-index: 5; padding: var(--nx-s3) 0 calc(var(--nx-s3) + env(safe-area-inset-bottom, 0px)); background: var(--nx-bg); border-top: 1px solid var(--nx-line); }
@media (max-width: 860px) {
  .nx-root .nx-stickybar, .nx-root .asx-dock { bottom: var(--nx-bar-clear); }
  .nx-root .asx-dock { padding-bottom: var(--nx-s3); }
  .nx-root .nx-selbar { bottom: calc(var(--nx-bar-clear) + var(--nx-s3)); }
  .nx-root .nx-ftoasts { bottom: calc(var(--nx-bar-clear) + 88px); }
  .nx-root .new-version { bottom: calc(var(--nx-bar-clear) + var(--nx-s2)); }
}

/* ---------------------------------------------------------------- 6. the menu drawer: the open place shows its pill only; the focus ring is for the keyboard (:focus-visible) */
.nx-root .nx-side[tabindex="-1"]:focus { outline: none; }
.nx-root .nx-side .nx-nav[aria-current="page"]:focus:not(:focus-visible) { outline: none; }
/* W6b, the account menu, the ONE Profile page and the profile photo (nx-shell.jsx ProfileMenu, nx-profile.jsx, nx-avatar.jsx, nx-photo.jsx, nx-help.jsx).
   Every rule starts with .nx-root (qa-2026-10-21-nx-css-scoped) and takes its colours from the --nx-* tokens only, so all seven themes follow (tools/nx-contrast.mjs has the W6b pairs).
   Motion is only declared inside prefers-reduced-motion: no-preference. A state is never colour alone (a word or a shape goes with it). Targets are 40 px (--nx-tap).
   Responsive: 320 to 2560 px; the hero stacks at 860 px and under; the tab bar scrolls inside its own bar; fields are 16 px at 860 px and under. Add this file to web/build.mjs after nx-w10.css. */

/* ---------------------------------------------------------------- the person's picture: a photo, or the first letter on a disc in the theme colour */
.nx-root .nx-pic { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--nx-blue); color: var(--nx-on-blue); font-weight: 800; line-height: 1; overflow: hidden; user-select: none; vertical-align: middle; }
.nx-root img.nx-pic--photo { display: block; object-fit: cover; background: var(--nx-hover); }
.nx-root .nx-pic--xs { width: 22px; height: 22px; font-size: 11px; }
.nx-root .nx-pic--s { width: 34px; height: 34px; font-size: 15px; }
.nx-root .nx-pic--m { width: 48px; height: 48px; font-size: 20px; }
.nx-root .nx-pic--l { width: 72px; height: 72px; font-size: 30px; }
.nx-root .nx-pic--xl { width: 112px; height: 112px; font-size: 42px; }

/* the picture as a button with its small camera chip */
.nx-root .nx-avbtn { position: relative; display: inline-block; flex: none; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; font: inherit; color: inherit; line-height: 0; }
.nx-root .nx-avbtn:focus-visible { border-radius: 50%; outline-offset: 3px; }
.nx-root .nx-avbtn__cam { position: absolute; right: -3px; bottom: -3px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--nx-blue); color: var(--nx-on-blue); border: 2px solid var(--nx-surface); }
.nx-root .nx-avbtn__cam svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-avbtn--m .nx-avbtn__cam { width: 22px; height: 22px; right: -4px; bottom: -4px; }
.nx-root .nx-avbtn--m .nx-avbtn__cam svg { width: 12px; height: 12px; }
.nx-root .nx-avbtn--xl .nx-pic { border: 5px solid var(--nx-surface); box-shadow: var(--nx-shadow); width: 112px; height: 112px; }
.nx-root .nx-avbtn--xl .nx-avbtn__cam { width: 34px; height: 34px; right: 2px; bottom: 2px; }
.nx-root .nx-avbtn--xl .nx-avbtn__cam svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- the account menu: a card and three rows */
.nx-root .nx-menu--account { width: min(320px, calc(calc(100 * var(--ao-vw)) - 24px)); min-width: min(280px, calc(calc(100 * var(--ao-vw)) - 24px)); }
.nx-root .nx-ucard { display: flex; align-items: center; gap: var(--nx-s3); padding: var(--nx-s2) var(--nx-s2) var(--nx-s3); margin-bottom: var(--nx-s1); border-bottom: 1px solid var(--nx-line); min-width: 0; }
.nx-root .nx-ucard__text { display: grid; gap: 1px; min-width: 0; }
.nx-root .nx-ucard__text b { font-size: 16px; overflow-wrap: anywhere; }
.nx-root .nx-ucard__text small { color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }
.nx-root .nx-menu__ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--nx-blue-text); }
.nx-root .nx-menu__item--danger .nx-menu__ico { color: var(--nx-bad-text); }
.nx-root .nx-menu--account .nx-menu__item { font-weight: 600; }

/* ---------------------------------------------------------------- the hero: a cover in the theme colours, the photo, the name */
.nx-root .nx-w6b-hero { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); overflow: hidden; margin: 0 0 var(--nx-s5); }
.nx-root .nx-w6b-cover { height: 132px; background: var(--nx-pill); position: relative; overflow: hidden; }
.nx-root .nx-w6b-cover::before, .nx-root .nx-w6b-cover::after { content: ""; position: absolute; border-radius: 50%; background: color-mix(in srgb, var(--nx-pill-text) 14%, transparent); }
.nx-root .nx-w6b-cover::before { width: 260px; height: 260px; right: -60px; top: -120px; }
.nx-root .nx-w6b-cover::after { width: 160px; height: 160px; left: 12%; bottom: -100px; }
.nx-root .nx-w6b-hero__body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--nx-s2) var(--nx-s5); align-items: end; padding: 0 var(--nx-s6) var(--nx-s5); }
.nx-root .nx-w6b-hero__av { margin-top: -56px; line-height: 0; }
.nx-root .nx-w6b-hero__who { display: grid; gap: var(--nx-s2); min-width: 0; padding-top: var(--nx-s3); }
.nx-root .nx-w6b-name { margin: 0; font-size: var(--nx-fs-h1); line-height: 1.2; font-weight: 800; overflow-wrap: anywhere; }
.nx-root .nx-w6b-meta { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-w6b-mail { color: var(--nx-muted); overflow-wrap: anywhere; }
.nx-root .nx-w6b-mail small { font-size: var(--nx-fs-small); }
.nx-root .nx-w6b-hero__btn { align-self: center; }

/* three real numbers */
.nx-root .nx-w6b-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: var(--nx-s3); }
.nx-root .nx-w6b-tile { display: grid; gap: 2px; align-content: start; min-width: 0; padding: var(--nx-s3) var(--nx-s4); border-radius: var(--nx-r1); background: var(--nx-blue-soft); }
.nx-root .nx-w6b-tile b { font-size: var(--nx-fs-h2); line-height: 1.2; font-weight: 800; color: var(--nx-blue-text); overflow-wrap: anywhere; }
.nx-root .nx-w6b-tile span { color: var(--nx-text); font-weight: 600; overflow-wrap: anywhere; }
.nx-root .nx-w6b-tile small { color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }

/* the tab bar scrolls inside its own bar (no wrapping onto a second row, no page scroll) */
.nx-root .nx-w6-tabs .nx-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.nx-root .nx-w6-tabs .nx-tab { flex: none; }

/* ---------------------------------------------------------------- the photo dialog */
.nx-root .nx-ph { display: grid; gap: var(--nx-s3); justify-items: center; width: 100%; min-width: 0; }
.nx-root .nx-ph__drop { width: 100%; display: grid; gap: var(--nx-s3); justify-items: center; text-align: center; padding: var(--nx-s6) var(--nx-s4); border: 2px dashed var(--nx-control-line); border-radius: var(--nx-r2); }
.nx-root .nx-ph__drop.is-over { border-color: var(--nx-blue); background: var(--nx-blue-soft); }
.nx-root .nx-ph__hint { margin: 0; color: var(--nx-muted); font-size: var(--nx-fs-small); text-align: center; overflow-wrap: anywhere; }
.nx-root .nx-ph__stage { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--nx-s4); max-width: 100%; }
.nx-root .nx-ph__crop { position: relative; border-radius: 50%; overflow: hidden; background: var(--nx-hover); touch-action: none; cursor: grab; box-shadow: 0 0 0 2px var(--nx-line); max-width: 100%; }
.nx-root .nx-ph__crop:active { cursor: grabbing; }
.nx-root .nx-ph__crop:focus-visible { border-radius: 50%; outline-offset: 4px; }
.nx-root .nx-ph__crop canvas { display: block; max-width: 100%; }
.nx-root .nx-ph__preview { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--nx-line); background: var(--nx-hover); flex: none; }
.nx-root .nx-ph__zoom { display: flex; align-items: center; gap: var(--nx-s3); width: 100%; min-height: var(--nx-tap); font-weight: 600; }
.nx-root .nx-ph__zoom input { flex: 1; min-width: 0; accent-color: var(--nx-blue); min-height: var(--nx-tap); }
.nx-root .nx-ph__msg { width: 100%; margin: 0; padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r1); background: var(--nx-bad-soft); color: var(--nx-bad-text); font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.nx-root .nx-ph__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--nx-s2); width: 100%; }
.nx-root .nx-ph__remove { margin-right: auto; }

/* ---------------------------------------------------------------- narrow: the hero stacks, fields are 16 px, targets stay 40 px */
@media (max-width: 860px) {
  .nx-root .nx-w6b-cover { height: 96px; }
  .nx-root .nx-w6b-hero__body { grid-template-columns: minmax(0, 1fr); padding: 0 var(--nx-s4) var(--nx-s4); gap: var(--nx-s3); }
  .nx-root .nx-w6b-hero__av { margin-top: -48px; }
  .nx-root .nx-avbtn--xl .nx-pic { width: 96px; height: 96px; font-size: 36px; }
  .nx-root .nx-w6b-hero__btn { width: 100%; }
  .nx-root .nx-w6 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .nx-root .nx-w6 textarea, .nx-root .nx-w6 select { font-size: 16px; }
  .nx-root .nx-ph__acts .nx-btn { flex: 1 1 auto; }
}
@media (max-width: 420px) {
  .nx-root .nx-ph__remove { margin-right: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-avbtn__cam { transition: transform var(--nx-d1); }
  .nx-root .nx-avbtn:hover .nx-avbtn__cam { transform: scale(1.12); }
  .nx-root .nx-ph__drop { transition: border-color var(--nx-d2), background var(--nx-d2); }
}

/* an owner or a person in a list: a small round picture before the name; a chip that holds a photo shows only the photo */
.nx-root .nx-pic--fill { width: 100%; height: 100%; }
.nx-root .nx-who__o { display: inline-flex; align-items: center; gap: var(--nx-s2); vertical-align: middle; }
.nx-root .nx-av:has(.nx-pic--photo) { overflow: hidden; padding: 0; }

/* ---------------------------------------------------------------- THE COMPANY LOGO of the menu column (nx-company.jsx): a white rounded plate, the full logo when the menu is open, the short mark on the small rail */
.nx-root .nx-brand--co { display: grid; gap: 0; padding: 2px 4px 14px; margin: 2px 0 6px; justify-items: stretch; text-decoration: none; }
.nx-root .nx-lgp { display: flex; align-items: center; justify-content: center; height: 58px; padding: 6px 10px; border-radius: 14px; background: var(--nx-plate); border: 1px solid var(--nx-side-line); overflow: hidden; min-width: 0; }
.nx-root .nx-lgp img { max-width: 100%; object-fit: contain; }
.nx-root .nx-lgp__full { display: block; }
.nx-root .nx-lgp__full { max-height: 42px; }
.nx-root .nx-lgp__mark { display: none; max-height: 34px; }
.nx-root .nx-lgap { display: block; padding: 7px 6px 0; font-size: var(--nx-fs-small); font-weight: 700; letter-spacing: .02em; color: var(--nx-side-text); white-space: nowrap; overflow: hidden; }
.nx-root.nx-shell:not(.is-open) .nx-side:not(:hover):not(:has(:focus-visible)) .nx-lgp__full { display: none; }
.nx-root.nx-shell:not(.is-open) .nx-side:not(:hover):not(:has(:focus-visible)) .nx-lgp__mark { display: block; }
.nx-root.nx-shell:not(.is-open) .nx-side:not(:hover):not(:has(:focus-visible)) .nx-lgap { display: none; }
.nx-root.nx-shell:not(.is-open) .nx-side:not(:hover):not(:has(:focus-visible)) .nx-brand--co { padding-left: 0; padding-right: 0; }
.nx-root.nx-shell:not(.is-open) .nx-side:not(:hover):not(:has(:focus-visible)) .nx-lgp { height: 48px; padding: 4px; }
.nx-root .nx-brand--co:focus-visible { outline-offset: 2px; border-radius: 14px; }
/* under 860 px the header carries the short mark in a small plate (the menu is the bottom bar there) */
.nx-root .nx-header__mark--co { width: auto; height: var(--nx-tap); }
.nx-root .nx-lgp--bar { border-color: var(--nx-line); height: var(--nx-tap); min-width: var(--nx-tap); padding: 3px 6px; border-radius: 12px; }
.nx-root .nx-lgp--bar .nx-lgp__markonly { max-height: 28px; max-width: 44px; }

/* Help and feedback: the cards sit side by side and fill the screen height on a wide screen, so the short page has no blank strip */
.nx-root .nx-w6b-help { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--nx-s5); align-items: stretch; min-width: 0; }
.nx-root .nx-w6b-help > * { min-width: 0; }
.nx-root .nx-w6b-kbd { display: inline-flex; align-items: center; min-height: var(--nx-tap); padding: 0 var(--nx-s3); border: 1px solid var(--nx-control-line); border-radius: var(--nx-r1); background: var(--nx-hover); color: var(--nx-text); font: inherit; font-weight: 700; }
@media (min-width: 861px) {
  .nx-root .nx-w6b-help { grid-auto-rows: 1fr; min-height: calc(calc(100 * var(--ao-vh)) - 250px); }
  .nx-root .nx-w6b-help > :last-child { grid-column: 1 / -1; }
}
/* CR-036: the agent's own picture. In its tile (every list, chat header and search result) the picture fills the rounded square; on the agent page the tile has the small camera button. */
.nx-root .nx-dt--photo { padding: 0; overflow: hidden; background: var(--nx-surface); }
.nx-root .nx-dt--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nx-root .nx-avbtn--tile { border-radius: 14px; }
.nx-root .nx-avbtn--tile .nx-avbtn__cam { width: 24px; height: 24px; right: -5px; bottom: -5px; }
.nx-root .nx-avbtn--tile:focus-visible { border-radius: 14px; }

/* W16 (21 Oct 2026): the redesigned LIBRARY (web/src/nx-library.jsx, nx-howto.jsx). Every rule starts with .nx-root and uses only --nx-* tokens (qa-2026-10-21-nx-css-scoped, nx-themes).
   Motion lives only in the prefers-reduced-motion: no-preference block at the end. Targets are 40 px; inputs are 16 px up to 860 px; nothing makes the page scroll sideways. */

/* the search row, the type chips, the filters */
.nx-root .nx-w16-bar { display: flex; flex-wrap: wrap; gap: var(--nx-s3); align-items: center; margin: var(--nx-s4) 0 var(--nx-s3); }
.nx-root .nx-w16-bar .nx-w16-search { flex: 1 1 320px; min-width: 0; }
.nx-root .nx-w16-noadd { margin: 0 0 var(--nx-s3); }
.nx-root .nx-w16-types, .nx-root .nx-w16-filters { margin: 0 0 var(--nx-s3); }
.nx-root .nx-w16-hit { background: var(--nx-amber-soft); color: var(--nx-text); border-radius: 4px; padding: 0 2px; font-weight: 700; }
.nx-root .nx-w16-snip { color: var(--nx-muted); overflow-wrap: anywhere; }
.nx-root .nx-w16-results .nx-item__meta { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.nx-root .nx-w16-results { min-width: 0; }
.nx-root .nx-w16-showmore { display: flex; justify-content: center; margin: var(--nx-s4) 0 0; }
.nx-root .nx-w16-muted { color: var(--nx-muted); }
.nx-root .nx-w16-safe { text-align: center; margin: var(--nx-s6) 0 0; }

/* the welcome card (the menu pill's own colours: their contrast is already checked on both ends) */
.nx-root .nx-w16-welcome { margin: var(--nx-s3) 0 0; padding: var(--nx-s5) var(--nx-s6); border-radius: var(--nx-r2); background: var(--nx-pill); color: var(--nx-pill-text); box-shadow: var(--nx-shadow); }
.nx-root .nx-w16-welcome h2 { margin: 0 0 var(--nx-s1); font-size: var(--nx-fs-h2); line-height: 1.25; font-weight: 800; color: inherit; }
.nx-root .nx-w16-welcome p { margin: 0 0 var(--nx-s3); max-width: 62ch; color: inherit; overflow-wrap: anywhere; }
.nx-root .nx-w16-welcome__act { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }

/* the quick cards */
.nx-root .nx-w16-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--nx-s3); margin: var(--nx-s4) 0; }
.nx-root .nx-w16-qcard { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 96px; padding: var(--nx-s4); background: var(--nx-surface); color: var(--nx-text); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); text-decoration: none; box-shadow: var(--nx-shadow); }
.nx-root .nx-w16-qcard:hover { border-color: var(--nx-blue); }
.nx-root .nx-w16-qcard b { font-size: 16px; overflow-wrap: anywhere; }
.nx-root .nx-w16-qcard small { color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }
.nx-root .nx-w16-qcard .nx-skel { width: 60%; }
.nx-root .nx-w16-qico { --gls: 22; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--nx-blue-soft); color: var(--nx-blue-text); margin-bottom: 4px; }

/* the home grid: community on the left, training and updates on the right */
.nx-root .nx-w16-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--nx-s4); align-items: start; }
.nx-root .nx-w16-grid--one { grid-template-columns: minmax(0, 1fr); }
.nx-root .nx-w16-aside { display: grid; gap: var(--nx-s4); min-width: 0; }
.nx-root .nx-w16-block { display: grid; gap: var(--nx-s2); align-content: start; min-width: 0; }
.nx-root .nx-w16-block .nx-h3 { margin: 0; }
.nx-root .nx-w16-comm { min-width: 0; display: grid; gap: var(--nx-s3); }
.nx-root .nx-w16-comm__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s2) var(--nx-s3); }
.nx-root .nx-w16-comm__head .nx-h3, .nx-root .nx-w16-comm__head .nx-chips { margin: 0; }
.nx-root .nx-w16-comm .nx-chips { margin: 0; }
.nx-root .nx-w16-hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: var(--nx-s3); }
.nx-root .nx-w16-empty { min-width: 0; }
.nx-root .nx-w16-more-links { margin: 0; display: flex; flex-wrap: wrap; gap: 0 var(--nx-s4); }
.nx-root .nx-w16-more-links .nx-link { display: inline-flex; align-items: center; min-height: var(--nx-tap); }
.nx-root .nx-w16-note { margin: 0; padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r1); background: var(--nx-blue-soft); color: var(--nx-blue-text); overflow-wrap: anywhere; }

/* a how-to card (also the live preview in the dialog) */
.nx-root .nx-w16-hcard { display: flex; flex-direction: column; gap: var(--nx-s2); min-width: 0; text-align: left; }
.nx-root .nx-w16-hcard h3 { margin: 0; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.nx-root .nx-w16-hcard h3 .nx-link { text-align: left; white-space: normal; display: inline-flex; align-items: center; min-height: var(--nx-tap); }
.nx-root .nx-w16-hcard__pills { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-w16-hcard__acts { display: flex; flex-wrap: wrap; gap: var(--nx-s2); margin-top: auto; padding-top: var(--nx-s2); }
.nx-root .nx-w16-hcard--preview { background: var(--nx-bg); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s4); }
.nx-root .nx-w16-steps { margin: 0; padding-left: 20px; color: var(--nx-muted); font-size: 13.5px; display: grid; gap: 2px; }
.nx-root .nx-w16-steps li { overflow-wrap: anywhere; }

/* My training and Latest updates */
.nx-root .nx-w16-prog__line { margin: 0; }
.nx-root .nx-w16-meter { height: 10px; border-radius: var(--nx-rfull); background: var(--nx-hover); border: 1px solid var(--nx-line); overflow: hidden; }
.nx-root .nx-w16-meter i { display: block; height: 100%; background: var(--nx-blue); border-radius: var(--nx-rfull); }
.nx-root .nx-w16-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.nx-root .nx-w16-rows li { display: flex; align-items: center; gap: var(--nx-s2); padding: var(--nx-s2) 0; border-bottom: 1px solid var(--nx-line); min-width: 0; }
.nx-root .nx-w16-rows li:last-child { border-bottom: 0; }
.nx-root .nx-w16-rows__t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-w16-tick { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--nx-control-line); font-size: 12px; font-weight: 800; }
.nx-root .nx-w16-tick.is-done { background: var(--nx-ok-soft); color: var(--nx-ok-text); border-color: var(--nx-ok-text); }

/* the Add a how-to dialog: two columns where the dialog is wide, one in a bottom sheet */
.nx-root .nx-dlg:has(.nx-w16-form) { width: min(780px, 100%); }
.nx-root .nx-dlg:has(.nx-w16-form) .nx-dlg__title { justify-self: start; text-align: left; }
.nx-root .nx-w16-form { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--nx-s4); width: 100%; text-align: left; }
.nx-root .nx-w16-form__main, .nx-root .nx-w16-form__side { min-width: 0; display: grid; gap: var(--nx-s3); align-content: start; }
.nx-root .nx-w16-form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s3); padding-top: var(--nx-s3); border-top: 1px solid var(--nx-line); position: sticky; bottom: 0; background: var(--nx-surface); }
.nx-root .nx-w16-status { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-w16-err { color: var(--nx-bad-text); font-weight: 700; }
.nx-root .nx-w16-acts { display: flex; flex-wrap: wrap; gap: var(--nx-s2); justify-content: flex-end; }
.nx-root .nx-w16-field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.nx-root .nx-w16-field > span, .nx-root .nx-w16-field > legend, .nx-root .nx-w16-label { font-weight: 700; font-size: 14px; padding: 0; }
.nx-root .nx-w16-field .nx-input { width: 100%; min-width: 0; flex: none; }
.nx-root .nx-w16-aud { gap: 2px; }
.nx-root .nx-w16-radio { display: flex; align-items: center; gap: 10px; min-height: var(--nx-tap); cursor: pointer; }
.nx-root .nx-w16-radio input { width: 20px; height: 20px; margin: 0; accent-color: var(--nx-blue); flex: none; }
.nx-root .nx-w16-radio small { display: block; color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-w16-radio.is-off { cursor: not-allowed; }
.nx-root .nx-w16-hint { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-w16-more > summary { min-height: var(--nx-tap); display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--nx-link); }
.nx-root .nx-w16-more[open] { display: grid; gap: var(--nx-s2); }
.nx-root .nx-w16-view { display: grid; gap: var(--nx-s3); text-align: left; }
.nx-root .nx-w16-view p { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-w16-plain { white-space: pre-wrap; }
.nx-root .nx-w16-view .nx-w16-steps { color: var(--nx-text); font-size: var(--nx-fs-body); gap: var(--nx-s2); }

@media (max-width: 1100px) {
  .nx-root .nx-w16-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .nx-root .nx-w16-form { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-dlg:has(.nx-w16-form) { width: 100%; }
  .nx-root .nx-w16-form input, .nx-root .nx-w16-form textarea, .nx-root .nx-w16-form select, .nx-root .nx-w16-bar .nx-input { font-size: 16px; }
  .nx-root .nx-w16-welcome { padding: var(--nx-s4); }
  .nx-root .nx-w16-welcome h2 { font-size: var(--nx-fs-h3); }
  .nx-root .nx-w16-acts { justify-content: stretch; }
  .nx-root .nx-w16-acts .nx-btn { flex: 1 1 auto; }
  .nx-root .nx-w16-bar .nx-w16-add { flex: 1 1 100%; }
}

/* motion only for people who did not ask for less */
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-w16-qcard { transition: border-color var(--nx-d2), transform var(--nx-d2) var(--nx-curve), box-shadow var(--nx-d2); }
  .nx-root .nx-w16-qcard:hover { transform: translateY(-2px); }
  .nx-root .nx-w16-meter i { transition: width var(--nx-d3) var(--nx-curve); }
}

/* Google Drive and Slides (googleconn.jsx): the person's card, the three pictured steps and the administrator's setup. Theme tokens only, so every theme draws it; nothing here moves. */
.gc { display: grid; gap: 12px; min-width: 0; color: var(--color-text-primary); }
.gc-head { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.gc-ic { width: 40px; height: 40px; flex: none; font-size: 20px; }
.gc-lead { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; flex: 1; }
.gc-title { font-size: 16px; }
.gc-pill { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--color-border); color: var(--color-text-muted); }
.gc-pill--ok { background: var(--color-success-soft); color: var(--color-success); border-color: transparent; }
.gc-pill--wait { background: var(--color-warning-soft); color: var(--color-warning); border-color: transparent; }
.gc-pill--fix { background: var(--color-error-soft); color: var(--color-error); border-color: transparent; }
.gc-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
/* the three pictured steps: the Home hub's mini screens, side by side (its variables come from .hc) */
.gc-steps.hc { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gc-step { display: grid; gap: 4px; min-width: 0; align-content: start; }
.gc-pic { border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; }
.gc-pic svg { width: 100%; height: 100%; display: block; }
.gc-cap { font-size: 13px; }
.gc-sub { font-size: 12px; color: var(--color-text-muted); line-height: 1.35; }
.gc .hc-cur, .gc .hc-tap { animation: none; }
.gc-it { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 6px; font-size: 13px; }
.gc-uri { display: block; margin-top: 4px; padding: 4px 8px; border-radius: 6px; background: var(--color-surface-nested); border: 1px solid var(--color-border); overflow-wrap: anywhere; font-size: 12px; }
.gc-steps-it { margin-bottom: 4px; }
.gc-steps-it summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 4px 0; }
.gc-steps-it summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: 6px; }
/* the administrator's form */
.gc-admin { padding: 14px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.gc-form { display: grid; gap: 12px; }
.gc-f { display: grid; gap: 4px; min-width: 0; font-size: 13px; }
.gc-f > span:first-child { font-weight: 600; }
.gc-radio { display: grid; gap: 8px; }
.gc-radio .ant-radio-wrapper { align-items: flex-start; white-space: normal; }
.gc-help { color: var(--color-text-muted); font-size: 12px; font-weight: 400; }
.gc-actions { margin-top: 4px; }
@media (max-width: 560px) {
  .gc-steps.hc { grid-template-columns: 1fr; }
  .gc-step { grid-template-columns: 112px minmax(0, 1fr); column-gap: 10px; }
  .gc-step .gc-pic { grid-row: 1 / span 2; }
  .gc-admin { padding: 12px; }
}

/* THE EVIDENCE CHARTS (10 Nov 2026, Sheraz: bigger, readable for older eyes, 3D with hover). Pinned by app/test/regression/qa-2026-11-10-readable-charts.test.js.
   Rules: every font-size is calc(Npx * var(--ec-s)) with N >= 14 (--ec-s is 1, 1.25 or 1.5: the A / A+ / A++ control); the 3D look (front, top and side face, shadow) never changes a bar's height (the front face is the height);
   motion is transform and opacity only; under prefers-reduced-motion there is no tilt and no grow-in, only a bold highlight; no tilt on touch. */
.ec-area { --ec-s: 1; container-type: inline-size; margin: 8px 0; width: 100%; }
.ec-area, .ec-area * { box-sizing: border-box; }
.ec-size { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: calc(14px * var(--ec-s)); font-weight: 600; }
.ec-sizebtn { min-width: 48px; min-height: 40px; padding: 0 12px; font: inherit; font-weight: 700; color: inherit; background: transparent; border: 2px solid currentColor; border-radius: 8px; cursor: pointer; }
.ec-sizebtn[aria-pressed="true"] { background: color-mix(in srgb, currentColor 20%, transparent); border-width: 4px; }   /* the pressed size keeps its letter: it was painted in the card colour on its own colour (11 Nov 2026, an empty box on the live page) */
.ec-sizebtn:focus-visible, .ec-hit:focus-visible, .ec-vertex:focus-visible { outline: 3px solid var(--brand, #1f6fd1); outline-offset: 2px; }

.ec-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; }
@container (min-width: 720px) { .ec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1180px) { .ec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ec-card { margin: 0; padding: 14px 16px 12px; min-width: 0; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: 12px; background: color-mix(in srgb, currentColor 4%, transparent); }
.ec-hexcard { margin-top: 16px; }
.ec-cap { font-size: calc(14px * var(--ec-s)); line-height: 1.35; margin: 0 0 8px; }
.ec-cap b { font-size: calc(16px * var(--ec-s)); display: block; }
.ec-note { font-size: calc(14px * var(--ec-s)); line-height: 1.4; margin: 8px 0 0; }

/* the bars: the front face is the height; the top and side faces are extra, constant depth */
.ec-plot { --ec-d: 8px; display: flex; align-items: flex-end; gap: 4px; padding-top: 44px; border-bottom: 3px solid currentColor; perspective: 700px; position: relative; }
.ec-col { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.ec-hit { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; width: 100%; padding: 0; margin: 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; transform-style: preserve-3d; transition: transform 160ms ease-out; }
.ec-val { display: block; text-align: center; font-size: calc(14px * var(--ec-s)); font-weight: 800; line-height: 1.2; padding-bottom: calc(var(--ec-d) + 4px); }
.ec-body { position: relative; display: block; width: calc(100% - var(--ec-d)); background: var(--ec-color); transform-origin: 50% 100%; box-shadow: 5px 7px 10px rgba(0, 0, 0, 0.28); }
.ec-body::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity 160ms ease-out; }
.ec-topf, .ec-sidef { position: absolute; display: block; background: var(--ec-color); }
.ec-topf { left: 0; bottom: 100%; width: calc(100% + var(--ec-d)); height: var(--ec-d); clip-path: polygon(var(--ec-d) 0, 100% 0, calc(100% - var(--ec-d)) 100%, 0 100%); filter: brightness(1.28); }
.ec-sidef { left: 100%; top: calc(var(--ec-d) * -1); width: var(--ec-d); height: calc(100% + var(--ec-d)); clip-path: polygon(0 var(--ec-d), 100% 0, 100% calc(100% - var(--ec-d)), 0 100%); filter: brightness(0.72); }
.ec-wk { display: block; position: absolute; top: 100%; left: 50%; width: calc(var(--ec-span, 1) * 100%); transform: translateX(-50%); padding-top: 6px; text-align: center; font-size: calc(14px * var(--ec-s)); font-weight: 600; line-height: 1.2; }
.ec-plot { margin-bottom: calc(40px * var(--ec-s)); }
.ec-hit.ec-act .ec-body::after, .ec-hit:hover .ec-body::after, .ec-hit:focus-visible .ec-body::after { opacity: 0.28; }
.ec-hit.ec-act .ec-val, .ec-hit:hover .ec-val, .ec-hit:focus-visible .ec-val { text-decoration: underline; }

/* tooltips: large, the exact count, the week and the source */
.ec-tip { position: absolute; z-index: 20; display: flex; flex-direction: column; gap: 2px; width: max-content; max-width: min(320px, calc(90 * var(--ao-vw))); padding: 10px 14px; pointer-events: none; font-size: calc(16px * var(--ec-s)); line-height: 1.3; color: var(--card, #fff); background: var(--ink, #1b2430); border-radius: 10px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.ec-tip > span { font-size: calc(14px * var(--ec-s)); font-weight: 400; }
.ec-tip[data-ec-edge="c"] { left: 50%; transform: translateX(-50%); }
.ec-tip[data-ec-edge="l"] { left: 0; }
.ec-tip[data-ec-edge="r"] { right: 0; }

/* the hexagon */
.ec-hexrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center; }
@container (min-width: 720px) { .ec-hexrow { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.ec-hexbox { position: relative; width: 100%; max-width: 640px; margin: calc(28px * var(--ec-s)) auto 8px; aspect-ratio: 1 / 1; }
.ec-hexsvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ec-grid-line { fill: none; stroke: currentColor; stroke-opacity: 0.4; stroke-width: 0.4; }
.ec-spoke { stroke: currentColor; stroke-opacity: 0.4; stroke-width: 0.4; }
.ec-spoke.ec-nodata { stroke-dasharray: 1.5 1.5; }
.ec-hexshape { fill: #1f6fd1; fill-opacity: 0.22; stroke: #1f6fd1; stroke-width: 0.9; transform-origin: 50px 50px; }
.ec-vertex { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; background: none; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ec-dot { width: 18px; height: 18px; border-radius: 50%; background: #1f6fd1; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); transition: transform 160ms ease-out; }
.ec-vertex.ec-act .ec-dot, .ec-vertex:hover .ec-dot { transform: scale(1.35); }
.ec-axlab { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: max-content; max-width: 26%; font-size: calc(14px * var(--ec-s)); line-height: 1.25; font-weight: 600; }
.ec-axlab b { display: block; font-size: calc(18px * var(--ec-s)); font-weight: 800; }
.ec-axlab[data-side="m"] { max-width: 50%; transform: translate(-50%, -100%); text-align: center; }
.ec-axlab[data-side="r"] { transform: translate(0, -50%); text-align: left; }
.ec-axlab[data-side="l"] { transform: translate(-100%, -50%); text-align: right; }
.ec-hextip { left: 50%; bottom: 0; transform: translateX(-50%); }
.ec-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ec-keys li { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: baseline; padding: 8px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: calc(16px * var(--ec-s)); }
.ec-keyname { font-weight: 600; }
.ec-keynum { font-size: calc(24px * var(--ec-s)); font-weight: 800; }
.ec-keyno { font-size: calc(16px * var(--ec-s)); font-weight: 700; }
.ec-keysub { grid-column: 1 / -1; font-size: calc(14px * var(--ec-s)); }

/* grow-in, once, when the chart scrolls into view: transform and opacity only, 250-600 ms, staggered by bar (at most 13 bars move at once) */
@keyframes ec-grow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes ec-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ec-draw { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ec-pre .ec-body, .ec-pre .ec-val, .ec-pre .ec-hexshape, .ec-pre .ec-vertex { opacity: 0; }
.ec-in .ec-body { animation: ec-grow 450ms ease-out backwards; animation-delay: calc(var(--ec-i, 0) * 30ms); }
.ec-in .ec-val { animation: ec-fade 300ms ease-out backwards; animation-delay: calc(var(--ec-i, 0) * 30ms + 200ms); }
.ec-in .ec-hexshape { animation: ec-draw 550ms ease-out backwards; }
.ec-in .ec-vertex { animation: ec-fade 400ms ease-out 300ms backwards; }

/* hover and keyboard focus: lift a few px and tilt at most 3 degrees; a mouse only (no tilt on touch) */
@media (hover: hover) and (pointer: fine) {
  .ec-hit:hover, .ec-hit:focus-visible, .ec-hit.ec-act { transform: translateY(-4px) rotateX(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ec-area *, .ec-area *::before, .ec-area *::after { animation: none !important; transition: none !important; }
  .ec-pre .ec-body, .ec-pre .ec-val, .ec-pre .ec-hexshape, .ec-pre .ec-vertex { opacity: 1; }
  .ec-hit:hover, .ec-hit:focus-visible, .ec-hit.ec-act { transform: none !important; }
  .ec-hit:hover .ec-val, .ec-hit:focus-visible .ec-val, .ec-hit.ec-act .ec-val { font-weight: 900; text-decoration: underline; }
  .ec-hit:hover .ec-body, .ec-hit:focus-visible .ec-body, .ec-hit.ec-act .ec-body { outline: 3px solid currentColor; }
}
@media (max-width: 480px) { .ec-card { padding: 12px 10px 10px; } .ec-plot { gap: 2px; } }

/* Managers' time: the team cards (10 Nov 2026). At most 3 cards in a row, each at least 360 px wide (never 4 narrow ones), 1 on a phone, equal height; the key numbers are big tiles on top (2 columns),
   the charts below at the full card width (one per row, 160 px tall plots). */
.nx-root .nx-co-heads { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(360px, calc((100% - 2 * var(--nx-s3)) / 3))), 1fr)); align-items: stretch; }
.nx-root .nx-co-headcard { height: 100%; align-content: start; }
.ec-tiles { --ec-s: 1; list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ec-tiles li { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 88px; padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); background: color-mix(in srgb, currentColor 5%, transparent); font-size: calc(14px * var(--ec-s)); line-height: 1.25; font-weight: 600; }
.ec-tiles li b { font-size: calc(32px * var(--ec-s)); line-height: 1.1; font-weight: 800; }

/* THE "AT A GLANCE" OVERVIEW (10 Nov 2026): six short lines at the top of a person's profile, three on a team card. Pinned by app/test/regression/qa-2026-11-10-glance.test.js.
   Same rules as the charts: every font-size is calc(Npx * var(--gl-s)) with N >= 14 (--gl-s follows the A / A+ / A++ text-size control); colours are the page's own; one column on a phone.
   This sheet sits before nx-w17.css in web/build.mjs (never after nx-w11.css). */
.gl-area { --gl-s: 1; container-type: inline-size; margin: 0 0 16px; padding: 16px 18px; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: 14px; background: color-mix(in srgb, currentColor 4%, transparent); }
.gl-area, .gl-area * { box-sizing: border-box; }
.gl-h { margin: 0 0 10px; font-size: calc(20px * var(--gl-s)); line-height: 1.25; }
.gl-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; }
.gl-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, currentColor 5%, transparent); border-left: 5px solid var(--gl-accent, var(--brand, #1f6fd1)); }
@container (min-width: 760px) { .gl-row { grid-template-columns: minmax(180px, 24%) minmax(0, 1fr); gap: 14px; align-items: start; } }
.gl-row dt { display: flex; align-items: center; gap: 8px; margin: 0; font-size: calc(16px * var(--gl-s)); font-weight: 800; line-height: 1.25; }
.gl-ico { display: inline-flex; flex: none; }
.gl-row dd { margin: 0; min-width: 0; }
.gl-text { margin: 0; font-size: calc(18px * var(--gl-s)); line-height: 1.45; overflow-wrap: anywhere; }
.gl-chip { display: inline-block; margin-top: 6px; padding: 2px 10px; font-size: calc(14px * var(--gl-s)); font-weight: 700; border: 1px solid currentColor; border-radius: 999px; }
.gl-note { margin: 6px 0 0; font-size: calc(14px * var(--gl-s)); line-height: 1.4; }
.gl-more { margin-top: 8px; font-size: calc(14px * var(--gl-s)); }
.gl-more summary { cursor: pointer; font-weight: 700; min-height: 32px; }
.gl-more ul { margin: 6px 0 0; padding-left: 20px; }
.gl-more li { margin: 0 0 6px; line-height: 1.4; overflow-wrap: anywhere; }
.gl-empty { margin: 0; font-size: calc(16px * var(--gl-s)); line-height: 1.4; }
.gl-row[data-gl="with"] { --gl-accent: #1f6fd1; } .gl-row[data-gl="topics"] { --gl-accent: #6a52d9; } .gl-row[data-gl="rhythm"] { --gl-accent: #0b8f68; }
.gl-row[data-gl="platform"] { --gl-accent: #9a6f00; } .gl-row[data-gl="reads"] { --gl-accent: #c2457b; } .gl-row[data-gl="cannot"] { --gl-accent: #5f7084; }

/* the compact version on a team card: three short lines, the heading above each, no icon column */
.gl-area--compact { padding: 12px 14px; margin: 8px 0 12px; }
.gl-area--compact .gl-h { font-size: calc(16px * var(--gl-s)); margin-bottom: 8px; }
.gl-area--compact .gl-list { gap: 8px; }
.gl-area--compact .gl-row { grid-template-columns: minmax(0, 1fr); padding: 8px 10px; }
.gl-area--compact .gl-text { font-size: calc(15px * var(--gl-s)); line-height: 1.4; }
.gl-area--compact .gl-row dt { font-size: calc(14px * var(--gl-s)); }

/* THE WORK CARD (10 Nov 2026): the same rows as the overview; text 16 px or more, also on a team card. It sits above the overview, which is folded under "Details". */
.wc-area .gl-text { font-size: calc(18px * var(--gl-s)); }
.wc-area.gl-area--compact .gl-text { font-size: calc(16px * var(--gl-s)); }
.wc-area.gl-area--compact .gl-row dt { font-size: calc(16px * var(--gl-s)); }
.gl-row[data-wc="role"] { --gl-accent: #1f6fd1; } .gl-row[data-wc="work"] { --gl-accent: #6a52d9; } .gl-row[data-wc="partners"] { --gl-accent: #0b8f68; } .gl-row[data-wc="pending"] { --gl-accent: #c2457b; }
.gl-row[data-wc="split"] { --gl-accent: #9a6f00; } .gl-row[data-wc="reply"] { --gl-accent: #1f6fd1; } .gl-row[data-wc="output"] { --gl-accent: #9a6f00; } .gl-row[data-wc="cannot"] { --gl-accent: #5f7084; }
.wc-details { margin: 0 0 16px; }
.wc-details > summary { cursor: pointer; font-weight: 800; font-size: calc(16px * var(--gl-s, 1)); min-height: 36px; padding: 6px 2px; }

/* THE CEO'S TEAM WORK TABLE (10 Nov 2026): plain columns, text 16 px or more, no colour that means good or bad, no rank. Sorting changes the order only. The table scrolls sideways on a phone. */
.tw-area { margin: 0 0 16px; }
.tw-tools { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 8px 0 12px; font-size: calc(16px * var(--gl-s, 1)); }
.tw-tools select, .tw-tools input { font-size: calc(16px * var(--gl-s, 1)); min-height: 36px; margin-left: 6px; }
.tw-scroll { overflow-x: auto; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: 12px; }
.tw-table { width: 100%; min-width: 1500px; border-collapse: collapse; font-size: calc(16px * var(--gl-s, 1)); line-height: 1.4; }
.tw-table th, .tw-table td { padding: 10px 12px; text-align: left; vertical-align: top; min-width: 96px; border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent); overflow-wrap: break-word; }
.tw-table th.tw-main { min-width: 230px; } .tw-table th.tw-reply { min-width: 220px; } .tw-table th:nth-child(6) { min-width: 190px; }
.tw-table th:first-child { min-width: 130px; } .tw-table th:nth-child(2), .tw-table th:nth-child(3) { min-width: 120px; }
.tw-table thead th { font-weight: 800; background: color-mix(in srgb, currentColor 6%, transparent); }
.tw-table tbody th { font-weight: 700; }
.tw-sort { all: unset; cursor: pointer; font-weight: 800; font-size: calc(16px * var(--gl-s, 1)); min-height: 32px; }
.tw-sort:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.tw-sub { display: block; font-weight: 400; font-size: calc(16px * var(--gl-s, 1)); opacity: .85; }
.tw-table th.tw-sight { min-width: 200px; }
.tw-asof { display: block; font-weight: 400; font-size: calc(16px * var(--gl-s, 1)); opacity: .8; }
.tw-foot { margin-top: 10px; font-size: calc(16px * var(--gl-s, 1)); }

/* THE WORK BRIEFING (10 Nov 2026): the brief under At a glance, and the CEO's list. Every font-size is calc(Npx * var(--gl-s)) with N >= 14 (--gl-s is the profile's A / A+ / A++ size, 1 when there is none).
   Pinned by app/test/regression/qa-2026-11-10-work-briefing.test.js. This sheet sits before nx-w17.css in web/build.mjs (never after nx-w11.css). */
.bf-area { margin: 0 0 16px; padding: 16px 18px; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: 14px; background: color-mix(in srgb, currentColor 4%, transparent); }
.bf-h { margin: 0 0 6px; font-size: calc(20px * var(--gl-s, 1)); line-height: 1.25; }
.bf-by { margin: 0 0 10px; font-size: calc(14px * var(--gl-s, 1)); line-height: 1.4; }
.bf-note { margin: 0; font-size: calc(16px * var(--gl-s, 1)); line-height: 1.4; }
.bf-list { margin: 0; padding-left: 22px; display: grid; gap: 12px; }
.bf-item { padding: 4px 0; }
.bf-text { margin: 0 0 4px; font-size: calc(18px * var(--gl-s, 1)); line-height: 1.5; overflow-wrap: anywhere; }
.bf-ev { font-size: calc(14px * var(--gl-s, 1)); line-height: 1.4; }
.bf-ev summary { cursor: pointer; font-weight: 700; min-height: 28px; }
.bf-ev ul { margin: 4px 0 0; padding-left: 20px; }
.bf-ev li { margin: 0 0 4px; overflow-wrap: anywhere; }
.bf-company { display: grid; gap: 14px; }
.bf-dept { padding: 12px 14px; border: 1px solid color-mix(in srgb, currentColor 24%, transparent); border-radius: 12px; }
.bf-dh { margin: 0 0 8px; font-size: calc(18px * var(--gl-s, 1)); }
.bf-count { font-weight: 400; font-size: calc(14px * var(--gl-s, 1)); }
.bf-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bf-person { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, currentColor 5%, transparent); }
@media (min-width: 760px) { .bf-person { grid-template-columns: minmax(160px, 22%) minmax(0, 1fr) auto; gap: 14px; align-items: center; } }
.bf-name { font-size: calc(16px * var(--gl-s, 1)); }
.bf-sum { font-size: calc(15px * var(--gl-s, 1)); line-height: 1.4; overflow-wrap: anywhere; }
.bf-open { font-size: calc(14px * var(--gl-s, 1)); font-weight: 700; white-space: nowrap; }

/* THE WORK BANDS SCREENS (11 Nov 2026): the card on a person's profile, the Company tab, the evidence drawer. Pinned by app/test/regression/qa-2026-11-11-profile-bands-screens.test.js.
   Rules: text 16 px or more (notes 14 px); a band and a status are always words plus a shape, never colour alone; colours come from the page (currentColor) except the small accent set below; one column on a phone.
   This sheet sits before nx-w17.css in web/build.mjs (never after nx-w11.css). */
.bd-area, .bd-page, .bd-method { --bd-ok: #0b8f68; --bd-mid: #1f6fd1; --bd-warn: #9a6f00; --bd-low: #b0462d; }
.bd-area { margin: 0 0 16px; padding: 16px 18px; border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: 14px; background: color-mix(in srgb, currentColor 3%, transparent); }
.bd-area, .bd-area * { box-sizing: border-box; }
.bd-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 6px; }
.bd-top h3 { margin: 0; font-size: 20px; line-height: 1.25; }
.bd-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: 16px; font-weight: 800; border: 2px solid currentColor; border-radius: 999px; }
.bd-badge[data-band="strong"] { color: var(--bd-ok); } .bd-badge[data-band="on_track"] { color: var(--bd-mid); }
.bd-badge[data-band="needs_support"] { color: var(--bd-warn); } .bd-badge[data-band="not_enough_evidence"] { color: inherit; border-style: dashed; opacity: 0.85; }
.bd-chip { display: inline-block; padding: 2px 10px; font-size: 14px; font-weight: 700; border: 1px solid currentColor; border-radius: 999px; }
.bd-rule { margin: 0 0 6px; font-size: 18px; line-height: 1.45; }
.bd-small { margin: 4px 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.bd-small.muted, .bd-area .muted { opacity: 0.82; }
.bd-example { margin: 0 0 10px; padding: 8px 12px; font-size: 16px; font-weight: 700; border: 2px dashed currentColor; border-radius: 10px; }
.bd-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 12px 0; padding: 0; list-style: none; }
.bd-row { padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, currentColor 5%, transparent); border-left: 5px solid color-mix(in srgb, currentColor 35%, transparent); }
.bd-row[data-status="above"], .bd-row[data-status="meets"] { border-left-color: var(--bd-ok); } .bd-row[data-status="below"] { border-left-color: var(--bd-warn); }
.bd-row__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.bd-row__name { flex: 1 1 220px; font-size: 16px; font-weight: 800; }
.bd-row__val { font-size: 22px; font-weight: 800; }
.bd-row__na { font-size: 16px; font-weight: 700; opacity: 0.9; }
.bd-core { margin-left: 8px; padding: 1px 8px; font-size: 14px; font-weight: 700; border: 1px solid currentColor; border-radius: 999px; }
.bd-status { font-size: 14px; font-weight: 800; padding: 2px 10px; border: 1px solid currentColor; border-radius: 999px; }
.bd-status[data-status="above"], .bd-status[data-status="meets"] { color: var(--bd-ok); } .bd-status[data-status="below"] { color: var(--bd-warn); } .bd-status[data-status="partial"] { color: var(--bd-mid); }
.bd-bar { position: relative; height: 16px; margin: 8px 0; border-radius: 8px; background: color-mix(in srgb, currentColor 12%, transparent); overflow: hidden; }
.bd-bar__zone { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, currentColor 18%, transparent); }
.bd-bar__fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--bd-mid); opacity: 0.85; }
.bd-bar__tick { position: absolute; top: -2px; bottom: -2px; width: 3px; margin-left: -1px; background: currentColor; }
.bd-progress { display: block; width: 100%; height: 14px; margin: 8px 0; }
.bd-link { min-height: 32px; padding: 2px 0; font-size: 14px; font-weight: 700; text-decoration: underline; background: none; border: 0; color: inherit; cursor: pointer; }
.bd-btn { min-height: 40px; margin: 6px 10px 6px 0; padding: 6px 16px; font-size: 16px; font-weight: 700; border: 2px solid currentColor; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; }
.bd-btn:focus-visible, .bd-link:focus-visible { outline: 3px solid var(--bd-mid); outline-offset: 2px; }
.bd-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 12px 0; }
.bd-two h4, .bd-context h4, .bd-mgr h4, .bd-method h4, .bd-group h4 { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.bd-two ul, .bd-context ul, .bd-method ul, .bd-group ul { margin: 0; padding-left: 20px; } .bd-two li, .bd-context li, .bd-method li { margin: 0 0 6px; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.bd-context { margin: 12px 0; padding: 10px 14px; border-radius: 10px; border: 1px dashed color-mix(in srgb, currentColor 40%, transparent); }
.bd-actions { display: flex; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.bd-shape { display: block; width: min(100%, 320px); margin: 8px 0; } .bd-shape__ring { fill: none; stroke: currentColor; stroke-opacity: 0.25; }
.bd-shape__target { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 5 4; } .bd-shape__value { fill: var(--bd-mid); fill-opacity: 0.3; stroke: var(--bd-mid); stroke-width: 2; } .bd-shape__label { font-size: 14px; fill: currentColor; }
.bd-mgr { margin-top: 16px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent); }
.bd-points { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 10px 0; padding: 0; list-style: none; }
.bd-point { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, currentColor 5%, transparent); }
.bd-point__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 16px; font-weight: 700; }
.bd-point__n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 14px; font-weight: 800; border: 2px solid currentColor; border-radius: 50%; }
.bd-page { display: grid; gap: 12px; } .bd-tabs { margin: 0 0 4px; }
.bd-tools { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 8px 0; font-size: 16px; } .bd-tools select, .bd-tools input { min-height: 36px; font-size: 16px; }
.bd-group { margin: 12px 0; } .bd-group li { margin: 0 0 8px; font-size: 16px; list-style: none; } .bd-group ul { padding-left: 0; }
.bd-pos { display: inline-block; min-width: 28px; margin-right: 8px; font-weight: 800; }
.bd-reviews { margin: 0; padding: 0; list-style: none; } .bd-reviews li { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, currentColor 5%, transparent); }
.bd-scroll { overflow-x: auto; } .bd-table { width: 100%; border-collapse: collapse; font-size: 16px; } .bd-table th, .bd-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.bd-method section { margin: 0 0 14px; }
@container (min-width: 700px) { .bd-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) { .bd-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bd-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .bd-area * { transition: none !important; animation: none !important; } }

/* THE WORK STORY (12 Nov 2026): the top of a profile. Template: backbone-review/profiler-redesign-2026-11-10/12-TEMPLATE-WORK-STORY.html. Pinned by app/test/regression/qa-2026-11-12-work-story.test.js.
   Rules: text 16 px or more (notes 14 px); a status is always words plus a bar segment, never colour alone; one column on a phone, two columns from 900 px. This sheet sits before nx-w17.css in web/build.mjs (never after nx-w11.css). */
.st-area { --st-done: #0b8f68; --st-prog: #1f6fd1; --st-wait: #b8860b; --st-disc: #7a8499; }
.st-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 8px; }
.st-head h3 { margin: 0; font-size: 22px; line-height: 1.25; }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.st-chip { min-height: 36px; padding: 4px 14px; font-size: 16px; font-weight: 700; border: 2px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.st-chip[aria-pressed="true"] { border-color: currentColor; background: color-mix(in srgb, currentColor 12%, transparent); }
.st-chip:focus-visible { outline: 3px solid var(--st-prog); outline-offset: 2px; }
.st-story { margin: 8px 0 14px; padding: 14px 16px; font-size: 19px; line-height: 1.6; border-radius: 12px; background: color-mix(in srgb, currentColor 5%, transparent); border-left: 5px solid var(--st-prog); }
.st-ev { padding: 0 2px; font-size: 14px; font-weight: 700; text-decoration: underline; background: none; border: 0; color: inherit; cursor: pointer; opacity: 0.8; }
.st-empty { padding: 12px 14px; border: 2px dashed color-mix(in srgb, currentColor 40%, transparent); border-radius: 12px; font-size: 16px; line-height: 1.5; }
.st-grid, .st-grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 10px 0; }
.st-grid h4, .st-card h4 { margin: 0 0 8px; font-size: 17px; font-weight: 800; }
.st-work, .st-card { padding: 12px 14px; margin: 0 0 12px; border-radius: 12px; background: color-mix(in srgb, currentColor 4%, transparent); border: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.st-work h5 { margin: 0 0 4px; font-size: 18px; font-weight: 800; } .st-work p { margin: 0 0 8px; font-size: 16px; line-height: 1.45; }
.st-bar { display: flex; height: 14px; margin: 6px 0; border-radius: 7px; overflow: hidden; background: color-mix(in srgb, currentColor 12%, transparent); }
.st-bar i { display: block; height: 100%; } .st-bar i[data-st="done"] { background: var(--st-done); } .st-bar i[data-st="prog"] { background: var(--st-prog); } .st-bar i[data-st="wait"] { background: var(--st-wait); } .st-bar i[data-st="disc"] { background: var(--st-disc); }
.st-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.st-leg span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--st-disc); }
.st-leg span[data-st="done"]::before { background: var(--st-done); } .st-leg span[data-st="prog"]::before { background: var(--st-prog); } .st-leg span[data-st="wait"]::before { background: var(--st-wait); }
.st-cust { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } .st-cust em { padding: 2px 10px; font-size: 14px; font-style: normal; font-weight: 700; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 999px; }
.st-open { display: flex; gap: 10px; margin: 0 0 10px; align-items: flex-start; font-size: 16px; }
.st-age { flex: none; min-width: 64px; padding: 2px 8px; text-align: center; font-size: 14px; font-weight: 800; border: 2px solid currentColor; border-radius: 8px; }
.st-age[data-age="3"] { color: var(--st-wait); } .st-age[data-age="2"] { color: var(--st-prog); }
.st-rel { margin: 0 0 6px; font-size: 16px; }
.st-spark { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin: 6px 0; } .st-spark i { flex: 1; min-height: 4px; border-radius: 3px 3px 0 0; background: var(--st-prog); }
.st-tag { display: inline-block; margin: 0 8px 8px 0; padding: 3px 12px; font-size: 15px; font-weight: 700; border: 2px solid currentColor; border-radius: 8px; }
.st-tag[data-k="new"] { color: var(--st-done); } .st-tag[data-k="more"] { color: var(--st-prog); } .st-tag[data-k="stopped"], .st-tag[data-k="less"] { color: var(--st-wait); }
.st-mixrow { display: grid; grid-template-columns: minmax(90px, 36%) 1fr 32px; gap: 8px; align-items: center; margin: 0 0 6px; font-size: 15px; } .st-b { height: 10px; border-radius: 5px; background: color-mix(in srgb, currentColor 12%, transparent); } .st-b i { display: block; height: 100%; border-radius: 5px; background: var(--st-prog); }
.st-conv { padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); font-size: 16px; } .st-ex { margin: 4px 0; padding: 6px 10px; font-size: 15px; font-style: italic; border-left: 4px solid color-mix(in srgb, currentColor 40%, transparent); }
@media (min-width: 900px) { .st-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .st-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .st-area * { transition: none !important; animation: none !important; } }

.st-notice { margin: 8px 0 14px; padding: 14px 16px; border: 2px solid currentColor; border-radius: 12px; font-size: 16px; line-height: 1.55; }
.st-notice h4 { margin: 0 0 6px; font-size: 18px; }
.st-tick { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; font-size: 16px; }
.st-tick input { width: 20px; height: 20px; margin-top: 2px; }

/* THE HEAD GRID (12 Nov 2026): the cards of Company > Managers' time. Mock: backbone-review/profiler-redesign-2026-11-10/13-PROFILE-UI-MOCK.html. Pinned by app/test/regression/qa-2026-11-13-head-grid.test.js.
   Rules: text 14 px or more; the band and the trend are never told by colour alone (a shape and words); a card lifts 4 px on hover or focus, it never tilts (cheap on office PCs); reduced motion turns the lift off; one column on a phone. */
.hg-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); }
.hg-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--color-border-subtle, #dfe3f3); background: var(--color-surface, #fff); box-shadow: var(--shadow-card, 0 1px 3px #0002); transition: transform .18s ease, box-shadow .18s ease; overflow-wrap: anywhere; }
.hg-card:hover, .hg-card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-raised, 0 8px 24px #0003); }
.hg-top { display: flex; gap: 12px; align-items: center; }
.hg-av { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; font-size: 19px; font-weight: 800; color: var(--color-on-accent, #fff); background: var(--gradient-brand, linear-gradient(135deg, #4a63d9, #22c3e6)); box-shadow: var(--shadow-card, 0 2px 6px #0003), inset 0 1px 0 rgba(255, 255, 255, .35); }
.hg-name { margin: 0; font-size: 17px; line-height: 1.25; }
.hg-open { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; text-align: left; text-decoration: none; }
.hg-open:hover { text-decoration: underline; }
.hg-sub { font-size: 14px; color: var(--color-text-muted, #5b6486); }
.hg-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hg-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: 14px; font-weight: 650; border: 1px solid var(--color-border, #dfe3f3); background: var(--color-surface-nested, #f1f3fc); color: var(--color-text-secondary, #39406a); }
.hg-pill--nee { background: transparent; border-style: dashed; color: var(--color-text-muted, #5b6486); }
.hg-pill--soft { background: var(--color-accent-soft, #eaf0ff); color: var(--color-accent-text, #3a5bd9); }
.hg-sent { margin: 0; font-size: 15px; line-height: 1.5; color: var(--color-text-secondary, #39406a); }
.hg-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hg-mini > div { padding: 8px 10px; border-radius: 12px; border: 1px solid var(--color-border-subtle, #dfe3f3); background: var(--color-surface-nested, #f1f3fc); min-width: 0; }
.hg-mini b { display: block; font-size: 20px; line-height: 1.2; }
.hg-mini span { font-size: 14px; color: var(--color-text-muted, #5b6486); }
.hg-foot { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; justify-content: space-between; margin-top: auto; }
.hg-trend { font-size: 14px; font-weight: 700; color: var(--color-text-muted, #5b6486); }
.hg-trend[data-dir="up"] { color: var(--color-success, #1f9d6b); }
.hg-trend[data-dir="down"] { color: var(--color-warning, #b8860b); }
.hg-btn { display: inline-flex; align-items: center; text-decoration: none; font: inherit; font-size: 15px; min-height: 36px; padding: 6px 14px; border-radius: 12px; border: 0; font-weight: 700; cursor: pointer; color: var(--color-on-accent, #fff); background: var(--gradient-brand, linear-gradient(135deg, #4a63d9, #22c3e6)); }
.hg-btn:focus-visible, .hg-open:focus-visible { outline: 3px solid var(--color-focus, #22c3e6); outline-offset: 2px; }
.hg-note { margin: 0; font-size: 14px; color: var(--color-text-muted, #5b6486); }
.hg-tools { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
@media (prefers-reduced-motion: reduce) { .hg-card { transition: none; } .hg-card:hover, .hg-card:focus-within { transform: none; } }
/* a figure with no value shows its icon in the cell (read out as its reason) and the reason is ONE line under the three figures (11 Nov 2026). Example: Tomas, not connected -> a plug and a clock in the cells, one line "mails sent and calendar: Not connected", one "reply 24 h: Not measured yet". */
.nx-root .hg-mini .hg-why-ic { display: inline-grid; place-items: center; min-height: 32px; color: var(--color-text-muted, #5b6486); }
.nx-root .hg-whys { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14px; line-height: 1.35; color: var(--color-text-primary, #1c2340); }
.nx-root .hg-whys li { display: flex; align-items: flex-start; gap: 6px; }
.nx-root .hg-whys .pg-ic { margin-top: 3px; color: var(--color-text-muted, #5b6486); }

/* THE PERSON PAGE (12 Nov 2026): the header, the nine tabs and their cards. Mock: backbone-review/profiler-redesign-2026-11-10/13-PROFILE-UI-MOCK.html. Pinned by app/test/regression/qa-2026-11-13-person-page.test.js.
   Rules: text 14 px or more; the hero is dark in every theme (white text) with a floor grid and a soft glow in the theme's own accent; the stat tiles are lifted in Z and the header follows the mouse by 3 degrees at most (off for touch and reduced motion);
   the band and the evidence are never told by colour alone; an empty block is a calm dashed box, never red; one column on a phone. */
.pg { display: grid; gap: 16px; min-width: 0; }
.pg-hero { position: relative; perspective: 1100px; }
.pg-stage { position: relative; transform-style: preserve-3d; transform: rotateX(var(--pg-ry, 0deg)) rotateY(var(--pg-rx, 0deg)); transition: transform .3s ease-out; padding: 26px 28px 24px; border-radius: 22px; color: #fff; background: #0b1226; box-shadow: var(--shadow-raised, 0 18px 40px -18px #000a); }
.pg-bg { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent, #4a63d9) 38%, #0b1226) 0%, #0b1226 62%, color-mix(in srgb, var(--color-accent-2, #22c3e6) 28%, #0b1226) 100%); }
.pg-orb { position: absolute; right: -60px; top: -120px; width: 340px; height: 340px; border-radius: 50%; filter: blur(40px); opacity: .45; background: radial-gradient(circle, var(--color-accent-2, #22c3e6), transparent 65%); }
.pg-floor { position: absolute; left: -5%; right: -5%; bottom: -26%; height: 70%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .10) 0 1px, transparent 1px 46px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .10) 0 1px, transparent 1px 46px); transform: perspective(420px) rotateX(64deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); mask-image: linear-gradient(to top, #000 10%, transparent 85%); }
.pg-stage > *:not(.pg-bg) { position: relative; }
.pg-who { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; transform: translateZ(22px); }
.pg-av { flex: none; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 22px; font-size: 26px; font-weight: 800; color: #fff; background: var(--gradient-brand, linear-gradient(135deg, #4a63d9, #22c3e6)); box-shadow: 0 14px 26px -10px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .35); }
.pg-name { margin: 0; font-size: 30px; line-height: 1.15; letter-spacing: -.6px; color: #fff; }
.pg-role { margin: 2px 0 8px; font-size: 15px; color: #d3dcf2; }
.pg-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font-size: 14px; font-weight: 650; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); }
.pg-pill--nee { border-style: dashed; }
.pg-hero .bd-badge { font-size: 14px; padding: 3px 11px; color: #fff; background: rgba(255, 255, 255, .12); border-width: 1px; border-color: rgba(255, 255, 255, .45); opacity: 1; }
.pg-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; transform-style: preserve-3d; }
.pg-tile { transform: translateZ(36px); padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(8px); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .7); min-width: 0; }
.pg-tile b { display: block; font-size: 32px; line-height: 1.1; letter-spacing: -.8px; }
.pg-tile span { display: block; font-size: 14px; color: #d3dcf2; }
.pg-tile small { display: block; font-size: 14px; color: #b9c6e6; margin-top: 2px; }
.pg-story { margin: 16px 0 0; max-width: 900px; font-size: 16px; line-height: 1.55; color: #e6ecfb; transform: translateZ(14px); }
.pg-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--color-border, #dfe3f3); }
.pg-tabs button { border: 0; background: transparent; padding: 12px 14px; font: inherit; font-size: 15px; font-weight: 650; white-space: nowrap; cursor: pointer; color: var(--color-text-muted, #5b6486); border-bottom: 3px solid transparent; }
.pg-tabs button[aria-selected="true"] { color: var(--color-accent-text, #3a5bd9); border-bottom-color: var(--color-accent, #3a5bd9); }
.pg-tabs button:focus-visible, .pg-link:focus-visible { outline: 3px solid var(--color-focus, #22c3e6); outline-offset: 2px; }
.pg-grid2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pg-card { margin: 0 0 16px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--color-border-subtle, #dfe3f3); background: var(--color-surface, #fff); box-shadow: var(--shadow-card, 0 1px 3px #0002); min-width: 0; }
.pg-card h2 { margin: 0 0 4px; font-size: 17px; }
.pg-ai { float: right; padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--color-accent-text, #3a5bd9); background: var(--color-accent-soft, #eaf0ff); }
.pg-desc { margin: 0 0 12px; font-size: 14px; color: var(--color-text-muted, #5b6486); }
.pg-list { margin: 8px 0 0; padding-left: 20px; }
.pg-big b { font-size: 28px; }
.pg-bar { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 10px 0; }
.pg-bar i { display: block; height: 12px; border-radius: 8px; overflow: hidden; background: var(--color-surface-nested, #eef0fa); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3); }
.pg-bar s { display: block; height: 100%; border-radius: 8px; text-decoration: none; background: linear-gradient(90deg, var(--color-accent, #3a5bd9), var(--color-accent-2, #22c3e6)); transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.pg-link { padding: 4px 0; border: 0; background: none; font: inherit; font-weight: 650; text-decoration: underline; cursor: pointer; color: var(--color-link, #3a5bd9); }
.pg-need { padding: 14px 16px; border: 1.5px dashed var(--color-text-muted, #5b6486); border-radius: 14px; font-size: 15px; color: var(--color-text-secondary, #39406a); }
.pg-need b { display: block; color: var(--color-text-primary, #1c2340); }
.pg-need span, .pg-need em { display: block; font-size: 14px; font-style: normal; color: var(--color-text-muted, #5b6486); }
.pg-lockbox { display: flex; gap: 14px; align-items: center; margin: 0 0 16px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--color-border, #dfe3f3); background: var(--color-accent-soft, #eaf0ff); }
.pg-lockbox > span { font-size: 28px; }
.pg-lockbox p { margin: 4px 0 0; font-size: 15px; }
@media (max-width: 900px) { .pg-grid2 { grid-template-columns: minmax(0, 1fr); } .pg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-stage { transform: none !important; } .pg-bar { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .pg-stage { transform: none !important; transition: none; } .pg-bar s { transition: none; } }
/* THE TABS AND THE REASONS (11 Nov 2026, Sheraz: "Tabs are not visible to the user ... real, clearly visible tabs with a nice icon each, a clear selected state, enough contrast on every theme and at phone width"; "I don't want to see n/a").
   The tab row is a solid strip with real buttons: the theme's strongest text colour on the surface, an icon each, the selected tab filled with the theme's accent (darkened so white text has 4.5 or more) and a rise of 1 px; on a phone the strip scrolls inside itself (the page never scrolls sideways).
   Example (Daylight): "Overview" dark ink on white, "Capabilities" white on deep indigo with the bolt icon. A tile with no value says why in words (14 px or more) with its icon. */
.pg-tabs { gap: 4px; padding: 6px; border: 1px solid var(--pf-edge, var(--color-border-subtle, #dfe3f3)); border-radius: 16px; background: var(--color-surface, #fff); box-shadow: var(--pf-shadow, 0 1px 3px #0002); scroll-snap-type: x proximity; scrollbar-width: thin; }
.pg-tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 12px 14px; border-radius: 11px; border: 1px solid transparent; font-size: 15px; font-weight: 650; color: var(--color-text-primary, #1c2340); border-bottom-color: transparent; scroll-snap-align: center; flex: none; transition: background .15s ease, color .15s ease; }
.pg-tabs button:hover { background: color-mix(in srgb, var(--color-accent, #3a5bd9) 12%, var(--color-surface, #fff)); border-color: color-mix(in srgb, var(--color-accent, #3a5bd9) 30%, transparent); }
.pg-tabs button[aria-selected="true"] { color: #fff; background: var(--pg-tab-on, color-mix(in srgb, var(--color-accent, #3a5bd9) 52%, #0b1226)); border-color: var(--pg-tab-on, color-mix(in srgb, var(--color-accent, #3a5bd9) 52%, #0b1226)); box-shadow: 0 6px 14px -8px var(--pg-tab-on, var(--color-accent, #3a5bd9)); border-bottom-color: var(--pg-tab-on, color-mix(in srgb, var(--color-accent, #3a5bd9) 52%, #0b1226)); }
.pg-ic { flex: none; }
.pg-tile-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-bottom: 8px; border-radius: 10px; background: rgba(255, 255, 255, .14); color: #fff; }
.pg-tile b.pg-tile-why { font-size: 17px; line-height: 1.3; letter-spacing: 0; font-weight: 650; margin-bottom: 4px; }
.pg-why { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.45; color: var(--color-text-primary, #1c2340); background: color-mix(in srgb, var(--color-accent, #3a5bd9) 9%, var(--color-surface, #fff)); border: 1px solid color-mix(in srgb, var(--color-accent, #3a5bd9) 24%, transparent); }
.pg-why-ic { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: var(--color-accent-text, #3a5bd9); background: var(--color-surface, #fff); border: 1px solid color-mix(in srgb, var(--color-accent, #3a5bd9) 26%, transparent); }
@media (max-width: 700px) { .pg-tabs { margin: 0 -2px; } }
/* ten tabs on a 1366 px screen (15 Nov 2026, h454 pass): a little less padding and gap under 1440 px so the whole strip stays inside the page; the text stays 15 px */
@media (max-width: 1440px) { .pg-tabs { gap: 2px; } .pg-tabs button { padding: 12px 10px; gap: 6px; } }

/* the limit sentence under each header tile (outside-AI rule: a number always comes with its limit) */
.pg-tile small.pg-tile-limit { font-size: 12.5px; line-height: 1.35; margin-top: 6px; opacity: .9; }

/* THE ONE CARD SURFACE of every profile page (12 Nov 2026, Sheraz: "check the background, make the UI UX more nice"; the red arrows on My profile). My profile, the person page, Managers' time and Work bands draw their blocks with five older
   classes (.gl-area the Work card, .bd-area the band, update and story cards, .profiler-note, .pg-card, the legacy ant cards of My profile). Each had its own fill (a transparent tint over the gradient), border, radius and width, so the page looked
   muddy and uneven. Here they get ONE surface from the design tokens: solid (never see-through), one radius, one padding, one soft layered shadow, one width (the full column), one rhythm, so every card lines up left and right in all 7 themes.
   Rules: titles 18 px, a one line subtitle and footnotes 14 px muted inside the card; inner blocks are light tinted panels with a small icon, never a heavy left bar; depth is a soft shadow and a 2 px lift on a card you can press, no 3D transform context over controls here.
   Loaded after personpage.css and before nx-w17.css. Pinned by app/test/regression/qa-2026-11-13-profile-surface.test.js, checked on the real page by tools/profile-surfaces-shot.mjs.
   Example: the Work card on My profile: a solid white card (Daylight) or a solid dark card (Midnight), the same width as the count card above it, "Waiting for a reply" as a pale blue panel with an icon. */
.nx-root { --pf-radius: calc(var(--rad, 18px) * 0.8); --pf-pad: 18px 20px; --pf-gap: 16px; --pf-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 10px 26px -14px rgba(15, 23, 42, .28); --pf-edge: var(--color-border-subtle, #dfe3f3); --pf-tint: var(--color-surface-nested, #f1f3fc); }
html[data-theme="dark"] .nx-root { --pf-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 28px -14px rgba(0, 0, 0, .65); }
/* the card */
.nx-root .gl-area, .nx-root .bd-area, .nx-root .profiler-note, .nx-root .pg-card, .nx-root .pf-card, .nx-root .nx-me .ant-card, .nx-root .nx-pp .nx-pp-card {
  box-sizing: border-box; width: 100%; max-width: none; margin: 0 0 var(--pf-gap); padding: var(--pf-pad); border: 1px solid var(--pf-edge); border-radius: var(--pf-radius);
  background: var(--color-surface, #fff); color: var(--color-text-primary, #1c2340); box-shadow: var(--pf-shadow); }
.nx-root .nx-me .ant-card .ant-card-body, .nx-root .nx-me .ant-card .ant-card-head { padding: 0; border: 0; }
.nx-root .gl-area--compact { padding: var(--pf-pad); margin: 0 0 var(--pf-gap); }
/* title, subtitle, footnote */
.nx-root .gl-h, .nx-root .bd-top h3, .nx-root .pg-card h2, .nx-root .st-head h3, .nx-root .profiler-note summary, .nx-root .nx-me .ant-card .ant-card-head-title { margin: 0 0 4px; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--color-text-primary, #1c2340); }
.nx-root .gl-area--compact .gl-h { font-size: 18px; }
.nx-root .pg-desc, .nx-root .bd-area > .bd-small.muted, .nx-root .gl-area > .nx-small { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--color-text-muted, #5b6486); opacity: 1; }
.nx-root .pf-foot { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--pf-edge); font-size: 14px; line-height: 1.5; color: var(--color-text-muted, #5b6486); }
/* inner blocks: a light tinted panel, a small coloured icon, a thin edge, no heavy left bar */
.nx-root .gl-row, .nx-root .bd-row, .nx-root .st-work, .nx-root .st-card, .nx-root .bd-mgr, .nx-root .bd-context, .nx-root .bd-two > div {
  border: 1px solid var(--pf-edge); border-left-width: 1px; border-radius: 12px; padding: 12px 14px;
  background: color-mix(in srgb, var(--gl-accent, var(--color-accent, #3a5bd9)) 7%, var(--pf-tint)); }
.nx-root .bd-row[data-status="above"], .nx-root .bd-row[data-status="meets"] { background: color-mix(in srgb, var(--color-success, #1f9d6b) 9%, var(--pf-tint)); }
.nx-root .bd-row[data-status="below"] { background: color-mix(in srgb, var(--color-warning, #b8860b) 11%, var(--pf-tint)); }
.nx-root .gl-ico { display: inline-flex; flex: none; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 9px; color: var(--gl-accent, var(--color-accent-text, #3a5bd9)); background: color-mix(in srgb, var(--gl-accent, var(--color-accent, #3a5bd9)) 14%, transparent); }
.nx-root .gl-ico svg { width: 18px; height: 18px; }
/* a folded long text: one line closed, the whole list open (How this profile is made) */
.nx-root .profiler-note summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.nx-root .profiler-note summary::-webkit-details-marker { display: none; }
.nx-root .profiler-note summary::after { content: attr(data-open-word); font-size: 14px; font-weight: 600; color: var(--color-link, #3a5bd9); }
.nx-root .profiler-note summary:focus-visible { outline: 3px solid var(--color-focus, #22c3e6); outline-offset: 3px; border-radius: 6px; }
.nx-root .profiler-note ul { margin: 10px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.55; color: var(--color-text-secondary, #39406a); }
.nx-root .profiler-note li { margin: 0 0 6px; }
/* the tab panel and My profile: one column, one rhythm */
.nx-root .pg, .nx-root .nx-pp { display: grid; gap: 0; min-width: 0; }
.nx-root .nx-me { display: grid; gap: 0; min-width: 0; }
.nx-root .nx-me > .nx-old { margin-bottom: var(--pf-gap); }
/* a card you can press lifts 2 px; reduced motion keeps it still */
.nx-root .hg-card, .nx-root .pf-press { transition: transform .18s ease, box-shadow .18s ease; }
.nx-root .pf-press:hover, .nx-root .pf-press:focus-within { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .nx-root .hg-card, .nx-root .pf-press, .nx-root .pf-press:hover { transition: none; transform: none; } }
@media (max-width: 700px) { .nx-root { --pf-pad: 14px 14px; --pf-gap: 12px; } }
@media print { .nx-root .gl-area, .nx-root .bd-area, .nx-root .pg-card, .nx-root .profiler-note { box-shadow: none; break-inside: avoid; } }

/* the colour of each Work card row (its icon and its tint) from the theme: Example: "Waiting for a reply" is the warning colour, "Reply speed" the info colour */
.nx-root .gl-row[data-wc="role"] { --gl-accent: var(--color-accent, #3a5bd9); } .nx-root .gl-row[data-wc="work"] { --gl-accent: var(--chart-1, #5b6ee1); } .nx-root .gl-row[data-wc="partners"] { --gl-accent: var(--chart-2, #2dd4bf); }
.nx-root .gl-row[data-wc="pending"] { --gl-accent: var(--color-warning, #b8860b); } .nx-root .gl-row[data-wc="split"] { --gl-accent: var(--chart-3, #fbbf24); } .nx-root .gl-row[data-wc="reply"], .nx-root .gl-row[data-wc="reply_off"] { --gl-accent: var(--color-info, #1f6fd1); }
.nx-root .gl-row[data-wc="output"] { --gl-accent: var(--color-success, #1f9d6b); } .nx-root .gl-row[data-wc="cannot"] { --gl-accent: var(--color-text-muted, #5f7084); }
/* Work bands pages (Company > Work bands): the People list, the weekly updates, the method and the reviews sit in the same card, their groups are tinted panels, their filters use the theme's controls.
   Example: People with Strong (1), On track (1) and Not shown yet (1) -> one card, three pale panels, the filters in a row of 36 px controls. */
.nx-root .bd-page > :not(.bd-tabs):not(.bd-area) { box-sizing: border-box; width: 100%; padding: var(--pf-pad); border: 1px solid var(--pf-edge); border-radius: var(--pf-radius); background: var(--color-surface, #fff); color: var(--color-text-primary, #1c2340); box-shadow: var(--pf-shadow); }
.nx-root .bd-group { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--pf-edge); border-radius: 12px; background: var(--pf-tint); }
.nx-root .bd-tools select, .nx-root .bd-tools input { min-height: 38px; padding: 4px 10px; border: 1px solid var(--color-control-border, #aab6d6); border-radius: 10px; background: var(--color-input, #fff); color: var(--color-text-primary, #1c2340); font: inherit; font-size: 16px; }
.nx-root .bd-tools select:focus-visible, .nx-root .bd-tools input:focus-visible { outline: 3px solid var(--color-focus, #22c3e6); outline-offset: 2px; }
.nx-root .bd-tools label { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-secondary, #39406a); }
/* a phone: the small tag beside a card title wraps under it instead of floating over it */
@media (max-width: 700px) { .nx-root .pg-ai { float: none; display: inline-block; margin: 0 0 6px; } .nx-root .pg-card h2 { display: flex; flex-direction: column; align-items: flex-start; } }

/* THE DEPTH STAGE (12 Nov 2026, Sheraz: "I want some nice 3D UI UX background"; web/src/depthstage.jsx). A layered background behind the profile pages: a mesh of the theme's colours and five soft shapes at different depths, drawn with gradients only.
   Rules: it never carries text; the cards on top stay solid (profilesurface.css); it moves only by transform (compositor), never by layout, so there is no layout shift and no scroll jank; it stops under reduced motion, on a phone or a touch screen and while the tab is hidden;
   no 3D transform context here (the panels get their perspective from their own transform), nothing in it takes a click. Each theme has its own strength and third colour so text on the page stays readable: light themes are airy, dark themes glow.
   Example (Midnight): a blue glow top left, a cyan glow top right, a violet sphere low right, two glass panels tilted like floor tiles, all at 28 to 50 percent. Reused app-wide later by wrapping any page in <ProfileStage>. */
.nx-root .pf-stage { position: relative; isolation: isolate; --pf-a: var(--color-accent, #5b6ee1); --pf-b: var(--color-accent-2, #22c3e6); --pf-c: #f472b6; --pf-glow: 16%; --pf-shape: .34; }
html[data-theme="dark"] .nx-root .pf-stage { --pf-glow: 26%; --pf-shape: .5; }
/* a palette each: the third colour and the strength, so the page keeps its theme (Daylight indigo and pink, Dune stone and amber, Ocean sea and sky, Midnight blue and violet, Aurora violet and rose, Forest emerald and lime, Ember orange and red) */
html[data-palette="daylight"] .nx-root .pf-stage { --pf-c: #f472b6; }
html[data-palette="dune"] .nx-root .pf-stage { --pf-c: #d4932f; --pf-glow: 13%; --pf-shape: .3; }
html[data-palette="ocean"] .nx-root .pf-stage { --pf-c: #38bdf8; --pf-glow: 18%; }
html[data-palette="midnight"] .nx-root .pf-stage { --pf-c: #a78bfa; }
html[data-palette="aurora"] .nx-root .pf-stage { --pf-c: #f472b6; --pf-glow: 30%; --pf-shape: .54; }
html[data-palette="forest"] .nx-root .pf-stage { --pf-c: #a3e635; --pf-glow: 24%; }
html[data-palette="ember"] .nx-root .pf-stage { --pf-c: #ef4444; --pf-glow: 24%; --pf-shape: .46; }
/* the layer behind: fixed to the window so it stays still while the page scrolls (nothing to repaint), under the page and above the page's own background */
.nx-root .pf-depth { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict;
  background:
    radial-gradient(900px 620px at 8% -8%, color-mix(in srgb, var(--pf-a) var(--pf-glow), transparent), transparent 62%),
    radial-gradient(820px 600px at 96% 4%, color-mix(in srgb, var(--pf-b) var(--pf-glow), transparent), transparent 62%),
    radial-gradient(760px 540px at 62% 104%, color-mix(in srgb, var(--pf-c) calc(var(--pf-glow) * .8), transparent), transparent 64%); }
/* the layers: the OUTER one follows the pointer by its depth, the INNER one drifts on its own, so the two never fight over one transform */
.nx-root .pf-layer { position: absolute; inset: 0; display: block; transform: translate3d(calc(var(--pf-px, 0) * var(--pf-d) * -1px), calc(var(--pf-py, 0) * var(--pf-d) * -1px), 0); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.nx-root .pf-shape { position: absolute; display: block; opacity: var(--pf-shape); }
.nx-root .pf-sphere { border-radius: 50%; background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--pf-col) 70%, #fff) 0%, color-mix(in srgb, var(--pf-col) 46%, transparent) 40%, transparent 72%); }
.nx-root .pf-panel { border-radius: 34px; background: linear-gradient(135deg, color-mix(in srgb, var(--pf-col) 38%, transparent), transparent 78%); border: 1px solid color-mix(in srgb, var(--pf-col) 36%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent); transform: perspective(900px) rotateX(58deg) rotateZ(-38deg); }
.nx-root .pf-a { --pf-col: var(--pf-a); width: 560px; height: 560px; left: -150px; top: calc(4 * var(--ao-vh)); }
.nx-root .pf-b { --pf-col: var(--pf-b); width: 440px; height: 440px; right: -120px; top: calc(26 * var(--ao-vh)); }
.nx-root .pf-c { --pf-col: var(--pf-a); width: 380px; height: 250px; left: calc(6 * var(--ao-vw)); bottom: calc(6 * var(--ao-vh)); }
.nx-root .pf-d { --pf-col: var(--pf-b); width: 250px; height: 170px; right: calc(8 * var(--ao-vw)); bottom: calc(14 * var(--ao-vh)); }
.nx-root .pf-e { --pf-col: var(--pf-c); width: 190px; height: 190px; right: calc(24 * var(--ao-vw)); top: calc(8 * var(--ao-vh)); }
/* the idle drift: a few pixels, 36 to 58 seconds a turn; only while it may move and the tab is visible */
@keyframes pf-drift { from { translate: 0 0; } to { translate: 14px -20px; } }
@keyframes pf-drift-b { from { translate: 0 0; } to { translate: -18px 16px; } }
.nx-root .pf-stage[data-live="1"][data-paused="0"] .pf-a { animation: pf-drift 46s ease-in-out infinite alternate; }
.nx-root .pf-stage[data-live="1"][data-paused="0"] .pf-b { animation: pf-drift-b 52s ease-in-out infinite alternate; }
.nx-root .pf-stage[data-live="1"][data-paused="0"] .pf-c { animation: pf-drift 40s ease-in-out infinite alternate; }
.nx-root .pf-stage[data-live="1"][data-paused="0"] .pf-d { animation: pf-drift-b 36s ease-in-out infinite alternate; }
.nx-root .pf-stage[data-live="1"][data-paused="0"] .pf-e { animation: pf-drift 58s ease-in-out infinite alternate; }
/* the page's own content sits above the layer; nothing in the layer takes a click */
.nx-root .pf-stage > :not(.pf-depth) { position: relative; z-index: 0; }
@media (max-width: 700px) { .nx-root .pf-c, .nx-root .pf-d { display: none; } .nx-root .pf-a { width: 380px; height: 380px; left: -140px; } .nx-root .pf-b { width: 300px; height: 300px; right: -120px; } }
@media (prefers-reduced-motion: reduce) { .nx-root .pf-layer { transition: none; transform: none; } .nx-root .pf-shape { animation: none !important; } }
@media print { .nx-root .pf-depth { display: none; } }
/* the cards on top: a 1 px highlight on the top edge and the layered shadow (a light line in light themes, a faint one in dark themes) */
.nx-root .pf-stage .gl-area, .nx-root .pf-stage .bd-area, .nx-root .pf-stage .pg-card, .nx-root .pf-stage .pf-card, .nx-root .pf-stage .profiler-note, .nx-root .pf-stage .hg-card, .nx-root .pf-stage .nx-old, .nx-root .pf-stage .bd-page > :not(.bd-tabs):not(.bd-area) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), var(--pf-shadow); }
html[data-theme="dark"] .nx-root .pf-stage .gl-area, html[data-theme="dark"] .nx-root .pf-stage .bd-area, html[data-theme="dark"] .nx-root .pf-stage .pg-card, html[data-theme="dark"] .nx-root .pf-stage .pf-card, html[data-theme="dark"] .nx-root .pf-stage .profiler-note, html[data-theme="dark"] .nx-root .pf-stage .hg-card, html[data-theme="dark"] .nx-root .pf-stage .nx-old, html[data-theme="dark"] .nx-root .pf-stage .bd-page > :not(.bd-tabs):not(.bd-area) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), var(--pf-shadow); }
/* the head cards: a small tilt toward the pointer and a lift, only while a pointer is over the card and not over a control (the flat card turns, its content turns with it, no 3D transform context) */
.nx-root .hg-card { transform: perspective(1000px) rotateX(var(--hg-rx, 0deg)) rotateY(var(--hg-ry, 0deg)) translateY(var(--hg-lift, 0px)); }
.nx-root .hg-card:hover, .nx-root .hg-card:focus-within { --hg-lift: -4px; transform: perspective(1000px) rotateX(var(--hg-rx, 0deg)) rotateY(var(--hg-ry, 0deg)) translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .nx-root .hg-card, .nx-root .hg-card:hover, .nx-root .hg-card:focus-within { transform: none; } }
/* the page's own subtitle sits straight on the background (not in a card): on a page with the stage it takes the strongest text colour of the theme, so it stays readable on the gradient in every theme (measured by tools/profile-surfaces-shot.mjs, 4.5 or more).
   Example: Daylight, "How each department head spends their time ..." was 2.2 against the periwinkle gradient and is now dark ink on it. */
.nx-root .nx-page:has(.pf-stage) > .nx-sub, .nx-root .nx-page:has(.pf-stage) .nx-w6-line { color: var(--color-text-primary, #1c2340); }

/* ---------------------------------------------------------------- THE APP BACKDROP (11 Nov 2026, Sheraz: "for all pages"; the order of the engineering coordination and the release gate): the SAME mesh and five shapes, mounted ONCE in the shell as the element .nx-fx that was already
   there (nx-shell.jsx, AppBackdrop in depthstage.jsx). It is fixed, behind the page (below the content, the menu, the header and every pop-up, toast, drawer and dialog, which all sit above it), takes no click (pointer-events none, on itself and on every child),
   moves only by transform and only while it may (a real pointer, wider than a phone, no request for less motion, a visible tab), and is hidden by the person's own Colour effects Off or calm choice as before. The server-wide switch depth_stage (Operating model) off puts the three old blobs back
   (data-bd="0"). While the shell draws it, the page stages above draw none of their own (html[data-bd]). No 3D transform context anywhere (the panels get their perspective from their own transform), so nothing here can swallow a click. */
.nx-root .nx-fx[data-bd="1"] { --pf-a: var(--color-accent, #5b6ee1); --pf-b: var(--color-accent-2, #22c3e6); --pf-c: #f472b6; --pf-glow: 16%; --pf-shape: .34; }
html[data-theme="dark"] .nx-root .nx-fx[data-bd="1"] { --pf-glow: 26%; --pf-shape: .5; }
html[data-palette="daylight"] .nx-root .nx-fx[data-bd="1"] { --pf-c: #f472b6; }
html[data-palette="dune"] .nx-root .nx-fx[data-bd="1"] { --pf-c: #d4932f; --pf-glow: 13%; --pf-shape: .3; }
html[data-palette="ocean"] .nx-root .nx-fx[data-bd="1"] { --pf-c: #38bdf8; --pf-glow: 18%; }
html[data-palette="midnight"] .nx-root .nx-fx[data-bd="1"] { --pf-c: #a78bfa; }
html[data-palette="aurora"] .nx-root .nx-fx[data-bd="1"] { --pf-c: #f472b6; --pf-glow: 30%; --pf-shape: .54; }
html[data-palette="forest"] .nx-root .nx-fx[data-bd="1"] { --pf-c: #a3e635; --pf-glow: 24%; }
html[data-palette="ember"] .nx-root .nx-fx[data-bd="1"] { --pf-c: #ef4444; --pf-glow: 24%; --pf-shape: .46; }
.nx-root .nx-fx[data-bd="1"] { overflow: hidden; contain: strict; pointer-events: none;
  background:
    radial-gradient(900px 620px at 8% -8%, color-mix(in srgb, var(--pf-a) var(--pf-glow), transparent), transparent 62%),
    radial-gradient(820px 600px at 96% 4%, color-mix(in srgb, var(--pf-b) var(--pf-glow), transparent), transparent 62%),
    radial-gradient(760px 540px at 62% 104%, color-mix(in srgb, var(--pf-c) calc(var(--pf-glow) * .8), transparent), transparent 64%); }
.nx-root .nx-fx[data-bd="1"] *, .nx-root .nx-fx[data-bd="1"] *::before, .nx-root .nx-fx[data-bd="1"] *::after { pointer-events: none; }
.nx-root .nx-fx[data-bd="1"][data-live="1"][data-paused="0"] .pf-a { animation: pf-drift 46s ease-in-out infinite alternate; }
.nx-root .nx-fx[data-bd="1"][data-live="1"][data-paused="0"] .pf-b { animation: pf-drift-b 52s ease-in-out infinite alternate; }
.nx-root .nx-fx[data-bd="1"][data-live="1"][data-paused="0"] .pf-c { animation: pf-drift 40s ease-in-out infinite alternate; }
.nx-root .nx-fx[data-bd="1"][data-live="1"][data-paused="0"] .pf-d { animation: pf-drift-b 36s ease-in-out infinite alternate; }
.nx-root .nx-fx[data-bd="1"][data-live="1"][data-paused="0"] .pf-e { animation: pf-drift 58s ease-in-out infinite alternate; }
html[data-bd] .nx-root .pf-depth { display: none; }
/* text that sits straight on the background (a page title's sentence) takes the strongest text colour of the theme, as on the profile pages */
/* every page's own opening sentence: straight under the title (.nx-h1 + .nx-sub: Work, Library, Agents), in the page header block (.nx-pph) or a direct child of the page. Measured by tools/backdrop-shot.mjs: Work's sentence was 3.03 on Daylight, 3.6 on Ocean, 3.85 on Dune. */
html[data-bd="on"] .nx-root .nx-page > .nx-sub, html[data-bd="on"] .nx-root .nx-page > .nx-w6-line, html[data-bd="on"] .nx-root .nx-h1 + .nx-sub, html[data-bd="on"] .nx-root .nx-pph .nx-sub, html[data-bd="on"] .nx-root .nx-pph p { color: var(--color-text-primary, #1c2340); }
/* The Classic look is NOT touched by the app backdrop (the coordinator's decision, 11 Nov 2026: Classic stays exactly as it is): no body background, no frame colour, no attribute on <html>. The pages the Classic frame wears from the New look keep their own page layer as before. */
html[data-depth="off"] .nx-root .pf-depth { display: none; }   /* belt for the server-wide kill switch (depthstage.jsx draws no layer when it is off) */
html[data-depth="off"] .nx-root .nx-fx[data-bd="1"] { display: none; }
html.ao-perf .nx-root .nx-fx[data-bd="1"], html.ao-perf .nx-root .pf-depth { display: none; }   /* Performance mode: no shapes at all */

/* THE EVIDENCE TAB (11 Nov 2026, web/src/evidencetab.jsx): a short top screen, four small charts side by side, everything else folded under "See the details".
   Rules: text is 14 px or more; a bar is exactly proportional to its count (a week of 0 is a flat 2 px tick, the unfinished week is hatched); colours are the theme's tokens, the chart colour of each count type is the same as the older charts;
   four across on a laptop, two across on a tablet and a phone, no sideways scroll; nothing animates. Example: "Mails sent" 131, twelve bars, "Wk 24 Aug" under the first and "Wk 9 Nov" under the last, "Busiest week: 14 (week of 12 Oct)". */
.nx-root .et-top h2 { margin: 0 0 8px; font-size: 18px; }
.nx-root .et-read { margin: 0 0 8px; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--color-text-primary, #1c2340); }
.nx-root .et-level { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 6px; font-size: 15px; }
.nx-root .et-level .pg-pill { color: var(--color-text-primary, #1c2340); background: color-mix(in srgb, var(--color-surface, #fff) 86%, var(--et-lv, #5b6ee1)); border: 1.5px solid var(--et-lv, #5b6ee1); }
.nx-root .et-level .pg-pill[data-et-level="strong"] { --et-lv: #0b8f68; }
.nx-root .et-level .pg-pill[data-et-level="fair"] { --et-lv: #9a6f00; }
.nx-root .et-level .pg-pill[data-et-level="thin"] { --et-lv: #b3261e; border-style: dashed; }
.nx-root .et-notseen { margin: 0 0 14px; font-size: 14px; color: var(--color-text-muted, #5b6486); }
.nx-root .et-minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.nx-root .et-mini { margin: 0; padding: 12px 12px 10px; min-width: 0; border-radius: 12px; border: 1px solid var(--pf-edge, var(--color-border-subtle, #dfe3f3)); background: color-mix(in srgb, var(--et-color, #1f6fd1) 7%, var(--color-surface, #fff)); }
.nx-root .et-mini figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.nx-root .et-mini-name { font-size: 14px; font-weight: 650; color: var(--color-text-primary, #1c2340); }
.nx-root .et-mini-total { font-size: 20px; color: var(--et-color, #1f6fd1); }
.nx-root .et-bars { display: flex; align-items: flex-end; gap: 3px; height: 56px; border-bottom: 1px solid var(--color-border-subtle, #c9cfe6); }
.nx-root .et-bar { flex: 1 1 0; min-width: 3px; border-radius: 3px 3px 0 0; background: var(--et-color, #1f6fd1); }
.nx-root .et-bar.et-zero { background: var(--color-text-muted, #8a93b5); opacity: .7; border-radius: 0; }
.nx-root .et-bar.et-sofar { background: repeating-linear-gradient(135deg, var(--et-color, #1f6fd1) 0 3px, transparent 3px 6px); outline: 1px dashed var(--et-color, #1f6fd1); outline-offset: -1px; }
.nx-root .et-axis { display: flex; justify-content: space-between; margin: 3px 0 6px; font-size: 14px; color: var(--color-text-muted, #5b6486); }
.nx-root .et-words { margin: 0; font-size: 14px; line-height: 1.4; color: var(--color-text-muted, #5b6486); }
.nx-root .et-details { margin-top: 4px; }
.nx-root .et-details > summary { cursor: pointer; font-weight: 650; padding: 6px 0; color: var(--color-link, #3a5bd9); }
.nx-root .et-details > summary:focus-visible { outline: 3px solid var(--color-focus, #22c3e6); outline-offset: 2px; }
.nx-root .et-topic { margin: 12px 0 0; }
.nx-root .et-topic h3 { margin: 0 0 6px; font-size: 16px; }
.nx-root .et-claims { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.nx-root .et-claims li { font-size: 15px; line-height: 1.45; }
.nx-root .et-chip { color: var(--color-text-primary, #1c2340); background: var(--color-surface-2, #eef0fb); border-color: var(--color-border-subtle, #c9cfe6); font-size: 14px; font-weight: 600; }
.nx-root .et-foot { margin: 14px 0; }
.nx-root .et-foot p { margin: 0 0 6px; }
.nx-root .et-details .pg-card, .nx-root .et-details .nx-pp-card { margin-top: 14px; box-shadow: none; }
@media (max-width: 1100px) { .nx-root .et-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .nx-root .et-minis { gap: 8px; } .nx-root .et-mini { padding: 10px 8px 8px; } }
/* the chip under a claim: its own tint from the theme text colour, so it reads on light and dark themes alike (the header chip of the person page is white on dark) */
.nx-root .et-claims .et-chip { color: var(--color-text-primary, #1c2340); background: color-mix(in srgb, var(--color-text-primary, #1c2340) 9%, var(--color-surface, #fff)); border: 1px solid color-mix(in srgb, var(--color-text-primary, #1c2340) 28%, transparent); }

/* THE PERSON PAGE TOOLBAR (11 Nov 2026, Sheraz: the controls "should be on the top"; web/src/nx-personprofile.jsx). ONE slim sticky row above the hero: Back at the left, the period chips (with Custom) in the middle,
   the counted date, Print and "Change who they report to" at the right. A closed reports-to form takes no room; the open form and the Custom dates sit in a full-width row under it.
   Rules: sticky under the app header at the same offset as the task bar (nx-task.css); z-index 5, below every pop-up, toast and drawer; it is part of the page flow, nothing sits over a control; a phone gets two tidy rows (Back and the actions, then the chips).
   The page title and its one short sentence share one line. Example: [← Back to Time]   (Yesterday  7 days  4 weeks  This month  Custom)   Counted 10 Nov  [Print or save as PDF]  [Change who they report to]. */
.nx-root .pp-tool { position: sticky; top: calc(var(--nx-header-h, 56px) + var(--nx-s4, 12px)); z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "l c r"; align-items: center; gap: 8px 14px; margin: 0 0 14px; padding: 8px 14px; min-width: 0; box-sizing: border-box;
  border: 1px solid var(--pf-edge, var(--color-border-subtle, #dfe3f3)); border-radius: var(--pf-radius, 14px); background: var(--color-surface, #fff); box-shadow: var(--pf-shadow, 0 1px 3px #0002); }
.nx-root .pp-tool-l { grid-area: l; display: flex; align-items: center; min-width: 0; }
.nx-root .pp-tool-c { grid-area: c; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-width: 0; }
.nx-root .pp-tool-r { grid-area: r; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; min-width: 0; }
.nx-root .pp-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; white-space: nowrap; font-size: 15px; }
.nx-root .pp-tool-range, .nx-root .pp-tool .nx-su__dept { grid-column: 1 / -1; }
.nx-root .pp-tool .nx-su__dept { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--color-border-subtle, #dfe3f3); }
.nx-root .pp-tool .nx-chip, .nx-root .pp-tool .nx-btn { min-height: 34px; }
@media (max-width: 1100px) { .nx-root .pp-tool { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l r" "c c"; } .nx-root .pp-tool-c { justify-content: flex-start; } }
/* a phone: three short rows at most (Back when there is one, the period chips in ONE row that scrolls inside itself, then the counted date and the print icon), so the person card is on the first screen */
@media (max-width: 520px) { .nx-root .pp-tool { position: static; padding: 8px 10px; grid-template-columns: 1fr; grid-template-areas: "l" "c" "r"; gap: 6px; } .nx-root .pp-tool-l:empty { display: none; } .nx-root .pp-tool-c { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: thin; } .nx-root .pp-tool-c .nx-chip { flex: none; min-height: 44px; } .nx-root .pp-tool .pp-print { min-width: 44px; min-height: 44px; } .nx-root .pp-tool-r { justify-content: space-between; flex-wrap: nowrap; } }
.nx-root .pp-print { min-width: 40px; padding-left: 10px; padding-right: 10px; display: inline-flex; align-items: center; justify-content: center; }
@media print { .nx-root .pp-tool { display: none; } }
/* the title and its one short sentence on one line */
.nx-root .nx-page:has(.pp-tool) > .nx-h1 { display: inline-block; margin-right: 12px; vertical-align: baseline; }
.nx-root .nx-page:has(.pp-tool) > .nx-sub { display: inline-block; margin: 0; vertical-align: baseline; }
.nx-root .nx-page:has(.pp-tool) > .pf-stage { margin-top: 10px; }
/* the open reports-to form: the two fields side by side, the note full width, the three buttons in one row (the older stacked layout made it tall) */
.nx-root .pp-tool .nx-su__dept { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.nx-root .pp-tool .nx-su__dept > label { flex: 1 1 280px; min-width: 0; }
.nx-root .pp-tool .nx-su__dept > p, .nx-root .pp-tool .nx-su__dept > [role="alert"] { flex-basis: 100%; margin: 0; }
.nx-root .pp-tool .nx-su__dept .nx-btn, .nx-root .pp-tool .nx-su__dept button { width: auto; }

/* THE TOP OF THE PROFILE PAGES, MORE COMPACT (11 Nov 2026, from the live h442 screenshot of My profile at 1527 x 784: the nine-tab strip started at the very bottom edge of the first screen, only its top 5 px showed; Sheraz's complaint was "tabs are not visible to the user").
   Goal: the nine-tab strip is fully inside the first screen at 1527 x 784 and at 1366 x 700, with the person card above it. How: a thinner cover banner and a smaller avatar on My profile (only the Profile page draws .nx-w6b-hero), a tighter person header and tiles on every person page, smaller gaps.
   Hierarchy: My profile's own row (Overview, Preferences, Memory, Training) stays the page's tabs; the nine-tab strip is the person card's tabs. Measured by tools/profile-surfaces-shot.mjs (the strip's bottom edge against the window height).
   Example: 1527 x 784 -> the strip's bottom edge at about 700 px (it was 840). */
.nx-root .nx-w6b-hero .nx-w6b-cover { height: 44px; }
.nx-root .nx-w6b-hero .nx-w6b-hero__av { margin-top: -30px; }
.nx-root .nx-w6b-hero .nx-avbtn--xl .nx-pic, .nx-root .nx-w6b-hero .nx-pic--xl { width: 72px; height: 72px; font-size: 28px; border-width: 3px; }
.nx-root .nx-w6b-hero .nx-w6b-hero__body { padding-bottom: var(--nx-s3); gap: var(--nx-s1) var(--nx-s4); }
.nx-root .nx-w6b-hero .nx-w6b-hero__who { padding-top: var(--nx-s2); gap: var(--nx-s1); }
.nx-root .nx-w6b-hero { margin-bottom: var(--nx-s3); }
.nx-root .nx-w6-tabs { margin-bottom: var(--nx-s2); }
.nx-root .nx-w6-line { margin: 0 0 var(--nx-s2); }
/* the person card (every person page and My profile) */
.nx-root .pg-stage { padding: 16px 22px 14px; }
.nx-root .pg-av { width: 56px; height: 56px; border-radius: 17px; font-size: 21px; }
.nx-root .pg-who { gap: 14px; }
.nx-root .pg-name { font-size: 25px; }
.nx-root .pg-role { margin: 0 0 6px; }
.nx-root .pg-tiles { margin-top: 12px; gap: 10px; }
.nx-root .pg-tile { padding: 9px 13px; }
.nx-root .pg-tile-ic { width: 24px; height: 24px; margin-bottom: 4px; border-radius: 8px; }
.nx-root .pg-tile b { font-size: 27px; }
.nx-root .pg-tile b.pg-tile-why { font-size: 16px; }
.nx-root .pp-tool { margin-bottom: 10px; }
@media (min-width: 521px) { .nx-root .pp-tool { padding: 6px 12px; } }   /* a phone keeps its own 8px 10px from pptoolbar.css */
.nx-root .pg { gap: 12px; }
@media (max-width: 700px) { .nx-root .nx-w6b-hero .nx-w6b-cover { height: 40px; } .nx-root .pg-stage { padding: 14px 14px 12px; } }
/* A SHORT WINDOW (1366 x 700, 13 Nov 2026 check): the floating "Show me how" button covered the last tab (Evidence) of My profile's strip. On a window under 760 px high My profile drops its one-line description and thins the cover, so the strip ends above the floating buttons.
   Example: 1366 x 700 -> the strip's bottom edge at about 610 px; the floating button starts at 638 px. */
@media (max-height: 760px) { .nx-root .nx-w6b-hero .nx-w6b-cover { height: 24px; } .nx-root .nx-w6-line { display: none; } }

/* THE FILLED TABS of the person page (13 Nov 2026; web/src/depthtabs.jsx): icon rows and count bars inside the same solid card as every other card. Built before nx-w17.css.
   Example: a row "mail icon + Mail 310 now, 280 before (+30)" and a bar "Order Desk ====== 40". */
.nx-root .pd-card h2 { display: flex; align-items: center; gap: 8px; }
.nx-root .pd-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: var(--color-accent-text, #3a5bd9); background: var(--color-surface-nested, #eef0fa); }
.nx-root .pd-rows { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.nx-root .pd-rows li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; }
.nx-root .pd-row-ic { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--color-accent-text, #3a5bd9); background: var(--color-surface-nested, #eef0fa); }
.nx-root .pd-bars { margin: 10px 0 0; display: grid; gap: 8px; }
.nx-root .pd-bar { display: grid; grid-template-columns: minmax(110px, 200px) minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.nx-root .pd-bar i { display: block; height: 12px; border-radius: 8px; overflow: hidden; background: var(--color-surface-nested, #eef0fa); }
.nx-root .pd-bar s { display: block; height: 100%; border-radius: 8px; text-decoration: none; background: linear-gradient(90deg, var(--color-accent, #3a5bd9), var(--color-accent-2, #22c3e6)); }
.nx-root .pd-bar b { font-variant-numeric: tabular-nums; }
.nx-root .pd-note { margin: 10px 0 0; }
.nx-root .pd-line { margin-top: 4px; }
@media (max-width: 520px) { .nx-root .pd-bar { grid-template-columns: minmax(0, 1fr) auto; } .nx-root .pd-bar i { grid-column: 1 / -1; grid-row: 2; } }
/* THE PERSON'S OWN CALENDAR, READ LIVE (14 Nov 2026; web/src/ownlive.jsx): the weekday strip and the "How this is counted" fold. Example: seven small columns Mon to Sun with the count under each. */
.nx-root .ol-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 12px 0 4px; }
.nx-root .ol-cell { display: grid; justify-items: center; gap: 4px; }
.nx-root .ol-cell i { display: flex; align-items: flex-end; width: 100%; max-width: 44px; height: 56px; border-radius: 8px; background: var(--color-surface-nested, #eef0fa); overflow: hidden; }
.nx-root .ol-cell s { display: block; width: 100%; text-decoration: none; background: linear-gradient(0deg, var(--color-accent, #3a5bd9), var(--color-accent-2, #22c3e6)); }
.nx-root .ol-cell b { font-variant-numeric: tabular-nums; }
.nx-root .ol-how { margin: 4px 0 0; }
.nx-root .ol-how summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; font-size: 13px; color: var(--color-accent-text, #3a5bd9); }
.nx-root .ol-how summary::before { content: "\25B8"; display: inline-block; width: 1.1em; }
.nx-root .ol-how[open] summary::before { content: "\25BE"; }
.nx-root .ol-how p { margin: 4px 0; font-size: 13px; line-height: 1.45; }
/* Agent Office work tab (15 Nov 2026, agentwork.jsx): one top line, one card per agent, a status pill, system chips, one watch line */
.nx-root .aw-top { margin: 8px 0 4px; font-size: 16px; font-weight: 600; line-height: 1.4; }
.nx-root .aw-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.nx-root .aw-agent { display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 14px; border: 1px solid var(--color-border, #e3e6f0); background: var(--color-surface-nested, #f6f7fc); min-width: 0; }
.nx-root .aw-agent p { margin: 0; overflow-wrap: anywhere; }
.nx-root .aw-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.nx-root .aw-name { font-size: 15px; overflow-wrap: anywhere; }
.nx-root .aw-st { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e3e6f0); white-space: nowrap; }
.nx-root .aw-st[data-aw-st="live"] { color: var(--color-success-text, #11703f); border-color: currentColor; }
.nx-root .aw-st[data-aw-st="paused"], .nx-root .aw-st[data-aw-st="waiting"] { color: var(--color-warning-text, #8a5a00); border-color: currentColor; }
.nx-root .aw-st[data-aw-st="retired"] { color: var(--color-text-muted, #5b6075); }
.nx-root .aw-for { line-height: 1.45; }
.nx-root .aw-sys { display: flex; flex-wrap: wrap; gap: 6px; }
.nx-root .aw-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 8px; border-radius: 8px; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e3e6f0); }
.nx-root .aw-chip i { font-style: normal; color: var(--color-text-muted, #5b6075); }
.nx-root .aw-chip[data-aw-change="1"] i { color: var(--color-warning-text, #8a5a00); font-weight: 600; }
.nx-root .aw-watch { display: flex; align-items: flex-start; gap: 6px; color: var(--color-text-muted, #5b6075); }
.nx-root .aw-watch--on { color: var(--color-warning-text, #8a5a00); font-weight: 600; }
.nx-root .aw-how p { margin: 6px 0; }
@media (max-width: 480px) { .nx-root .aw-list { grid-template-columns: 1fr; } }
/* THE "ALL HEADS TOGETHER" FIGURES (14 Nov 2026; nx-companypage.jsx TimeSummary): the four real totals in one wrapping row under the sentence. Example: "[send] 175 mails sent  [clock] 87% answered within 24 hours (82 of 94 questions, 2 heads with a shown band)  [calendar] 25 calendar entries  [agent] 726 requests to agents". */
.nx-root .nx-co-tot { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.nx-root .nx-co-tot li { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; }
.nx-root .nx-co-tot b { font-variant-numeric: tabular-nums; font-size: 18px; }

/* WHERE THE ATTENTION GOES, THE CHART (13 Nov 2026; web/src/focuscard.jsx): the hexagon inside the same solid card as every other card, with the rows of the depth tabs under it. Built before nx-w17.css (like depthtabs.css).
   Example: a 560 x 320 drawing scaled to the card width; on a phone the labels shrink and the rows below carry the full words. */
.nx-root .fc-hex { display: block; width: 100%; max-width: 640px; height: auto; margin: 8px auto 4px; overflow: visible; }
.nx-root .fc-ring { fill: none; stroke: var(--color-border-subtle, #c9cfe8); stroke-width: 1; }
.nx-root .fc-spoke { stroke: var(--color-border-subtle, #c9cfe8); stroke-width: 1; }
.nx-root .fc-shape { fill: var(--color-accent, #3a5bd9); fill-opacity: .22; stroke: var(--color-accent, #3a5bd9); stroke-width: 2.5; stroke-linejoin: round; }
.nx-root .fc-dot { fill: var(--color-accent, #3a5bd9); }
.nx-root .fc-label { fill: var(--color-text-primary, #1c2340); font-size: 14px; }
.nx-root .fc-label-b { font-weight: 700; }
.nx-root .fc-label-s { font-size: 13px; fill: var(--color-text-secondary, #4a5170); font-variant-numeric: tabular-nums; }
.nx-root .fc-how { margin: 8px 0 6px; }
.nx-root .fc-how summary::before { content: "\25B8"; display: inline-block; width: 1.2em; }
.nx-root .fc-how[open] summary::before { content: "\25BE"; }
.nx-root .fc-how summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.nx-root .fc-card .pd-rows { margin-top: 6px; }
@media (max-width: 520px) { .nx-root .fc-label { font-size: 12px; } .nx-root .fc-label-s { font-size: 11px; } }

/* ADMIN > TODAY (release 1, 9 Nov 2026; mock in backbone-review/admin-redesign-2026-11). Tokens only; listed before nx-w17.css in build.mjs. */
.nx-root .nx-adt { display: grid; gap: var(--nx-s4); }
.nx-root .nx-adt-card { border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); box-shadow: var(--nx-shadow); overflow: hidden; }
.nx-root .nx-adt-title { display: flex; justify-content: space-between; align-items: center; gap: var(--nx-s3); margin: 0; padding: var(--nx-s3) var(--nx-s4); font-size: var(--nx-fs-h3); border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-adt-title .nx-small { font-weight: 500; color: var(--nx-muted); }
.nx-root .nx-adt-list { list-style: none; margin: 0; padding: 0; }
.nx-root .nx-adt-row { display: grid; grid-template-columns: 36px 1fr auto; gap: var(--nx-s3); align-items: center; padding: var(--nx-s3) var(--nx-s4); border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-adt-row:last-child { border-bottom: 0; }
.nx-root .nx-adt-row b { display: block; }
.nx-root .nx-adt-row .nx-small { color: var(--nx-muted); font-size: 14px; }
.nx-root .nx-adt-ico { width: 36px; height: 36px; padding: 8px; box-sizing: border-box; border-radius: var(--nx-r1); background: var(--nx-amber-soft); color: var(--nx-amber-text); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-adt-calm { margin: 0; padding: var(--nx-s4); color: var(--nx-muted); font-weight: 700; }
.nx-root .nx-adt-health { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.nx-root .nx-adt-h { display: grid; gap: var(--nx-s1); align-content: start; padding: var(--nx-s3) var(--nx-s4); border-bottom: 1px solid var(--nx-line); border-right: 1px solid var(--nx-line); }
.nx-root .nx-adt-h b { display: flex; justify-content: space-between; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-adt-h p { margin: 0; color: var(--nx-muted); font-size: 14px; }
.nx-root .nx-adm-back { margin: 0 0 var(--nx-s3); }
@media (max-width: 640px) { .nx-root .nx-adt-health { grid-template-columns: 1fr; } .nx-root .nx-adt-h { border-right: 0; } }

/* ADMIN > PLATFORM > SETTINGS FRAME (release 2): a search box, a list of groups, one group shown at a time */
.nx-root .nx-set__search { margin-bottom: var(--nx-s3); }
.nx-root .nx-set__search .nx-input { width: 100%; max-width: 520px; }
.nx-root .nx-set__split { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--nx-s4); align-items: start; }
.nx-root .nx-set__nav { display: grid; gap: var(--nx-s1); position: sticky; top: var(--nx-s3); }
.nx-root .nx-set__g { padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r1); color: var(--nx-muted); font-weight: 700; text-decoration: none; }
.nx-root .nx-set__g:hover { background: var(--nx-side-hover); }
.nx-root .nx-set__g[aria-current="page"] { background: var(--nx-side-hover); color: var(--nx-text); box-shadow: inset 3px 0 0 var(--nx-focus); }
.nx-root .nx-set__g.is-page { border-top: 1px solid var(--nx-line); border-radius: 0 var(--nx-r1) var(--nx-r1) 0; }
.nx-root .nx-set__body { min-width: 0; }
.nx-root .nx-set-off { display: none; }
.nx-root .nx-set-sec:not(:has(.nx-w20-set)):not(:has(.nx-w14-defs)) { display: none; }
@media (max-width: 760px) { .nx-root .nx-set__split { grid-template-columns: 1fr; } .nx-root .nx-set__nav { display: flex; overflow-x: auto; position: static; } .nx-root .nx-set__g { white-space: nowrap; } }

/* The QwenWork page (administrators only): five tiles, a bar chart of the last 7 days, credits, who is connected, the last errors, folded settings.
   Every colour is a theme token, so the page follows all seven themes. Counts only; no prompt, reply or file name ever shows here.
   Example (made up): a day with 47 tasks of which 3 failed is a green column with a thin red top (.qwp-col holds .qwp-ok 94% and .qwp-er 6%); a person who must connect again gets an amber dot (.qwp-dot.is-warn). */
.qwp { display: block; color: var(--color-text-primary); }
.qwp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.qwp-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.qwp-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 999px; padding: 2px 10px; font-size: 12px; color: var(--color-text-secondary); }
.qwp-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 12px; }
.qwp-tile, .qwp-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--rad, 10px); box-shadow: var(--shadow-card); padding: 14px; }
.qwp-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--color-accent-soft); color: var(--color-accent); margin-bottom: 8px; }
.qwp-tile.is-bad .qwp-ic { background: var(--color-error-soft); color: var(--color-error); }
.qwp-tile.is-off .qwp-ic { background: var(--color-surface-nested); color: var(--color-text-muted); }
.qwp-n { font-size: 28px; font-weight: 650; line-height: 1.1; color: var(--color-text-primary); }
.qwp-n small { font-size: 14px; font-weight: 400; color: var(--color-text-muted); }
.qwp-l { color: var(--color-text-muted); font-size: 12px; }
.qwp-bar { height: 6px; border-radius: 4px; background: var(--color-surface-nested); overflow: hidden; margin-top: 8px; display: flex; }
.qwp-bar i { display: block; height: 100%; }
.qwp-ok { background: var(--color-success); }
.qwp-er { background: var(--color-error); }
.qwp-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; margin-bottom: 12px; }
.qwp-card h2 { font-size: 14px; margin: 0 0 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--color-text-primary); }
.qwp-card h2 small { font-weight: 400; color: var(--color-text-muted); }
.qwp-days { display: flex; align-items: flex-end; gap: 10px; height: 110px; }
.qwp-day { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.qwp-col { width: 100%; max-width: 46px; border-radius: 5px 5px 0 0; display: flex; flex-direction: column-reverse; overflow: hidden; background: var(--color-surface-nested); }
.qwp-col i { display: block; }
.qwp-day span { font-size: 11px; color: var(--color-text-muted); }
.qwp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-success); display: inline-block; flex: none; }
.qwp-dot.is-warn { background: var(--color-warning); }
.qwp-dot.is-off { background: var(--color-text-disabled); }
.qwp-dot.is-bad { background: var(--color-error); }
.qwp-row { display: grid; grid-template-columns: 18px 1fr 50px 80px; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--color-border-subtle); color: var(--color-text-primary); }
.qwp-row:first-of-type { border-top: 0; }
.qwp-num { text-align: right; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.qwp-err { display: grid; grid-template-columns: 100px 1fr auto; gap: 10px; padding: 6px 0; border-top: 1px solid var(--color-border-subtle); align-items: center; color: var(--color-text-primary); }
.qwp-err:first-of-type { border-top: 0; }
.qwp-err time { color: var(--color-text-muted); font-size: 12px; }
.qwp-tag { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--color-error-soft); color: var(--color-error); }
.qwp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qwp-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--color-accent-soft); color: var(--color-accent-text); }
.qwp-chip.is-more { background: var(--color-surface-nested); color: var(--color-text-muted); }
.qwp-sub { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin: 14px 0 6px; }
.qwp-note { font-size: 12px; color: var(--color-text-muted); margin-top: 6px; }
.qwp-fold { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--rad, 10px); padding: 10px 14px; }
.qwp-fold summary { cursor: pointer; font-weight: 600; color: var(--color-text-primary); }
.qwp-fold .qwp-set { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.qwp-fold .qwp-line { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 860px) { .qwp-tiles { grid-template-columns: repeat(2, 1fr); } .qwp-grid { grid-template-columns: 1fr; } }
.qwp .qwp-day span { color: var(--color-text-muted); }
.qwp .ant-btn-link { color: var(--color-link); }

/* W17, Mail of the redesigned look (nx-mail.jsx): the three panes (folders, list, reading pane), the Assistant block, the mailbox tools and the connect card.
   Every rule starts with .nx-root (qa-2026-10-21-nx-css-scoped) and takes its colours from the --nx-* tokens only, so all seven themes follow (tools/nx-contrast.mjs has the Mail pairs).
   Motion is only declared inside prefers-reduced-motion: no-preference. Appended LAST in web/build.mjs. Phone (up to 860 px): the panes are three views, one at a time, with Back. */

.nx-root .nx-ml-wrap { display: grid; gap: var(--nx-s2); min-width: 0; align-content: start; }
.nx-root .nx-ml-wrap > * { min-width: 0; }
/* full screen: the inbox fills the window (the button at the top right of Mail, Esc to leave) */
.nx-root .nx-ml-fullbtn { justify-self: end; min-height: 32px; padding: 0 var(--nx-s3); font-size: var(--nx-fs-small); }
@media (max-width: 860px) { .nx-root .nx-ml-fullbtn { min-height: 40px; } }   /* CR-READY: a touch target is 40 px */
/* the main column is a stacking context (z-index 1) under the fixed menu (70): a full screen inside it has to lift the whole column above the menu, or the menu covers its left edge (Sheraz, 23 Oct 2026) */
.nx-root:has(.nx-ml-wrap.is-full) .nx-main, .nx-root:has(.nx-chat.is-full) .nx-main { z-index: 1300; }
.nx-root .nx-ml-wrap.is-full { position: fixed; inset: 0; z-index: 1300; overflow: auto; padding: var(--nx-s3); background: var(--nx-bg); align-content: start; }
.nx-root .nx-ml-page { display: grid; gap: var(--nx-s4); min-width: 0; align-content: start; }
.nx-root .nx-ml-page > * { min-width: 0; }
.nx-root .nx-ml-pad { padding: var(--nx-s4); margin: 0; }
.nx-root .nx-ml-err { margin: 0; padding: var(--nx-s3) var(--nx-s4); border: 1px solid var(--nx-danger); border-radius: var(--nx-r1); background: var(--nx-bad-soft); color: var(--nx-bad-text); overflow-wrap: anywhere; }
.nx-root .nx-ml-linkbtn { display: inline-flex; align-items: center; min-height: var(--nx-tap); padding: 0 var(--nx-s2); border: 0; background: none; color: var(--nx-link); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ---------------------------------------------------------------- heading and the tools row */
.nx-root .nx-ml-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s2) var(--nx-s4); }
.nx-root .nx-ml-head__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-ml-head__acts { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-ml-head__sub { flex: 1 1 100%; margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-ml-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--nx-s4) var(--nx-s5); align-items: start; }
.nx-root .nx-ml-tool { display: grid; gap: var(--nx-s2); justify-items: start; align-content: start; min-width: 0; }
.nx-root .nx-ml-tool p { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-ml-switch { display: inline-flex; align-items: center; gap: var(--nx-s2); min-height: var(--nx-tap); padding: 0 var(--nx-s3); border: 1px solid var(--nx-control-line); border-radius: var(--nx-r1); background: var(--nx-surface); font-weight: 700; cursor: pointer; }
.nx-root .nx-ml-switch input { width: 20px; height: 20px; margin: 0; accent-color: var(--nx-blue); cursor: inherit; }

/* ---------------------------------------------------------------- the three panes */
.nx-root .nx-ml { display: grid; grid-template-columns: 220px minmax(300px, 380px) minmax(0, 1fr); min-height: 520px; border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); box-shadow: var(--nx-shadow); overflow: hidden; min-width: 0; }
.nx-root .nx-ml > * { min-width: 0; }
.nx-root .nx-ml-back, .nx-root .nx-ml-foldbtn { display: none; }

/* folders */
.nx-root .nx-ml-folders { display: grid; align-content: start; gap: var(--nx-s1); padding: var(--nx-s3); border-right: 1px solid var(--nx-line); background: var(--nx-bg); }
.nx-root .nx-ml-folder { display: flex; align-items: center; gap: var(--nx-s2); width: 100%; min-height: var(--nx-tap); padding: 0 var(--nx-s3); border: 0; border-radius: var(--nx-r1); background: none; color: var(--nx-text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.nx-root .nx-ml-folder:hover { background: var(--nx-hover); }
.nx-root .nx-ml-folder[aria-current="true"] { background: var(--nx-blue-soft); color: var(--nx-blue-text); box-shadow: inset 3px 0 0 var(--nx-blue); }
.nx-root .nx-ml-folder__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-ml-folder .nx-count { flex: none; }
.nx-root .nx-ml-conf { display: grid; gap: var(--nx-s1); margin-top: var(--nx-s3); padding-top: var(--nx-s3); border-top: 1px solid var(--nx-line); }
.nx-root .nx-ml-conf .nx-small { display: flex; align-items: center; gap: var(--nx-s2); padding: 0 var(--nx-s3); }
.nx-root .nx-ml-conf__note { margin: 0; padding: 0 var(--nx-s3); }
.nx-root .nx-ml-conflist { display: grid; gap: var(--nx-s2); justify-items: start; min-width: 0; }
.nx-root .nx-ml-conflist p { margin: 0; }
.nx-root .nx-ml-conflist__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s1); max-width: 100%; }
.nx-root .nx-ml-conflist__rows .nx-ml-switch { overflow-wrap: anywhere; }
.nx-root .nx-ml-folder--conf { color: var(--nx-muted); font-weight: 600; white-space: normal; }

/* list */
.nx-root .nx-ml-list { display: flex; flex-direction: column; border-right: 1px solid var(--nx-line); min-width: 0; }
.nx-root .nx-ml-list__bar { display: grid; gap: var(--nx-s2); padding: var(--nx-s3); border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-ml-list__bar p { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-ml-search { display: flex; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-ml-search .nx-input { flex: 1 1 120px; min-width: 0; }
.nx-root .nx-ml-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-ml-sort { margin-left: auto; }
.nx-root .nx-ml-list__rows { flex: 1 1 auto; min-height: 280px; max-height: calc(calc(100 * var(--ao-vh)) - 330px); overflow: auto; }
.nx-root .nx-ml-rows { list-style: none; margin: 0; padding: 0; }
.nx-root .nx-ml-row { display: flex; align-items: flex-start; gap: var(--nx-s3); min-height: 72px; padding: var(--nx-s3) var(--nx-s4); border-bottom: 1px solid var(--nx-line); color: var(--nx-text); text-decoration: none; min-width: 0; }
.nx-root .nx-ml-row:hover { background: var(--nx-hover); }
.nx-root .nx-ml-row.is-on { background: var(--nx-blue-soft); box-shadow: inset 3px 0 0 var(--nx-blue); }
.nx-root .nx-ml-row__dot { flex: none; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: transparent; }
.nx-root .nx-ml-row.is-unread .nx-ml-row__dot { background: var(--nx-blue); }
.nx-root .nx-ml-row__main { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.nx-root .nx-ml-row__top { display: flex; justify-content: space-between; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-ml-row__who, .nx-root .nx-ml-row__subj, .nx-root .nx-ml-row__prev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nx-root .nx-ml-row__time { flex: none; }
.nx-root .nx-ml-row__subj { font-weight: 600; }
.nx-root .nx-ml-row.is-unread .nx-ml-row__who, .nx-root .nx-ml-row.is-unread .nx-ml-row__subj { font-weight: 800; }
.nx-root .nx-ml-row__marks { display: inline-flex; flex-direction: column; align-items: flex-end; gap: var(--nx-s1); flex: none; color: var(--nx-muted); }
.nx-root .nx-ml-flag { display: inline-block; margin-right: var(--nx-s1); padding: 0 6px; border-radius: var(--nx-rfull); background: var(--nx-bad-soft); color: var(--nx-bad-text); font-weight: 800; }

/* reading pane */
.nx-root .nx-ml-read { padding: var(--nx-s5); min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-ml-msg { display: grid; gap: var(--nx-s4); min-width: 0; }
.nx-root .nx-ml-msg__head { display: grid; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-ml-msg__head p { margin: 0; }
.nx-root .nx-ml-msg__subj { margin: 0; font-size: var(--nx-fs-h2); line-height: 1.25; font-weight: 800; outline: none; }
.nx-root .nx-ml-acts { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-ml-acts .nx-btn[aria-pressed="true"] { background: var(--nx-blue-soft); color: var(--nx-blue-text); border-color: var(--nx-blue); }
.nx-root .nx-ml-body { border: 1px solid var(--nx-line); border-radius: var(--nx-r1); overflow: hidden; min-width: 0; }
.nx-root .nx-ml-compose { display: grid; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-ml-notsent { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); margin: 0; }
/* the old editor card sits straight in the pane: no second frame round it */
.nx-root .nx-ml-compose .nx-old { border: 0; padding: 0; background: none; min-height: 0; }

/* attachments: a name, a size, a safe preview and a download, each on the person's own press */
.nx-root .nx-ml-atts { display: grid; gap: var(--nx-s2); }
.nx-root .nx-ml-atts .nx-h3, .nx-root .nx-ml-thread .nx-h3, .nx-root .nx-ml-as .nx-h3 { margin: 0; }
.nx-root .nx-ml-atts p { margin: 0; }
.nx-root .nx-ml-atts__list, .nx-root .nx-ml-thread__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-ml-att { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2) var(--nx-s3); padding: var(--nx-s2) var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-r1); background: var(--nx-surface); min-width: 0; }
.nx-root .nx-ml-att__name { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.nx-root .nx-ml-att__acts { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-ml-att__acts a.nx-btn { text-decoration: none; }

/* the Assistant block */
.nx-root .nx-ml-as { display: grid; gap: var(--nx-s3); padding: var(--nx-s4); border: 1px solid var(--nx-blue); border-radius: var(--nx-r2); background: var(--nx-blue-soft); min-width: 0; }
.nx-root .nx-ml-as p { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-ml-as .nx-small { color: var(--nx-muted); }
.nx-root .nx-ml-as__row { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-ml-as__row .nx-btn[aria-pressed="true"] { border-color: var(--nx-blue); color: var(--nx-blue-text); }
.nx-root .nx-ml-as__text { width: 100%; min-height: 120px; padding: var(--nx-s2) var(--nx-s3); resize: vertical; box-sizing: border-box; flex: none; font: inherit; }
.nx-root .nx-ml-as__pick { width: 100%; max-width: 100%; flex: none; }
.nx-root .nx-ml-as .nx-confirm__facts dd { min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-ml-as__made { display: grid; gap: var(--nx-s2); justify-items: start; }

/* conversation */
.nx-root .nx-ml-thread { display: grid; gap: var(--nx-s2); }
.nx-root .nx-ml-trow { display: grid; gap: 2px; min-height: var(--nx-tap); padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r1); color: var(--nx-text); text-decoration: none; }
.nx-root .nx-ml-trow:hover, .nx-root .nx-ml-trow.is-on { background: var(--nx-blue-soft); }
.nx-root .nx-ml-trow__prev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-ml-safe { margin: 0; text-align: center; }

/* connect card */
.nx-root .nx-ml-connect { display: grid; gap: var(--nx-s4); max-width: 640px; }
.nx-root .nx-ml-connect .nx-h3 { margin: 0; }
.nx-root .nx-ml-connect__list { margin: 0; padding-left: var(--nx-s5); display: grid; gap: var(--nx-s2); }
.nx-root .nx-ml-connect__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s3) var(--nx-s5); }

/* ---------------------------------------------------------------- tablet: narrower folders and list */
@media (max-width: 1100px) {
  .nx-root .nx-ml { grid-template-columns: 170px minmax(240px, 300px) minmax(0, 1fr); }
  .nx-root .nx-ml-read { padding: var(--nx-s4); }
}

/* ---------------------------------------------------------------- phone: folders, list and message are three views with Back */
@media (max-width: 860px) {
  .nx-root .nx-ml { display: block; min-height: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
  .nx-root .nx-ml > * { display: none; border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); }
  .nx-root .nx-ml[data-v="folders"] > .nx-ml-folders { display: grid; }
  .nx-root .nx-ml[data-v="list"] > .nx-ml-list { display: flex; }
  .nx-root .nx-ml[data-v="msg"] > .nx-ml-read { display: block; }
  .nx-root .nx-ml-back, .nx-root .nx-ml-foldbtn { display: inline-flex; justify-self: start; }
  .nx-root .nx-ml-foldbtn { justify-content: flex-start; max-width: 100%; overflow-wrap: anywhere; }
  .nx-root .nx-ml-list__rows { max-height: none; min-height: 0; overflow: visible; }
  .nx-root .nx-ml-read { padding: var(--nx-s3); }
  .nx-root .nx-ml-msg__subj { font-size: var(--nx-fs-h3); }
  /* the old editor's colour swatches are 16 px: a thumb needs 40 */
  .nx-root .nx-ml-compose .compose-colours { flex-wrap: wrap; gap: var(--nx-s1); }
  .nx-root .nx-ml-compose .compose-colours button { width: var(--nx-tap); height: var(--nx-tap); }
  .nx-root .nx-ml-head__acts { width: 100%; }
  .nx-root .nx-ml-head__acts .nx-btn { flex: 1 1 auto; }
  .nx-root .nx-ml-sort { margin-left: 0; }
  .nx-root .nx-ml input.nx-input, .nx-root .nx-ml textarea.nx-input, .nx-root .nx-ml select.nx-select, .nx-root .nx-ml-as select.nx-select, .nx-root .nx-ml-as textarea.nx-input { font-size: 16px; }
}
@media (max-width: 380px) {
  .nx-root .nx-ml-row { padding: var(--nx-s3); }
  .nx-root .nx-ml-search { flex-wrap: wrap; }
  .nx-root .nx-ml-search .nx-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-ml-row, .nx-root .nx-ml-folder, .nx-root .nx-ml-trow { transition: background var(--nx-d1); }
}

/* WORKX (22 Oct 2026): the one overlay pattern (design note D) and the extras of Work (All activity, Notifications, My requests, Time given back, the frame of a dashboard or board).
   Every rule starts with .nx-root (the overlay host carries it too). Tokens only. Motion only under prefers-reduced-motion: no-preference. It ships BEFORE nx-w11.css (the responsive layer is last). */

/* ---------------------------------------------------------------- the overlay: head, scrolling body, FIXED footer */
.nx-root .nx-ov__scrim { position: fixed; inset: 0; z-index: 1040; display: flex; align-items: center; justify-content: center; padding: var(--nx-s4); background: var(--nx-scrim); overscroll-behavior: contain; }
.nx-root .nx-ov__scrim--drawer { padding: 0; align-items: stretch; justify-content: flex-end; }
.nx-root .nx-ov { position: relative; display: flex; flex-direction: column; min-height: 0; width: min(640px, 100%); max-height: calc(calc(100 * var(--ao-vh)) - 32px); max-height: calc(calc(100 * var(--ao-dvh)) - 32px); background: var(--nx-surface); color: var(--nx-text); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-lift); }
.nx-root .nx-ov--dialog.nx-ov--s { width: min(480px, 100%); }
.nx-root .nx-ov--dialog.nx-ov--m { width: min(640px, 100%); }
.nx-root .nx-ov--dialog.nx-ov--l { width: min(720px, 100%); }
.nx-root .nx-ov--drawer { height: calc(100 * var(--ao-vh)); height: calc(100 * var(--ao-dvh)); max-height: none; border-radius: 0; border-width: 0 0 0 1px; box-shadow: var(--nx-panel-shadow); }
.nx-root .nx-ov--drawer.nx-ov--s { width: min(440px, 100%); }
.nx-root .nx-ov--drawer.nx-ov--m { width: min(520px, 100%); }
.nx-root .nx-ov--drawer.nx-ov--l { width: min(720px, 100%); }
.nx-root .nx-ov__grip { display: none; }
.nx-root .nx-ov__head { flex: 0 0 auto; display: flex; align-items: flex-start; gap: var(--nx-s3); padding: var(--nx-s4) var(--nx-s5); border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-ov__title { flex: 1 1 auto; min-width: 0; margin: 0; padding-top: 6px; display: flex; align-items: center; gap: var(--nx-s2); font-size: var(--nx-fs-h3); line-height: 1.3; font-weight: 800; overflow-wrap: anywhere; }
.nx-root .nx-ov__title:focus-visible { outline: var(--nx-focus-ring); outline-offset: 3px; border-radius: 6px; }
.nx-root .nx-ov__ico { display: inline-grid; place-items: center; color: var(--nx-blue-text); }
.nx-root .nx-ov__close { flex: 0 0 auto; display: grid; place-items: center; width: var(--nx-tap); height: var(--nx-tap); padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--nx-muted); cursor: pointer; }
.nx-root .nx-ov__close:hover:not(:disabled) { background: var(--nx-hover); color: var(--nx-text); }
.nx-root .nx-ov__close:focus-visible { outline: var(--nx-focus-ring); outline-offset: 2px; }
.nx-root .nx-ov__close:disabled { opacity: .5; cursor: not-allowed; }
.nx-root .nx-ov__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nx-root .nx-ov__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--nx-s5); overflow-wrap: anywhere; }
.nx-root .nx-ov__body img, .nx-root .nx-ov__body table { max-width: 100%; }
.nx-root .nx-ov__err { flex: 0 0 auto; margin: 0; padding: var(--nx-s3) var(--nx-s5); border-top: 1px solid var(--nx-line); background: var(--nx-bad-soft); color: var(--nx-text); font-weight: 700; border-left: 4px solid var(--nx-danger); overflow-wrap: anywhere; }
.nx-root .nx-ov__foot { flex: 0 0 auto; display: grid; gap: var(--nx-s2); padding: var(--nx-s3) var(--nx-s5); padding-bottom: calc(var(--nx-s3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--nx-line); background: var(--nx-surface); border-radius: 0 0 var(--nx-r2) var(--nx-r2); }
.nx-root .nx-ov--drawer .nx-ov__foot { border-radius: 0; }
.nx-root .nx-ov__note { margin: 0; color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }
.nx-root .nx-ov__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--nx-s2); }
.nx-root .nx-ov__ask { display: grid; gap: var(--nx-s2); }
.nx-root .nx-ov__askq { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-dlg__note { margin: 0; flex: 1 1 100%; color: var(--nx-muted); font-size: var(--nx-fs-small); text-align: left; overflow-wrap: anywhere; }
/* the shared dialogs (panel and sheet): the buttons stay in view while the content scrolls */
.nx-root .nx-dlg--panel .nx-dlg__acts, .nx-root .nx-dlg--sheet .nx-dlg__acts { position: sticky; bottom: calc(-1 * var(--nx-s5)); margin-top: var(--nx-s2); padding: var(--nx-s3) 0; background: var(--nx-surface); border-top: 1px solid var(--nx-line); }
.nx-root .nx-dlg--s { width: min(480px, 100%); }
.nx-root .nx-dlg--m { width: min(640px, 100%); }
.nx-root .nx-dlg--l { width: min(720px, 100%); }
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-ov__scrim { animation: nx-fade var(--nx-d2) ease-out; }
  .nx-root .nx-ov--dialog { animation: nx-pop-in var(--nx-d3) var(--nx-curve); }
  .nx-root .nx-ov--drawer { animation: nx-slide var(--nx-d3) var(--nx-curve); }
}
/* up to 860 px: a bottom sheet (short choices) or a full screen sheet (long forms) */
@media (max-width: 860px) {
  .nx-root .nx-ov__scrim { padding: 0; align-items: flex-end; justify-content: stretch; }
  .nx-root .nx-ov, .nx-root .nx-ov--dialog.nx-ov--s, .nx-root .nx-ov--dialog.nx-ov--m, .nx-root .nx-ov--dialog.nx-ov--l, .nx-root .nx-ov--drawer.nx-ov--s, .nx-root .nx-ov--drawer.nx-ov--m, .nx-root .nx-ov--drawer.nx-ov--l { width: 100%; }
  .nx-root .nx-ov--p-sheet { height: auto; max-height: calc(88 * var(--ao-vh)); max-height: calc(88 * var(--ao-dvh)); border-radius: var(--nx-r2) var(--nx-r2) 0 0; border-width: 1px 0 0; }
  .nx-root .nx-ov--p-full { height: calc(100 * var(--ao-vh)); height: calc(100 * var(--ao-dvh)); max-height: none; border-radius: 0; border-width: 0; }
  .nx-root .nx-ov--p-full .nx-ov__foot { border-radius: 0; }
  .nx-root .nx-ov__grip { display: block; width: 44px; height: 5px; margin: 8px auto 0; border-radius: 9px; background: var(--nx-control-line); }
  .nx-root .nx-ov__head { padding: var(--nx-s3) var(--nx-s4); }
  .nx-root .nx-ov__body { padding: var(--nx-s4); }
  .nx-root .nx-ov__foot { padding: var(--nx-s3) var(--nx-s4); padding-bottom: calc(var(--nx-s3) + env(safe-area-inset-bottom)); }
  .nx-root .nx-ov__acts .nx-btn { flex: 1 1 140px; }
  .nx-root .nx-ov .look-color { width: var(--nx-tap); height: var(--nx-tap); min-width: var(--nx-tap); }
  .nx-root .nx-ov .nx-input, .nx-root .nx-ov .nx-select, .nx-root .nx-ov input, .nx-root .nx-ov textarea, .nx-root .nx-ov select, .nx-root .nx-ov .ant-input, .nx-root .nx-ov .ant-select-selector { font-size: 16px; }
}

/* ---------------------------------------------------------------- the content of the old dialogs inside the shell */
.nx-root .nx-ov .gd-page { max-width: 100%; }
.nx-root .nx-ov .gd-actions { display: block; max-width: 100%; overflow-x: auto; }
.nx-root .nx-ov .gd-shot-frame { max-width: 100%; }
.nx-root .nx-ov .gd-meta { display: grid; gap: var(--nx-s1); }
.nx-root .nx-ov .field-label { margin: var(--nx-s3) 0 var(--nx-s1); font-weight: 700; }
.nx-root .nx-ov .field-label:first-child { margin-top: 0; }
.nx-root .nx-ov .issue-shot { display: flex; align-items: flex-start; gap: var(--nx-s3); flex-wrap: wrap; }
.nx-root .nx-ov .issue-shot img { max-width: min(280px, 100%); border-radius: var(--nx-r1); border: 1px solid var(--nx-line); }
.nx-root .nx-ov .alert-row { max-width: 100%; }
.nx-root .nx-ov .ant-select { max-width: 100%; }
.nx-root .nx-ov .alert-popups, .nx-root .nx-ov .alert-links { margin-bottom: var(--nx-s3); }
.nx-root .nx-ov .alert-links { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-ov a.nx-btn, .nx-root .nx-wx a.nx-btn { text-decoration: none; }
.nx-root .nx-ov__links { display: flex; flex-wrap: wrap; gap: var(--nx-s2); margin-bottom: var(--nx-s3); }
.nx-root .nx-ov__lead { margin: 0 0 var(--nx-s3); color: var(--nx-muted); }

/* ---------------------------------------------------------------- Work extras */
.nx-root .nx-wx { display: grid; gap: var(--nx-s4); min-width: 0; }
.nx-root .nx-wx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-wx-head__text { flex: 1 1 320px; min-width: 0; }
.nx-root .nx-wx-head__acts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--nx-s2); }
.nx-root .nx-wx-head .nx-sub { max-width: 760px; overflow-wrap: anywhere; }
.nx-root .nx-wx-views { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-wx-view { display: inline-flex; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-wx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-wx-search { flex: 1 1 240px; min-width: 0; max-width: 420px; }
.nx-root .nx-wx-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--nx-s3); }
.nx-root .nx-wx-field { display: grid; gap: var(--nx-s1); min-width: 0; }
.nx-root .nx-wx-field .nx-select { max-width: 100%; }
.nx-root .nx-wx-check { display: inline-flex; align-items: center; gap: var(--nx-s2); min-height: var(--nx-tap); }
.nx-root .nx-wx-check input { width: 20px; height: 20px; }
.nx-root .nx-ov .nx-wx-fields { display: grid; }
.nx-root .nx-wx-groups { display: grid; gap: var(--nx-s5); }
.nx-root .nx-wx-group { display: grid; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-wx-group__h, .nx-root .nx-wx-sub { margin: 0; font-size: var(--nx-fs-h3); font-weight: 800; }
.nx-root .nx-wx-note { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-wx .nx-tbl__sortpick { max-width: 100%; min-width: 0; }
.nx-root .nx-wx .nx-tbl__sortpick .nx-select { max-width: 100%; min-width: 0; }
.nx-root .nx-wx-facts { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: var(--nx-s2) var(--nx-s4); margin: 0 0 var(--nx-s4); }
.nx-root .nx-wx-facts dt { color: var(--nx-muted); font-weight: 600; }
.nx-root .nx-wx-facts dd { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-wx-acts { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-wx-preview { margin: 0 0 var(--nx-s3); overflow-wrap: anywhere; }
.nx-root .nx-wx-problem { margin: 0 0 var(--nx-s3); padding: var(--nx-s3); border-left: 4px solid var(--nx-danger); background: var(--nx-bad-soft); color: var(--nx-text); border-radius: var(--nx-r1); overflow-wrap: anywhere; }
.nx-root .nx-wx-explain, .nx-root .nx-wx-warn { padding: var(--nx-s3) var(--nx-s4); border: 1px solid var(--nx-line); border-left: 4px solid var(--nx-blue); border-radius: var(--nx-r1); background: var(--nx-surface); overflow-wrap: anywhere; }
.nx-root .nx-wx-warn { border-left-color: var(--nx-amber); background: var(--nx-amber-soft); color: var(--nx-text); }
.nx-root .nx-wx-explain p, .nx-root .nx-wx-warn p { margin: var(--nx-s1) 0 0; }
.nx-root .nx-wx-explain p:first-child { margin-top: 0; }

/* the frame of one dashboard or board: the way back, the header of the old page in the new spacing */
.nx-root .nx-wx-detail { display: grid; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-wx-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-wx-crumb__back { margin-left: auto; }
.nx-root .nx-wx-detail .crumb { display: none; }
.nx-root .nx-wx-detail .page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--nx-s3); margin: 0 0 var(--nx-s4); padding-bottom: var(--nx-s3); border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-wx-detail .page-head-main { flex: 1 1 320px; min-width: 0; }
.nx-root .nx-wx-detail .page-head h2 { font-size: var(--nx-fs-h2); overflow-wrap: anywhere; }
.nx-root .nx-wx-detail .page-head > .ant-space { flex: 0 1 auto; max-width: 100%; }
.nx-root .nx-wx-detail .dash-meta { gap: var(--nx-s1) var(--nx-s4); }
.nx-root .nx-wx-detail .ant-alert { max-width: 100%; }
.nx-root .nx-wx-detail .ant-btn { min-height: var(--nx-tap); }

@media (max-width: 860px) {
  .nx-root .nx-wx-head, .nx-root .nx-wx-head__acts { align-items: stretch; }
  .nx-root .nx-wx-head__acts > * { flex: 1 1 auto; }
  .nx-root .nx-wx-search { max-width: none; flex: 1 1 100%; }
  .nx-root .nx-wx-views .nx-seg__b { flex: 1 1 auto; justify-content: center; }
  .nx-root .nx-wx-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .nx-root .nx-wx-facts dd { margin-bottom: var(--nx-s2); }
  .nx-root .nx-wx-detail .page-head > .ant-space, .nx-root .nx-wx-detail .page-head > .ant-space .ant-space-item { width: 100%; }
  .nx-root .nx-wx-detail .page-head .ant-btn { flex: 1 1 140px; }
  .nx-root .nx-wx-crumb__back { margin-left: 0; flex: 1 1 100%; justify-content: center; }
}

/* W12 CHAT (22 Oct 2026, phase 1): the chat workspace of the redesigned look (nx-chat.jsx and the nx-chat-*.jsx files). History rail 272 px | conversation (text at most 820 px) | optional files panel.
   Up to 1100 px the panel lies over the conversation; up to 860 px the rail is a drawer, the panel a full screen sheet, and the message box stays at the bottom of the chat, above the bottom bar.
   Every rule starts with .nx-root and uses only --nx-* tokens (qa-2026-10-22-nx-chat.test.js); motion only inside prefers-reduced-motion: no-preference. Shipped just before nx-w11.css, which stays last. */

.nx-root .nx-chat { --chat-h: calc(calc(100 * var(--ao-dvh)) - 192px); position: relative; display: grid; grid-template-columns: 272px minmax(0, 1fr); height: var(--chat-h); min-height: 520px; min-width: 0; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); overflow: hidden; }
.nx-root .nx-chat.has-panel { grid-template-columns: 272px minmax(0, 1fr) minmax(340px, 400px); }
.nx-root .nx-chat.is-norail { grid-template-columns: minmax(0, 1fr); }
.nx-root .nx-chat.is-norail.has-panel { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); }
.nx-root .nx-chat.is-norail .nx-chat__rail { display: none; }
.nx-root .nx-chat--embed { --chat-h: clamp(520px, calc(calc(100 * var(--ao-dvh)) - 300px), 900px); }
/* full screen: the chat fills the window (the button in its header, Esc to leave) */
.nx-root .nx-chat.is-full { --chat-h: calc(100 * var(--ao-dvh)); position: fixed; inset: 0; z-index: 1300; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.nx-root .nx-chat button, .nx-root .nx-chat a { font-family: inherit; }
.nx-root .nx-chat__spin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--nx-control-line); border-top-color: var(--nx-blue); flex: none; }
.nx-root .nx-chat__center { flex: 1; display: grid; place-content: center; justify-items: center; gap: var(--nx-s3); padding: var(--nx-s6); color: var(--nx-muted); }

/* ---------------------------------------------------------------- the history rail */
.nx-root .nx-chat__rail { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--nx-bg); border-right: 1px solid var(--nx-line); }
.nx-root .nx-chat__railtop { display: grid; gap: var(--nx-s2); padding: var(--nx-s3) var(--nx-s3) var(--nx-s2); }
.nx-root .nx-chat__newrow { display: flex; gap: var(--nx-s1); }
.nx-root .nx-chat__new { flex: 1; min-width: 0; justify-content: center; }
.nx-root .nx-chat__new .nx-gl, .nx-root .nx-chat__newauto .nx-gl { --gls: 18; }
.nx-root .nx-chat__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: var(--nx-r1); background: var(--nx-hover); }
.nx-root .nx-chat__tab { min-height: 34px; border: 0; border-radius: calc(var(--nx-r1) - 2px); background: none; color: var(--nx-muted); font-weight: 700; font-size: var(--nx-fs-small); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.nx-root .nx-chat__tab[aria-selected="true"] { background: var(--nx-surface); color: var(--nx-text); box-shadow: var(--nx-shadow); }
.nx-root .nx-chat__tabn { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--nx-rfull); background: var(--nx-blue-soft); color: var(--nx-blue-text); font-size: 12px; font-weight: 800; }
.nx-root .nx-chat__find { display: flex; align-items: center; gap: var(--nx-s2); min-height: var(--nx-tap); padding: 0 var(--nx-s3); border: 1px solid var(--nx-control-line); border-radius: var(--nx-r1); background: var(--nx-surface); color: var(--nx-muted); }
.nx-root .nx-chat__find .nx-gl { --gls: 17; }
.nx-root .nx-chat__find input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--nx-text); font: inherit; font-size: var(--nx-fs-small); }
.nx-root .nx-chat__find:focus-within { outline: var(--nx-focus-ring); outline-offset: 1px; }
.nx-root .nx-chat__list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--nx-s2) var(--nx-s4); }
.nx-root .nx-chat__group { padding: var(--nx-s3) var(--nx-s2) var(--nx-s1); font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--nx-muted); }
.nx-root .nx-chat__row { position: relative; display: flex; align-items: center; gap: 2px; border-radius: var(--nx-r1); }
.nx-root .nx-chat__row:hover, .nx-root .nx-chat__row:focus-within { background: var(--nx-hover); }
.nx-root .nx-chat__row.is-on { background: var(--nx-blue-soft); }
.nx-root .nx-chat__row.is-off .nx-chat__rowmain { opacity: .75; }
.nx-root .nx-chat__rowmain { flex: 1; min-width: 0; text-align: left; border: 0; background: none; color: var(--nx-text); cursor: pointer; padding: 8px 8px; border-radius: var(--nx-r1); min-height: var(--nx-tap); display: grid; gap: 1px; }
.nx-root .nx-chat__rowmain b { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--nx-fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-chat__rowmain b .nx-gl { --gls: 14; color: var(--nx-muted); }
.nx-root .nx-chat__rowmain small { font-size: 12px; color: var(--nx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.nx-root .nx-chat__row.is-on .nx-chat__rowmain small { color: var(--nx-muted); }
.nx-root .nx-chat__working { color: var(--nx-blue-text); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.nx-root .nx-chat__rowib { width: 34px; height: 34px; flex: none; opacity: 0; }
.nx-root .nx-chat__rowib .nx-gl { --gls: 18; }
.nx-root .nx-chat__row:hover .nx-chat__rowib, .nx-root .nx-chat__row:focus-within .nx-chat__rowib, .nx-root .nx-chat__rowib[aria-expanded="true"] { opacity: 1; }
.nx-root .nx-chat__toggle { min-height: 32px; }
.nx-root .nx-chat__rownote { flex-basis: 100%; padding: 0 var(--nx-s2) var(--nx-s2); }
.nx-root .nx-chat__row:has(.nx-chat__rownote) { flex-wrap: wrap; }
.nx-root .nx-chat__newauto { width: 100%; margin: var(--nx-s2) 0; justify-content: center; }
.nx-root .nx-chat__mon { padding: 0 var(--nx-s1); }
.nx-root .nx-chat__none { padding: var(--nx-s3) var(--nx-s2); }
.nx-root .nx-chat__searchnote { padding: var(--nx-s2) var(--nx-s2) 0; }
.nx-root .nx-chat__railscrim { display: none; }

/* menus and windows opened from a button */
.nx-root .nx-chat__menu { position: relative; display: inline-flex; }
.nx-root .nx-chat__menulist { position: fixed; z-index: 1300; min-width: 220px; max-width: min(320px, calc(calc(100 * var(--ao-vw)) - 16px)); max-height: calc(calc(100 * var(--ao-dvh)) - 16px); overflow-y: auto; }
.nx-root .nx-chat__menulist .nx-gl { --gls: 18; }
.nx-root .nx-chat__menulist .nx-menu__item { white-space: normal; text-align: left; }
.nx-root .nx-chat__danger { color: var(--nx-bad-text); }
.nx-root .nx-chat__scrim { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--nx-s4); background: var(--nx-scrim); }
.nx-root .nx-chat__sheet { width: min(560px, 100%); max-height: 100%; overflow-y: auto; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-lift); padding: var(--nx-s4); display: grid; gap: var(--nx-s3); align-content: start; }
.nx-root .nx-chat__sheethead { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s2); }
.nx-root .nx-chat__sheethead .nx-h3 { margin: 0; }
.nx-root .nx-chat__sheetlist { display: grid; gap: var(--nx-s1); max-height: calc(52 * var(--ao-vh)); overflow-y: auto; }
.nx-root .nx-chat__search { width: 100%; }
.nx-root .nx-chat__keys { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--nx-s2) var(--nx-s4); margin: 0; align-items: center; }
.nx-root .nx-chat__keys dt, .nx-root .nx-chat__keys dd { margin: 0; }
.nx-root .nx-chat__keys kbd { display: inline-block; padding: 2px 8px; border: 1px solid var(--nx-control-line); border-radius: 6px; background: var(--nx-hover); color: var(--nx-text); font: inherit; font-size: var(--nx-fs-small); font-weight: 700; white-space: nowrap; }

/* ---------------------------------------------------------------- the conversation */
.nx-root .nx-chat__main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--nx-surface); }
.nx-root .nx-chat__head { display: flex; align-items: flex-start; gap: var(--nx-s2); padding: var(--nx-s3) var(--nx-s4); border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-chat__head > .nx-chat__ib { flex: none; }
.nx-root .nx-chat__ib .nx-gl, .nx-root .nx-iconbtn.nx-chat__ib .nx-gl { --gls: 20; }
.nx-root .nx-chat__ib[aria-pressed="true"] { background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-chat__headtile { flex: none; margin-top: 1px; }
.nx-root .nx-chat__aitile { width: 34px; height: 34px; flex: none; display: inline-grid; place-items: center; border-radius: 12px; background: var(--nx-pill); color: var(--nx-pill-text); }
.nx-root .nx-chat__aitile .nx-gl { --gls: 18; }
.nx-root .nx-chat__headtile .nx-chat__aitile { width: 44px; height: 44px; }
.nx-root .nx-chat__headmain { flex: 1; min-width: 0; display: grid; gap: 2px; }
.nx-root .nx-chat__title { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 800; min-width: 0; }
.nx-root .nx-chat__title button { max-width: 100%; border: 0; background: none; padding: 0; color: var(--nx-text); font: inherit; font-weight: 800; cursor: pointer; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.nx-root .nx-chat__sub2 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--nx-s2); font-size: var(--nx-fs-small); color: var(--nx-muted); }
.nx-root .nx-chat__capbar { background: var(--nx-bg); border-bottom: 1px solid var(--nx-line); padding: 6px var(--nx-s4); }
.nx-root .nx-chat__cap { display: flex; align-items: flex-start; gap: var(--nx-s2); margin: 0; font-size: var(--nx-fs-small); color: var(--nx-muted); line-height: 1.45; }
.nx-root .nx-chat__cap b { color: var(--nx-text); }
.nx-root .nx-chat__capline { flex: 1; min-width: 0; }
.nx-root .nx-chat__capchev { flex: none; margin-left: auto; width: 32px; height: 32px; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--nx-muted); cursor: pointer; }
.nx-root .nx-chat__capchev:hover { background: var(--nx-hover); color: var(--nx-text); }
.nx-root .nx-chat__capchev .nx-gl { --gls: 18; }
.nx-root .nx-chat__capbar.is-open .nx-chat__capchev .nx-gl { transform: rotate(180deg); }
.nx-root .nx-chat__capdetail { padding: 4px 0 4px 28px; color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-chat__capdetail p { margin: 2px 0; }
.nx-root .nx-chat__capdetail .nx-chat__capsum { display: none; }
.nx-root .nx-chat__headacts { display: flex; align-items: center; gap: var(--nx-s1); flex: none; }
.nx-root .nx-chat__filesbtn .nx-gl { --gls: 18; }
.nx-root .nx-chat__filesbtn.is-on { background: var(--nx-blue-soft); border-color: transparent; color: var(--nx-blue-text); }
.nx-root .nx-chat__main > .ant-alert, .nx-root .nx-chat__main > div > .ant-alert { margin: var(--nx-s2) var(--nx-s4) 0; }
.nx-root .nx-chat__trainwrap { flex: 1; min-height: 0; overflow-y: auto; padding: var(--nx-s3) var(--nx-s4); }
.nx-root .nx-chat__factwrap { padding: 0 var(--nx-s4); }
.nx-root .nx-chat__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--nx-s5) var(--nx-s4) var(--nx-s3); overscroll-behavior: contain; }
.nx-root .nx-chat__scroll:focus { outline: none; }
.nx-root .nx-chat__thread { width: 100%; max-width: 1180px; margin: 0 auto; display: grid; gap: var(--nx-s6); min-width: 0; }
.nx-root .nx-chat__jump { position: absolute; left: 50%; transform: translateX(-50%); bottom: 168px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--nx-control-line); border-radius: var(--nx-rfull); background: var(--nx-surface); color: var(--nx-text); font-weight: 700; font-size: var(--nx-fs-small); box-shadow: var(--nx-lift); cursor: pointer; }
.nx-root .nx-chat__jump .nx-gl { --gls: 16; }
.nx-root .nx-chat__cut { text-align: center; color: var(--nx-muted); font-size: var(--nx-fs-small); border-top: 1px dashed var(--nx-line); padding-top: var(--nx-s2); }
.nx-root .nx-chat__drop { position: absolute; inset: 0; z-index: 30; display: grid; place-content: center; justify-items: center; gap: var(--nx-s2); text-align: center; padding: var(--nx-s6); background: var(--nx-blue-soft); border: 3px dashed var(--nx-blue); border-radius: var(--nx-r2); color: var(--nx-text); pointer-events: none; }
.nx-root .nx-chat__drop .nx-gl { --gls: 34; color: var(--nx-blue-text); }

/* the empty state and the welcome */
.nx-root .nx-chat__welcome { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.nx-root .nx-chat__whead { padding: var(--nx-s3) var(--nx-s4); }
.nx-root .nx-chat__hero { margin: auto; width: 100%; max-width: 640px; padding: var(--nx-s4) var(--nx-s5) var(--nx-s8); display: grid; gap: var(--nx-s3); justify-items: center; text-align: center; }
.nx-root .nx-chat__hero .nx-h2 { margin: 0; font-size: var(--nx-fs-h2); }
.nx-root .nx-chat__orb { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--nx-pill); color: var(--nx-pill-text); box-shadow: var(--nx-lift); }
.nx-root .nx-chat__orb .nx-gl { --gls: 30; }
.nx-root .nx-chat__heroacts { display: flex; flex-wrap: wrap; gap: var(--nx-s2); justify-content: center; }
.nx-root .nx-chat__heronote { max-width: 520px; margin: 0; }
.nx-root .nx-chat__examples { display: grid; gap: var(--nx-s3); width: 100%; text-align: left; }
.nx-root .nx-chat__exrow > div { display: flex; flex-wrap: wrap; gap: var(--nx-s2); margin-top: var(--nx-s1); }
.nx-root .nx-chat__empty { display: grid; gap: var(--nx-s3); justify-items: center; text-align: center; padding: var(--nx-s6) 0; }
.nx-root .nx-chat__emptytitle { margin: 0; font-size: 20px; font-weight: 800; }
.nx-root .nx-chat__chips { display: flex; flex-wrap: wrap; gap: var(--nx-s2); margin-top: var(--nx-s2); }
.nx-root .nx-chat__empty .nx-chat__chips { justify-content: center; }
.nx-root .nx-chat__chip { min-height: 36px; padding: 0 14px; border: 1px solid var(--nx-control-line); border-radius: var(--nx-rfull); background: var(--nx-surface); color: var(--nx-text); font-weight: 600; font-size: var(--nx-fs-small); cursor: pointer; text-align: left; }
.nx-root .nx-chat__chip:hover { background: var(--nx-hover); }

/* ---------------------------------------------------------------- one exchange */
.nx-root .nx-chat__xchg { display: grid; gap: var(--nx-s4); min-width: 0; }
.nx-root .nx-chat__me { display: grid; justify-items: end; gap: 4px; min-width: 0; }
.nx-root .nx-chat__bubble { max-width: min(86%, 640px); min-width: 0; padding: 10px 14px; border-radius: 18px 18px 6px 18px; background: var(--nx-blue-soft); color: var(--nx-text); border: 1px solid var(--nx-line); }
.nx-root .nx-chat__text { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.nx-root .nx-chat__edit { display: grid; gap: var(--nx-s2); width: min(100%, 560px); }
.nx-root .nx-chat__edit textarea { width: 100%; min-height: 88px; resize: vertical; }
.nx-root .nx-chat__editbtns { display: flex; gap: var(--nx-s2); justify-content: flex-end; flex-wrap: wrap; }
.nx-root .nx-chat__files { display: flex; flex-wrap: wrap; gap: var(--nx-s1); justify-content: flex-end; }
.nx-root .nx-chat__acts { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-top: var(--nx-s2); }
.nx-root .nx-chat__acts--me { justify-content: flex-end; margin-top: 0; opacity: 0; }
.nx-root .nx-chat__me:hover .nx-chat__acts--me, .nx-root .nx-chat__me:focus-within .nx-chat__acts--me, .nx-root .nx-chat__xchg:last-child .nx-chat__acts--me { opacity: 1; }
.nx-root .nx-chat__act { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--nx-r1); background: none; color: var(--nx-muted); font-weight: 600; font-size: var(--nx-fs-small); cursor: pointer; text-decoration: none; }
.nx-root .nx-chat__act:hover { background: var(--nx-hover); color: var(--nx-text); }
.nx-root .nx-chat__act[disabled] { opacity: .5; cursor: not-allowed; }
.nx-root .nx-chat__act .nx-gl { --gls: 16; }
.nx-root .nx-chat__act--danger:hover { color: var(--nx-bad-text); }
.nx-root .nx-chat__acts .nx-chat__moreib { width: 32px; height: 32px; }
.nx-root .nx-chat__menunode { padding: 0 2px; }
.nx-root .nx-chat__menunode .ant-btn { width: 100%; justify-content: flex-start; min-height: var(--nx-tap); color: var(--nx-text); }
.nx-root .nx-chat__time { margin-left: var(--nx-s2); }
.nx-root .nx-chat__agent { display: flex; gap: var(--nx-s3); align-items: flex-start; min-width: 0; }
.nx-root .nx-chat__who { flex: none; margin-top: 2px; }
.nx-root .nx-chat__abody { flex: 1; min-width: 0; }
.nx-root .nx-chat__aname { font-weight: 800; margin-bottom: 4px; }
.nx-root .nx-chat__steps { margin: 0 0 var(--nx-s2); border: 1px solid var(--nx-line); border-radius: var(--nx-r1); background: var(--nx-bg); }
.nx-root .nx-chat__steps summary { display: flex; align-items: center; gap: var(--nx-s2); min-height: 34px; padding: 4px 12px; cursor: pointer; font-weight: 600; font-size: var(--nx-fs-small); color: var(--nx-muted); list-style: none; }
.nx-root .nx-chat__steps summary::-webkit-details-marker { display: none; }
.nx-root .nx-chat__steps summary .nx-gl { --gls: 16; color: var(--nx-ok-text); }
.nx-root .nx-chat__steps ul { margin: 0; padding: 0 12px 10px 38px; font-size: var(--nx-fs-small); color: var(--nx-text); display: grid; gap: 2px; }
.nx-root .nx-chat__steps p { margin: 0; padding: 0 12px 10px; }
.nx-root .nx-chat__live { display: grid; gap: var(--nx-s2); }
.nx-root .nx-chat__livehead { display: flex; align-items: center; gap: var(--nx-s2); flex-wrap: wrap; }
.nx-root .nx-chat__livenote { margin: 0; }
.nx-root .nx-chat__live .live-time { display: none; }
.nx-root .nx-chat__cont { display: flex; align-items: center; gap: var(--nx-s2); flex-wrap: wrap; margin-top: var(--nx-s2); }
.nx-root .nx-chat__note { display: flex; gap: var(--nx-s3); align-items: flex-start; padding: var(--nx-s3) var(--nx-s4); border-radius: var(--nx-r1); border: 1px solid var(--nx-line); background: var(--nx-hover); color: var(--nx-text); margin: var(--nx-s2) 0; }
.nx-root .nx-chat__note p { margin: 2px 0 var(--nx-s2); }
.nx-root .nx-chat__note .nx-gl { --gls: 20; }
.nx-root .nx-chat__note--info { background: var(--nx-blue-soft); }
.nx-root .nx-chat__note--warn { background: var(--nx-amber-soft); border-color: var(--nx-amber); }
.nx-root .nx-chat__note--bad { background: var(--nx-bad-soft); }
.nx-root .nx-chat__note--ok { background: var(--nx-ok-soft); }
.nx-root .nx-chat__noterow { display: flex; gap: var(--nx-s2); flex-wrap: wrap; margin-top: var(--nx-s2); }
.nx-root .nx-chat__appr { display: grid; gap: var(--nx-s2); margin: var(--nx-s2) 0; padding: var(--nx-s3); border: 1.5px solid var(--nx-amber); border-radius: var(--nx-r2); background: var(--nx-amber-soft); color: var(--nx-text); }
.nx-root .nx-chat__appr .trn-card { background: var(--nx-surface); color: var(--nx-text); }
.nx-root .nx-chat__apprstate { color: var(--nx-text); font-size: var(--nx-fs-small); }
.nx-root .nx-chat__apprnote { margin: 0; }

/* answers: the markdown the old chat draws, set in the new look (tables scroll inside their own box, code has Copy) */
.nx-root .nx-chat .answer-body { color: var(--nx-text); overflow-wrap: anywhere; min-width: 0; }
.nx-root .nx-chat .chat-md { line-height: 1.6; }
.nx-root .nx-chat .chat-md table { display: block; max-width: 100%; overflow-x: auto; }
.nx-root .nx-chat .chat-md img, .nx-root .nx-chat .chat-md svg { max-width: 100%; height: auto; }
.nx-root .nx-chat .code-block { border: 1px solid var(--nx-line); border-radius: var(--nx-r1); overflow: hidden; margin: var(--nx-s2) 0; background: var(--nx-hover); color: var(--nx-text); }
.nx-root .nx-chat .code-block pre { margin: 0; padding: var(--nx-s3); overflow-x: auto; background: transparent; color: var(--nx-text); }
.nx-root .nx-chat .code-head { background: var(--nx-surface); color: var(--nx-muted); border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-chat .code-block pre code { color: var(--nx-text); background: transparent; }
.nx-root .nx-chat .code-copy { min-height: 32px; min-width: 32px; padding: 0 10px; border: 1px solid var(--nx-control-line); border-radius: var(--nx-r1); background: var(--nx-surface); color: var(--nx-text); cursor: pointer; font-weight: 600; }
.nx-root .nx-chat .file-card { max-width: 100%; flex-wrap: wrap; }
.nx-root .nx-chat .chart-box, .nx-root .nx-chat .mermaid-box { max-width: 100%; overflow-x: auto; }

/* ---------------------------------------------------------------- the message box
   Redesigned 5 Nov 2026 (Sheraz: "make it more beautiful ... the best nice user friendly look"; outside AIs and the decision: backbone-review/composer-design-2026-11-05/): one roomy card of two rows (the words, then
   Attach, the agent, the microphone, Send), a soft ring in the brand colour instead of the heavy border, the count only near the limit, the keys in a quiet line, files as soft pills above the box. Tokens only;
   motion (the focus lift, the pulse of the microphone while it records, the progress) only where it is allowed (the block at the end). */
.nx-root .nx-chat__composer { flex: none; width: 100%; max-width: 1212px; margin: 0 auto; padding: var(--nx-s2) var(--nx-s4) calc(var(--nx-s3) + env(safe-area-inset-bottom)); display: grid; gap: var(--nx-s2); min-width: 0; position: relative; }
.nx-root .nx-chat__trayline { flex-basis: 100%; height: 0; }
.nx-root .nx-chat__tray { display: flex; flex-wrap: wrap; gap: var(--nx-s2); align-items: center; }
.nx-root .nx-chat__ftag { position: relative; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 40px; padding: 0 6px 0 8px; border: 1px solid var(--nx-line); border-radius: 14px; background: var(--nx-surface); color: var(--nx-text); font-size: var(--nx-fs-small); font-weight: 600; overflow: hidden; box-shadow: 0 1px 2px color-mix(in srgb, var(--nx-text) 6%, transparent); }
.nx-root .nx-chat__ftag > .nx-gl { --gls: 16; flex: none; box-sizing: content-box; padding: 5px; border-radius: 9px; background: color-mix(in srgb, var(--nx-blue) 12%, var(--nx-surface)); color: var(--nx-blue-text); }
.nx-root .nx-chat__ftag.is-up { background: color-mix(in srgb, var(--nx-blue) 5%, var(--nx-surface)); }
.nx-root .nx-chat__fname { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.nx-root .nx-chat__fx { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--nx-muted); cursor: pointer; }
.nx-root .nx-chat__fx:hover { background: var(--nx-hover); color: var(--nx-text); }
.nx-root .nx-chat__fx .nx-gl { --gls: 14; }
.nx-root .nx-chat__fbar { position: absolute; left: 0; bottom: 0; height: 3px; border-radius: 0 3px 3px 0; background: var(--nx-blue); }
.nx-root .nx-chat__warnmark { padding: 0 8px; border-radius: var(--nx-rfull); background: var(--nx-amber-soft); color: var(--nx-amber-text); font-size: 12px; font-weight: 700; }
.nx-root .nx-chat__box { position: relative; display: grid; gap: var(--nx-s1); border: 1px solid var(--nx-control-line); border-radius: 22px; background: var(--nx-surface); padding: 12px 12px 10px 18px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--nx-text) 6%, transparent), 0 10px 26px -14px color-mix(in srgb, var(--nx-text) 22%, transparent); }
.nx-root .nx-chat__box:focus-within { border-color: color-mix(in srgb, var(--nx-blue) 55%, var(--nx-control-line)); outline: 0;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--nx-blue) 18%, transparent), 0 12px 30px -14px color-mix(in srgb, var(--nx-text) 26%, transparent); }
.nx-root .nx-chat__ta { display: block; width: 100%; min-height: 44px; max-height: 220px; border: 0; outline: 0; resize: none; background: transparent; color: var(--nx-text); font: inherit; font-size: var(--nx-fs-body); line-height: 1.5; padding: 6px 2px; }
.nx-root .nx-chat__ta::placeholder { color: var(--nx-muted); }
.nx-root .nx-chat__composer .nx-chat__box textarea.nx-chat__ta.nx-chat__ta:focus, .nx-root .nx-chat__composer .nx-chat__box textarea.nx-chat__ta.nx-chat__ta:focus-visible { outline: 0; box-shadow: none; }   /* the ring is the whole box's (focus-within, 4 px in the brand colour); the global keyboard ring (styles.css, WCAG 2.4.7) skips this text area too, as it skips an input inside an Ant Design wrapper */
.nx-root .nx-chat__boxrow { display: flex; align-items: center; gap: var(--nx-s2); margin-top: 2px; flex-wrap: nowrap; min-width: 0; }
.nx-root .nx-chat__boxrow .vx-mic { color: var(--nx-muted); flex: none; width: 40px; height: 40px; }
.nx-root .nx-chat__boxrow .vx-mic:hover { background: var(--nx-hover); color: var(--nx-text); }
.nx-root .nx-chat__boxrow .vx-mic.on { background: var(--nx-bad-soft, var(--nx-amber-soft)); color: var(--nx-bad-text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--nx-bad-text) 40%, transparent); }
.nx-root .nx-chat__attach { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 6px; border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); background: var(--nx-bg); color: var(--nx-text); font: inherit; font-size: var(--nx-fs-small); font-weight: 700; cursor: pointer; }
.nx-root .nx-chat__attach:hover { background: var(--nx-hover); }
.nx-root .nx-chat__ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--nx-on-blue); background: linear-gradient(150deg, color-mix(in srgb, var(--nx-blue) 72%, var(--nx-surface)), var(--nx-blue)); box-shadow: 0 2px 0 -1px color-mix(in srgb, var(--nx-blue) 60%, var(--nx-text)), inset 0 1px 0 color-mix(in srgb, var(--nx-surface) 40%, transparent); }
.nx-root .nx-chat__ico .nx-gl { --gls: 16; }
.nx-root .nx-chat__agentchip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; max-width: 260px; min-width: 0; padding: 0 12px 0 6px; border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); background: var(--nx-bg); color: var(--nx-text); font-weight: 700; font-size: var(--nx-fs-small); cursor: pointer; }
.nx-root .nx-chat__agentchip:hover { background: var(--nx-hover); }
.nx-root .nx-chat__agentchip > span:not(.nx-dt):not(.nx-chat__aitile) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-chat__agentchip .nx-dt, .nx-root .nx-chat__agentchip .nx-chat__aitile { width: 28px; height: 28px; flex: none; border-radius: 10px; }
.nx-root .nx-chat__agentchip .nx-dt .nx-gl, .nx-root .nx-chat__agentchip .nx-chat__aitile .nx-gl { --gls: 16; }
.nx-root .nx-chat__agentchip > .nx-gl { --gls: 14; flex: none; color: var(--nx-muted); }
.nx-root .nx-chat__send { width: 44px; height: 44px; flex: none; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: var(--nx-blue); color: var(--nx-on-blue); cursor: pointer; box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--nx-blue) 75%, transparent), inset 0 1px 0 color-mix(in srgb, var(--nx-surface) 30%, transparent); }
.nx-root .nx-chat__send .nx-gl { --gls: 20; }
.nx-root .nx-chat__send:hover:not([disabled]) { filter: brightness(1.06); }
.nx-root .nx-chat__send[disabled] { background: var(--nx-hover); color: var(--nx-muted); cursor: not-allowed; box-shadow: none; }
.nx-root .nx-chat__send.is-stop { background: var(--nx-text); color: var(--nx-bg); }
.nx-root .nx-chat__send.is-stop .nx-gl { fill: currentColor; }
.nx-root .nx-chat__foot { display: flex; align-items: center; gap: var(--nx-s2) var(--nx-s4); flex-wrap: wrap; padding: 0 var(--nx-s2); font-size: 12px; color: var(--nx-muted); min-height: 20px; }
.nx-root .nx-chat__kbhint { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.nx-root .nx-chat__kbhint kbd { padding: 0 6px; border: 1px solid var(--nx-line); border-bottom-width: 2px; border-radius: 6px; background: var(--nx-bg); color: var(--nx-text); font: inherit; font-size: 11.5px; font-weight: 700; }
.nx-root .nx-chat__kbhint i { font-style: normal; opacity: .6; }
.nx-root .nx-chat__count { color: var(--nx-muted); }
.nx-root .nx-chat__count.is-near { color: var(--nx-amber-text); font-weight: 700; }
.nx-root .nx-chat__count.is-full { color: var(--nx-bad-text); font-weight: 700; }
.nx-root .nx-chat__hint { margin-left: auto; flex: 1 1 220px; min-width: 0; font-size: 12px; text-align: right; }
/* what floats never sits on the box (the box sets --nx-comp-top and the data-comp-on attribute of the page root, nx-chat-composer.jsx; the "Show me how" button already keeps clear of the box by itself, nx-guide.jsx KEEP_CLEAR).
   Desktop: the round Assistant button (56 px, 20 px from the edge) has its own column, so Send is clear of it. Phone: the Assistant and Aria buttons ride above the box, "Show me how" above them. */
@media (min-width: 901px) {
  .nx-root .nx-chat__composer { padding-right: 92px; }
}
@media (max-width: 900px) {
  .nx-root[data-comp-on] .nx-assist:not(:has(.as-panel)) { bottom: max(calc(76px + env(safe-area-inset-bottom)), calc(var(--nx-comp-top, 0px) + 12px)); }
  .nx-root[data-comp-on] .nx-aria-fab { bottom: max(calc(var(--nx-bar-h) + 10px + env(safe-area-inset-bottom)), calc(var(--nx-comp-top, 0px) + 12px)); }
  .nx-root[data-comp-on] .nx-gd__dock { transform: translateY(-64px); }
}
/* a file over the page: the box says where it goes (the page-wide drop note is softer, below) */
.nx-root .nx-chat.is-drag .nx-chat__box { border-style: dashed; border-color: var(--nx-blue); background: color-mix(in srgb, var(--nx-blue) 6%, var(--nx-surface)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nx-blue) 16%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-chat__box { transition: border-color .15s ease, box-shadow .2s ease, background-color .15s ease; }
  .nx-root .nx-chat__send { transition: transform .12s ease, filter .12s ease, background-color .15s ease; }
  .nx-root .nx-chat__send:active:not([disabled]) { transform: scale(.94); }
  .nx-root .nx-chat__boxrow .vx-mic.on { animation: nx-mic-pulse 1.8s ease-in-out infinite; }
  @keyframes nx-mic-pulse { 0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--nx-bad-text) 40%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--nx-bad-text) 12%, transparent); } }
}
.nx-root .nx-chat__pop { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 20; max-height: 300px; overflow-y: auto; padding: var(--nx-s2); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); color: var(--nx-text); box-shadow: var(--nx-lift); }
.nx-root .nx-chat__popnote { margin: var(--nx-s1) var(--nx-s2) 0; }
.nx-root .nx-chat__opt { display: flex; align-items: center; gap: var(--nx-s3); width: 100%; min-height: var(--nx-tap); padding: 6px 10px; border: 0; border-radius: var(--nx-r1); background: none; color: var(--nx-text); text-align: left; cursor: pointer; font-size: var(--nx-fs-small); }
.nx-root .nx-chat__opt:hover, .nx-root .nx-chat__opt.is-on { background: var(--nx-blue-soft); }
.nx-root .nx-chat__opt > span:not(.nx-dt):not(.nx-chat__aitile) { display: grid; min-width: 0; }
.nx-root .nx-chat__opt b { font-weight: 700; }
.nx-root .nx-chat__opt small { color: var(--nx-muted); font-size: 12px; }
.nx-root .nx-chat__opt .nx-gl { --gls: 18; }

/* ---------------------------------------------------------------- the files panel */
.nx-root .nx-chat__panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 1px solid var(--nx-line); background: var(--nx-surface); }
.nx-root .nx-chat__panelhead { display: flex; align-items: center; gap: var(--nx-s2); padding: var(--nx-s3) var(--nx-s3); border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-chat__panelhead .nx-h3 { flex: 1; min-width: 0; margin: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-chat__panelbody { flex: 1; min-height: 0; overflow-y: auto; padding: var(--nx-s3) var(--nx-s4); display: grid; gap: var(--nx-s2); align-content: start; }
.nx-root .nx-chat__sub { margin: var(--nx-s2) 0 0; font-size: var(--nx-fs-small); font-weight: 800; color: var(--nx-muted); }
.nx-root .nx-chat__files-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s1); }
.nx-root .nx-chat__files-list li { display: flex; align-items: center; gap: var(--nx-s2); flex-wrap: wrap; }
.nx-root .nx-chat__filerow { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--nx-s3); min-height: var(--nx-tap); padding: 6px 10px; border: 1px solid var(--nx-line); border-radius: var(--nx-r1); background: var(--nx-surface); color: var(--nx-text); text-align: left; cursor: pointer; }
.nx-root .nx-chat__filerow:hover { background: var(--nx-hover); }
.nx-root .nx-chat__filerow > span { display: grid; min-width: 0; }
.nx-root .nx-chat__filerow b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--nx-fs-small); }
.nx-root .nx-chat__filerow small { color: var(--nx-muted); font-size: 12px; }
.nx-root .nx-chat__filerow .nx-gl { --gls: 20; color: var(--nx-muted); }
.nx-root .nx-chat__fileacts { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-chat__fileacts .nx-gl, .nx-root .nx-chat__files-list .nx-btn .nx-gl { --gls: 16; }
.nx-root .nx-chat__previewbox { min-width: 0; max-width: 100%; overflow: auto; border: 1px solid var(--nx-line); border-radius: var(--nx-r1); padding: var(--nx-s2); background: var(--nx-bg); }
.nx-root .nx-chat__previewbox img, .nx-root .nx-chat__previewbox iframe { max-width: 100%; }

@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-chat__spin { animation: nx-chat-spin .9s linear infinite; }
  .nx-root .nx-chat__row, .nx-root .nx-chat__chip, .nx-root .nx-chat__act, .nx-root .nx-chat__opt, .nx-root .nx-chat__rowib, .nx-root .nx-chat__acts--me { transition: background var(--nx-d1), color var(--nx-d1), opacity var(--nx-d1); }
  .nx-root .nx-chat__panel { animation: nx-chat-in var(--nx-d3) var(--nx-curve); }
  .nx-root .nx-chat__sheet, .nx-root .nx-chat__pop { animation: nx-chat-pop var(--nx-d2) var(--nx-curve); }
}
@keyframes nx-chat-spin { to { transform: rotate(360deg); } }
@keyframes nx-chat-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes nx-chat-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- a tablet: the files panel lies over the conversation */
@media (max-width: 1100px) {
  .nx-root .nx-chat.has-panel { grid-template-columns: 272px minmax(0, 1fr); }
  .nx-root .nx-chat.is-norail.has-panel { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-chat__panel { position: absolute; z-index: 35; top: 0; right: 0; bottom: 0; width: min(420px, 100%); box-shadow: var(--nx-panel-shadow); }
}

/* ---------------------------------------------------------------- a phone (up to 860 px): the list is a drawer, the panel a full screen sheet, the box stays above the bottom bar */
@media (max-width: 860px) {
  .nx-root .nx-chat { --chat-h: calc(calc(100 * var(--ao-dvh)) - var(--nx-header-h) - var(--nx-bar-h) - 112px - env(safe-area-inset-bottom)); grid-template-columns: minmax(0, 1fr); min-height: 300px; }
  .nx-root .nx-chat.has-panel, .nx-root .nx-chat.is-norail, .nx-root .nx-chat.is-norail.has-panel { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-chat--embed { --chat-h: clamp(460px, calc(calc(100 * var(--ao-dvh)) - var(--nx-header-h) - var(--nx-bar-h) - 210px), 760px); }
  .nx-root .nx-chat.is-norail .nx-chat__rail, .nx-root .nx-chat__rail { display: flex; position: absolute; z-index: 60; top: 0; bottom: 0; left: 0; width: min(320px, calc(88 * var(--ao-vw))); transform: translateX(-104%); visibility: hidden; box-shadow: none; }
  .nx-root .nx-chat.is-drawer .nx-chat__rail { transform: none; visibility: visible; box-shadow: var(--nx-panel-shadow); }
  .nx-root .nx-chat__railscrim { display: block; position: absolute; inset: 0; z-index: 55; background: var(--nx-scrim); }
  .nx-root .nx-chat__panel { position: fixed; top: 0; left: 0; right: 0; bottom: calc(var(--nx-bar-h) + env(safe-area-inset-bottom)); z-index: 1200; width: auto; border-left: 0; }
  .nx-root .nx-chat__head { padding: var(--nx-s2) var(--nx-s2); align-items: center; gap: var(--nx-s1); }
  .nx-root .nx-chat__capbar { padding: 4px var(--nx-s3); }
  .nx-root .nx-chat__headtile .nx-dt, .nx-root .nx-chat__headtile .nx-chat__aitile { width: 36px; height: 36px; }
  .nx-root .nx-chat__cap .nx-chat__capmore, .nx-root .nx-chat__cap .nx-pill { display: none; }
  .nx-root .nx-chat__capline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nx-root .nx-chat__capchev { width: var(--nx-tap); height: var(--nx-tap); margin: -6px -8px -6px auto; }
  .nx-root .nx-chat__capdetail { padding-left: 4px; }
  .nx-root .nx-chat__capdetail .nx-chat__capsum { display: block; }
  .nx-root .nx-chat__filesbtn { position: relative; width: var(--nx-tap); padding: 0; flex: none; }
  .nx-root .nx-chat__filesbtn span:not(.nx-chat__tabn) { display: none; }
  .nx-root .nx-chat__filesbtn .nx-chat__tabn { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; font-size: 11px; padding: 0 4px; }
  .nx-root .nx-chat__sub2 { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
  .nx-root .nx-chat__sub2 > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .nx-root .nx-chat__acts .nx-chat__moreib { width: var(--nx-tap); height: var(--nx-tap); }
  .nx-root .nx-chat__scroll { padding: var(--nx-s3) var(--nx-s3) var(--nx-s2); }
  .nx-root .nx-chat__thread { gap: var(--nx-s5); }
  .nx-root .nx-chat__bubble { max-width: 92%; }
  .nx-root .nx-chat__agent { gap: var(--nx-s2); }
  .nx-root .nx-chat__who .nx-dt { width: 30px; height: 30px; }
  .nx-root .nx-chat__composer { padding: var(--nx-s1) var(--nx-s2) calc(var(--nx-s2) + env(safe-area-inset-bottom)); }
  .nx-root .nx-chat__box { padding: 10px 10px 8px 14px; border-radius: 20px; }
  .nx-root .nx-chat__ta { font-size: 16px; min-height: 44px; }
  .nx-root .nx-chat__boxrow { gap: 6px; }
  .nx-root .nx-chat__attach, .nx-root .nx-chat__agentchip, .nx-root .nx-chat__boxrow .vx-mic { min-height: var(--nx-tap); }
  .nx-root .nx-chat__boxrow .vx-mic { width: var(--nx-tap); height: var(--nx-tap); }
  .nx-root .nx-chat__send { width: 48px; height: 48px; }
  .nx-root .nx-chat__hint { display: none; }
  .nx-root .nx-chat__foot { padding: 0 var(--nx-s2); min-height: 0; }
  .nx-root .nx-chat__foot:not(:has(.nx-chat__count)) { display: none; }
  .nx-root .nx-chat__jump { bottom: 150px; }
  .nx-root .nx-chat__rowib { opacity: 1; width: var(--nx-tap); height: var(--nx-tap); }
  .nx-root .nx-chat__acts--me { opacity: 1; }
  .nx-root .nx-chat__act, .nx-root .nx-chat__chip, .nx-root .nx-chat__tab, .nx-root .nx-chat__toggle, .nx-root .nx-chat__agentchip, .nx-root .nx-chat__fname, .nx-root .nx-chat__ftag { min-height: var(--nx-tap); }
  .nx-root .nx-chat__fx { width: var(--nx-tap); height: var(--nx-tap); }
  .nx-root .nx-chat__title button, .nx-root .nx-chat .fc-name, .nx-root .nx-chat .file-chip, .nx-root .nx-chat .agw-q, .nx-root .nx-chat .agw-topic, .nx-root .nx-chat .agw-again-btn { min-height: var(--nx-tap); display: inline-flex; align-items: center; }
  .nx-root .nx-chat .code-copy { min-height: var(--nx-tap); min-width: var(--nx-tap); }
  .nx-root .nx-chat__scrim { position: fixed; z-index: 1250; align-items: end; padding: 0; }
  .nx-root .nx-chat__sheet { width: 100%; border-radius: var(--nx-r2) var(--nx-r2) 0 0; max-height: calc(86 * var(--ao-dvh)); padding-bottom: calc(var(--nx-s4) + env(safe-area-inset-bottom)); }
  .nx-root .nx-chat__find input, .nx-root .nx-chat__search { font-size: 16px; }
  .nx-root .nx-chat__find input { min-height: var(--nx-tap); }
  .nx-root .nx-chat__steps summary { min-height: var(--nx-tap); }
  .nx-root .nx-chat__edit textarea { font-size: 16px; }
  .nx-root .nx-chat__keys { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .nx-root .nx-chat__keys dd { margin-bottom: var(--nx-s2); }
}
@media (max-width: 560px) {
  .nx-root .nx-chat { border-radius: var(--nx-r1); }
  .nx-root .nx-chat__title { font-size: 16px; }
  .nx-root .nx-chat__fname { max-width: 150px; }
  .nx-root .nx-chat__agentchip { max-width: 160px; }
}

/* The chat fills the window (nx-chat.jsx useFillHeight, nx-chatfit.mjs, 28 Oct 2026): while it is on the page, nothing under it takes room, so its card ends just above the bottom of the window and only its thread scrolls. */
.nx-root.nx-chatfit .nx-page, .nx-root.nx-chatfit .nx-content { padding-bottom: 0; }
.nx-root.nx-chatfit .content-inner { padding-bottom: var(--chatfit-bar, 0px); }

/* UI-2 audit #1 (28 Oct 2026): the dead space under the last row of every page. Classic's 72 px under the content (styles.css, for its floating helper) and the New frame's own 20 px added up to 92 px on every page, short pages
   looked gapped and long ones scrolled 72 px too far. The New look keeps 20 px of its own plus 20 px. A phone needs no rule here: .nx-content already clears the fixed bottom bar (nx-w30.css), and a second clearance here made 190 px. */
.nx-root .content-inner { padding-bottom: 20px; }
/* the bar above the tabs of the agent page: where it stands, and the buttons that were in the Classic header */
.nx-root .nx-ag-bar { margin: 0 0 var(--nx-s3); }
.nx-root .nx-ag-bar__acts { display: flex; flex-wrap: wrap; gap: var(--nx-s2); align-items: center; }

/* UI-2 audit #12 (28 Oct 2026): an old page that brings its own cards is not boxed a second time. The New frame's .nx-old drew a bordered, padded card and the Classic page put its ant-cards inside it (a card in a card: double border, 32 px lost, and an empty-state card stacked a second tall box). With cards inside, the frame is only a wrapper, as in the Library parts; a page of plain content keeps its frame. The old page's own title (Collection agents, QwenWork, Agent learning) is a section title under the frame's page title, not a second big one. */
.nx-root .nx-old:has(.ant-card), .nx-root .nx-old:has(.card), .nx-root .nx-old:has(.ant-table-wrapper) { background: transparent; border: 0; border-radius: 0; padding: 0; min-height: 0; }
.nx-root .nx-old .page-head { margin-bottom: var(--nx-s3); }
.nx-root .nx-old .page-head h2, .nx-root .nx-old .page-head h1 { font-size: 20px; line-height: 1.25; margin: 0; }

/* UI-2 audit #13: a sticky bar of an old page stuck at the top of the window and slid under the New header (56 px, itself sticky). It now stops just under the header. */
.nx-root .sd-bar, .nx-root .af-bar, .nx-root .teach-meter, .nx-root .studio-side, .nx-root .gal-side, .nx-root .fo-rail, .nx-root .am-side, .nx-root .practice-brief { top: calc(var(--nx-header-h) + var(--nx-s4)); }

/* UI-2 audit, layout (28 Oct 2026). The old pages and the frame were written for the width of the WINDOW; the page is the window minus the 248 px menu, so the breakpoints below move up by that much. */
/* the Assistant panel and the side sheets: calc(100 * var(--ao-vh)) is taller than a phone browser's visible window, so the message box sat under the toolbar. calc(100 * var(--ao-dvh)) is the visible height (a browser that does not know dvh keeps calc(100 * var(--ao-vh))). */
.nx-root .nx-assist .as-panel, .nx-root .nx-dlg--panel { height: calc(100 * var(--ao-dvh)); }
/* the task page: its side column (min 280 px) squeezed the result to under 300 px between 1000 and 1200 px of window */
@media (max-width: 1200px) { .nx-root .nx-tk-grid { grid-template-columns: minmax(0, 1fr); } }
/* old grids that counted columns by the window: Fleet tiles (8 across until 1500 px), Claude usage (3 until 1280, 4 until 1400), the Boards studio (2 until 1100) */
@media (min-width: 641px) and (max-width: 1780px) { .nx-root .fleet-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 901px) and (max-width: 1560px) { .nx-root .cu-top { grid-template-columns: 1fr 1fr; } .nx-root .cu-side { grid-column: 1 / -1; } }
@media (min-width: 761px) and (max-width: 1680px) { .nx-root .cut-mid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1380px) { .nx-root .studio-cols { grid-template-columns: minmax(0, 1fr); } }
/* Who may do what (the full table) is 760 px wide: it scrolls sideways inside its box instead of being cut off between 860 and 1060 px */
.nx-root .nx-w14-matrix .nx-tbl__scroll { overflow-x: auto; }
/* dark themes: the fixed greens and reds of Agent learning, the tests, and How to compare were about 3:1 on the dark card; the theme's own text colours are the ones checked for contrast */
.nx-root .imp-v.ok, .nx-root .howto-compare .good .hc-h { color: var(--nx-ok-text); }
.nx-root .imp-v.bad, .nx-root .howto-compare .poor .hc-h { color: var(--nx-bad-text); }
.nx-root .pf-area.warn .anticon, .nx-root .pf-group.user .pf-group-title .anticon { color: var(--nx-amber-text); }

/* Home: Ready for you and Today (nx-home-today.jsx), two cards side by side from 1100 px of window, stacked under it */
.nx-root .nx-ht { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nx-s4); }
@media (min-width: 1100px) { .nx-root .nx-ht { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.nx-root .nx-ht__card { align-content: start; }
.nx-root .nx-ht__row { display: grid; gap: 2px; padding: var(--nx-s2) 0; border-top: 1px solid var(--nx-line); color: var(--nx-text); text-decoration: none; min-width: 0; }
.nx-root .nx-ht__row:first-of-type { border-top: 0; }
.nx-root .nx-ht__row b, .nx-root .nx-ht__row span { overflow-wrap: anywhere; }
.nx-root .nx-ht__row:hover b { text-decoration: underline; }
.nx-root .nx-ht__row.is-failed b { color: var(--nx-bad-text); }
.nx-root .nx-ht__row.is-working b { color: var(--nx-blue-text); }

/* The Guide of this page: the small ? after a page title (nx-kit.jsx NxTitle), in the line of the words */
.nx-root .nx-guide-btn { display: inline-grid; place-items: center; vertical-align: middle; margin-inline-start: var(--nx-s3); width: 26px; height: 26px; padding: 0; border-radius: var(--nx-rfull); border: 1px solid var(--nx-control-line); background: var(--nx-surface); color: var(--nx-muted); font: inherit; font-size: 13px; line-height: 1; font-weight: 700; cursor: pointer; }
.nx-root .nx-guide-btn:hover { color: var(--nx-text); border-color: var(--nx-text); }

/* Home: the earlier conversations with the Assistant (nx-home-history.jsx) */
.nx-root .nx-hh__row { display: flex; align-items: center; gap: var(--nx-s2); border-top: 1px solid var(--nx-line); min-width: 0; }
.nx-root .nx-hm29__head + .nx-hh__row { border-top: 0; }
.nx-root .nx-hh__main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; padding: var(--nx-s2) 0; color: var(--nx-text); text-decoration: none; }
.nx-root .nx-hh__main b { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nx-root .nx-hh__main:hover b { text-decoration: underline; }
.nx-root .nx-hh__x { flex: none; width: 28px; height: 28px; border-radius: var(--nx-rfull); border: 0; background: transparent; color: var(--nx-muted); font-size: 18px; line-height: 1; cursor: pointer; }
.nx-root .nx-hh__x:hover { color: var(--nx-bad-text); background: var(--nx-bad-soft); }

/* The diff of a text (text-diff.jsx): removed in red with a strike, added in green, the changed words marked, unchanged runs folded. A mark and a word for a screen reader carry the meaning too, not the colour alone. */
.nx-root .td { display: grid; gap: var(--nx-s2); min-width: 0; }
.nx-root .td-sum { margin: 0; }
.nx-root .td-body { border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); overflow: hidden; font-size: 13.5px; line-height: 1.5; }
.nx-root .td-l { display: flex; gap: 8px; padding: 1px 10px; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.nx-root .td-m { flex: none; width: 1ch; font-weight: 700; color: var(--nx-muted); }
.nx-root .td-l--del { background: var(--nx-bad-soft); color: var(--nx-bad-text); }
.nx-root .td-l--add { background: var(--nx-ok-soft); color: var(--nx-ok-text); }
.nx-root .td-l--del .td-m { color: var(--nx-bad-text); }
.nx-root .td-l--add .td-m { color: var(--nx-ok-text); }
.nx-root .td-l del { text-decoration: line-through; }
.nx-root .td-l ins { text-decoration: none; }
.nx-root .td-w { background: color-mix(in srgb, currentColor 22%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; font-weight: 700; }
.nx-root .td-fold { border-top: 1px dashed var(--nx-line); border-bottom: 1px dashed var(--nx-line); background: transparent; }
.nx-root .td-fold > summary { cursor: pointer; padding: 3px 10px; color: var(--nx-muted); font-size: 12.5px; }
.nx-root .td-fold[open] > summary { border-bottom: 1px dashed var(--nx-line); }
.nx-root .td-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nx-root .td-r { display: flex; gap: 8px; flex-wrap: wrap; padding: 3px 10px; border-radius: var(--nx-r1, 8px); overflow-wrap: anywhere; }
.nx-root .td-r--add { background: var(--nx-ok-soft); color: var(--nx-ok-text); }
.nx-root .td-r--del { background: var(--nx-bad-soft); color: var(--nx-bad-text); }
.nx-root .td-r--chg { background: var(--nx-hover); }
.nx-root .td-r del { text-decoration: line-through; }
.nx-root .td-r ins { text-decoration: none; font-weight: 600; }
.nx-root .td-none { margin: 0; }
.nx-root .nx-w14-sub { margin: var(--nx-s3) 0 var(--nx-s1); font-size: 14px; }
/* What can it use: the loop that shows how to choose (a card is ticked and lands in Selected), a chip that pops in, a lens that looks around. Use-rows.jsx; transform and opacity only, and only when motion is allowed. */
@media (prefers-reduced-motion: no-preference) {
  .nx-root .use-guide__art .ug-card { animation: nx-ug-card 4.2s ease-in-out infinite; }
  .nx-root .use-guide__art .ug-box .anticon { animation: nx-ug-tick 4.2s ease-in-out infinite; }
  .nx-root .use-guide__art .ug-fly { animation: nx-ug-fly 4.2s ease-in-out infinite; }
  .nx-root .use-sel__chip { animation: nx-use-chip var(--nx-d2) var(--nx-curve); }
  .nx-root .use-empty-ill .ue-lens { animation: nx-ue-look 3.6s ease-in-out infinite; }
}
@keyframes nx-ug-card { 0%, 22% { transform: none; opacity: 1; } 55% { transform: translateX(96px) scale(.55); opacity: 0; } 90% { transform: translateX(96px) scale(.55); opacity: 0; } 91% { transform: none; opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes nx-ug-tick { 0%, 8% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; transform: none; } 90% { opacity: 1; transform: none; } 91%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes nx-ug-fly { 0%, 50% { opacity: 0; transform: scale(.6); } 62%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes nx-use-chip { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes nx-ue-look { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-10px, -5px); } }
/* "What changed" at the top of an agent review (agent-diff.jsx): one risk line, one row per changed field, + / − chips, the line diff of text */
.nx-root .agd { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); }
.nx-root .agd-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.nx-root .agd-title { margin: 0; font-size: 17px; font-weight: 700; }
.nx-root .agd-risk { margin: 0; padding: 8px 12px; border-radius: var(--nx-r1); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.nx-root .agd-risk--warn { background: var(--nx-amber-soft); color: var(--nx-amber-text); }
.nx-root .agd-risk--info { background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .agd-risk--ok { background: var(--nx-ok-soft); color: var(--nx-ok-text); }
.nx-root .agd-v { font-size: 13px; font-weight: 600; }
.nx-root .agd-v--bad { color: var(--nx-bad-text); }
.nx-root .agd-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nx-root .agd-r { padding: 6px 10px; border-radius: var(--nx-r1); border-left: 3px solid var(--nx-line); overflow-wrap: anywhere; line-height: 1.5; }
.nx-root .agd-r--add { border-left-color: var(--nx-ok-text); }
.nx-root .agd-r--del { border-left-color: var(--nx-bad-text); }
.nx-root .agd-r--chg { border-left-color: var(--nx-blue-text); }
.nx-root .agd-r .td { margin-top: 6px; }
.nx-root .agd-r del { background: var(--nx-bad-soft); color: var(--nx-bad-text); text-decoration: line-through; padding: 0 3px; border-radius: 3px; }
.nx-root .agd-r ins { background: var(--nx-ok-soft); color: var(--nx-ok-text); text-decoration: none; padding: 0 3px; border-radius: 3px; font-weight: 600; }
.nx-root .agd-op { font-size: 12.5px; color: var(--nx-muted); }
.nx-root .agd-ft { margin-left: 4px; }
.nx-root .agd-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 4px; vertical-align: middle; }
.nx-root .agd-r .agd-chip { padding: 1px 8px; border-radius: var(--nx-rfull); font-size: 13px; }
.nx-root .agd-text > summary { cursor: pointer; }
.nx-root .agd-pre { margin: 6px 0 0; padding: 8px 10px; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 13px; max-height: 360px; overflow: auto; border-radius: var(--nx-r1); }
.nx-root .agd-pre--add { background: var(--nx-ok-soft); color: var(--nx-ok-text); }
.nx-root .agd-pre--del { background: var(--nx-bad-soft); color: var(--nx-bad-text); text-decoration: line-through; }
.nx-root .agd-same { margin: 0; }
.nx-root .agd-more { border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: 0 14px; }
.nx-root .agd-more > summary { cursor: pointer; padding: 10px 0; font-weight: 600; }
.nx-root .agd-more__b { display: grid; gap: 12px; padding-bottom: 14px; }

/* How long each step took (steptimes.jsx): a sentence, then one row per step: name, time, a bar. Waiting for a person is dimmed and has no bar colour of delay. */
.nx-root .nx-stt { padding: 0 12px 8px; font-size: var(--nx-fs-small); }
.nx-root .nx-stt__say { margin: 0 0 6px; font-weight: 600; color: var(--nx-text); }
.nx-root .nx-stt__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nx-root .nx-stt__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--nx-s2); row-gap: 2px; align-items: baseline; }
.nx-root .nx-stt__time { color: var(--nx-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-root .nx-stt__bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--nx-line); overflow: hidden; }
.nx-root .nx-stt__bar i { display: block; height: 100%; background: var(--nx-muted); }
.nx-root .nx-stt__row.is-slow .nx-stt__bar i { background: var(--nx-text); }
.nx-root .nx-stt__row.is-person { color: var(--nx-muted); font-style: italic; }
.nx-root .nx-stt__row.is-person .nx-stt__bar i { background: var(--nx-line); outline: 1px dashed var(--nx-muted); outline-offset: -1px; }
.nx-root .nx-stt__tag { margin-left: 6px; padding: 0 6px; border: 1px solid currentColor; border-radius: 8px; font-size: 11px; font-weight: 600; font-style: normal; }
.nx-root .nx-stt__sub { display: block; color: var(--nx-muted); }
.nx-root .nx-tk-timeline .nx-stt { padding: 0 0 10px; }

/* The short line of time under every finished answer (nx-chat-thread StepLine): "Sent 0.4 s · Memory 0.2 s · Connector (Lu Yuan) 46 s · AI 3.1 s · Total 50 s". Small and quiet; the longest part in a token colour; wraps on a phone. */
.nx-root .nx-stl { margin: var(--nx-s2) 0 0; font-size: var(--nx-fs-small); color: var(--nx-muted); }
.nx-root .nx-stl > summary::-webkit-details-marker { display: none; }
.nx-root .nx-stl > summary:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; border-radius: var(--nx-r1); }
.nx-root .nx-stl .nx-stt { padding: 6px 0 4px; }
.nx-root .nx-stl--flat { margin: 0 0 6px; }
@media (max-width: 720px) {
  .nx-root .nx-stl > summary { min-height: var(--nx-tap); }
}
/* Faster / Properly formatted: the small switch beside the agent chip, only in a chat with an agent that holds a slow server (Lu Yuan). Tokens only. */
.nx-root .nx-chat__speed { display: inline-flex; align-items: center; border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); background: var(--nx-bg); padding: 2px; }
.nx-root .nx-chat__speedbtn { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--nx-rfull); background: transparent; color: var(--nx-text); font-size: var(--nx-fs-small); font-weight: 600; cursor: pointer; }
.nx-root .nx-chat__speedbtn svg { width: 14px; height: 14px; }
.nx-root .nx-chat__speedbtn.is-on { background: var(--nx-blue-soft); }
.nx-root .nx-chat__speedbtn:focus-visible { outline: 2px solid var(--nx-blue); outline-offset: 1px; }
@media (max-width: 640px) { .nx-root .nx-chat__speedw { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
/* the line under the chat header is quiet (5 Nov 2026): when it shows a notice it wears the tone of the notice */
.nx-root .nx-chat__capbar.has-notice[data-tone="warn"] { background: var(--nx-amber-soft); }
.nx-root .nx-chat__capbar.has-notice[data-tone="warn"] .nx-chat__cap, .nx-root .nx-chat__capbar.has-notice[data-tone="warn"] .nx-chat__cap b { color: var(--nx-amber-text); }
.nx-root .nx-chat__capbar.has-notice[data-tone="info"] { background: var(--nx-blue-soft); }
.nx-root .nx-chat__capbar.has-notice[data-tone="info"] .nx-chat__cap, .nx-root .nx-chat__capbar.has-notice[data-tone="info"] .nx-chat__cap b { color: var(--nx-blue-text); }

/* The friendly time message under an answer (5 Nov 2026, "show proper message ... 3D stylish ... icons small small"): a header sentence, one pill per measured step with a tiny soft 3D icon, the slowest warm, a thin proportional bar.
   Tokens only; the icon tile is a small gradient with a light top edge and a soft shadow; a short fade in, none with reduced motion. */
.nx-root .nx-stl > summary { display: block; min-height: 28px; padding: 2px 0; cursor: pointer; list-style: none; }
.nx-root .nx-stl__card { display: grid; gap: 6px; padding: var(--nx-s2) var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); }
.nx-root .nx-stl__head { display: flex; align-items: center; gap: 8px; color: var(--nx-text); font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.nx-root .nx-stl__head .nx-stp-ico { width: 24px; height: 24px; }
.nx-root .nx-stl__head .nx-stp-ico .nx-gl { --gls: 16; }
.nx-root .nx-stl__more { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; color: var(--nx-muted); }
.nx-root .nx-stl__more .nx-gl { --gls: 14; }
.nx-root .nx-stl[open] .nx-stl__more .nx-gl { transform: rotate(180deg); }
.nx-root .nx-stl__most { color: var(--nx-text); font-weight: 600; }
.nx-root .nx-stl__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.nx-root .nx-stp { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px 3px 4px; border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); background: var(--nx-bg); font-size: 12.5px; white-space: nowrap; max-width: 100%; }
.nx-root .nx-stp__n { color: var(--nx-muted); overflow: hidden; text-overflow: ellipsis; }
.nx-root .nx-stp b { color: var(--nx-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.nx-root .nx-stp.is-slow { border-color: var(--nx-amber); background: var(--nx-amber-soft); }
.nx-root .nx-stp.is-slow b, .nx-root .nx-stp.is-slow .nx-stp__n { color: var(--nx-amber-text); }
.nx-root .nx-stp__flag { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: var(--nx-rfull); border: 1px solid var(--nx-amber); color: var(--nx-amber-text); }
.nx-root .nx-stp--total { background: var(--nx-blue-soft); border-color: transparent; }
.nx-root .nx-stp--total b, .nx-root .nx-stp--total .nx-stp__n { color: var(--nx-blue-text); }
.nx-root .nx-stp--person { border-style: dashed; background: transparent; font-style: italic; }
.nx-root .nx-stp--person .nx-stp__n { color: var(--nx-muted); }
.nx-root .nx-stp-ico { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; color: var(--nx-on-blue);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nx-on-blue) 55%, transparent), inset 0 -2px 3px color-mix(in srgb, var(--nx-text) 24%, transparent), 0 1px 2px color-mix(in srgb, var(--nx-text) 28%, transparent); }
.nx-root .nx-stp-ico .nx-gl { --gls: 12; }
.nx-root .nx-stp-ico.nx-stp-ico--sent, .nx-root .nx-stp-ico.nx-stp-ico--post, .nx-root .nx-stp-ico.nx-stp-ico--delivery, .nx-root .nx-stp-ico.nx-stp-ico--total { background: linear-gradient(150deg, color-mix(in srgb, var(--nx-blue) 70%, var(--nx-on-blue)), var(--nx-blue) 55%, color-mix(in srgb, var(--nx-blue) 80%, var(--nx-text))); }
.nx-root .nx-stl__seg.nx-stp-ico--sent, .nx-root .nx-stl__seg.nx-stp-ico--post, .nx-root .nx-stl__seg.nx-stp-ico--delivery, .nx-root .nx-stl__seg.nx-stp-ico--total { background: var(--nx-blue); }
.nx-root .nx-stp-ico.nx-stp-ico--memory, .nx-root .nx-stp-ico.nx-stp-ico--prepare { background: linear-gradient(150deg, color-mix(in srgb, var(--nx-cyan) 70%, var(--nx-on-blue)), var(--nx-cyan) 55%, color-mix(in srgb, var(--nx-cyan) 80%, var(--nx-text))); }
.nx-root .nx-stl__seg.nx-stp-ico--memory, .nx-root .nx-stl__seg.nx-stp-ico--prepare { background: var(--nx-cyan); }
.nx-root .nx-stp-ico.nx-stp-ico--model { background: linear-gradient(150deg, color-mix(in srgb, var(--nx-pill-a) 70%, var(--nx-on-blue)), var(--nx-pill-a) 55%, color-mix(in srgb, var(--nx-pill-a) 80%, var(--nx-text))); }
.nx-root .nx-stl__seg.nx-stp-ico--model { background: var(--nx-pill-a); }
.nx-root .nx-stp-ico.nx-stp-ico--tools { background: linear-gradient(150deg, color-mix(in srgb, var(--nx-amber) 70%, var(--nx-on-blue)), var(--nx-amber) 55%, color-mix(in srgb, var(--nx-amber) 80%, var(--nx-text))); }
.nx-root .nx-stl__seg.nx-stp-ico--tools { background: var(--nx-amber); }
.nx-root .nx-stp-ico.nx-stp-ico--connector { background: linear-gradient(150deg, color-mix(in srgb, var(--nx-pill-b) 70%, var(--nx-on-blue)), var(--nx-pill-b) 55%, color-mix(in srgb, var(--nx-pill-b) 80%, var(--nx-text))); }
.nx-root .nx-stl__seg.nx-stp-ico--connector { background: var(--nx-pill-b); }
.nx-root .nx-stp-ico.nx-stp-ico--check, .nx-root .nx-stp-ico.nx-stp-ico--answer { background: linear-gradient(150deg, color-mix(in srgb, var(--nx-success) 70%, var(--nx-on-blue)), var(--nx-success) 55%, color-mix(in srgb, var(--nx-success) 80%, var(--nx-text))); }
.nx-root .nx-stl__seg.nx-stp-ico--check, .nx-root .nx-stl__seg.nx-stp-ico--answer { background: var(--nx-success); }
.nx-root .nx-stp-ico.nx-stp-ico--press, .nx-root .nx-stp-ico.nx-stp-ico--back, .nx-root .nx-stp-ico.nx-stp-ico--paint { background: linear-gradient(150deg, color-mix(in srgb, var(--nx-link) 70%, var(--nx-on-blue)), var(--nx-link) 55%, color-mix(in srgb, var(--nx-link) 80%, var(--nx-text))); }
.nx-root .nx-stl__seg.nx-stp-ico--press, .nx-root .nx-stl__seg.nx-stp-ico--back, .nx-root .nx-stl__seg.nx-stp-ico--paint { background: var(--nx-link); }
.nx-root .nx-stp-ico.nx-stp-ico--person, .nx-root .nx-stp-ico.nx-stp-ico--other, .nx-root .nx-stp-ico.nx-stp-ico--unmeasured { background: linear-gradient(150deg, color-mix(in srgb, var(--nx-muted) 70%, var(--nx-on-blue)), var(--nx-muted) 55%, color-mix(in srgb, var(--nx-muted) 80%, var(--nx-text))); }
.nx-root .nx-stl__seg.nx-stp-ico--person, .nx-root .nx-stl__seg.nx-stp-ico--other, .nx-root .nx-stl__seg.nx-stp-ico--unmeasured { background: var(--nx-muted); }
.nx-root .nx-stl__bar { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; }
.nx-root .nx-stl__seg { display: block; min-width: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: no-preference) { .nx-root .nx-stl { animation: nx-stl-in var(--nx-d2) ease both; } @keyframes nx-stl-in { from { opacity: 0; } } }
@media (max-width: 720px) { .nx-root .nx-stl__card { padding: var(--nx-s2); } .nx-root .nx-stp { min-height: 32px; } }

/* The simple flow under an answer (5 Nov 2026, "complicate to understand. make it simple like user prompt to connector -> connector response -> etc"): a header, one plain sentence, 3 to 6 big steps with a small 3D icon,
   the words of the step and its time, arrows between them, the slowest marked (warm and with the word); a vertical list on a phone. The technical pills and the exact table are behind Details for administrators. Tokens only. */
.nx-root .nx-fl__det { border: 0; background: transparent; cursor: pointer; font: inherit; min-height: 28px; }
.nx-root .nx-fl__det[aria-expanded="true"] .nx-gl { transform: rotate(180deg); }
.nx-root .nx-fl__most { margin: 0; color: var(--nx-text); font-weight: 600; }
.nx-root .nx-fl__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px 2px; }
.nx-root .nx-fl__step { display: flex; align-items: center; gap: 2px; flex: 1 1 120px; min-width: 0; }
.nx-root .nx-fl__card { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-bg); }
.nx-root .nx-fl__card .nx-stp-ico { width: 30px; height: 30px; border-radius: 10px; }
.nx-root .nx-fl__card .nx-stp-ico .nx-gl { --gls: 18; }
.nx-root .nx-fl__t { min-width: 0; display: grid; gap: 1px; }
.nx-root .nx-fl__n { color: var(--nx-muted); font-size: 13px; font-weight: 600; line-height: 1.25; }
.nx-root .nx-fl__ms { color: var(--nx-text); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nx-root .nx-fl__t .nx-stp__flag { justify-self: start; }
.nx-root .nx-fl__step.is-slow .nx-fl__card { border-color: var(--nx-amber); background: var(--nx-amber-soft); }
.nx-root .nx-fl__step.is-slow .nx-fl__n, .nx-root .nx-fl__step.is-slow .nx-fl__ms { color: var(--nx-amber-text); }
.nx-root .nx-fl__arrow { flex: none; display: inline-grid; place-items: center; color: var(--nx-muted); }
.nx-root .nx-fl__arrow .nx-gl { --gls: 16; }
.nx-root .nx-fl__person { margin: 0; color: var(--nx-muted); font-style: italic; }
.nx-root .nx-fl__admin { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--nx-line); }
.nx-root .nx-stl__inner { display: grid; gap: 6px; }
@media (prefers-reduced-motion: no-preference) { .nx-root .nx-fl__step { animation: nx-fl-in var(--nx-d2) ease both; } .nx-root .nx-fl__step:nth-child(2) { animation-delay: 60ms; } .nx-root .nx-fl__step:nth-child(3) { animation-delay: 120ms; } .nx-root .nx-fl__step:nth-child(4) { animation-delay: 180ms; } .nx-root .nx-fl__step:nth-child(5) { animation-delay: 240ms; } .nx-root .nx-fl__step:nth-child(6) { animation-delay: 300ms; } @keyframes nx-fl-in { from { opacity: 0; } } }
@media (max-width: 1100px) {
  .nx-root .nx-fl__steps { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .nx-root .nx-fl__step { flex: none; flex-direction: column; align-items: stretch; gap: 0; }
  .nx-root .nx-fl__card { min-height: 44px; }
  .nx-root .nx-fl__t { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; }
  .nx-root .nx-fl__arrow { align-self: center; height: 18px; }
  .nx-root .nx-fl__arrow .nx-gl { transform: rotate(90deg); }
}

/* The compact line under an answer (6 Nov 2026, Sheraz: the time box is too big, some people have small screens): ONE line about a text line high: a small stopwatch, "Answered in 8.8 s", the slowest step as a small pill
   and Details. The flow, the sentence, the "Using previous context" line and (administrators) the technical timing are inside Details, closed until the person opens it (kept for them). Tokens only. */
.nx-root .nx-fl__box { min-width: 0; border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); }
.nx-root .nx-fl__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 32px; padding: 2px 4px 2px 10px; font-size: 13px; }
.nx-root .nx-fl__bar .nx-stp-ico { width: 20px; height: 20px; border-radius: 7px; }
.nx-root .nx-fl__head { color: var(--nx-text); font-size: 13px; font-weight: 700; }
.nx-root .nx-fl__chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 1px 8px; border: 1px solid var(--nx-amber); border-radius: var(--nx-rfull); background: var(--nx-amber-soft); color: var(--nx-amber-text); font-size: 12px; }
.nx-root .nx-fl__chip b { font-variant-numeric: tabular-nums; }
.nx-root .nx-fl__bar .nx-fl__det { margin-left: auto; min-height: 32px; padding: 0 8px; }
.nx-root .nx-fl__panel { display: grid; gap: 8px; padding: 8px 10px 10px; border-top: 1px solid var(--nx-line); }
.nx-root .nx-fl__extra { color: var(--nx-muted); }
.nx-root .nx-fl__tech { justify-self: start; min-height: 32px; padding: 0 12px; border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); background: transparent; color: var(--nx-muted); font: inherit; font-size: 12px; cursor: pointer; }

/* Every step with its exact time (5 Nov 2026): the waterfall under the line, one row per step with a bar placed where it started; a copy button. Tokens only; nothing moves or animates. */
.nx-root .nx-stw { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.nx-root .nx-stw__head { margin-top: 4px; font-weight: 600; color: var(--nx-text); }
.nx-root .nx-stw__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--nx-s2); row-gap: 2px; align-items: baseline; }
.nx-root .nx-stw__at { color: var(--nx-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-root .nx-stw__dur { color: var(--nx-text); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.nx-root .nx-stw__track { grid-column: 1 / -1; position: relative; height: 6px; border-radius: 3px; background: var(--nx-line); overflow: hidden; }
.nx-root .nx-stw__track i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--nx-muted); }
.nx-root .nx-stw__row.is-slow .nx-stw__track i { background: var(--nx-amber-text); }
.nx-root .nx-stw__row.is-slow .nx-stw__dur { color: var(--nx-amber-text); }
.nx-root .nx-stw__row.is-person { color: var(--nx-muted); font-style: italic; }
.nx-root .nx-stw__row.is-person .nx-stw__track i { background: transparent; outline: 1px dashed var(--nx-muted); outline-offset: -1px; }
.nx-root .nx-stw__row.is-gap .nx-stw__track i { background: transparent; outline: 1px dashed var(--nx-muted); outline-offset: -1px; }
.nx-root .nx-stw__row.is-child { padding-left: var(--nx-s4); color: var(--nx-muted); }
.nx-root .nx-stw--screen .nx-stw__row { grid-template-columns: minmax(0, 1fr) auto; }
.nx-root .nx-stt__acts { margin-top: 8px; }
.nx-root .nx-stt__old { margin: 6px 0; color: var(--nx-muted); }
@media (max-width: 720px) {
  .nx-root .nx-stw__row { grid-template-columns: minmax(0, 1fr) auto; }
  .nx-root .nx-stw__name { grid-column: 1; grid-row: 1; }
  .nx-root .nx-stw__dur { grid-column: 2; grid-row: 1; }
  .nx-root .nx-stw__at { grid-column: 1; grid-row: 2; font-size: 11px; }
  .nx-root .nx-stw__track { grid-row: 3; }
  .nx-root .nx-stt__copy { min-height: var(--nx-tap); }
}

/* The real chat inside the welcome designer (welcome-live.jsx, nx-chat.jsx bare): fills the card's height beside the form, phone width on request. Tokens only. */
.nx-root .agp-real { height: clamp(520px, calc(calc(100 * var(--ao-dvh)) - 150px), 820px); width: 100%; margin-inline: auto; border-radius: var(--nx-r2); overflow: hidden; background: var(--nx-surface); }
.nx-root .agp-real.is-phone { max-width: 390px; }
.nx-root .agp-real .nx-chat.nx-chat--bare { --chat-h: 100%; height: 100%; min-height: 0; border-radius: var(--nx-r2); box-shadow: none; }
.nx-root .agp-real .nx-chat__bnote { padding: 4px 12px; color: var(--nx-muted); border-bottom: 1px solid var(--nx-line); }
@media (max-width: 720px) {
  .nx-root .agp-real { height: clamp(460px, calc(80 * var(--ao-dvh)), 700px); }
}

/* ALERTS and NOTIFICATIONS of the redesigned look (22 Oct 2026, builder ALERTS; design note E). The bell panel, the settings sheet, the banner and the toast pictures.
   CONTRACT: every rule starts with .nx-root (the page and the portals, which carry .nx-root too); tokens only (no hard colour); motion only inside prefers-reduced-motion: no-preference;
   the shared toast classes (.nx-toast, .nx-toasts) belong to nx-w1.css alone (a test keeps ONE owner): this file only adds the picture class .nx-toast__g.
   ONE colour per kind of alert, each made from the theme's own status tokens so all seven themes follow (the pairs are in tools/nx-contrast.mjs):
   approval amber, finished green, stopped red, request blue, monitor teal (green with blue), system orange (amber with red), news grey. Colour is never alone: every alert has its picture and its word. */
.nx-root {
  --nx-al-approval: var(--nx-amber-text); --nx-al-approval-bg: var(--nx-amber-soft);
  --nx-al-finished: var(--nx-ok-text); --nx-al-finished-bg: var(--nx-ok-soft);
  --nx-al-stopped: var(--nx-bad-text); --nx-al-stopped-bg: var(--nx-bad-soft);
  --nx-al-request: var(--nx-blue-text); --nx-al-request-bg: var(--nx-blue-soft);
  --nx-al-monitor: color-mix(in srgb, var(--nx-ok-text) 50%, var(--nx-blue-text)); --nx-al-monitor-bg: color-mix(in srgb, var(--nx-ok-soft) 50%, var(--nx-blue-soft));
  --nx-al-system: color-mix(in srgb, var(--nx-amber-text) 50%, var(--nx-bad-text)); --nx-al-system-bg: color-mix(in srgb, var(--nx-amber-soft) 50%, var(--nx-bad-soft));
  --nx-al-news: var(--nx-muted); --nx-al-news-bg: var(--nx-hover);
}
.nx-root .nx-al--approval { --al-fg: var(--nx-al-approval); --al-bg: var(--nx-al-approval-bg); }
.nx-root .nx-al--finished { --al-fg: var(--nx-al-finished); --al-bg: var(--nx-al-finished-bg); }
.nx-root .nx-al--stopped { --al-fg: var(--nx-al-stopped); --al-bg: var(--nx-al-stopped-bg); }
.nx-root .nx-al--request { --al-fg: var(--nx-al-request); --al-bg: var(--nx-al-request-bg); }
.nx-root .nx-al--monitor { --al-fg: var(--nx-al-monitor); --al-bg: var(--nx-al-monitor-bg); }
.nx-root .nx-al--system { --al-fg: var(--nx-al-system); --al-bg: var(--nx-al-system-bg); }
.nx-root .nx-al--news { --al-fg: var(--nx-al-news); --al-bg: var(--nx-al-news-bg); }

/* the picture and the word of a kind */
.nx-root .nx-al-tile { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--al-bg); color: var(--al-fg); border: 1px solid var(--al-fg); }
.nx-root .nx-al-tile .nx-gl { --gls: 20; }
.nx-root .nx-al-tile--lg { width: 48px; height: 48px; border-radius: 14px; }
.nx-root .nx-al-tile--lg .nx-gl { --gls: 26; }
.nx-root .nx-al-word { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--nx-rfull); background: var(--al-bg); color: var(--al-fg); font-size: 12px; font-weight: 800; line-height: 1.5; white-space: nowrap; }

/* the bell panel */
.nx-root .nx-alpanel { width: 420px; max-width: calc(calc(100 * var(--ao-vw)) - 24px); max-height: min(calc(calc(100 * var(--ao-vh)) - 90px), 720px); }
.nx-root .nx-al-head { flex: none; display: flex; align-items: center; gap: var(--nx-s2); padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-al-head .nx-btn, .nx-root .nx-al-head .nx-iconbtn { flex: none; }
.nx-root .nx-al-head__main { flex: 1 1 0; min-width: 0; display: grid; gap: 2px; }
.nx-root .nx-al-title { margin: 0; font-size: var(--nx-fs-h3); line-height: 1.25; font-weight: 800; color: var(--nx-text); }
.nx-root .nx-al-count { font-size: var(--nx-fs-small); font-weight: 700; color: var(--nx-muted); overflow-wrap: anywhere; }
.nx-root .nx-al-tabs { flex: none; display: flex; gap: var(--nx-s2); padding: 8px 12px; overflow-x: auto; border-bottom: 1px solid var(--nx-line); scrollbar-width: thin; }
.nx-root .nx-al-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--nx-tap); padding: 0 var(--nx-s3); border: 1px solid var(--nx-control-line); border-radius: var(--nx-rfull); background: var(--nx-surface); color: var(--nx-text); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.nx-root .nx-al-tab:hover { background: var(--nx-hover); }
.nx-root .nx-al-tab[aria-selected="true"] { background: var(--nx-blue-soft); border-color: var(--nx-blue-text); color: var(--nx-blue-text); }
.nx-root .nx-al-tab__n { min-width: 20px; padding: 0 6px; border-radius: var(--nx-rfull); background: var(--nx-badge-bg); color: var(--nx-badge-text); font-size: 12px; font-weight: 800; line-height: 1.5; text-align: center; }
.nx-root .nx-al-body { flex: 1 1 auto; min-height: 120px; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
.nx-root .nx-al-group { display: block; }
.nx-root .nx-al-group__h { position: sticky; top: 0; z-index: 1; margin: 0; padding: 10px 16px 4px; background: var(--nx-surface); color: var(--nx-muted); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.nx-root .nx-al-list { list-style: none; margin: 0; padding: 0; }
.nx-root .nx-al-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-al-row:last-child { border-bottom: 0; }
.nx-root .nx-al-row__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.nx-root .nx-al-row__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.nx-root .nx-al-row__meta { color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }
.nx-root .nx-al-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--nx-blue); }
.nx-root .nx-al-row__title { font-weight: 700; color: var(--nx-text); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nx-root .nx-al-row.is-unread .nx-al-row__title { font-weight: 800; }
.nx-root .nx-al-row__n { font-weight: 600; color: var(--nx-muted); }
.nx-root .nx-al-row__text, .nx-root .nx-al-row__how { color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nx-root .nx-al-row__acts { display: flex; gap: var(--nx-s2); flex-wrap: wrap; margin-top: var(--nx-s2); }
.nx-root .nx-al-empty { display: grid; justify-items: center; gap: 6px; padding: var(--nx-s7) var(--nx-s4); }
.nx-root .nx-al-empty b { color: var(--nx-text); }
.nx-root .nx-al-foot { flex: none; padding: 10px 12px 12px; border-top: 1px solid var(--nx-line); display: grid; gap: 8px; }
.nx-root .nx-al-safe { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-al-safe__ico { --gls: 18; color: var(--nx-ok-text); }
.nx-root .nx-al-snz { margin: 0; }
.nx-root .nx-al-foot__acts { display: flex; gap: var(--nx-s2); }
.nx-root .nx-al-foot__acts .nx-btn { flex: 1; }
.nx-root .nx-al-linkbtn { display: inline-flex; align-items: center; min-height: var(--nx-tap); padding: 0 4px; background: none; border: 0; color: var(--nx-link); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.nx-root .nx-al-close { display: none; }

/* the banner: a problem that affects many tasks, with its cause, its reach and ONE button */
.nx-root .nx-albanner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 12px 14px; margin: 8px 12px; background: var(--nx-surface); color: var(--nx-text); border: 1px solid var(--nx-line); border-left: 5px solid var(--al-fg); border-radius: var(--nx-r2); }
.nx-root .nx-albanner__main { flex: 1 1 200px; min-width: 0; display: grid; gap: 4px; }
.nx-root .nx-albanner__top { display: flex; gap: 8px; align-items: center; }
.nx-root .nx-albanner__title { font-weight: 800; overflow-wrap: anywhere; }
.nx-root .nx-albanner__text { color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }
.nx-root .nx-albanner__acts { display: flex; gap: var(--nx-s2); flex-wrap: wrap; flex: none; max-width: 100%; }
.nx-root .nx-page .nx-albanner, .nx-root .content-inner .nx-albanner { margin: 0 0 var(--nx-s4); }

/* the settings sheet (a portal over the page) */
.nx-root .nx-al-scrim { position: fixed; inset: 0; z-index: 2250; display: flex; justify-content: flex-end; background: var(--nx-scrim); }
.nx-root .nx-al-sheet { width: min(560px, calc(100 * var(--ao-vw))); height: 100%; display: flex; flex-direction: column; background: var(--nx-surface); color: var(--nx-text); border-left: 1px solid var(--nx-line); box-shadow: var(--nx-panel-shadow); }
.nx-root .nx-al-sheet:focus { outline: none; }
.nx-root .nx-al-sheet__head { display: flex; align-items: center; gap: var(--nx-s2); padding: 12px 12px 12px 8px; border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-al-sheet__head .nx-grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-al-sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--nx-s4); display: grid; gap: var(--nx-s4); align-content: start; }
.nx-root .nx-al-sheet__intro { margin: 0; color: var(--nx-muted); overflow-wrap: anywhere; }

/* the toasts: each kind has its own picture (nx-toast.jsx); the toast classes themselves are drawn by nx-w1.css */
.nx-root .nx-toast__g { --gls: 24; flex: none; margin-top: 1px; color: var(--nx-kind); }
.nx-root .nx-toast--undo { --nx-kind: var(--nx-blue-text); }

@media (max-width: 860px) {
  .nx-root .nx-header .nx-alpanel { max-height: calc(calc(100 * var(--ao-vh)) - var(--nx-header-h) - var(--nx-bar-h) - 32px); }
  .nx-root .nx-al-close { display: inline-flex; }
  .nx-root .nx-al-sheet { width: calc(100 * var(--ao-vw)); border-left: 0; }
  .nx-root .nx-al-row { padding: 14px 16px; }
}
@media (max-width: 380px) {
  .nx-root .nx-al-head { padding-left: 12px; }
  .nx-root .nx-al-row, .nx-root .nx-al-group__h { padding-left: 12px; padding-right: 12px; }
  .nx-root .nx-albanner { margin-left: 8px; margin-right: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-al-scrim { animation: nx-fade var(--nx-d2) ease-out; }
  .nx-root .nx-al-sheet { animation: nx-slide var(--nx-d3) var(--nx-curve); }
  .nx-root .nx-al-tab { transition: background var(--nx-d2), border-color var(--nx-d2); }
  .nx-root .nx-al-row { transition: background var(--nx-d2); }
  .nx-root .nx-al-row:hover { background: var(--nx-hover); }
}

/* UI redesign ADMIN2 (22 Oct 2026): Admin > Systems and data and Admin > Platform (nx-systems.jsx, nx-platform.jsx, nx-w20-kit.jsx). It also uses the nx-w14 pieces (section card, note, field, facts).
   Tokens only (--nx-*), every rule starts with .nx-root, motion only inside prefers-reduced-motion: no-preference, 40 px targets, no sideways page scroll (a table scrolls inside its card). */

.nx-root .nx-w20 { min-width: 0; }
.nx-root .nx-w20-lead { margin: 0; }
.nx-root .nx-w20-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--nx-s3); }
.nx-root .nx-w20-pick { display: inline-flex; align-items: center; gap: var(--nx-s3); min-width: 0; max-width: 100%; }
.nx-root .nx-w20-pick .nx-select { min-width: 0; max-width: 100%; width: 12em; }   /* a fixed width: a select otherwise asks for the width of its longest department name */
.nx-root .nx-w20-pick { flex-wrap: wrap; }
.nx-root .nx-w20-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s3); }
.nx-root .nx-w20-search { flex: 1 1 260px; min-width: 0; }
.nx-root .nx-w20-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s3) var(--nx-s5); }
.nx-root .nx-w20 .nx-chips { margin: 0; }
.nx-root .nx-w20-chips .nx-chip b { margin-left: 8px; font-weight: 800; }
.nx-root .nx-w20-inline { display: inline-flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-w20-why { margin: 0; }
.nx-root .nx-w20-wait { min-height: 160px; display: grid; place-items: center; }
.nx-root .nx-w20-wait__t { color: var(--nx-muted); font-weight: 700; font-size: var(--nx-fs-small); }
.nx-root .nx-w20-cell { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-w20-cell .nx-small { color: var(--nx-muted); }

/* the catalogue: a card per system */
.nx-root .nx-w20-group { display: grid; gap: var(--nx-s3); }
.nx-root .nx-w20-group__h { margin: 0; display: flex; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-w20-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: var(--nx-s3); }
.nx-root .nx-w20-sys { display: flex; flex-direction: column; justify-content: space-between; gap: var(--nx-s3); background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s4); box-shadow: var(--nx-shadow); min-width: 0; }
.nx-root .nx-w20-sys__main { display: grid; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-w20-sys__name { font-weight: 800; font-size: var(--nx-fs-h3); text-align: left; padding: 0; min-height: var(--nx-tap); display: inline-flex; align-items: center; overflow-wrap: anywhere; background: transparent; border: 0; cursor: pointer; width: fit-content; max-width: 100%; }
.nx-root .nx-w20-sys__desc { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-w20-sys__act { display: flex; flex-wrap: wrap; gap: var(--nx-s2); min-height: 0; }
.nx-root .nx-w20-pills { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-w20-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--nx-s3); margin: 0; font-size: var(--nx-fs-small); }
.nx-root .nx-w20-facts dt { color: var(--nx-muted); font-weight: 700; }
.nx-root .nx-w20-facts dd { margin: 0; overflow-wrap: anywhere; }

/* a section card: heading, help line and the page's own buttons */
.nx-root .nx-w20-sec__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--nx-s3); }
.nx-root .nx-w20-sec__titles { min-width: 0; flex: 1 1 260px; display: grid; gap: var(--nx-s1); }
.nx-root .nx-w20-sec__titles .nx-h3 { margin: 0; }
.nx-root .nx-w20-sec__titles p { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-w20-sec__acts { display: inline-flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-w20-note .nx-btn { align-self: flex-start; }

/* forms in a sheet */
.nx-root .nx-w20-form { display: grid; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-w20-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--nx-s3); }
.nx-root .nx-w20-err { color: var(--nx-bad-text); font-weight: 700; }
.nx-root .nx-w20-oldbox { border: 1px solid var(--nx-line); border-radius: var(--nx-r1); padding: var(--nx-s3); background: var(--nx-bg); min-width: 0; overflow: auto; }
.nx-root .nx-w20 .nx-w14-field .nx-textarea { min-height: 72px; }

/* the side sheet (drawn in the page, so the old pieces inside it keep their providers) */
.nx-root .nx-w20-sheet { grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--nx-s3); }
.nx-root .nx-w20-sheet--wide { width: min(780px, calc(100 * var(--ao-vw))); }
.nx-root .nx-w20-sheet__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--nx-s3); }
.nx-root .nx-w20-sheet__head { min-width: 0; text-align: left; }
.nx-root .nx-w20-sheet__sub { margin: 4px 0 0; }
.nx-root .nx-w20-sheet .nx-dlg__title { font-size: 20px; }
.nx-root .nx-w20-sheet__body { display: grid; gap: var(--nx-s3); align-content: start; min-width: 0; overflow: auto; text-align: left; padding: 2px; }
.nx-root .nx-w20-sheet__body > p, .nx-root .nx-w20-sheet__body p { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-w20-sheet__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--nx-s2); padding-top: var(--nx-s3); border-top: 1px solid var(--nx-line); }

/* a real check box that reads as a switch, and always says On or Off */
.nx-root .nx-w20-switch { position: relative; display: inline-flex; align-items: center; gap: var(--nx-s3); min-height: var(--nx-tap); cursor: pointer; }
.nx-root .nx-w20-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; }
.nx-root .nx-w20-switch__track { flex: none; width: 46px; height: 26px; border-radius: 999px; border: 2px solid var(--nx-control-line); background: var(--nx-bg); position: relative; }
.nx-root .nx-w20-switch__track i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--nx-muted); }
.nx-root .nx-w20-switch input:checked + .nx-w20-switch__track { background: var(--nx-blue); border-color: var(--nx-blue); }
.nx-root .nx-w20-switch input:checked + .nx-w20-switch__track i { left: 22px; background: var(--nx-on-blue); }
.nx-root .nx-w20-switch input:focus-visible + .nx-w20-switch__track { outline: 3px solid var(--nx-focus); outline-offset: 2px; }
.nx-root .nx-w20-switch__word { font-weight: 800; min-width: 2.2em; }
.nx-root .nx-w20-switch.is-disabled { opacity: .7; cursor: not-allowed; }

/* a meter: the number, the bar, and the word */
.nx-root .nx-w20-meter { display: grid; gap: var(--nx-s1); min-width: 0; }
.nx-root .nx-w20-meter__head { display: flex; justify-content: space-between; gap: var(--nx-s3); align-items: baseline; }
.nx-root .nx-w20-meter__label { font-weight: 700; overflow-wrap: anywhere; }
.nx-root .nx-w20-meter__val { font-variant-numeric: tabular-nums; }
.nx-root .nx-w20-meter__track { height: 10px; border-radius: 999px; background: var(--nx-hover); border: 1px solid var(--nx-line); overflow: hidden; }
.nx-root .nx-w20-meter__track i { display: block; height: 100%; background: var(--nx-blue); border-radius: 999px; }
.nx-root .nx-w20-meter--ok .nx-w20-meter__track i { background: var(--nx-success); }
.nx-root .nx-w20-meter--warn .nx-w20-meter__track i { background: var(--nx-amber); }
.nx-root .nx-w20-meter--bad .nx-w20-meter__track i { background: var(--nx-danger); }
.nx-root .nx-w20-meter__foot { display: flex; flex-wrap: wrap; gap: var(--nx-s2); align-items: center; }
.nx-root .nx-w20-meter__foot .nx-small { overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .nx-root .nx-w20 .nx-input, .nx-root .nx-w20 .nx-select, .nx-root .nx-w20 .nx-textarea, .nx-root .nx-w20-sheet .nx-input, .nx-root .nx-w20-sheet .nx-select, .nx-root .nx-w20-sheet .nx-textarea { font-size: 16px; }
  .nx-root .nx-w20-sheet { width: calc(100 * var(--ao-vw)); padding: var(--nx-s4); }
  .nx-root .nx-w20-sheet__foot .nx-btn { flex: 1 1 100%; }
  .nx-root .nx-w20-top .nx-btn { flex: 1 1 100%; }
  .nx-root .nx-w20-pick { width: 100%; }
  .nx-root .nx-w20-pick .nx-select { flex: 1 1 12em; }
  .nx-root .nx-w20-sec__acts { width: 100%; }
  .nx-root .nx-w20-sec__acts .nx-btn { flex: 1 1 100%; }
  .nx-root .nx-w20-sys__act .nx-btn { flex: 1 1 100%; }
  .nx-root .nx-w20-search { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-w20-switch__track, .nx-root .nx-w20-switch__track i { transition: background-color .15s ease, left .15s ease, border-color .15s ease; }
  .nx-root .nx-w20-meter__track i { transition: width .4s ease; }
}

/* ---------------------------------------------------------------- Platform: capacity cards, settings cards, the quality quads, small helpers */
.nx-root .nx-w20-accs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: var(--nx-s4); }
.nx-root .nx-w20-acc { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s5); box-shadow: var(--nx-shadow); display: grid; gap: var(--nx-s4); align-content: start; min-width: 0; }
.nx-root .nx-w20-acc.is-on { border-color: var(--nx-blue); }
.nx-root .nx-w20-acc__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--nx-s3); align-items: flex-start; }
.nx-root .nx-w20-acc__id { min-width: 0; flex: 1 1 220px; }
.nx-root .nx-w20-acc__id .nx-h3 { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-w20-acc__id p { margin: 2px 0 0; overflow-wrap: anywhere; }
.nx-root .nx-w20-acc__meters { display: grid; gap: var(--nx-s4); }
.nx-root .nx-w20-acc__defs { grid-template-columns: minmax(90px, 150px) minmax(0, 1fr); font-size: var(--nx-fs-small); }
.nx-root .nx-w20-acc__foot { display: flex; flex-wrap: wrap; gap: var(--nx-s2) var(--nx-s4); align-items: center; justify-content: space-between; }
.nx-root .nx-w20-acc__foot .nx-small { overflow-wrap: anywhere; }
.nx-root .nx-w20-rest { margin: 0; color: var(--nx-amber-text); }
.nx-root .nx-w20-scroll { overflow-x: auto; max-width: 100%; }
.nx-root .nx-w20-mini { border-collapse: collapse; width: 100%; font-size: var(--nx-fs-small); }
.nx-root .nx-w20-mini th, .nx-root .nx-w20-mini td { text-align: left; padding: 4px var(--nx-s2); border-bottom: 1px solid var(--nx-line); white-space: nowrap; }
/* the by-company table inside an account card fits the card: its words wrap (1 Nov 2026, Sheraz: it ran wider than the card) */
.nx-root .nx-w20-acc .nx-w20-mini th, .nx-root .nx-w20-acc .nx-w20-mini td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.nx-root .nx-w20-guard { display: flex; flex-wrap: wrap; gap: var(--nx-s2) var(--nx-s3); align-items: center; }
.nx-root .nx-w20-att { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s3); }
.nx-root .nx-w20-att li { display: flex; gap: var(--nx-s3); align-items: flex-start; }
.nx-root .nx-w20-att li > div { min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-w20-att p { margin: 2px 0 0; }
.nx-root .nx-w20-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--nx-s5); }
.nx-root .nx-w20-charts > div { min-width: 0; overflow: auto; display: grid; gap: var(--nx-s2); align-content: start; }
.nx-root .nx-w20-charts .nx-h3, .nx-root .nx-w20-notes p { margin: 0; }
.nx-root .nx-w20-notes { display: grid; gap: var(--nx-s2); }
.nx-root .nx-w20-updated { display: inline-flex; gap: var(--nx-s2); align-items: baseline; }
.nx-root .nx-w20-inlineform { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); align-items: end; }
.nx-root .nx-w20-grow { min-width: min(260px, 100%); }
.nx-root .nx-w20-plain { list-style: none; padding-left: 0; }
.nx-root .nx-w20-plain li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); overflow-wrap: anywhere; }
.nx-root .nx-w20-linkbtn { background: transparent; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 700; text-align: left; min-height: var(--nx-tap); overflow-wrap: anywhere; }
.nx-root .nx-w20-wrap { overflow-wrap: anywhere; white-space: pre-wrap; }
.nx-root .nx-w20-quads { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--nx-s4); align-items: start; }
.nx-root .nx-w20-two2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: var(--nx-s4); align-items: start; }
.nx-root .nx-w20-two2 > * { min-width: 0; }
.nx-root .nx-w20-meters { display: grid; gap: var(--nx-s4); }
.nx-root .nx-w20-setrow { display: inline-flex; align-items: center; gap: var(--nx-s3); flex-wrap: wrap; }
.nx-root .nx-w20-narrow { max-width: 240px; }

/* a setting: what it is, and its control */
.nx-root .nx-w20-set { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--nx-s4); align-items: start; padding: var(--nx-s4) 0; border-top: 1px solid var(--nx-line); min-width: 0; }
.nx-root .nx-w20-set:first-of-type { border-top: 0; }
.nx-root .nx-w20-set__main { min-width: 0; display: grid; gap: var(--nx-s1); }
.nx-root .nx-w20-set__main .nx-h3 { margin: 0; }
.nx-root .nx-w20-set__main p { margin: 0; overflow-wrap: anywhere; max-width: 78ch; }
.nx-root .nx-w20-set__ctl { display: grid; gap: var(--nx-s2); justify-items: start; min-width: 0; }
.nx-root .nx-w20-set__status { display: inline-flex; }
.nx-root .nx-w20-set--wide { grid-template-columns: minmax(0, 1fr); }
.nx-root .nx-w20-set--wide .nx-w20-set__ctl { justify-items: stretch; overflow: auto; }
.nx-root .nx-w20-set .ant-segmented, .nx-root .nx-w20-set .ant-select { max-width: 100%; }

@media (max-width: 860px) {
  .nx-root .nx-w20-set { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-w20-acc { padding: var(--nx-s4); }
  .nx-root .nx-w20-acc__defs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .nx-root .nx-w20-acc__defs dd { margin-bottom: var(--nx-s2); }
  .nx-root .nx-w20-charts, .nx-root .nx-w20-two2 { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-w20-inline .nx-btn { flex: 1 1 auto; }
}

/* an earlier component mounted inside a card or a sheet sits flat in it (the quiet sheet of a whole mounted page is for whole pages only) */
.nx-root .nx-w20 .nx-old, .nx-root .nx-w20-sheet .nx-old, .nx-root .nx-w20-oldbox .nx-old, .nx-root .nx-w20-set .nx-old { min-height: 0; border: 0; background: transparent; padding: 0; border-radius: 0; }

/* extra usage cards, the stat tiles and the table's sort pick in a narrow box */
.nx-root .nx-w20-extra { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s4); display: grid; gap: var(--nx-s3); align-content: start; min-width: 0; }
.nx-root .nx-w20-extra__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s2); }
.nx-root .nx-w20-extra__head .nx-h3 { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-w20 .nx-stat__label { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.nx-root .nx-w20 .nx-tbl__sortpick { min-width: 0; max-width: 100%; }
.nx-root .nx-w20 .nx-tbl__sortpick .nx-select { min-width: 0; max-width: 100%; width: 100%; }
@media (max-width: 420px) {
  .nx-root .nx-w20 .nx-stats { grid-template-columns: minmax(0, 1fr); }
}

/* People (ADMIN1): the department filter's select asked for the width of its longest department name and widened the page by 9 px at 320 px (found by the gate before this work); a fixed width fixes it */
.nx-root .nx-w14-deptfilter { flex-wrap: wrap; }
.nx-root .nx-w14-deptfilter .nx-select { width: 12em; min-width: 0; max-width: 100%; }
@media (max-width: 860px) { .nx-root .nx-w14-deptfilter .nx-select { flex: 1 1 12em; } }/* AGENTS CARD (1 Nov 2026, Sheraz on h289: the numbers were clipped to "2:" with no label). Each tile holds 4 digits and moves to a new row before it would clip; the label is under the number.
   A count with agents behind it is a button: it opens those agents under the counts. */
.nx-root .nx-w20-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(88px, 100%), 1fr)); gap: var(--nx-s2); margin-bottom: var(--nx-s3); }
.nx-root .nx-w20-tile { display: grid; justify-items: start; gap: 2px; padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r2); min-width: 0; color: var(--nx-blue-text); }
.nx-root .nx-w20-tile b { font-size: 22px; line-height: 1.15; font-weight: 800; color: var(--nx-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-root .nx-w20-tile span { font-size: var(--nx-fs-small); font-weight: 700; color: var(--nx-muted); overflow-wrap: anywhere; }
.nx-root .nx-w20-countbtn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; border-radius: 999px; min-height: var(--nx-tap); display: inline-flex; align-items: center; }
.nx-root .nx-w20-countbtn .nx-pill { text-decoration: underline; text-underline-offset: 2px; }
.nx-root .nx-w20-countbtn[aria-expanded="true"] .nx-pill { box-shadow: 0 0 0 2px currentColor; }
.nx-root .nx-w20-countbtn:focus-visible { outline: var(--nx-focus-ring); outline-offset: 2px; }
.nx-root .nx-w20-picklist { display: grid; gap: var(--nx-s1); margin: var(--nx-s3) 0 0; max-height: 320px; overflow: auto; }
/* DEPARTMENT LINKS (3 Nov 2026): the links a department already has, with Use this one; the short list at the top of the Add sheet */
.nx-root .nx-w20-acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-w20-reuse { display: grid; gap: var(--nx-s2); margin: 0 0 var(--nx-s3); padding: var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); }
.nx-root .nx-w20-reuse p { margin: 0; }

/* AUTOMATIONS (22 Oct 2026): the page at #/automations (web/src/nx-auto.jsx) and its New automation dialog (nx-auto-new.jsx). Every rule starts with .nx-root and uses only --nx-* tokens
   (qa-2026-10-21-nx-css-scoped, nx-themes, tools/nx-contrast.mjs). Motion lives only in the prefers-reduced-motion: no-preference block at the end. Targets are 40 px and inputs are 16 px up to 860 px;
   nothing makes the page scroll sideways. Status is never colour alone: every state has a word, and a pressed choice also shows a tick. Shipped before nx-w11.css, which stays the last stylesheet. */

/* ---------------------------------------------------------------- the icon tiles: one picture, one colour, one word beside it */
.nx-root .nx-w21-tile { --gls: 22; flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-w21-tile--lg { --gls: 26; width: 48px; height: 48px; border-radius: 14px; }
.nx-root .nx-w21-tile--sm { --gls: 18; width: 30px; height: 30px; border-radius: 9px; }
.nx-root .nx-w21-tile--xs { --gls: 14; width: 22px; height: 22px; border-radius: 7px; }
.nx-root .nx-w21-tile--green, .nx-root .nx-w21-tile--ok { background: var(--nx-ok-soft); color: var(--nx-ok-text); }
.nx-root .nx-w21-tile--amber, .nx-root .nx-w21-tile--warn { background: var(--nx-amber-soft); color: var(--nx-amber-text); }
.nx-root .nx-w21-tile--bad { background: var(--nx-bad-soft); color: var(--nx-bad-text); }
.nx-root .nx-w21-tile--gray { background: var(--nx-hover); color: var(--nx-muted); }

/* ---------------------------------------------------------------- the page */
.nx-root .nx-w21-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s3); margin: var(--nx-s3) 0; }
.nx-root .nx-w21-count { margin: 0; color: var(--nx-muted); min-width: 0; }
.nx-root .nx-w21-top .nx-gl, .nx-root .nx-w21-row .nx-btn .nx-gl, .nx-root .nx-w21-empty .nx-btn .nx-gl { --gls: 18; }
.nx-root .nx-w21-filters { display: grid; gap: var(--nx-s2); margin: 0 0 var(--nx-s4); }
.nx-root .nx-w21-filters .nx-chips { margin: 0; }
.nx-root .nx-w21-fchip { gap: 8px; }
.nx-root .nx-w21-fchip .nx-w21-tile { background: none; }
.nx-root .nx-w21-fchip__i { display: inline-grid; --gls: 16; }
.nx-root .nx-w21-fchip__n { min-width: 22px; padding: 0 6px; border: 1px solid currentColor; border-radius: var(--nx-rfull); font-size: var(--nx-fs-small); line-height: 1.5; text-align: center; }
.nx-root .nx-w21-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s3); }
.nx-root .nx-w21-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 190px 180px 150px; grid-template-areas: "tile main when st acts"; gap: var(--nx-s2) var(--nx-s4); align-items: center; min-width: 0; padding: var(--nx-s4); background: var(--nx-surface); color: var(--nx-text); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); }
.nx-root .nx-w21-row > .nx-w21-tile { grid-area: tile; }
.nx-root .nx-w21-row__main { grid-area: main; min-width: 0; }
.nx-root .nx-w21-row__when { grid-area: when; }
.nx-root .nx-w21-row__st { grid-area: st; }
.nx-root .nx-w21-row__acts { grid-area: acts; }
.nx-root .nx-w21-row__name { font-weight: 800; font-size: 16px; overflow-wrap: anywhere; }
.nx-root .nx-w21-row__line { color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }
.nx-root .nx-w21-row__note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); margin-top: 6px; font-size: var(--nx-fs-small); color: var(--nx-muted); overflow-wrap: anywhere; }
.nx-root .nx-w21-row__note--warn { padding: 8px 10px; border-radius: var(--nx-r1); background: var(--nx-amber-soft); color: var(--nx-text); }
.nx-root .nx-w21-row__note--warn .nx-gl { --gls: 18; flex: none; color: var(--nx-amber-text); }
.nx-root .nx-w21-row__note > span { min-width: 0; flex: 1 1 200px; }
.nx-root .nx-w21-row__when { margin: 0; display: grid; gap: 6px; min-width: 0; }
.nx-root .nx-w21-row__when > div { min-width: 0; }
.nx-root .nx-w21-row__when dt { color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-w21-row__when dd { margin: 0; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.nx-root .nx-w21-row__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--nx-s2); }
.nx-root .nx-w21-row__st { justify-self: start; }
.nx-root .nx-w21-row .nx-pill .nx-gl { --gls: 14; }
.nx-root .nx-w21-menu .nx-menu__list { z-index: 90; }
.nx-root .nx-w21-menu .nx-menu__item .nx-gl { --gls: 18; }
.nx-root .nx-w21-skel { display: grid; gap: var(--nx-s3); }
.nx-root .nx-w21-hint { margin: 0; color: var(--nx-muted); overflow-wrap: anywhere; }
.nx-root .nx-w21-safe { display: flex; align-items: flex-start; gap: 8px; margin: var(--nx-s2) 0 0; color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }
.nx-root .nx-w21-safe .nx-gl { --gls: 18; flex: none; color: var(--nx-ok-text); }
.nx-root .nx-w21-safe--page { justify-content: center; margin-top: var(--nx-s5); text-align: left; }

/* the empty state: says what to do next */
.nx-root .nx-w21-empty { display: grid; gap: var(--nx-s3); justify-items: center; text-align: center; padding: var(--nx-s8) var(--nx-s4); background: var(--nx-surface); border: 1px dashed var(--nx-control-line); border-radius: var(--nx-r2); }
.nx-root .nx-w21-empty__big { --gls: 32; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--nx-pill); color: var(--nx-pill-text); }
.nx-root .nx-w21-empty h2 { margin: 0; }
.nx-root .nx-w21-empty p { margin: 0; max-width: 56ch; color: var(--nx-muted); }
.nx-root .nx-w21-empty__kinds { list-style: none; margin: var(--nx-s2) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--nx-s3) var(--nx-s5); text-align: left; }
.nx-root .nx-w21-empty__kinds li { display: flex; align-items: center; gap: 10px; max-width: 280px; color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-w21-empty__kinds b { display: block; color: var(--nx-text); font-size: 14px; }

/* ---------------------------------------------------------------- the New automation dialog: a centred dialog, a bottom sheet on a phone */
.nx-root .nx-dlg:has(.nx-w21-wiz) { width: min(700px, 100%); display: flex; flex-direction: column; align-items: stretch; overflow: hidden; }
.nx-root .nx-dlg--sheet:has(.nx-w21-wiz) { max-height: calc(96 * var(--ao-vh)); }
.nx-root .nx-dlg:has(.nx-w21-wiz) .nx-dlg__title { flex: none; text-align: left; }
.nx-root .nx-dlg:has(.nx-w21-wiz) .nx-dlg__content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.nx-root .nx-w21-wiz { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--nx-s4); width: 100%; min-width: 0; text-align: left; }
.nx-root .nx-w21-wiz > .nx-w21-steps, .nx-root .nx-w21-wiz > .nx-w21-h, .nx-root .nx-w21-wiz > .nx-w21-note, .nx-root .nx-w21-wiz > .nx-w21-foot { flex: none; }
.nx-root .nx-w21-wiz .nx-gl { --gls: 18; flex: none; }
.nx-root .nx-w21-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.nx-root .nx-w21-steps li { display: flex; align-items: center; gap: 6px; min-width: 0; padding-top: 8px; border-top: 5px solid var(--nx-line); color: var(--nx-muted); font-size: var(--nx-fs-small); font-weight: 600; }
.nx-root .nx-w21-steps li.is-done, .nx-root .nx-w21-steps li.is-now { border-top-color: var(--nx-blue); color: var(--nx-text); }
.nx-root .nx-w21-steps li.is-now { font-weight: 800; }
.nx-root .nx-w21-steps__n { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 12px; font-weight: 800; }
.nx-root .nx-w21-steps__n .nx-gl { --gls: 12; }
.nx-root .nx-w21-steps li.is-done .nx-w21-steps__n { background: var(--nx-blue-soft); color: var(--nx-blue-text); border-color: var(--nx-blue-text); }
.nx-root .nx-w21-steps__w { min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-w21-h { margin: 0; font-size: var(--nx-fs-h3); line-height: 1.3; overflow-wrap: anywhere; }
.nx-root .nx-w21-h:focus { outline: none; }
.nx-root .nx-w21-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; gap: var(--nx-s4); align-content: start; min-width: 0; padding: 2px 4px 2px 2px; margin: 0 -4px 0 -2px; }
.nx-root .nx-w21-sub { margin: var(--nx-s2) 0 0; font-size: 14px; font-weight: 800; }

/* step 1: the three kinds (also the two sources of a watch) */
.nx-root .nx-w21-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nx-s3); }
.nx-root .nx-w21-kinds--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nx-root .nx-w21-kind { display: grid; gap: 4px; justify-items: start; align-content: start; min-width: 0; min-height: var(--nx-tap); padding: var(--nx-s4); text-align: left; background: var(--nx-surface); color: var(--nx-text); border: 2px solid var(--nx-control-line); border-radius: var(--nx-r2); font: inherit; cursor: pointer; }
.nx-root .nx-w21-kind b { margin-top: 6px; font-size: 16px; overflow-wrap: anywhere; }
.nx-root .nx-w21-kind > span:not(.nx-w21-tile), .nx-root .nx-w21-kind > small { color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }
.nx-root .nx-w21-kind:hover { border-color: var(--nx-blue); }
.nx-root .nx-w21-kind[aria-pressed="true"] { border-color: var(--nx-blue); background: var(--nx-blue-soft); }
.nx-root .nx-w21-kind[aria-disabled="true"] { border-style: dashed; cursor: not-allowed; }
.nx-root .nx-w21-kind[aria-disabled="true"]:hover { border-color: var(--nx-control-line); }

/* step 2: fields, chips, days */
.nx-root .nx-w21-field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.nx-root .nx-w21-label { padding: 0; font-weight: 700; font-size: 14px; }
.nx-root .nx-w21-field .nx-input { width: 100%; min-width: 0; flex: none; }
.nx-root .nx-w21-field.has-err > .nx-input, .nx-root .nx-w21-field.has-err > .nx-textarea { border-color: var(--nx-bad-text); }
.nx-root .nx-w21-err { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--nx-bad-text); font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.nx-root .nx-w21-err2 { color: var(--nx-bad-text); font-weight: 700; margin: 4px 0 0; overflow-wrap: anywhere; }
.nx-root .nx-w21-ok { color: var(--nx-ok-text); font-weight: 700; margin: 4px 0 0; overflow-wrap: anywhere; }
.nx-root .nx-w21-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.nx-root .nx-w21-picker { display: grid; gap: 8px; min-width: 0; }
.nx-root .nx-w21-picker .nx-w21-chips { max-height: 280px; overflow-y: auto; padding: 2px; }
.nx-root .nx-w21-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; min-height: var(--nx-tap); padding: 4px 12px; text-align: left; background: var(--nx-surface); color: var(--nx-text); border: 1.5px solid var(--nx-control-line); border-radius: var(--nx-rfull); font: inherit; font-weight: 600; cursor: pointer; }
.nx-root .nx-w21-chip > .nx-gl:first-child { --gls: 20; }
.nx-root .nx-w21-chip .nx-dt { width: 30px; height: 30px; border-radius: 9px; flex: none; }
.nx-root .nx-w21-chip .nx-dt .nx-gl { --gls: 18; }
.nx-root .nx-w21-chip:has(> .nx-dt) { padding-left: 5px; }
.nx-root .nx-w21-chip:has(> .nx-w21-tile) { padding-left: 5px; }
.nx-root .nx-w21-chip__t { display: grid; min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-w21-chip__t small { font-weight: 500; font-size: var(--nx-fs-small); color: inherit; }
.nx-root .nx-w21-chip__on { display: none; margin-left: auto; padding-left: 4px; }
.nx-root .nx-w21-chip[aria-pressed="true"] .nx-w21-chip__on { display: inline-grid; }
.nx-root .nx-w21-chip[aria-pressed="true"], .nx-root .nx-w21-day[aria-pressed="true"] { border-color: var(--nx-blue-text); background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-w21-chip--block { width: 100%; align-items: flex-start; border-radius: var(--nx-r2); padding: 8px 12px; }
.nx-root .nx-w21-chip:hover, .nx-root .nx-w21-day:hover { border-color: var(--nx-blue); }
.nx-root .nx-w21-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.nx-root .nx-w21-days--wide { display: flex; flex-wrap: wrap; }
.nx-root .nx-w21-day { min-height: var(--nx-tap); padding: 0 6px; background: var(--nx-surface); color: var(--nx-text); border: 1.5px solid var(--nx-control-line); border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; }
.nx-root .nx-w21-days--wide .nx-w21-day { padding: 0 12px; }
.nx-root .nx-w21-time { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nx-root .nx-w21-field .nx-w21-time .nx-input { width: 140px; }
.nx-root .nx-w21-more { border-top: 1px solid var(--nx-line); padding-top: var(--nx-s2); }
.nx-root .nx-w21-more > summary { display: flex; align-items: center; min-height: var(--nx-tap); font-weight: 700; color: var(--nx-link); cursor: pointer; }
.nx-root .nx-w21-more > .nx-w21-field, .nx-root .nx-w21-more > .nx-w21-check { margin-top: var(--nx-s3); }
.nx-root .nx-w21-check { display: flex; align-items: flex-start; gap: 10px; min-height: var(--nx-tap); }
.nx-root .nx-w21-check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; }
.nx-root .nx-w21-check span { min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-w21-check small { display: block; color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-w21-files { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nx-root .nx-w21-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 4px 2px 10px; background: var(--nx-bg); color: var(--nx-text); border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); overflow-wrap: anywhere; }
.nx-root .nx-w21-file__x { min-width: 32px; min-height: 32px; background: none; border: 0; border-radius: 50%; color: var(--nx-muted); font: inherit; font-weight: 800; cursor: pointer; }
.nx-root .nx-w21-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: var(--nx-s3); border-radius: var(--nx-r1); background: var(--nx-blue-soft); color: var(--nx-text); overflow-wrap: anywhere; }
.nx-root .nx-w21-note > .nx-gl { color: var(--nx-blue-text); }
.nx-root .nx-w21-note > div { flex: 1 1 200px; min-width: 0; }
.nx-root .nx-w21-note p { margin: 2px 0 0; }
.nx-root .nx-w21-note--warn { background: var(--nx-amber-soft); }
.nx-root .nx-w21-note--warn > .nx-gl { color: var(--nx-amber-text); }

/* step 3 and 4: where it tells you, the check */
.nx-root .nx-w21-chan { display: flex; align-items: flex-start; gap: 12px; padding: var(--nx-s3) var(--nx-s4); background: var(--nx-surface); color: var(--nx-text); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); }
.nx-root .nx-w21-chan--switch { align-items: center; }
.nx-root .nx-w21-chan__t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-w21-chan__t > b { display: block; }
.nx-root .nx-w21-chan__t > p { margin: 2px 0 0; }
.nx-root .nx-w21-chan .nx-pill .nx-gl { --gls: 14; }
.nx-root .nx-w21-sum { display: flex; align-items: flex-start; gap: 12px; padding: var(--nx-s4); background: var(--nx-bg); color: var(--nx-text); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); }
.nx-root .nx-w21-sum > div { min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-w21-sum .nx-pill { margin-left: 8px; vertical-align: middle; }
.nx-root .nx-w21-sum p { margin: 4px 0 0; }
.nx-root .nx-w21-alert { display: flex; align-items: flex-start; gap: 12px; padding: var(--nx-s3) var(--nx-s4); background: var(--nx-surface); color: var(--nx-text); border: 1px solid var(--nx-line); border-left: 5px solid var(--nx-blue); border-radius: var(--nx-r2); }
.nx-root .nx-w21-alert > div { min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-w21-alert p { margin: 2px 0 0; }
.nx-root .nx-w21-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s3); padding-top: var(--nx-s3); border-top: 1px solid var(--nx-line); }
.nx-root .nx-w21-foot__msg { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-w21-acts { display: flex; flex-wrap: wrap; gap: var(--nx-s2); margin-left: auto; }

/* the on / off switch (a real checkbox with role switch; the word On or Off is beside it) */
.nx-root .nx-w21-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: var(--nx-tap); cursor: pointer; font-weight: 700; flex: none; }
.nx-root .nx-w21-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.nx-root .nx-w21-switch.is-off, .nx-root .nx-w21-switch.is-off input { cursor: not-allowed; }
.nx-root .nx-w21-switch__track { position: relative; flex: none; width: 46px; height: 26px; background: var(--nx-hover); border: 1.5px solid var(--nx-control-line); border-radius: var(--nx-rfull); }
.nx-root .nx-w21-switch__track i { position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; background: var(--nx-muted); border-radius: 50%; }
.nx-root .nx-w21-switch input:checked + .nx-w21-switch__track { background: var(--nx-blue); border-color: var(--nx-blue); }
.nx-root .nx-w21-switch input:checked + .nx-w21-switch__track i { left: 22px; background: var(--nx-on-blue); }
.nx-root .nx-w21-switch input:focus-visible + .nx-w21-switch__track { outline: 2px solid var(--nx-focus); outline-offset: 2px; }
.nx-root .nx-w21-switch__w { min-width: 2ch; }

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1100px) {
  .nx-root .nx-w21-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tile main st" ". when when" ". acts acts"; }
  .nx-root .nx-w21-row__when { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nx-s3); }
  .nx-root .nx-w21-row__acts { justify-content: flex-start; }
  .nx-root .nx-w21-row > .nx-w21-tile { align-self: start; }
}
@media (max-width: 860px) {
  .nx-root .nx-w21-wiz .nx-input, .nx-root .nx-w21-wiz .nx-textarea, .nx-root .nx-w21-wiz .nx-select, .nx-root .nx-w21-wiz input[type="time"], .nx-root .nx-w21-wiz input[type="search"] { font-size: 16px; }
  .nx-root .nx-w21-wiz .nx-btn, .nx-root .nx-w21-wiz .nx-btn--sm, .nx-root .nx-w21-row .nx-btn, .nx-root .nx-w21-row .nx-btn--sm, .nx-root .nx-w21-note .nx-btn { min-height: var(--nx-tap); }
  .nx-root .nx-w21-file__x { min-height: var(--nx-tap); min-width: var(--nx-tap); }
  .nx-root .nx-w21-switch input { min-height: var(--nx-tap); }
  .nx-root .nx-w21-kinds { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-w21-kinds--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-root .nx-w21-more > summary { min-height: var(--nx-tap); }
}
@media (max-width: 560px) {
  .nx-root .nx-w21-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "tile main" ". st" ". when" ". acts"; padding: var(--nx-s3); }
  .nx-root .nx-w21-row__st { justify-self: start; }
  .nx-root .nx-w21-filters .nx-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .nx-root .nx-w21-filters .nx-chip { flex: none; }
  .nx-root .nx-w21-steps li:not(.is-now) .nx-w21-steps__w { display: none; }
  .nx-root .nx-w21-kind { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
  .nx-root .nx-w21-kind > .nx-w21-tile { grid-row: span 2; }
  .nx-root .nx-w21-kind b { margin-top: 0; }
  .nx-root .nx-w21-kinds--two .nx-w21-kind { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-w21-kinds--two .nx-w21-kind > .nx-w21-tile { grid-row: auto; }
  .nx-root .nx-w21-chan, .nx-root .nx-w21-sum, .nx-root .nx-w21-alert { padding: var(--nx-s3); }
  .nx-root .nx-w21-acts { width: 100%; }
  .nx-root .nx-w21-acts .nx-btn { flex: 1 1 0; }
}

/* ---------------------------------------------------------------- motion only when the person allows it */
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-w21-kind, .nx-root .nx-w21-chip, .nx-root .nx-w21-day { transition: border-color var(--nx-d2), background var(--nx-d2), transform var(--nx-d2); }
  .nx-root .nx-w21-kind:hover { transform: translateY(-2px); }
  .nx-root .nx-w21-switch__track, .nx-root .nx-w21-switch__track i { transition: left var(--nx-d2), background var(--nx-d2), border-color var(--nx-d2); }
}

/* PALETTE (22 Oct 2026): the Ctrl K palette of the redesigned shell (design note E). Search | Ask AI, scope chips, icon tiles, Recent and Suggested, hints on the selected row only,
   Platform checks, and a full height sheet on a phone. Loaded before nx-w11.css (the responsive layer stays last). Every selector starts with .nx-root, colours are tokens, and motion
   only runs when the person allows it. The base rules are in nx-w1.css; these refine them. */

.nx-root .nx-pal { padding: calc(8 * var(--ao-vh)) var(--nx-s3) var(--nx-s3); }
.nx-root .nx-pal__box { width: min(760px, 100%); max-height: min(calc(80 * var(--ao-vh)), 760px); min-width: 0; }
.nx-root .nx-pal__bar { gap: var(--nx-s3); padding: 0 var(--nx-s3) 0 var(--nx-s4); }
.nx-root .nx-pal__close { flex: none; display: inline-grid; place-items: center; min-width: 40px; min-height: 32px; padding: 0 var(--nx-s2); border: 1px solid var(--nx-control-line); border-radius: var(--nx-r1); background: none; color: var(--nx-text); font: 700 var(--nx-fs-small) var(--nx-font); cursor: pointer; }
.nx-root .nx-pal__close:hover { background: var(--nx-hover); }
.nx-root .nx-pal__close .nx-gl { display: none; --gls: 22; }

/* Search | Ask AI, then where to look */
.nx-root .nx-pal__tools { display: flex; align-items: center; gap: var(--nx-s3); padding: var(--nx-s2) var(--nx-s4); border-bottom: 1px solid var(--nx-line); min-width: 0; }
.nx-root .nx-pal__modes { flex: none; }
.nx-root .nx-pal__mode { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; white-space: nowrap; }
.nx-root .nx-pal__mode .nx-gl { --gls: 16; }
.nx-root .nx-pal__mi { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-pal__chips { display: flex; gap: var(--nx-s2); flex: 1; min-width: 0; overflow-x: auto; padding: 3px; scrollbar-width: none; }
.nx-root .nx-pal__chips::-webkit-scrollbar { display: none; }
.nx-root .nx-pal__chip { flex: none; min-height: 36px; padding: 0 14px; border: 1px solid var(--nx-control-line); border-radius: var(--nx-rfull); background: none; color: var(--nx-text); font: 600 var(--nx-fs-small) var(--nx-font); white-space: nowrap; cursor: pointer; }
.nx-root .nx-pal__chip:hover { background: var(--nx-hover); }
.nx-root .nx-pal__chip[aria-pressed="true"] { background: var(--nx-blue-soft); color: var(--nx-blue-text); border-color: var(--nx-blue); font-weight: 800; box-shadow: inset 0 0 0 1px var(--nx-blue); }
.nx-root .nx-pal__chip[aria-pressed="true"]::before { content: "\2713\00a0"; }

/* the list */
.nx-root .nx-pal__list { flex: 1; min-height: 120px; padding: var(--nx-s1) var(--nx-s2) var(--nx-s3); overflow-x: hidden; overscroll-behavior: contain; }
.nx-root .nx-pal__sec--ask { margin-top: var(--nx-s2); padding-top: var(--nx-s1); border-top: 1px solid var(--nx-line); }
.nx-root .nx-pal__row { min-height: 52px; flex-wrap: nowrap; }
.nx-root .nx-pal__row--ask .nx-pal__title { font-weight: 800; }
.nx-root .nx-pal__row[aria-selected="true"], .nx-root .nx-pal__row:hover { background: var(--nx-hover); }   /* the hover ground, so every status word keeps 4.5 on it in all seven looks */
.nx-root .nx-pal__main { min-width: 0; }
.nx-root .nx-pal__meta > .nx-pal__st { display: inline; }
.nx-root .nx-pal__meta--wrap { white-space: normal; overflow: visible; }
.nx-root .nx-pal__st[data-tone="gray"] b { color: var(--nx-muted); }
.nx-root .nx-pal__hit { background: var(--nx-amber-soft); color: inherit; font-weight: 800; border-radius: 3px; padding: 0 1px; box-shadow: inset 0 -2px 0 var(--nx-amber-text); }
.nx-root .nx-pal__none { padding: var(--nx-s5) var(--nx-s4); text-align: center; }

/* the picture of a row: Work wears its status picture, Library, People and Pages their own; an agent wears its department tile */
.nx-root .nx-pal__ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-pal__ic[data-tone="ok"] { background: var(--nx-ok-soft); color: var(--nx-ok-text); }
.nx-root .nx-pal__ic[data-tone="warn"] { background: var(--nx-amber-soft); color: var(--nx-amber-text); }
.nx-root .nx-pal__ic[data-tone="bad"] { background: var(--nx-bad-soft); color: var(--nx-bad-text); }
.nx-root .nx-pal__ic[data-tone="gray"] { background: var(--nx-bg); color: var(--nx-muted); box-shadow: inset 0 0 0 1px var(--nx-line); }
.nx-root .nx-pal__ic .nx-gl, .nx-root .nx-pal__ic .nx-nav__ico { --gls: 20; width: 20px; height: 20px; }
.nx-root .nx-pal__row[aria-selected="true"] .nx-pal__ic { background: var(--nx-surface); }

/* hints and the Peek button: on the selected row only (a phone has no hover, so its buttons are always there) */
.nx-root .nx-pal__hint { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--nx-text); font-size: var(--nx-fs-small); white-space: nowrap; }
.nx-root .nx-pal kbd { font: 700 12px var(--nx-font); border: 1px solid var(--nx-line); border-bottom-width: 2px; border-radius: 6px; padding: 0 6px; background: var(--nx-surface); color: var(--nx-text); }
.nx-root .nx-pal__acts { display: none; flex: none; gap: var(--nx-s2); }
.nx-root .nx-pal__row[aria-selected="true"] .nx-pal__acts { display: inline-flex; }
.nx-root .nx-pal__open { display: none; }
.nx-root .nx-pal__tag { flex: none; }

/* Ask AI */
.nx-root .nx-pal__askbox { flex: 1; display: grid; align-content: start; gap: var(--nx-s3); padding: var(--nx-s4); overflow-y: auto; }
.nx-root .nx-pal__askhead { display: flex; align-items: flex-start; gap: var(--nx-s3); }
.nx-root .nx-pal__askbox .nx-pal__ask { padding: 0; flex-wrap: wrap; }
.nx-root .nx-pal__askbox .nx-pal__group { padding: var(--nx-s2) 0 0; }
.nx-root .nx-pal__tries { display: grid; gap: var(--nx-s2); }
.nx-root .nx-pal__try { text-align: left; min-height: 44px; padding: 8px 12px; border: 1px solid var(--nx-line); border-radius: var(--nx-r1); background: var(--nx-surface); color: var(--nx-text); font: inherit; cursor: pointer; }
.nx-root .nx-pal__try:hover { background: var(--nx-hover); }

/* the foot: the safety line, then the keys (keys are for a keyboard, so a phone does not show them) */
.nx-root .nx-pal__foot { align-items: center; justify-content: space-between; gap: var(--nx-s2) var(--nx-s4); }
.nx-root .nx-pal__safe { display: inline-flex; align-items: center; gap: 6px; }
.nx-root .nx-pal__safe .nx-gl { --gls: 16; color: var(--nx-ok-text); }
.nx-root .nx-pal__keys { display: flex; flex-wrap: wrap; gap: var(--nx-s2) var(--nx-s4); }

/* the page draws its focus ring on every field (styles.css, !important), so the ring sits inside the bar, under the bar's own underline */
.nx-root .nx-pal__bar .nx-pal__input:focus, .nx-root .nx-pal__bar .nx-pal__input:focus-visible { outline-offset: -5px; border-radius: var(--nx-r1); }
.nx-root .nx-pal__tip { padding: var(--nx-s2) var(--nx-s3) var(--nx-s1); color: var(--nx-muted); font-size: var(--nx-fs-small); }

@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-pal__chip, .nx-root .nx-pal__try, .nx-root .nx-pal__close { transition: background var(--nx-d1) ease-out; }
}

/* a phone: a full height sheet, the input and the chips stay in view, big rows, a 40 px close button, nothing scrolls sideways */
@media (max-width: 860px) {
  .nx-root .nx-pal { padding: 0; }
  .nx-root .nx-pal__box { width: 100%; max-width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; }
  .nx-root .nx-pal__bar { padding: 0 var(--nx-s2) 0 var(--nx-s3); }
  .nx-root .nx-pal__close { min-width: var(--nx-tap); min-height: var(--nx-tap); border: 0; }
  .nx-root .nx-pal__close .nx-gl { display: block; }
  .nx-root .nx-pal__esc { display: none; }
  .nx-root .nx-pal__tools { flex-direction: column; align-items: stretch; gap: var(--nx-s2); padding: var(--nx-s2) var(--nx-s3); }
  .nx-root .nx-pal__modes { display: flex; }
  .nx-root .nx-pal__mode { flex: 1; min-height: var(--nx-tap); }
  .nx-root .nx-pal__chip { min-height: var(--nx-tap); }
  .nx-root .nx-pal__list { padding: var(--nx-s1) var(--nx-s2) var(--nx-s4); }
  .nx-root .nx-pal__row { min-height: 60px; padding: 8px 10px; }
  .nx-root .nx-pal__hint, .nx-root .nx-pal__keys, .nx-root .nx-pal__keytip { display: none; }
  .nx-root .nx-pal__acts { display: flex; }
  .nx-root .nx-pal__open { display: inline-flex; }
  .nx-root .nx-pal__try { min-height: var(--nx-tap); }
  .nx-root .nx-pal__foot { padding: var(--nx-s2) var(--nx-s3); }
}
/* a phone turned on its side: little height, so the modes and the chips share one row */
@media (max-width: 860px) and (max-height: 500px) {
  .nx-root .nx-pal__tools { flex-direction: row; align-items: center; }
  .nx-root .nx-pal__modes { flex: none; }
  .nx-root .nx-pal__mode { flex: none; }
}

/* HOMELANG (nx-w24, 22 Oct 2026, Sheraz: "follow for all pages", "composer like Claude or ChatGPT", "a very beautiful 3D design for phone and other screens").
   The Home language on every page: ONE big rounded box (28 px), a round + menu, a mode pill menu, the agent chip on one line, the mic and a round Send; three equal cards under it;
   a centred greeting; and a compact top input with a tile of the place and 3 chips on Agents, Work, Library, Mail and Admin. Front end only.
   Every rule starts with .nx-root and takes its colours from the --nx-* tokens only, so all themes follow. The depth comes from the shadow and gradient tokens that exist already
   (--nx-shadow, --nx-lift, the department gradients of nx-w10.css): this file invents no effects system. Motion is only declared inside prefers-reduced-motion: no-preference.
   Targets are 40 px (var(--nx-tap)), 48 px for + and Send on a phone; inputs are 16 px or more up to 860 px. Added BEFORE nx-w11.css in web/build.mjs, which stays the last stylesheet. */

/* ---------------------------------------------------------------- the box (Home composer card, the chat box, the top input share it) */
.nx-root .nx-ask { position: relative; display: flex; flex-direction: column; gap: var(--nx-s2); min-width: 0; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: 28px; padding: 14px 16px 12px;
  box-shadow: var(--nx-shadow), inset 0 1px 0 color-mix(in srgb, var(--nx-plate) 55%, transparent); }
.nx-root .nx-ask--bare { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.nx-root .nx-ask:not(.nx-ask--bare):focus-within { border-color: var(--nx-blue); box-shadow: 0 0 0 2px var(--nx-blue), 0 0 0 7px color-mix(in srgb, var(--nx-blue) 14%, transparent); }
.nx-root .nx-cmp { border-radius: 28px; padding: 14px 16px 12px; gap: var(--nx-s2); box-shadow: var(--nx-shadow), inset 0 1px 0 color-mix(in srgb, var(--nx-plate) 55%, transparent); }
.nx-root .nx-cmp:focus-within { box-shadow: 0 0 0 2px var(--nx-blue), 0 0 0 7px color-mix(in srgb, var(--nx-blue) 14%, transparent); }
.nx-root .nx-cmp-wrap > .nx-cmp { flex: 0 0 auto; }
.nx-root .nx-cmp__stagehead { display: flex; align-items: center; gap: var(--nx-s2); color: var(--nx-muted); font-size: var(--nx-fs-small); font-weight: 700; }
.nx-root .nx-cmp__stagehead .nx-gl { color: var(--nx-blue-text); }
.nx-root .nx-cmp__ta { font-size: 18px; line-height: 1.5; padding: 6px 4px 2px; min-height: 64px; }
.nx-root .nx-ask > .nx-cmp__box { flex: 0 0 auto; }
.nx-root .nx-ask__row { position: relative; align-items: center; justify-content: flex-start; gap: var(--nx-s2); flex-wrap: nowrap; }
.nx-root .nx-ask__grow { flex: 1 1 0; min-width: 0; }

/* the round + */
.nx-root .nx-ask__pop { position: relative; display: inline-flex; flex: none; min-width: 0; }
.nx-root .nx-ask__plus { width: var(--nx-tap); height: var(--nx-tap); flex: none; display: inline-grid; place-items: center; border: 1.5px solid var(--nx-control-line); border-radius: var(--nx-rfull); background: var(--nx-surface); color: var(--nx-text); cursor: pointer; padding: 0; }
.nx-root .nx-ask__plus:hover, .nx-root .nx-ask__plus[aria-expanded="true"] { background: var(--nx-hover); }
/* the mode pill */
.nx-root .nx-ask__mode { display: inline-flex; align-items: center; gap: 7px; min-height: var(--nx-tap); padding: 0 12px 0 10px; border: 1.5px solid var(--nx-control-line); border-radius: var(--nx-rfull); background: var(--nx-surface); color: var(--nx-text); font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; flex: none; }
.nx-root .nx-ask__mode > .nx-gl:first-child { color: var(--nx-blue-text); }
.nx-root .nx-ask__chev { color: var(--nx-muted); }
.nx-root .nx-ask__mode:hover, .nx-root .nx-ask__mode[aria-expanded="true"] { background: var(--nx-hover); }
/* the agent chip on ONE line (it shortens with an ellipsis, it never wraps) */
.nx-root .nx-ask__row .nx-cmp__chips { flex: 0 1 auto; flex-wrap: nowrap; min-width: 0; }
.nx-root .nx-cmp__chip--agent { flex: 0 1 auto; min-width: 0; max-width: 220px; white-space: nowrap; overflow: hidden; }
.nx-root .nx-cmp__chip--agent .anticon, .nx-root .nx-cmp__chip--shield .anticon { flex: none; }
.nx-root .nx-cmp__chip--agent b { flex: 0 1 auto; }
.nx-root .nx-cmp__chip--shield { flex: none; white-space: nowrap; }
.nx-root .nx-cmp__mic .ant-btn { border-color: transparent; background: transparent; }
.nx-root .nx-cmp__mic .ant-btn:hover { background: var(--nx-hover); }
/* the round Send: the accent with a soft top edge and a short shadow under it */
.nx-root .nx-cmp__send { width: 44px; height: 44px; flex: none; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nx-plate) 35%, transparent), 0 6px 12px -6px color-mix(in srgb, var(--nx-blue) 75%, transparent); }
.nx-root .nx-cmp__send:disabled { box-shadow: inset 0 0 0 1px var(--nx-line); }

/* the two small menus */
.nx-root .nx-ask__menu { white-space: normal; position: absolute; z-index: 40; left: 0; top: calc(100% + 8px); min-width: 290px; max-width: min(380px, calc(calc(100 * var(--ao-vw)) - 24px)); max-height: min(440px, calc(60 * var(--ao-vh))); overflow-y: auto; display: grid; gap: 2px; padding: var(--nx-s2);
  background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: 20px; box-shadow: var(--nx-lift); }
.nx-root .nx-ask__menu.is-up { top: auto; bottom: calc(100% + 8px); }
.nx-root .nx-ask__mh { padding: var(--nx-s2) var(--nx-s3) 2px; color: var(--nx-muted); font-size: var(--nx-fs-small); font-weight: 800; }
.nx-root .nx-ask__mi { display: flex; align-items: center; gap: var(--nx-s3); width: 100%; min-height: 48px; padding: 6px var(--nx-s3); border: 0; border-radius: 14px; background: none; color: var(--nx-text); font: inherit; text-align: left; cursor: pointer; }
.nx-root .nx-ask__mi:hover, .nx-root .nx-ask__mi:focus-visible { background: var(--nx-hover); }
.nx-root .nx-ask__mi[aria-checked="true"] { background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-ask__mi[aria-disabled="true"] { cursor: default; color: var(--nx-muted); }
.nx-root .nx-ask__mico { width: 36px; height: 36px; flex: none; display: inline-grid; place-items: center; border-radius: 28%; background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-ask__mi[aria-disabled="true"] .nx-ask__mico { background: var(--nx-hover); color: var(--nx-muted); }
.nx-root .nx-ask__mtext { display: grid; gap: 1px; min-width: 0; flex: 1; }
.nx-root .nx-ask__mtext b { font-weight: 700; }
.nx-root .nx-ask__mtext small { color: var(--nx-muted); font-size: var(--nx-fs-small); font-weight: 500; line-height: 1.35; }
.nx-root .nx-ask__mtick { flex: none; display: inline-grid; color: var(--nx-blue-text); }
.nx-root .nx-cmp__file--ctx { padding-right: var(--nx-s3); }
.nx-root .nx-cmp__file--ctx:has(.nx-cmp__x) { padding-right: 0; }

/* the quiet lines under the box */
.nx-root .nx-cmp-wrap { gap: var(--nx-s2); }
.nx-root .nx-cmp__guide { flex: none; text-align: center; margin: 0; color: var(--nx-muted); font-size: var(--nx-fs-small); line-height: 1.4; }

/* ---------------------------------------------------------------- the three equal cards under the box */
.nx-root .nx-cmp__sugs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nx-s3); justify-content: stretch; margin-top: var(--nx-s2); }
.nx-root .nx-cmp__sug { display: flex; align-items: center; gap: var(--nx-s3); min-width: 0; min-height: 72px; padding: 12px 14px; border: 1px solid var(--nx-line); border-radius: 20px; background: var(--nx-surface); color: var(--nx-text); font: inherit; text-align: left;
  white-space: normal; overflow: hidden; box-shadow: var(--nx-shadow), inset 0 1px 0 color-mix(in srgb, var(--nx-plate) 55%, transparent); cursor: pointer; }
.nx-root .nx-cmp__sug:hover { background: var(--nx-hover); }
.nx-root .nx-cmp__sugt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.nx-root .nx-cmp__sugt b { font-weight: 700; font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-cmp__sugt small { color: var(--nx-muted); font-size: var(--nx-fs-small); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Home with Needs you beside the box (two columns, above 1100 px): the box column is narrow, so the three equal cards are stacked, one per row, and every title and meaning stays readable */
@media (min-width: 1101px) {
  .nx-root .nx-split--home:not(.nx-split--solo) .nx-cmp__sugs { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- the 3D style tile (a place, a card): the department gradients and the theme gradient that already exist */
.nx-root .nx-ask__tile { --ta: var(--nx-pill-a); --tb: var(--nx-pill-b); --tx: var(--nx-pill-text); width: 44px; height: 44px; flex: none; display: inline-grid; place-items: center; box-sizing: border-box; border-radius: 28%;
  color: var(--tx); background: linear-gradient(135deg, var(--ta), var(--tb)); background-color: var(--tb); border: 1px solid var(--ta);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nx-w10-white) 38%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--nx-w10-deep) 22%, transparent), 0 8px 14px -8px color-mix(in srgb, var(--tb) 85%, transparent); }
.nx-root .nx-ask__tile--sm { width: 40px; height: 40px; }
.nx-root .nx-ask__tile--network { --ta: var(--nx-dept-network-a); --tb: var(--nx-dept-network-b); --tx: var(--nx-w10-white); }
.nx-root .nx-ask__tile--company { --ta: var(--nx-dept-company-a); --tb: var(--nx-dept-company-b); --tx: var(--nx-w10-white); }
.nx-root .nx-ask__tile--it { --ta: var(--nx-dept-it-a); --tb: var(--nx-dept-it-b); --tx: var(--nx-w10-white); }
.nx-root .nx-ask__tile--sales { --ta: var(--nx-dept-sales-a); --tb: var(--nx-dept-sales-b); --tx: var(--nx-w10-white); }
.nx-root .nx-ask__tile--hr { --ta: var(--nx-dept-hr-a); --tb: var(--nx-dept-hr-b); --tx: var(--nx-w10-white); }

/* ---------------------------------------------------------------- the top input of Agents, Work, Library, Mail and Admin */
.nx-root .nx-topask { width: 100%; max-width: 860px; margin: var(--nx-s4) auto var(--nx-s4); display: grid; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-topask__box { flex-direction: row; align-items: center; gap: var(--nx-s3); padding: 8px 10px; }
.nx-root .nx-topask__in { flex: 1 1 auto; min-width: 0; min-height: 44px; margin: 0; padding: 0 4px; border: 0; outline: none; background: transparent; color: var(--nx-text); font: inherit; font-size: 17px; }
.nx-root .nx-topask__in::placeholder { color: var(--nx-muted); opacity: 1; }
.nx-root .nx-topask__in:focus-visible { outline: none; }
.nx-root .nx-topask input.nx-topask__in, .nx-root .nx-topask input.nx-topask__in:focus, .nx-root .nx-topask input.nx-topask__in:focus-visible { border: 0; border-radius: 0; box-shadow: none; outline: none; background: transparent; }
.nx-root .nx-topask__x { width: var(--nx-tap); height: var(--nx-tap); flex: none; display: inline-grid; place-items: center; border: 0; border-radius: var(--nx-rfull); background: transparent; color: var(--nx-text); cursor: pointer; }
.nx-root .nx-topask__x:hover { background: var(--nx-hover); }
.nx-root .nx-topask__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-topask__chip { min-height: var(--nx-tap); max-width: 100%; padding: 0 var(--nx-s4); border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); background: var(--nx-surface); color: var(--nx-text); font: inherit; font-size: var(--nx-fs-small); font-weight: 600; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nx-plate) 55%, transparent); }
.nx-root .nx-topask__chip:hover { background: var(--nx-hover); }

/* ---------------------------------------------------------------- Home: a centred greeting and the box first (the numbers come after it) */
.nx-root .nx-page:has(> .nx-home) > .nx-h1, .nx-root .nx-page:has(> .nx-home) > .nx-sub { text-align: center; }
.nx-root .nx-page:has(> .nx-home) > .nx-h1 { font-size: clamp(22px, calc(2.4 * var(--ao-vw)), 28px); }   /* 23 Oct 2026: the lab's size (26 px), no longer up to 38 px */
.nx-root .nx-page:has(> .nx-home) > .nx-sub { font-size: 17px; margin-bottom: var(--nx-s5); }
@media (min-width: 561px) {
  .nx-root .nx-home > .nx-home__top { order: 1; }
  .nx-root .nx-home > .nx-home__calm { order: 2; justify-content: center; }
  .nx-root .nx-home > .nx-stats { order: 3; margin-top: var(--nx-s5); }
  .nx-root .nx-home > :not(.nx-stats):not(.nx-home__top):not(.nx-home__calm) { order: 4; }
}

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 900px) {
  .nx-root .nx-cmp__chip--shield > span:not(.anticon) { display: none; }
  .nx-root .nx-cmp__chip--shield { width: var(--nx-tap); padding: 0; justify-content: center; }
}
@media (max-width: 860px) {
  .nx-root .nx-cmp__ta { font-size: 17px; }
  .nx-root .nx-topask__in { font-size: 16px; }
  .nx-root .nx-topask__chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; }
  .nx-root .nx-topask__chips::-webkit-scrollbar { display: none; }
  .nx-root .nx-topask__chip { flex: none; }
  .nx-root .nx-topask { margin-bottom: var(--nx-s3); }
}
@media (max-width: 640px) {
  .nx-root .nx-ask { padding: 10px 12px; border-radius: 24px; }
  .nx-root .nx-cmp { padding: 10px 12px; border-radius: 24px; }
  .nx-root .nx-ask__plus { width: 48px; height: 48px; }
  .nx-root .nx-cmp__send { width: 48px; height: 48px; }
  .nx-root .nx-topask__box { padding: 6px 8px; }
  .nx-root .nx-ask__pop { position: static; }
  .nx-root .nx-ask__menu { left: 0; right: 0; min-width: 0; max-width: none; }
  .nx-root .nx-cmp__chip--agent .nx-cmp__lbl { display: none; }
  .nx-root .nx-cmp__chip--agent { max-width: 140px; }
  .nx-root .nx-cmp__sugs { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; gap: var(--nx-s2); padding: 3px 3px 6px; margin-inline: -3px; }
  .nx-root .nx-cmp__sugs::-webkit-scrollbar { display: none; }
  .nx-root .nx-cmp__sug { flex: 0 0 min(264px, 78%); scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .nx-root .nx-cmp__chip--shield { display: none; }
}
@media (max-width: 400px) {
  .nx-root .nx-ask__row { gap: 6px; }
  .nx-root .nx-cmp__chip--agent { padding: 0 10px; }
  .nx-root .nx-cmp__chip--agent .anticon { display: none; }
  .nx-root .nx-ask__modet { display: none; }
  .nx-root .nx-ask__mode { padding: 0 10px; }
  .nx-root .nx-topask__x { display: none; }
}
@media (max-width: 360px) {
  .nx-root .nx-ask__row { flex-wrap: wrap; }
  .nx-root .nx-ask__row .nx-cmp__send { margin-left: auto; }
}
@media (pointer: coarse) {
  .nx-root .nx-ask__mode, .nx-root .nx-topask__chip, .nx-root .nx-topask__x { min-height: 44px; }
  .nx-root .nx-topask__x { width: 44px; height: 44px; }
}

/* ---------------------------------------------------------------- motion: only for people who have not asked for less */
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-ask__plus, .nx-root .nx-ask__mode, .nx-root .nx-topask__chip { transition: background var(--nx-d1) var(--nx-curve), transform var(--nx-d1) var(--nx-curve); }
  .nx-root .nx-ask__plus:active, .nx-root .nx-ask__mode:active { transform: scale(.96); }
  .nx-root .nx-cmp__sug { transition: background var(--nx-d1) var(--nx-curve), transform var(--nx-d2) var(--nx-curve), box-shadow var(--nx-d2) var(--nx-curve); }
  .nx-root .nx-cmp__sug:hover { transform: translateY(-2px); box-shadow: var(--nx-lift); }
  .nx-root .nx-topask__chip:hover { transform: translateY(-1px); }
  .nx-root .nx-ask__menu { animation: nx-w9-rise var(--nx-d2) var(--nx-curve) backwards; }
  .nx-root .nx-topask { animation: nx-w9-rise var(--nx-d3) var(--nx-curve) backwards; }
}

/* CHAT2 (22 Oct 2026): Chat in the main menu, the one 3-dots menu of a chat and of a message, and the agent picker.
   Shipped BEFORE nx-w11.css, which stays the last stylesheet (qa-2026-10-21-nx-resp.test.js). Every rule starts with .nx-root (or the body.nx-on portal scope) and takes only --nx-* tokens.
   Motion only inside prefers-reduced-motion: no-preference. A state is never told by colour alone: the open menu, the current place and the danger row each carry a word, a ring or a shape. */

/* ---------------------------------------------------------------- 1. CHATNAV: the Chat place in the rail, the drawer and the phone bottom bar */
.nx-root .nx-nav[data-place="chat"] .nx-nav__ico { color: var(--nx-place-library); }
.nx-root .nx-nav__orb { display: inline-grid; place-items: center; }

/* up to 860 px the bar has five places and Chat is the raised round button in the CENTRE (48 px), labelled Chat. The bar is five equal columns, so the centre is the third. */
@media (max-width: 860px) {
  .nx-root .nx-bar { overflow: visible; }
  .nx-root .nx-bar .nx-nav--raised { justify-content: flex-end; gap: 2px; padding-top: 0; padding-bottom: 6px; background: none; box-shadow: none; color: var(--nx-side-text); }
  .nx-root .nx-bar .nx-nav--raised[aria-current="page"] { background: none; box-shadow: none; color: var(--nx-side-strong); font-weight: 800; }
  .nx-root .nx-bar .nx-nav--raised .nx-nav__orb { width: 48px; height: 48px; margin-top: -22px; border-radius: var(--nx-rfull); background: var(--nx-pill); color: var(--nx-pill-text); box-shadow: 0 0 0 4px var(--nx-side), 0 10px 18px -8px var(--nx-blue); }
  .nx-root .nx-bar .nx-nav--raised[data-place] .nx-nav__ico { width: 24px; height: 24px; color: var(--nx-pill-text); }
  /* the current page: a ring in the strong text colour around the orb and a bold label, so it is not told by colour alone */
  .nx-root .nx-bar .nx-nav--raised[aria-current="page"] .nx-nav__orb { box-shadow: 0 0 0 3px var(--nx-side), 0 0 0 5px var(--nx-side-strong); }
  .nx-root .nx-bar .nx-nav--raised .nx-count { top: -22px; right: 0; }   /* on the corner of the round button, inside the column: the bar never grows sideways, even at 320 px */
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .nx-root .nx-bar .nx-nav--raised .nx-nav__orb { transition: transform var(--nx-d1) ease-out; }
  .nx-root .nx-bar .nx-nav--raised:active .nx-nav__orb { transform: scale(.94); }
}

/* ---------------------------------------------------------------- 2. CHATEDIT: the 3-dots menu of a chat (the row in the history and the open chat's header) and of a message.
   On a screen with no hover (a tablet, a phone) the dots and the Edit pencil are always drawn; with a mouse they show on hover and on keyboard focus (nx-w18.css). */
@media (hover: none) {
  .nx-root .nx-chat__rowib, .nx-root .nx-chat__acts--me { opacity: 1; }
}
/* the red row of a menu has its picture (the bin) and its word, so danger is never colour alone; it sits after a rule and a keyboard focus ring shows on it */
.nx-root .nx-chat__menulist .nx-chat__danger { font-weight: 700; }
.nx-root .nx-chat__menulist .nx-menu__item:focus-visible { outline: 2px solid var(--nx-blue); outline-offset: -2px; }
.nx-root .nx-chat__rowib[aria-expanded="true"], .nx-root .nx-chat__headacts .nx-chat__ib[aria-expanded="true"] { background: var(--nx-blue-soft); color: var(--nx-blue-text); box-shadow: inset 0 0 0 2px var(--nx-blue); }

/* ---------------------------------------------------------------- 3. AGENT PICKER: groups, the current agent, the way to the Guide */
.nx-root .nx-chat__optgroup { padding: var(--nx-s3) var(--nx-s2) var(--nx-s1); font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--nx-muted); }
.nx-root .nx-chat__sheetlist section + section .nx-chat__optgroup, .nx-root .nx-chat__sheetlist > .nx-chat__opt + section .nx-chat__optgroup { border-top: 1px solid var(--nx-line); margin-top: var(--nx-s1); }
.nx-root .nx-chat__opt > span.nx-chat__curtag:not(.nx-dt):not(.nx-chat__aitile) { display: inline-flex; flex: none; margin-left: auto; }
.nx-root .nx-chat__opt[aria-current="true"] { box-shadow: inset 3px 0 0 var(--nx-blue); }
.nx-root .nx-chat__sheet .nx-chat__none { display: grid; gap: var(--nx-s2); justify-items: start; }
@media (max-width: 860px) {
  .nx-root .nx-chat__sheet .nx-chat__none .nx-btn { min-height: var(--nx-tap); }
  .nx-root .nx-chat__jump { min-height: var(--nx-tap); }   /* Jump to latest shows while a message is being edited: a 40 px target on a phone */
  .nx-root .nx-chat__sheet .nx-chat__search { font-size: 16px; }
}

/* the window is a sheet that shows its whole list: the list scrolls (one scrollbar), the sheet does not. On an agent's own page (the chat is lower than the first screen) it is centred on the screen, under the header. */
.nx-root .nx-chat__sheet--agents { display: flex; flex-direction: column; overflow: hidden; max-height: min(100%, 720px); }
.nx-root .nx-chat__sheet--agents .nx-chat__sheetlist { flex: 1 1 auto; min-height: 120px; max-height: none; }
.nx-root .nx-chat--embed .nx-chat__scrim { position: fixed; z-index: 1250; top: calc(var(--nx-header-h) + var(--nx-s4)); }
/* a phone: the sheets sit ABOVE the bottom bar (the raised Chat button rises 24 px over its top edge, so the sheet keeps clear of it) */
@media (max-width: 860px) {
  .nx-root .nx-chat__scrim { bottom: var(--nx-bar-clear); }
  .nx-root .nx-chat__sheet { padding-bottom: calc(var(--nx-s4) + 28px); max-height: calc(calc(100 * var(--ao-dvh)) - var(--nx-bar-clear) - var(--nx-s4)); }
  .nx-root .nx-chat__sheet--agents { max-height: calc(calc(100 * var(--ao-dvh)) - var(--nx-bar-clear) - var(--nx-s4)); }
}

/* PP-AGENTS (22 Oct 2026, page port): the Agents page, the agent page and Create an agent as the LAB draws them (DCC-Agent-Office-new-UI-full.html, Daylight). Tokens only, every rule starts with .nx-root.
   Placed in web/build.mjs right BEFORE nx-w11.css (nx-w11.css stays last). Evidence: ui-redesign-2026-10-21/build-screens/pageport/agents/ (lab and live pictures at 1488, 1100 and 390). */

/* ---------------------------------------------------------------- the header: title and one line of help on the left, New folder and New agent on the right */
.nx-root .nx-pph { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--nx-s3) var(--nx-s4); margin: var(--nx-s2) 0 var(--nx-s4); min-width: 0; }
.nx-root .nx-pph__t { flex: 1 1 320px; min-width: 0; }
.nx-root .nx-pph__t .nx-sub { margin-top: 2px; }
.nx-root .nx-pph__a { display: flex; align-items: center; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-pp-agents .nx-topask { margin-top: var(--nx-s1); }

/* ---------------------------------------------------------------- the left panel: Find a folder, Smart folders with colour dots, My folders with + New */
.nx-root .nx-pp-agents .nx-w0 { grid-template-columns: 270px minmax(0, 1fr); gap: 18px; align-items: start; }
.nx-root .nx-pp-agents .nx-rail { align-self: start; }
.nx-root .nx-pp-agents .nx-rail__in { padding: 12px; gap: 2px; grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }
.nx-root .nx-pp-agents .nx-rail__find { box-sizing: border-box; }
.nx-root .nx-pp-agents .nx-rail__find { width: 100%; margin: 0 0 var(--nx-s1); flex: none; }
.nx-root .nx-pp-agents .nx-rail__h { min-height: 0; padding: var(--nx-s3) var(--nx-s2) var(--nx-s1); font-size: var(--nx-fs-small); font-weight: 600; letter-spacing: 0; text-transform: none; }
.nx-root .nx-pp-agents .nx-rail__h--row { padding-top: var(--nx-s4); min-height: 36px; }
.nx-root .nx-pp-agents .nx-rail__row { min-height: 40px; padding: 0 12px; border-radius: 12px; }
.nx-root .nx-pp-agents .nx-rail__row[aria-current="true"] { box-shadow: none; background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-pp-agents .nx-rail__row--link { text-decoration: none; }
.nx-root .nx-rail__dot { width: 12px; height: 12px; flex: none; border-radius: 5px; background: var(--fc, var(--nx-muted)); }
.nx-root .nx-rail__h--row .nx-rail__newbtn { width: auto; min-height: 30px; margin: 0; padding: 0 12px; border: 1px solid var(--nx-blue); border-radius: 9px; background: var(--nx-blue); color: var(--nx-on-blue); font-size: var(--nx-fs-small); text-transform: none; letter-spacing: 0; }
.nx-root .nx-rail__h--row .nx-rail__newbtn:hover:not(:disabled) { background: var(--nx-blue); filter: brightness(1.07); }

/* ---------------------------------------------------------------- the stage has no box of its own: the cards sit on the page */
.nx-root .nx-pp-agents .nx-w0__stage { background: none; border: 0; padding: 0; min-height: 0; gap: var(--nx-s3); }
.nx-root .nx-pp-agents .nx-w0__bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--nx-s3); margin: 0; }
.nx-root .nx-pp-agents .nx-w0__bar .nx-w0__search { flex: 0 1 280px; width: 280px; min-width: 0; }
.nx-root .nx-pp-agents .nx-w0__bar .nx-select { flex: 0 1 auto; width: auto; max-width: 200px; min-width: 0; }
.nx-root .nx-pp-agents .nx-w0__bar .nx-grow { flex: 1 1 0; min-width: 0; }
.nx-root .nx-filterbtn { display: inline-flex; align-items: center; gap: 8px; }
.nx-root .nx-pp-agents .nx-count-line { margin: 0; }

/* ---------------------------------------------------------------- the card, as the lab draws it: tile and name, one sentence, the status bar, ONE row of two numbers, the safety line, Open / Peek / Chat / Run.
   Every card in a row is as tall as the tallest and its buttons sit on the same line (the foot is pushed to the bottom), so nothing overlaps when a line wraps. */
.nx-root .nx-pp-agents .nx-acgrid, .nx-root .nx-acgrid--home { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 18px; }
.nx-root .nx-pp-agents .nx-acgrid--compact { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 14px; }
.nx-root .nx-ac { padding: 18px; gap: var(--nx-s3); }
.nx-root .nx-ac--compact { padding: 14px; gap: var(--nx-s2); }
.nx-root .nx-ac__desc { min-height: 44px; }
.nx-root .nx-ac--compact .nx-ac__desc { min-height: 20px; }
.nx-root .nx-ac__desc--none { min-height: 44px; }
.nx-root .nx-ac__who { display: block; overflow-wrap: anywhere; }
.nx-root .nx-ac__who .nx-fchip { vertical-align: middle; max-width: 100%; }
.nx-root .nx-ac__st { padding: 8px 12px; border-radius: 12px; background: var(--nx-hover); flex-wrap: nowrap; gap: 8px; }
.nx-root .nx-ac__st[data-tone="ok"] { background: var(--nx-ok-soft); }
.nx-root .nx-ac__st[data-tone="warn"] { background: var(--nx-amber-soft); }
.nx-root .nx-ac__st[data-tone="bad"] { background: var(--nx-bad-soft); }
.nx-root .nx-ac__st[data-tone="info"] { background: var(--nx-blue-soft); }
.nx-root .nx-ac__st b { flex: none; }
.nx-root .nx-ac__since { margin-left: auto; min-width: 0; text-align: right; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-ac__stats { display: flex; flex-wrap: wrap; gap: var(--nx-s1) 22px; margin: 0; padding: 0; }
.nx-root .nx-ac__stat { display: flex; flex-direction: column-reverse; min-width: 0; }
.nx-root .nx-ac__stat dt { margin: 0; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--nx-muted); }
.nx-root .nx-ac__stat dd { margin: 0; }
.nx-root .nx-ac__stat b { font-size: 22px; line-height: 28px; font-weight: 800; color: var(--nx-text); font-variant-numeric: tabular-nums; }
.nx-root .nx-ac--compact .nx-ac__stats { display: none; }
.nx-root .nx-ac__safe { font-size: 12px; line-height: 16px; align-items: center; }
.nx-root .nx-ac__foot { flex-wrap: nowrap; gap: var(--nx-s2); padding-top: var(--nx-s1); }
.nx-root .nx-ac__foot .nx-btn--quiet { background: var(--nx-surface); border-color: var(--nx-control-line); color: var(--nx-text); }
.nx-root .nx-ac__foot .nx-btn--quiet:hover { background: var(--nx-hover); }
.nx-root .nx-ac__foot .nx-ql { color: var(--nx-muted); font-weight: 700; padding: 6px 8px; border-radius: 8px; }
.nx-root .nx-ac__foot .nx-ql:hover { background: var(--nx-hover); color: var(--nx-text); text-decoration: none; }
.nx-root .nx-ac__foot .nx-btn { flex: none; }
.nx-root .nx-btn--solid { box-shadow: 0 1px 2px color-mix(in srgb, var(--nx-blue) 30%, transparent), 0 6px 14px -6px var(--nx-blue); }
.nx-root .nx-btn--solid:hover { box-shadow: 0 2px 4px color-mix(in srgb, var(--nx-blue) 30%, transparent), 0 12px 20px -8px var(--nx-blue); }

/* ---------------------------------------------------------------- Peek: a floating popover beside the card (desktop), a bottom sheet (phone). It is opened by a click and never sits inside the card. */
.nx-root .nx-peek__veil { background: transparent; display: block; }
.nx-root .nx-peek { position: fixed; left: var(--pk-left, auto); top: var(--pk-top, 76px); right: auto; width: var(--pk-w, 420px); height: auto; max-height: var(--pk-maxh, calc(80 * var(--ao-vh))); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-lift); overflow: hidden; }
.nx-root .nx-peek__grip { display: none; }
.nx-root .nx-peek__head { margin: 12px 12px 0; padding: var(--nx-s3) var(--nx-s4); border: 1px solid color-mix(in srgb, var(--fc) 45%, var(--nx-line)); border-bottom-width: 3px; border-bottom-color: var(--fc); border-radius: 12px; }
.nx-root .nx-peek__body { padding: var(--nx-s3) var(--nx-s4); }
.nx-root .nx-peek__foot { padding: var(--nx-s3) var(--nx-s4); }
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-peek { animation: nx-pop 160ms ease-out; }
}
@media (max-width: 640px) {
  .nx-root .nx-peek__veil { background: color-mix(in srgb, var(--nx-text) 38%, transparent); }
  .nx-root .nx-peek { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: calc(88 * var(--ao-vh)); border-width: 1px 0 0; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .nx-root .nx-peek__grip { display: block; width: 44px; height: 5px; margin: 8px auto 0; border-radius: 9px; background: var(--nx-control-line); flex: none; }
  .nx-root .nx-peek__head { margin-top: 6px; }
}

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1100px) {
  .nx-root .nx-pp-agents .nx-w0 { grid-template-columns: 224px minmax(0, 1fr); gap: var(--nx-s4); }
}
@media (max-width: 860px) {
  .nx-root .nx-pp-agents .nx-w0 { grid-template-columns: minmax(0, 1fr); gap: var(--nx-s3); }
  .nx-root .nx-pp-agents .nx-rail__in { padding: 2px 0 var(--nx-s2); }
  .nx-root .nx-pp-agents .nx-acgrid, .nx-root .nx-pp-agents .nx-acgrid--compact { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-pp-agents .nx-w0__bar .nx-w0__search { flex: 1 1 100%; width: auto; }
  .nx-root .nx-pp-agents .nx-w0__bar .nx-grow { display: none; }
  .nx-root .nx-pp-agents .nx-w0__bar .nx-select { flex: 1 1 140px; max-width: none; order: 4; }
  .nx-root .nx-pp-agents .nx-w0__bar .nx-w0__search { order: 1; }
  .nx-root .nx-pp-agents .nx-w0__bar .nx-seg { order: 2; }
  .nx-root .nx-pp-agents .nx-w0__bar .nx-filterbtn { order: 3; margin-left: auto; }
  .nx-root .nx-pph__a { width: 100%; }
}

/* ---------------------------------------------------------------- the agent page: a back chip, then ONE header card (tile, name, department, owner and version, the sentence, the safety line), the status, Peek and Edit on the right */
.nx-root .nx-pp-agent .nx-back--chip { margin: var(--nx-s2) 0 var(--nx-s3); }
.nx-root .nx-pp-agent .nx-back--chip .nx-link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--nx-tap); padding: 0 14px; border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); background: var(--nx-surface); color: var(--nx-text); font-size: var(--nx-fs-small); font-weight: 700; text-decoration: none; box-shadow: var(--nx-shadow); }
.nx-root .nx-pp-agent .nx-back--chip .nx-link::before { content: "\2039"; font-size: 18px; line-height: 1; }
.nx-root .nx-aph { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); padding: 20px; margin: 0 0 var(--nx-s4); min-width: 0; }
.nx-root .nx-aph__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--nx-s4); min-width: 0; }
.nx-root .nx-aph__id { flex: 1 1 200px; min-width: 0; }
.nx-root .nx-aph__side .nx-ag-menu { position: relative; top: auto; right: auto; }
.nx-root .nx-aph__id .nx-h1 { overflow-wrap: anywhere; }
.nx-root .nx-aph__meta { margin: 2px 0 0; color: var(--nx-muted); font-size: var(--nx-fs-body); }
.nx-root .nx-aph__side { display: flex; align-items: center; flex-wrap: wrap; gap: var(--nx-s2); margin-left: auto; }
.nx-root .nx-aph__job { margin: var(--nx-s3) 0 0; font-size: 16px; line-height: 24px; color: var(--nx-text); }
.nx-root .nx-aph__line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: var(--nx-s2) 0 0; font-size: 14px; }
.nx-root .nx-aph__safe { display: inline-flex; align-items: center; gap: 6px; }
.nx-root .nx-aph__safe[data-tone="warn"] { color: var(--nx-amber-text); font-weight: 600; }
.nx-root .nx-pp-agent .nx-tabs { margin-top: var(--nx-s2); }
@media (max-width: 860px) {
  .nx-root .nx-aph { padding: var(--nx-s4); }
  .nx-root .nx-aph__side { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------- Create an agent: four steps as pills, the first question on the left, Start from a template on the right */
.nx-root .nx-pp-create .architect.arch-with-aside { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: var(--nx-s4) 18px; align-items: start; }
.nx-root .nx-pp-create .architect.arch-with-aside > * { grid-column: 1 / -1; min-width: 0; }
.nx-root .nx-pp-create .architect.arch-with-aside > .arch-main { grid-column: 1; }
.nx-root .nx-pp-create .architect.arch-with-aside > .nx-tpl { grid-column: 2; }
.nx-root .nx-pp-create .architect .ant-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.nx-root .nx-pp-create .architect .ant-steps .ant-steps-item { flex: none; min-width: 0; padding: 0; overflow: visible; }
.nx-root .nx-pp-create .architect .ant-steps .ant-steps-item-container { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--nx-line); border-radius: 12px; background: var(--nx-surface); }
.nx-root .nx-pp-create .architect .ant-steps .ant-steps-item-tail { display: none; }
.nx-root .nx-pp-create .architect .ant-steps .ant-steps-item-icon { margin: 0; flex: none; }
.nx-root .nx-pp-create .architect .ant-steps .ant-steps-item-content { min-width: 0; }
.nx-root .nx-pp-create .architect .ant-steps .ant-steps-item-title { font-weight: 700; font-size: 14px; line-height: 20px; padding: 0; white-space: normal; color: var(--nx-muted); }
.nx-root .nx-pp-create .architect .ant-steps .ant-steps-item-process .ant-steps-item-container { background: var(--nx-pill, var(--nx-blue)); border-color: transparent; }
.nx-root .nx-pp-create .architect .ant-steps .ant-steps-item-process .ant-steps-item-title { color: var(--nx-pill-text, var(--nx-on-blue)); }
.nx-root .nx-pp-create .architect .ant-steps .ant-steps-item-finish .ant-steps-item-title { color: var(--nx-text); }
.nx-root .nx-tpl { display: grid; gap: var(--nx-s3); align-content: start; }
.nx-root .nx-tpl .nx-h3 { margin: 0; }
.nx-root .nx-tpl__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s3); }
.nx-root .nx-tpl__row { display: flex; align-items: center; min-height: 46px; padding: 0 var(--nx-s4); border: 1px solid var(--nx-line); border-radius: 12px; background: var(--nx-surface); color: var(--nx-text); text-decoration: none; box-shadow: var(--nx-shadow); overflow-wrap: anywhere; }
.nx-root .nx-tpl__row:hover { background: var(--nx-hover); }
@media (max-width: 860px) {
  .nx-root .nx-pp-create .architect.arch-with-aside { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-pp-create .architect.arch-with-aside > .arch-main, .nx-root .nx-pp-create .architect.arch-with-aside > .nx-tpl { grid-column: 1; }
  .nx-root .nx-pp-create .architect .ant-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.nx-root .nx-pp-create .nx-old { border: 0; background: none; padding: 0; min-height: 0; }
.nx-root .nx-pp-create .architect > .ant-card:has(> .ant-card-body > .ant-steps) { background: none; border: 0; box-shadow: none; }
.nx-root .nx-pp-create .architect > .ant-card:has(> .ant-card-body > .ant-steps) > .ant-card-body { padding: 0; }
.nx-root .nx-pp-create .architect .ant-steps .ant-steps-item-title::after { display: none; }
.nx-root .nx-pp-create .architect .ant-steps .ant-steps-item-container { overflow: hidden; }
.nx-root .nx-pp-create .architect .page-head { margin: 0 0 var(--nx-s3); }
@media (max-width: 860px) {
  /* the three ways of working (Our Connectors, My Microsoft mailbox, Only my words and files) were drawn on top of each other on a phone: now one box that scrolls sideways, each choice whole */
  .nx-root .nx-pp-create .arch-setup .ant-segmented { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
  .nx-root .nx-pp-create .arch-setup .ant-segmented-group { width: max-content; min-width: 100%; }
  .nx-root .nx-pp-create .arch-setup .ant-segmented-item { flex: 1 0 auto; }
  .nx-root .nx-pp-create .arch-setup .ant-segmented-item-label { white-space: nowrap; }
}
.nx-root .nx-pp-create .architect .ant-steps .ant-steps-item::after, .nx-root .nx-pp-create .architect .ant-steps .ant-steps-item::before, .nx-root .nx-pp-create .architect .ant-steps .ant-steps-item-container::after, .nx-root .nx-pp-create .architect .ant-steps .ant-steps-item-container::before, .nx-root .nx-pp-create .architect .ant-steps .ant-steps-item-icon::after, .nx-root .nx-pp-create .architect .ant-steps .ant-steps-item-content::after { display: none; }
.nx-root .nx-pp-create .architect .ant-steps .ant-steps-item-icon { float: none; }
.nx-root .nx-pp-create .architect .ant-steps .ant-steps-item-content { display: block; width: auto; min-height: 0; margin: 0; }
.nx-root .nx-pp-create .architect .ant-steps .ant-steps-item-container { flex-direction: row; }

/* ---------------------------------------------------------------- PP-AGENTS2 (22 Oct 2026): every Agents tab keeps a readable line on a wide screen (Sheraz: suggestion cards and the review editor were 1700 px wide, labels far from values,
   a toast over the footer note). The tab bodies and the suggestion cards stop at 1100 px, left aligned; the Run tab (form and preview side by side) at 1280 px; the Chat tab is an app and keeps the whole width.
   The editor of a suggestion is a short column with its buttons in a row under it. The page keeps room at the bottom (the toast corner) so the toast never covers the last line. */
.nx-root .nx-pp-read, .nx-root .nx-pp-agent > .nx-stack { max-width: 1100px; margin-inline: 0; }
.nx-root .nx-pp-agent > .nx-ag-run { max-width: 1280px; margin-inline: 0; }
.nx-root .nx-pp-read .learn-kinds, .nx-root .nx-pp-read .learn-controls, .nx-root .nx-pp-read .learn-list, .nx-root .nx-pp-read .page-head, .nx-root .nx-pp-read .ant-empty { max-width: 1100px; }
.nx-root .learn-facts { grid-template-columns: minmax(96px, 150px) minmax(0, 1fr); }
.nx-root .learn-edit { display: grid; gap: var(--nx-s3); max-width: 760px; min-width: 0; }
.nx-root .learn-edit .ant-select { width: min(100%, 360px); min-width: 0; }
.nx-root .learn-edit .ant-input { width: 100%; max-width: 100%; box-sizing: border-box; }
.nx-root .learn-edit .ant-space, .nx-root .learn-actions { flex-wrap: wrap; }
@media (min-width: 861px) {
  .nx-root .nx-pp-read, .nx-root .nx-pp-agent { padding-bottom: 140px; }
}
@media (max-width: 860px) {
  .nx-root .learn-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .nx-root .learn-facts dt { font-weight: 700; }
  .nx-root .learn-facts dd { margin-bottom: 8px; }
  .nx-root .learn-kinds { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- Earlier tests as an accordion: the result opens directly under the pressed row (nx-agent-details.jsx EarlierTests) */
.nx-root .nx-acc__list { display: grid; gap: var(--nx-s2); }
.nx-root .nx-acc__item { border: 1px solid var(--nx-line); border-radius: 12px; background: var(--nx-surface); box-shadow: var(--nx-shadow); overflow: hidden; scroll-margin-top: calc(var(--nx-header-h) + var(--nx-s4)); }
.nx-root .nx-acc__item .nx-item { border-bottom: 0; }
.nx-root .nx-acc__item.is-open { border-color: var(--nx-blue); }
.nx-root .nx-acc__item.is-open > .nx-item { background: var(--nx-blue-soft); }
.nx-root .nx-acc__panel { padding: var(--nx-s3) var(--nx-s4) var(--nx-s4); border-top: 1px solid var(--nx-line); min-width: 0; }
.nx-root .nx-acc__btn { gap: var(--nx-s2); }
.nx-root .nx-acc__chev { width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform var(--nx-d1) var(--nx-curve); }
.nx-root .nx-acc__item.is-open .nx-acc__chev { transform: translateY(2px) rotate(-135deg); }

/* ---------------------------------------------------------------- SIMPLE (22 Oct 2026): the Agents page is search + All / Mine / Needs you + New agent; a card is exactly two controls (Chat and ...); views, folders and options are one drawer */
.nx-root .nx-pp-agents .nx-w0.nx-w0--one { grid-template-columns: minmax(0, 1fr); }
.nx-root .nx-w0__more-menu { position: relative; display: inline-flex; align-items: center; }
.nx-root .nx-w0__dot { position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--nx-blue); border: 2px solid var(--nx-surface); pointer-events: none; }
.nx-root .nx-seg__n { font-weight: 800; color: var(--nx-amber-text); }
.nx-root .nx-ac--simple { cursor: pointer; gap: var(--nx-s2); }
.nx-root .nx-ac--simple .nx-ac__desc { -webkit-line-clamp: 2; min-height: 44px; }
.nx-root .nx-ac--simple.nx-ac--compact { min-height: 0; }
.nx-root .nx-ac--simple .nx-ac__foot { justify-content: space-between; margin-top: auto; padding-top: var(--nx-s2); }
.nx-root .nx-ac__fav { display: inline-flex; margin-left: 6px; color: var(--nx-amber-text); font-size: 14px; vertical-align: 1px; }
.nx-root .nx-ar--simple { cursor: pointer; }
.nx-root .nx-ar--simple .nx-ar__name { font-weight: 800; }
.nx-root .nx-vo { display: grid; gap: var(--nx-s4); min-width: 0; }
.nx-root .nx-vo__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nx-s3); }
.nx-root .nx-vo__f { display: grid; gap: 4px; min-width: 0; font-size: var(--nx-fs-small); font-weight: 700; color: var(--nx-muted); }
.nx-root .nx-vo__f .nx-select { width: 100%; max-width: none; }
.nx-root .nx-vo__f .nx-seg { width: 100%; }
.nx-root .nx-vo .nx-rail { background: none; border: 0; box-shadow: none; }
.nx-root .nx-vo .nx-rail__in { position: static; max-height: none; overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 0; }
.nx-root .nx-vo .nx-rail__h, .nx-root .nx-vo .nx-rail__hint, .nx-root .nx-vo .nx-rail__more { display: flex; }
.nx-root .nx-vo .nx-rail__find { display: block; }
.nx-root .nx-vo .nx-rail__row { width: 100%; flex: 1 1 auto; border: 0; background: none; border-radius: 12px; padding: 0 12px; }
.nx-root .nx-vo .nx-rail__f { flex: none; width: 100%; border: 2px solid transparent; background: none; padding: 0; border-radius: 10px; }
.nx-root .nx-vo .nx-rail__row[aria-current="true"] { background: var(--nx-blue-soft); color: var(--nx-blue-text); border: 0; box-shadow: none; }
.nx-root .nx-vo .nx-rail__row[aria-current="true"] em { color: var(--nx-blue-text); }
.nx-root .nx-vo .nx-rail__f:has(.nx-rail__row[aria-current="true"]) { background: var(--nx-blue-soft); border-color: transparent; }
.nx-root .nx-vo .nx-rail__lab { max-width: none; }
.nx-root .nx-vo .nx-rail__drop { display: block; }
.nx-root .nx-vo .nx-rail__newbtn { flex: none; width: auto; }
.nx-root .nx-vo .nx-rail__first { display: grid; flex: none; width: auto; justify-items: center; gap: var(--nx-s2); padding: var(--nx-s4) var(--nx-s3); border-radius: 12px; }
.nx-root .nx-vo .nx-rail__firsticon, .nx-root .nx-vo .nx-rail__firstp { display: grid; }
.nx-root .nx-vo .nx-rail__chips { flex-wrap: wrap; }
.nx-root .nx-vo .nx-rail__add { flex: none; width: 100%; }
@media (max-width: 860px) {
  .nx-root .nx-vo__grid { grid-template-columns: minmax(0, 1fr); }
}
.nx-root .nx-seg__n { margin-left: 6px; }
@media (max-width: 860px) {
  .nx-root .nx-pp-agents .nx-w0__bar .nx-w0__more-menu { order: 3; margin-left: auto; }
}
.nx-root .nx-vo__f--wide { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- SIMPLE: one agent = Chat, Results, Settings; Settings (and the history in Results) are collapsed sections that open one at a time */
.nx-root .nx-sb { border: 1px solid var(--nx-line); border-radius: 14px; background: var(--nx-surface); box-shadow: var(--nx-shadow); min-width: 0; }
.nx-root .nx-sb__h { margin: 0; }
.nx-root .nx-sb__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s3); min-height: 60px; padding: 12px 18px; background: none; border: 0; border-radius: 14px; color: var(--nx-text); font: inherit; text-align: left; cursor: pointer; }
.nx-root .nx-sb__btn:hover { background: var(--nx-hover); }
.nx-root .nx-sb__t { display: grid; gap: 2px; min-width: 0; }
.nx-root .nx-sb__t b { font-size: 16px; font-weight: 700; }
.nx-root .nx-sb__t small { font-size: var(--nx-fs-small); color: var(--nx-muted); }
.nx-root .nx-sb__chev { flex: none; width: 9px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform var(--nx-d1) var(--nx-curve); }
.nx-root .nx-sb.is-open > .nx-sb__h .nx-sb__chev { transform: translateY(2px) rotate(-135deg); }
.nx-root .nx-sb.is-open > .nx-sb__h .nx-sb__btn { border-bottom: 1px solid var(--nx-line); border-radius: 14px 14px 0 0; }
.nx-root .nx-sb__body { padding: var(--nx-s4) 18px 18px; min-width: 0; }
.nx-root .nx-sb__body .nx-card { box-shadow: none; }

/* ---------------------------------------------------------------- SIMPLE: Create an agent in two screens. Screen 1: one sentence and Create it (the rest under More options). Screen 2: the build ticks, then Your agent is ready and Send for approval */
.nx-root .arch-more:not(.arch-more--simple) > summary { display: none; }
.nx-root .arch-more--simple { margin-top: var(--nx-s3); }
.nx-root .arch-more--simple > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: var(--nx-tap); color: var(--nx-link); font-weight: 700; }
.nx-root .arch-more--simple[open] > summary { margin-bottom: var(--nx-s3); }
.nx-root .arch-dept { margin: var(--nx-s3) 0; }
.nx-root .arch-simple .arch-example { white-space: normal; height: auto; }
.nx-root .arch-ready { display: grid; gap: var(--nx-s3); }
.nx-root .arch-ready__h { margin: 0; font-size: var(--nx-fs-h2); font-weight: 800; display: flex; align-items: center; gap: var(--nx-s2); }
.nx-root .arch-ticks { list-style: none; margin: var(--nx-s2) 0; padding: 0; display: grid; gap: var(--nx-s3); font-size: 17px; }
.nx-root .arch-ticks li { display: flex; align-items: center; gap: var(--nx-s2); color: var(--nx-muted); }
.nx-root .arch-ticks li.is-now { color: var(--nx-text); font-weight: 700; }
.nx-root .arch-ticks li.is-done { color: var(--nx-ok-text); }
.nx-root .arch-ready__acts { margin-top: var(--nx-s2); }

/* ---------------------------------------------------------------- SIMPLE HOME (22 Oct 2026): one big ask box with an Ask word, its answer drawn under it (Working on it, Done), three starter chips,
   the first-run card, Needs you, Your agents, and one sentence of numbers. Tokens only; every rule starts with .nx-root. */
.nx-root .nx-cmp__send--word { width: auto; min-width: 44px; padding: 0 18px 0 14px; gap: 6px; font-size: 16px; }
.nx-root .nx-cmp__send--word .nx-cmp__sendw { font-size: 15px; font-weight: 800; line-height: 1; }
.nx-root .nx-run { gap: var(--nx-s2); }
.nx-root .nx-run__head { display: flex; align-items: center; gap: var(--nx-s2); font-size: 18px; }
.nx-root .nx-run__mark { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--nx-rfull); background: var(--nx-blue-soft); color: var(--nx-blue-text); font-size: 15px; }
.nx-root .nx-run__mark--ok { background: var(--nx-ok-soft); color: var(--nx-ok-text); }
.nx-root .nx-run__q { margin: 0; color: var(--nx-muted); overflow-wrap: anywhere; }
.nx-root .nx-run__res { max-height: 280px; overflow-y: auto; padding: var(--nx-s3); border-radius: var(--nx-r2); background: var(--nx-hover); color: var(--nx-text); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.nx-root .nx-hs { max-width: 1120px; margin: 0 auto; width: 100%; }
@media (min-width: 1000px) { .nx-root .nx-hs .nx-acgrid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nx-root .nx-hs .nx-cmp__sugs { display: flex; flex-wrap: wrap; justify-content: center; overflow: visible; margin-inline: 0; padding: 0; gap: var(--nx-s2); }
.nx-root .nx-hs .nx-cmp__sug { flex: 0 1 auto; min-height: 44px; min-width: 0; max-width: 100%; padding: 0 var(--nx-s4); border-radius: var(--nx-rfull); box-shadow: none; gap: 0; }
.nx-root .nx-hs .nx-cmp__sug .nx-ask__tile, .nx-root .nx-hs .nx-cmp__sugt small { display: none; }
.nx-root .nx-hs .nx-cmp__sugt b { font-size: var(--nx-fs-small); font-weight: 700; }
.nx-root .nx-hs__first { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s4) var(--nx-s5); flex-wrap: wrap; padding: var(--nx-s4) var(--nx-s5); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-blue-soft); }
.nx-root .nx-hs__steps { list-style: none; margin: 0; padding: 0; display: flex; flex: 1 1 520px; gap: var(--nx-s3) var(--nx-s5); flex-wrap: wrap; min-width: 0; }
.nx-root .nx-hs__steps li { display: flex; align-items: flex-start; gap: var(--nx-s3); flex: 1 1 200px; min-width: 0; line-height: 1.4; }
.nx-root .nx-hs__steps b { color: var(--nx-text); }
.nx-root .nx-hs__n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--nx-rfull); background: var(--nx-blue); color: var(--nx-on-blue); font-weight: 800; font-size: 14px; }
.nx-root .nx-hs__firstacts { display: flex; align-items: center; gap: var(--nx-s4); flex: none; }
.nx-root .nx-hs__got { min-height: var(--nx-tap); padding: 0 var(--nx-s2); background: none; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.nx-root .nx-hs__week { margin: 0; text-align: center; color: var(--nx-muted); font-size: var(--nx-fs-body); }
@media (max-width: 860px) {
  .nx-root .nx-hs .nx-cmp__sugs { flex-wrap: wrap; overflow: visible; }
  .nx-root .nx-hs .nx-cmp__sug { flex: 0 1 auto; }
  .nx-root .nx-hs__first { padding: var(--nx-s4); }
  .nx-root .nx-hs__firstacts { width: 100%; justify-content: space-between; }
}
.nx-root .nx-cmp .nx-run { border: 0; padding: 0; background: none; box-shadow: none; }.nx-root .nx-dh-make, .nx-root .nx-dh-shelf, .nx-root .nx-dh-mine { margin: var(--nx-s5) 0; }
.nx-root .nx-dh-make { padding: var(--nx-s4); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); display: grid; gap: var(--nx-s3); }
.nx-root .nx-dh-acts, .nx-root .nx-dh-filters, .nx-root .nx-dh-cardacts { display: flex; align-items: center; gap: var(--nx-s3); flex-wrap: wrap; }
.nx-root .nx-dh-filters { margin: var(--nx-s3) 0; }
.nx-root .nx-dh-cardacts { margin-top: var(--nx-s2, 8px); }
.nx-root .nx-dh-mine .nx-input { max-width: 360px; margin-bottom: var(--nx-s3); }
@media (max-width: 860px) { .nx-root .nx-dh-filters .ant-segmented { max-width: 100%; overflow-x: auto; } .nx-root .nx-dh-acts .ant-btn, .nx-root .nx-dh-cardacts .ant-btn { min-height: 44px; } .nx-root .nx-dh-mine .nx-input { max-width: none; width: 100%; } }
.nx-root .nx-dh-rowacts { display: inline-flex; align-items: center; gap: var(--nx-s2, 8px); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) { .nx-root .nx-dh-tplrow { flex-wrap: wrap; } .nx-root .nx-dh-tplrow .nx-pw-row__main { flex: 1 1 calc(100% - 34px); } .nx-root .nx-dh-tplrow .nx-dh-rowacts { flex: 1 1 100%; justify-content: flex-start; padding-left: 22px; } .nx-root .nx-dh-tplrow .nx-btn { min-height: 40px; white-space: nowrap; } }

/* PAGE PORT, builder pp-work (22 Oct 2026): Work, the Task page, Automations and Alerts drawn like the LAB (ui-redesign-2026-10-21/DCC-Agent-Office-new-UI-full.html, Daylight theme).
   Same contract as nx.css: every rule starts with .nx-root, no hard colour (every colour is a token or a mix of tokens), motion only through --spd, and a reduced motion person gets none
   (the global rule in nx.css switches animations off). The page roots carry .nx-pw, so nothing here touches the pages of the other builders, except the two shared pieces marked SHARED
   (the Daylight backdrop and the top ask box, both drawn like the lab on every page). Lab numbers used: h1 26/800, sub 14, tabs 9px 14px, card padding 20, row padding 12 0, small button 13px with 5px 11px. */

/* ---------------------------------------------------------------- SHARED: the soft page of the Daylight theme (the lab's "subtle" colour effect: two big blurred discs of the accent colours) */
[data-palette="daylight"] .nx-root.nx-shell { isolation: isolate; overflow-x: clip; }   /* clip: the two drifting discs (calc(60 * var(--ao-vmax)), calc(20 * var(--ao-vmax)) past the edge) never widen the page on a phone (CEO crawl, 390 px) */
[data-palette="daylight"] .nx-root.nx-shell::before, [data-palette="daylight"] .nx-root.nx-shell::after { content: ""; position: fixed; z-index: -1; width: calc(60 * var(--ao-vmax)); height: calc(60 * var(--ao-vmax)); border-radius: 50%; filter: blur(90px); opacity: .16; pointer-events: none; }
[data-palette="daylight"] .nx-root.nx-shell::before { left: calc(-15 * var(--ao-vmax)); top: calc(-20 * var(--ao-vmax)); background: var(--nx-blue); animation: nx-pw-blob 22s ease-in-out infinite alternate; }
[data-palette="daylight"] .nx-root.nx-shell::after { right: calc(-20 * var(--ao-vmax)); bottom: calc(-25 * var(--ao-vmax)); background: var(--nx-cyan); animation: nx-pw-blob 22s ease-in-out -7s infinite alternate; }
@keyframes nx-pw-blob { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(calc(9 * var(--ao-vmax)), calc(6 * var(--ao-vmax)), 0) scale(1.15); } 100% { transform: translate3d(calc(-4 * var(--ao-vmax)), calc(10 * var(--ao-vmax)), 0) scale(.95); } }

/* ---------------------------------------------------------------- SHARED: the top ask box is the lab's page hero: ONE card holding the tile, the one line input, the round send and, under a thin line, the three ideas */
.nx-root .nx-topask { display: block; max-width: 860px; margin: 6px auto 4px; padding: 12px 14px 10px; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: 28px; box-shadow: var(--nx-shadow); }
.nx-root .nx-topask:focus-within { outline: 2px solid color-mix(in srgb, var(--nx-blue) 40%, transparent); }
.nx-root .nx-topask .nx-topask__box { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; gap: 10px; }
.nx-root .nx-topask .nx-ask__tile { width: 42px; height: 42px; }
.nx-root .nx-topask .nx-topask__in { min-height: 0; padding: 10px 4px; font-size: 17px; line-height: 1.5; }
.nx-root .nx-topask .nx-topask__send { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--nx-pill); color: var(--nx-pill-text); box-shadow: 0 10px 16px -8px var(--nx-blue); }
.nx-root .nx-topask .nx-topask__send:disabled { opacity: .45; box-shadow: none; }
.nx-root .nx-topask .nx-topask__chips { justify-content: flex-start; gap: 8px; margin: 8px 4px 2px; padding-top: 8px; border-top: 1px solid var(--nx-line); }
.nx-root .nx-topask .nx-topask__chip { min-height: 36px; padding: 0 14px; border: 1.5px solid var(--nx-line); background: var(--nx-surface); box-shadow: none; font-size: 13.5px; }
.nx-root .nx-topask .nx-topask__chip:hover { border-color: var(--nx-blue); background: var(--nx-surface); }

/* ---------------------------------------------------------------- the page: the lab's line height, the head (title, one sentence, the view chips), the tabs and the one sentence under them */
.nx-root .nx-pw { line-height: 1.5; margin-top: 4px; }   /* ONE shared top gap: the shell leaves 18px under the bar, + 4px = the 22px of Agents and Home */
.nx-root .nx-pw-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.nx-root .nx-pw > .nx-topask:first-child { margin-top: 0; }
.nx-root .nx-pw-head__t { flex: 1 1 320px; min-width: 0; }
.nx-root .nx-pw .nx-h1 { font-size: 26px; line-height: 1.5; font-weight: 800; letter-spacing: 0; }
.nx-root .nx-pw-head .nx-sub { margin: 0; font-size: 14px; line-height: 1.5; }
.nx-root .nx-pw .nx-tabs { gap: 2px; margin: 14px 0; }
.nx-root .nx-pw .nx-tab { min-height: 0; padding: 9px 14px; font-weight: 600; }
.nx-root .nx-pw .nx-tab[aria-current="page"] { font-weight: 600; }
.nx-root .nx-pw-sentence { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: -4px 0 12px; min-height: 21px; }
.nx-root .nx-pw-sentence .nx-tabsub { margin: 0; font-size: 14px; line-height: 1.5; }
.nx-root .nx-pw-slot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.nx-root .nx-pw-slot .nx-filter { margin: 0; }
.nx-root .nx-pw-slot .nx-btn, .nx-root .nx-pw-slot .nx-select { min-height: 0; padding: 5px 11px; font-size: 13px; }

/* SIMPLE UI: the one "..." menu of the page (Scheduled, Dashboards, Calendar, Automations, the extras), three tabs, a way back from a page that is not a tab */
.nx-root .nx-pw-head { flex-wrap: nowrap; align-items: flex-start; }
.nx-root .nx-pw-head__t { flex: 1 1 auto; }
.nx-root .nx-pw-menu { margin-left: auto; position: relative; align-self: flex-start; }
.nx-root .nx-pw-menu > .nx-iconb { width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1px solid var(--nx-line); border-radius: 12px; background: var(--nx-surface); color: var(--nx-text); cursor: pointer; font-size: 18px; }
.nx-root .nx-pw-menu > .nx-iconb:hover { background: var(--nx-hover); }
.nx-root .nx-pw-menu .nx-gl { --gls: 20; }
.nx-root .nx-pw-tabn { font-weight: 700; }
.nx-root .nx-pw-back { margin: 14px 0 0; }
.nx-root .nx-pw-back .nx-link { display: inline-flex; align-items: center; min-height: var(--nx-tap); text-decoration: none; }

/* the chips of the lab: every segmented control on a page of mine (view, period, calendar mode) is a row of round chips, the chosen one filled */
.nx-root .nx-pw .nx-seg { border: 0; border-radius: 0; background: none; overflow: visible; gap: 8px; flex-wrap: wrap; }
.nx-root .nx-pw .nx-seg__b { min-height: 0; padding: 5px 13px; border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); background: var(--nx-surface); color: var(--nx-muted); font-weight: 600; line-height: 1.5; }
.nx-root .nx-pw .nx-seg__b:hover { color: var(--nx-text); }
.nx-root .nx-pw .nx-seg__b[aria-pressed="true"] { background: var(--nx-blue); border-color: var(--nx-blue); color: var(--nx-on-blue); }

/* buttons of the lab: the main one is the gradient pill with its glow, the others are white with a thin line */
.nx-root .nx-pw .nx-btn { border-color: var(--nx-line); }
.nx-root .nx-pw .nx-btn--primary { background: var(--nx-pill); border-color: transparent; color: var(--nx-pill-text); box-shadow: 0 6px 14px -6px var(--nx-blue); }
.nx-root .nx-pw .nx-btn--primary:hover { box-shadow: 0 10px 18px -8px var(--nx-blue); filter: none; transform: translateY(-1px); }

/* ---------------------------------------------------------------- the list: ONE card, rows split by a thin line (the lab's .card with .att rows) */
.nx-root .nx-pw-card { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: 8px 20px; box-shadow: var(--nx-shadow); }
.nx-root .nx-pw-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--nx-line); min-width: 0; }
.nx-root .nx-pw-row:last-child { border-bottom: 0; }
.nx-root .nx-pw-row__main { flex: 1; min-width: 0; }
.nx-root .nx-pw-row__title { font-weight: 700; overflow-wrap: anywhere; }
.nx-root .nx-pw-row__meta { color: var(--nx-muted); font-size: 14px; overflow-wrap: anywhere; }
.nx-root .nx-pw-row__meta .nx-pill { margin-right: 8px; padding: 0 8px; font-size: 12px; line-height: 18px; vertical-align: 1px; }
.nx-root .nx-pw-row .nx-btn { flex: none; min-height: 0; padding: 5px 11px; font-size: 13px; border-radius: calc(var(--nx-r2) * .7); }
.nx-root .nx-pw-row .nx-dot--amber { background: var(--nx-badge-bg); animation: nx-pw-glow 2.4s infinite; }
@keyframes nx-pw-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nx-amber) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
.nx-root .nx-pw-empty { display: grid; justify-items: center; gap: 8px; text-align: center; margin-top: 8px; padding: 28px 16px; background: var(--nx-surface); border: 1px dashed var(--nx-line); border-radius: var(--nx-r2); }
.nx-root .nx-pw-empty__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--nx-pill); color: var(--nx-pill-text); --gls: 28; }
.nx-root .nx-pw-empty__t { margin: 4px 0 0; font-size: 17px; font-weight: 700; line-height: 1.4; }
.nx-root .nx-pw-empty p { margin: 0 0 8px; max-width: 46ch; color: var(--nx-muted); }
.nx-root .nx-pw .nx-empty { padding: 28px 16px; }
.nx-root .nx-pw-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin: 14px 4px 0; text-align: center; color: var(--nx-muted); font-size: 14px; }
.nx-root .nx-pw-hint b { color: var(--nx-text); font-weight: 600; }
.nx-root .nx-pw-hint__acts { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.nx-root .nx-pw-hint .nx-btn { min-height: 0; padding: 5px 11px; font-size: 13px; }

/* ---------------------------------------------------------------- the board (Needs me | Running | Done): the lab's soft columns, white cards, a dashed "drop" line at the foot */
.nx-root .nx-pw .nx-board { gap: 12px; }
.nx-root .nx-pw .nx-board__hint { font-size: 13px; }
.nx-root .nx-pw .nx-board__cols { gap: 16px; align-items: start; }
.nx-root .nx-pw .nx-bcol { background: color-mix(in srgb, var(--nx-line) 35%, transparent); border: 0; box-shadow: none; border-radius: var(--nx-r2); padding: 12px; gap: 10px; min-height: 200px; }
.nx-root .nx-pw .nx-bcol[data-focus] { border: 0; box-shadow: none; }
.nx-root .nx-pw .nx-bcol__head { min-height: 28px; }
.nx-root .nx-pw .nx-bcol__title { font-size: 15px; font-weight: 700; }
.nx-root .nx-pw .nx-bcol__list { gap: 10px; }
.nx-root .nx-pw .nx-bcard { border-radius: calc(var(--nx-r2) * .8); padding: 12px; gap: 6px; }
.nx-root .nx-pw .nx-bcard__top .nx-dot { display: none; }
.nx-root .nx-pw .nx-bcard__title { font-weight: 700; }
.nx-root .nx-pw .nx-bcard__note, .nx-root .nx-pw .nx-bcard__agent { font-size: 13px; }
.nx-root .nx-pw .nx-bcard__action .nx-btn { min-height: 0; padding: 5px 11px; font-size: 13px; border-radius: calc(var(--nx-r2) * .7); }
.nx-root .nx-pw .nx-bcol__drop { flex: none; min-height: 0; border: 2px dashed var(--nx-line); border-radius: 12px; padding: 16px; font-size: 13px; }
.nx-root .nx-pw .nx-bcol__drop--empty { padding: 16px; }
.nx-root .nx-pw .nx-bcol .nx-empty { padding: 12px 8px; }

/* ---------------------------------------------------------------- THE TASK PAGE (lab: .tkh .tkst .tkg .tkc .tktl .tkl .tksafe) */
.nx-root .nx-tkh { display: grid; gap: 0; margin-top: 0; min-width: 0; }
.nx-root .nx-tkh__back { justify-self: start; font-size: 14px; font-weight: 600; text-decoration: none; }
.nx-root .nx-tkh__back::before { content: "\2190\00a0"; }
.nx-root .nx-pwt .nx-tk-title { margin: 0; font-size: 26px; line-height: 1.5; font-weight: 800; letter-spacing: 0; }
.nx-root .nx-tkm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; color: var(--nx-muted); font-size: 14px; }
.nx-root .nx-tkm > span { min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-tkst { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 14px; padding: 14px 16px; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); }
.nx-root .nx-tkst__ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: calc(var(--nx-r2) * 1); background: var(--nx-success); color: var(--nx-on-blue); }
.nx-root .nx-tkst--working .nx-tkst__ic { background: var(--nx-blue); }
.nx-root .nx-tkst--waiting .nx-tkst__ic { background: var(--nx-badge-bg); color: var(--nx-badge-text); }
.nx-root .nx-tkst--stopped .nx-tkst__ic { background: var(--nx-amber); color: var(--nx-on-blue); }
.nx-root .nx-tkst--blocked .nx-tkst__ic { background: var(--nx-danger); color: var(--nx-on-blue); }
.nx-root .nx-tkst__t { flex: 1; min-width: 200px; display: grid; }
.nx-root .nx-tkst__t b { font-size: 18px; line-height: 1.5; }
.nx-root .nx-tkst__t small { color: var(--nx-muted); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.nx-root .nx-tkg { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; margin-top: 16px; align-items: start; }
.nx-root .nx-tkcol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.nx-root .nx-tkside { position: sticky; top: 84px; }
.nx-root .nx-tkc { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: 16px 18px; box-shadow: var(--nx-shadow); display: block; min-width: 0; }
.nx-root .nx-tkc__h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; line-height: 1.5; font-weight: 700; color: var(--nx-text); }
.nx-root .nx-tkc__h--2 { margin-top: 16px; }
.nx-root .nx-tkc__sp { flex: 1; }
.nx-root .nx-tkc__n { color: var(--nx-muted); font-size: 14px; font-weight: 400; }
.nx-root .nx-tkc .nx-tk-card__sub { margin: -4px 0 8px; font-size: 14px; }
.nx-root .nx-pwt .nx-tk-card { display: block; }
.nx-root .nx-tkact__msg { margin: 0 0 8px; color: var(--nx-muted); font-size: 14px; }
.nx-root .nx-tkact__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nx-root .nx-tkc .nx-btn { min-height: 0; padding: 5px 11px; font-size: 13px; border-radius: calc(var(--nx-r2) * .7); }
.nx-root .nx-tkc .nx-tk-menu__item { padding: 6px 11px; }
.nx-root .nx-tksafe { margin: 16px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; color: var(--nx-muted); font-size: 13px; }
/* the approval card: the lab's amber edged card in the right column */
.nx-root .nx-tkside .nx-tk-appr { border-color: color-mix(in srgb, var(--nx-badge-bg) 70%, var(--nx-line)); border-left-width: 1px; gap: 8px; display: grid; }
.nx-root .nx-tkside .nx-tk-appr .nx-approval__title { font-size: 15px; font-weight: 700; }
.nx-root .nx-tkside .nx-tk-appr .nx-approval__label { font-size: 14px; font-weight: 400; }
.nx-root .nx-tkside .nx-tk-appr .nx-approval__actions { gap: 8px; }
.nx-root .nx-tkside .nx-tk-appr .nx-btn--primary { background: var(--nx-pill); border-color: transparent; color: var(--nx-pill-text); box-shadow: 0 6px 14px -6px var(--nx-blue); }
/* the timeline: the lab's round ticks, the time under each line */
.nx-root .nx-tk-timeline .nx-tk-fold__sum { list-style: none; margin: 0 0 8px; min-height: 0; cursor: pointer; }
.nx-root .nx-tk-timeline .nx-tk-fold__sum::-webkit-details-marker { display: none; }
.nx-root .nx-tk-timeline .nx-tk-fold[open] > .nx-tk-fold__sum { margin-bottom: 8px; }
.nx-root .nx-tk-fold__toggle { font-size: 14px; font-weight: 600; }
.nx-root .nx-pwt .nx-tk-tl__i { grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 6px 0; }
.nx-root .nx-pwt .nx-tk-tl__i::before { display: none; }
.nx-root .nx-pwt .nx-tk-tl__mark { width: 18px; height: 18px; margin: 2px 0 0; box-shadow: none; display: grid; place-items: center; font-size: 11px; line-height: 1; color: var(--nx-on-blue); }
.nx-root .nx-pwt .nx-tk-tl__i--ok .nx-tk-tl__mark::after { content: "\2713"; }
.nx-root .nx-pwt .nx-tk-tl__i--warn .nx-tk-tl__mark::after, .nx-root .nx-pwt .nx-tk-tl__i--bad .nx-tk-tl__mark::after { content: "!"; font-weight: 800; }
.nx-root .nx-pwt .nx-tk-tl__i--info .nx-tk-tl__mark { background: transparent; border: 2px solid var(--nx-line); border-top-color: var(--nx-blue); animation: nx-pw-spin .8s linear infinite; }
.nx-root .nx-pwt .nx-tk-tl__i--gray .nx-tk-tl__mark::after { content: "\00b7"; }
@keyframes nx-pw-spin { to { transform: rotate(360deg); } }
.nx-root .nx-pwt .nx-tk-tl__at { margin-top: -2px; font-size: 14px; }
/* what it looked at and did: the lab's rows with a thin line */
.nx-root .nx-pwt .nx-tk-ticks { gap: 0; }
.nx-root .nx-pwt .nx-tk-ticks li { padding: 9px 0; border-bottom: 1px solid var(--nx-line); align-items: center; }
.nx-root .nx-pwt .nx-tk-ticks li:last-child { border-bottom: 0; }
.nx-root .nx-pwt .nx-tk-ticks li > span:last-child { font-weight: 700; }
.nx-root .nx-pwt .nx-tk-feedback .fb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
/* the folds for administrators and IT sit in cards too */
.nx-root .nx-pwt .nx-tk-tech { padding: 16px 18px; border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); }
.nx-root .nx-pwt .nx-tk-tech > summary { font-size: 15px; font-weight: 700; color: var(--nx-text); min-height: 0; }
.nx-root .nx-pwt .nx-tk-answer, .nx-root .nx-pwt .nx-tk-result { line-height: 1.6; }
@media (max-width: 1100px) {
  .nx-root .nx-tkg { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-tkside { position: static; }
  .nx-root .nx-tkg.has-appr .nx-tkside { order: -1; }   /* a decision comes before the answer on a narrow page (the lab puts it last) */
}
@media (max-width: 860px) {
  .nx-root .nx-pwt .nx-tk-title { font-size: 24px; }
  .nx-root .nx-tkc { padding: 14px; }
  .nx-root .nx-tkc .nx-btn { min-height: var(--nx-tap); padding: 4px 14px; font-size: 14px; }
  .nx-root .nx-tkst__ic { width: 40px; height: 40px; }
}

/* ---------------------------------------------------------------- THE REVIEW SIDE SHEET (nx-review-sheet.jsx): a side sheet on a wide screen, a bottom sheet on a phone */
.nx-root .nx-rvs__scrim { position: fixed; inset: 0; z-index: 2250; display: flex; justify-content: flex-end; background: var(--nx-scrim); }
.nx-root .nx-rvs { position: relative; width: min(440px, calc(100 * var(--ao-vw))); height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 22px 22px 24px; background: var(--nx-surface); color: var(--nx-text); border-left: 1px solid var(--nx-line); box-shadow: var(--nx-panel-shadow); display: block; }
.nx-root .nx-rvs:focus { outline: none; }
.nx-root .nx-rvs__x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 12px; background: none; color: var(--nx-muted); font-size: 26px; line-height: 1; cursor: pointer; }
.nx-root .nx-rvs__x:hover { background: var(--nx-hover); color: var(--nx-text); }
.nx-root .nx-rvs__t { margin: 10px 40px 2px 0; font-size: 20px; line-height: 1.3; font-weight: 800; overflow-wrap: anywhere; }
.nx-root .nx-rvs__sub { margin: 0 0 8px; color: var(--nx-muted); font-size: 14px; }
.nx-root .nx-rvs__what { margin: 8px 0; overflow-wrap: anywhere; }
.nx-root .nx-rvs__facts { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 12px; margin: 10px 0 14px; font-size: 14px; }
.nx-root .nx-rvs__facts dt { color: var(--nx-muted); }
.nx-root .nx-rvs__facts dd { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-rvs__note { margin: 8px 0; padding: 10px 12px; border-radius: var(--nx-r1); background: var(--nx-hover); font-size: 14px; overflow-wrap: anywhere; }
.nx-root .nx-rvs__note.is-warn { background: var(--nx-amber-soft); }
.nx-root .nx-rvs__note.is-bad { background: var(--nx-bad-soft); color: var(--nx-bad-text); }
.nx-root .nx-rvs__ask { display: grid; gap: 6px; margin: 12px 0; padding: 12px 14px; border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-bg); }
.nx-root .nx-rvs__ask > span:not(.nx-rvs__ask-acts) { color: var(--nx-muted); font-size: 14px; }
.nx-root .nx-rvs__ask-acts, .nx-root .nx-rvs__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.nx-root .nx-rvs__acts { margin: 14px 0 6px; }
.nx-root .nx-rvs .nx-btn { min-height: var(--nx-tap); }
.nx-root .nx-rvs .nx-btn--primary { background: var(--nx-pill); border-color: transparent; color: var(--nx-pill-text); box-shadow: 0 6px 14px -6px var(--nx-blue); }
.nx-root .nx-rvs__state { display: grid; gap: 8px; justify-items: start; margin-top: 12px; }
.nx-root .nx-rvs__state p { margin: 0; color: var(--nx-muted); }
.nx-root .nx-rvs__safe { margin: 12px 0 0; color: var(--nx-muted); font-size: 13px; }
.nx-root .nx-rvs__open { margin-left: 4px; }
@media (max-width: 860px) {
  .nx-root .nx-rvs__scrim { align-items: flex-end; justify-content: center; }
  .nx-root .nx-rvs { width: 100%; height: auto; max-height: calc(92 * var(--ao-vh)); border-left: 0; border-top: 1px solid var(--nx-line); border-radius: 20px 20px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); }
  .nx-root .nx-rvs__acts .nx-btn--primary { flex: 1 1 100%; }
  .nx-root .nx-rvs__acts .nx-btn { flex: 1 1 calc(50% - 5px); }
  .nx-root .nx-rvs__facts { grid-template-columns: 96px minmax(0, 1fr); }
}

/* the overview of Dashboards and the other lists inside my pages: the same one card of rows, the lab's headings */
.nx-root .nx-pw .nx-h2 { font-size: 17px; font-weight: 700; line-height: 1.5; }
.nx-root .nx-pw .nx-section { margin: 22px 0 10px; }
.nx-root .nx-pw .nx-list { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); padding: 4px 20px; gap: 0; }
.nx-root .nx-pw .nx-list--cards .nx-item { background: none; border: 0; border-bottom: 1px solid var(--nx-line); border-radius: 0; box-shadow: none; min-height: 0; padding: 12px 0; transform: none; }
.nx-root .nx-pw .nx-list--cards .nx-item:last-child { border-bottom: 0; }
.nx-root .nx-pw .nx-item__meta { font-size: 14px; }
.nx-root .nx-pw .nx-item .nx-btn { min-height: 0; padding: 5px 11px; font-size: 13px; border-radius: calc(var(--nx-r2) * .7); }

/* ---------------------------------------------------------------- the calendar of Scheduled (lab: a narrow card of filters on the left, the month in one card on the right, names of the events in the days) */
.nx-root .nx-pw .nx-agenda { grid-template-columns: 330px minmax(0, 1fr); gap: 18px; }
.nx-root .nx-pw .nx-agenda > * { min-width: 0; }
.nx-root .nx-pw .nx-agenda__side { grid-column: 1; grid-row: 1; gap: 18px; }
.nx-root .nx-pw .nx-agenda__cal { grid-column: 2; grid-row: 1; padding: 20px; }
.nx-root .nx-pw .nx-agenda__undated { grid-column: 1 / -1; }
.nx-root .nx-pw .nx-agenda .nx-card .nx-h3 { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.nx-root .nx-pw .nx-agenda__fcard { display: grid; gap: 4px; }
.nx-root .nx-pw .nx-agenda__fcard .nx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.nx-root .nx-pw .nx-agenda__fcard .nx-chip, .nx-root .nx-pw .nx-agenda__fcard .nx-btn { min-height: 0; padding: 5px 13px; font-size: 14px; }
.nx-root .nx-pw .nx-agenda__fcard .nx-btn { justify-self: start; margin-top: 8px; }
.nx-root .nx-pw .nx-agenda__bar { margin-bottom: 12px; }
.nx-root .nx-pw .nx-agenda__nav .nx-btn { min-height: 0; padding: 5px 11px; font-size: 13px; }
.nx-root .nx-pw .nx-agenda__nav .nx-btn[aria-label] { min-width: 32px; padding: 0 8px; font-size: 18px; }
.nx-root .nx-pw .nx-agenda__title { font-size: 17px; font-weight: 700; }
.nx-root .nx-pw .nx-cal { border-spacing: 0; border: 1px solid var(--nx-line); border-radius: var(--nx-r2); overflow: hidden; }
.nx-root .nx-pw .nx-cal th { background: var(--nx-bg); padding: 8px 0; font-weight: 700; border-bottom: 1px solid var(--nx-line); border-right: 1px solid var(--nx-line); }
.nx-root .nx-pw .nx-cal th:last-child, .nx-root .nx-pw .nx-cal td:last-child { border-right: 0; }
.nx-root .nx-pw .nx-cal td { border-right: 1px solid var(--nx-line); border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-pw .nx-cal tr:last-child td { border-bottom: 0; }
.nx-root .nx-pw .nx-cal__day { min-height: 84px; border: 0; border-radius: 0; background: var(--nx-surface); padding: 6px; font-size: 13px; justify-content: flex-start; gap: 3px; min-width: 0; }
.nx-root .nx-pw .nx-cal__day[data-out] { background: color-mix(in srgb, var(--nx-line) 35%, var(--nx-surface)); }
.nx-root .nx-pw .nx-cal td[aria-selected="true"] .nx-cal__day { box-shadow: inset 0 0 0 2px var(--nx-blue); }
.nx-root .nx-pw .nx-cal__n { min-width: 22px; height: 22px; font-size: 13px; }
.nx-root .nx-pw .nx-cal__dots { display: none; }
.nx-root .nx-cal__chips { display: grid; gap: 3px; width: 100%; min-width: 0; }
.nx-root .nx-cal__chip { display: block; max-width: 100%; border-radius: 6px; padding: 1px 6px; font-size: 12px; font-weight: 700; line-height: 1.5; color: var(--nx-on-blue); background: var(--nx-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-root .nx-cal__chip--ok { background: var(--nx-success); }
.nx-root .nx-cal__chip--bad { background: var(--nx-danger); }
.nx-root .nx-cal__chip--amber { background: var(--nx-badge-bg); color: var(--nx-badge-text); }
.nx-root .nx-cal__chip.is-past { background: transparent; color: var(--nx-text); box-shadow: inset 0 0 0 1.5px var(--nx-line); }
.nx-root .nx-cal__more { font-size: 12px; color: var(--nx-muted); }
@media (max-width: 1100px) {
  .nx-root .nx-pw .nx-agenda { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-pw .nx-agenda__side, .nx-root .nx-pw .nx-agenda__cal { grid-column: 1; }
  .nx-root .nx-pw .nx-agenda__cal { grid-row: 1; }
  .nx-root .nx-pw .nx-agenda__side { grid-row: 2; }
}
@media (max-width: 860px) {
  .nx-root .nx-pw .nx-cal__chips { display: none; }
  .nx-root .nx-pw .nx-cal__dots { display: flex; }
  .nx-root .nx-pw .nx-cal__day { min-height: 52px; padding: 4px; }
  .nx-root .nx-pw .nx-agenda__cal { padding: 12px; }
}

/* ---------------------------------------------------------------- AUTOMATIONS (lab: one head row, one chip row, ONE card of rows .aur with a solid icon tile) */
.nx-root .nx-pwa-head { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-start; gap: 4px 12px; margin: 0; }
.nx-root .nx-pwa-head .nx-h1 { font-size: 26px; line-height: 1.5; font-weight: 800; letter-spacing: 0; }
.nx-root .nx-pwa-head .nx-sub { margin: 0; font-size: 14px; flex: 1 1 240px; min-width: 0; }
.nx-root .nx-pwa-new { align-self: center; margin-left: auto; }
.nx-root .nx-pwa-head .nx-pwa-count { flex: none; }
.nx-root .nx-pwa-head .nx-pwa-count + .nx-pwa-new { margin-left: 0; }
.nx-root .nx-pwa-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 12px 0; }
.nx-root .nx-pwa-filters .nx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nx-root .nx-pwa-filters .nx-w21-fchip { min-height: 0; padding: 5px 13px; font-size: 15px; gap: 6px; border-radius: 999px; }
.nx-root .nx-pwa-filters .nx-w21-fchip__n { min-width: 0; padding: 0; font-size: 13px; border: 0; opacity: .8; }
.nx-root .nx-pwa-count { margin: 0; font-size: 13px; flex: 0 0 auto; }
/* the Filters button of the kind: a chip with a small list under it */
.nx-root .nx-pwa-filterbtn { position: relative; margin-left: auto; }
.nx-root .nx-pwa-filterbtn > .nx-iconb { width: auto; height: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border: 1px solid var(--nx-line); border-radius: 999px; background: var(--nx-surface); color: var(--nx-text); font: inherit; font-weight: 600; cursor: pointer; }
.nx-root .nx-pwa-filterbtn > .nx-iconb[aria-expanded="true"] { border-color: var(--nx-blue); }
.nx-root .nx-pwa-filterbtn .nx-gl { --gls: 16; }
.nx-root .nx-pwa-filterbtn__on { padding: 0 8px; border-radius: 999px; background: var(--nx-blue); color: var(--nx-on-blue); font-size: 13px; font-weight: 700; }
.nx-root .nx-pwa-filterbtn .nx-menu__list { right: 0; left: auto; min-width: 240px; z-index: 90; }
.nx-root .nx-pwa-filterbtn .nx-menu__item { display: flex; align-items: center; gap: 8px; }
.nx-root .nx-pwa-h { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--nx-muted); }
.nx-root .nx-pwa-filterbtn .nx-menu__item:disabled { opacity: 1; cursor: default; min-height: 0; padding-top: 10px; padding-bottom: 2px; }
.nx-root .nx-pwa-tick { width: 16px; flex: none; color: var(--nx-blue-text); font-weight: 800; }
.nx-root .nx-pwa-n { margin-left: auto; color: var(--nx-muted); font-size: 13px; }
.nx-root .nx-pwa .nx-w21-list { gap: 0; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); overflow: hidden; margin-top: 12px; }
.nx-root .nx-pwa .nx-w21-row { grid-template-columns: auto minmax(0, 1fr) 280px 160px auto; gap: 8px 14px; padding: 14px 16px; background: none; border: 0; border-bottom: 1px solid var(--nx-line); border-radius: 0; box-shadow: none; }
.nx-root .nx-pwa .nx-w21-row:last-child { border-bottom: 0; }
.nx-root .nx-pwa .nx-w21-row > .nx-w21-tile { width: 40px; height: 40px; border-radius: 13px; --gls: 22; background: var(--nx-blue); color: var(--nx-on-blue); box-shadow: 0 8px 14px -8px color-mix(in srgb, var(--nx-text) 45%, transparent); }
.nx-root .nx-pwa .nx-w21-row > .nx-w21-tile--green { background: var(--nx-success); color: var(--nx-on-blue); }
.nx-root .nx-pwa .nx-w21-row > .nx-w21-tile--amber { background: var(--nx-badge-bg); color: var(--nx-badge-text); }
.nx-root .nx-pwa .nx-w21-row__name { font-weight: 700; font-size: 15px; }
.nx-root .nx-pwa .nx-w21-row__line { font-size: 14px; }
.nx-root .nx-pwa .nx-w21-row__when { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; font-size: 13px; }
.nx-root .nx-pwa .nx-w21-row__when dt { font-size: 12px; }
.nx-root .nx-pwa .nx-w21-row__when dd { font-size: 13.5px; font-weight: 700; }
.nx-root .nx-pwa .nx-w21-row__note { margin-top: 2px; font-size: 14px; gap: 6px 10px; }
.nx-root .nx-pwa .nx-w21-row__note--warn { padding: 0; background: none; color: var(--nx-amber-text); }
.nx-root .nx-pwa .nx-w21-row .nx-btn { min-height: 0; padding: 5px 11px; font-size: 13px; border-radius: calc(var(--nx-r2) * .7); }
.nx-root .nx-pwa .nx-w21-row__acts { flex-wrap: nowrap; gap: 8px; }
.nx-root .nx-pwa .nx-w21-safe--page { justify-content: center; margin-top: 14px; font-size: 14px; }
.nx-root .nx-pwa .nx-w21-empty { margin-top: 12px; padding: 40px 16px; border-style: dashed; border-color: var(--nx-line); }
/* the New automation dialog: the lab's softer corners, solid tiles on the three cards, the gradient main button */
.nx-root .nx-dlg:has(.nx-w21-wiz) { border-radius: 20px; }
.nx-root .nx-dlg:has(.nx-w21-wiz) .nx-w21-kind { border: 2px solid var(--nx-line); border-radius: 16px; padding: 16px 14px; }
.nx-root .nx-dlg:has(.nx-w21-wiz) .nx-w21-kind:hover { border-color: var(--nx-blue); transform: translateY(-3px); box-shadow: var(--nx-shadow); }
.nx-root .nx-dlg:has(.nx-w21-wiz) .nx-w21-kind[aria-pressed="true"] { background: color-mix(in srgb, var(--nx-blue) 7%, var(--nx-surface)); }
.nx-root .nx-dlg:has(.nx-w21-wiz) .nx-w21-kind > .nx-w21-tile--lg { width: 44px; height: 44px; border-radius: 14px; background: var(--nx-blue); color: var(--nx-on-blue); }
.nx-root .nx-dlg:has(.nx-w21-wiz) .nx-w21-kind > .nx-w21-tile--green { background: var(--nx-success); color: var(--nx-on-blue); }
.nx-root .nx-dlg:has(.nx-w21-wiz) .nx-w21-kind > .nx-w21-tile--amber { background: var(--nx-badge-bg); color: var(--nx-badge-text); }
.nx-root .nx-dlg:has(.nx-w21-wiz) .nx-btn--primary { background: var(--nx-pill); border-color: transparent; color: var(--nx-pill-text); box-shadow: 0 6px 14px -6px var(--nx-blue); }
.nx-root .nx-dlg:has(.nx-w21-wiz) .nx-w21-h { font-size: 17px; font-weight: 700; }
@media (max-width: 1100px) {
  .nx-root .nx-pwa .nx-w21-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tile main acts" "tile when st"; }
  .nx-root .nx-pwa .nx-w21-row__when { display: flex; gap: 16px; }
  .nx-root .nx-pwa .nx-w21-row__when > div + div { margin-top: 0; }
}
@media (max-width: 860px) {
  .nx-root .nx-pwa-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .nx-root .nx-pwa-filters::-webkit-scrollbar { display: none; }
  .nx-root .nx-pwa-filters .nx-chips { flex-wrap: nowrap; flex: none; }
  .nx-root .nx-pwa-count { display: none; }
  .nx-root .nx-pwa .nx-w21-row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "tile main main" "when when when" "st st acts"; padding: 12px 14px; }
  .nx-root .nx-pwa-filters .nx-w21-fchip, .nx-root .nx-pwa .nx-w21-row .nx-btn { min-height: var(--nx-tap); }
  .nx-root .nx-pwa-new { margin-left: 0; }
}

/* ---------------------------------------------------------------- ALERTS: the bell panel of the lab (.aubell, .aunr): solid icon tile, bold title, grey sentence, ONE filled button, Snooze, a small meta line */
.nx-root .nx-alpanel { width: 440px; border-radius: 18px; }
.nx-root .nx-al-head { padding: 14px 16px 6px; border-bottom: 0; }
.nx-root .nx-al-title { font-size: 17px; line-height: 1.5; font-weight: 700; }
.nx-root .nx-al-count { font-size: 14px; font-weight: 400; }
.nx-root .nx-al-tabs { gap: 6px; padding: 8px 16px 12px; border-bottom: 0; }
.nx-root .nx-al-tab { min-height: 0; padding: 5px 13px; border: 1px solid var(--nx-line); color: var(--nx-muted); font-weight: 600; line-height: 1.5; }
.nx-root .nx-al-tab[aria-selected="true"] { background: var(--nx-blue); border-color: var(--nx-blue); color: var(--nx-on-blue); }
.nx-root .nx-al-tab__n { min-width: 0; padding: 0; background: none; color: inherit; font-size: 13px; font-weight: 700; opacity: .85; }
.nx-root .nx-al-group__h { padding: 10px 16px 4px; text-transform: uppercase; letter-spacing: .06em; }
.nx-root .nx-al-list { padding: 0 8px 8px; }
.nx-root .nx-al-row { position: relative; gap: 12px; padding: 12px 8px; border-bottom: 0; border-radius: 14px; }
.nx-root .nx-al-row:hover { background: color-mix(in srgb, var(--nx-blue) 6%, transparent); }
.nx-root .nx-al-tile { width: 40px; height: 40px; border-radius: 13px; border: 0; background: var(--al-fg); color: var(--nx-on-blue); box-shadow: 0 8px 14px -8px color-mix(in srgb, var(--nx-text) 45%, transparent); }
.nx-root .nx-al--approval .nx-al-tile { background: var(--nx-badge-bg); color: var(--nx-badge-text); }
.nx-root .nx-al-tile--lg { width: 48px; height: 48px; }
.nx-root .nx-al-row__main { gap: 0; }
.nx-root .nx-al-row__title { font-weight: 700; line-height: 1.5; }
.nx-root .nx-al-row.is-unread .nx-al-row__title { font-weight: 700; }
.nx-root .nx-al-row__text, .nx-root .nx-al-row__how { font-size: 14px; line-height: 1.45; margin: 2px 0 0; }
.nx-root .nx-al-row__acts { align-items: center; margin-top: 6px; gap: 6px; }
.nx-root .nx-al-row__acts .nx-btn { min-height: 0; padding: 5px 11px; font-size: 13px; border-radius: calc(var(--nx-r2) * .7); }
.nx-root .nx-al-row__acts .nx-btn--ghost { background: var(--nx-surface); border: 1px solid var(--nx-line); }
.nx-root .nx-al-row__acts .nx-btn--primary { background: var(--nx-pill); border-color: transparent; color: var(--nx-pill-text); box-shadow: 0 6px 14px -6px var(--nx-blue); }
.nx-root .nx-al-row__meta { font-size: 13px; color: var(--nx-muted); }
.nx-root .nx-al-row__meta .nx-al-word { padding: 0; background: none; color: var(--nx-muted); font-size: 13px; font-weight: 700; }
.nx-root .nx-al-dot { position: absolute; left: -2px; top: 26px; width: 6px; height: 6px; }
.nx-root .nx-al-foot { padding: 8px 14px; gap: 4px; }
.nx-root .nx-al-safe { justify-content: center; font-size: 12.5px; }
.nx-root .nx-al-foot__acts { justify-content: center; }
.nx-root .nx-al-foot__acts .nx-btn { flex: none; min-height: 0; padding: 5px 11px; font-size: 13px; }
.nx-root .nx-alpanel .nx-al-head .nx-btn { min-height: 0; padding: 5px 11px; font-size: 13px; }

/* a phone: every button, chip and tab of these pages is 40 px high (the responsive gate); this wins over the small desktop sizes above */
@media (max-width: 860px) {
  .nx-root .nx-pw .nx-btn, .nx-root .nx-pw .nx-chip, .nx-root .nx-pw .nx-seg__b, .nx-root .nx-pw .nx-select, .nx-root .nx-pw .nx-w21-fchip,
  .nx-root .nx-alpanel .nx-btn, .nx-root .nx-alpanel .nx-al-tab, .nx-root .nx-alpanel .nx-iconbtn,
  .nx-root .nx-pwa-filterbtn > .nx-iconb, .nx-root .nx-topask__chip, .nx-root .nx-al-foot__acts .nx-btn { min-height: var(--nx-tap) !important; }
  .nx-root .nx-pwa-filterbtn { order: -1; margin-left: 0; }
  .nx-root .nx-pw .nx-tkc .nx-btn, .nx-root .nx-pw .nx-pw-row .nx-btn { padding-top: 4px; padding-bottom: 4px; }
}

@media (max-width: 860px) {
  .nx-root .nx-pw-head { gap: 8px; }
  .nx-root .nx-pw .nx-h1 { font-size: 24px; }
  .nx-root .nx-pw-card { padding: 4px 14px; }
  .nx-root .nx-pw-row { gap: 10px; }
  .nx-root .nx-pw-row .nx-btn { min-height: var(--nx-tap); padding: 4px 12px; font-size: 14px; white-space: normal; max-width: 120px; text-align: center; line-height: 1.25; }
  .nx-root .nx-pw .nx-seg__b { min-height: 40px; }
  .nx-root .nx-pw-slot .nx-btn, .nx-root .nx-pw-slot .nx-select { min-height: 40px; }
}

/* the page menu never grows taller than the screen (a phone on its side) */
.nx-root .nx-pw-menu .nx-menu__list { max-height: calc(calc(100 * var(--ao-vh)) - 170px); overflow-y: auto; }
/* Work: a row with more than one button, and the filters of Running and Done (nx-work.jsx) */
.nx-root .nx-pw-row__acts { display: inline-flex; flex-wrap: wrap; gap: var(--nx-s2); justify-content: flex-end; align-items: center; }
.nx-root .nx-pw-filters { display: flex; flex-wrap: wrap; gap: var(--nx-s2); align-items: center; margin: 0 0 var(--nx-s3); }
.nx-root .nx-pw-filters__q { flex: 1 1 220px; min-width: 0; max-width: 340px; }
.nx-root .nx-pw-filters__days { display: inline-flex; gap: var(--nx-s1); }
.nx-root .nx-pw-filters__team { display: inline-flex; align-items: center; gap: var(--nx-s2); font-size: var(--nx-fs-small); color: var(--nx-muted); }
@media (max-width: 640px) { .nx-root .nx-pw-row__acts { justify-content: flex-start; } .nx-root .nx-pw-filters__q { max-width: none; flex-basis: 100%; } }
/* Dashboards list: search and sort, the views, the little words on each row (nx-work.jsx DashboardsList, nx-dash-lib.mjs) */
.nx-root .nx-dh-tools { display: flex; flex-wrap: wrap; gap: var(--nx-s2); align-items: center; margin-bottom: var(--nx-s2); }
.nx-root .nx-dh-tools .nx-input { flex: 1 1 240px; min-width: 0; }
.nx-root .nx-dh-views { display: flex; flex-wrap: wrap; gap: var(--nx-s2); margin-bottom: var(--nx-s3); }
.nx-root .nx-dh-n { color: var(--nx-muted); font-weight: 600; }
.nx-root .nx-dh-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: var(--nx-s2); vertical-align: middle; }
@media (max-width: 640px) { .nx-root .nx-dh-tags { display: flex; margin: 4px 0 0; } }
/* A dashboard on paper or on a wall: the New menu, header and floating buttons are not printed or shown (Classic hid its own, styles.css:745 and :943) */
@media print {
  .nx-root .nx-side, .nx-root .nx-side__resize, .nx-root .nx-header, .nx-root .nx-bar, .nx-root .nx-fx, .nx-root .nx-cz__gear, .nx-root .nx-skip { display: none !important; }
  .nx-root .nx-main { margin-left: 0 !important; }
  .nx-root .nx-content { padding: 0 !important; }
}
.nx-root.is-tv .nx-side, .nx-root.is-tv .nx-side__resize, .nx-root.is-tv .nx-header, .nx-root.is-tv .nx-bar, .nx-root.is-tv .nx-fx, .nx-root.is-tv .nx-cz__gear { display: none !important; }
.nx-root.is-tv .nx-main { margin-left: 0 !important; }
.nx-root.is-tv .nx-content { padding: 28px 36px; }

/* nx-w28 (pp-libmail, 22 Oct 2026): LIBRARY and MAIL of the new look brought to the lab pages (DCC-Agent-Office-new-UI-full.html: Library home, Mail with its three panes).
   Every rule starts with .nx-root and uses only --nx-* tokens (the lab's hard colours are token mixes here). Motion only in the prefers-reduced-motion: no-preference block at the end.
   Taps are 40 px up to 860 px (the resp gate), a little smaller on a wide screen where the lab's small buttons are. This file comes after nx-w16 / nx-w17 and before nx-w11. */

/* ---------------------------------------------------------------- Library: the head, one row like the lab */
.nx-root .nx-lb-page { display: block; }
.nx-root .nx-lb-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nx-s1) var(--nx-s3); margin: 6px 0 0; }
.nx-root .nx-lb-head .nx-h1 { margin: 0; }
.nx-root .nx-lb-head .nx-sub { margin: 0; min-width: 0; }
.nx-root .nx-lb-head__acts { margin-left: auto; display: flex; gap: var(--nx-s2); align-items: center; align-self: center; }

/* the search pill and the type chips on ONE row */
.nx-root .nx-lb-bar { display: flex; flex-wrap: wrap; gap: 10px var(--nx-s3); align-items: center; margin: var(--nx-s3) 0 0; }
.nx-root .nx-lb-search { flex: 1 1 240px; min-width: 0; display: flex; align-items: center; gap: var(--nx-s2); min-height: 46px; padding: 0 var(--nx-s4); border: 1.5px solid var(--nx-control-line); border-radius: var(--nx-rfull); background: var(--nx-surface); color: var(--nx-muted); }
.nx-root .nx-lb-search:focus-within { border-color: var(--nx-blue); box-shadow: 0 0 0 3px var(--nx-blue-soft); }
.nx-root .nx-lb-search .nx-gl { --gls: 18; flex: none; }
.nx-root .nx-lb-search input { flex: 1 1 auto; min-width: 0; min-height: 40px; margin: 0; padding: 0; border: 0; border-radius: 0; outline: none; box-shadow: none; background: transparent; color: var(--nx-text); font: inherit; font-size: 16px; }
.nx-root .nx-lb-search input::placeholder { color: var(--nx-muted); opacity: 1; }
.nx-root .nx-lb-search input.nx-w16-search:focus, .nx-root .nx-lb-search input.nx-w16-search:focus-visible { outline: none; box-shadow: none; border: 0; background: transparent; }
.nx-root .nx-lb-bar .nx-chips { flex: 0 1 auto; margin: 0; }
.nx-root .nx-lb-page .nx-w16-types { margin: 0; }
.nx-root .nx-lb-page .nx-w16-filters { margin: var(--nx-s3) 0 0; }
.nx-root .nx-lb-page .nx-w16-noadd { margin: var(--nx-s2) 0 0; }

/* the welcome card: the pill gradient, a soft round shape at the right, the button white with the accent colour */
.nx-root .nx-w16-welcome { position: relative; overflow: hidden; margin: var(--nx-s4) 0 0; padding: 22px 24px; }
.nx-root .nx-w16-welcome::after { content: ""; position: absolute; right: -60px; top: -90px; width: 260px; height: 260px; border-radius: 50%; background: var(--nx-pill-text); opacity: .14; pointer-events: none; }
.nx-root .nx-w16-welcome h2, .nx-root .nx-w16-welcome p, .nx-root .nx-w16-welcome__act { position: relative; }
.nx-root .nx-w16-welcome h2 { margin: 0 0 4px; }
.nx-root .nx-w16-welcome p { margin: 0 0 14px; max-width: 560px; }
.nx-root .nx-w16-welcome .nx-btn { background: var(--nx-plate); color: var(--nx-blue-text); border-color: transparent; box-shadow: none; }

/* the six quick cards: a coloured tile with the picture, the name, the count */
.nx-root .nx-w16-quick { gap: var(--nx-s3); margin: var(--nx-s4) 0 0; }
.nx-root .nx-w16-qcard { gap: 0; min-height: 0; padding: 14px; }
.nx-root .nx-w16-qcard b { display: block; font-size: 15px; }
.nx-root .nx-w16-qico { width: 38px; height: 38px; margin-bottom: 8px; border-radius: 12px; background: var(--w28q, var(--nx-blue)); color: var(--nx-on-blue); }
.nx-root .nx-lb-q--docs { --w28q: var(--nx-blue); }
.nx-root .nx-lb-q--knowhow { --w28q: var(--nx-success); }
.nx-root .nx-lb-q--training { --w28q: var(--nx-amber); }
.nx-root .nx-lb-q--new { --w28q: var(--nx-cyan); }
.nx-root .nx-lb-q--roadmap { --w28q: color-mix(in srgb, var(--nx-blue) 62%, var(--nx-danger)); }
.nx-root .nx-lb-q--help { --w28q: color-mix(in srgb, var(--nx-danger) 78%, var(--nx-blue)); }
.nx-root .nx-lb-q--guides { --w28q: color-mix(in srgb, var(--nx-success) 55%, var(--nx-blue)); }

/* community know-how: the cards of the lab (small pill, bold title, one meta line, three steps, small buttons at the bottom) */
.nx-root .nx-w16-grid { margin-top: var(--nx-s4); }
.nx-root .nx-w16-comm { gap: 10px; align-content: start; }
.nx-root .nx-w16-comm .nx-h3 { font-size: 18px; }
.nx-root .nx-lb-card { gap: 6px; padding: var(--nx-s4); box-shadow: var(--nx-shadow); }
.nx-root .nx-lb-card h3 { font-size: 16px; line-height: 1.3; }
.nx-root .nx-lb-card h3 .nx-link { color: var(--nx-text); font: inherit; font-weight: 800; text-decoration: none; min-height: var(--nx-tap); margin: -9px 0; }
.nx-root .nx-lb-card h3 .nx-link:hover { color: var(--nx-blue-text); }
.nx-root .nx-lb-card .nx-w16-steps { margin-top: 4px; padding-left: 18px; gap: 0; }
.nx-root .nx-lb-card .nx-small { margin: 0; }
.nx-root .nx-lb-card .nx-pill { font-size: 12px; padding: 1px 9px; }
.nx-root .nx-lb-card .nx-w16-hcard__acts { padding-top: 8px; gap: 6px; }
.nx-root .nx-lb-card .nx-btn { min-height: 34px; padding: 0 12px; font-size: 14px; }
.nx-root .nx-w16-more-links { padding-top: var(--nx-s1); }

/* My training and Latest updates: one card each, the rows of the lab */
.nx-root .nx-w16-block { padding: var(--nx-s4); gap: 6px; box-shadow: var(--nx-shadow); }
.nx-root .nx-w16-block .nx-h3 { font-size: 16px; }
.nx-root .nx-w16-block .nx-small { margin: 0; }
.nx-root .nx-w16-meter { height: 8px; margin: 4px 0; background: var(--nx-hover); border: 0; }
.nx-root .nx-w16-rows li { gap: 8px; padding: 8px 0; }
.nx-root .nx-w16-rows li.is-done .nx-w16-rows__t { color: var(--nx-muted); }
.nx-root .nx-w16-tick { width: 18px; height: 18px; font-size: 11px; border-width: 0; background: var(--nx-hover); }
.nx-root .nx-w16-tick.is-done { background: var(--nx-success); color: var(--nx-on-blue); }
.nx-root .nx-w16-safe { margin: var(--nx-s4) 0 0; }

/* the parts of the Library under its tab strip: the old page sits on the page itself, no second frame and no second big title */
.nx-root .nx-lb-sub .nx-tabs { margin-top: var(--nx-s3); }
.nx-root .nx-lb-sub .nx-old { background: transparent; border: 0; border-radius: 0; padding: var(--nx-s4) 0 0; min-height: 0; }
.nx-root .nx-lb-sub .nx-old .page-head { margin-bottom: var(--nx-s3); }
.nx-root .nx-lb-sub .nx-old .page-head h2, .nx-root .nx-lb-sub .nx-old .page-head h1 { font-size: 20px; line-height: 1.25; margin: 0; }
.nx-root .nx-lb-sub .nx-old .ant-card { border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); }

/* ================================================================ MAIL: the lab's three panes */
.nx-root .nx-ml-page { gap: var(--nx-s3); }
.nx-root .nx-ml-head { align-items: center; margin-top: 6px; gap: var(--nx-s1) var(--nx-s3); }
.nx-root .nx-ml-head__acts .nx-btn svg, .nx-root .nx-ml-tb__main svg { flex: none; }
.nx-root .nx-ml-head__acts .nx-btn { gap: 6px; }
.nx-root .nx-ml-caret { display: inline-flex; }
.nx-root .nx-ml-head__sub { margin-top: calc(-1 * var(--nx-s1)); }
.nx-root .nx-ml-ic { flex: none; }

/* coloured tiles: the picture of an assistant action, a tool or a file (the lab's tints as token mixes) */
.nx-root .nx-ml-tg { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 28%; background: var(--w28q, var(--nx-blue)); color: var(--nx-on-blue); }
.nx-root .nx-ml-tile--reply { --w28q: var(--nx-blue); }
.nx-root .nx-ml-tile--summary { --w28q: color-mix(in srgb, var(--nx-blue) 62%, var(--nx-danger)); }
.nx-root .nx-ml-tile--task { --w28q: var(--nx-success); }
.nx-root .nx-ml-tg--sig { --w28q: color-mix(in srgb, var(--nx-blue) 62%, var(--nx-danger)); }
.nx-root .nx-ml-tg--pa { --w28q: var(--nx-blue); }
.nx-root .nx-ml-tg--agent { --w28q: var(--nx-success); }
.nx-root .nx-ml-tg--mine { --w28q: color-mix(in srgb, var(--nx-cyan) 60%, var(--nx-blue)); }
.nx-root .nx-ml-tg--alert { --w28q: var(--nx-amber); }
.nx-root .nx-ml-tg--auto { --w28q: color-mix(in srgb, var(--nx-amber) 80%, var(--nx-danger)); }
.nx-root .nx-ml-tg--conf { --w28q: color-mix(in srgb, var(--nx-blue) 80%, var(--nx-danger)); }
.nx-root .nx-ml-tg--off { --w28q: color-mix(in srgb, var(--nx-danger) 78%, var(--nx-blue)); }
.nx-root .nx-ml-tg .nx-gl { --gls: 22; }

/* the mailbox tools: tiles, collapsed until Mailbox tools is pressed */
.nx-root .nx-ml-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: var(--nx-s3); }
.nx-root .nx-ml-tool { display: grid; gap: var(--nx-s2); align-content: start; justify-items: stretch; min-width: 0; }
.nx-root .nx-ml-tile.nx-ml-tile--tool { display: flex; flex-direction: row; align-items: center; gap: var(--nx-s3); width: 100%; min-height: 72px; padding: 14px; border: 1px solid var(--nx-line); border-radius: 18px; background: var(--nx-surface); color: var(--nx-text); font: inherit; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; box-shadow: var(--nx-shadow); }
.nx-root .nx-ml-tile--tool:hover { border-color: var(--nx-blue); }
.nx-root .nx-ml-tool__txt { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.nx-root .nx-ml-tool__txt small { color: var(--nx-muted); font-weight: 500; font-size: 12.5px; line-height: 1.35; }
.nx-root .nx-ml-tile--tool .nx-ml-tg { width: 44px; height: 44px; }
.nx-root .nx-ml-tile.nx-ml-tile--switch { position: relative; padding-right: 52px; }
.nx-root .nx-ml-tile--switch .nx-ml-switch { position: absolute; right: 14px; top: 14px; min-height: 0; padding: 0; border: 0; background: none; }
.nx-root .nx-ml-tile--danger .nx-ml-tool__txt b { color: var(--nx-bad-text); }
.nx-root .nx-ml-tool .nx-ml-conflist { padding: 0 var(--nx-s2); }

/* the panes: a fixed room with its own scrolling, like the lab */
.nx-root .nx-ml { grid-template-columns: 190px 340px minmax(0, 1fr); height: max(660px, calc(calc(100 * var(--ao-vh)) - 300px)); min-height: 520px; }
.nx-root .nx-ml > * { min-height: 0; overflow: auto; }
.nx-root .nx-ml-folders { gap: 2px; padding: 10px; background: color-mix(in srgb, var(--nx-bg) 55%, var(--nx-surface)); }
.nx-root .nx-ml-folder { min-height: 40px; padding: 0 10px; border-radius: 10px; gap: 8px; }
.nx-root .nx-ml-folder:hover { background: color-mix(in srgb, var(--nx-blue) 9%, transparent); }
.nx-root .nx-ml-folder[aria-current="true"] { background: color-mix(in srgb, var(--nx-blue) 16%, transparent); color: var(--nx-blue-text); box-shadow: none; }
.nx-root .nx-ml-fdot { flex: none; width: 10px; height: 10px; border-radius: 4px; background: var(--nx-muted); }
/* The folder list is a grid whose column was as wide as the longest folder name, so it spilled past its panel (cut-off counts, sideways scroll). One shrinkable column: long names shorten, the unread count always stays visible. */
.nx-root .nx-ml-folders { grid-template-columns: minmax(0, 1fr); min-width: 0; overflow-x: hidden; }
.nx-root .nx-ml-folder { min-width: 0; }
@media (min-width: 1400px) { .nx-root .nx-ml { grid-template-columns: 250px minmax(300px, 380px) minmax(0, 1fr); } }
.nx-root .nx-ml-fdot--inbox { background: var(--nx-blue); }
.nx-root .nx-ml-fdot--drafts { background: color-mix(in srgb, var(--nx-blue) 62%, var(--nx-danger)); }
.nx-root .nx-ml-fdot--sentitems { background: var(--nx-success); }
.nx-root .nx-ml-fdot--junkemail { background: var(--nx-amber); }
.nx-root .nx-ml-fdot--deleteditems { background: var(--nx-danger); }
.nx-root .nx-ml-conf { margin-top: var(--nx-s2); padding-top: 0; border-top: 0; }
.nx-root .nx-ml-conf > .nx-small { padding: 10px 10px 4px; font-size: 12.5px; }
.nx-root .nx-ml-folder--conf { min-height: 40px; }

/* the list: search and tabs on top, rows with an avatar */
.nx-root .nx-ml-list { overflow: hidden; }
.nx-root .nx-ml-list__bar { padding: 10px; gap: 8px; }
.nx-root .nx-ml-tabs { gap: var(--nx-s2); }
.nx-root .nx-ml-tabs .nx-chip { min-height: 36px; padding: 0 14px; }
.nx-root .nx-ml-sort .nx-select { min-height: 36px; }
.nx-root .nx-ml-search .nx-input, .nx-root .nx-ml-search .nx-btn { min-height: 40px; }
.nx-root .nx-ml-list__rows { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; }
.nx-root .nx-ml-row { position: relative; gap: 12px; min-height: 0; padding: 12px 14px; align-items: flex-start; }
.nx-root .nx-ml-row:hover { background: color-mix(in srgb, var(--nx-blue) 6%, transparent); }
.nx-root .nx-ml-row.is-on { background: color-mix(in srgb, var(--nx-blue) 13%, transparent); box-shadow: inset 3px 0 0 var(--nx-blue); }
.nx-root .nx-ml-row__dot { position: absolute; left: 4px; top: 24px; width: 7px; height: 7px; margin: 0; }
.nx-root .nx-ml-row__main { gap: 1px; }
.nx-root .nx-ml-row__top { align-items: baseline; }
.nx-root .nx-ml-row__who { flex: 1 1 auto; font-weight: 700; }
.nx-root .nx-ml-row__time { font-size: 12.5px; }
.nx-root .nx-ml-row__subj { font-weight: 500; }
.nx-root .nx-ml-row__prev { color: var(--nx-muted); }
.nx-root .nx-ml-row__marks { margin-top: 4px; }
.nx-root .nx-ml-av { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--w28q, var(--nx-blue)); color: var(--nx-on-blue); font-weight: 800; font-size: 14px; line-height: 1; }
.nx-root .nx-ml-av--lg { width: 44px; height: 44px; }
.nx-root .nx-ml-av--0 { --w28q: var(--nx-blue); }
.nx-root .nx-ml-av--1 { --w28q: var(--nx-success); }
.nx-root .nx-ml-av--2 { --w28q: var(--nx-amber); }
.nx-root .nx-ml-av--3 { --w28q: color-mix(in srgb, var(--nx-blue) 62%, var(--nx-danger)); }
.nx-root .nx-ml-av--4 { --w28q: color-mix(in srgb, var(--nx-cyan) 60%, var(--nx-blue)); }
.nx-root .nx-ml-av--5 { --w28q: color-mix(in srgb, var(--nx-danger) 78%, var(--nx-blue)); }

/* the reading pane: head with the sender, an icon toolbar, the text, files, the assistant */
.nx-root .nx-ml-read { display: flex; flex-direction: column; padding: 0; }
.nx-root .nx-ml-read > .nx-ml-compose, .nx-root .nx-ml-read > .nx-ml-pad, .nx-root .nx-ml-read > .nx-state, .nx-root .nx-ml-read > .nx-empty { margin: var(--nx-s5); }
.nx-root .nx-ml-msg { gap: 14px; padding-bottom: var(--nx-s4); }
.nx-root .nx-ml-msg > :not(.nx-ml-msg__head) { margin-inline: 18px; }
.nx-root .nx-ml-msg__head { gap: var(--nx-s2); padding: 14px 18px; border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-ml-msg__who { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.nx-root .nx-ml-msg__txt { min-width: 0; flex: 1 1 auto; }
.nx-root .nx-ml-msg__subj { font-size: 20px; line-height: 1.25; }
.nx-root .nx-ml-msg__from { margin: 2px 0 0; }
.nx-root .nx-ml-msg__to { margin: 0; }
.nx-root .nx-ml-tb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: var(--nx-s1); }
.nx-root .nx-ml-tb__main { gap: 6px; margin-right: var(--nx-s1); }
.nx-root .nx-ml-ib { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--nx-line); border-radius: 12px; background: var(--nx-surface); color: var(--nx-muted); cursor: pointer; }
.nx-root .nx-ml-ib:hover { background: color-mix(in srgb, var(--nx-blue) 10%, transparent); color: var(--nx-text); }
.nx-root .nx-ml-ib--del:hover { color: var(--nx-bad-text); }
.nx-root .nx-ml-ib[aria-pressed="true"], .nx-root .nx-ml-ib[aria-expanded="true"] { background: var(--nx-blue-soft); color: var(--nx-blue-text); border-color: var(--nx-blue); }
.nx-root .nx-ml-ib[disabled] { opacity: .5; cursor: default; }
.nx-root .nx-ml-body { border: 0; border-radius: 0; font-size: 15.5px; line-height: 1.65; }
.nx-root .nx-ml-acts--more { padding: 0; }

.nx-root .nx-ml-atts { gap: var(--nx-s2); }
.nx-root .nx-ml-atts__list { max-width: 520px; }
.nx-root .nx-ml-att { gap: 12px; padding: 12px 14px; border-radius: 14px; box-shadow: var(--nx-shadow); flex-wrap: nowrap; }
.nx-root .nx-ml-att__name { display: grid; gap: 2px; flex: 1 1 140px; }
.nx-root .nx-ml-att__acts { flex: none; flex-wrap: wrap; justify-content: flex-end; }
.nx-root .nx-ml-att__acts .nx-btn { min-height: 34px; padding: 0 12px; font-size: 14px; }
.nx-root .nx-ml-ext { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--nx-blue); color: var(--nx-on-blue); font-weight: 800; font-size: 11px; letter-spacing: .02em; }
.nx-root .nx-ml-ext--pdf { background: var(--nx-danger); }
.nx-root .nx-ml-ext--sheet { background: var(--nx-success); }
.nx-root .nx-ml-ext--doc { background: var(--nx-blue); }
.nx-root .nx-ml-ext--file { background: color-mix(in srgb, var(--nx-blue) 80%, var(--nx-danger)); }

/* the assistant: three tiles, then the preview card the tile opens */
.nx-root .nx-ml-as { padding: 0; border: 0; background: none; gap: var(--nx-s2); }
.nx-root .nx-ml-as__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nx-root .nx-ml-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 14px; border: 1.5px solid var(--nx-line); border-radius: 18px; background: var(--nx-surface); color: var(--nx-text); font: inherit; text-align: left; cursor: pointer; }
.nx-root .nx-ml-tile:hover { border-color: var(--nx-blue); }
.nx-root .nx-ml-tile[aria-pressed="true"] { border-color: var(--nx-blue); background: var(--nx-blue-soft); }
.nx-root .nx-ml-tile b { font-size: 15px; overflow-wrap: anywhere; }
.nx-root .nx-ml-tile small { color: var(--nx-muted); font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
.nx-root .nx-ml-as .nx-confirm { border: 1.5px solid color-mix(in srgb, var(--nx-blue) 35%, var(--nx-line)); border-radius: 14px; background: color-mix(in srgb, var(--nx-blue) 5%, var(--nx-surface)); }
.nx-root .nx-ml-as > p.nx-small { margin: 0; }

/* nothing chosen yet: the envelope of the lab */
.nx-root .nx-ml-em { display: grid; place-items: center; align-content: center; gap: 4px; text-align: center; min-height: 100%; padding: 50px 16px; color: var(--nx-muted); }
.nx-root .nx-ml-em .nx-empty__title { color: var(--nx-text); font-size: 18px; font-weight: 800; }
.nx-root .nx-ml-env { position: relative; width: 110px; height: 76px; margin: 0 auto 16px; border-radius: 14px; background: var(--nx-pill); box-shadow: inset 0 2px 1px color-mix(in srgb, var(--nx-pill-text) 50%, transparent), inset 0 -8px 14px color-mix(in srgb, var(--nx-text) 20%, transparent), 0 24px 30px -14px var(--nx-blue); transform: perspective(500px) rotateX(18deg) rotateY(-14deg); }
.nx-root .nx-ml-env::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 42px; background: linear-gradient(160deg, color-mix(in srgb, var(--nx-pill-text) 40%, transparent), transparent); clip-path: polygon(0 0, 50% 100%, 100% 0); }

.nx-root .nx-ml-safe { margin: 0; padding: var(--nx-s1) var(--nx-s3); }

/* the connect card, with the same head as the inbox */
.nx-root .nx-ml-page > .nx-h1 { margin: 6px 0 0; }
.nx-root .nx-ml-page > .nx-h1 + .nx-sub { margin: calc(-1 * var(--nx-s2)) 0 0; }
.nx-root .nx-ml-connect { padding: var(--nx-s5); box-shadow: var(--nx-shadow); }
.nx-root .nx-ml-connect__head { display: flex; align-items: center; gap: var(--nx-s3); }

@media (max-width: 1100px) {
  .nx-root .nx-w16-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nx-root .nx-w16-quick:has(> :nth-child(7)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nx-root .nx-ml { grid-template-columns: 160px 300px minmax(0, 1fr); }
  .nx-root .nx-ml-read { padding: 0; }
}
@media (max-width: 860px) {
  .nx-root .nx-ml { height: auto; min-height: 0; }
  .nx-root .nx-ml > * { overflow: visible; }
  .nx-root .nx-ml-list { overflow: visible; }
  .nx-root .nx-ml-list__rows { overflow: visible; }
  .nx-root .nx-ml-read { padding: 0; }
  .nx-root .nx-ml > .nx-ml-read { display: none; }
  .nx-root .nx-ml[data-v="msg"] > .nx-ml-read { display: flex; }
  .nx-root .nx-ml-as__row { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-ml-tools { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-ml-tile--tool { min-height: 64px; padding: 10px; }
  .nx-root .nx-ml-tabs .nx-chip, .nx-root .nx-ml-sort .nx-select, .nx-root .nx-ml-att__acts .nx-btn { min-height: var(--nx-tap); }
  .nx-root .nx-ml-att { flex-wrap: wrap; }
  .nx-root .nx-ml-tb__main { flex: 1 1 100%; justify-content: center; margin-right: 0; }
  .nx-root .nx-ml-ib { flex: 1 1 0; width: auto; min-width: var(--nx-tap); }
  .nx-root .nx-ml-head__acts .nx-btn { padding: 0 10px; font-size: 14px; }
  .nx-root .nx-ml-msg__subj { font-size: 18px; }
  .nx-root .nx-w16-quick, .nx-root .nx-w16-quick:has(> :nth-child(7)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-root .nx-w16-welcome { padding: 18px; }
  .nx-root .nx-w16-welcome h2 { font-size: 21px; }
  .nx-root .nx-lb-card .nx-btn { min-height: var(--nx-tap); }
  .nx-root .nx-lb-head__acts { margin-left: 0; width: 100%; }
  .nx-root .nx-lb-head__acts .nx-btn { flex: 1 1 100%; }
  .nx-root .nx-lb-search { flex-basis: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-w16-qcard:hover { transform: translateY(-3px); box-shadow: var(--nx-lift); }
  .nx-root .nx-ml-tile, .nx-root .nx-ml-tile--tool, .nx-root .nx-ml-ib { transition: transform var(--nx-d2) var(--nx-curve), box-shadow var(--nx-d2), border-color var(--nx-d2), background var(--nx-d1), color var(--nx-d1); }
  .nx-root .nx-ml-tile:hover, .nx-root .nx-ml-tile--tool:hover { transform: translateY(-3px); box-shadow: var(--nx-lift); }
  .nx-root .nx-ml-ib:active { transform: scale(.92); }
  .nx-root .nx-ml-env { animation: nx-ml-float 5s ease-in-out infinite; }
  @keyframes nx-ml-float { 50% { transform: perspective(500px) rotateX(18deg) rotateY(-14deg) translateY(-8px); } }
}

/* ================================================================ SIMPLE (pp-libmail2, 22 Oct): fewer things on the page
   Library: a search, four tiles, a card only for a person who has not started training, one "More" line. Mail: the mail, New email, Refresh and one "..." menu. */
.nx-root .nx-lb-backrow { margin: 0; }
.nx-root .nx-lb-backrow .nx-link { display: inline-flex; align-items: center; min-height: var(--nx-tap); font-weight: 700; }
.nx-root .nx-lb-bar { margin-top: var(--nx-s4); }
.nx-root .nx-lb-page > .nx-w16-quick { margin-top: var(--nx-s5); }
.nx-root .nx-lb-start { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s3) var(--nx-s4); margin-top: var(--nx-s4); padding: var(--nx-s4) var(--nx-s5); }
.nx-root .nx-lb-start .nx-h3 { margin: 0 0 2px; font-size: 16px; }
.nx-root .nx-lb-start p { margin: 0; max-width: 62ch; }
.nx-root .nx-lb-more { margin-top: var(--nx-s4); }
.nx-root .nx-lb-more > summary { display: inline-flex; align-items: center; min-height: var(--nx-tap); cursor: pointer; font-weight: 700; color: var(--nx-link); }
.nx-root .nx-lb-more__links { display: flex; flex-wrap: wrap; gap: 0 var(--nx-s5); padding: 0 0 var(--nx-s2); }
.nx-root .nx-lb-more__links .nx-link { display: inline-flex; align-items: center; min-height: var(--nx-tap); }
.nx-root .nx-w16-quick .nx-w16-qcard { min-height: 112px; }
.nx-root .nx-w16-qcard b { font-size: 17px; }
.nx-root .nx-w16-qico { width: 44px; height: 44px; }
/* Mail, simple: the "..." menu holds every mailbox action (it was the Mailbox tools row of tiles); folders and filters fold up */
.nx-root .nx-ml-head, .nx-root .nx-ml-head__acts { position: relative; }
.nx-root .nx-ml-dots { width: var(--nx-tap); padding: 0; justify-content: center; }
.nx-root .nx-ml-tools { position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); width: min(400px, calc(calc(100 * var(--ao-vw)) - 32px)); max-height: min(calc(70 * var(--ao-vh)), 640px); overflow: auto; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: var(--nx-s2); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); box-shadow: var(--nx-lift); }
.nx-root .nx-ml-tools .nx-ml-tile.nx-ml-tile--tool { min-height: 0; padding: 10px; border: 0; border-radius: var(--nx-r1); box-shadow: none; background: none; }
.nx-root .nx-ml-tools .nx-ml-tile.nx-ml-tile--tool:hover { background: var(--nx-hover); }
.nx-root .nx-ml-tools .nx-ml-tile--tool .nx-ml-tg { width: 36px; height: 36px; }
.nx-root .nx-ml-tools .nx-ml-tool__txt small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.nx-root .nx-ml-tools .nx-ml-tool:has(.nx-ml-conflist) { background: var(--nx-bg); border-radius: var(--nx-r1); padding-bottom: var(--nx-s2); }
.nx-root .nx-ml-morefolders > summary, .nx-root .nx-ml-filters > summary { display: flex; align-items: center; min-height: 40px; padding: 0 10px; cursor: pointer; font-weight: 600; color: var(--nx-link); border-radius: 10px; }
.nx-root .nx-ml-morefolders { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 2px; }   /* CR-READY: the folders under More folders also shorten their long names and keep the unread count in view (CR-007 fixed only the first group) */
.nx-root .nx-ml-filters__body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); padding: var(--nx-s1) 0; }
.nx-root .nx-ml-filters > summary { padding: 0 var(--nx-s2); }
.nx-root .nx-ml-tb { gap: var(--nx-s2); }
.nx-root .nx-ml-msg__head { gap: var(--nx-s2); }
@media (max-width: 860px) {
  .nx-root .nx-ml-tb__main { flex: 1 1 0; }
  .nx-root .nx-ml-ib { flex: 0 0 auto; width: var(--nx-tap); }
  .nx-root .nx-ml-morefolders > summary, .nx-root .nx-ml-filters > summary { min-height: var(--nx-tap); }
}
/* the assistant under a message: three quiet buttons in one row (the main action is Draft reply above; these hand the mail to your own assistant) */
.nx-root .nx-ml-as__row { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-ml-as__row .nx-ml-tile { flex-direction: row; align-items: center; gap: var(--nx-s2); padding: 0 var(--nx-s4); min-height: 40px; border-width: 1px; border-radius: var(--nx-rfull); }
.nx-root .nx-ml-as__row .nx-ml-tile .nx-ml-tg, .nx-root .nx-ml-as__row .nx-ml-tile small { display: none; }
.nx-root .nx-ml-as__row .nx-ml-tile b { font-size: 14px; }
/* Mail, parity audit 28 Oct 2026: the daily actions are one row, every folder is listed, and the three panes fit the window (nx-mail.jsx) */
.nx-root .nx-ml-tb--row { margin-top: var(--nx-s2); }
.nx-root .nx-ml-folder--junk .nx-count { background: var(--nx-hover); color: var(--nx-muted); }
.nx-root .nx-ml { height: max(420px, calc(calc(100 * var(--ao-dvh)) - 256px)); min-height: 420px; }
.nx-root:has(.nx-ml) .content-inner { padding-bottom: var(--nx-s3); }
/* a window between a phone and a wide laptop: the folders become one row above the list and the message, so the message keeps its width */
@media (min-width: 861px) and (max-width: 1280px) {
  .nx-root .nx-ml { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .nx-root .nx-ml-folders { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--nx-s1); padding: 6px 10px; border-right: 0; border-bottom: 1px solid var(--nx-line); overflow: visible; }
  .nx-root .nx-ml-folder { width: auto; min-height: 36px; }
  .nx-root .nx-ml-conf { margin-top: 0; padding-top: 0; border-top: 0; display: flex; align-items: center; }
  .nx-root .nx-ml-conf__note { display: none; }
}
@media (max-width: 860px) { .nx-root .nx-ml { height: auto; min-height: 0; } .nx-root .nx-ml-tb--row .nx-btn { flex: 1 1 auto; } }

/* Mail header, redesigned (29 Oct 2026, nx-mail.jsx). ONE row of about 72 px: a tile with depth, Mail, the unread pill, the account in small grey, New email, Refresh and the ... tools. The four permission boxes
   and the line about the assistant that were in the header are tiles under the ... tools and a small i. Folders get a small tile each. Tokens only, every rule under .nx-root; motion only when it is allowed. */
.nx-root .nx-ml-head--bar { position: relative; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: var(--nx-s3); min-height: 72px; margin: 0; padding: var(--nx-s2) var(--nx-s4); border: 1px solid var(--nx-line); border-radius: var(--nx-r2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--nx-surface) 90%, var(--nx-on-blue)), var(--nx-surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nx-on-blue) 55%, transparent), 0 1px 2px color-mix(in srgb, var(--nx-text) 10%, transparent), 0 10px 20px -14px color-mix(in srgb, var(--nx-text) 45%, transparent); }
.nx-root .nx-ml-logo { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--nx-on-blue);
  background: linear-gradient(145deg, color-mix(in srgb, var(--nx-blue) 68%, var(--nx-on-blue)), var(--nx-blue) 52%, color-mix(in srgb, var(--nx-blue) 70%, var(--nx-danger)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nx-on-blue) 55%, transparent), inset 0 -5px 8px color-mix(in srgb, var(--nx-text) 22%, transparent), 0 8px 14px -6px color-mix(in srgb, var(--nx-blue) 60%, transparent), 0 2px 3px color-mix(in srgb, var(--nx-text) 22%, transparent); }
.nx-root .nx-ml-logo .nx-ml-ic { filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--nx-text) 35%, transparent)); }
.nx-root .nx-ml-head__id { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.nx-root .nx-ml-head__line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-ml-head--bar .nx-h1 { margin: 0; font-size: 22px; line-height: 1.2; display: inline-flex; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-ml-head__mail { display: flex; align-items: center; gap: 2px; min-width: 0; margin: 0; color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-ml-head__mail > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-ml-info, .nx-root .nx-ml-tool__i { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--nx-rfull); background: transparent; color: var(--nx-muted); cursor: pointer; }
.nx-root .nx-ml-info:hover, .nx-root .nx-ml-tool__i:hover, .nx-root .nx-ml-info[aria-expanded="true"], .nx-root .nx-ml-tool__i[aria-expanded="true"] { background: var(--nx-hover); color: var(--nx-text); }
.nx-root .nx-ml-about { margin: 0; padding: var(--nx-s2) var(--nx-s4); border: 1px solid var(--nx-line); border-radius: var(--nx-r1); background: var(--nx-surface); color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-ml-head--bar .nx-ml-head__acts { flex: none; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--nx-s2); width: auto; }
.nx-root .nx-ml-head--bar .nx-ml-head__acts .nx-btn { flex: none; }
.nx-root .nx-ml-icb { display: inline-grid; place-items: center; width: var(--nx-tap); padding: 0; }
.nx-root .nx-ml-page { gap: var(--nx-s3); }
/* the tools: a picture tile with depth, a short title, ONE line; the whole text is behind the i beside it */
.nx-root .nx-ml-tool { position: relative; }
.nx-root .nx-ml-tool__i { position: absolute; right: 8px; bottom: 8px; width: 24px; height: 24px; }
.nx-root .nx-ml-tool__more { margin: 0; padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r1); background: var(--nx-bg); color: var(--nx-muted); overflow-wrap: anywhere; }
.nx-root .nx-ml-tile--tool .nx-ml-tg { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nx-on-blue) 50%, transparent), inset 0 -4px 6px color-mix(in srgb, var(--nx-text) 20%, transparent), 0 6px 10px -5px color-mix(in srgb, var(--w28q, var(--nx-blue)) 60%, transparent); background-image: linear-gradient(150deg, color-mix(in srgb, var(--w28q, var(--nx-blue)) 70%, var(--nx-on-blue)), var(--w28q, var(--nx-blue))); }
.nx-root .nx-ml-tg--perm { --w28q: var(--nx-amber); }
.nx-root .nx-ml-tile.nx-ml-tile--tool { min-height: 64px; padding-right: 36px; }
.nx-root .nx-ml-tool__txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the folders: a small tile with depth, one tint and one drawing each, and the unread count beside it */
.nx-root .nx-ml-ftile { --ft: var(--nx-muted); flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--nx-on-blue);
  background: linear-gradient(150deg, color-mix(in srgb, var(--ft) 72%, var(--nx-on-blue)), var(--ft));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nx-on-blue) 50%, transparent), inset 0 -3px 4px color-mix(in srgb, var(--nx-text) 20%, transparent), 0 3px 5px -2px color-mix(in srgb, var(--ft) 55%, transparent); }
.nx-root .nx-ml-ftile .nx-ml-ic { width: 15px; height: 15px; }
.nx-root .nx-ml-ftile--inbox { --ft: var(--nx-blue); }
.nx-root .nx-ml-ftile--drafts { --ft: color-mix(in srgb, var(--nx-blue) 62%, var(--nx-danger)); }
.nx-root .nx-ml-ftile--sentitems { --ft: var(--nx-success); }
.nx-root .nx-ml-ftile--archive { --ft: color-mix(in srgb, var(--nx-blue) 55%, var(--nx-muted)); }
.nx-root .nx-ml-ftile--junkemail { --ft: var(--nx-amber); }
.nx-root .nx-ml-ftile--deleteditems { --ft: var(--nx-danger); }
.nx-root .nx-ml-ftile--lock { --ft: color-mix(in srgb, var(--nx-blue) 80%, var(--nx-danger)); }
.nx-root .nx-ml-ftile .nx-gl { --gls: 14; }
.nx-root .nx-ml-folder__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.nx-root .nx-ml-em .nx-btn { margin-top: var(--nx-s3); }
/* the private offices and Full screen share one row (they were two rows of their own); everything else spans the width */
.nx-root .nx-ml-wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.nx-root .nx-ml-wrap > .nx-mailoffices { grid-column: 1; grid-row: 1; }
.nx-root .nx-ml-wrap > .nx-ml-fullbtn { grid-column: 2; grid-row: 1; }
.nx-root .nx-ml-wrap > :not(.nx-mailoffices):not(.nx-ml-fullbtn) { grid-column: 1 / -1; }
.nx-root .nx-ml-wrap.is-full .nx-ml { height: max(420px, calc(calc(100 * var(--ao-dvh)) - 170px)); }
@media (max-width: 860px) {
  .nx-root .nx-ml-head--bar .nx-btn { min-height: 40px; }
  .nx-root .nx-ml-icb { width: 40px; }
  .nx-root .nx-ml-info { width: 40px; height: 40px; margin: -10px 0; }
  .nx-root .nx-ml-tool__i { width: 40px; height: 40px; right: 0; bottom: 0; }
  .nx-root .nx-ml-head--bar .nx-guide-btn { min-width: 40px; min-height: 40px; }
}
@media (max-width: 640px) {
  .nx-root .nx-ml-head--bar { flex-wrap: wrap; padding: var(--nx-s2) var(--nx-s3); gap: var(--nx-s2) var(--nx-s3); }
  .nx-root .nx-ml-head--bar .nx-ml-head__id { flex: 1 1 calc(100% - 64px); }
  .nx-root .nx-ml-head--bar .nx-ml-head__acts { flex: 1 1 100%; }
  .nx-root .nx-ml-head--bar .nx-ml-head__acts .nx-btn[data-guide] { flex: 1 1 auto; }
  .nx-root .nx-ml-head--bar .nx-h1 { font-size: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-ml-logo { transition: transform var(--nx-d2) var(--nx-curve), box-shadow var(--nx-d2); }
  .nx-root .nx-ml-head--bar:hover .nx-ml-logo { transform: translateY(-2px) rotate(-3deg); }
  .nx-root .nx-ml-icb.is-spin .nx-ml-ic { animation: nx-ml-spin .9s linear infinite; }
  .nx-root .nx-ml-em .nx-ml-env { animation: nx-ml-float 4s ease-in-out infinite; }
  .nx-root .nx-ml-about, .nx-root .nx-ml-tool__more { animation: nx-ml-in var(--nx-d2) var(--nx-curve); }
}
@keyframes nx-ml-spin { to { transform: rotate(360deg); } }
@keyframes nx-ml-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes nx-ml-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* PAGE PORT, ADMIN builder (22 Oct 2026; Sheraz: "proper push your UI UX changes"): the Admin, My profile, Help and Home pages drawn like the LAB pages
   (ui-redesign-2026-10-21/DCC-Agent-Office-new-UI-full.html). Shipped BEFORE nx-w11.css, which stays the last stylesheet (qa-2026-10-21-nx-resp.test.js).
   Every rule starts with .nx-root and takes only --nx-* tokens (qa-2026-10-21-nx-css-scoped, qa-2026-10-21-nx-themes). Admin rules are scoped to .nx-adm (the wrapper nx-admin.jsx draws inside the page),
   profile rules to .nx-pf29, help rules to .nx-hp29, so no other page is restyled. Phone first: nothing is wider than the screen, every tap target is 40 px. */

/* ---------------------------------------------------------------- 1. ADMIN page frame: the Ask box first, then "Admin" and its one line on ONE row, then the section tabs (the lab's order) */
.nx-root .nx-page:has(> .nx-adm) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--nx-s3); align-items: baseline; align-content: start; }
.nx-root .nx-page:has(> .nx-adm) > .nx-topask { order: -1; grid-column: 1 / -1; min-width: 0; }
.nx-root .nx-page:has(> .nx-adm) > .nx-h1 { order: 0; grid-column: 1; }
.nx-root .nx-page:has(> .nx-adm) > .nx-sub { order: 1; grid-column: 2; margin: 0; min-width: 0; }
.nx-root .nx-page:has(> .nx-adm) > .nx-adm { order: 2; grid-column: 1 / -1; min-width: 0; }

/* ---------------------------------------------------------------- 2. the section tabs: one underline row, the count a small amber badge */
.nx-root .nx-adm > .nx-tabs { margin: var(--nx-s3) 0 var(--nx-s3); gap: 2px; }
.nx-root .nx-adm > .nx-tabs .nx-tab { font-weight: 600; }
.nx-root .nx-adm > .nx-tabs .nx-tab[aria-current="page"] { font-weight: 700; color: var(--nx-text); }
.nx-root .nx-adm > .nx-tabs .nx-count { margin-left: 6px; background: var(--nx-badge-bg, var(--nx-amber)); color: var(--nx-badge-text, var(--nx-text)); border-radius: var(--nx-rfull); padding: 0 7px; font-size: 12px; font-weight: 800; line-height: 18px; min-width: 18px; text-align: center; display: inline-block; }

/* ---------------------------------------------------------------- 3. Approvals: the sub tabs are underline tabs too, the glance is one quiet line, the queue and the request sit side by side */
.nx-root .nx-adm .nx-w14-tabsrow { margin: 0 0 var(--nx-s3); border-bottom: 1px solid var(--nx-line); display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s4); flex-wrap: wrap; }
.nx-root .nx-adm .nx-w14-tabs { gap: 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nx-root .nx-adm .nx-w14-tabs .nx-chip { background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; box-shadow: none; padding: 9px 14px; min-height: 40px; font-weight: 600; color: var(--nx-muted); white-space: nowrap; }
.nx-root .nx-adm .nx-w14-tabs .nx-chip[aria-pressed="true"] { background: none; color: var(--nx-text); border-bottom-color: var(--nx-blue); font-weight: 700; }
.nx-root .nx-adm .nx-w14-tabs .nx-chip b { margin-left: 6px; background: var(--nx-badge-bg, var(--nx-amber)); color: var(--nx-badge-text, var(--nx-text)); border-radius: var(--nx-rfull); padding: 0 7px; font-size: 12px; line-height: 18px; }
.nx-root .nx-adm .nx-adm-glance { display: flex; flex-wrap: wrap; gap: var(--nx-s2) var(--nx-s4); margin: 0; font-size: var(--nx-fs-small); color: var(--nx-muted); min-width: 0; }
.nx-root .nx-adm .nx-adm-glance b { color: var(--nx-text); font-weight: 800; }
.nx-root .nx-adm .nx-adm-glance.is-detail, .nx-root .nx-adm .nx-adm-intro.is-detail { display: none; }
.nx-root .nx-adm .nx-w14-ws { grid-template-columns: 360px minmax(0, 1fr); gap: var(--nx-s4); }
@media (max-width: 1100px) { .nx-root .nx-adm .nx-w14-ws { grid-template-columns: 300px minmax(0, 1fr); } }
.nx-root .nx-adm .nx-w14-queue { gap: var(--nx-s2); }
.nx-root .nx-adm .nx-w14-queue__bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.nx-root .nx-adm .nx-w14-queue__bar .nx-input { grid-column: 1 / -1; }
.nx-root .nx-adm .nx-w14-queue__bar .nx-select:only-of-type { grid-column: 1 / -1; }
.nx-root .nx-adm .nx-w14-q { border-radius: var(--nx-r2); }
.nx-root .nx-adm .nx-w14-q__it { display: flex; gap: 10px; padding: 12px 14px; align-items: flex-start; }
.nx-root .nx-adm .nx-w14-q__it b { font-weight: 700; }
.nx-root .nx-adm .nx-w14-q__it small { display: block; color: var(--nx-muted); }
.nx-root .nx-adm .nx-w14-q__it[aria-current="true"] { background: color-mix(in srgb, var(--nx-blue) 14%, transparent); box-shadow: inset 3px 0 0 var(--nx-blue); }
.nx-root .nx-adm .nx-w14-pane { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); padding: 18px 20px; min-width: 0; }
.nx-root .nx-adm .nx-adm-qx { display: grid; gap: 6px; padding: 12px 14px; }
.nx-root .nx-adm .nx-adm-qx__t { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.nx-root .nx-adm .nx-adm-qx small { color: var(--nx-muted); display: block; }
.nx-root .nx-adm .nx-adm-qx__a { display: flex; gap: var(--nx-s2); flex-wrap: wrap; }

/* the request */
.nx-root .nx-adm .nx-w14-req { gap: var(--nx-s3); }
.nx-root .nx-adm .nx-w14-head { align-items: flex-start; }
.nx-root .nx-adm .nx-w14-head__title { font-size: 20px; margin: 4px 0 0; }
.nx-root .nx-adm .nx-w14-wch { border: 1.5px solid var(--nx-line); border-radius: 14px; overflow: hidden; margin: 0; }
.nx-root .nx-adm .nx-w14-wch__h { padding: 8px 14px; background: color-mix(in srgb, var(--nx-blue) 8%, var(--nx-surface)); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.nx-root .nx-adm .nx-w14-wch__h .nx-h3 { font-size: 13.5px; font-weight: 800; margin: 0; }
.nx-root .nx-adm .nx-w14-sec > .nx-h3 { font-size: 15px; }

/* the folds: the parts of a request read when needed (a native details row, no script) */
.nx-root .nx-adm .nx-adm-fold { border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); }
.nx-root .nx-adm .nx-adm-fold > summary { display: flex; align-items: center; gap: var(--nx-s3); padding: 12px 16px; min-height: 44px; cursor: pointer; font-weight: 700; list-style: none; }
.nx-root .nx-adm .nx-adm-fold > summary::-webkit-details-marker { display: none; }
.nx-root .nx-adm .nx-adm-fold > summary::after { content: '+'; margin-left: auto; font-weight: 600; color: var(--nx-muted); }
.nx-root .nx-adm .nx-adm-fold[open] > summary::after { content: '\2212'; }
.nx-root .nx-adm .nx-adm-fold__b { padding: 0 16px 16px; display: grid; gap: var(--nx-s3); }

/* the request reads like the lab's one card: sections are flat, not boxes inside the box; the decision is one row (reason, Ask for changes, Decline, Approve) with a rule above it */
.nx-root .nx-adm .nx-w14-pane .nx-w14-sec { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.nx-root .nx-adm .nx-w14-pane .nx-w14-sec.nx-w14-decide { border-top: 1px solid var(--nx-line); padding-top: var(--nx-s4); margin-top: var(--nx-s1); }
.nx-root .nx-adm .nx-w14-pane .nx-w14-sec.nx-w14-who, .nx-root .nx-adm .nx-w14-pane .nx-w14-sec[aria-labelledby="nx-w14-hist"] { border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: 12px 16px; }
.nx-root .nx-adm .nx-w14-defs { grid-template-columns: minmax(96px, 130px) minmax(0, 1fr); gap: 4px var(--nx-s3); font-size: 14px; }
.nx-root .nx-adm .nx-w14-defs dt { font-weight: 500; font-size: 13.5px; }
.nx-root .nx-adm .nx-w14-next { background: none; padding: 0; color: var(--nx-muted); font-size: var(--nx-fs-small); }
@media (min-width: 861px) {
  .nx-root .nx-adm .nx-w14-decbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); }
  .nx-root .nx-adm .nx-w14-decbar .nx-w14-notelabel { flex: 0 0 100%; font-size: var(--nx-fs-small); color: var(--nx-muted); }
  .nx-root .nx-adm .nx-w14-decbar .nx-textarea { flex: 1 1 240px; min-height: 44px; height: 44px; min-width: 0; resize: vertical; }
  .nx-root .nx-adm .nx-w14-decbar .nx-approval__actions { display: flex; gap: var(--nx-s2); flex-wrap: nowrap; margin: 0; }
  .nx-root .nx-adm .nx-w14-decbar > .nx-small { flex: 0 0 100%; margin: 0; }
}

/* ---------------------------------------------------------------- 4. People, Departments and every Admin table: the lab's one flat table (rows about 64 px, the name in bold with its line under it, the row buttons under one More) */
.nx-root .nx-adm .nx-w14-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s3); border-bottom: 1px solid var(--nx-line); margin: 0 0 var(--nx-s3); }
.nx-root .nx-adm .nx-w14-bar .nx-w14-tabs { border: 0; }
.nx-root .nx-adm .nx-w14-bar .nx-approval__actions { display: flex; gap: var(--nx-s2); flex-wrap: wrap; padding-bottom: var(--nx-s2); }
.nx-root .nx-adm .nx-tbl__bar { gap: var(--nx-s2); align-items: center; flex-wrap: wrap; }
.nx-root .nx-adm .nx-tbl__search { max-width: 300px; }
.nx-root .nx-adm .nx-adm-filt { display: inline-flex; gap: var(--nx-s2); flex-wrap: wrap; align-items: center; }
.nx-root .nx-adm .nx-adm-filt .nx-select { width: auto; min-width: 150px; }
.nx-root .nx-adm .nx-tbl__fold { margin: 0; }
.nx-root .nx-adm .nx-tbl__fold[open] { order: 9; flex: 0 0 100%; }
.nx-root .nx-adm .nx-tbl__fold > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--nx-s3); border: 1px solid var(--nx-control-line); border-radius: var(--nx-rfull); background: var(--nx-surface); font-weight: 600; list-style: none; }
.nx-root .nx-adm .nx-tbl__fold > summary::-webkit-details-marker { display: none; }
.nx-root .nx-adm .nx-tbl__fold > summary::after { content: '\25BE'; font-size: 11px; color: var(--nx-muted); }
.nx-root .nx-adm .nx-tbl__fold[open] > summary::after { content: '\25B4'; }
.nx-root .nx-adm .nx-tbl__fold > summary b { background: var(--nx-blue); color: var(--nx-on-blue); border-radius: var(--nx-rfull); padding: 0 7px; font-size: 12px; line-height: 18px; }
.nx-root .nx-adm .nx-tbl__fold[open] > summary { margin-bottom: var(--nx-s2); }
.nx-root .nx-adm .nx-tbl__table th, .nx-root .nx-adm .nx-tbl__table td { padding: 10px 14px; }
.nx-root .nx-adm .nx-tbl__row { cursor: default; }
.nx-root .nx-adm .nx-adm-intro { margin: var(--nx-s3) 0 0; color: var(--nx-muted); }

/* Roles: the lab's role cards (the name, how many people, one line, four round initials) over one flat matrix */
.nx-root .nx-adm .nx-adm-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nx-s4); margin: 0 0 var(--nx-s4); }
.nx-root .nx-adm .nx-adm-role { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); padding: 18px 20px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.nx-root .nx-adm .nx-adm-role__h { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s3); }
.nx-root .nx-adm .nx-adm-role__h .nx-h3 { margin: 0; font-size: 17px; }
.nx-root .nx-adm .nx-adm-role__n { background: var(--nx-hover); color: var(--nx-muted); border-radius: var(--nx-rfull); padding: 2px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.nx-root .nx-adm .nx-adm-role__b { margin: 0; color: var(--nx-muted); font-size: 14px; }
.nx-root .nx-adm .nx-adm-role__av { display: flex; gap: 10px; margin-top: 6px; }
.nx-root .nx-adm .nx-adm-role__a { width: 28px; height: 28px; font-size: 12px; }
.nx-root .nx-adm .nx-w14-matrix { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); overflow: hidden; }
.nx-root .nx-adm .nx-w14-mx__h { padding: 14px 16px 0; font-size: 16px; }
.nx-root .nx-adm .nx-w14-mx__what { background: none; font-weight: 500; }
@media (max-width: 1100px) { .nx-root .nx-adm .nx-adm-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .nx-root .nx-adm .nx-adm-roles { grid-template-columns: minmax(0, 1fr); } }

/* the second row of every Admin section (Systems, Platform, Approvals "between departments"): the same underline tabs as the lab's second row */
.nx-root .nx-adm .nx-parts { gap: 2px; margin: 0 0 var(--nx-s3); border-bottom: 1px solid var(--nx-line); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nx-root .nx-adm .nx-part { border-radius: 0; border: 0; border-bottom: 3px solid transparent; padding: 9px 14px; min-height: 40px; white-space: nowrap; font-weight: 600; }
.nx-root .nx-adm .nx-part[aria-current="true"] { background: none; color: var(--nx-text); border-bottom-color: var(--nx-blue); font-weight: 700; }

/* phone: a person or a department is a compact card, not a long column (the lab's phone cards): the name on top, the facts in two columns under it */
@media (max-width: 860px) {
  .nx-root .nx-adm .nx-tbl__table tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--nx-s4); position: relative; padding: var(--nx-s3) var(--nx-s4); }
  .nx-root .nx-adm .nx-tbl__table td:not([data-label]) { grid-column: 1 / -1; }
  .nx-root .nx-adm .nx-tbl__table td[data-label] { grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; padding: 2px 0; }
  .nx-root .nx-adm .nx-tbl__table td[data-label]::before { font-size: 12px; font-weight: 600; }
  .nx-root .nx-adm .nx-tbl__table td.nx-tbl__selcol { position: absolute; right: var(--nx-s2); top: var(--nx-s2); grid-column: auto; width: auto; padding: 0; }
  .nx-root .nx-adm .nx-tbl__td--primary { font-size: 16px; padding-right: 44px; }
  .nx-root .nx-adm .nx-tbl__td--actions { padding-top: var(--nx-s1); }
}

.nx-root .nx-adm .nx-tbl__td--text { overflow-wrap: normal; }
.nx-root .nx-adm .nx-tbl__td { vertical-align: middle; }

/* ---------------------------------------------------------------- 5. MY PROFILE like the lab's Profile and Account pages (the nx-w6 / nx-w6b classes only the Profile page draws) */
.nx-root .nx-w6b-cover { height: 132px; background: linear-gradient(135deg, var(--nx-pill-a), var(--nx-cyan)); }
.nx-root .nx-w6b-cover::before { background: color-mix(in srgb, var(--nx-on-blue) 16%, transparent); }
.nx-root .nx-w6b-cover::after { background: color-mix(in srgb, var(--nx-on-blue) 12%, transparent); }
.nx-root .nx-w6b-hero__av .nx-pic:not(.nx-pic--photo) { background: linear-gradient(135deg, var(--nx-pill-a), var(--nx-cyan)); color: var(--nx-on-blue); }
.nx-root .nx-w6b-name { font-size: 24px; letter-spacing: -.2px; }
.nx-root .nx-w6b-hero__body { align-items: end; }
.nx-root .nx-w6b-hero__btn { box-shadow: var(--nx-shadow); }
.nx-root .nx-w6-tabs { margin: 0 0 var(--nx-s4); min-width: 0; max-width: 100%; }   /* the strip scrolls inside itself; it never widens its column */
.nx-root .nx-w6b-tiles { gap: var(--nx-s3); }
.nx-root .nx-w6b-tile { background: color-mix(in srgb, var(--nx-blue) 7%, var(--nx-surface)); padding: 14px 16px; }
.nx-root .nx-w6b-tile b { color: var(--nx-text); font-size: 22px; }
.nx-root .nx-w6b-tile span { color: var(--nx-muted); font-weight: 500; font-size: 13.5px; }
.nx-root .nx-w6-facts { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--nx-s4); }
.nx-root .nx-w6-facts > div { padding: 12px 0; border-top: 1px solid var(--nx-line); }
.nx-root .nx-w6-facts > div:first-child { border-top: 0; padding-top: 0; }
.nx-root .nx-w6-facts dt { color: var(--nx-text); font-size: 15px; font-weight: 700; }
.nx-root .nx-w6-facts dd { color: var(--nx-muted); font-size: 13.5px; }
/* the timeline of "What I did lately" */
.nx-root .nx-pf-time { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s4); }
.nx-root .nx-pf-time__it { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: var(--nx-s3); align-items: start; }
.nx-root .nx-pf-time__dot { width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--nx-blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nx-blue) 16%, transparent); }
.nx-root .nx-pf-time__t { font-weight: 700; color: var(--nx-text); text-decoration: none; overflow-wrap: anywhere; }
.nx-root a.nx-pf-time__t:hover { text-decoration: underline; }
.nx-root .nx-pf-time__m { color: var(--nx-muted); font-size: 13.5px; }
/* settings: ONE full width card of rows (the lab's Account page), the control on the right; the card heading is smaller */
.nx-root .nx-w6-card .nx-h3 { font-size: 16px; }
.nx-root .nx-w6-row__title { font-weight: 700; font-size: 15px; }
.nx-root .nx-w6-row__text { font-size: 13.5px; }
.nx-root .nx-w6-cols.nx-w6-cols--one { grid-template-columns: minmax(0, 1fr); }

/* ---------------------------------------------------------------- 6. HELP like the lab's Help center: a hero card, two columns of folding questions, then the three cards */
.nx-root .nx-hp29 { display: grid; gap: var(--nx-s4); min-width: 0; }
.nx-root .nx-hp29__hero { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); padding: 28px 24px; text-align: center; display: grid; gap: var(--nx-s3); justify-items: center; min-width: 0; }
.nx-root .nx-hp29__h { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 800; letter-spacing: -.3px; }
.nx-root .nx-hp29__search { width: 100%; max-width: 480px; text-align: left; }
.nx-root .nx-hp29__topics { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--nx-s2); }
.nx-root .nx-hp29__faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nx-s4); align-items: start; }
.nx-root .nx-hp29__q { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); min-width: 0; }
.nx-root .nx-hp29__q h2 { margin: 0; font-size: 15px; }
.nx-root .nx-hp29__qb { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s3); text-align: left; padding: 18px 20px; min-height: 56px; background: none; border: 0; border-radius: var(--nx-r2); color: var(--nx-text); font: inherit; font-weight: 700; cursor: pointer; }
.nx-root .nx-hp29__qb span { color: var(--nx-muted); font-weight: 600; flex: none; }
.nx-root .nx-hp29__q p { margin: 0; padding: 0 20px 18px; color: var(--nx-muted); overflow-wrap: anywhere; }
.nx-root .nx-hp29__none { grid-column: 1 / -1; }
.nx-root .nx-hp29 .nx-w6b-help { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--nx-s4); align-items: start; }
@media (max-width: 860px) { .nx-root .nx-hp29__faq { grid-template-columns: minmax(0, 1fr); } .nx-root .nx-hp29__hero { padding: 22px 16px; } }
.nx-root .nx-hp29 .nx-w6b-help { grid-auto-rows: auto; min-height: 0; }
.nx-root .nx-hp29 .nx-w6b-help > :last-child { grid-column: auto; }
@media (max-width: 860px) { .nx-root .nx-hp29 .nx-w6b-help { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- 7. HOME like the lab's Home (nx-home.jsx): the composer centred, two cards side by side, three agent cards, Recent work as one card */
.nx-root .nx-hm29 { display: grid; gap: var(--nx-s5); min-width: 0; }
.nx-root .nx-hm29 > * { min-width: 0; }
.nx-root .nx-hm29 .nx-cmp-sec { width: 100%; max-width: 860px; margin: 0 auto; }
.nx-root .nx-hm29__row { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--nx-s4); align-items: stretch; }
.nx-root .nx-hm29__card { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); padding: 20px 22px; display: grid; gap: var(--nx-s3); align-content: start; min-width: 0; }
.nx-root .nx-hm29__head { display: flex; align-items: center; gap: var(--nx-s3); flex-wrap: wrap; min-width: 0; }
.nx-root .nx-hm29__head--bare { margin: 0 0 var(--nx-s3); }
.nx-root .nx-hm29__h { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 800; letter-spacing: -.2px; }
.nx-root .nx-hm29__n { background: var(--nx-badge-bg, var(--nx-amber)); color: var(--nx-badge-text, var(--nx-text)); border-radius: var(--nx-rfull); padding: 0 8px; font-size: 12px; font-weight: 800; line-height: 20px; min-width: 20px; text-align: center; }
.nx-root .nx-hm29__week .nx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nx-s3); }
.nx-root .nx-hm29__week .nx-stat { border: 0; box-shadow: none; background: none; padding: 0; min-height: 0; }
.nx-root .nx-hm29__trend { display: grid; gap: var(--nx-s2); }
.nx-root .nx-hm29__trend .nx-line__plot { height: 130px; }
.nx-root .nx-hm29__recent { padding: 20px 0 0; gap: 0; overflow: hidden; }
.nx-root .nx-hm29__recent > .nx-hm29__head { padding: 0 22px var(--nx-s3); }
.nx-root .nx-hm29__recent .nx-rwlist { margin: 0; }
@media (max-width: 1100px) { .nx-root .nx-hm29__row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .nx-root .nx-hm29__card { padding: 16px; } .nx-root .nx-hm29__recent { padding-top: 16px; } .nx-root .nx-hm29__recent > .nx-hm29__head { padding: 0 16px var(--nx-s2); } }
/* Recent work: flat rows divided by a line, the buttons at the right of each row (the lab's rows) */
.nx-root .nx-hm29__recent .nx-rwlist, .nx-root .nx-hm29__recent .nx-rw__list { gap: 0; }
.nx-root .nx-hm29__recent .nx-rw { border: 0; border-top: 1px solid var(--nx-line); border-radius: 0; box-shadow: none; background: none; padding: 14px 22px; }
.nx-root .nx-hm29__recent .nx-rw--check { background: none; }
.nx-root .nx-hm29__recent .nx-rw__group { margin: 0; padding: 10px 22px 4px; text-transform: uppercase; letter-spacing: .6px; font-size: 12px; }
.nx-root .nx-hm29__recent .nx-rw__ql { border: 1px solid var(--nx-control-line); background: var(--nx-surface); color: var(--nx-text); text-decoration: none; min-height: var(--nx-tap); padding: 0 var(--nx-s3); border-radius: var(--nx-r1); box-shadow: var(--nx-shadow); }
.nx-root .nx-hm29__recent .nx-rw__foot { padding: 12px 22px; border-top: 1px solid var(--nx-line); }
@media (min-width: 861px) {
  .nx-root .nx-hm29__recent .nx-rw:not(.nx-rw--check) { grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; }
  .nx-root .nx-hm29__recent .nx-rw__acts { grid-column: 3; grid-row: 1; flex-wrap: nowrap; }
}
@media (max-width: 860px) { .nx-root .nx-hm29__recent .nx-rw { padding: 12px 16px; } .nx-root .nx-hm29__recent .nx-rw__group, .nx-root .nx-hm29__recent .nx-rw__foot { padding-left: 16px; padding-right: 16px; } }
.nx-root .nx-hm29__trend .nx-line__plot { height: 110px; }
.nx-root .nx-hm29__trend .nx-line__end { display: none; }
.nx-root .nx-adm .nx-adm-safe { margin: var(--nx-s5) 0 0; text-align: center; font-size: var(--nx-fs-small); color: var(--nx-muted); }

.nx-root .nx-hm29__week .nx-stat__link { min-height: var(--nx-tap); display: inline-flex; align-items: center; }

/* ---------------------------------------------------------------- 8. ADMIN SIMPLE: People, the assign page (nx-people-assign.jsx; prototype PEOPLE-ASSIGN-PAGE.html) */
.nx-root .nx-pa { display: grid; gap: var(--nx-s4); min-width: 0; }
.nx-root .nx-pa__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--nx-s3); }
.nx-root .nx-pa__h { margin: 0; font-size: 20px; font-weight: 800; }
.nx-root .nx-pa__help p { margin: 2px 0 0; color: var(--nx-muted); max-width: 62ch; }
.nx-root .nx-pa__btns { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-pa__grid { display: grid; grid-template-columns: minmax(340px, 460px) minmax(0, 1fr); gap: var(--nx-s4); align-items: start; min-width: 0; }
.nx-root .nx-pa__list, .nx-root .nx-pa__panel { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); min-width: 0; }
.nx-root .nx-pa__list { display: flex; flex-direction: column; max-height: calc(calc(100 * var(--ao-vh)) - 220px); min-height: 460px; position: relative; overflow: hidden; }
.nx-root .nx-pa__tabs { display: flex; gap: 6px; padding: 10px 10px 0; overflow-x: auto; scrollbar-width: none; }
.nx-root .nx-pa__tab { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--nx-rfull); background: none; color: var(--nx-muted); font: inherit; font-weight: 700; cursor: pointer; }
.nx-root .nx-pa__tab b { min-width: 22px; text-align: center; padding: 1px 7px; border-radius: var(--nx-rfull); background: var(--nx-hover); color: var(--nx-text); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.nx-root .nx-pa__tab.is-need b { background: var(--nx-badge-bg, var(--nx-amber)); color: var(--nx-badge-text, var(--nx-text)); }
.nx-root .nx-pa__tab[aria-selected="true"] { background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-pa__search { display: flex; gap: var(--nx-s2); padding: 10px; position: relative; }
.nx-root .nx-pa__search .nx-input { flex: 1; min-width: 0; border-radius: var(--nx-rfull); }
.nx-root .nx-pa__fbtn { position: relative; min-height: 40px; padding: 0 14px; border: 1px solid var(--nx-control-line); border-radius: var(--nx-rfull); background: var(--nx-surface); color: var(--nx-text); font: inherit; font-weight: 700; cursor: pointer; }
.nx-root .nx-pa__fbtn i { font-style: normal; background: var(--nx-blue); color: var(--nx-on-blue); border-radius: var(--nx-rfull); padding: 0 7px; margin-left: 6px; font-size: 12px; }
.nx-root .nx-pa__pop { position: absolute; z-index: 6; right: 10px; top: 56px; width: min(340px, calc(100% - 20px)); padding: 14px; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-lift); display: grid; gap: 6px; }
.nx-root .nx-pa__pop h4 { margin: 6px 0 2px; font-size: 12.5px; color: var(--nx-muted); font-weight: 700; }
.nx-root .nx-pa__rows { overflow: auto; padding: 4px 8px 8px; flex: 1 1 auto; min-height: 120px; outline-offset: -2px; }
.nx-root .nx-pa-row { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; border: 1.5px solid transparent; cursor: pointer; min-width: 0; }
.nx-root .nx-pa-row:hover { background: color-mix(in srgb, var(--nx-blue) 6%, transparent); }
.nx-root .nx-pa-row.is-sel { background: var(--nx-surface); border-color: color-mix(in srgb, var(--nx-blue) 55%, transparent); box-shadow: 0 8px 20px -14px var(--nx-blue); }
.nx-root .nx-pa-row__chk { display: grid; place-items: center; width: 40px; height: 40px; margin: -9px 0 -9px -9px; flex: none; cursor: pointer; }
.nx-root .nx-pa-row__chk input { width: 20px; height: 20px; accent-color: var(--nx-blue); margin: 0; }
.nx-root .nx-pa-av { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--nx-on-blue); font-weight: 800; background: linear-gradient(135deg, var(--nx-pill-a), var(--nx-cyan)); }
.nx-root .nx-pa-av--b { background: linear-gradient(135deg, var(--nx-success), var(--nx-cyan)); }
.nx-root .nx-pa-av--lg { width: 58px; height: 58px; font-size: 22px; }
.nx-root .nx-pa-row__who { min-width: 0; flex: 1; display: grid; }
.nx-root .nx-pa-row__who b, .nx-root .nx-pa-row__who > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-root .nx-pa-row__who > span { color: var(--nx-muted); font-size: 13px; }
.nx-root .nx-pa-row__zh { font-weight: 500; color: var(--nx-muted); }
.nx-root .nx-pa-st { flex: none; max-width: 150px; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: var(--nx-rfull); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-root .nx-pa-st--need { background: var(--nx-amber-soft); color: var(--nx-amber-text); }
.nx-root .nx-pa-st--ok { background: var(--nx-ok-soft); color: var(--nx-ok-text); }
.nx-root .nx-pa-st--off { background: var(--nx-hover); color: var(--nx-muted); }
.nx-root .nx-pa__banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 10px; border-radius: var(--nx-r2); background: var(--nx-amber-soft); color: var(--nx-amber-text); font-weight: 600; }
.nx-root .nx-pa__empty { padding: 36px 18px; text-align: center; color: var(--nx-muted); display: grid; gap: 8px; justify-items: center; }
.nx-root .nx-pa__empty b { color: var(--nx-text); font-size: 16px; }
.nx-root .nx-pa__empty p { margin: 0; }
.nx-root .nx-pa__named { padding: 8px 14px 14px; border-top: 1px solid var(--nx-line); overflow: auto; min-height: 120px; }
.nx-root .nx-pa__named h3 { margin: 6px 0 8px; font-size: 15px; }
.nx-root .nx-pa__panel { padding: 20px; position: sticky; top: calc(var(--nx-header-h) + 12px); min-height: 460px; }
.nx-root .nx-pa__close, .nx-root .nx-pa__scrim { display: none; }
.nx-root .nx-pa-ph { display: flex; gap: 14px; align-items: center; }
.nx-root .nx-pa-ph__t { min-width: 0; }
.nx-root .nx-pa-ph h2 { margin: 0; font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.nx-root .nx-pa-ph p { margin: 2px 0 0; color: var(--nx-muted); font-size: 14px; overflow-wrap: anywhere; }
.nx-root .nx-pa-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.nx-root .nx-pa-badge { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: var(--nx-rfull); background: var(--nx-hover); color: var(--nx-text); }
.nx-root .nx-pa-badge--a { background: color-mix(in srgb, var(--nx-blue) 15%, transparent); color: var(--nx-blue-text); }
.nx-root .nx-pa-badge--b { background: color-mix(in srgb, var(--nx-success) 15%, transparent); color: var(--nx-ok-text); }
.nx-root .nx-pa-sec { margin-top: 22px; }
.nx-root .nx-pa-sec h3 { margin: 0 0 4px; font-size: 18px; }
.nx-root .nx-pa-hint { margin: 0 0 12px; color: var(--nx-muted); font-size: 14px; }
.nx-root .nx-pa-sug { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--nx-blue) 8%, transparent); border: 1px dashed color-mix(in srgb, var(--nx-blue) 45%, transparent); margin-bottom: 14px; }
.nx-root .nx-pa-sug b { color: var(--nx-blue-text); }
.nx-root .nx-pa-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.nx-root .nx-pa-tile { display: flex; gap: 10px; align-items: center; padding: 13px 14px; min-height: 54px; border-radius: 14px; border: 1.5px solid var(--nx-line); background: var(--nx-surface); color: var(--nx-text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.nx-root .nx-pa-tile:hover:not(:disabled) { border-color: var(--nx-blue); }
.nx-root .nx-pa-tile:disabled { opacity: .6; cursor: not-allowed; }
.nx-root .nx-pa-tile__tick { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--nx-line); display: grid; place-items: center; color: transparent; font-size: 13px; }
.nx-root .nx-pa-tile[aria-pressed="true"] { border-color: var(--nx-blue); background: color-mix(in srgb, var(--nx-blue) 10%, var(--nx-surface)); }
.nx-root .nx-pa-tile[aria-pressed="true"] .nx-pa-tile__tick { background: var(--nx-blue); border-color: var(--nx-blue); color: var(--nx-on-blue); }
.nx-root .nx-pa-more { margin-top: 18px; }
.nx-root .nx-pa-more > summary { cursor: pointer; font-weight: 700; color: var(--nx-link); min-height: 40px; display: flex; align-items: center; }
.nx-root .nx-pa-more__b { display: grid; gap: 12px; margin-top: 6px; }
.nx-root .nx-pa-more__row, .nx-root .nx-pa-more__acts { display: flex; gap: var(--nx-s2); flex-wrap: wrap; align-items: center; }
.nx-root .nx-pa-more--page { margin-top: var(--nx-s2); }
.nx-root .nx-pa-foot { position: sticky; bottom: 0; margin: 22px -20px -20px; padding: 14px 20px; border-top: 1px solid var(--nx-line); background: var(--nx-surface); border-radius: 0 0 var(--nx-r2) var(--nx-r2); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nx-root .nx-pa-foot__sp { flex: 1; }
.nx-root .nx-pa-prog { display: flex; gap: 10px; align-items: center; color: var(--nx-muted); font-size: 14px; }
.nx-root .nx-pa-ring { width: 34px; height: 34px; }
.nx-root .nx-pa-ring__bg { fill: none; stroke: var(--nx-line); stroke-width: 4; }
.nx-root .nx-pa-ring__fg { fill: none; stroke: var(--nx-success); stroke-width: 4; stroke-linecap: round; }
.nx-root .nx-pa-bulk { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 860; max-width: calc(100% - 24px); padding: 12px 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--nx-side); color: var(--nx-side-strong); border-radius: 20px; box-shadow: var(--nx-lift); }
.nx-root .nx-pa-bulk .nx-chip { background: color-mix(in srgb, var(--nx-side-strong) 12%, transparent); color: var(--nx-side-strong); border-color: color-mix(in srgb, var(--nx-side-strong) 30%, transparent); }
@media (max-width: 1100px) { .nx-root .nx-pa__grid { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); } }
@media (max-width: 900px) {
  .nx-root .nx-pa__grid { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-pa__list { max-height: none; min-height: 0; }
  .nx-root .nx-pa__panel { position: fixed; inset: auto 0 0 0; z-index: 900; border-radius: 22px 22px 0 0; max-height: calc(88 * var(--ao-vh)); overflow: auto; padding-bottom: 0; transform: translateY(105%); visibility: hidden; transition: transform var(--nx-d3) var(--nx-curve), visibility 0s linear var(--nx-d3); }
  .nx-root .nx-pa__panel.is-open { transform: none; visibility: visible; transition: transform var(--nx-d3) var(--nx-curve); }
  .nx-root .nx-pa__close { display: grid; place-items: center; position: absolute; right: 12px; top: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--nx-hover); color: var(--nx-text); font-size: 22px; cursor: pointer; }
  .nx-root .nx-pa__scrim { display: block; position: fixed; inset: 0; z-index: 890; background: var(--nx-scrim); border: 0; padding: 0; }
  .nx-root .nx-pa-ph { padding-right: 44px; }
  .nx-root .nx-pa-bulk { bottom: calc(var(--nx-bar-h) + 12px); }
}

.nx-root .nx-adm-seg { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; border: 1.5px solid var(--nx-control-line); border-radius: var(--nx-rfull); background: var(--nx-surface); margin: 0 0 var(--nx-s4); }
.nx-root .nx-adm-seg .nx-seg__b { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; font-weight: 700; color: var(--nx-muted); text-decoration: none; }
.nx-root .nx-adm-seg .nx-seg__b[aria-current="page"] { background: var(--nx-blue); color: var(--nx-on-blue); }

.nx-root .nx-pa__tabs { gap: 2px; padding: 8px 8px 0; }
.nx-root .nx-pa__tab { padding: 0 10px; gap: 6px; font-size: 14px; }
.nx-root .nx-pa__tab b { padding: 1px 6px; min-width: 20px; }

/* ---------------------------------------------------------------- 9. ADMIN SIMPLE: Decisions and Today */
.nx-root .nx-adm-seg .nx-seg__b { background: none; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.nx-root .nx-adm-seg .nx-seg__b[aria-pressed="true"] { background: var(--nx-blue); color: var(--nx-on-blue); }
.nx-root .nx-adm-seg__n { margin-left: 8px; background: var(--nx-badge-bg, var(--nx-amber)); color: var(--nx-badge-text, var(--nx-text)); border-radius: var(--nx-rfull); padding: 0 7px; font-size: 12px; line-height: 18px; }
.nx-root .nx-adm .nx-w14-tabsrow { border-bottom: 0; margin: 0 0 var(--nx-s3); }
.nx-root .nx-adm .nx-w14-tabsrow .nx-adm-seg { margin: 0; }
.nx-root .nx-adm .nx-adm-extra { margin-left: auto; font-weight: 600; }
.nx-root .nx-adm .nx-w14-lead { margin: 4px 0 0; color: var(--nx-muted); }
.nx-root .nx-adm .nx-adm-caught { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); padding: 44px 18px; text-align: center; display: grid; gap: 8px; justify-items: center; }
.nx-root .nx-adm .nx-adm-caught h2 { margin: 0; font-size: 22px; }
.nx-root .nx-adm .nx-adm-caught p { margin: 0; max-width: 46ch; color: var(--nx-muted); }
.nx-root .nx-adm .nx-adm-caught__ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: var(--nx-ok-soft); color: var(--nx-ok-text); }
.nx-root .nx-adm .nx-adm-act { display: flex; gap: var(--nx-s2); flex-wrap: wrap; align-items: center; }
.nx-root .nx-adm .nx-adm-confirm { display: grid; gap: var(--nx-s3); padding: 14px 16px; border-radius: 14px; background: var(--nx-amber-soft); }
.nx-root .nx-adm .nx-adm-confirm > p { margin: 0; }
.nx-root .nx-adm .nx-adm-fold--changes > summary { font-size: 16px; }
.nx-root .nx-adm .nx-td-h { margin: var(--nx-s5) 0 var(--nx-s2); font-size: 18px; font-weight: 800; }
.nx-root .nx-adm .nx-td-list { list-style: none; margin: 0; padding: 4px 16px; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); }
.nx-root .nx-adm .nx-td-list li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-adm .nx-td-list li:last-child { border-bottom: 0; }
.nx-root .nx-adm .nx-td-list time { margin-left: auto; color: var(--nx-muted); font-size: 13px; }
.nx-root .nx-adm .nx-td-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--nx-s4); }
.nx-root .nx-adm .nx-td-card { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); padding: 20px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.nx-root .nx-adm .nx-td-card__n { font-size: 46px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.nx-root .nx-adm .nx-td-card__n--need { color: var(--nx-amber-text); }
.nx-root .nx-adm .nx-td-card__n--ok { color: var(--nx-ok-text); }
.nx-root .nx-adm .nx-td-card p { margin: 0 0 10px; color: var(--nx-muted); }

/* Systems: one word on each card, one button; the filters that are rarely needed sit under More filters */
.nx-root .nx-adm .nx-w20-bar { display: grid; gap: var(--nx-s3); }
.nx-root .nx-adm .nx-adm-more { margin: 0; }
@media (max-width: 860px) { .nx-root .nx-adm-more > summary { min-height: 40px; display: flex; align-items: center; } }   /* CR-READY: also outside Admin (Agents, Systems, More filters) */
.nx-root .nx-adm .nx-adm-more > summary { cursor: pointer; font-weight: 700; color: var(--nx-link); min-height: 40px; display: flex; align-items: center; }
.nx-root .nx-adm .nx-sy-t { display: flex; gap: 12px; align-items: center; }
.nx-root .nx-adm .nx-sy-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--nx-on-blue); font-weight: 800; font-size: 18px; background: linear-gradient(135deg, var(--nx-pill-a), var(--nx-cyan)); }
.nx-root .nx-adm .nx-sy-ok { color: var(--nx-ok-text); font-weight: 700; }

/* Platform: one banner, three cards, the open issues, Settings folded away */
.nx-root .nx-pl { display: grid; gap: var(--nx-s4); min-width: 0; }
.nx-root .nx-pl-ban { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--nx-r2); border: 1px solid var(--nx-line); }
.nx-root .nx-pl-ban.is-ok { background: var(--nx-ok-soft); }
.nx-root .nx-pl-ban.is-warn { background: var(--nx-amber-soft); }
.nx-root .nx-pl-ban b { font-size: 19px; }
.nx-root .nx-pl-ban p { margin: 2px 0 0; color: var(--nx-muted); }
.nx-root .nx-pl-ban ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.nx-root .nx-pl-ban__ico { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 800; background: var(--nx-surface); }
.nx-root .nx-pl-ban.is-ok .nx-pl-ban__ico { color: var(--nx-ok-text); }
.nx-root .nx-pl-ban.is-warn .nx-pl-ban__ico { color: var(--nx-amber-text); }
/* BACKUPS (1 Nov 2026): Admin > Platform > Backups and its card on Platform health (nx-backups.jsx) */
.nx-root .nx-pl-ban.is-bad { background: var(--nx-bad-soft); }
.nx-root .nx-pl-ban.is-bad .nx-pl-ban__ico { color: var(--nx-bad-text); }
.nx-root .nx-pl-ban.is-unknown { background: var(--nx-surface); }   /* no report has ever come in: grey, not a failure (2 Nov 2026) */
.nx-root .nx-pl-ban.is-unknown .nx-pl-ban__ico { color: var(--nx-muted); border: 1px solid var(--nx-line); }
.nx-root .nx-bk { display: grid; gap: var(--nx-s4); }
.nx-root .nx-bk-line { margin: 2px 0 0; }
.nx-root .nx-bk-line span { color: var(--nx-muted); }
.nx-root .nx-bk-bad { color: var(--nx-bad-text); }
.nx-root .nx-bk-card { margin: 0; display: flex; gap: 8px; align-items: baseline; }
.nx-root .nx-bk-card.is-ok > span { color: var(--nx-ok-text); }
.nx-root .nx-bk-card.is-warn > span { color: var(--nx-amber-text); }
.nx-root .nx-bk-card.is-bad > span { color: var(--nx-bad-text); }
.nx-root .nx-bk-card.is-unknown > span { color: var(--nx-muted); }
.nx-root .nx-bk-days { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.nx-root .nx-bk-day { display: grid; gap: 2px; justify-items: center; padding: 8px 6px; border: 1px solid var(--nx-line); border-radius: var(--nx-r2); text-align: center; }
.nx-root .nx-bk-day time { font-size: 12px; color: var(--nx-muted); }
.nx-root .nx-bk-mark { font-size: 20px; font-weight: 800; line-height: 1.2; }
.nx-root .nx-bk-day.is-ok .nx-bk-mark { color: var(--nx-ok-text); }
.nx-root .nx-bk-day.is-failed .nx-bk-mark, .nx-root .nx-bk-day.is-none .nx-bk-mark { color: var(--nx-bad-text); }
.nx-root .nx-bk-day.is-unknown { opacity: 0.6; }
.nx-root .nx-bk-day.is-drop { border-color: var(--nx-amber-text); }
.nx-root .nx-bk-flag { font-size: 11px; color: var(--nx-amber-text); }
.nx-root .nx-pl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--nx-s4); }
.nx-root .nx-pl-card { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); padding: 20px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; min-width: 0; }
.nx-root .nx-pl-card h2 { margin: 0; font-size: 17px; }
.nx-root .nx-pl-card p { margin: 0; color: var(--nx-muted); }
.nx-root .nx-pl-card .nx-btn { margin-top: auto; }
.nx-root .nx-pl-n { font-size: 32px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.nx-root .nx-pl-meter { width: 100%; height: 12px; border-radius: var(--nx-rfull); background: var(--nx-hover); overflow: hidden; }
.nx-root .nx-pl-meter i { display: block; height: 100%; border-radius: var(--nx-rfull); background: linear-gradient(90deg, var(--nx-cyan), var(--nx-blue)); }
.nx-root .nx-pl-unread { display: grid; gap: 8px; justify-items: start; color: var(--nx-muted); }
.nx-root .nx-pl-unread p { margin: 0; }
.nx-root .nx-pl-iss .nx-td-h { margin-top: var(--nx-s2); }
.nx-root .nx-pl-set { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: 4px 20px; }
.nx-root .nx-adm-back { margin: 0 0 var(--nx-s2); }
.nx-root .nx-td-list .nx-pa-st { max-width: none; }
.nx-root .nx-td-list .nx-pa-st { max-width: none; }

/* Departments: a list and one department (nx-departments-split.jsx) */
.nx-root .nx-ds { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: var(--nx-s4); align-items: start; min-width: 0; }
.nx-root .nx-ds-list, .nx-root .nx-ds-detail { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); min-width: 0; }
.nx-root .nx-ds-list { padding: 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }   /* CR-READY: one shrinkable column, so a long department name shortens instead of widening the page */
.nx-root .nx-ds-row { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 12px 14px; min-height: 48px; border-radius: 14px; border: 1.5px solid transparent; background: none; color: var(--nx-text); font: inherit; cursor: pointer; }
.nx-root .nx-ds-row:hover { background: color-mix(in srgb, var(--nx-blue) 6%, transparent); }
.nx-root .nx-ds-row.is-sel { background: var(--nx-surface); border-color: color-mix(in srgb, var(--nx-blue) 55%, transparent); box-shadow: 0 8px 20px -14px var(--nx-blue); }
.nx-root .nx-ds-row b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nx-root .nx-ds-row__m { margin-left: auto; color: var(--nx-muted); font-size: 13.5px; white-space: nowrap; }
.nx-root .nx-ds-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--nx-blue); }
.nx-root .nx-ds-dot--b { background: var(--nx-success); }
.nx-root .nx-ds-list__f { padding: 10px; }
.nx-root .nx-ds-detail { padding: 22px; position: sticky; top: calc(var(--nx-header-h) + 12px); }
.nx-root .nx-ds-detail h2 { margin: 6px 0 4px; font-size: 22px; }
.nx-root .nx-ds-detail h3 { margin: 18px 0 4px; font-size: 16px; }
.nx-root .nx-ds-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.nx-root .nx-ds-lead { margin: 0; color: var(--nx-muted); }
.nx-root .nx-ds-facts { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 14px; margin: 16px 0 0; }
.nx-root .nx-ds-facts dt { color: var(--nx-muted); }
.nx-root .nx-ds-facts dd { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-ds-none { color: var(--nx-muted); }
.nx-root .nx-ds-people { list-style: none; margin: 0; padding: 0; }
.nx-root .nx-ds-people li { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--nx-line); flex-wrap: wrap; }
.nx-root .nx-ds-people__w { display: grid; min-width: 0; flex: 1; }
.nx-root .nx-ds-people__w small { color: var(--nx-muted); overflow-wrap: anywhere; }
.nx-root .nx-ds-people__a { display: flex; gap: var(--nx-s2); flex-wrap: wrap; }
.nx-root .nx-ds-act { display: flex; gap: var(--nx-s2); flex-wrap: wrap; margin-top: 18px; }
.nx-root .nx-ds-add { display: grid; gap: var(--nx-s2); margin-top: 8px; }
.nx-root .nx-pa-av--sm { width: 36px; height: 36px; font-size: 14px; }
.nx-root .nx-adm-more--box { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: 4px 16px; margin-bottom: var(--nx-s3); }
@media (max-width: 900px) { .nx-root .nx-ds { grid-template-columns: minmax(0, 1fr); } .nx-root .nx-ds-detail { position: static; padding: 16px; } .nx-root .nx-ds-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ADMIN fix (22 Oct 2026, live QA of h68): no ask box above the work area (only the title and the tabs sit above it), and the People tab strip wraps instead of clipping "Disabled" */
.nx-root .nx-pa__tabs { flex-wrap: wrap; overflow: visible; row-gap: 2px; }
.nx-root .nx-pa__tab { flex: 1 1 auto; justify-content: center; }

/* AGENT SSH (8 Nov 2026): Admin > Platform > Agent SSH (nx-agentssh.jsx) */
.nx-root .nx-ssh { display: grid; gap: var(--nx-s4); }
.nx-root .nx-ssh-vms { display: grid; gap: var(--nx-s3); }
.nx-root .nx-ssh-vm { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--nx-line); border-radius: 8px; }
.nx-root .nx-ssh-set { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.nx-root .nx-ssh-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--nx-s3); }
.nx-root .nx-ssh-list code { overflow-wrap: anywhere; }
.nx-root .nx-ssh-exp { display: grid; gap: 4px; max-width: 260px; }

/* PP-SHELL (22 Oct 2026, Sheraz: the live New look does not match the lab). The FRAME of the redesigned look made the same as the lab (DCC-Agent-Office-new-UI-full.html): the menu column
   (item size, corners, the two small group titles, the glow under the current place, the arrow), the floating top bar, the page canvas (the soft colour wash behind the page), the page gutters,
   and on a phone the app bar with the title, the safety line, the floating bottom bar with the raised Chat button, and the drawer. It is the shell only: no page file is touched.
   Shipped BEFORE nx-w11.css (which stays the last stylesheet, qa-2026-10-21-nx-resp.test.js). Every rule starts with .nx-root and takes only --nx-* tokens (no hex, no rgb, no colour word), so
   the seven themes keep their own colours; a rule that has to beat nx-w11.css or an earlier file repeats .nx-shell. Motion only inside prefers-reduced-motion: no-preference.
   The pair pictures (lab and live, three widths, English and Chinese) are made by tools/nx-pp-shell-shot.mjs. */

.nx-root { --nx-header-h: 56px; }

/* ---------------------------------------------------------------- 1. THE PAGE CANVAS: two soft colour washes behind the page (the lab's "colour effects"): the accent top left, the second accent bottom right.
   Subtle and Rich both draw them (Subtle a little lighter); Off and the calm setting draw none. With reduced motion they stay still instead of going away. */
.nx-root.nx-shell:not(.is-fx-off):not(.is-calm) .nx-fx { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.nx-root .nx-fx > i { width: calc(72 * var(--ao-vmax)); height: calc(72 * var(--ao-vmax)); opacity: 1; }
.nx-root .nx-fx > i:nth-child(1) { left: calc(-21 * var(--ao-vmax)); top: calc(-26 * var(--ao-vmax)); background: radial-gradient(closest-side, color-mix(in srgb, var(--nx-blue) 30%, transparent) 50%, color-mix(in srgb, var(--nx-blue) 14%, transparent) 80%, transparent); }
.nx-root .nx-fx > i:nth-child(2) { left: auto; right: calc(-26 * var(--ao-vmax)); top: auto; bottom: calc(-31 * var(--ao-vmax)); background: radial-gradient(closest-side, color-mix(in srgb, var(--nx-cyan) 30%, transparent) 50%, color-mix(in srgb, var(--nx-cyan) 14%, transparent) 80%, transparent); }
.nx-root .nx-fx > i:nth-child(3) { display: none; }
@media (prefers-reduced-motion: reduce) {
  .nx-root.nx-shell:not(.is-fx-off):not(.is-calm) .nx-fx { display: block !important; }
  .nx-root .nx-fx > i { animation: none; }
}

/* ---------------------------------------------------------------- 2. THE MENU COLUMN (a wide screen): the lab's rail. 68 px wide, 9 px side padding, 40 px places with 12 px corners, a 22 px icon, 2 px between places */
.nx-root .nx-side { padding: 12px 9px; gap: 2px; }
.nx-root .nx-brand--co { padding: 2px 0 12px; margin: 0; }
.nx-root .nx-side .nx-nav { padding: 9px 13px; gap: 14px; min-height: var(--nx-tap); border-radius: 12px; }
.nx-root .nx-side .nx-nav__ico { width: 22px; height: 22px; }
.nx-root .nx-side .nx-nav__label { line-height: 22px; }
.nx-root.nx-shell:not(.is-open) .nx-side:not(:hover):not(:has(:focus-visible)) .nx-lgp { height: 58px; }
.nx-root .nx-side .nx-nav[aria-current="page"] { box-shadow: 0 8px 18px -8px var(--nx-blue); }
/* the small group titles over the places; on the small rail the titles are hidden and the line between the groups shows instead */
.nx-root .nx-side__grp { flex: none; height: 30px; padding: 10px 14px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--nx-side-text); white-space: nowrap; overflow: hidden; }
.nx-root .nx-side__grp > span { opacity: .75; }
.nx-root .nx-side__divider { display: none; }
.nx-root.nx-shell:not(.is-open) .nx-side:not(:hover):not(:has(:focus-visible)) .nx-side__grp { height: 8px; padding: 0; }
.nx-root.nx-shell:not(.is-open) .nx-side:not(:hover):not(:has(:focus-visible)) .nx-side__grp > span { display: none; }
.nx-root.nx-shell:not(.is-open) .nx-side:not(:hover):not(:has(:focus-visible)) .nx-side__divider { display: block; margin: 4px 8px; }
/* the menu size buttons and the pin: quieter, as the lab's "Menu size" */
.nx-root .nx-msize { padding: 10px 8px 4px; }
.nx-root .nx-msize__label { opacity: .8; }

/* ---------------------------------------------------------------- 3. THE TOP BAR (a wide screen): the lab's floating bar. 56 px, 14 px from the top, 22 px from the menu and from the right edge, the page wash shows through it,
   a flat search (no pill), a plain EN, the person's picture without the name (the name and role are in the profile menu) */
.nx-root .nx-header { min-height: var(--nx-header-h); padding: 7px 16px; margin: 14px 22px 0; gap: 8px; background: color-mix(in srgb, var(--nx-surface) 80%, transparent); }
.nx-root .nx-search { border: 0; background: transparent; padding: 0 12px; border-radius: var(--nx-r1); max-width: 460px; }
.nx-root .nx-search:hover { background: color-mix(in srgb, var(--nx-blue) 8%, transparent); }
.nx-root .nx-header .nx-lang { border: 0; background: none; padding: 0 10px; border-radius: var(--nx-rfull); }
.nx-root .nx-header .nx-lang:hover { background: color-mix(in srgb, var(--nx-blue) 12%, transparent); }
.nx-root .nx-header .nx-me { padding: 0 2px; }
.nx-root .nx-header .nx-me__text { display: none; }
.nx-root .nx-header__title { display: none; }
.nx-root .nx-safeline { display: none; }

/* ---------------------------------------------------------------- 4. THE PAGE FRAME: the lab's gutters (22 px, 16 px up to 1100 px) and 18 px under the bar */
.nx-root .nx-content { padding: 18px 22px 20px; }
@media (max-width: 1100px) {
  .nx-root .nx-content { padding-left: 16px; padding-right: 16px; }
  .nx-root .nx-header { margin: 12px 16px 0; }
}

/* ---------------------------------------------------------------- 5. A PHONE (860 px and under): the lab's phone app bar, safety line, floating bottom bar and drawer */
@media (max-width: 860px) {
  .nx-root .nx-fx { opacity: .55; }   /* the lab's phone default is its lighter setting */
  .nx-root { --nx-bar-h: 74px; }   /* the floating bar (64 px) and the 10 px under it: every sheet and page that keeps clear of the bar reads this one value */
  /* the app bar: across the whole width, a line under it, the place's title in 20 px bold, then search, bell, language and the person */
  .nx-root.nx-shell .nx-header { position: sticky; top: 0; margin: 0; padding: 6px 10px 6px 12px; min-height: var(--nx-header-h); border-width: 0 0 1px; border-radius: 0; box-shadow: none; gap: 4px; background: color-mix(in srgb, var(--nx-surface) 92%, transparent); }
  .nx-root.nx-shell .nx-header .nx-hbg { width: var(--nx-tap); height: var(--nx-tap); border-radius: 12px; border: 1px solid var(--nx-line); background: var(--nx-surface); margin-right: 4px; }
  .nx-root.nx-shell .nx-header__title { display: block; flex: 1 1 auto; min-width: 0; font-size: 20px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--nx-text); }
  .nx-root.nx-shell .nx-header .nx-search { flex: none; width: var(--nx-tap); padding: 0; justify-content: center; border-radius: var(--nx-r1); }
  .nx-root.nx-shell .nx-header .nx-search__text, .nx-root.nx-shell .nx-header .nx-search kbd { display: none; }
  .nx-root.nx-shell .nx-header .nx-header__right { margin-left: 0; gap: 2px; }
  .nx-root.nx-shell .nx-safeline { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 8px 14px 0; font-size: 12.5px; line-height: 1.35; color: var(--nx-muted); text-align: center; }
  .nx-root.nx-shell .nx-safeline svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .nx-root .nx-content { padding: 10px 14px calc(var(--nx-bar-h) + 14px + env(safe-area-inset-bottom)); }

  /* the bottom bar: a floating rounded bar, 10 px from each edge, glass over the page; the current place is told by the accent colour and a line on top (and aria-current) */
  .nx-root.nx-shell .nx-bar { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); min-height: 64px; padding: 6px; border: 1px solid var(--nx-side-line); border-radius: 28px;
    background: color-mix(in srgb, var(--nx-side) 84%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: var(--nx-lift); }
  .nx-root.nx-shell .nx-bar .nx-nav { font-size: 12px; font-weight: 700; min-height: 52px; border-radius: 14px; gap: 2px; padding: 6px 2px; }
  .nx-root.nx-shell .nx-bar .nx-nav:not(.nx-nav--raised) .nx-nav__ico, .nx-root .nx-bar .nx-nav:not(.nx-nav--raised)[data-place] .nx-nav__ico { width: 24px; height: 24px; color: currentColor; }
  .nx-root.nx-shell .nx-bar .nx-nav:not(.nx-nav--raised)[aria-current="page"] { background: none; box-shadow: none; color: var(--nx-blue-text); }
  .nx-root.nx-shell .nx-bar .nx-nav:not(.nx-nav--raised)[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; margin-left: -14px; border-radius: 3px; background: var(--nx-blue); }
  .nx-root.nx-shell .nx-bar .nx-nav--raised .nx-nav__orb { width: 56px; height: 56px; margin-top: -26px;
    background: radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--nx-plate) 70%, transparent), transparent 36%), var(--nx-pill); box-shadow: 0 0 0 5px var(--nx-side), 0 14px 22px -8px var(--nx-blue); }
  .nx-root.nx-shell .nx-bar .nx-nav--raised[aria-current="page"] .nx-nav__orb { box-shadow: 0 0 0 3px var(--nx-side), 0 0 0 5px var(--nx-side-strong); }
  .nx-root.nx-shell .nx-bar .nx-nav--raised .nx-count { top: -26px; }

  /* the drawer: the same column as a wide screen, with the group titles; it opens over a dim scrim */
  .nx-root.nx-shell .nx-side { border-radius: 0 20px 20px 0; padding-top: 14px; }
  .nx-root.nx-shell .nx-side .nx-nav { min-height: var(--nx-tap); }
}
@media (max-width: 380px) {
  .nx-root .nx-content { padding-left: 10px; padding-right: 10px; }
}

/* ---------------------------------------------------------------- 6. ARIA in the menu (the Classic SideAria: bubble, picture, round mic), above the menu size buttons; folds to one row; shown while the menu is open */
.nx-root .nx-aria { flex: none; margin: 6px 0 2px; border-radius: 16px; background: radial-gradient(90% 70% at 50% 100%, color-mix(in srgb, var(--nx-blue) 14%, transparent), transparent 70%); }
.nx-root.nx-shell:not(.is-open) .nx-side:not(:hover):not(:has(:focus-visible)) .nx-aria { display: none; }
.nx-root .nx-aria .side-aria { display: flex; position: static; margin: 0; padding: 8px 8px 4px; gap: 2px; background: none; box-shadow: none; border-radius: 0; }
.nx-root .nx-aria .side-aria-bubble { padding: 9px 12px; font-size: 13.5px; line-height: 1.4; color: var(--nx-text); background: var(--nx-surface); border: 1px solid var(--nx-line); box-shadow: var(--nx-shadow); animation: none; }
.nx-root .nx-aria .side-aria-link { color: var(--nx-blue-text); }
.nx-root .nx-aria .aria-art { width: 92px; height: 115px; margin-top: 8px; filter: none; animation: none; }
.nx-root .nx-aria .side-aria-mic { width: 54px; height: 54px; margin-top: -4px; color: var(--nx-pill-text); background: var(--nx-pill); box-shadow: 0 8px 18px -8px var(--nx-blue); animation: none; }
.nx-root .nx-aria__row { display: flex; align-items: center; gap: 8px; padding: 2px 8px 4px; }
.nx-root .nx-aria__name { flex: 1; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--nx-side-text); }
.nx-root .nx-aria__mic, .nx-root .nx-aria__fold { width: var(--nx-tap); height: 32px; display: inline-grid; place-items: center; border: 0; border-radius: var(--nx-rfull); background: none; color: var(--nx-side-text); cursor: pointer; padding: 0; }
.nx-root .nx-aria__mic { width: 32px; color: var(--nx-pill-text); background: var(--nx-pill); }
.nx-root .nx-aria:not(.is-folded) .nx-aria__mic { display: none; }
.nx-root .nx-aria__fold:hover { background: var(--nx-side-hover); color: var(--nx-side-strong); }
.nx-root .nx-aria svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-aria .side-aria-mic svg { fill: currentColor; stroke: none; width: 24px; height: 24px; }

/* ---------------------------------------------------------------- 7. SIMPLE UI rule 7 (22 Oct): the top bar is ONE ask box, the bell and the avatar menu */
.nx-root .nx-askbar { flex: 1 1 auto; max-width: 640px; gap: 8px; padding: 0 6px 0 14px; border: 1px solid var(--nx-control-line); background: color-mix(in srgb, var(--nx-surface) 70%, transparent); border-radius: var(--nx-rfull); cursor: text; }
.nx-root .nx-askbar:focus-within { border-color: var(--nx-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-blue) 22%, transparent); }
.nx-root .nx-askbar__in { flex: 1 1 auto; min-width: 0; height: 36px; border: 0; outline: 0; background: transparent; color: var(--nx-text); font: inherit; font-size: var(--nx-fs-body); }
.nx-root .nx-askbar__in::placeholder { color: var(--nx-muted); opacity: 1; }
.nx-root .nx-askbar__k { flex: none; border: 0; background: none; padding: 0 2px; cursor: pointer; color: var(--nx-muted); height: 36px; }
.nx-root .nx-askbar__go { flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--nx-rfull); display: inline-grid; place-items: center; cursor: pointer; color: var(--nx-pill-text); background: var(--nx-pill); }
.nx-root .nx-askbar__go:disabled { cursor: default; opacity: .4; }
.nx-root .nx-askbar__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* the avatar menu rows that came from the bar */
.nx-root .nx-menu__row--pair { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 12px; min-height: var(--nx-tap); }
.nx-root .nx-menu__rowlabel { font-size: var(--nx-fs-small); font-weight: 700; color: var(--nx-muted); }
.nx-root .nx-menu__seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--nx-control-line); border-radius: var(--nx-rfull); }
.nx-root .nx-menu__seg button { min-width: 44px; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--nx-rfull); background: none; color: var(--nx-text); font: inherit; font-weight: 700; font-size: var(--nx-fs-small); cursor: pointer; display: inline-grid; place-items: center; }
.nx-root .nx-menu__seg button[aria-pressed="true"] { background: var(--nx-pill); color: var(--nx-pill-text); }
.nx-root .nx-menu__segico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-menu__row--pair .ant-segmented { background: none; border: 1px solid var(--nx-control-line); }
.nx-root .nx-menu__item--report { margin-top: 6px; color: var(--nx-amber-text); border: 1.5px solid var(--nx-amber-text); font-weight: 700; }
.nx-root .nx-menu__item--report:hover { background: var(--nx-amber-soft); }
/* Aria on a phone: one small round button above the bottom bar, bottom left (the guided pointer's button is bottom right) */
.nx-root .nx-aria-fab { display: none; }
@media (max-width: 860px) {
  .nx-root.nx-shell .nx-header .nx-search.nx-askbar { flex: 1 1 auto; width: auto; min-width: 0; padding: 0 4px 0 12px; justify-content: flex-start; }
  .nx-root.nx-shell .nx-header .nx-askbar__k { display: none; }
  .nx-root.nx-shell .nx-header .nx-askbar__in { font-size: 16px; }
  .nx-root.nx-shell .nx-header .nx-search.nx-askbar { min-height: 44px; }
  .nx-root.nx-shell .nx-header .nx-askbar__in { height: var(--nx-tap); }
  .nx-root.nx-shell .nx-header .nx-askbar__go { width: var(--nx-tap); height: var(--nx-tap); }
  .nx-root.nx-shell .nx-header .nx-hbg { margin-right: 2px; }
  .nx-root .nx-aria-fab { display: inline-grid; place-items: center; position: fixed; left: 14px; bottom: calc(var(--nx-bar-h) + 10px + env(safe-area-inset-bottom)); width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--nx-rfull); z-index: 880; cursor: pointer; color: var(--nx-pill-text); background: var(--nx-pill); box-shadow: 0 10px 20px -8px var(--nx-blue); }
  .nx-root .nx-aria-fab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .nx-root .nx-menu__seg button { min-height: var(--nx-tap); }
}
/* New | Classic inside the avatar menu: Classic hides this switch on a phone (styles.css); here it is the one place the switch lives */
.nx-root .nx-menu .look-switch { display: inline-block; }
.nx-root:has(.nx-menu--account) .nx-aria-fab { display: none; }
/* ================================================================ SHOW ME HOW (22 Oct 2026, web/src/nx-guide.jsx): the guided pointer. BEGIN block, append-only, keep it together at the end of this file.
   The rest of the screen dims, the one control to use is lit with a ring, an arrow points at it, a small bubble says what to do. The dim layer and the ring ignore the mouse
   (pointer-events none) so the real control always works; only the bubble and the button are pressed. Tokens only; the pulse and the bounce run only when motion is allowed. */
.nx-root .nx-gd__spot { position: fixed; z-index: 2500; display: none; pointer-events: none; border-radius: var(--nx-r2);
  box-shadow: 0 0 0 9999px var(--nx-scrim), 0 0 0 3px var(--nx-on-blue), 0 0 0 6px var(--nx-blue); }
.nx-root .nx-gd__spot::after { content: ""; position: absolute; inset: -6px; border-radius: calc(var(--nx-r2) + 4px); border: 3px solid var(--nx-blue); opacity: .9; pointer-events: none; }
.nx-root .nx-gd__arrow { position: fixed; z-index: 2501; display: none; width: 54px; height: 54px; pointer-events: none; filter: drop-shadow(0 6px 10px var(--nx-scrim)); }
.nx-root .nx-gd__arrow svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nx-root .nx-gd__arrow path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-gd__edge { stroke: var(--nx-surface); stroke-width: 9; }
.nx-root .nx-gd__ink { stroke: var(--nx-blue); stroke-width: 5; }
.nx-root .nx-gd__bubble { position: fixed; z-index: 2502; box-sizing: border-box; width: min(340px, calc(calc(100 * var(--ao-vw)) - 24px)); display: grid; gap: var(--nx-s2); padding: var(--nx-s4) var(--nx-s5); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); color: var(--nx-text); box-shadow: var(--nx-lift); }
.nx-root .nx-gd__bubble.is-dock { left: 50%; top: auto; bottom: var(--nx-s4); transform: translateX(-50%); }
.nx-root .nx-gd__dots { display: flex; align-items: center; gap: 5px; }
.nx-root .nx-gd__dots i { width: 8px; height: 8px; border-radius: var(--nx-rfull); background: var(--nx-control-line); }
.nx-root .nx-gd__dots i.done { background: var(--nx-blue); }
.nx-root .nx-gd__dots i.on { width: 22px; background: var(--nx-blue); }
.nx-root .nx-gd__title { display: block; font-size: 17px; line-height: 1.3; font-weight: 800; color: var(--nx-text); }
.nx-root .nx-gd__text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--nx-text); }
.nx-root .nx-gd__foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--nx-s2); margin-top: var(--nx-s1); }
.nx-root .nx-gd__count { margin-right: auto; font-size: 13px; font-weight: 700; color: var(--nx-muted); }
/* the button at the bottom right and the short list it opens; on a phone it sits above the bottom bar */
.nx-root .nx-gd__dock { position: fixed; z-index: 90; right: 90px; bottom: 22px;   /* left of the round Assistant button (56 px, 20 px from the edge) */ display: flex; flex-direction: column; align-items: flex-end; gap: var(--nx-s2); }
.nx-root .nx-gd__fab { min-height: 48px; padding: 0 20px; border: 0; border-radius: var(--nx-rfull); background: var(--nx-pill); color: var(--nx-pill-text); font: inherit; font-weight: 800; white-space: nowrap; cursor: pointer; box-shadow: var(--nx-lift); }
.nx-root .nx-gd__fab:hover { filter: brightness(1.06); }
.nx-root .nx-gd__menu { box-sizing: border-box; width: min(320px, calc(calc(100 * var(--ao-vw)) - 24px)); display: grid; gap: 2px; padding: var(--nx-s2); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); color: var(--nx-text); box-shadow: var(--nx-lift); }
.nx-root .nx-gd__menutitle { display: block; padding: var(--nx-s2) var(--nx-s3) var(--nx-s1); font-size: 16px; font-weight: 800; }
.nx-root .nx-gd__item { display: flex; align-items: center; gap: var(--nx-s3); min-height: 48px; padding: 0 var(--nx-s3); border: 0; border-radius: 12px; background: none; color: var(--nx-text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.nx-root .nx-gd__item:hover { background: var(--nx-hover); }
.nx-root .nx-gd__num { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--nx-blue-soft); color: var(--nx-blue-text); font-weight: 800; }
.nx-root .nx-gd__none { margin: 0; padding: var(--nx-s3); color: var(--nx-muted); }
@media (max-width: 860px) {
  .nx-root .nx-gd__dock { right: 14px; bottom: calc(76px + 68px + env(safe-area-inset-bottom)); }   /* above the round Assistant button, which sits above the bottom bar */
  .nx-root .nx-gd__bubble.is-dock { bottom: calc(var(--nx-bar-h, 74px) + 46px + env(safe-area-inset-bottom)); }   /* clears the bottom bar and the raised Chat button */
}
@keyframes nx-gd-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
@keyframes nx-gd-bounce { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-12px); } }
@media (prefers-reduced-motion: no-preference) {
  .nx-root:not(.is-calm) .nx-gd__spot.is-moving { transition: left var(--nx-d3) var(--nx-curve), top var(--nx-d3) var(--nx-curve), width var(--nx-d3) var(--nx-curve), height var(--nx-d3) var(--nx-curve); }
  .nx-root:not(.is-calm) .nx-gd__spot::after { animation: nx-gd-pulse 1.4s ease-out infinite; }
  .nx-root:not(.is-calm) .nx-gd__arrow svg { animation: nx-gd-bounce .8s ease-in-out infinite; }
}
/* END SHOW ME HOW */


/* ---------------------------------------------------------------- THE LOADING SCREEN (23 Oct 2026, Sheraz: the NaaS loader, lab LOADER-NAAS.html). The first thing every person sees when the app opens.
   Its markup is in the page (web/src/loader-shell.html, put into index.html by build.mjs) so it shows before any script has run; it brings its own .nx-root, so the tokens and the saved theme (theme-boot.js sets
   data-palette first) colour it in all seven themes. Its brain is theme-boot.js (window.AOL: steps, the 12 second sentence, failure, removal). Tokens only. Motion only inside prefers-reduced-motion: no-preference,
   so with reduced motion it is one still picture. Two languages: the page language (theme-boot.js sets it from the saved choice) shows the .aol__zh text. */
.nx-root.aol { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: var(--nx-s6) var(--nx-s4); overflow: auto; background-color: var(--nx-bg); background-image: var(--nx-back); color: var(--nx-text); }
.nx-root .aol__grid { position: fixed; inset: 0; pointer-events: none; opacity: .55; background-image: radial-gradient(60% 40% at 50% 0%, color-mix(in srgb, var(--nx-blue) 16%, transparent), transparent 70%), linear-gradient(color-mix(in srgb, var(--nx-blue) 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--nx-blue) 10%, transparent) 1px, transparent 1px); background-size: 100% 100%, 38px 38px, 38px 38px; -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, var(--nx-text) 30%, transparent 100%); mask-image: radial-gradient(70% 70% at 50% 50%, var(--nx-text) 30%, transparent 100%); }
.nx-root .aol__box { position: relative; width: min(800px, 100%); text-align: center; }
.nx-root .aol__zh { display: none; }
.nx-root:lang(zh) .aol__zh { display: inline; }
.nx-root:lang(zh) .aol__en { display: none; }
.nx-root .aol__brand { display: flex; align-items: center; justify-content: center; gap: var(--nx-s3); margin: 0 0 var(--nx-s2); }
.nx-root .aol__mark { flex: none; width: 52px; height: 52px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--nx-cyan) 55%, transparent)); }
.nx-root .aol__name { font-size: 22px; font-weight: 800; letter-spacing: .01em; }
.nx-root .aol__net { display: block; width: 100%; height: auto; overflow: visible; }

/* the network: two companies, the Agent Office hub, the customer sites. What is lit follows the real steps (--lit): the companies at once, the hub when the app has started, the customers when the office data is coming. */
.nx-root .aol__nd { --lit: 0; }
.nx-root .aol__nd--a, .nx-root .aol__nd--b, .nx-root.aol--s1 .aol__nd--hub, .nx-root.aol--s2 .aol__nd--cus { --lit: 1; }
.nx-root .aol__nd--a { --c: var(--nx-blue); }
.nx-root .aol__nd--b, .nx-root .aol__nd--hub { --c: var(--nx-amber); }
.nx-root .aol__ring { fill: color-mix(in srgb, var(--c, var(--nx-amber)) 9%, var(--nx-surface)); stroke: var(--c, var(--nx-amber)); stroke-width: 2.5; opacity: calc(.3 + .7 * var(--lit)); }
.nx-root .aol__mast { stroke: var(--nx-muted); stroke-width: 3; stroke-linecap: round; }
.nx-root .aol__bcn { fill: var(--c); opacity: calc(.35 + .65 * var(--lit)); }
.nx-root .aol__sig { fill: none; stroke: var(--c); stroke-width: 2; opacity: calc(.3 * var(--lit)); transform-box: fill-box; transform-origin: center; transform: scale(3.5); }
.nx-root .aol__core { fill: var(--nx-amber); opacity: calc(.4 + .6 * var(--lit)); }
.nx-root .aol__bld { fill: var(--nx-blue-soft); stroke: var(--nx-blue); stroke-width: 1.5; opacity: calc(.4 + .6 * var(--lit)); }
.nx-root .aol__lb { fill: var(--nx-text); font-size: 21px; font-weight: 700; text-anchor: middle; opacity: calc(.6 + .4 * var(--lit)); }
.nx-root .aol__rt { fill: none; stroke-width: 3; stroke-linecap: round; opacity: .2; }
.nx-root .aol__rt--hub { stroke: var(--nx-amber); }
.nx-root .aol__rt--net { stroke: var(--nx-amber); opacity: .6; }
.nx-root .aol__rt--dark { stroke-dasharray: 2 8; }
.nx-root .aol__rt--c1 { stroke: var(--nx-blue); }
.nx-root .aol__rt--c2 { stroke: var(--nx-amber); }
.nx-root.aol--s1 .aol__rt--hub { opacity: .85; }
.nx-root.aol--s2 .aol__rt--cus { opacity: .85; }
.nx-root .aol__p { display: none; }
.nx-root .aol__dot { fill: var(--nx-blue); stroke: var(--nx-surface); stroke-width: 2; filter: drop-shadow(0 0 4px var(--nx-blue)); }

/* what the person reads: one calm line, a fibre line that fills as the steps finish, then (only if needed) the slow sentence or the failure */
.nx-root .aol__sub { margin: var(--nx-s3) 0; min-height: 26px; font-size: 17px; font-weight: 600; color: var(--nx-muted); }
.nx-root .aol__st { display: none; }
.nx-root[data-step="0"] .aol__st0, .nx-root[data-step="1"] .aol__st1, .nx-root[data-step="2"] .aol__st2, .nx-root[data-step="3"] .aol__st2 { display: inline; }
.nx-root .aol__bar { position: relative; width: min(420px, 86%); height: 8px; margin: 0 auto; border-radius: var(--nx-rfull); background: color-mix(in srgb, var(--nx-text) 12%, transparent); }
.nx-root .aol__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 10%; border-radius: var(--nx-rfull); background: linear-gradient(90deg, var(--nx-blue), var(--nx-cyan)); box-shadow: 0 0 12px color-mix(in srgb, var(--nx-cyan) 70%, transparent); }
.nx-root .aol__fill::after { content: ""; position: absolute; right: -5px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--nx-surface); box-shadow: 0 0 0 2px var(--nx-cyan), 0 0 14px 5px color-mix(in srgb, var(--nx-cyan) 70%, transparent); }
.nx-root[data-step="1"] .aol__fill { width: 40%; }
.nx-root[data-step="2"] .aol__fill { width: 72%; }
.nx-root[data-step="3"] .aol__fill { width: 100%; }
.nx-root .aol__slow, .nx-root .aol__fail, .nx-root .aol__f, .nx-root .aol__chk { display: none; }
.nx-root.aol--slow .aol__slow { display: block; margin: var(--nx-s5) auto 0; max-width: 460px; padding: var(--nx-s4); border: 1px solid var(--nx-amber); border-radius: var(--nx-r2); background: var(--nx-amber-soft); font-size: var(--nx-fs-body); }
.nx-root .aol__slow p, .nx-root .aol__f p { margin: 0 0 var(--nx-s3); }
.nx-root .aol__btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--nx-tap); padding: 0 var(--nx-s5); border: 1px solid transparent; border-radius: var(--nx-rfull); background: var(--nx-blue); color: var(--nx-on-blue); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.nx-root .aol__btn:focus-visible { outline: var(--nx-focus-ring); outline-offset: 2px; }
.nx-root.aol--fail .aol__wait { display: none; }
.nx-root.aol--fail .aol__fail { display: block; margin-top: var(--nx-s4); }
.nx-root.aol--down .aol__f--down, .nx-root.aol--updating .aol__f--updating, .nx-root.aol--script .aol__f--script { display: block; }
.nx-root .aol__ft { margin: 0 0 var(--nx-s2); font-size: 20px; font-weight: 800; line-height: 1.3; }
.nx-root .aol__f p { color: var(--nx-muted); }
.nx-root .aol__btn.aol__btn--reload { display: none; }
.nx-root.aol--script .aol__btn.aol__btn--retry { display: none; }
.nx-root.aol--script .aol__btn.aol__btn--reload { display: inline-flex; }
.nx-root.aol--busy .aol__btn { opacity: .6; pointer-events: none; }
.nx-root.aol--busy .aol__chk { display: block; margin: var(--nx-s3) 0 0; color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root.aol--fail .aol__net { opacity: .45; }
.nx-root.aol--out { opacity: 0; pointer-events: none; }
@media (max-width: 560px) {
  .nx-root.aol { padding: var(--nx-s4) var(--nx-s4); }
  .nx-root .aol__lb { font-size: 28px; }
  .nx-root .aol__name { font-size: 20px; }
  .nx-root .aol__mark { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: no-preference) {
  .nx-root.aol { transition: opacity 420ms ease; }
  .nx-root .aol__fill { transition: width 600ms ease; }
  .nx-root .aol__ring, .nx-root .aol__rt, .nx-root .aol__bld, .nx-root .aol__lb, .nx-root .aol__core, .nx-root .aol__bcn { transition: opacity 500ms ease; }
  .nx-root .aol__mark { animation: nx-aol-breathe 3.2s ease-in-out infinite; }
  .nx-root .aol__sig { animation: nx-aol-sig 2.2s ease-out infinite; }
  .nx-root .aol__sig--b { animation-delay: 1.1s; }
  .nx-root.aol .aol__p--net, .nx-root.aol--s1 .aol__p--hub, .nx-root.aol--s2 .aol__p--cus { display: inline; }
  .nx-root.aol--fail .aol__p { display: none; }
  .nx-root.aol--fail .aol__sig { animation: none; }
}
@keyframes nx-aol-breathe { 0%, 100% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--nx-cyan) 35%, transparent)); } 50% { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--nx-cyan) 75%, transparent)); } }
@keyframes nx-aol-sig { 0% { opacity: calc(.8 * var(--lit)); transform: scale(1); } 100% { opacity: 0; transform: scale(6.5); } }
/* END LOADING SCREEN */

/* BACKGROUND WORK (29 Oct 2026): the top bar button and the panel of what is running now (nx-bgwork.jsx) */
.nx-root .nx-bgbtn svg { stroke: currentColor; }
.nx-root .nx-bgbtn.is-busy svg { animation: nx-bg-spin 2.4s linear infinite; transform-origin: 50% 50%; }
.nx-root .nx-bgbtn__n { position: absolute; top: -2px; right: -2px; font-size: 11px; padding: 0 5px; min-width: 18px; text-align: center; }
.nx-root .nx-bg__list { list-style: none; margin: var(--nx-s3) 0 0; padding: 0; display: grid; gap: var(--nx-s3); }
.nx-root .nx-bg__job { border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s3); background: var(--nx-surface); min-width: 0; }
.nx-root .nx-bg__head { display: flex; flex-wrap: wrap; gap: var(--nx-s2); align-items: baseline; justify-content: space-between; }
.nx-root .nx-bg__title { overflow-wrap: anywhere; }
.nx-root .nx-bg__who { color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-bg__line { margin: var(--nx-s2) 0 0; display: flex; gap: var(--nx-s2); align-items: center; overflow-wrap: anywhere; }
.nx-root .nx-bg__dot { flex: none; width: 8px; height: 8px; border-radius: var(--nx-rfull); background: var(--nx-blue); animation: nx-bg-pulse 1.6s ease-in-out infinite; }
.nx-root .nx-bg__job[data-state="queued"] .nx-bg__dot { background: var(--nx-muted); animation: none; }
.nx-root .nx-bg__meta { margin: var(--nx-s1) 0 0; }
.nx-root .nx-bg__acts { display: flex; flex-wrap: wrap; gap: var(--nx-s2); margin-top: var(--nx-s3); }
.nx-root .nx-bg__empty { margin: var(--nx-s4) 0; color: var(--nx-muted); }
@keyframes nx-bg-spin { to { transform: rotate(360deg); } }
@keyframes nx-bg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .nx-root .nx-bgbtn.is-busy svg, .nx-root .nx-bg__dot { animation: none; } }
/* END BACKGROUND WORK */
/* ONE SEARCH AND ASK BOX (30 Oct 2026): the popup holds the same field as the header (SearchField, nx-search.jsx); these rules only give it room inside the popup and style the one muted line. No motion. */
.nx-root .nx-pal__top { padding: var(--nx-s3) var(--nx-s3) var(--nx-s2); }
.nx-root .nx-pal__top .nx-askbar { display: flex; align-items: center; width: 100%; max-width: none; min-height: 48px; }
.nx-root .nx-pal__top .nx-askbar__in { height: 44px; font-size: 16px; }
.nx-root .nx-pal__top .nx-pal__close { border: 0; min-height: 32px; }
.nx-root .nx-pal__line { padding: 2px var(--nx-s4) var(--nx-s2); color: var(--nx-muted); font-size: var(--nx-fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .nx-root .nx-pal__line { white-space: normal; } .nx-root .nx-pal__top .nx-askbar__go { width: var(--nx-tap); height: var(--nx-tap); } }
/* END ONE SEARCH AND ASK BOX */

/* The cards' gloss (a light edge on top, a shade below): the same in every theme, kept in two tokens. */
.nx-root { --nx-dv-hi: white; --nx-dv-lo: black; }
/* ADMIN > PEOPLE > DEPARTMENTS, REDESIGNED (29 Oct 2026, nx-departments-split.jsx, deptview.mjs). Tokens only, every selector under .nx-root. Soft depth: a layered shadow, a paper edge behind each card, a lift and a slight tilt on a
   pointer that hovers (never on touch, never with reduced motion), and a gradient tile with one picture per function. */
.nx-root .nx-dv { display: grid; gap: var(--nx-s4); min-width: 0; }
.nx-root .nx-dv-bar { display: flex; flex-wrap: wrap; gap: var(--nx-s3); align-items: center; }
.nx-root .nx-dv-chips { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-dv-chip { display: inline-flex; align-items: center; gap: var(--nx-s2); min-height: var(--nx-tap); padding: 0 var(--nx-s3) 0 var(--nx-s2); border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); background: var(--nx-surface); color: var(--nx-text); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 1px 2px color-mix(in srgb, var(--nx-text) 10%, transparent); transition: box-shadow .15s ease, border-color .15s ease; }
.nx-root .nx-dv-chip:hover { box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--nx-text) 28%, transparent); }
.nx-root .nx-dv-chip.is-on { border-color: var(--nx-blue); background: color-mix(in srgb, var(--nx-blue) 12%, var(--nx-surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--nx-blue) 25%, transparent); }
.nx-root .nx-dv-chip:focus-visible, .nx-root .nx-dv-card:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; }
.nx-root .nx-dv-chip__n { min-width: 24px; padding: 0 var(--nx-s2); border-radius: var(--nx-rfull); background: var(--nx-hover); color: var(--nx-muted); font-size: var(--nx-fs-small); text-align: center; line-height: 22px; }
.nx-root .nx-dv-chip.is-on .nx-dv-chip__n { background: var(--nx-blue); color: var(--nx-on-blue); }
.nx-root .nx-dv-chip__all { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--nx-rfull); background: var(--nx-hover); color: var(--nx-muted); }
.nx-root .nx-dv-co { display: inline-flex; align-items: center; gap: var(--nx-s1); color: var(--nx-muted); font-size: var(--nx-fs-small); font-weight: 600; min-width: 0; }
.nx-root .nx-dv-co__logo { width: 26px; height: 26px; border-radius: 8px; object-fit: contain; background: var(--nx-plate); padding: 2px; box-shadow: 0 1px 2px color-mix(in srgb, var(--nx-text) 18%, transparent); }
.nx-root .nx-dv-co__init { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--nx-hover); font-size: 12px; font-weight: 800; }
.nx-root .nx-dv-search { position: relative; display: block; flex: 1 1 240px; min-width: 0; }
.nx-root .nx-dv-search .nx-dv-ico { position: absolute; left: var(--nx-s3); top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--nx-muted); pointer-events: none; }
.nx-root .nx-dv-search .nx-input { width: 100%; padding-left: 40px; }
.nx-root .nx-dv-ico { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.nx-root .nx-dv-split { display: grid; gap: var(--nx-s4); grid-template-columns: minmax(0, 1fr); align-items: start; }
.nx-root .nx-dv-split.is-wide { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); }
.nx-root .nx-dv-main { display: grid; gap: var(--nx-s5); min-width: 0; }
.nx-root .nx-dv-grid { display: grid; gap: var(--nx-s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.nx-root .nx-dv-cell { min-width: 0; display: grid; }

/* the card */
.nx-root .nx-dv-card { position: relative; isolation: isolate; display: grid; align-content: start; grid-template-rows: auto auto 1fr; gap: var(--nx-s3); width: 100%; height: 100%; text-align: left; font: inherit; color: var(--nx-text); padding: var(--nx-s4); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nx-surface) 88%, var(--nx-dv-hi)), var(--nx-surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nx-dv-hi) 55%, transparent), 0 1px 2px color-mix(in srgb, var(--nx-text) 10%, transparent), 0 10px 20px -14px color-mix(in srgb, var(--nx-text) 45%, transparent);
  transform: perspective(800px) rotateX(var(--nx-dv-rx, 0deg)) rotateY(var(--nx-dv-ry, 0deg)); transition: transform .16s ease, box-shadow .16s ease, translate .16s ease, border-color .16s ease; }
.nx-root .nx-dv-card::before { content: ""; position: absolute; z-index: -1; left: 7px; right: 7px; bottom: -6px; height: 100%; border-radius: var(--nx-r2); background: var(--nx-line); opacity: .55; }
.nx-root .nx-dv-card:hover { translate: 0 -3px; border-color: color-mix(in srgb, var(--nx-blue) 45%, var(--nx-line)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nx-dv-hi) 55%, transparent), 0 2px 4px color-mix(in srgb, var(--nx-text) 12%, transparent), 0 20px 28px -14px color-mix(in srgb, var(--nx-blue) 40%, transparent); }
.nx-root .nx-dv-card.is-sel { border-color: var(--nx-blue); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nx-dv-hi) 55%, transparent), 0 0 0 2px color-mix(in srgb, var(--nx-blue) 30%, transparent), 0 16px 26px -14px color-mix(in srgb, var(--nx-blue) 45%, transparent); }
.nx-root .nx-dv-card.is-retired { opacity: .7; }
.nx-root .nx-dv-card__top { display: flex; gap: var(--nx-s3); align-items: flex-start; min-width: 0; }
.nx-root .nx-dv-card__id { display: grid; gap: var(--nx-s1); min-width: 0; flex: 1 1 auto; }
.nx-root .nx-dv-card__name { font-size: var(--nx-fs-h3); line-height: 1.25; overflow-wrap: anywhere; }
.nx-root .nx-dv-card__meta { display: flex; flex-wrap: wrap; gap: var(--nx-s2); align-items: center; }
.nx-root .nx-dv-card__head { display: flex; align-items: center; gap: var(--nx-s2); min-height: 28px; min-width: 0; }
.nx-root .nx-dv-card__hn { display: grid; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.nx-root .nx-dv-card__hn small { color: var(--nx-muted); font-weight: 500; font-size: 12px; }
.nx-root .nx-dv-card__nohead { display: inline-flex; gap: var(--nx-s2); align-items: center; color: var(--nx-muted); }
.nx-root .nx-dv-card__foot { align-self: end; display: flex; align-items: center; gap: var(--nx-s3); padding-top: var(--nx-s3); border-top: 1px solid var(--nx-line); min-width: 0; flex-wrap: wrap; }
.nx-root .nx-dv-lockword { display: inline-flex; gap: var(--nx-s1); align-items: center; color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-dv-count { display: inline-flex; gap: var(--nx-s1); align-items: center; margin-left: auto; font-weight: 800; }
.nx-root .nx-dv-count small { color: var(--nx-muted); font-weight: 600; }
.nx-root .nx-dv-dot { width: 11px; height: 11px; border-radius: var(--nx-rfull); flex: none; background: var(--nx-muted); box-shadow: inset 0 -2px 2px color-mix(in srgb, var(--nx-dv-lo) 25%, transparent), 0 0 0 3px color-mix(in srgb, var(--nx-muted) 20%, transparent); }
.nx-root .nx-dv-dot--on { background: var(--nx-success); box-shadow: inset 0 -2px 2px color-mix(in srgb, var(--nx-dv-lo) 25%, transparent), 0 0 0 3px color-mix(in srgb, var(--nx-success) 25%, transparent); }
.nx-root .nx-dv-dot--idle { background: var(--nx-amber); box-shadow: inset 0 -2px 2px color-mix(in srgb, var(--nx-dv-lo) 25%, transparent), 0 0 0 3px color-mix(in srgb, var(--nx-amber) 28%, transparent); }
.nx-root .nx-dv-stack { display: inline-flex; align-items: center; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-dv-stack--none { color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-dv-stack__av { display: inline-flex; align-items: center; }
.nx-root .nx-dv-stack__av .nx-pic { margin-left: -6px; box-shadow: 0 0 0 2px var(--nx-surface); }
.nx-root .nx-dv-stack__av .nx-pic:first-child { margin-left: 0; }
.nx-root .nx-dv-stack__ghost { width: 22px; height: 22px; border-radius: var(--nx-rfull); background: var(--nx-hover); }
.nx-root .nx-dv-stack__n { font-weight: 800; }

/* the tile: one picture per function on a gradient, with an edge of light and a short shadow */
.nx-root .nx-dv-tile { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: var(--nx-on-blue);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nx-dv-hi) 50%, transparent), inset 0 -4px 7px color-mix(in srgb, var(--nx-dv-lo) 20%, transparent), 0 8px 14px -6px color-mix(in srgb, var(--nx-text) 45%, transparent), 0 2px 3px color-mix(in srgb, var(--nx-text) 20%, transparent); }
.nx-root .nx-dv-tile .nx-dv-ico { width: 26px; height: 26px; stroke-width: 1.9; filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--nx-dv-lo) 30%, transparent)); }
.nx-root .nx-dv-tile svg:not(.nx-dv-ico) { width: 30px; height: 30px; border-radius: 4px; filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--nx-dv-lo) 35%, transparent)); }
.nx-root .nx-dv-tile--lg { width: 64px; height: 64px; border-radius: 20px; }
.nx-root .nx-dv-tile--lg .nx-dv-ico { width: 34px; height: 34px; }
.nx-root .nx-dv-tile--lg svg:not(.nx-dv-ico) { width: 40px; height: 40px; }
.nx-root .nx-dv-g-blue { --nx-dv-a: var(--nx-blue); --nx-dv-b: var(--nx-cyan); }
.nx-root .nx-dv-g-teal { --nx-dv-a: var(--nx-cyan); --nx-dv-b: var(--nx-success); }
.nx-root .nx-dv-g-green { --nx-dv-a: var(--nx-success); --nx-dv-b: var(--nx-cyan); }
.nx-root .nx-dv-g-amber { --nx-dv-a: var(--nx-amber); --nx-dv-b: var(--nx-danger); }
.nx-root .nx-dv-g-red { --nx-dv-a: var(--nx-danger); --nx-dv-b: var(--nx-amber); }
.nx-root .nx-dv-g-ink { --nx-dv-a: color-mix(in srgb, var(--nx-text) 70%, var(--nx-blue)); --nx-dv-b: var(--nx-blue); }
.nx-root .nx-dv-tile { background: linear-gradient(150deg, color-mix(in srgb, var(--nx-dv-a) 88%, var(--nx-dv-hi)), color-mix(in srgb, var(--nx-dv-b) 85%, var(--nx-dv-a))); }
.nx-root .nx-dv-tile.is-flag { background: linear-gradient(150deg, color-mix(in srgb, var(--nx-surface) 92%, var(--nx-dv-hi)), color-mix(in srgb, var(--nx-hover) 70%, var(--nx-surface))); }

/* personal spaces */
.nx-root .nx-dv-spaces { border: 1px dashed var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s3) var(--nx-s4); background: color-mix(in srgb, var(--nx-hover) 40%, transparent); }
.nx-root .nx-dv-spaces > summary { display: flex; flex-wrap: wrap; gap: var(--nx-s2) var(--nx-s4); align-items: baseline; cursor: pointer; min-height: var(--nx-tap); }
.nx-root .nx-dv-spaces__t { display: inline-flex; gap: var(--nx-s2); align-items: center; font-weight: 800; }
.nx-root .nx-dv-spaces__h { color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-dv-spaces__list { list-style: none; margin: var(--nx-s3) 0 0; padding: 0; display: grid; gap: var(--nx-s2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.nx-root .nx-dv-space { display: flex; align-items: center; gap: var(--nx-s2); padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r1); background: var(--nx-surface); border: 1px solid var(--nx-line); min-width: 0; flex-wrap: wrap; }
.nx-root .nx-dv-space__w { display: grid; min-width: 0; flex: 1 1 120px; overflow-wrap: anywhere; line-height: 1.25; }
.nx-root .nx-dv-space__w small { color: var(--nx-muted); }

/* the department on the right */
.nx-root .nx-dv-aside { position: sticky; top: calc(var(--nx-header-h) + var(--nx-s3)); max-height: calc(calc(100 * var(--ao-dvh)) - var(--nx-header-h) - var(--nx-s6)); overflow: auto; border-radius: var(--nx-r2); border: 1px solid var(--nx-line); background: var(--nx-surface); box-shadow: var(--nx-panel-shadow); }
.nx-root .nx-dv-detail { display: grid; gap: var(--nx-s4); padding-bottom: var(--nx-s4); min-width: 0; }
.nx-root .nx-dv-hero { position: relative; display: flex; gap: var(--nx-s4); align-items: center; padding: var(--nx-s5) var(--nx-s4); color: var(--nx-on-blue);
  background: linear-gradient(150deg, color-mix(in srgb, var(--nx-dv-a) 90%, var(--nx-dv-hi)), color-mix(in srgb, var(--nx-dv-b) 80%, var(--nx-dv-a))); border-radius: var(--nx-r2) var(--nx-r2) 0 0; }
.nx-root .nx-dv-hero h2 { margin: 0 0 var(--nx-s2); font-size: var(--nx-fs-h2); overflow-wrap: anywhere; color: inherit; }
.nx-root .nx-dv-hero__t { min-width: 0; }
.nx-root .nx-dv-hero__p { display: flex; flex-wrap: wrap; gap: var(--nx-s2); align-items: center; }
.nx-root .nx-dv-hero .nx-dv-co { color: inherit; background: color-mix(in srgb, var(--nx-dv-hi) 22%, transparent); padding: 2px var(--nx-s2) 2px 2px; border-radius: var(--nx-rfull); }
.nx-root .nx-dv-hero__x { position: absolute; top: var(--nx-s2); right: var(--nx-s2); width: var(--nx-tap); height: var(--nx-tap); display: grid; place-items: center; border: 0; border-radius: var(--nx-rfull); background: color-mix(in srgb, var(--nx-dv-hi) 20%, transparent); color: inherit; cursor: pointer; }
.nx-root .nx-dv-hero__x .nx-dv-ico { transform: rotate(45deg); }
.nx-root .nx-dv-lead, .nx-root .nx-dv-acts, .nx-root .nx-dv-add { margin: 0 var(--nx-s4); }
.nx-root .nx-dv-lead { color: var(--nx-muted); max-width: 62ch; }
.nx-root .nx-dv-acts { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-dv-box { margin: 0 var(--nx-s4); padding: var(--nx-s3) var(--nx-s4) var(--nx-s4); border: 1px solid var(--nx-line); border-radius: var(--nx-r1); background: color-mix(in srgb, var(--nx-hover) 30%, var(--nx-surface)); min-width: 0; }
.nx-root .nx-dv-box h3 { margin: 0 0 var(--nx-s3); font-size: var(--nx-fs-body); }
.nx-root .nx-dv-person, .nx-root .nx-dv-people > li, .nx-root .nx-dv-agents > li { display: flex; align-items: center; gap: var(--nx-s3); min-width: 0; flex-wrap: wrap; }
.nx-root .nx-dv-people, .nx-root .nx-dv-agents { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-dv-people__w { display: grid; flex: 1 1 140px; min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
.nx-root .nx-dv-people__w small { color: var(--nx-muted); }
.nx-root .nx-dv-people__a { display: inline-flex; gap: var(--nx-s2); flex-wrap: wrap; }
.nx-root .nx-dv-mgr { display: flex; gap: var(--nx-s2); align-items: center; margin: var(--nx-s3) 0 0; color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-dv-chipsline { display: flex; flex-wrap: wrap; gap: var(--nx-s2); margin: 0; }
.nx-root .nx-dv-sys { padding: 3px var(--nx-s3); border-radius: var(--nx-rfull); background: var(--nx-hover); font-size: var(--nx-fs-small); font-weight: 600; }
.nx-root .nx-dv-facts { margin: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-dv-facts dt { color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-dv-facts dd { margin: 0; display: flex; gap: var(--nx-s2); align-items: center; }

/* loading */
.nx-root .nx-dv-card.is-skel { cursor: default; min-height: 150px; }
.nx-root .nx-dv-skel { display: block; border-radius: var(--nx-r1); background: linear-gradient(90deg, var(--nx-hover), color-mix(in srgb, var(--nx-hover) 35%, var(--nx-surface)), var(--nx-hover)); background-size: 220% 100%; animation: nx-dv-shimmer 1.4s linear infinite; }
.nx-root .nx-dv-skel--tile { width: 48px; height: 48px; border-radius: 15px; }
.nx-root .nx-dv-skel--l { height: 16px; width: 70%; }
.nx-root .nx-dv-skel--s { height: 12px; width: 45%; }
.nx-root .nx-dv-skel--row { height: 34px; margin-bottom: var(--nx-s2); }
@keyframes nx-dv-shimmer { to { background-position: -220% 0; } }
@media (max-width: 640px) {
  .nx-root .nx-dv-bar { align-items: stretch; }
  .nx-root .nx-dv-search { flex-basis: 100%; }
  .nx-root .nx-dv-card__top { flex-wrap: wrap; }
  .nx-root .nx-dv-box, .nx-root .nx-dv-lead, .nx-root .nx-dv-acts, .nx-root .nx-dv-add { margin-left: var(--nx-s3); margin-right: var(--nx-s3); }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .nx-root .nx-dv-card { transform: none; }
  .nx-root .nx-dv-card:hover { translate: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-root .nx-dv-skel, .nx-root .nx-dv-card, .nx-root .nx-dv-chip { animation: none; transition: none; }
}
/* the i that holds what is too long, the status mark, the picture of an empty list */
.nx-root .nx-dv-i-w { position: relative; display: inline-flex; margin-left: var(--nx-s2); vertical-align: middle; }
.nx-root .nx-dv-i { width: 22px; height: 22px; border-radius: var(--nx-rfull); border: 1px solid var(--nx-line); background: var(--nx-surface); color: var(--nx-muted); font: italic 700 13px/1 serif; cursor: help; padding: 0; }
.nx-root .nx-dv-i:hover, .nx-root .nx-dv-i:focus-visible { color: var(--nx-blue); border-color: var(--nx-blue); outline: none; }
.nx-root .nx-dv-i__tip { position: absolute; z-index: 5; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); width: max-content; max-width: min(260px, calc(70 * var(--ao-vw))); padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r1); background: var(--nx-surface); color: var(--nx-text); border: 1px solid var(--nx-line); box-shadow: var(--nx-panel-shadow); font-size: var(--nx-fs-small); font-weight: 500; text-align: left; display: none; }
.nx-root .nx-dv-i:hover + .nx-dv-i__tip, .nx-root .nx-dv-i:focus + .nx-dv-i__tip { display: block; }
.nx-root .nx-dv-mk { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-dv-lead { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.nx-root .nx-dv-empty { display: grid; justify-items: center; gap: var(--nx-s3); padding: var(--nx-s6) var(--nx-s4); text-align: center; }
.nx-root .nx-dv-empty p { margin: 0; font-weight: 700; }
.nx-root .nx-dv-art { width: min(220px, 60%); height: auto; fill: none; stroke: var(--nx-blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-dv-art rect { fill: color-mix(in srgb, var(--nx-blue) 10%, var(--nx-surface)); }
.nx-root .nx-dv-art__b { fill: color-mix(in srgb, var(--nx-cyan) 16%, var(--nx-surface)); stroke: var(--nx-cyan); }
.nx-root .nx-dv-art__c { stroke: var(--nx-amber); fill: color-mix(in srgb, var(--nx-amber) 14%, var(--nx-surface)); }
.nx-root .nx-dv-art__m { stroke: var(--nx-text); }
.nx-root .nx-dv-art--error .nx-dv-art__m { stroke: var(--nx-danger); }
.nx-root .nx-dv-art__a { animation: nx-dv-float 3.2s ease-in-out infinite; }
.nx-root .nx-dv-art__b { animation: nx-dv-float 3.2s ease-in-out -1s infinite; }
.nx-root .nx-dv-art__c { animation: nx-dv-float 3.2s ease-in-out -2s infinite; }
@keyframes nx-dv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .nx-root .nx-dv-art rect { animation: none; } }
/* END DEPARTMENTS VIEW */

/* THE AGENTS PAGE, REDESIGNED (29 Oct 2026, nx-agentcard.jsx, nx-agents.jsx, nx-perf.jsx, agentview.mjs). Same language as the Departments view (nx-w31.css): a paper edge behind each card, a layered shadow, a lift and a slight tilt on a
   pointer that hovers (never touch, never reduced motion), a gradient tile with a picture of what the agent does. Tokens only, every selector under .nx-root. Status colours are reserved: green done, amber waits, red failed, always with an icon and a word. */
.nx-root .nx-ag-chips { display: flex; flex-wrap: wrap; gap: var(--nx-s2); align-items: center; margin: var(--nx-s3) 0 var(--nx-s2); }
.nx-root .nx-ag-chips__sep { width: 1px; align-self: stretch; background: var(--nx-line); margin: 0 var(--nx-s1); }
.nx-root .nx-ag-dchip__t { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; color: var(--nx-on-blue); background: linear-gradient(150deg, color-mix(in srgb, var(--nx-dv-a) 88%, var(--nx-dv-hi)), color-mix(in srgb, var(--nx-dv-b) 85%, var(--nx-dv-a))); }
.nx-root .nx-ag-dchip__t svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-ag-more { padding: 0 var(--nx-s3); color: var(--nx-muted); }

/* the group header: the department's own picture, its name, how many */
.nx-root .nx-ag-grp { display: flex; align-items: center; gap: var(--nx-s3); margin: var(--nx-s5) 0 var(--nx-s3); }
.nx-root .nx-ag-grp__t { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--nx-on-blue); background: linear-gradient(150deg, color-mix(in srgb, var(--nx-dv-a) 88%, var(--nx-dv-hi)), color-mix(in srgb, var(--nx-dv-b) 85%, var(--nx-dv-a))); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nx-dv-hi) 45%, transparent), 0 6px 10px -6px color-mix(in srgb, var(--nx-text) 45%, transparent); }
.nx-root .nx-ag-grp__t svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-ag-grp__n { font-size: var(--nx-fs-h3); font-weight: 800; overflow-wrap: anywhere; }
.nx-root .nx-ag-grp__c { min-width: 26px; padding: 0 var(--nx-s2); border-radius: var(--nx-rfull); background: var(--nx-hover); color: var(--nx-muted); font-size: var(--nx-fs-small); font-weight: 800; text-align: center; line-height: 24px; }

/* the card */
.nx-root .nx-acgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--nx-s4); }
.nx-root .nx-ac.nx-ag { position: relative; isolation: isolate; display: grid; align-content: start; gap: var(--nx-s3); padding: var(--nx-s4); min-width: 0; border: 1px solid var(--nx-line); border-radius: var(--nx-r2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--nx-surface) 88%, var(--nx-dv-hi)), var(--nx-surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nx-dv-hi) 55%, transparent), 0 1px 2px color-mix(in srgb, var(--nx-text) 10%, transparent), 0 10px 20px -14px color-mix(in srgb, var(--nx-text) 45%, transparent);
  transform: perspective(800px) rotateX(var(--nx-dv-rx, 0deg)) rotateY(var(--nx-dv-ry, 0deg)); transition: transform .16s ease, box-shadow .16s ease, translate .16s ease, border-color .16s ease; cursor: pointer; }
.nx-root .nx-ac.nx-ag::before { content: ""; position: absolute; z-index: -1; left: 7px; right: 7px; bottom: -6px; height: 100%; border-radius: var(--nx-r2); background: var(--nx-line); opacity: .55; }
.nx-root .nx-ac.nx-ag:hover { translate: 0 -3px; border-color: color-mix(in srgb, var(--nx-blue) 45%, var(--nx-line)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nx-dv-hi) 55%, transparent), 0 2px 4px color-mix(in srgb, var(--nx-text) 12%, transparent), 0 20px 28px -14px color-mix(in srgb, var(--nx-blue) 40%, transparent); }
.nx-root .nx-ac.nx-ag.is-selected { border-color: var(--nx-blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--nx-blue) 30%, transparent), 0 16px 26px -14px color-mix(in srgb, var(--nx-blue) 45%, transparent); }
.nx-root .nx-ac.nx-ag.is-locked { opacity: .78; }
.nx-root .nx-ag__top { display: flex; gap: var(--nx-s3); align-items: flex-start; min-width: 0; }
.nx-root .nx-ag__id { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.nx-root .nx-ag__name { margin: 0; font-size: var(--nx-fs-body); font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.nx-root .nx-ag__who { color: var(--nx-muted); font-size: var(--nx-fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-root .nx-ag-tile { position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: var(--nx-on-blue);
  background: linear-gradient(150deg, color-mix(in srgb, var(--nx-dv-a) 88%, var(--nx-dv-hi)), color-mix(in srgb, var(--nx-dv-b) 85%, var(--nx-dv-a)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nx-dv-hi) 50%, transparent), inset 0 -4px 7px color-mix(in srgb, var(--nx-dv-lo) 20%, transparent), 0 8px 14px -6px color-mix(in srgb, var(--nx-text) 45%, transparent), 0 2px 3px color-mix(in srgb, var(--nx-text) 20%, transparent); }
.nx-root .nx-ag-tile svg { width: 25px; height: 25px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--nx-dv-lo) 30%, transparent)); }
.nx-root .nx-ag-tile.has-pic { padding: 0; background: var(--nx-hover); }
.nx-root .nx-ag-tile.has-pic img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block; }
.nx-root .nx-ag-badge { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--nx-rfull); background: var(--nx-surface); color: var(--nx-amber); box-shadow: 0 0 0 2px var(--nx-surface), 0 2px 4px color-mix(in srgb, var(--nx-text) 30%, transparent); }
.nx-root .nx-ag-badge--person { color: var(--nx-blue); }
.nx-root .nx-ag-badge svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; filter: none; }
.nx-root .nx-ag-pill { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--nx-s2) 2px 6px; border-radius: var(--nx-rfull); font-size: 12px; font-weight: 800; line-height: 1.4; white-space: nowrap; color: var(--nx-text); background: var(--nx-hover); }
.nx-root .nx-ag-pill svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-ag-pill--ok { background: color-mix(in srgb, var(--nx-success) 16%, var(--nx-surface)); color: var(--nx-ok-text); }
.nx-root .nx-ag-pill--warn { background: color-mix(in srgb, var(--nx-amber) 20%, var(--nx-surface)); color: var(--nx-amber-text); }
.nx-root .nx-ag-pill--bad { background: color-mix(in srgb, var(--nx-danger) 15%, var(--nx-surface)); color: var(--nx-bad-text); }
.nx-root .nx-ag-pill--info { background: color-mix(in srgb, var(--nx-blue) 14%, var(--nx-surface)); color: var(--nx-blue-text); }
.nx-root .nx-ag-pill--info svg { animation: nx-ag-spin 1.6s linear infinite; }
.nx-root .nx-ag__desc { margin: 0; color: var(--nx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-root .nx-ag__sys { display: flex; align-items: center; gap: 6px; min-height: 28px; }
.nx-root .nx-ag-sys { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 4px; border-radius: var(--nx-rfull); background: var(--nx-hover); color: var(--nx-muted); font-size: 12px; font-weight: 800; }
.nx-root .nx-ag-sys svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-ag__used { margin-left: auto; white-space: nowrap; }
.nx-root .nx-ag__foot { display: flex; align-items: center; gap: var(--nx-s2); padding-top: var(--nx-s3); border-top: 1px solid var(--nx-line); }
.nx-root .nx-ag--compact .nx-ag__foot { border-top: 0; padding-top: 0; }

/* the strip: 14 days of runs, the share done as a ring, the typical time, the time given back */
.nx-root .nx-pf { min-width: 0; }
.nx-root .nx-pf__btn { display: flex; align-items: center; gap: var(--nx-s3); width: 100%; padding: var(--nx-s2) var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-r1); background: color-mix(in srgb, var(--nx-hover) 55%, var(--nx-surface)); color: var(--nx-text); font: inherit; text-align: left; cursor: pointer; }
.nx-root .nx-pf__btn:hover { border-color: color-mix(in srgb, var(--nx-blue) 45%, var(--nx-line)); }
.nx-root .nx-pf__btn:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; }
.nx-root .nx-pf-bars { flex: 1 1 auto; min-width: 60px; max-width: 120px; height: 28px; }
.nx-root .nx-pf-bars rect { fill: var(--nx-muted); }
.nx-root .nx-pf--ok .nx-pf-bars rect { fill: var(--nx-success); }
.nx-root .nx-pf--warn .nx-pf-bars rect { fill: var(--nx-amber); }
.nx-root .nx-pf--bad .nx-pf-bars rect { fill: var(--nx-danger); }
.nx-root .nx-pf__ring { position: relative; display: inline-grid; place-items: center; width: 44px; flex: none; }
.nx-root .nx-pf-ring { width: 32px; height: 32px; }
.nx-root .nx-pf-ring__bg { fill: none; stroke: var(--nx-line); stroke-width: 3.2; }
.nx-root .nx-pf-ring__fg { fill: none; stroke: var(--nx-muted); stroke-width: 3.2; stroke-linecap: round; }
.nx-root .nx-pf-ring--ok .nx-pf-ring__fg { stroke: var(--nx-success); }
.nx-root .nx-pf-ring--warn .nx-pf-ring__fg { stroke: var(--nx-amber); }
.nx-root .nx-pf-ring--bad .nx-pf-ring__fg { stroke: var(--nx-danger); }
.nx-root .nx-pf__pct { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.nx-root .nx-pf__pct svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.6; }
.nx-root .nx-pf--ok .nx-pf__pct { color: var(--nx-ok-text); }
.nx-root .nx-pf--warn .nx-pf__pct { color: var(--nx-amber-text); }
.nx-root .nx-pf--bad .nx-pf__pct { color: var(--nx-bad-text); }
.nx-root .nx-pf__nums { display: grid; gap: 1px; margin-left: auto; text-align: right; font-size: 12px; font-weight: 700; white-space: nowrap; }
.nx-root .nx-pf__back { color: var(--nx-muted); font-weight: 600; }
.nx-root .nx-pf--skel .nx-pf__sk { height: 44px; border-radius: var(--nx-r1); }
.nx-root .nx-pf--calm { display: flex; align-items: center; min-height: 46px; padding: var(--nx-s2) var(--nx-s3); border: 1px dashed var(--nx-line); border-radius: var(--nx-r1); color: var(--nx-muted); }
.nx-root .nx-pf__calm { display: inline-flex; align-items: center; gap: var(--nx-s2); font-size: var(--nx-fs-small); }
.nx-root .nx-pf__calm svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the panel */
.nx-root .nx-pf-panel { display: grid; gap: var(--nx-s5); min-width: 0; }
.nx-root .nx-pf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--nx-s3); }
.nx-root .nx-pf-stat { display: grid; gap: 2px; padding: var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-r1); background: color-mix(in srgb, var(--nx-hover) 40%, var(--nx-surface)); min-width: 0; }
.nx-root .nx-pf-stat > span { color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-pf-stat > b { font-size: var(--nx-fs-h2); line-height: 1.15; }
.nx-root .nx-pf-stat > small { display: inline-flex; gap: 4px; align-items: center; font-weight: 700; }
.nx-root .nx-pf-stat > small svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.nx-root .nx-pf-stat--ok > small { color: var(--nx-ok-text); }
.nx-root .nx-pf-stat--warn > small { color: var(--nx-amber-text); }
.nx-root .nx-pf-stat--bad > small { color: var(--nx-bad-text); }
.nx-root .nx-pf-h { margin: 0 0 var(--nx-s2); font-size: var(--nx-fs-body); }
.nx-root .nx-pf-legend { list-style: none; margin: 0 0 var(--nx-s2); padding: 0; display: flex; flex-wrap: wrap; gap: var(--nx-s3); font-size: var(--nx-fs-small); }
.nx-root .nx-pf-legend li { display: inline-flex; align-items: center; gap: 5px; color: var(--nx-text); }
.nx-root .nx-pf-legend svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.nx-root .nx-pf-key { width: 10px; height: 10px; border-radius: 3px; background: var(--nx-muted); }
.nx-root .nx-pf-key--done, .nx-root .nx-pf-seg--done { fill: var(--nx-success); background: var(--nx-success); }
.nx-root .nx-pf-key--failed, .nx-root .nx-pf-seg--failed { fill: var(--nx-danger); background: var(--nx-danger); }
.nx-root .nx-pf-key--handed, .nx-root .nx-pf-seg--handed { fill: var(--nx-amber); background: var(--nx-amber); }
.nx-root .nx-pf-chart { width: 100%; height: auto; display: block; overflow: visible; }
.nx-root .nx-pf-chart__base { stroke: var(--nx-line); stroke-width: 1.5; }
.nx-root .nx-pf-chart__lab { fill: var(--nx-muted); font-size: 10px; }
.nx-root .nx-pf-chart__hit { fill: transparent; }
.nx-root .nx-pf-chart__col { outline: none; }
.nx-root .nx-pf-chart__col.is-hover .nx-pf-seg { stroke: var(--nx-text); stroke-width: 1; }
.nx-root .nx-pf-chart__col:focus-visible .nx-pf-chart__hit { stroke: var(--nx-focus); stroke-width: 2; }
.nx-root .nx-pf-read { margin: var(--nx-s2) 0 0; color: var(--nx-muted); font-size: var(--nx-fs-small); min-height: 1.4em; }
.nx-root .nx-pf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-pf-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--nx-s3); align-items: center; }
.nx-root .nx-pf-list__t { overflow-wrap: anywhere; }
.nx-root .nx-pf-list__bar { grid-column: 1 / -1; grid-row: 2; height: 6px; border-radius: 3px 3px 3px 3px; background: var(--nx-blue); }
.nx-root .nx-pf-list__bar--bad { background: var(--nx-danger); }
.nx-root .nx-pf-sk--s { height: 64px; border-radius: var(--nx-r1); }
.nx-root .nx-pf-sk--chart { height: 140px; border-radius: var(--nx-r1); }
.nx-root .nx-pf-sk--row { height: 28px; border-radius: var(--nx-r1); }
@keyframes nx-ag-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .nx-root .nx-pf__btn { flex-wrap: wrap; }
  .nx-root .nx-pf-bars { max-width: none; }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .nx-root .nx-ac.nx-ag { transform: none; }
  .nx-root .nx-ac.nx-ag:hover { translate: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-root .nx-ac.nx-ag, .nx-root .nx-ag-pill--info svg { animation: none; transition: none; }
}
/* END AGENTS VIEW */

/* THE AGENTS PAGE AS A STAFFED HANGAR (30 Oct 2026, nx-agentcard.jsx, nx-agents.jsx, agentshelf.mjs; the approved mock "Agents page redesign"). Each department is a shelf with a tilted plate, each agent a card that lifts off it.
   Text is never cut: names, the department, the owner, the purpose and the status sentence wrap; the status is an icon, a word and a sentence; every number has its own label. Only the tokens of the New look (--nx-*); the status
   colours are reserved and always come with an icon and the word. Depth and movement only where motion is welcome (the block at the end). Loaded after nx-w32.css, so it wins over it. */

/* ---- the row under the search: the status chips, the kind, how the agents are drawn, Close all shelves */
.nx-root .nx-ag-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2) var(--nx-s3); margin: 0 0 var(--nx-s3); }
.nx-root .nx-ag-sc { display: flex; flex-wrap: wrap; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-ag-sc__b { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 4px 12px 4px 10px; border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); background: var(--nx-surface); color: var(--nx-text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--nx-text) 10%, transparent); }
.nx-root .nx-ag-sc__b svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-ag-sc__b--bad svg { color: var(--nx-danger); } .nx-root .nx-ag-sc__b--warn svg { color: var(--nx-amber); } .nx-root .nx-ag-sc__b--ok svg { color: var(--nx-success); } .nx-root .nx-ag-sc__b--info svg { color: var(--nx-blue); } .nx-root .nx-ag-sc__b--gray svg { color: var(--nx-muted); }
.nx-root .nx-ag-sc__b b { min-width: 22px; padding: 0 7px; border-radius: var(--nx-rfull); background: var(--nx-hover); font-size: 12.5px; text-align: center; font-variant-numeric: tabular-nums; }
.nx-root .nx-ag-sc__b:hover { border-color: color-mix(in srgb, var(--nx-blue) 50%, var(--nx-line)); }
.nx-root .nx-ag-sc__b[aria-pressed="true"] { border-color: var(--nx-blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--nx-blue) 28%, transparent), 0 1px 2px color-mix(in srgb, var(--nx-text) 10%, transparent); }
.nx-root .nx-ag-sc__b:focus-visible, .nx-root .nx-shelf__plate:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; }
.nx-root .nx-ag-kind { display: inline-flex; align-items: center; gap: var(--nx-s2); color: var(--nx-muted); }

/* ---- a shelf: the plate leans back like a label on an edge; its summary says who needs what */
.nx-root .nx-shelf { min-width: 0; margin: 0 0 var(--nx-s6); }
.nx-root .nx-shelf .nx-grp__h { display: block; margin: 0; }
.nx-root .nx-shelf__plate { display: flex; align-items: center; flex-wrap: wrap; gap: var(--nx-s3); width: 100%; padding: 12px 16px; text-align: left; border: 1px solid var(--nx-line); border-radius: var(--nx-r2); color: var(--nx-text); font: inherit; cursor: pointer;
  background: linear-gradient(180deg, var(--nx-surface), color-mix(in srgb, var(--nx-hover) 80%, var(--nx-surface)));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--nx-surface) 70%, transparent) inset, 0 2px 0 -1px var(--nx-line), 0 10px 18px -12px color-mix(in srgb, var(--nx-text) 40%, transparent), 0 22px 30px -22px color-mix(in srgb, var(--nx-text) 40%, transparent); }
.nx-root .nx-shelf__plate:hover { border-color: color-mix(in srgb, var(--nx-blue) 50%, var(--nx-line)); }
.nx-root .nx-shelf__sum { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-left: auto; font-size: 13px; color: var(--nx-text); }
.nx-root .nx-shelf__s { display: inline-flex; align-items: center; gap: 5px; }
.nx-root .nx-shelf__s svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-shelf__s--bad svg { color: var(--nx-danger); } .nx-root .nx-shelf__s--warn svg { color: var(--nx-amber); } .nx-root .nx-shelf__s--info svg { color: var(--nx-blue); } .nx-root .nx-shelf__s--gray svg { color: var(--nx-muted); }
.nx-root .nx-shelf__chev { flex: none; width: 9px; height: 9px; margin: 0 4px 3px 2px; border: solid var(--nx-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.nx-root .nx-shelf__plate[aria-expanded="false"] .nx-shelf__chev { transform: rotate(-45deg); margin-bottom: 0; }
.nx-root .nx-shelf__body { padding: 20px 4px 4px; content-visibility: auto; contain-intrinsic-size: auto 600px; }
.nx-root .nx-shelf__body[hidden] { display: none; }
.nx-root .nx-shelf.is-closed { margin-bottom: var(--nx-s4); }

/* ---- the card: one clear column of text, then the numbers with their labels */
.nx-root .nx-pp-agents .nx-acgrid, .nx-root .nx-acgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.nx-root .nx-pp-agents .nx-acgrid--compact, .nx-root .nx-acgrid--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 262px), 1fr)); gap: 14px; }
.nx-root .nx-ac.nx-ag { --ag-st: var(--nx-muted); gap: 10px; padding: 16px; border-radius: 16px; cursor: default;
  box-shadow: inset 0 3px 0 var(--ag-st), inset 0 4px 0 color-mix(in srgb, var(--nx-dv-hi) 55%, transparent), 0 1px 2px color-mix(in srgb, var(--nx-text) 10%, transparent), 0 12px 22px -14px color-mix(in srgb, var(--nx-text) 45%, transparent); }
.nx-root .nx-ac.nx-ag[data-pill="failed"] { --ag-st: var(--nx-danger); }
.nx-root .nx-ac.nx-ag[data-pill="needs"], .nx-root .nx-ac.nx-ag[data-pill="waiting"] { --ag-st: var(--nx-amber); }
.nx-root .nx-ac.nx-ag[data-pill="working"] { --ag-st: var(--nx-blue); }
.nx-root .nx-ac.nx-ag[data-pill="ready"] { --ag-st: var(--nx-success); }
.nx-root .nx-ac.nx-ag:hover, .nx-root .nx-ac.nx-ag:focus-within { border-color: color-mix(in srgb, var(--ag-st) 55%, var(--nx-line));
  box-shadow: inset 0 3px 0 var(--ag-st), inset 0 4px 0 color-mix(in srgb, var(--nx-dv-hi) 55%, transparent), 0 2px 4px color-mix(in srgb, var(--nx-text) 12%, transparent), 0 24px 34px -16px color-mix(in srgb, var(--ag-st) 45%, transparent); }
.nx-root .nx-ag__top { align-items: center; }
.nx-root .nx-ag-tile { width: 52px; height: 52px; border-radius: 15px; }
.nx-root .nx-ag__name { font-size: 19px; line-height: 1.2; letter-spacing: -.005em; overflow-wrap: anywhere; }
.nx-root .nx-ag__who { display: grid; gap: 0; margin-top: 3px; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; font-size: 13px; }
.nx-root .nx-who__own b { font-weight: 700; color: var(--nx-text); }
.nx-root .nx-ag__status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.nx-root .nx-ag-pill { gap: 6px; padding: 4px 11px 4px 8px; font-size: 13px; border: 1px solid transparent; }
.nx-root .nx-ag-pill svg { width: 14px; height: 14px; }
.nx-root .nx-ag-pill--ok { border-color: color-mix(in srgb, var(--nx-success) 35%, transparent); } .nx-root .nx-ag-pill--warn { border-color: color-mix(in srgb, var(--nx-amber) 40%, transparent); }
.nx-root .nx-ag-pill--bad { border-color: color-mix(in srgb, var(--nx-danger) 35%, transparent); } .nx-root .nx-ag-pill--info { border-color: color-mix(in srgb, var(--nx-blue) 35%, transparent); }
.nx-root .nx-ag-pill--gray { border-color: var(--nx-line); }
.nx-root .nx-ag__note { flex: 1 1 170px; min-width: 0; font-size: 14px; font-weight: 500; color: var(--nx-text); overflow-wrap: anywhere; }
.nx-root .nx-ag__desc { white-space: normal; overflow: visible; text-overflow: clip; color: var(--nx-text); font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.nx-root .nx-ag__sys { flex-wrap: wrap; gap: 6px; min-height: 0; }
.nx-root .nx-ag-sys { display: inline-flex; align-items: center; gap: 5px; min-width: 0; height: auto; padding: 3px 9px; border: 1px solid var(--nx-line); border-radius: 8px; background: var(--nx-hover); color: var(--nx-text); font-size: 12.5px; font-weight: 600; }
.nx-root .nx-ag-sys__n { overflow-wrap: anywhere; }
.nx-root .nx-ag-sys--more { color: var(--nx-muted); }
.nx-root .nx-ag__safety { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: 13px; color: var(--nx-muted); }
.nx-root .nx-ag__safety--warn { color: var(--nx-amber-text); }
.nx-root .nx-ag__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0; padding-top: 10px; border-top: 1px solid var(--nx-line); font-size: 13px; }
.nx-root .nx-ag__fact { min-width: 0; }
.nx-root .nx-ag__fact--success { grid-column: 1 / -1; }
.nx-root .nx-ag__fact dt { color: var(--nx-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.nx-root .nx-ag__fact dd { margin: 0; font-size: 14.5px; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.nx-root .nx-ag__foot { flex-wrap: wrap; }
.nx-root .nx-ag--compact .nx-ag__status { gap: 4px 8px; }
.nx-root .nx-ag--compact .nx-ag__note { font-size: 13px; }

/* ---- the List: the same words, no row cut to one line */
.nx-root .nx-ar--simple .nx-ar__meta { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.nx-root .nx-ar--simple .nx-ar__name { overflow-wrap: anywhere; }
.nx-root .nx-ar--simple .nx-ar__st { width: auto; max-width: 230px; flex-wrap: wrap; }   /* a long status ("A recent run needs a look") wrapped under its icon and ran into the time column */

/* ---- a phone: the status chips slide sideways in one row, a shelf summary goes under its name, one column of cards */
@media (max-width: 700px) {
  .nx-root .nx-ag-sc { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 4px; scrollbar-width: thin; }
  .nx-root .nx-ag-sc__b { flex: none; }
  .nx-root .nx-shelf__sum { margin-left: 0; width: 100%; }
  .nx-root .nx-ag__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- depth and movement: only where motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-shelf { perspective: 1100px; }
  .nx-root .nx-shelf__plate { transform: rotateX(6deg); transform-origin: 50% 100%; transform-style: preserve-3d; transition: border-color .15s ease, transform .2s ease; }
  .nx-root .nx-shelf__plate:hover { transform: rotateX(3deg) translateY(-1px); }
  .nx-root .nx-shelf__chev { transition: transform .2s ease; }
  .nx-root .nx-ag-sc__b { transition: border-color .15s ease, box-shadow .15s ease; }
  .nx-root .nx-ac.nx-ag .nx-ag-tile { transform: translateZ(18px); }
}
@media (prefers-reduced-motion: reduce) {
  .nx-root .nx-shelf__plate, .nx-root .nx-shelf__plate:hover { transform: none; }
}

/* the numbers of the strip are written again with their labels under it, so the strip keeps only the bars and the ring */
.nx-root .nx-ag .nx-pf__nums { display: none; }

/* nx-w40.css: BUILD A TOOL of the New look (7 Nov 2026). Every rule starts with .nx-root (web/test/nx-css-scoped.test.js); colours are --nx-* tokens only.
   Desktop: steps | preview | changes and checks side by side, the footer under them. Under 1000 px: one column. */
.nx-root .nx-bw-start { display: grid; gap: var(--nx-s3); max-width: 720px; }
.nx-root .nx-bw-label { font-size: var(--nx-fs-small); color: var(--nx-muted); }
.nx-root .nx-bw-text { width: 100%; min-width: 0; resize: vertical; font: inherit; padding: var(--nx-s3); }
.nx-root .nx-bw-note { margin: var(--nx-s2) 0; color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-bw-h { margin: var(--nx-s5) 0 var(--nx-s2); }
.nx-root .nx-bw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-bw-meta { color: var(--nx-muted); font-size: var(--nx-fs-small); }

.nx-root .nx-bw { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(260px, 340px); gap: var(--nx-s4); align-items: start; }
.nx-root .nx-bw-col { min-width: 0; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s4); }
.nx-root .nx-bw-col .nx-h3 { margin: 0 0 var(--nx-s2); }
.nx-root .nx-bw-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s2); margin-bottom: var(--nx-s2); }
.nx-root .nx-bw-bar .nx-h3 { margin: 0; }
.nx-root .nx-bw-tabs { display: inline-flex; border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); overflow: hidden; }
.nx-root .nx-bw-tabs button { min-height: 36px; padding: 0 var(--nx-s3); border: 0; background: transparent; color: var(--nx-text); cursor: pointer; font: inherit; }
.nx-root .nx-bw-tabs button.is-on { background: var(--nx-blue); color: var(--nx-on-blue); }
.nx-root .nx-bw-frame { width: 100%; border: 1px solid var(--nx-line); border-radius: var(--nx-r1); background: var(--nx-surface); display: block; }
.nx-root .nx-bw-viewer .nx-bw-frame { border-radius: var(--nx-r2); }

.nx-root .nx-bw-plan { margin: 0 0 var(--nx-s3); padding: 0; list-style: none; display: grid; gap: var(--nx-s1); }
.nx-root .nx-bw-plan li { display: flex; gap: var(--nx-s2); align-items: baseline; font-size: var(--nx-fs-small); }
.nx-root .nx-bw-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--nx-line); flex: none; }
.nx-root .nx-bw-plan--doing .nx-bw-dot { background: var(--nx-amber); }
.nx-root .nx-bw-plan--done .nx-bw-dot { background: var(--nx-success); }
.nx-root .nx-bw-plan--blocked .nx-bw-dot { background: var(--nx-danger); }
.nx-root .nx-bw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s1); max-height: 360px; overflow-y: auto; }
.nx-root .nx-bw-step { font-size: var(--nx-fs-small); color: var(--nx-muted); overflow-wrap: anywhere; }
.nx-root .nx-bw-step--task { color: var(--nx-text); margin-top: var(--nx-s2); }
.nx-root .nx-bw-step--bad { color: var(--nx-amber-text); }
.nx-root .nx-bw-card { margin-top: var(--nx-s3); padding: var(--nx-s3); border-radius: var(--nx-r1); border: 1px solid var(--nx-line); }
.nx-root .nx-bw-card--warn { background: var(--nx-amber-soft); color: var(--nx-amber-text); }
.nx-root .nx-bw-card p { margin: var(--nx-s1) 0 0; }
.nx-root .nx-bw-ask { margin-top: var(--nx-s4); display: grid; gap: var(--nx-s2); }
.nx-root .nx-bw-check { font-size: var(--nx-fs-small); display: flex; gap: var(--nx-s2); align-items: center; }

.nx-root .nx-bw-summary { margin: 0 0 var(--nx-s2); }
.nx-root .nx-bw-files { margin: 0 0 var(--nx-s2); padding-left: var(--nx-s4); font-size: var(--nx-fs-small); }
.nx-root .nx-bw-link { border: 0; background: none; padding: 0; color: var(--nx-link); cursor: pointer; font: inherit; font-size: var(--nx-fs-small); text-decoration: underline; }
.nx-root .nx-bw-diff { margin-top: var(--nx-s2); display: grid; gap: var(--nx-s2); }
.nx-root .nx-bw-diff pre { margin: var(--nx-s1) 0 0; padding: var(--nx-s2); max-height: 260px; overflow: auto; font-size: 12px; background: var(--nx-bg); border: 1px solid var(--nx-line); border-radius: var(--nx-r1); }
.nx-root .nx-bw-add { color: var(--nx-ok-text); background: var(--nx-ok-soft); }
.nx-root .nx-bw-del { color: var(--nx-bad-text); background: var(--nx-bad-soft); }
.nx-root .nx-bw-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); font-size: var(--nx-fs-small); }
.nx-root .nx-bw-checks li { padding-left: 22px; position: relative; overflow-wrap: anywhere; }
.nx-root .nx-bw-checks li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.nx-root .nx-bw-checks .is-ok::before { content: "\2713"; color: var(--nx-ok-text); }
.nx-root .nx-bw-checks .is-bad::before { content: "\2715"; color: var(--nx-bad-text); }
.nx-root .nx-bw-checks .is-wait::before { content: "\2026"; color: var(--nx-muted); }

.nx-root .nx-bw-foot { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--nx-s3); margin-top: var(--nx-s4); padding: var(--nx-s3) var(--nx-s4); background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); }
.nx-root .nx-bw-foot .nx-btn { min-height: 44px; }
.nx-root .nx-bw-confirm { margin-top: var(--nx-s3); padding: var(--nx-s4); border: 2px solid var(--nx-blue); border-radius: var(--nx-r2); background: var(--nx-surface); display: grid; gap: var(--nx-s2); justify-items: start; max-width: 640px; margin-left: auto; }
.nx-root .nx-bw-confirm p { margin: 0; }
@media (max-width: 1360px) { .nx-root .nx-bw { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .nx-root .nx-bw-mid { grid-column: 1 / -1; order: -1; } .nx-root .nx-bw-steps { max-height: 260px; } }
@media (max-width: 760px) { .nx-root .nx-bw { grid-template-columns: minmax(0, 1fr); } }
.nx-root .nx-bw-admin { display: grid; gap: var(--nx-s2); max-width: 720px; margin-top: var(--nx-s5); padding: var(--nx-s3); border: 1px dashed var(--nx-line); border-radius: var(--nx-r2); }

/* ---------------------------------------------------------------- the start page, redesigned (11 Nov 2026, Sheraz: "design this UI UX more beautiful. 3D animated is needed").
   A hero with a small canvas scene (nx-build-scene.jsx), the four steps, the input as one large soft card with example chips, a folded administrator panel, My tools as cards.
   Tokens only; the scene is decoration (pointer-events none, below every popover); motion stops under reduced motion. Example: a tool being built shows a pulsing amber dot in its chip. */
.nx-root .nx-bt { display: grid; gap: var(--nx-s5); max-width: 1120px; }
.nx-root .nx-bt-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: var(--nx-s4); padding: var(--nx-s6); border: 1px solid var(--nx-line); border-radius: calc(var(--nx-r2) + 6px); overflow: hidden;
  background: linear-gradient(135deg, var(--nx-blue-soft), var(--nx-surface) 70%); box-shadow: var(--nx-shadow); }
.nx-root .nx-bt-hero__text { position: relative; z-index: 1; display: grid; gap: var(--nx-s3); justify-items: start; }
.nx-root .nx-bt-kicker { display: inline-flex; align-items: center; gap: var(--nx-s2); padding: var(--nx-s1) var(--nx-s3) var(--nx-s1) var(--nx-s2); border-radius: var(--nx-rfull); background: var(--nx-surface); border: 1px solid var(--nx-line); color: var(--nx-blue-text); font-size: var(--nx-fs-small); font-weight: 700; }
.nx-root .nx-bt-kicker svg { width: 18px; height: 18px; }
.nx-root .nx-bt-hero__h { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -.3px; color: var(--nx-text); }
.nx-root .nx-bt-hero__p { margin: 0; max-width: 46ch; color: var(--nx-text); font-size: 15px; line-height: 1.5; }
.nx-root .nx-bt-scene { position: relative; z-index: 0; pointer-events: none; min-height: 300px; height: 100%; }
.nx-root .nx-bt-scene canvas { display: block; width: 100%; height: 100%; pointer-events: none; }

.nx-root .nx-bt-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--nx-s3); counter-reset: none; }
.nx-root .nx-bt-step { position: relative; display: grid; gap: var(--nx-s1); align-content: start; padding: var(--nx-s4); background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); transition: transform var(--nx-d2) var(--nx-curve), border-color var(--nx-d2); }
.nx-root .nx-bt-step.is-now { border-color: var(--nx-blue); }
.nx-root .nx-bt-step__ico { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--nx-s1); border-radius: var(--nx-r1); background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-bt-step__n { position: absolute; top: var(--nx-s3); right: var(--nx-s4); font-size: var(--nx-fs-small); font-weight: 800; color: var(--nx-muted); }
.nx-root .nx-bt-step b { color: var(--nx-text); line-height: 1.3; }
.nx-root .nx-bt-step__t { color: var(--nx-muted); font-size: var(--nx-fs-small); }

.nx-root .nx-bt-card.nx-bw-start { max-width: none; gap: var(--nx-s3); padding: var(--nx-s5); background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: calc(var(--nx-r2) + 6px); box-shadow: var(--nx-shadow); }
.nx-root .nx-bt-label { font-size: var(--nx-fs-h3); font-weight: 700; color: var(--nx-text); }
.nx-root .nx-bt-text.nx-bw-text { min-height: 132px; padding: var(--nx-s4); font-size: 16px; line-height: 1.5; border-radius: var(--nx-r2); background: var(--nx-bg); }
.nx-root .nx-bt-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s3); }
.nx-root .nx-bt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-bt-chips__l { color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-bt-chip { display: inline-flex; align-items: center; gap: var(--nx-s2); min-height: 36px; padding: var(--nx-s1) var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); background: var(--nx-surface); color: var(--nx-text); font: inherit; font-size: var(--nx-fs-small); font-weight: 600; cursor: pointer; transition: background var(--nx-d1), transform var(--nx-d1); }
.nx-root .nx-bt-chip svg { width: 16px; height: 16px; color: var(--nx-blue-text); }
.nx-root .nx-bt-chip:hover { background: var(--nx-blue-soft); transform: translateY(-1px); }
.nx-root .nx-bt-chip:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; }
.nx-root .nx-bt-hint { color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-bt-hint.is-ok { color: var(--nx-ok-text); font-weight: 700; }
.nx-root .nx-bt-go.nx-btn { justify-self: start; min-height: 52px; padding: 0 var(--nx-s6); font-size: 16px; font-weight: 800; border-radius: var(--nx-r1); gap: var(--nx-s2);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--nx-blue) 65%, var(--nx-text)), 0 12px 24px color-mix(in srgb, var(--nx-blue) 30%, transparent); transition: transform var(--nx-d1), box-shadow var(--nx-d1); }
.nx-root .nx-bt-go.nx-btn:hover:not(:disabled) { transform: translateY(-1px); }
.nx-root .nx-bt-go.nx-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--nx-blue) 65%, var(--nx-text)); }
.nx-root .nx-bt-go.nx-btn:disabled { box-shadow: none; }
.nx-root .nx-bt-spin { width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: nx-bt-spin .8s linear infinite; }

.nx-root .nx-bt-admin.nx-bw-admin { display: block; max-width: none; margin: 0; padding: 0 var(--nx-s4); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); }
.nx-root .nx-bt-admin summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; list-style: none; color: var(--nx-text); }
.nx-root .nx-bt-admin summary::-webkit-details-marker { display: none; }
.nx-root .nx-bt-admin summary::after { content: "+"; font-weight: 800; color: var(--nx-muted); }
.nx-root .nx-bt-admin[open] summary::after { content: "\2212"; }
.nx-root .nx-bt-admin summary:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; border-radius: var(--nx-r1); }
.nx-root .nx-bt-admin__body { display: grid; gap: var(--nx-s2); max-width: 560px; padding-bottom: var(--nx-s4); }

.nx-root .nx-bt-h { margin: var(--nx-s2) 0 0; }
.nx-root .nx-bt-tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--nx-s3); }
.nx-root .nx-bt-tool { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "ico main status" "open open open"; align-items: center; gap: var(--nx-s2) var(--nx-s3); padding: var(--nx-s4); background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); transition: transform var(--nx-d2) var(--nx-curve), border-color var(--nx-d2); }
.nx-root .nx-bt-tool:hover { transform: translateY(-2px); border-color: var(--nx-blue); }
.nx-root .nx-bt-tool__ico { grid-area: ico; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--nx-r1); background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-bt-tool__main { grid-area: main; display: grid; min-width: 0; }
.nx-root .nx-bt-tool__title { color: var(--nx-text); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.nx-root .nx-bt-tool__title:hover { text-decoration: underline; }
.nx-root .nx-bt-status { grid-area: status; display: inline-flex; align-items: center; gap: var(--nx-s1); padding: 2px var(--nx-s3); border-radius: var(--nx-rfull); background: var(--nx-hover); color: var(--nx-text); font-size: var(--nx-fs-small); font-weight: 700; }
.nx-root .nx-bt-status.is-live { background: var(--nx-ok-soft); color: var(--nx-ok-text); }
.nx-root .nx-bt-status.is-working { background: var(--nx-amber-soft); color: var(--nx-amber-text); }
.nx-root .nx-bt-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: nx-bt-pulse 1.2s ease-in-out infinite; }
.nx-root .nx-bt-open.nx-btn { grid-area: open; justify-self: end; min-height: 36px; }
.nx-root .nx-bt-empty { display: grid; justify-items: center; gap: var(--nx-s2); padding: var(--nx-s6); text-align: center; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); color: var(--nx-text); }
.nx-root .nx-bt-empty p { margin: 0; color: var(--nx-text); }

@keyframes nx-bt-spin { to { transform: rotate(360deg); } }
@keyframes nx-bt-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@media (max-width: 1000px) { .nx-root .nx-bt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .nx-root .nx-bt-hero { grid-template-columns: minmax(0, 1fr); padding: var(--nx-s4); }
  .nx-root .nx-bt-hero__h { font-size: 24px; }
  .nx-root .nx-bt-scene { min-height: 170px; height: 170px; }
  .nx-root .nx-bt-steps { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-bt-go.nx-btn { justify-self: stretch; }
  .nx-root .nx-bt-tools { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .nx-root .nx-bt-step, .nx-root .nx-bt-tool, .nx-root .nx-bt-chip, .nx-root .nx-bt-go.nx-btn { transition: none; }
  .nx-root .nx-bt-spin, .nx-root .nx-bt-dot { animation: none; }
  .nx-root .nx-bt-chip:hover, .nx-root .nx-bt-tool:hover, .nx-root .nx-bt-go.nx-btn:hover:not(:disabled) { transform: none; }
}

/* nx-w41.css: MEETINGS of My PA (8 Nov 2026). Every rule starts with .nx-root (qa-2026-10-21-nx-css-scoped); colours are --nx-* tokens only (qa-2026-10-21-nx-themes).
   NO transform-style: preserve-3d on anything that holds a button or a link (9 Nov 2026: in a real Chrome it made the Join link miss about 9 clicks in 10; qa pin cr-2026-11-09-meetings-join).
   CSS 3D, no three.js: a perspective on the stage, depth by layers (page 0, cards 4 to 8 px, drawer 12 to 20 px), hover tilt on ONE agenda card at most 2.5 degrees (nx-meetings.jsx writes --mt-tx / --mt-ty).
   Only transform and opacity move. will-change only while a card is hovered. prefers-reduced-motion: no tilt, no fold, fades only. */
.nx-root .nx-mt { display: grid; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-mt-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nx-root .nx-mt button:focus-visible, .nx-root .nx-mt a:focus-visible, .nx-root .nx-mt input:focus-visible { outline: var(--nx-focus-ring); outline-offset: 2px; }
.nx-root .nx-mt-ico { flex: none; }

/* ---------------------------------------------------------------- head and toolbar */
.nx-root .nx-mt-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--nx-s3); }
.nx-root .nx-mt-h { margin: 0; font-size: var(--nx-fs-h2); line-height: 1.2; }
.nx-root .nx-mt-sub { margin: var(--nx-s1) 0 0; color: var(--nx-muted); font-size: var(--nx-fs-small); max-width: 62ch; }
.nx-root .nx-mt-sync { display: inline-flex; align-items: center; gap: var(--nx-s2); color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-mt-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: var(--nx-tap); height: var(--nx-tap); border: 1px solid var(--nx-control-line); border-radius: var(--nx-r1); background: var(--nx-surface); color: var(--nx-text); cursor: pointer; transition: transform var(--nx-d1) ease-out, background var(--nx-d1); }
.nx-root .nx-mt-iconbtn:hover:not(:disabled) { background: var(--nx-hover); transform: translateY(-1px); }
.nx-root .nx-mt-iconbtn:active:not(:disabled) { transform: translateY(0); transition-duration: 100ms; }
.nx-root .nx-mt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s3); padding: var(--nx-s3); background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); }
.nx-root .nx-mt-bar__nav, .nx-root .nx-mt-bar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-mt-range { margin: 0 0 0 var(--nx-s2); font-size: var(--nx-fs-h3); font-weight: 700; }
.nx-root .nx-mt-date input { min-height: var(--nx-tap); padding: 0 var(--nx-s2); border: 1px solid var(--nx-control-line); border-radius: var(--nx-r1); background: var(--nx-surface); color: var(--nx-text); font: inherit; }
.nx-root .nx-mt-switch { display: inline-flex; border: 1px solid var(--nx-control-line); border-radius: var(--nx-rfull); overflow: hidden; }
.nx-root .nx-mt-switch button { min-height: calc(var(--nx-tap) - 2px); padding: 0 var(--nx-s4); border: 0; background: transparent; color: var(--nx-text); cursor: pointer; font: inherit; transition: background var(--nx-d1); }
.nx-root .nx-mt-switch button:hover { background: var(--nx-hover); }
.nx-root .nx-mt-switch button.is-on { background: var(--nx-blue); color: var(--nx-on-blue); font-weight: 700; }
.nx-root .nx-mt-tz { padding: 4px var(--nx-s3); border-radius: var(--nx-rfull); background: var(--nx-blue-soft); color: var(--nx-blue-text); font-size: var(--nx-fs-small); white-space: nowrap; }
.nx-root .nx-mt-banner { margin: 0; padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r1); background: var(--nx-blue-soft); color: var(--nx-blue-text); font-size: var(--nx-fs-small); }
.nx-root .nx-mt-banner--warn { background: var(--nx-amber-soft); color: var(--nx-amber-text); }
.nx-root .nx-mt-link { background: none; border: 0; padding: 0; color: var(--nx-link); cursor: pointer; font: inherit; text-decoration: underline; }
.nx-root a.nx-mt-link { text-decoration: underline; }
.nx-root .nx-mt-note { margin: var(--nx-s2) 0; color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-mt-note--center { text-align: center; }
.nx-root .nx-mt-keys { margin: 0; color: var(--nx-muted); font-size: var(--nx-fs-small); }

/* ---------------------------------------------------------------- the stage: the view folds in when it changes (agenda to calendar and back) */
.nx-root .nx-mt-stage { perspective: 1400px; perspective-origin: 50% 0; min-width: 0; }
.nx-root .nx-mt-stage.is-busy .nx-mt-view { opacity: .78; transition: opacity var(--nx-d2); }
.nx-root .nx-mt-view { transform-origin: 50% 0; animation: nx-mt-in var(--nx-d3) var(--nx-curve) both; min-width: 0; }
@keyframes nx-mt-in { from { opacity: 0; transform: rotateX(7deg) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes nx-mt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nx-mt-rise { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes nx-mt-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes nx-mt-drawer { from { opacity: 0; transform: perspective(1200px) translateX(48px) rotateY(-7deg); } to { opacity: 1; transform: none; } }
@keyframes nx-mt-spin { to { transform: rotate(360deg); } }
.nx-root .nx-mt-spin { display: inline-flex; animation: nx-mt-spin 900ms linear infinite; }

/* ---------------------------------------------------------------- the agenda: a day heading, a thin rail, a card per meeting */
.nx-root .nx-mt-agenda { display: grid; gap: var(--nx-s6); }
.nx-root .nx-mt-dayh { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nx-s2); margin: 0 0 var(--nx-s3); font-size: var(--nx-fs-h3); }
.nx-root .nx-mt-dayh small { color: var(--nx-muted); font-size: var(--nx-fs-small); font-weight: 500; }
.nx-root .nx-mt-dayh em { color: var(--nx-muted); font-size: var(--nx-fs-small); font-style: normal; font-weight: 400; }
.nx-root .nx-mt-dayh.is-today span { color: var(--nx-blue-text); }
.nx-root .nx-mt-rail { position: relative; display: grid; gap: var(--nx-s3); padding-left: var(--nx-s5); }
.nx-root .nx-mt-rail::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 2px; background: var(--nx-line); border-radius: 2px; }
.nx-root .nx-mt-card { --mt-z: 0px; position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--nx-s4); padding: var(--nx-s4); background: var(--nx-surface); border: 1px solid var(--nx-line); border-left: 4px solid var(--nx-blue); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow);
  transform: perspective(900px) translateZ(var(--mt-z)) rotateX(var(--mt-tx, 0deg)) rotateY(var(--mt-ty, 0deg)); transform-style: flat; transition: transform var(--nx-d1) ease-out, box-shadow var(--nx-d1) ease-out; min-width: 0; }
.nx-root .nx-mt-card::before { content: ""; position: absolute; left: calc(-1 * var(--nx-s5) - 4px + 1px); top: 24px; width: 10px; height: 10px; border-radius: 50%; background: var(--nx-blue); border: 2px solid var(--nx-bg); }
.nx-root .nx-mt-card:hover { --mt-z: 5px; will-change: transform; box-shadow: var(--nx-lift); }
.nx-root .nx-mt-card:focus-within { box-shadow: var(--nx-lift); }
.nx-root .nx-mt-card--next { --mt-z: 8px; border-left-color: var(--nx-cyan); box-shadow: var(--nx-lift); }
.nx-root .nx-mt-card--next:hover { --mt-z: 12px; }
.nx-root .nx-mt-card--next::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 2px var(--nx-cyan); opacity: .55; pointer-events: none; }
.nx-root .nx-mt-card.is-tentative { border-left-style: dashed; }
.nx-root .nx-mt-card.is-private { border-left-color: var(--nx-muted); }
.nx-root .nx-mt-card.is-cancelled { opacity: .78; border-left-color: var(--nx-danger); }
.nx-root .nx-mt-card.is-cancelled .nx-mt-titlebtn, .nx-root .nx-mt-card.is-cancelled .nx-mt-time__start { text-decoration: line-through; }
.nx-root .nx-mt-time { display: grid; align-content: start; justify-items: center; gap: 2px; padding: var(--nx-s2) 0; border-radius: var(--nx-r1); background: var(--nx-blue-soft); color: var(--nx-blue-text); font-variant-numeric: tabular-nums; height: fit-content; }
.nx-root .nx-mt-time__start { font-size: 20px; line-height: 1.1; font-weight: 700; letter-spacing: .02em; }
.nx-root .nx-mt-time__start--all { font-size: var(--nx-fs-small); }
.nx-root .nx-mt-time__end { font-size: var(--nx-fs-small); opacity: .85; }
.nx-root .nx-mt-body { display: grid; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-mt-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-mt-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--nx-s2); border-radius: var(--nx-rfull); background: var(--nx-hover); color: var(--nx-text); font-size: 12px; line-height: 1.5; }
.nx-root .nx-mt-badge--on { background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-mt-badge--ppl { background: var(--nx-ok-soft); color: var(--nx-ok-text); }
.nx-root .nx-mt-badge--warn { background: var(--nx-amber-soft); color: var(--nx-amber-text); }
.nx-root .nx-mt-badge--bad { background: var(--nx-bad-soft); color: var(--nx-bad-text); }
.nx-root .nx-mt-dur { color: var(--nx-muted); font-size: 12px; }
.nx-root .nx-mt-live { padding: 2px var(--nx-s2); border-radius: var(--nx-rfull); background: var(--nx-blue); color: var(--nx-on-blue); font-size: 12px; font-weight: 700; }
.nx-root .nx-mt-live--now { background: var(--nx-success); }
.nx-root .nx-mt-title { margin: 0; font-size: var(--nx-fs-h3); line-height: 1.3; overflow-wrap: anywhere; }
.nx-root .nx-mt-titlebtn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--nx-text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.nx-root .nx-mt-titlebtn:hover { color: var(--nx-blue-text); text-decoration: underline; }
.nx-root .nx-mt-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2) var(--nx-s4); color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-mt-place { display: inline-flex; align-items: center; gap: 4px; }
.nx-root .nx-mt-join { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--nx-s4); border-radius: var(--nx-r1); background: var(--nx-blue); color: var(--nx-on-blue); font-weight: 700; text-decoration: none; transition: transform var(--nx-d1) ease-out, box-shadow var(--nx-d1); }
.nx-root .nx-mt-join:hover { transform: translateY(-1px); box-shadow: var(--nx-lift); }
.nx-root .nx-mt-join:active { transform: translateY(0); transition-duration: 100ms; }
.nx-root .nx-mt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nx-root .nx-mt-chip { padding: 2px var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); background: var(--nx-hover); font-size: var(--nx-fs-small); }
.nx-root .nx-mt-more { padding: 2px var(--nx-s3); border: 1px dashed var(--nx-control-line); border-radius: var(--nx-rfull); background: transparent; color: var(--nx-link); font: inherit; font-size: var(--nx-fs-small); cursor: pointer; }
.nx-root .nx-mt-prepbtn { display: inline-flex; align-items: center; gap: 6px; padding: var(--nx-s1) 0; border: 0; background: none; color: var(--nx-link); font: inherit; font-weight: 600; cursor: pointer; }
.nx-root .nx-mt-chev { display: inline-flex; transition: transform var(--nx-d2) ease-in-out; }
.nx-root .nx-mt-chev.is-open { transform: rotate(90deg); }
.nx-root .nx-mt-fold.is-open > .nx-mt-prep { animation: nx-mt-rise 250ms ease-in-out both; }
.nx-root .nx-mt-prep { display: grid; gap: var(--nx-s2); margin-top: var(--nx-s2); padding: var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-r1); background: var(--nx-hover); }
.nx-root .nx-mt-mails { display: grid; gap: var(--nx-s2); margin: 0; padding: 0; list-style: none; }
.nx-root .nx-mt-mail { display: grid; gap: 2px; padding: var(--nx-s2) var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-r1); background: var(--nx-surface); }
.nx-root .nx-mt-mail__top { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s2); }
.nx-root .nx-mt-mail__subj { overflow-wrap: anywhere; }
.nx-root .nx-mt-mail__meta { color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-mt-mail__sum { margin: 0; font-size: var(--nx-fs-small); }

/* Join: Copy link and the one line when the browser refuses the new tab */
.nx-root .nx-mt-copy { min-height: 36px; padding: 0 var(--nx-s3); border: 1px solid var(--nx-control-line); border-radius: var(--nx-r1); background: var(--nx-surface); color: var(--nx-text); font: inherit; font-size: var(--nx-fs-small); cursor: pointer; }
.nx-root .nx-mt-copy:hover { background: var(--nx-hover); }
.nx-root .nx-mt-joinmsg { flex-basis: 100%; padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r1); background: var(--nx-amber-soft); color: var(--nx-amber-text); font-size: var(--nx-fs-small); }

/* ---------------------------------------------------------------- Day and Week */
.nx-root .nx-mt-cal { border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); box-shadow: var(--nx-shadow); overflow: hidden; }
.nx-root .nx-mt-cal__scroll { max-height: 640px; overflow: auto; position: relative; }
.nx-root .nx-mt-cal__sticky { position: sticky; top: 0; z-index: 4; background: var(--nx-surface); border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-mt-cal__head, .nx-root .nx-mt-allday, .nx-root .nx-mt-cal__body { display: grid; min-width: min-content; }
.nx-root .nx-mt-colh { display: flex; justify-content: center; padding: 6px 0; border-left: 1px solid var(--nx-line); }
.nx-root .nx-mt-colh__btn { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px var(--nx-s3); border: 0; border-radius: var(--nx-r1); background: none; color: var(--nx-text); font: inherit; cursor: pointer; }
.nx-root .nx-mt-colh__btn:hover { background: var(--nx-hover); }
.nx-root .nx-mt-colh__wd { color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-mt-colh__num { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border-radius: var(--nx-rfull); font-size: var(--nx-fs-h3); font-weight: 700; }
.nx-root .nx-mt-colh.is-today .nx-mt-colh__num { background: var(--nx-blue); color: var(--nx-on-blue); }
.nx-root .nx-mt-colh.is-today .nx-mt-colh__wd { color: var(--nx-blue-text); font-weight: 700; }
.nx-root .nx-mt-allday { border-top: 1px solid var(--nx-line); }
.nx-root .nx-mt-allday__lab { padding: var(--nx-s2) 6px; color: var(--nx-muted); font-size: 12px; text-align: right; }
.nx-root .nx-mt-allday__cell { display: grid; gap: 2px; align-content: start; padding: 3px; border-left: 1px solid var(--nx-line); min-width: 0; }
.nx-root .nx-mt-allday__cell.is-today { background: var(--nx-hover); }
.nx-root .nx-mt-pill { overflow: hidden; padding: 2px var(--nx-s2); border: 0; border-left: 4px solid var(--nx-cyan); border-radius: var(--nx-r1); background: var(--nx-blue-soft); color: var(--nx-blue-text); font: inherit; font-size: var(--nx-fs-small); text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.nx-root .nx-mt-pill.is-cancelled { text-decoration: line-through; opacity: .75; }
.nx-root .nx-mt-axis { position: relative; }
.nx-root .nx-mt-axis__h { position: absolute; right: 6px; transform: translateY(-50%); color: var(--nx-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.nx-root .nx-mt-col { position: relative; border-left: 1px solid var(--nx-line); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 55px, var(--nx-line) 55px, var(--nx-line) 56px); }
.nx-root .nx-mt-col.is-today { background-color: var(--nx-hover); }
.nx-root .nx-mt-col [role="listitem"] { display: contents; }
.nx-root .nx-mt-block { position: absolute; display: grid; align-content: start; gap: 0; overflow: hidden; padding: 2px 6px; border: 1px solid var(--nx-blue); border-left-width: 4px; border-radius: var(--nx-r1); background: var(--nx-blue-soft); color: var(--nx-text); font: inherit; font-size: 12px; line-height: 1.3; text-align: left; cursor: pointer; transition: transform var(--nx-d1) ease-out, box-shadow var(--nx-d1) ease-out; }
.nx-root .nx-mt-block:hover, .nx-root .nx-mt-block:focus-visible { transform: translateY(-1px); box-shadow: var(--nx-lift); z-index: 3; }
.nx-root .nx-mt-block.is-online { border-left-color: var(--nx-cyan); }
.nx-root .nx-mt-block.is-short { display: flex; align-items: center; gap: 6px; padding-top: 0; padding-bottom: 0; white-space: nowrap; }
.nx-root .nx-mt-block.is-short .nx-mt-block__n { min-width: 0; }
.nx-root .nx-mt-block.is-tentative { border-style: dashed; border-left-width: 4px; background: var(--nx-surface); }
.nx-root .nx-mt-block.is-private { background: var(--nx-hover); border-color: var(--nx-muted); }
.nx-root .nx-mt-block.is-cancelled { opacity: .75; }
.nx-root .nx-mt-block.is-cancelled .nx-mt-block__n, .nx-root .nx-mt-block.is-cancelled .nx-mt-block__t { text-decoration: line-through; }
.nx-root .nx-mt-block__t { color: var(--nx-blue-text); font-variant-numeric: tabular-nums; }
.nx-root .nx-mt-block__n { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.nx-root .nx-mt-block__w { color: var(--nx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-mt-now { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--nx-danger); z-index: 2; pointer-events: none; transition: transform 500ms ease-out; }
.nx-root .nx-mt-now__dot { position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--nx-danger); }
.nx-root .nx-mt-now__label { position: absolute; right: 2px; top: -18px; padding: 0 4px; border-radius: 4px; background: var(--nx-danger); color: var(--nx-bg); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Month */
.nx-root .nx-mt-month { border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); box-shadow: var(--nx-shadow); overflow: auto; }
.nx-root .nx-mt-month__wd, .nx-root .nx-mt-month__grid { display: grid; grid-template-columns: repeat(7, minmax(96px, 1fr)); min-width: 672px; }
.nx-root .nx-mt-month__wd { border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-mt-month__wd > div { padding: var(--nx-s2); color: var(--nx-muted); font-size: var(--nx-fs-small); text-align: center; }
.nx-root .nx-mt-cell { display: grid; align-content: start; gap: 2px; min-height: 112px; padding: 4px; border-left: 1px solid var(--nx-line); border-top: 1px solid var(--nx-line); min-width: 0; }
.nx-root .nx-mt-cell:nth-child(7n + 1) { border-left: 0; }
.nx-root .nx-mt-cell:nth-child(-n + 7) { border-top: 0; }
.nx-root .nx-mt-cell.is-out { background: var(--nx-hover); }
.nx-root .nx-mt-cell.is-out .nx-mt-cell__num { color: var(--nx-muted); }
.nx-root .nx-mt-cell.is-today { background: var(--nx-blue-soft); }
.nx-root .nx-mt-cell__num { justify-self: end; min-width: 28px; height: 28px; border: 0; border-radius: var(--nx-rfull); background: none; color: var(--nx-text); font: inherit; font-weight: 700; cursor: pointer; }
.nx-root .nx-mt-cell__num:hover { background: var(--nx-hover); }
.nx-root .nx-mt-cell.is-today .nx-mt-cell__num { background: var(--nx-blue); color: var(--nx-on-blue); }
.nx-root .nx-mt-chipbtn { overflow: hidden; padding: 1px 6px; border: 0; border-left: 3px solid var(--nx-blue); border-radius: 4px; background: var(--nx-surface); color: var(--nx-text); font: inherit; font-size: 12px; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.nx-root .nx-mt-chipbtn:hover { background: var(--nx-hover); }
.nx-root .nx-mt-chipbtn.is-tentative { border-left-style: dashed; }
.nx-root .nx-mt-chipbtn.is-private { border-left-color: var(--nx-muted); }
.nx-root .nx-mt-chipbtn.is-cancelled { text-decoration: line-through; opacity: .75; }
.nx-root .nx-mt-cell__more { justify-self: start; padding: 0 6px; border: 0; background: none; color: var(--nx-link); font: inherit; font-size: 12px; cursor: pointer; }

/* ---------------------------------------------------------------- the drawer (the topmost layer) */
.nx-root .nx-mt-scrim { position: fixed; inset: 0; z-index: 1200; display: flex; justify-content: flex-end; background: var(--nx-scrim); animation: nx-mt-fade var(--nx-d2) both; }
.nx-root .nx-mt-drawer { width: min(460px, 100%); height: 100%; overflow: auto; padding: var(--nx-s5); background: var(--nx-surface); color: var(--nx-text); box-shadow: var(--nx-panel-shadow); transform-origin: 100% 50%; animation: nx-mt-drawer 300ms cubic-bezier(.22, 1, .36, 1) both; display: grid; align-content: start; gap: var(--nx-s3); }
.nx-root .nx-mt-drawer__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s2); }
.nx-root .nx-mt-drawer__title { margin: 0; font-size: var(--nx-fs-h2); line-height: 1.25; overflow-wrap: anywhere; }
.nx-root .nx-mt-drawer__title.is-cancelled { text-decoration: line-through; }
.nx-root .nx-mt-drawer__when { margin: 0; color: var(--nx-text); }
.nx-root .nx-mt-drawer__when small { color: var(--nx-muted); }
.nx-root .nx-mt-drawer__h { margin: 0 0 var(--nx-s2); font-size: var(--nx-fs-body); }
.nx-root .nx-mt-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--nx-s1) var(--nx-s4); margin: 0; }
.nx-root .nx-mt-facts dt { color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-mt-facts dd { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-mt-people { display: grid; gap: 2px; margin: 0; padding-left: var(--nx-s5); }

/* ---------------------------------------------------------------- states: loading skeleton, empty */
.nx-root .nx-mt-skeleton { display: grid; gap: var(--nx-s3); }
.nx-root .nx-mt-skel { position: relative; overflow: hidden; background: var(--nx-hover); border-radius: var(--nx-r1); }
.nx-root .nx-mt-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--nx-line), transparent); transform: translateX(-100%); animation: nx-mt-shimmer 1.5s linear infinite; }
.nx-root .nx-mt-skel--card { display: grid; grid-template-columns: 76px 1fr; grid-template-rows: 18px 14px; gap: var(--nx-s2) var(--nx-s4); height: 104px; padding: var(--nx-s4); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); }
.nx-root .nx-mt-skel--card::after { display: none; }
.nx-root .nx-mt-skel--time { grid-row: 1 / span 2; height: 64px; }
.nx-root .nx-mt-skel--l1 { width: 55%; }
.nx-root .nx-mt-skel--l2 { width: 80%; }
.nx-root .nx-mt-skel--row { height: 54px; }
.nx-root .nx-mt-empty { display: grid; justify-items: center; gap: var(--nx-s2); padding: var(--nx-s8) var(--nx-s4); border: 1px dashed var(--nx-control-line); border-radius: var(--nx-r2); background: var(--nx-surface); text-align: center; }
.nx-root .nx-mt-empty__t { margin: 0; font-size: var(--nx-fs-h3); }
.nx-root .nx-mt-empty__art { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: var(--nx-r2); background: var(--nx-blue-soft); color: var(--nx-blue-text); box-shadow: var(--nx-shadow); transform: perspective(500px) rotateX(10deg) rotateY(-12deg); }
.nx-root .nx-mt-empty__art--bad { background: var(--nx-bad-soft); color: var(--nx-bad-text); }

/* ---------------------------------------------------------------- phone */
@media (max-width: 700px) {
  .nx-root .nx-mt-card { grid-template-columns: 1fr; }
  .nx-root .nx-mt-time { grid-auto-flow: column; justify-content: start; gap: var(--nx-s2); padding: var(--nx-s1) var(--nx-s3); width: fit-content; }
  .nx-root .nx-mt-time__end::before { content: "- "; }
  .nx-root .nx-mt-bar__tools { width: 100%; }
  .nx-root .nx-mt-cal__scroll { max-height: calc(70 * var(--ao-vh)); }
}

/* ---------------------------------------------------------------- reduced motion: no tilt, no fold, no lift in depth, fades only; touch: no tilt */
@media (prefers-reduced-motion: reduce) {
  .nx-root .nx-mt-card, .nx-root .nx-mt-card:hover, .nx-root .nx-mt-card--next, .nx-root .nx-mt-card--next:hover { transform: none; transition: none; }
  .nx-root .nx-mt-view { animation: nx-mt-fade var(--nx-d2) linear both; }
  .nx-root .nx-mt-drawer { animation: nx-mt-fade var(--nx-d2) linear both; }
  .nx-root .nx-mt-fold.is-open > .nx-mt-prep { animation: nx-mt-fade var(--nx-d2) linear both; }
  .nx-root .nx-mt-skel::after, .nx-root .nx-mt-spin { animation: none; }
  .nx-root .nx-mt-now, .nx-root .nx-mt-chev { transition: none; }   /* the now marker is placed with transform: it only stops moving smoothly */
  .nx-root .nx-mt-block, .nx-root .nx-mt-join, .nx-root .nx-mt-iconbtn { transition: none; transform: none; }
  .nx-root .nx-mt-empty__art { transform: none; }
}
@media (hover: none) {
  .nx-root .nx-mt-card, .nx-root .nx-mt-card:hover { transform: none; }
}

/* nx-w42.css: MEETING REMINDERS (8 Nov 2026). Every rule starts with .nx-root (qa-2026-10-21-nx-css-scoped); colours are --nx-* tokens only (qa-2026-10-21-nx-themes).
   A small card in the corner above the Assistant's button (never blocking: the wrapper takes no clicks, only the cards do), the bell list, and the choice in the Meetings tab.
   Only transform and opacity move. prefers-reduced-motion: no fold, no lift, a fade only. */
.nx-root .nx-mtr { position: fixed; right: var(--nx-s4); bottom: 116px; z-index: 1190; display: grid; gap: var(--nx-s2); width: min(380px, calc(calc(100 * var(--ao-vw)) - 2 * var(--nx-s4))); pointer-events: none; perspective: 900px; }
.nx-root .nx-mtr__card { pointer-events: auto; display: grid; gap: var(--nx-s2); padding: var(--nx-s4); background: var(--nx-surface); color: var(--nx-text); border: 1px solid var(--nx-line); border-left: 4px solid var(--nx-blue); border-radius: var(--nx-r2); box-shadow: var(--nx-lift);
  transform-origin: 50% 100%; animation: nx-mtr-in var(--nx-d3) var(--nx-curve) both; }
.nx-root .nx-mtr__card.is-now { border-left-color: var(--nx-cyan); box-shadow: var(--nx-lift), 0 0 0 2px var(--nx-cyan); }
@keyframes nx-mtr-in { from { opacity: 0; transform: translateY(18px) rotateX(10deg) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes nx-mtr-fade { from { opacity: 0; } to { opacity: 1; } }
.nx-root .nx-mtr__top { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s2); }
.nx-root .nx-mtr__head { display: inline-flex; padding: 2px var(--nx-s3); border-radius: var(--nx-rfull); background: var(--nx-blue); color: var(--nx-on-blue); font-size: var(--nx-fs-small); }
.nx-root .nx-mtr__card.is-now .nx-mtr__head { background: var(--nx-success); }
.nx-root .nx-mtr__x { width: 32px; height: 32px; border: 0; border-radius: var(--nx-r1); background: none; color: var(--nx-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.nx-root .nx-mtr__x:hover { background: var(--nx-hover); color: var(--nx-text); }
.nx-root .nx-mtr__title { font-size: var(--nx-fs-h3); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.nx-root .nx-mtr__meta { color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-mtr__acts { display: flex; flex-wrap: wrap; gap: var(--nx-s2); margin-top: var(--nx-s1); }
.nx-root .nx-mtr__join, .nx-root .nx-mtr__open { min-height: 44px; padding: 0 var(--nx-s4); font-weight: 700; text-decoration: none; }
.nx-root .nx-mtr__snz { min-height: 44px; }
.nx-root .nx-mtr button:focus-visible, .nx-root .nx-mtr a:focus-visible { outline: var(--nx-focus-ring); outline-offset: 2px; }
/* the bell */
.nx-root .nx-mtr__bell { padding: var(--nx-s2) 0 var(--nx-s3); border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-mtr__belllist { display: grid; gap: var(--nx-s2); margin: 0; padding: 0; list-style: none; }
.nx-root .nx-mtr__bellrow { display: grid; gap: var(--nx-s2); padding: var(--nx-s2) var(--nx-s3); border: 1px solid var(--nx-line); border-left: 4px solid var(--nx-blue); border-radius: var(--nx-r1); background: var(--nx-surface); }
.nx-root .nx-mtr__bellmain { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-mtr__bellmain .nx-mtr__meta { font-size: var(--nx-fs-small); }
/* the choice, in the Meetings tab */
.nx-root .nx-mt-remind { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2) var(--nx-s5); padding: var(--nx-s3); background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); }
.nx-root .nx-mt-remind__row { display: inline-flex; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-mt-remind select { min-height: var(--nx-tap); padding: 0 var(--nx-s2); border: 1px solid var(--nx-control-line); border-radius: var(--nx-r1); background: var(--nx-surface); color: var(--nx-text); font: inherit; }
.nx-root .nx-mt-remind input[type="checkbox"] { width: 20px; height: 20px; }
.nx-root .nx-mt-remind .nx-mt-note { flex-basis: 100%; margin: 0; }
.nx-root .nx-mt-remind select:focus-visible, .nx-root .nx-mt-remind input:focus-visible { outline: var(--nx-focus-ring); outline-offset: 2px; }
@media (max-width: 700px) {
  .nx-root .nx-mtr { right: var(--nx-s3); left: var(--nx-s3); width: auto; bottom: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-root .nx-mtr__card { animation: nx-mtr-fade var(--nx-d2) linear both; transform: none; }
}

/* Connect now (8 Nov 2026): the card that says which system is not connected and gives the way to connect it (connectnow.jsx), under a chat answer, on the agent's page and in Admin > Connections.
   Every rule starts with .nx-root and uses only --nx-* tokens, so the light, dark and tinted skins and the phone layout follow the app; motion only inside prefers-reduced-motion: no-preference. */
.nx-root .cn-stack { display: grid; gap: var(--nx-s3); margin: var(--nx-s3) 0; }
.nx-root .cn-card { border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); color: var(--nx-text); box-shadow: var(--nx-shadow); padding: var(--nx-s4); display: grid; gap: var(--nx-s3); max-width: 100%; }
.nx-root .cn-card--info { border-left: 4px solid var(--nx-blue); }
.nx-root .cn-card--warn { border-left: 4px solid var(--nx-amber); background: var(--nx-amber-soft); }
.nx-root .cn-card--ok { border-left: 4px solid var(--nx-success); }
.nx-root .cn-card--compact { padding: var(--nx-s3); }
.nx-root .cn-head { display: flex; gap: var(--nx-s3); align-items: flex-start; min-width: 0; }
.nx-root .cn-icon { flex: none; width: 36px; height: 36px; border-radius: var(--nx-rfull); display: grid; place-items: center; background: var(--nx-blue-soft); color: var(--nx-blue-text); box-shadow: var(--nx-lift); }
.nx-root .cn-card--ok .cn-icon { background: var(--nx-ok-soft); color: var(--nx-ok-text); }
.nx-root .cn-card--warn .cn-icon { background: var(--nx-amber-soft); color: var(--nx-amber-text); }
.nx-root .cn-icon .nx-gl { --gls: 20; }
.nx-root .cn-body { min-width: 0; overflow-wrap: anywhere; }
.nx-root .cn-body p { margin: 2px 0 0; }
.nx-root .cn-row { display: flex; gap: var(--nx-s2); flex-wrap: wrap; align-items: center; }
.nx-root .cn-row .nx-btn { min-height: var(--nx-tap); }
.nx-root .cn-try { margin-top: var(--nx-s1); }
.nx-root .cn-ok { color: var(--nx-ok-text); }
.nx-root .cn-err { color: var(--nx-bad-text); margin: var(--nx-s2) 0 0; }
.nx-root .cn-wait { display: flex; gap: var(--nx-s2); align-items: center; }
.nx-root .cn-dot { width: 8px; height: 8px; border-radius: var(--nx-rfull); background: var(--nx-blue); display: inline-block; }

/* the key dialog: a native <dialog>, a full-width sheet on a phone */
.nx-root .cn-dialog { border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); color: var(--nx-text); box-shadow: var(--nx-panel-shadow); padding: var(--nx-s5); width: min(480px, calc(calc(100 * var(--ao-vw)) - 2 * var(--nx-s4))); }
.nx-root .cn-dialog::backdrop { background: var(--nx-scrim); }
.nx-root .cn-dialog h3 { margin: 0 0 var(--nx-s2); font-size: var(--nx-fs-h3); }
.nx-root .cn-field { display: grid; gap: var(--nx-s1); margin: var(--nx-s3) 0; }
.nx-root .cn-field span { font-size: var(--nx-fs-small); color: var(--nx-muted); }
.nx-root .cn-field .nx-input { width: 100%; min-height: var(--nx-tap); }

/* Admin > Connections > QwenWork per person: the switch (labels above fields, a line under each tick saying what it does) */
.nx-root .cn-switch { display: grid; gap: var(--nx-s4); max-width: 620px; margin: var(--nx-s3) 0 var(--nx-s4); padding: var(--nx-s4); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); }
.nx-root .cn-switch .cn-tick { display: grid; grid-template-columns: 22px 1fr; gap: var(--nx-s1) var(--nx-s3); align-items: start; cursor: pointer; }
.nx-root .cn-switch .cn-tick input { width: 18px; height: 18px; margin: 3px 0 0; }
.nx-root .cn-switch .cn-tick span { grid-column: 2; font-size: var(--nx-fs-small); color: var(--nx-muted); }
.nx-root .cn-switch .cn-field { margin: 0; }
.nx-root .cn-switch .cn-field small { font-size: var(--nx-fs-small); color: var(--nx-muted); }
.nx-root .cn-switch .cn-field .nx-input { flex: none; }

/* Admin > Connections: counts only */
.nx-root .cn-admin { margin: 0 0 var(--nx-s5); }
.nx-root .cn-admin h3 { margin: 0 0 var(--nx-s1); font-size: var(--nx-fs-h3); }
.nx-root .cn-tablewrap { overflow-x: auto; }
.nx-root .cn-table { width: 100%; }
.nx-root .cn-table th, .nx-root .cn-table td { text-align: left; padding: var(--nx-s2) var(--nx-s3); vertical-align: middle; }
.nx-root .cn-act { text-align: right; white-space: nowrap; }
.nx-root .cn-people { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .cn-people li { display: flex; gap: var(--nx-s3); align-items: center; flex-wrap: wrap; }
.nx-root .cn-people li > span:first-child { flex: 1 1 140px; }

@media (max-width: 640px) {
  .nx-root .cn-dialog { margin: auto auto 0; width: calc(100 * var(--ao-vw)); max-width: calc(100 * var(--ao-vw)); border-radius: var(--nx-r2) var(--nx-r2) 0 0; }
  .nx-root .cn-row .nx-btn { flex: 1 1 140px; }
}
@media (prefers-reduced-motion: no-preference) {
  .nx-root .cn-card { animation: nx-cn-in var(--nx-d2) var(--nx-curve) both; transition: transform var(--nx-d1) var(--nx-curve), box-shadow var(--nx-d1) var(--nx-curve); }
  .nx-root .cn-card:hover { transform: translateY(-1px); }
  .nx-root .cn-dot { animation: nx-cn-pulse 1.4s ease-in-out infinite; }
  .nx-root .cn-dialog[open] { animation: nx-cn-in var(--nx-d2) var(--nx-curve) both; }
}
@keyframes nx-cn-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes nx-cn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ALL PAGES AND THE ADMIN TILES (NAV EASY, 31 Oct 2026, nx-find.jsx). The tile is the Departments and Agents pages' own (nx-w31.css .nx-dv-tile, .nx-dv-g-*): a gradient picture with an edge of light, on a card
   with a paper edge and a layered shadow. Tokens only, every selector under .nx-root. The lift on hover comes from the connect hub's shared .h3-card (home-3d.css), off under reduced motion. */
.nx-root .nx-fd-h { margin: var(--nx-s5) 0 var(--nx-s3); font-size: var(--nx-fs-small); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--nx-muted); }
.nx-root .nx-fd-sec:first-of-type .nx-fd-h { margin-top: var(--nx-s2); }
.nx-root .nx-fd-filter { max-width: 360px; margin: 0 0 var(--nx-s2); }
.nx-root .nx-fd-grid { display: grid; gap: var(--nx-s3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); }
.nx-root .nx-fd-tile { position: relative; isolation: isolate; display: grid; justify-items: center; align-content: start; gap: var(--nx-s2); min-height: 112px; padding: var(--nx-s4) var(--nx-s2) var(--nx-s3); text-align: center;
  border: 1px solid var(--nx-line); border-radius: var(--nx-r2); color: var(--nx-text); text-decoration: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nx-surface) 88%, var(--nx-dv-hi)), var(--nx-surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nx-dv-hi) 55%, transparent), 0 1px 2px color-mix(in srgb, var(--nx-text) 10%, transparent), 0 10px 20px -14px color-mix(in srgb, var(--nx-text) 45%, transparent); }
.nx-root .nx-fd-tile::before { content: ""; position: absolute; z-index: -1; left: 7px; right: 7px; bottom: -5px; height: 100%; border-radius: var(--nx-r2); background: var(--nx-line); opacity: .5; }
.nx-root .nx-fd-tile:hover { border-color: color-mix(in srgb, var(--nx-blue) 45%, var(--nx-line)); color: var(--nx-text); }
.nx-root .nx-fd-tile:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; }
.nx-root .nx-fd-tile__n { font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.nx-root .nx-fd-tile__c { position: absolute; top: 8px; right: 8px; margin: 0; }
/* ADMIN ONCE: a tile with a number needs the person: a soft amber edge and wash (the number says how many; never colour alone) */
.nx-root .nx-fd-tile.is-due { border-color: color-mix(in srgb, var(--nx-amber) 55%, var(--nx-line)); background: linear-gradient(180deg, color-mix(in srgb, var(--nx-amber) 9%, var(--nx-surface)), var(--nx-surface)); }
.nx-root .nx-fd-admin { margin: 0 0 var(--nx-s5); }
.nx-root .nx-td-line { margin: var(--nx-s3) 0; padding: var(--nx-s3) var(--nx-s4); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); color: var(--nx-text); overflow-wrap: anywhere; }   /* the heavy chats note: one item in a card on Quality checks, never loose at the page edge */
/* ADMIN TABS (31 Oct 2026): the Admin page's five tabs on a sunken track (.h3-sunken of home-3d.css), the open one raised (.h3-btn); then a pill row of sections (.nx-seg). Tokens only, so every theme follows. */
.nx-root .nx-at { display: flex; flex-wrap: wrap; gap: var(--nx-s2); padding: 6px; margin: 0 0 var(--nx-s4); border-radius: var(--nx-r2); background: color-mix(in srgb, var(--nx-hover) 70%, var(--nx-surface)); }
.nx-root .nx-at__t { display: inline-flex; align-items: center; gap: var(--nx-s2); min-height: var(--nx-tap); padding: 6px 14px; border-radius: calc(var(--nx-r2) - 4px); color: var(--nx-muted); font-weight: 700; text-decoration: none; }
.nx-root .nx-at__t:hover { color: var(--nx-text); background: color-mix(in srgb, var(--nx-surface) 60%, transparent); }
.nx-root .nx-at__t.is-on { color: var(--nx-text); background: var(--nx-surface); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nx-dv-hi) 55%, transparent), 0 1px 2px color-mix(in srgb, var(--nx-text) 14%, transparent), 0 6px 12px -8px color-mix(in srgb, var(--nx-text) 45%, transparent); }
.nx-root .nx-at__t:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; }
.nx-root .nx-at__i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-at__t .nx-count { margin-left: 2px; }
.nx-root .nx-adm--tabs > .nx-adm-seg { margin-bottom: var(--nx-s4); }
/* Needs you: one row per thing that waits; the open one shows its section under it */
.nx-root .nx-need-rows { list-style: none; margin: 0 0 var(--nx-s4); padding: 0; display: grid; gap: var(--nx-s3); }
.nx-root .nx-need__row { display: flex; align-items: center; gap: var(--nx-s3); min-height: 64px; padding: 10px 16px; border: 1px solid var(--nx-line); border-radius: var(--nx-r2); color: var(--nx-text); text-decoration: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nx-surface) 88%, var(--nx-dv-hi)), var(--nx-surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nx-dv-hi) 55%, transparent), 0 1px 2px color-mix(in srgb, var(--nx-text) 10%, transparent), 0 10px 20px -14px color-mix(in srgb, var(--nx-text) 45%, transparent); }
.nx-root .nx-need__row:hover { border-color: color-mix(in srgb, var(--nx-blue) 45%, var(--nx-line)); color: var(--nx-text); }
.nx-root .nx-need__row:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; }
.nx-root .nx-need__row .nx-dv-tile { width: 40px; height: 40px; border-radius: 12px; }
.nx-root .nx-need__row .nx-dv-ico { width: 22px; height: 22px; }
.nx-root .nx-need__n { font-size: var(--nx-fs-h3); overflow-wrap: anywhere; }
.nx-root .nx-need__what { display: grid; gap: 2px; min-width: 0; }   /* ONE NUMBER: the name, and one line of what to do */
.nx-root .nx-need__line { font-size: var(--nx-fs-small); color: var(--nx-muted); overflow-wrap: anywhere; }
.nx-root .nx-need-calm { margin: 0 0 var(--nx-s4); padding: var(--nx-s4); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); color: var(--nx-muted); font-weight: 700; }
.nx-root .nx-need__row .nx-count { font-size: 14px; padding: 1px 10px; }
.nx-root .nx-need__go { margin-left: auto; color: var(--nx-blue); font-weight: 700; }
.nx-root .nx-need.is-open .nx-need__row { border-color: color-mix(in srgb, var(--nx-blue) 55%, var(--nx-line)); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.nx-root .nx-need__body { padding: var(--nx-s4); border: 1px solid var(--nx-line); border-top: 0; border-radius: 0 0 var(--nx-r2) var(--nx-r2); background: var(--nx-surface); min-width: 0; }
/* inside the Admin tabs the section pill names the section, so the People page's own heading would say it twice */
.nx-root .nx-adm--tabs .nx-pa__h { display: none; }
/* TRAINING IS PERSONAL (1 Nov 2026): a person's training on their card in People */
.nx-root .nx-pt { display: grid; gap: var(--nx-s2); margin: var(--nx-s4) 0; padding-top: var(--nx-s3); border-top: 1px solid var(--nx-line); }
.nx-root .nx-pt .nx-h4 { margin: 0; }
.nx-root .nx-pt__bar { width: 100%; height: 8px; accent-color: var(--nx-blue); }
.nx-root .nx-pt__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s3); }
.nx-root .nx-pt__list li { display: grid; gap: 6px; justify-items: start; padding: var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); min-width: 0; }
.nx-root .nx-pt__said, .nx-root .nx-pt__reply { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.nx-root .nx-pt__reply { color: var(--nx-muted); }
.nx-root .nx-pt__form { display: grid; gap: var(--nx-s2); width: 100%; }
.nx-root .nx-pt__form .nx-input { width: 100%; }
/* FLOW SIMPLE (1 Nov 2026): My profile Overview, the one personal page (the octagon on top, then what was learned, the PA rules, my AI use, who looked) */
.nx-root .nx-me { display: grid; gap: var(--nx-s5); min-width: 0; }
.nx-root .nx-me > * { min-width: 0; }
.nx-root .nx-me > .nx-old { min-height: 0; }   /* each part is as tall as it is (the old-page box keeps a page height elsewhere) */
.nx-root .t3d-more { margin-top: var(--nx-s2); }
.nx-root .t3d-more > summary { cursor: pointer; font-weight: 700; color: var(--nx-blue); min-height: var(--nx-tap); display: flex; align-items: center; }
/* FLOW SIMPLE (1 Nov 2026): Work's pills inside a tab, and the one view button (no "..." menu) */
.nx-root .nx-pw-sub { margin: var(--nx-s3) 0 var(--nx-s2); flex-wrap: wrap; }
.nx-root .nx-pw-view { flex: none; white-space: nowrap; }
/* a board of cards is for a wide screen; on a phone the list stays */
@media (max-width: 640px) { .nx-root .nx-pw .nx-pw-head .nx-pw-view { display: none; } }
/* NEEDS GROUPED (1 Nov 2026): the one line above the list, a group opened in place, and the confirm of Approve selected / Reject selected */
.nx-root .nx-need-sum { margin: 0 0 var(--nx-s3); font-weight: 700; color: var(--nx-text); }
.nx-root .nx-need-in { padding: var(--nx-s3) var(--nx-s4) var(--nx-s4); border-top: 1px solid var(--nx-line); display: grid; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-need-ask { display: grid; gap: var(--nx-s2); padding: var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); }
/* APPROVE ALL: the result of a run, the Approve all line of a group in Needs me, and a group line in Admin > Decisions */
.nx-root .nx-need-res { display: grid; gap: 4px; padding: var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); overflow-wrap: anywhere; }
.nx-root .nx-need-all { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s3); }
.nx-root .nx-need-grp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s2); padding: var(--nx-s3); margin-bottom: var(--nx-s2); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); overflow-wrap: anywhere; }
/* QA TO THE POINT (1 Nov 2026): Agents to fix, one row per agent and one button; Quality checks, a verdict, one Run button and at most four numbers against their targets */
.nx-root .nx-fix-top { margin: 0; font-weight: 700; color: var(--nx-text); display: flex; flex-wrap: wrap; gap: var(--nx-s2); align-items: baseline; overflow-wrap: anywhere; }
.nx-root .nx-fix-top small { font-weight: 400; color: var(--nx-muted); }
.nx-root .nx-fix-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; min-width: 0; }
.nx-root .nx-fix-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2) var(--nx-s3); padding: var(--nx-s2) 0; border-bottom: 1px solid var(--nx-line); min-width: 0; }
.nx-root .nx-fix-row__main { display: grid; gap: 2px; flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-fix-row__main small { color: var(--nx-muted); }
.nx-root .nx-fix-grp summary { display: flex; align-items: center; gap: var(--nx-s2); padding: var(--nx-s2) 0; cursor: pointer; border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-fix-grp .nx-fix-list { padding-left: var(--nx-s4); }
.nx-root .nx-qs-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--nx-s3); }
.nx-root .nx-qs-v { margin: 0; font-size: var(--nx-fs-h2); }
.nx-root .nx-qs-v--ok { color: var(--nx-success); }
.nx-root .nx-qs-v--bad { color: var(--nx-danger); }
.nx-root .nx-qs-v--warn { color: var(--nx-amber-text); }
.nx-root .nx-qs-run { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s3); }
.nx-root .nx-qs-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--nx-s3); }
.nx-root .nx-qs-num { display: grid; gap: 2px; padding: var(--nx-s3) var(--nx-s4); border: 1px solid var(--nx-line); border-left-width: 4px; border-radius: var(--nx-r2); min-width: 0; }
.nx-root .nx-qs-num b { font-size: var(--nx-fs-h2); white-space: nowrap; }
.nx-root .nx-qs-num small { color: var(--nx-muted); overflow-wrap: anywhere; }
.nx-root .nx-qs-num--ok { border-left-color: var(--nx-success); }
.nx-root .nx-qs-num--warn { border-left-color: var(--nx-amber); }
.nx-root .nx-qs-num--bad { border-left-color: var(--nx-danger); }
.nx-root .nx-qs-more > summary { cursor: pointer; font-weight: 700; padding: var(--nx-s2) 0; }
.nx-root .nx-qs-more[open] > summary { margin-bottom: var(--nx-s3); }
/* NEEDS YOU SUB-TABS (1 Nov 2026): Decisions | People waiting | Agents to fix | Issues, each with its number, the page below */
.nx-root .nx-need-tabs { margin-bottom: var(--nx-s4); }
.nx-root .nx-need-tabs .nx-count { margin-left: 6px; }
/* ADMIN REDESIGN: a long help text shows its first sentence, the rest folds under More */
.nx-root .nx-help-fold > summary { cursor: pointer; color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-help-fold[open] > summary { margin-bottom: 4px; }
/* COMPANY (THE CEO ROLE, 1 Nov 2026): the totals with the weekly trend, the departments table with its Manager Agent rows, a department's agents and one agent's three controls */
.nx-root .nx-co-tabs { margin-bottom: var(--nx-s4); }
/* all seven tabs visible on a computer: the row wraps to a second line (a rounded box, not a pill); on a phone it scrolls, with a fade at the right edge that says there is more */
@media (min-width: 761px) { .nx-root .nx-co-tabs { flex-wrap: wrap; overflow: visible; border-radius: var(--nx-r2); } }
@media (max-width: 760px) { .nx-root .nx-co-tabs { -webkit-mask-image: linear-gradient(to right, currentColor 85%, transparent); mask-image: linear-gradient(to right, currentColor 85%, transparent); } }
.nx-root .nx-co-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--nx-s3); }
.nx-root .nx-co-num { display: grid; gap: 2px; padding: var(--nx-s3) var(--nx-s4); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); min-width: 0; }
.nx-root .nx-co-num b { font-size: var(--nx-fs-h2); }
.nx-root .nx-co-num span { color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }
.nx-root .nx-co-trend { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: 4px; }
.nx-root .nx-co-trend i { display: block; width: 8px; border-radius: 2px; background: var(--nx-blue); }
.nx-root .nx-co-split { display: grid; gap: var(--nx-s4); min-width: 0; }
@media (min-width: 1600px) { .nx-root .nx-co-split:has(.nx-co-agents) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
.nx-root .nx-co-scroll { overflow-x: auto; min-width: 0; max-width: 100%; }
.nx-root .nx-co-table { width: 100%; border-collapse: collapse; background: var(--nx-surface); border-radius: var(--nx-r2); }
.nx-root .nx-co-table th, .nx-root .nx-co-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--nx-line); white-space: nowrap; font-size: var(--nx-fs-small); }
.nx-root .nx-co-table thead th { color: var(--nx-muted); font-weight: 700; }
.nx-root .nx-co-co th { background: var(--nx-hover); font-weight: 700; color: var(--nx-text); }
.nx-root .nx-co-mgr td { color: var(--nx-muted); }
.nx-root .nx-co-mgr__n { font-weight: 700; color: var(--nx-text); }
.nx-root .nx-co-dept.is-on, .nx-root .nx-co-table tr.is-on { background: color-mix(in srgb, var(--nx-blue) 10%, transparent); }
.nx-root .nx-co-pick { font-weight: 700; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.nx-root .nx-co-head { display: inline-flex; align-items: center; gap: 4px; }
.nx-root .nx-co-oct { color: var(--nx-blue); }
.nx-root .nx-co-agents { display: grid; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-co-one { display: grid; gap: var(--nx-s2); padding: var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); }
.nx-root .nx-co-one__h { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-co-wait { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 4px; }
.nx-root .nx-co-mlist, .nx-root .nx-co-heads { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--nx-s3); }
.nx-root .nx-co-mcard, .nx-root .nx-co-headcard { display: grid; gap: var(--nx-s2); padding: var(--nx-s4); align-content: start; min-width: 0; }
.nx-root .nx-co-mcard__h { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-co-sum { margin: 0; color: var(--nx-muted); font-size: var(--nx-fs-small); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nx-root .nx-co-sort { display: inline-flex; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-co-octwrap { max-width: 280px; }
/* MANAGERS' TIME (3 Nov 2026): period and view chips, all heads on one bar, the eight areas as small buttons with their %, the counts line, the shaded table */
.nx-root .nx-co-ttools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s3); }
.nx-root .nx-co-find { display: flex; flex-direction: column; gap: var(--nx-s2); min-width: 0; max-width: 100%; }
.nx-root .nx-co-findlist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-co-ttools .muted[data-scope-line] { flex-basis: 100%; margin: 0; }
.nx-root .nx-co-range { display: inline-flex; flex-wrap: wrap; gap: var(--nx-s2); align-items: center; }
.nx-root .nx-co-range label { display: inline-flex; align-items: center; gap: 6px; }
.nx-root .nx-co-tsum { display: grid; gap: var(--nx-s2); padding: var(--nx-s4); min-width: 0; }
.nx-root .nx-co-tbar { display: flex; height: 18px; border-radius: var(--nx-rfull); overflow: hidden; background: var(--nx-hover); }
.nx-root .nx-co-tbar i { display: block; height: 100%; min-width: 2px; }
.nx-root .nx-co-tlegend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--nx-s2) var(--nx-s4); font-size: var(--nx-fs-small); }
.nx-root .nx-co-tlegend li { display: inline-flex; align-items: center; gap: 4px; }
.nx-root .nx-co-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 4px; }
.nx-root .nx-co-area { display: flex; align-items: center; gap: 4px; min-height: 32px; padding: 2px 6px; letter-spacing: -.01em; border: 1px solid var(--nx-line); border-radius: var(--nx-r1, 8px); background: var(--nx-surface); color: var(--nx-text); font: inherit; font-size: var(--nx-fs-small); cursor: pointer; text-align: left; min-width: 0; }
.nx-root .nx-co-area span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-co-area[aria-pressed="true"] { border-color: var(--nx-blue); background: color-mix(in srgb, var(--nx-blue) 12%, transparent); }
.nx-root .nx-co-areas--full { grid-template-columns: minmax(0, 1fr); }
.nx-root .nx-co-readout { margin: 0; min-height: 2.6em; }
.nx-root .nx-co-src { margin: 0; color: var(--nx-muted); }
.nx-root .nx-co-src .is-off { opacity: .6; }
.nx-root .nx-oct-dot { cursor: pointer; }
.nx-root .nx-co-heat td { text-align: center; font-variant-numeric: tabular-nums; }
.nx-root .nx-co-heat thead th { white-space: nowrap; }
/* MANAGERS' TIME, 4 Nov 2026 (Sheraz: "I cannot see properly"): wider cards and a larger octagon, names on two lines instead of cut, nothing past the card's edge at 1280 to 1920;
   a press on a card opens the full view of that head (nx-hf: Close, Previous and Next, the period, a large octagon, every area with its share, count and source) */
.nx-root .nx-co-heads { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.nx-root .nx-co-headcard { overflow-wrap: anywhere; }
.nx-root .nx-co-headcard--open { cursor: pointer; }
.nx-root .nx-co-headcard .nx-co-octwrap { max-width: 360px; width: 100%; margin-inline: auto; }
.nx-root .nx-co-headcard .nx-co-area span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; overflow-wrap: break-word; }
.nx-root .nx-co-headcard .nx-co-areas { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.nx-root .nx-co-area b { flex: none; }
.nx-root .nx-co-open { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.nx-root .nx-co-hint { margin: 0; color: var(--nx-muted); }
.nx-root .nx-co-role { display: inline-block; padding: 1px 8px; border-radius: var(--nx-rfull); border: 1px solid var(--nx-line); background: color-mix(in srgb, var(--nx-blue) 10%, transparent); font-size: var(--nx-fs-small); }
.nx-root .nx-co-office { display: grid; gap: 2px; padding: 6px 8px; border-left: 3px solid var(--nx-line); background: var(--nx-hover); border-radius: var(--nx-r1, 8px); }
.nx-root .nx-hf__scrim { position: fixed; inset: 0; z-index: 2250; display: flex; background: var(--nx-scrim); }
.nx-root .nx-hf { position: relative; width: calc(100 * var(--ao-vw)); height: calc(100 * var(--ao-vh)); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: var(--nx-s3); align-content: start; padding: 0 clamp(16px, calc(3 * var(--ao-vw)), 48px) 32px; background: var(--nx-surface); color: var(--nx-text); overflow-wrap: anywhere; }
.nx-root .nx-hf__top { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s3); padding: 16px 0 10px; background: var(--nx-surface); border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-hf__top h2 { margin: 0; }
.nx-root .nx-hf__top p { margin: 2px 0 0; color: var(--nx-muted); }
.nx-root .nx-hf__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-hf__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(16px, calc(3 * var(--ao-vw)), 48px); align-items: start; }
@media (max-width: 960px) { .nx-root .nx-hf__body { grid-template-columns: minmax(0, 1fr); } }
.nx-root .nx-hf__oct { display: grid; gap: var(--nx-s3); max-width: 760px; width: 100%; }
.nx-root .nx-hf__side { display: grid; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-hf__said p { margin: 0 0 6px; }
.nx-root .nx-hf__areas { width: 100%; border-collapse: collapse; font-size: var(--nx-fs-small); }
.nx-root .nx-hf__areas caption { text-align: left; color: var(--nx-muted); padding-bottom: 6px; }
.nx-root .nx-hf__areas th, .nx-root .nx-hf__areas td { text-align: left; vertical-align: top; padding: 8px 6px; border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-hf__areas th[scope="row"] { white-space: nowrap; font-weight: 600; }
.nx-root .nx-hf__areas .nx-hf__pct { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.nx-root .nx-hf__areas tr.muted { color: var(--nx-muted); }
/* THE CEO'S HOME (1 Nov 2026): Ruyi on top, then cards in two columns (one on a phone), big numbers, one way into each place */
.nx-root .nx-ch { display: grid; gap: var(--nx-s4); }
.nx-root .nx-ch-ruyi { display: flex; align-items: center; gap: var(--nx-s4); padding: var(--nx-s4) var(--nx-s5); border-radius: var(--nx-r2); background: var(--nx-blue); color: var(--nx-on-blue); text-decoration: none; min-width: 0; }
.nx-root .nx-ch-ruyi:hover, .nx-root .nx-ch-ruyi:focus-visible { color: var(--nx-on-blue); }
.nx-root .nx-ch-ruyi b { display: block; font-size: var(--nx-fs-h3); }
.nx-root .nx-ch-ruyi small { display: block; opacity: .9; overflow-wrap: anywhere; }
.nx-root .nx-ch-ruyi__mic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--nx-on-blue) 18%, transparent); }
.nx-root .nx-ch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nx-s4); }   /* two columns, as the design; one on a phone (below) */
.nx-root .nx-ch-card { display: grid; gap: var(--nx-s3); align-content: start; padding: var(--nx-s4); min-width: 0; }
.nx-root .nx-ch-card--wide { grid-column: 1 / -1; }
.nx-root .nx-ch-card__h { margin: 0; font-size: var(--nx-fs-h3); }
.nx-root .nx-ch-calm { margin: 0; font-weight: 700; color: var(--nx-success); }
.nx-root .nx-ch-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--nx-s3); }
.nx-root .nx-ch-num { display: grid; gap: 2px; padding: var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); color: var(--nx-text); text-decoration: none; min-width: 0; }
.nx-root .nx-ch-num b { font-size: var(--nx-fs-h1); line-height: 1.1; }
.nx-root .nx-ch-num span { color: var(--nx-muted); font-size: var(--nx-fs-small); overflow-wrap: anywhere; }
.nx-root .nx-ch-time { display: grid; grid-template-columns: minmax(0, 240px) 1fr; gap: var(--nx-s3); align-items: center; }
.nx-root .nx-ch-kinds { margin: 0; padding-left: 1.2em; }
@media (max-width: 760px) { .nx-root .nx-ch-ruyi b { font-size: var(--nx-fs-body); } .nx-root .nx-ch-grid { grid-template-columns: minmax(0, 1fr); } .nx-root .nx-ch-time { grid-template-columns: minmax(0, 1fr); } }
/* MAKE A TICKET FROM AN EMAIL (THE CEO ROLE): one small form under the email's actions */
.nx-root .nx-ml-tk { display: grid; gap: var(--nx-s2); margin: var(--nx-s3) 0; padding: var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); max-width: 560px; }
.nx-root .nx-ml-tk__f { display: grid; gap: 4px; }

/* THE PERSON PROFILE (5 Nov 2026, nx-personprofile.jsx): calm cards, one column at phone width, nx tokens only */
.nx-root .nx-pp { display: grid; gap: var(--nx-s4); min-width: 0; }
.nx-root .nx-pp-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s3); }
.nx-root .nx-pp-name { margin: 0; font-size: var(--nx-fs-h2); }
.nx-root .nx-pp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s3); }
.nx-root .nx-pp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--nx-s4); align-items: start; }
.nx-root .nx-pp-card { display: grid; gap: var(--nx-s3); padding: var(--nx-s4); min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-pp-card--wide { grid-column: 1 / -1; }
.nx-root .nx-pp-h { display: flex; align-items: center; gap: var(--nx-s2); margin: 0; font-size: var(--nx-fs-h3); }
.nx-root .nx-pp-h3 { margin: 0 0 var(--nx-s2); font-size: var(--nx-fs-small); color: var(--nx-muted); }
.nx-root .nx-pp-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--nx-rfull); background: var(--nx-hover); color: var(--nx-blue); flex: none; }
.nx-root .nx-pp-about p { margin: 0 0 var(--nx-s2); }
.nx-root .nx-pp-lead { font-size: var(--nx-fs-body); font-weight: 600; }
.nx-root .nx-pp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-pp-list li { padding-left: var(--nx-s3); border-left: 3px solid var(--nx-hover); }
.nx-root .nx-pp-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--nx-s3); }
.nx-root .nx-pp-fig { display: grid; gap: 2px; padding: var(--nx-s3); border-radius: var(--nx-r2); background: var(--nx-hover); }
.nx-root .nx-pp-fig b { font-size: 1.35rem; line-height: 1.1; }
.nx-root .nx-pp-fig span { font-size: var(--nx-fs-small); color: var(--nx-muted); }
.nx-root .nx-pp-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--nx-s2) var(--nx-s4); font-size: var(--nx-fs-small); }
.nx-root .nx-pp-legend li { display: inline-flex; align-items: center; gap: 6px; }
.nx-root .nx-pp-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.nx-root .nx-pp-areas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-pp-areas li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--nx-s2); color: var(--nx-muted); }
.nx-root .nx-pp-areas li.is-seen { color: inherit; }
.nx-root .nx-pp-trends { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--nx-s4); }
.nx-root .nx-pp-trends > div { display: grid; gap: 2px; min-width: 0; }
.nx-root .nx-pp-trends small { color: var(--nx-muted); }
.nx-root .nx-pp-spark { width: 100%; max-width: 160px; height: 36px; }
.nx-root .nx-pp-meter { height: 10px; border-radius: var(--nx-rfull); background: var(--nx-hover); overflow: hidden; }
.nx-root .nx-pp-meter i { display: block; height: 100%; background: var(--nx-blue); }
.nx-root .nx-pp-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-pp-bars li { display: grid; grid-template-columns: minmax(80px, 1fr) 2fr auto; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-pp-bars i { display: block; height: 8px; border-radius: var(--nx-rfull); background: var(--nx-blue); }
.nx-root .nx-pp-time { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-pp-time li { display: grid; grid-template-columns: 70px 1fr; gap: 0 var(--nx-s3); }
.nx-root .nx-pp-time time { grid-row: span 2; color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-pp-time span { font-size: var(--nx-fs-small); color: var(--nx-muted); }
.nx-root .nx-pp-prep { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--nx-s4); }
.nx-root .nx-pp-how summary { cursor: pointer; font-size: var(--nx-fs-small); color: var(--nx-muted); }
/* the person's own print view: the New menu and header are already hidden on paper (nx-w27.css); the controls and the cards' extra lines are too */
@media print {
  .nx-root .nx-pp-bar, .nx-root .nx-pp-how { display: none !important; }
  .nx-root .nx-pp-card { break-inside: avoid; box-shadow: none; }
}

/* COMPANY > ACHIEVEMENTS and AI ADOPTION (5 Nov 2026, nx-companytabs.jsx): picture guide, 3D style tiles, badges, a side sheet. nx tokens only; the tiles reuse the t3d-tile look (opmodel-motion.css). */
.nx-root .nx-cg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--nx-s3); counter-reset: none; }
.nx-root .nx-cg__step { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--nx-s2) var(--nx-s3); padding: var(--nx-s3) var(--nx-s4) var(--nx-s3) var(--nx-s3); border-radius: var(--nx-r2); background: var(--nx-surface); border: 1px solid var(--nx-line); }
.nx-root .nx-cg__n { position: absolute; top: -9px; left: var(--nx-s3); width: 20px; height: 20px; border-radius: var(--nx-rfull); display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--nx-blue); color: var(--nx-on-blue); }
.nx-root .nx-cg__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--nx-r2); background: var(--nx-hover); color: var(--nx-blue); }
.nx-root .nx-ai__h { margin: var(--nx-s2) 0 0; font-size: var(--nx-fs-h3); }
.nx-root .nx-ai__totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--nx-s3); }
.nx-root .nx-ai__ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--nx-s4); align-items: end; }
.nx-root .nx-ai__step { display: grid; align-content: start; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-ai__step h3 { margin: 0; font-size: var(--nx-fs-h3); }
.nx-root .nx-ai__step--1 { min-height: 250px; }
.nx-root .nx-ai__step--2 { min-height: 290px; }
.nx-root .nx-ai__step--3 { min-height: 330px; }
.nx-root .nx-ai__big { margin: 0; font-size: 2.2rem; font-weight: 800; line-height: 1; }
.nx-root .nx-ai__big small { font-size: var(--nx-fs-small); font-weight: 600; opacity: .85; }
.nx-root .nx-ai__meter { height: 8px; border-radius: var(--nx-rfull); overflow: hidden; background: color-mix(in srgb, var(--nx-surface) 28%, transparent); }
.nx-root .nx-ai__meter i { display: block; height: 100%; background: var(--nx-surface); }
.nx-root .nx-ai__mean { margin: 0; font-size: var(--nx-fs-small); font-weight: 600; }
.nx-root .nx-ai__rule { margin: 0; font-size: var(--nx-fs-small); opacity: .9; }
.nx-root .nx-ai__see { margin-top: auto; justify-self: start; min-height: var(--nx-tap); padding: 0 var(--nx-s4); border: 0; border-radius: var(--nx-rfull); font-weight: 700; cursor: pointer; background: var(--nx-surface); color: var(--nx-text); }
.nx-root .nx-ai__see:disabled { opacity: .55; cursor: default; }
.nx-root .nx-ai__agents { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-ai__agents li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--nx-s3); padding: var(--nx-s3); border-radius: var(--nx-r2); background: var(--nx-surface); border: 1px solid var(--nx-line); min-width: 0; }
.nx-root .nx-ai__rank { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--nx-rfull); background: var(--nx-hover); color: var(--nx-blue); }
.nx-root .nx-ai__agents b { overflow-wrap: anywhere; }
.nx-root .nx-ai__n { font-weight: 700; white-space: nowrap; }
.nx-root .nx-ach__wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--nx-s4); }
.nx-root .nx-ach__badge { display: grid; gap: var(--nx-s2); padding: var(--nx-s4); padding-top: 44px; margin-top: 30px; position: relative; border-radius: var(--nx-r2); background: var(--nx-surface); border: 1px solid var(--nx-line); box-shadow: 0 8px 0 -3px color-mix(in srgb, var(--c) 55%, transparent), 0 18px 24px -18px color-mix(in srgb, var(--nx-text) 45%, transparent); transform: perspective(800px) rotateX(3deg); min-width: 0; animation: nx-ach-rise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.nx-root .nx-ach__medal { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 64px; height: 64px; border-radius: var(--nx-rfull); display: grid; place-items: center; font-weight: 800; font-size: 1.15rem; color: var(--nx-on-blue); background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--c) 55%, var(--nx-surface)), var(--c) 62%); box-shadow: 0 0 0 4px var(--nx-surface), 0 0 0 7px color-mix(in srgb, var(--c) 50%, transparent), 0 10px 14px -6px color-mix(in srgb, var(--nx-text) 50%, transparent); }
.nx-root .nx-ach__badge h3 { margin: 0; text-align: center; font-size: var(--nx-fs-h3); }
.nx-root .nx-ach__badge ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-ach__badge li { display: grid; grid-template-columns: auto 1fr; gap: var(--nx-s2); align-items: start; font-size: var(--nx-fs-small); overflow-wrap: anywhere; }
.nx-root .nx-ach__badge li svg { color: var(--c); margin-top: 2px; }
.nx-root .nx-sheet__scrim { position: fixed; inset: 0; z-index: 2250; display: flex; justify-content: flex-end; background: var(--nx-scrim); }
.nx-root .nx-sheet { width: min(420px, calc(100 * var(--ao-vw))); height: 100%; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: var(--nx-s3); align-content: start; padding: var(--nx-s4); background: var(--nx-surface); color: var(--nx-text); box-shadow: -18px 0 30px -20px color-mix(in srgb, var(--nx-text) 55%, transparent); animation: nx-sheet-in .22s ease-out both; }
.nx-root .nx-sheet__top { display: flex; align-items: start; justify-content: space-between; gap: var(--nx-s3); }
.nx-root .nx-sheet__top h2 { margin: 0; font-size: var(--nx-fs-h3); }
.nx-root .nx-sheet__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-sheet__list li { display: flex; justify-content: space-between; gap: var(--nx-s3); padding: var(--nx-s3) 0; border-bottom: 1px solid var(--nx-line); }
@media (max-width: 560px) { .nx-root .nx-ai__step--1, .nx-root .nx-ai__step--2, .nx-root .nx-ai__step--3 { min-height: 0; } .nx-root .nx-ai__agents li { grid-template-columns: auto 1fr auto; } .nx-root .nx-ai__agents li .nx-small { display: none; } }
@media (prefers-reduced-motion: reduce) { .nx-root .nx-ach__badge, .nx-root .nx-sheet { animation: none; transform: none; } }

/* WHAT KIND OF MAIL (5 Nov 2026, nx-mailkinds.jsx): small 3D style bars under the Mail area. nx tokens only. */
.nx-root .nx-mk { display: grid; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-mk__h { margin: 0; font-size: var(--nx-fs-h3); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nx-s2); }
.nx-root .nx-mk__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s3); }
.nx-root .nx-mk__list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico name pct" "ico bar bar" "ico n n"; align-items: center; gap: 2px var(--nx-s3); }
.nx-root .nx-mk__ico { grid-area: ico; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--nx-r2); color: var(--nx-on-blue); background: linear-gradient(150deg, color-mix(in srgb, var(--c) 78%, var(--nx-surface)), var(--c)); box-shadow: 0 4px 0 -1px color-mix(in srgb, var(--c) 60%, var(--nx-text)), 0 10px 14px -10px color-mix(in srgb, var(--nx-text) 55%, transparent); transform: perspective(300px) rotateX(8deg); }
.nx-root .nx-mk__name { grid-area: name; font-weight: 600; overflow-wrap: anywhere; }
.nx-root .nx-mk__pct { grid-area: pct; }
.nx-root .nx-mk__bar { grid-area: bar; display: block; height: 10px; border-radius: var(--nx-rfull); background: var(--nx-hover); overflow: hidden; }
.nx-root .nx-mk__bar i { display: block; height: 100%; border-radius: var(--nx-rfull); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, var(--nx-surface)), var(--c)); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--c) 55%, var(--nx-text)); }
.nx-root .nx-mk__n { grid-area: n; }
.nx-root .nx-mk__line { margin: 0; }
@media (prefers-reduced-motion: reduce) { .nx-root .nx-mk__ico { transform: none; } }
/* COMPANY > SUCCESSION (5 Nov 2026): the people behind a number, grouped by department; tokens only */
.nx-root .nx-su__dept { margin: 0 0 var(--nx-s4); }
.nx-root .nx-su__dept h3 { margin: 0 0 var(--nx-s2); }
.nx-root .nx-su__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-su__list li { padding: var(--nx-s2) 0; border-bottom: 1px solid var(--nx-line); min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-su__in { margin-left: var(--nx-s2); padding: var(--nx-s2) var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-r2, 8px); background: transparent; color: inherit; font: inherit; max-width: 100%; }

/* STRENGTHS NEXT TO THE NAME (6 Nov 2026): the leadership level as a prominent pill, the other five as chips; tokens only, no colour code */
.nx-root .nx-pp-strengths { display: grid; gap: var(--nx-s2); min-width: 0; margin: var(--nx-s2) 0; }
.nx-root .nx-pp-lead { display: inline-flex; align-items: baseline; gap: var(--nx-s3); justify-self: start; padding: var(--nx-s2) var(--nx-s4); border-radius: var(--nx-rfull); border: 1px solid var(--nx-line); background: var(--nx-hover); color: var(--nx-muted); font: inherit; font-size: var(--nx-fs-h3); cursor: pointer; }
.nx-root .nx-pp-lead--clear { background: var(--nx-blue); color: var(--nx-on-blue); border-color: var(--nx-blue); }
.nx-root .nx-pp-lead--some { background: var(--nx-blue-soft); color: var(--nx-blue-text); border-color: var(--nx-blue); }
.nx-root .nx-pp-lead:focus-visible { outline: 2px solid var(--nx-focus-ring); outline-offset: 2px; }

/* LIVE AI METER (8 Nov 2026). New look only: every rule is scoped to .nx-root and uses the theme tokens (no raw colour), so the seven skins and dark mode follow. Status is a word and a mark as well as a colour.
   Motion (gauge fill, the live pulse) only inside prefers-reduced-motion: no-preference. */
.nx-root .nx-lm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--nx-s3); margin-bottom: var(--nx-s3); }
.nx-root .nx-lm-card { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s3); display: grid; gap: var(--nx-s2); align-content: start; min-width: 0; }
.nx-root .nx-lm-card.is-warn { border-color: var(--nx-amber); }
.nx-root .nx-lm-card.is-bad { border-color: var(--nx-danger); }
.nx-root .nx-lm-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s2); }
.nx-root .nx-lm-card__head h3 { margin: 0; }
.nx-root .nx-lm-state { font-weight: 600; font-size: var(--nx-fs-small); border-radius: var(--nx-rfull); padding: 2px 10px; background: var(--nx-hover); color: var(--nx-text); white-space: nowrap; }
.nx-root .nx-lm-state.is-ok { background: var(--nx-ok-soft); color: var(--nx-ok-text); }
.nx-root .nx-lm-state.is-warn { background: var(--nx-amber-soft); color: var(--nx-amber-text); }
.nx-root .nx-lm-state.is-bad { border: 1px solid var(--nx-danger); color: var(--nx-text); }
.nx-root .nx-lm-read { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; color: var(--nx-muted); }
.nx-root .nx-lm-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--nx-muted); flex: none; display: inline-block; }
.nx-root .nx-lm-pulse.is-live { background: var(--nx-success); }
.nx-root .nx-lm-reason { margin: 0; color: var(--nx-text); }
.nx-root .nx-lm-gauge { display: grid; gap: 4px; }
.nx-root .nx-lm-gauge.is-dim { opacity: .6; }
.nx-root .nx-lm-gauge__head { display: flex; justify-content: space-between; gap: var(--nx-s2); flex-wrap: wrap; font-size: var(--nx-fs-small); color: var(--nx-muted); }
.nx-root .nx-lm-gauge__head b { color: var(--nx-text); font-variant-numeric: tabular-nums; }
.nx-root .nx-lm-gauge__track { height: 10px; border-radius: var(--nx-rfull); background: var(--nx-hover); overflow: hidden; }
.nx-root .nx-lm-gauge__track i { display: block; height: 100%; border-radius: var(--nx-rfull); background: var(--nx-blue); }
.nx-root .nx-lm-gauge.is-ok .nx-lm-gauge__track i { background: var(--nx-success); }
.nx-root .nx-lm-gauge.is-warn .nx-lm-gauge__track i { background: var(--nx-amber); }
.nx-root .nx-lm-gauge.is-bad .nx-lm-gauge__track i { background: var(--nx-danger); }
.nx-root .nx-lm-gauge__foot { display: flex; justify-content: space-between; gap: var(--nx-s2); flex-wrap: wrap; color: var(--nx-muted); }
.nx-root .nx-lm-burn, .nx-root .nx-lm-run { margin: 0; color: var(--nx-muted); }
.nx-root .nx-lm-h4 { margin: var(--nx-s2) 0 4px; font-size: var(--nx-fs-body); }
.nx-root .nx-lm-spend__list { list-style: none; margin: 0 0 var(--nx-s2); padding: 0; display: grid; gap: 6px; }
.nx-root .nx-lm-spend__list li { display: grid; grid-template-columns: minmax(70px, 1fr) minmax(40px, 2fr) auto; gap: 4px var(--nx-s2); align-items: center; }
.nx-root .nx-lm-spend__list li .nx-small { grid-column: 1 / -1; color: var(--nx-muted); }
.nx-root .nx-lm-spend__name { font-weight: 600; overflow-wrap: anywhere; }
.nx-root .nx-lm-spend__bar { height: 8px; background: var(--nx-hover); border-radius: var(--nx-rfull); overflow: hidden; }
.nx-root .nx-lm-spend__bar i { display: block; height: 100%; background: var(--nx-blue); border-radius: var(--nx-rfull); }
@media (max-width: 600px) { .nx-root .nx-lm-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-lm-gauge__track i, .nx-root .nx-lm-spend__bar i { transition: width .6s ease; }
  .nx-root .nx-lm-pulse.is-live { animation: nx-lm-pulse 2s ease-out infinite; }
}
@keyframes nx-lm-pulse { 0% { box-shadow: 0 0 0 0 var(--nx-success); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
/* FOLDED SECTIONS (nx-fold.jsx): a single title row, closed by default; the section's own heading inside is hidden so a title is never said twice */
.nx-root .nx-fold { border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); }
.nx-root .nx-fold__h { margin: 0; font: inherit; }
.nx-root .nx-fold__btn { display: flex; align-items: baseline; gap: var(--nx-s2); width: 100%; text-align: left; background: none; border: 0; padding: var(--nx-s3); cursor: pointer; font: inherit; color: var(--nx-text); border-radius: var(--nx-r2); min-height: 44px; }
.nx-root .nx-fold__btn:hover { background: var(--nx-hover); }
.nx-root .nx-fold__btn:focus-visible { outline: 2px solid var(--nx-blue); outline-offset: -2px; }
.nx-root .nx-fold__chev { width: 1em; flex: none; color: var(--nx-muted); }
.nx-root .nx-fold__title { font-weight: 600; flex: none; }
.nx-root .nx-fold__sum { color: var(--nx-muted); font-size: var(--nx-fs-small); min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-fold__body { padding: 0 var(--nx-s3) var(--nx-s3); display: grid; gap: var(--nx-s3); }
.nx-root .nx-fold__body > .nx-w20-sec > .nx-w20-sec__top .nx-w20-sec__titles > h2 { display: none; }
.nx-root .nx-fold__body .nx-w20-sec { margin: 0; }
/* the top: attention in at most three lines, then the compact meter rows */
.nx-root .nx-lm-attn { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nx-root .nx-lm-attn li { display: flex; gap: var(--nx-s2); align-items: baseline; flex-wrap: wrap; }
.nx-root .nx-lm-rows { display: grid; gap: var(--nx-s2); margin-bottom: var(--nx-s2); }
.nx-root .nx-lm-row { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s2) var(--nx-s3); display: grid; gap: 6px; min-width: 0; }
.nx-root .nx-lm-row.is-warn { border-color: var(--nx-amber); }
.nx-root .nx-lm-row.is-bad { border-color: var(--nx-danger); }
.nx-root .nx-lm-row__top { display: flex; align-items: center; gap: var(--nx-s2); flex-wrap: wrap; }
.nx-root .nx-lm-row__top h3 { margin: 0; font-size: var(--nx-fs-body); }
.nx-root .nx-lm-row__top .nx-lm-read { margin: 0 0 0 auto; }
.nx-root .nx-lm-row__meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--nx-s2) var(--nx-s3); }
.nx-root .nx-lm-more { justify-self: start; background: none; border: 0; padding: 2px 0; color: var(--nx-blue-text); cursor: pointer; font: inherit; font-size: var(--nx-fs-small); text-decoration: underline; min-height: 24px; }
.nx-root .nx-lm-more:focus-visible { outline: 2px solid var(--nx-blue); outline-offset: 2px; }
.nx-root .nx-lm-gauge__track { height: 8px; }
.nx-root .nx-lm-attnbar { display: flex; gap: var(--nx-s3); justify-content: space-between; align-items: flex-start; flex-wrap: wrap; background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s2) var(--nx-s3); }
.nx-root .nx-lm-attnbar__main { display: grid; gap: 4px; min-width: 0; flex: 1 1 320px; }
.nx-root .nx-lm-attnbar__acts { display: flex; gap: var(--nx-s2); align-items: center; flex-wrap: wrap; }
/* SUMMARY REPORT (nx-report.jsx): the picker on the page; the report itself is styled by usage-report-lib.mjs (scoped to .nx-rpt) */
.nx-root .nx-rptpick { display: inline-flex; gap: var(--nx-s2); align-items: center; flex-wrap: wrap; }
.nx-root .nx-rptbar { display: flex; gap: var(--nx-s2); flex-wrap: wrap; margin: 0 0 var(--nx-s3); }
.nx-root .nx-rpt { background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s4); color: var(--nx-text); overflow-wrap: anywhere; }
/* one short help line behind an info mark (nx-fold.jsx InfoTip), and the quiet "All fine" line */
.nx-root .nx-info { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; flex-wrap: wrap; }
.nx-root .nx-info__b { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--nx-line); background: var(--nx-surface); color: var(--nx-muted); font: inherit; font-size: 13px; font-style: italic; cursor: pointer; padding: 0; line-height: 1; }
.nx-root .nx-info__b:hover { background: var(--nx-hover); }
.nx-root .nx-info__b:focus-visible { outline: 2px solid var(--nx-blue); outline-offset: 2px; }
.nx-root .nx-info__t { font-size: var(--nx-fs-small); color: var(--nx-muted); font-weight: 400; }
.nx-root .nx-lm-quiet { margin: 0; color: var(--nx-muted); }
.nx-root .nx-lm-attnbar { align-items: center; }

/* Tasks workspace, slice 1 (pm-tasks.jsx). Every rule starts with .pm so it touches nothing else; the colours are the theme tokens of themes.css, so both looks and every palette work.
   No motion on purpose: nothing here moves, fades or animates. Below 720px a row is a card. */
.pm { color: var(--color-text-primary); font-size: 14px; }
.pm * { box-sizing: border-box; }
.pm-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pm-body { display: flex; gap: 16px; align-items: flex-start; }
.pm-spaces { flex: 0 0 150px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 8px; }
.pm-space { text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; min-height: 36px; }
.pm-space:hover { background: var(--color-row-hover); }
.pm-space[aria-current="page"] { background: var(--color-accent-soft); color: var(--color-accent-text); font-weight: 600; }
.pm-main { flex: 1; min-width: 0; container-type: inline-size; }
.pm-muted { color: var(--color-text-muted); }
.pm button:focus-visible, .pm input:focus-visible, .pm select:focus-visible, .pm textarea:focus-visible, .pm summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.pm-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.pm-chip { border: 1px solid var(--color-control-border); background: var(--color-surface); color: inherit; border-radius: 999px; padding: 6px 12px; font: inherit; cursor: pointer; min-height: 34px; white-space: nowrap; }
.pm-chip[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.pm-search { margin-left: auto; min-width: 200px; flex: 0 1 260px; }
.pm input, .pm select, .pm textarea { font: inherit; color: inherit; background: var(--color-input); border: 1px solid var(--color-control-border); border-radius: 8px; padding: 6px 8px; min-height: 34px; }
.pm textarea { width: 100%; resize: vertical; }
.pm input[type="checkbox"] { min-height: 0; width: 18px; height: 18px; padding: 0; }
.pm-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
.pm-f { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--color-text-muted); }
.pm-f select, .pm-f input { color: var(--color-text-primary); font-size: 14px; }
.pm-check { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 6px; }
.pm-cols { position: relative; }
.pm-cols summary { cursor: pointer; padding: 6px 10px; border: 1px solid var(--color-control-border); border-radius: 8px; background: var(--color-surface); min-height: 34px; display: flex; align-items: center; }
.pm-menu { position: absolute; z-index: 5; margin-top: 4px; background: var(--color-overlay); border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-raised); min-width: 150px; }
.pm-menu label { display: flex; gap: 8px; align-items: center; }
.pm-btn { border: 1px solid var(--color-control-border); background: var(--color-surface); color: inherit; border-radius: 8px; padding: 6px 12px; font: inherit; cursor: pointer; min-height: 34px; }
.pm-btn:disabled { color: var(--color-text-disabled); cursor: default; }
.pm-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.pm-link { border: 0; background: transparent; color: var(--color-link); text-decoration: underline; font: inherit; cursor: pointer; padding: 6px; }
.pm-iconbtn { border: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; padding: 4px 6px; font-size: 14px; min-width: 28px; min-height: 28px; }
.pm-add { display: flex; gap: 8px; margin: 0 0 10px; }
.pm-add input { flex: 1; }
.pm-selbar, .pm-conflict { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; }
.pm-selbar { background: var(--color-accent-soft); }
.pm-conflict { background: var(--color-warning-soft); border: 1px solid var(--color-warning); }
.pm-card, .pm-empty { padding: 16px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); margin: 10px 0; }
.pm-empty p, .pm-card p { margin: 4px 0 0; color: var(--color-text-secondary); }
.pm-skeleton { display: flex; flex-direction: column; gap: 8px; }
.pm-skrow { height: 40px; border-radius: 8px; background: var(--color-skeleton); }
.pm-head, .pm-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.pm-head { font-size: 12px; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); }
.pm-list { list-style: none; margin: 0; padding: 0; }
.pm-row { border-bottom: 1px solid var(--color-border-subtle); min-height: 48px; }
.pm-row:hover { background: var(--color-row-hover); }
.pm-row.pm-fresh { background: var(--color-accent-soft); }
.pm-row.pm-done .pm-title { text-decoration: line-through; color: var(--color-text-muted); }
.pm-row.pm-archived { opacity: .7; }
.pm-c-sel { flex: 0 0 24px; }
.pm-c-title { flex: 1 1 180px; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pm-c-status { flex: 0 0 118px; } .pm-c-priority { flex: 0 0 108px; } .pm-c-assignee { flex: 0 0 136px; } .pm-c-due { flex: 0 0 150px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; } .pm-c-labels { flex: 0 0 130px; display: flex; flex-wrap: wrap; gap: 4px; }
.pm-title { border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 6px 2px; min-height: 34px; overflow-wrap: anywhere; }
.pm-title:hover { text-decoration: underline; }
.pm-titleedit { width: 100%; }
.pm-pill { border-radius: 999px; padding: 4px 8px; width: 100%; }
.pm-st-active, .pm-pr-2 { background: var(--color-info-soft); }
.pm-st-done { background: var(--color-success-soft); }
.pm-st-closed { background: var(--color-row-alt); }
.pm-pr-3 { background: var(--color-error-soft); font-weight: 600; }
.pm-sel { width: 100%; }
.pm-date { width: 150px; }
.pm-labels { width: 100%; }
.pm-due { border-radius: 999px; padding: 2px 8px; font-size: 12px; white-space: nowrap; }
.pm-due-overdue { background: var(--color-error-soft); color: var(--color-error); font-weight: 600; }
.pm-due-today { background: var(--color-warning-soft); color: var(--color-warning); font-weight: 600; }
.pm-due-soon { color: var(--color-text-muted); }
.pm-tag { background: var(--color-row-alt); border: 1px solid var(--color-border); border-radius: 6px; padding: 1px 6px; font-size: 12px; }
.pm-where { font-size: 12px; }
.pm-gh { font-size: 13px; margin: 14px 0 4px; color: var(--color-text-secondary); }
.pm-more { padding: 12px 0; text-align: center; }
.pm-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 1000; display: flex; justify-content: flex-end; }
.pm-drawer { width: 440px; max-width: 100%; height: 100%; overflow-y: auto; background: var(--color-surface-raised); color: var(--color-text-primary); padding: 16px; box-shadow: var(--shadow-raised); }
.pm-dhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pm-dbody { display: flex; flex-direction: column; gap: 12px; }
.pm-df { display: flex; flex-direction: column; gap: 4px; }
.pm-df > span { font-size: 12px; color: var(--color-text-muted); }
.pm-df.pm-check { flex-direction: row; align-items: center; }
.pm-df input, .pm-df select, .pm-df textarea { width: 100%; }
.pm-df.pm-check input { width: 18px; }
.pm-dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pm-history { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.pm-dfoot { padding-top: 8px; border-top: 1px solid var(--color-border); }
@container (max-width: 940px) {
  .pm-head { display: none; }
  .pm-row { flex-wrap: wrap; border: 1px solid var(--color-border); border-radius: 12px; margin-bottom: 8px; padding: 10px; background: var(--color-surface); }
  .pm-c-title { flex: 1 1 calc(100% - 40px); }
  .pm-c-status, .pm-c-priority, .pm-c-assignee, .pm-c-due { flex: 1 1 45%; } .pm-c-labels { flex: 1 1 100%; }
  .pm-c-due { flex-direction: row; flex-wrap: wrap; align-items: center; }
}
@media (max-width: 720px) {
  .pm-body { flex-direction: column; align-items: stretch; }
  .pm-spaces { flex: none; flex-direction: row; overflow-x: auto; position: static; width: 100%; padding-bottom: 4px; }
  .pm-space { white-space: nowrap; min-height: 44px; }
  .pm-pill, .pm-sel, .pm-date, .pm-labels, .pm input, .pm select, .pm-btn, .pm-chip, .pm-title { min-height: 44px; }
  .pm-add { position: sticky; bottom: 84px; background: var(--color-bg); padding: 8px 0; z-index: 2; }
  .pm-search { margin-left: 0; flex: 1 1 100%; }
  .pm-drawer { width: 100%; }
  .pm-dgrid { grid-template-columns: 1fr; }
}

/* Slice 2: the Board (pm-board.jsx). Columns scroll sideways; a card is a plain box. Words carry every state (Blocked, Urgent, a late date, over the limit); the colours only help. Nothing moves or fades. */
.pm-mode { display: flex; gap: 0; }
.pm-mode .pm-btn { border-radius: 0; }
.pm-mode .pm-btn:first-child { border-radius: 8px 0 0 8px; } .pm-mode .pm-btn:last-child { border-radius: 0 8px 8px 0; border-left: 0; }
.pm-mode .pm-btn[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.pm-boardwrap { min-width: 0; }
.pm-boardbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 12px; }
.pm-board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; }
.pm-col { flex: 0 0 272px; min-width: 0; scroll-snap-align: start; background: var(--color-row-alt); border: 1px solid var(--color-border); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.pm-col.pm-drop { border-color: var(--color-accent); background: var(--color-accent-soft); }
.pm-colh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 2px 4px 0; font-size: 14px; }
.pm-count { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.pm-wip-full .pm-count { color: var(--color-warning); font-weight: 600; }
.pm-wip-over { border-color: var(--color-warning); }
.pm-wip-over .pm-count { color: var(--color-warning); font-weight: 600; }
.pm-wipnote { margin: 0 4px; padding: 3px 8px; border-radius: 6px; font-size: 12px; background: var(--color-warning-soft); color: var(--color-warning); }
.pm-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-height: 48px; }
.pm-cardli { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 4px; cursor: grab; }
.pm-cardli.pm-blocked { border-left: 4px solid var(--color-error); }
.pm-cardli.pm-dragging { opacity: .45; }
.pm-cardli.pm-done .pm-title { text-decoration: line-through; color: var(--color-text-muted); }
.pm-cardli .pm-title { display: block; width: 100%; padding: 2px; }
.pm-blockednote { margin: 0; padding: 2px 6px; border-radius: 6px; background: var(--color-error-soft); color: var(--color-error); font-size: 12px; overflow-wrap: anywhere; }
.pm-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pm-meta .pm-pill { width: auto; padding: 2px 8px; font-size: 12px; }
.pm-who { font-size: 12px; }
.pm-cardact { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.pm-cardact select { max-width: 150px; min-height: 30px; padding: 2px 6px; font-size: 12px; }
.pm-gap { height: 44px; border: 2px dashed var(--color-accent); border-radius: 10px; }
.pm-emptycol { color: var(--color-text-muted); font-size: 12px; text-align: center; padding: 12px 4px; border: 1px dashed var(--color-border); border-radius: 10px; }
.pm-colmore { align-self: center; }
.pm-stages { border: 1px solid var(--color-border); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: var(--color-surface); }
.pm-stagelist { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pm-stagerow { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding-bottom: 8px; border-bottom: 1px solid var(--color-border-subtle); }
.pm-stagerow input[type="number"] { width: 84px; }
.pm-stageact, .pm-stagefoot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 720px) {
  .pm-col { flex-basis: calc(85 * var(--ao-vw)); scroll-snap-align: center; }
  .pm-board { scroll-snap-type: x mandatory; }
  .pm-cardact select, .pm-cardli .pm-link { min-height: 44px; }
  .pm-mode .pm-btn { min-height: 44px; }
}

/* The operating model's look (31 Oct 2026, Sheraz: "more nice 3D UI UX, animated"): the Home card "Your PA is ready" and the view-only work profile (opmodel.jsx).
   Depth: a soft lift and a slight tilt; motion: one float, one orbit, one ring fill, cards rising in. Everything still under prefers-reduced-motion. Colours from the theme tokens, with fallbacks. */
.opm-hero { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin: 12px 0; padding: 22px 26px; border-radius: 22px;
  background: var(--nx-surface, #fff); color: var(--nx-text, #0f172a); border: 1px solid var(--nx-line, #e2e8f0);
  box-shadow: 0 22px 44px -22px rgba(15, 23, 42, .35), 0 2px 6px rgba(15, 23, 42, .06); transform: perspective(1200px) rotateX(1.5deg); }
.opm-stage { position: relative; width: 200px; height: 200px; flex: 0 0 auto; }
.opm-stage svg.opm-ringbox { position: absolute; inset: 0; }
.opm-ring-bg { fill: none; stroke: var(--nx-line, #e2e8f0); stroke-width: 9; }
.opm-ring { fill: none; stroke: var(--nx-blue, #2563eb); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1.6s cubic-bezier(.2, .8, .2, 1); }
.opm-orb { position: absolute; left: 60px; top: 60px; width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, #93c5fd 0%, #2563eb 55%, #1e3a8a 100%); box-shadow: 0 14px 26px -8px rgba(37, 99, 235, .55), inset 0 -8px 14px rgba(15, 23, 42, .35);
  animation: opm-float 4s ease-in-out infinite; }
.opm-chip { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--nx-surface, #fff); box-shadow: 0 8px 16px -6px rgba(15, 23, 42, .3); font-size: 17px; animation: opm-orbit 16s linear infinite; }
.opm-copy { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.opm-kicker { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--nx-blue, #1d4ed8); }
.opm-title { margin: 0; font-size: 26px; line-height: 1.2; }
.opm-sub { margin: 0; color: var(--nx-muted, #475569); }
.opm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.opm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.opm-tile { border-radius: 18px; padding: 18px; background: var(--nx-surface, #fff); color: var(--nx-text, #0f172a); border: 1px solid var(--nx-line, #e2e8f0);
  box-shadow: 0 12px 26px -18px rgba(15, 23, 42, .35); animation: opm-rise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 80ms);
  transition: transform .25s ease, box-shadow .25s ease; }
.opm-tile:hover { transform: translateY(-4px) perspective(900px) rotateX(2deg); box-shadow: 0 22px 40px -18px rgba(15, 23, 42, .4); }
.opm-tile__h { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.opm-big { margin-top: 10px; font-size: 34px; font-weight: 700; line-height: 1.1; }
.opm-small { font-size: 12px; color: var(--nx-muted, #64748b); }
.opm-bar { margin-top: 10px; height: 8px; border-radius: 6px; background: var(--nx-line, #e2e8f0); overflow: hidden; }
.opm-bar > i { display: block; height: 8px; background: var(--nx-blue, #2563eb); }
.opm-pills { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.opm-pill { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(124, 58, 237, .12); color: #5b21b6; }
.opm-lock { margin-top: 16px; border-radius: 18px; padding: 20px; background: #0f172a; color: #fff; box-shadow: 0 18px 36px -18px rgba(15, 23, 42, .6); animation: opm-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.opm-lock__h { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; }
.opm-lock__grid { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.opm-lock__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #1e293b; }
.opm-lock .opm-small { color: #cbd5e1; }
@keyframes opm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes opm-orbit { from { transform: rotate(0deg) translateX(88px) rotate(0deg); } to { transform: rotate(360deg) translateX(88px) rotate(-360deg); } }
@keyframes opm-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .opm-orb, .opm-chip, .opm-tile, .opm-lock { animation: none; }
  .opm-ring, .opm-tile { transition: none; }
  .opm-tile:hover, .opm-hero { transform: none; }
  .opm-chip { transform: rotate(var(--a, 0deg)) translateX(88px) rotate(calc(-1 * var(--a, 0deg))); }
}

/* Where my time goes (eitime.jsx, 31 Oct 2026, Sheraz; approved mock v3): the octagon floats and turns a little in depth, its shape grows in and glows, the band tiles and the week bars rise in.
   Shared language with the Home connect hub (home-connect.css): the theme tokens, 14px corners, the card shadow. */
.t3d-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; margin: 8px 0 16px; padding: 18px; border-radius: 14px;
  background: radial-gradient(ellipse at 40% 45%, rgba(59, 130, 246, .14), transparent 65%), var(--nx-surface, #fff); border: 1px solid var(--nx-line, #e2e8f0); box-shadow: var(--shadow-card, 0 18px 40px -26px rgba(15, 23, 42, .4)); }
@media (max-width: 860px) { .t3d-hero { grid-template-columns: 1fr; } }
.t3d-stage { perspective: 1100px; }
.t3d-float { transform-style: preserve-3d; transform: rotateX(12deg); animation: t3d-float 7s ease-in-out infinite; }
.t3d-shape, .t3d-glow { transform-box: view-box; transform-origin: center; animation: t3d-grow .9s cubic-bezier(.2, .8, .2, 1) both; }
.t3d-glow { animation: t3d-grow .9s cubic-bezier(.2, .8, .2, 1) both, t3d-pulse 3.6s ease-in-out .9s infinite; }
.t3d-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.t3d-changed { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.t3d-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; }
.t3d-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 13px; background: var(--nx-surface, #fff); border: 1px solid color-mix(in srgb, var(--c, #94a3b8) 45%, transparent);
  box-shadow: 0 6px 12px -10px rgba(15, 23, 42, .6); }
.t3d-up { color: var(--color-success, #047857); } .t3d-down { color: var(--color-warning, #b45309); }
.t3d-off { opacity: .55; border-style: dashed; }
.t3d-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 6px 0 18px; }
@media (max-width: 560px) { .t3d-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .t3d-hero { padding: 10px; } }
.t3d-tile { position: relative; display: grid; gap: 4px; padding: 14px; border-radius: 14px; color: #fff; background: linear-gradient(150deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c));
  box-shadow: 0 9px 0 -2px color-mix(in srgb, var(--c) 60%, #000), 0 18px 26px -16px rgba(15, 23, 42, .6); transform: perspective(700px) rotateX(8deg);
  animation: t3d-rise .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.t3d-tile.t3d-b0 { color: var(--nx-text, #0f172a); background: var(--nx-surface, #fff); border: 1.5px dashed color-mix(in srgb, var(--c) 50%, transparent); box-shadow: none; }
.t3d-ic { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .22); }
.t3d-b0 .t3d-ic { background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.t3d-lvl { display: flex; gap: 4px; } .t3d-lvl i { width: 18px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .3); } .t3d-lvl i.on { background: #fff; }
.t3d-b0 .t3d-lvl i { background: color-mix(in srgb, var(--c) 18%, transparent); }
.t3d-tile small { opacity: .9; }
.t3d-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: t3d-up .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 50ms); }
.t3d-preview { border: 1px solid var(--nx-line, #e2e8f0); border-radius: 14px; padding: 12px; margin: 8px 0; }
@keyframes t3d-float { 0%, 100% { transform: rotateX(12deg) rotateY(-5deg) translateY(0); } 50% { transform: rotateX(8deg) rotateY(5deg) translateY(-6px); } }
@keyframes t3d-grow { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes t3d-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .65; } }
@keyframes t3d-rise { from { opacity: 0; transform: perspective(700px) rotateX(8deg) translateY(14px); } to { opacity: 1; transform: perspective(700px) rotateX(8deg); } }
@keyframes t3d-up { from { transform: scaleY(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .t3d-float, .t3d-shape, .t3d-glow, .t3d-tile, .t3d-bar { animation: none; }
}

/* Company > Achievements and AI adoption (5 Nov 2026, nx-companytabs.jsx): the badges rise in, the side sheet slides in (both off under prefers-reduced-motion, in nx-w90.css) */
@keyframes nx-ach-rise { from { opacity: 0; transform: perspective(800px) rotateX(14deg) translateY(14px); } to { opacity: 1; transform: perspective(800px) rotateX(3deg); } }
@keyframes nx-sheet-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* THE 3D AGENT CARD (31 Oct 2026, nx-agentcard.jsx AgentCard; Sheraz approved the mock https://claude.ai/artifact/53bknLsnFdRu176WuB1Ebp: "raised 3D tiles" for the light themes, "glass shelf" for the dark ones).
   The sizes, radii, shadows and gradients are the mock's own; its colours are mapped onto each theme's tokens in the two token blocks below, so every palette keeps the same depth (light A: Daylight, Dune, Ocean;
   dark B: Midnight, Aurora, Forest, Ember). Component rules carry no hard colour (qa-2026-10-21-nx-themes). Motion (hover lift and tilt, the turning arrow) only under prefers-reduced-motion: no-preference.
   Loaded after nx-w33.css, so it wins over the older card. */

/* ---------------------------------------------------------------- light A, raised 3D tiles (every palette starts here) */
.nx-root {
  --nx-c3-ink: var(--nx-text); --nx-c3-ink2: color-mix(in srgb, var(--nx-text) 78%, var(--nx-blue)); --nx-c3-muted: var(--nx-muted); --nx-c3-acc: var(--nx-blue-text);
  --nx-c3-hi: #FFFFFF; --nx-c3-sh: color-mix(in srgb, var(--nx-text) 72%, var(--nx-blue));
  --nx-c3-card: linear-gradient(180deg, var(--nx-surface) 0%, color-mix(in srgb, var(--nx-surface) 96%, var(--nx-blue)) 100%);
  --nx-c3-card-sh: 0 1px 0 var(--nx-c3-hi) inset, 0 0 0 1px color-mix(in srgb, var(--nx-text) 6%, transparent), 0 2px 4px color-mix(in srgb, var(--nx-text) 6%, transparent), 0 22px 44px -18px color-mix(in srgb, var(--nx-c3-sh) 38%, transparent), 0 40px 70px -40px color-mix(in srgb, var(--nx-c3-sh) 30%, transparent);
  --nx-c3-card-sh-hover: 0 1px 0 var(--nx-c3-hi) inset, 0 0 0 1px color-mix(in srgb, var(--nx-text) 7%, transparent), 0 4px 8px color-mix(in srgb, var(--nx-text) 8%, transparent), 0 34px 60px -20px color-mix(in srgb, var(--nx-c3-sh) 45%, transparent), 0 60px 90px -50px color-mix(in srgb, var(--nx-c3-sh) 35%, transparent);
  --nx-c3-chip: var(--nx-surface); --nx-c3-chip-text: var(--nx-c3-ink2);
  --nx-c3-chip-sh: 0 1px 0 var(--nx-c3-hi) inset, 0 0 0 1px color-mix(in srgb, var(--nx-text) 8%, transparent), 0 3px 6px -3px color-mix(in srgb, var(--nx-text) 18%, transparent);
  --nx-c3-panel: linear-gradient(180deg, color-mix(in srgb, var(--nx-bg) 55%, var(--nx-surface)), color-mix(in srgb, var(--nx-bg) 94%, var(--nx-blue)));
  --nx-c3-panel-sh: 0 2px 3px color-mix(in srgb, var(--nx-text) 8%, transparent) inset, 0 -1px 0 var(--nx-c3-hi) inset;
  --nx-c3-bar: linear-gradient(180deg, color-mix(in srgb, var(--nx-blue) 76%, #FFFFFF), var(--nx-blue)); --nx-c3-bar-sh: 0 2px 0 rgba(255, 255, 255, .45) inset, -2px 0 0 rgba(0, 0, 0, .08) inset;
  --nx-c3-bar0: color-mix(in srgb, var(--nx-blue) 16%, var(--nx-bg)); --nx-c3-track: color-mix(in srgb, var(--nx-blue) 13%, var(--nx-bg));
  --nx-c3-gauge-in: var(--nx-surface); --nx-c3-gauge-sh: 0 6px 14px -6px color-mix(in srgb, var(--nx-c3-sh) 45%, transparent);
  --nx-c3-stat: color-mix(in srgb, var(--nx-blue) 10%, var(--nx-surface)); --nx-c3-stat-text: var(--nx-blue-text); --nx-c3-time: var(--nx-amber-soft); --nx-c3-time-text: var(--nx-amber-text);
  --nx-c3-ghost: var(--nx-surface); --nx-c3-ghost-text: var(--nx-c3-ink2); --nx-c3-ghost-sh: 0 0 0 1px color-mix(in srgb, var(--nx-text) 14%, transparent), 0 3px 6px -3px color-mix(in srgb, var(--nx-text) 20%, transparent);
  --nx-c3-rule: color-mix(in srgb, var(--nx-text) 8%, transparent);
  --nx-c3-ok-bg: var(--nx-ok-soft); --nx-c3-ok: var(--nx-ok-text); --nx-c3-info-bg: var(--color-info-soft); --nx-c3-info: var(--color-info);
  --nx-c3-warn-bg: var(--nx-amber-soft); --nx-c3-warn: var(--nx-amber-text); --nx-c3-bad-bg: var(--nx-bad-soft); --nx-c3-bad: var(--nx-bad-text); --nx-c3-gray-bg: var(--nx-hover); --nx-c3-gray: var(--nx-muted);
  --nx-c3-pill-ring: 15%; --nx-c3-pill-glow: 0 3px 8px -4px;
  --nx-c3-tile-sh: 0 -3px 0 rgba(0, 0, 0, .18) inset, 0 3px 0 rgba(255, 255, 255, .35) inset, 0 8px 0 -2px rgba(0, 0, 0, .12), 0 14px 22px -8px rgba(0, 0, 0, .35); --nx-c3-stat-sh: 0 -2px 0 rgba(0, 0, 0, .06) inset;
  --nx-c3-btn: linear-gradient(180deg, color-mix(in srgb, var(--nx-blue) 86%, #FFFFFF), color-mix(in srgb, var(--nx-blue) 86%, #000000));
  --nx-c3-btn-sh: 0 -3px 0 rgba(0, 0, 0, .2) inset, 0 2px 0 rgba(255, 255, 255, .25) inset, 0 8px 16px -6px color-mix(in srgb, var(--nx-blue) 60%, transparent);
  --nx-c3-bar-sh: 0 1px 0 var(--nx-c3-hi) inset, 0 0 0 1px color-mix(in srgb, var(--nx-text) 6%, transparent), 0 10px 24px -14px color-mix(in srgb, var(--nx-c3-sh) 35%, transparent);
  --nx-c3-pop-sh: 0 1px 0 var(--nx-c3-hi) inset, 0 0 0 1px color-mix(in srgb, var(--nx-text) 8%, transparent), 0 30px 60px -20px color-mix(in srgb, var(--nx-c3-sh) 45%, transparent);
  --nx-c3-hot: color-mix(in srgb, var(--chart-3) 78%, #000000); --nx-c3-on-hot: #FFFFFF;
  --nx-c3-db: var(--nx-blue-text); --nx-c3-folder: var(--color-info); --nx-c3-plug: var(--chart-3); --nx-c3-people: var(--chart-7);
}
/* ---------------------------------------------------------------- dark B, glass shelf */
[data-palette="midnight"] .nx-root, [data-palette="aurora"] .nx-root, [data-palette="forest"] .nx-root, [data-palette="ember"] .nx-root {
  --nx-c3-ink2: var(--color-text-secondary); --nx-c3-acc: var(--nx-blue-text);
  --nx-c3-hi: rgba(255, 255, 255, .14); --nx-c3-sh: rgba(0, 0, 0, 1);
  --nx-c3-card: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--color-surface-raised) 86%, var(--nx-blue)) 92%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--nx-bg) 55%, var(--nx-surface)) 96%, transparent) 100%);
  --nx-c3-card-sh: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 0 0 1px color-mix(in srgb, var(--nx-blue) 16%, transparent), 0 24px 50px -18px rgba(0, 0, 0, .7), 0 0 40px -18px color-mix(in srgb, var(--nx-blue) 35%, transparent);
  --nx-c3-card-sh-hover: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 0 0 1px color-mix(in srgb, var(--nx-blue) 30%, transparent), 0 34px 60px -20px rgba(0, 0, 0, .8), 0 0 60px -14px color-mix(in srgb, var(--nx-blue) 50%, transparent);
  --nx-c3-chip: rgba(255, 255, 255, .07); --nx-c3-chip-text: var(--color-text-secondary); --nx-c3-chip-sh: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 0 0 1px rgba(255, 255, 255, .1);
  --nx-c3-panel: rgba(0, 0, 0, .28); --nx-c3-panel-sh: 0 2px 6px rgba(0, 0, 0, .4) inset, 0 -1px 0 rgba(255, 255, 255, .06) inset;
  --nx-c3-bar: linear-gradient(180deg, color-mix(in srgb, var(--nx-blue) 70%, #FFFFFF), color-mix(in srgb, var(--nx-blue) 62%, #000000));
  --nx-c3-bar0: rgba(255, 255, 255, .12); --nx-c3-track: rgba(255, 255, 255, .12);
  --nx-c3-gauge-in: color-mix(in srgb, var(--nx-bg) 70%, var(--nx-surface)); --nx-c3-gauge-sh: 0 6px 14px -6px rgba(0, 0, 0, .45);
  --nx-c3-stat: color-mix(in srgb, var(--nx-blue) 14%, transparent); --nx-c3-stat-text: var(--nx-blue-text);
  --nx-c3-ghost: rgba(255, 255, 255, .06); --nx-c3-ghost-text: var(--color-text-secondary); --nx-c3-ghost-sh: 0 0 0 1px rgba(255, 255, 255, .16);
  --nx-c3-rule: rgba(255, 255, 255, .08);
  --nx-c3-bar-sh: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 0 0 1px color-mix(in srgb, var(--nx-blue) 16%, transparent), 0 18px 36px -18px rgba(0, 0, 0, .7);
  --nx-c3-pop-sh: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 0 0 1px color-mix(in srgb, var(--nx-blue) 22%, transparent), 0 30px 60px -20px rgba(0, 0, 0, .85);
  --nx-c3-ok-bg: color-mix(in srgb, var(--nx-success) 18%, transparent); --nx-c3-info-bg: color-mix(in srgb, var(--color-info) 22%, transparent); --nx-c3-warn-bg: color-mix(in srgb, var(--nx-amber) 18%, transparent);
  --nx-c3-bad-bg: color-mix(in srgb, var(--nx-danger) 18%, transparent); --nx-c3-gray-bg: rgba(255, 255, 255, .07);
  --nx-c3-pill-ring: 30%; --nx-c3-pill-glow: 0 0 14px -4px;
  --nx-c3-time: color-mix(in srgb, var(--nx-amber) 14%, #FFFFFF); --nx-c3-time-text: color-mix(in srgb, var(--nx-amber) 62%, #000000);
}

/* ---------------------------------------------------------------- the grid (the mock's stage) */
.nx-root .nx-pp-agents .nx-acgrid, .nx-root .nx-acgrid { gap: 36px; align-items: start; perspective: 1600px; }
.nx-root .nx-pp-agents .nx-acgrid--compact, .nx-root .nx-acgrid--compact { gap: 24px; }
/* a shelf paints only inside itself (content-visibility): room for the cards' deep shadows, the same place on the page */
.nx-root .nx-shelf__body { overflow-clip-margin: 72px; }

/* ---------------------------------------------------------------- the card */
.nx-root .nx-ac.nx-ag.nx-c3 { display: flex; flex-direction: column; gap: 18px; padding: 26px 26px 22px; border: 0; border-radius: 26px; background: var(--nx-c3-card); box-shadow: var(--nx-c3-card-sh); color: var(--nx-c3-ink);
  transform: none; translate: none; transform-style: preserve-3d; cursor: pointer; }
.nx-root .nx-ac.nx-ag.nx-c3::before { content: none; }
.nx-root .nx-ac.nx-ag.nx-c3:hover, .nx-root .nx-ac.nx-ag.nx-c3:focus-within { translate: none; box-shadow: var(--nx-c3-card-sh-hover); }
.nx-root .nx-ac.nx-ag.nx-c3.is-selected { box-shadow: 0 0 0 2px var(--nx-blue), var(--nx-c3-card-sh-hover); }
.nx-root .nx-ac.nx-ag.nx-c3.nx-ag--compact { gap: 12px; padding: 18px 18px 16px; border-radius: 20px; }

/* the head: the extruded tile, the name, the department and the owner */
.nx-root .nx-c3 .nx-ag__top { gap: 16px; align-items: center; }
.nx-root .nx-ac.nx-c3 .nx-ag-tile { width: 64px; height: 64px; border-radius: 18px; color: var(--nx-on-blue); transform: translateZ(30px);
  background: linear-gradient(160deg, color-mix(in srgb, var(--nx-dv-a) 88%, var(--nx-dv-hi)), color-mix(in srgb, var(--nx-dv-b) 85%, var(--nx-dv-a)));
  box-shadow: var(--nx-c3-tile-sh); }
.nx-root .nx-ac.nx-c3 .nx-ag-tile > svg { width: 30px; height: 30px; stroke-width: 2; filter: none; }
.nx-root .nx-ac.nx-c3 .nx-ag-tile.has-pic img { border-radius: 18px; }
.nx-root .nx-ac.nx-c3.nx-ag--compact .nx-ag-tile { width: 48px; height: 48px; border-radius: 14px; }
.nx-root .nx-ac.nx-c3.nx-ag--compact .nx-ag-tile > svg { width: 24px; height: 24px; }
.nx-root .nx-c3 .nx-ag__id { gap: 3px; }
.nx-root .nx-c3 .nx-ag__name { font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: var(--nx-c3-ink); }
.nx-root .nx-c3.nx-ag--compact .nx-ag__name { font-size: 18px; }
.nx-root .nx-c3 .nx-ag__who { gap: 3px; margin-top: 0; font-size: 14px; color: var(--nx-c3-muted); }
.nx-root .nx-c3 .nx-who__d, .nx-root .nx-c3 .nx-who__own { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nx-root .nx-c3 .nx-who__own b { font-weight: 700; color: var(--nx-c3-ink2); }
.nx-root .nx-c3 .nx-c3-i { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the glowing status pill (a tick for Ready, a turning arrow for Working) and when it was last used */
.nx-root .nx-c3 .nx-ag__status { gap: 10px; }
.nx-root .nx-c3 .nx-ag-pill { gap: 8px; padding: 7px 14px 7px 10px; border: 0; border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1.15;
  --c3-bg: var(--nx-c3-gray-bg); --c3-fg: var(--nx-c3-gray); background: var(--c3-bg); color: var(--c3-fg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c3-fg) var(--nx-c3-pill-ring), transparent), var(--nx-c3-pill-glow) color-mix(in srgb, var(--c3-fg) 45%, transparent); }
.nx-root .nx-c3 .nx-ag-pill--ok { --c3-bg: var(--nx-c3-ok-bg); --c3-fg: var(--nx-c3-ok); }
.nx-root .nx-c3 .nx-ag-pill--info { --c3-bg: var(--nx-c3-info-bg); --c3-fg: var(--nx-c3-info); }
.nx-root .nx-c3 .nx-ag-pill--warn { --c3-bg: var(--nx-c3-warn-bg); --c3-fg: var(--nx-c3-warn); }
.nx-root .nx-c3 .nx-ag-pill--bad { --c3-bg: var(--nx-c3-bad-bg); --c3-fg: var(--nx-c3-bad); }
.nx-root .nx-c3 .nx-ag-pill svg { width: 16px; height: 16px; stroke-width: 2.4; animation: none; }
.nx-root .nx-c3 .nx-ag-pill[data-pill="ready"] svg { stroke-width: 2.6; }
.nx-root .nx-c3 .nx-ag__note { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 400; color: var(--nx-c3-muted); }

/* the purpose, the system chips with their coloured drawings, the safety line */
.nx-root .nx-c3 .nx-ag__desc { margin: 0; font-size: 15px; line-height: 1.5; color: var(--nx-c3-ink2); }
.nx-root .nx-c3 .nx-ag__sys { gap: 8px; }
.nx-root .nx-c3 .nx-ag-sys { gap: 8px; padding: 8px 12px; border: 0; border-radius: 12px; background: var(--nx-c3-chip); box-shadow: var(--nx-c3-chip-sh); color: var(--nx-c3-chip-text); font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.nx-root .nx-c3 .nx-ag-sys svg { width: 16px; height: 16px; stroke-width: 2; color: var(--nx-c3-db); }
.nx-root .nx-c3 .nx-ag-sys[data-c3="folder"] svg, .nx-root .nx-c3 .nx-ag-sys[data-c3="mail"] svg { color: var(--nx-c3-folder); }
.nx-root .nx-c3 .nx-ag-sys[data-c3="plug"] svg, .nx-root .nx-c3 .nx-ag-sys[data-c3="coins"] svg { color: var(--nx-c3-plug); }
.nx-root .nx-c3 .nx-ag-sys[data-c3="people"] svg { color: var(--nx-c3-people); }
.nx-root .nx-c3 .nx-ag__safety { align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--nx-c3-acc); }
.nx-root .nx-c3 .nx-ag__safety > .nx-c3-i { width: 18px; height: 18px; }
.nx-root .nx-c3 .nx-ag__safety--warn { color: var(--nx-c3-warn); }

/* the sunken chart panel: raised bars of 14 days and the big success gauge */
.nx-root .nx-c3 .nx-c3-panel { display: flex; align-items: center; gap: 16px; width: 100%; margin: 0; padding: 16px 16px 14px; border: 0; border-radius: 18px; background: var(--nx-c3-panel); box-shadow: var(--nx-c3-panel-sh);
  font: inherit; color: inherit; text-align: left; cursor: pointer; }
.nx-root .nx-c3 .nx-c3-panel:focus-visible { outline: var(--nx-focus-ring); outline-offset: 2px; }
.nx-root .nx-c3 .nx-c3-panel--calm, .nx-root .nx-c3 .nx-c3-panel--skel { min-height: 64px; cursor: default; color: var(--nx-c3-muted); font-size: 14px; }
.nx-root .nx-c3 .nx-c3-panel--skel .nx-pf__sk { flex: 1; height: 64px; }
.nx-root .nx-c3 .nx-c3-panel .nx-pf__calm { display: inline-flex; align-items: center; gap: 6px; }
.nx-root .nx-c3 .nx-c3-chart { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.nx-root .nx-c3 .nx-c3-bars { display: flex; align-items: flex-end; gap: 4px; height: 64px; }
.nx-root .nx-c3 .nx-c3-bar { flex: 1; border-radius: 4px 4px 2px 2px; background: var(--nx-c3-bar); box-shadow: var(--nx-c3-bar-sh); }
.nx-root .nx-c3 .nx-c3-bar.is-zero { background: var(--nx-c3-bar0); box-shadow: none; }
.nx-root .nx-c3 .nx-c3-axis { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: var(--nx-c3-muted); }
.nx-root .nx-c3 .nx-c3-gauge { --c3-g: var(--nx-success); flex: none; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; box-shadow: var(--nx-c3-gauge-sh);
  background: conic-gradient(var(--c3-g) 0deg calc(var(--p) * 3.6deg), var(--nx-c3-track) calc(var(--p) * 3.6deg) 360deg); }
.nx-root .nx-c3 .nx-c3-gauge[data-tone="warn"] { --c3-g: var(--nx-amber); }
.nx-root .nx-c3 .nx-c3-gauge[data-tone="bad"] { --c3-g: var(--nx-danger); }
.nx-root .nx-c3 .nx-c3-gauge[data-tone="gray"] { --c3-g: var(--nx-muted); }
.nx-root .nx-c3 .nx-c3-gauge__in { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; background: var(--nx-c3-gauge-in); box-shadow: 0 2px 4px color-mix(in srgb, var(--nx-text) 12%, transparent) inset; }
.nx-root .nx-c3 .nx-c3-gauge__in b { font-size: 19px; font-weight: 800; line-height: 1; color: var(--nx-c3-ink); font-variant-numeric: tabular-nums; }
.nx-root .nx-c3 .nx-c3-gauge__in small { margin-top: 2px; font-size: 10.5px; font-weight: 700; color: var(--nx-c3-muted); }

/* the two stat tiles: runs and time given back */
.nx-root .nx-c3 .nx-c3-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.nx-root .nx-c3 .nx-c3-stat { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nx-root .nx-c3 .nx-c3-stat__ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--nx-c3-stat); color: var(--nx-c3-stat-text); box-shadow: var(--nx-c3-stat-sh); }
.nx-root .nx-c3 .nx-c3-stat__ic--time { background: var(--nx-c3-time); color: var(--nx-c3-time-text); }
.nx-root .nx-c3 .nx-c3-stat__ic .nx-c3-i { width: 18px; height: 18px; }
.nx-root .nx-c3 .nx-c3-stat b { display: block; font-size: 19px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.nx-root .nx-c3 .nx-c3-stat small { display: block; font-size: 12.5px; font-weight: 600; color: var(--nx-c3-muted); }

/* the pressed 3D buttons: Chat, Details and more */
.nx-root .nx-c3 .nx-ag__foot { flex-wrap: wrap; gap: 10px; padding-top: 4px; border-top: 1px solid var(--nx-c3-rule); }
.nx-root .nx-c3.nx-ag--compact .nx-ag__foot { border-top: 0; padding-top: 0; }
.nx-root .nx-ac.nx-c3 .nx-c3-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; min-height: 46px; padding: 0 20px; border: 0; border-radius: 14px; font: 700 15px var(--nx-font); text-decoration: none; cursor: pointer; }
.nx-root .nx-ac.nx-c3 .nx-c3-btn .nx-c3-i { width: 18px; height: 18px; }
.nx-root .nx-ac.nx-c3 .nx-c3-btn--primary { color: var(--nx-on-blue); background: var(--nx-c3-btn); box-shadow: var(--nx-c3-btn-sh); }
.nx-root .nx-ac.nx-c3 .nx-c3-btn--primary .nx-c3-i { stroke-width: 2.2; }
.nx-root .nx-ac.nx-c3 .nx-c3-btn--ghost { color: var(--nx-c3-ghost-text); background: var(--nx-c3-ghost); box-shadow: var(--nx-c3-ghost-sh); }
.nx-root .nx-ac.nx-c3 .nx-c3-btn:active { translate: 0 1px; }
.nx-root .nx-ac.nx-c3 .nx-c3-btn:focus-visible, .nx-root .nx-ac.nx-c3 .nx-c3-more .nx-iconb:focus-visible { outline: var(--nx-focus-ring); outline-offset: 2px; }
.nx-root .nx-ac.nx-c3 .nx-c3-more .nx-iconb { display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 14px; background: transparent; color: var(--nx-c3-muted); }
.nx-root .nx-ac.nx-c3 .nx-c3-more .nx-iconb:hover { background: var(--nx-c3-chip); }
.nx-root .nx-ac.nx-c3 .nx-c3-more .nx-c3-i--dots { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.nx-root .nx-ac.nx-c3.nx-ag--compact .nx-c3-btn { height: 40px; min-height: 40px; padding: 0 16px; }

/* ---------------------------------------------------------------- THE ONE CALM TOOLBAR of the Agents page (31 Oct 2026, Sheraz: "too much menus. overcrowded"; mock C on the same canvas). Title row: Agents, New agent, one More menu.
   One bar: search, All / Mine / Needs you, the two alert counts, ONE Filter button (status, kind, department in a popover) and the view icons with Close all shelves. */
.nx-root .nx-tb__i { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-tb__i--fill { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.nx-root .nx-pp-agents .nx-pph__a { gap: 10px; }
.nx-root .nx-pp-agents .nx-pph__t { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; }
.nx-root .nx-pp-agents .nx-pph__t .nx-sub { flex: 1 1 100%; }
.nx-root .nx-tb__tile { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--nx-c3-btn); color: var(--nx-on-blue); box-shadow: var(--nx-c3-tile-sh); }
.nx-root .nx-tb__tile .nx-tb__i { width: 22px; height: 22px; }
.nx-root .nx-pp-agents .nx-pph__a .nx-btn .nx-tb__i { stroke-width: 2.4; margin-right: 2px; }
.nx-root .nx-tb__more .nx-iconb { display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 14px; background: var(--nx-c3-ghost); color: var(--nx-c3-ghost-text); box-shadow: var(--nx-c3-ghost-sh); }
.nx-root .nx-pp-agents .nx-w0__bar.nx-tb { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 10px; border-radius: 20px; background: var(--nx-c3-card); box-shadow: var(--nx-c3-bar-sh); }
.nx-root .nx-tb__search { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; max-width: 380px; min-width: 0; height: 46px; padding: 0 14px; box-sizing: border-box; border-radius: 14px; background: var(--nx-c3-panel); box-shadow: var(--nx-c3-panel-sh); color: var(--nx-c3-muted); }
.nx-root .nx-tb__search:focus-within { outline: var(--nx-focus-ring); outline-offset: 2px; }
.nx-root .nx-pp-agents .nx-w0__bar.nx-tb .nx-tb__search input, .nx-root .nx-tb__search input { flex: 1 1 auto; width: auto; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; font: 500 15px var(--nx-font); color: var(--nx-c3-ink); outline: none; }
.nx-root .nx-tb__search--sm { flex: none; max-width: none; height: 40px; }
.nx-root .nx-tb .nx-seg, .nx-root .nx-tb__views { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border: 0; border-radius: 14px; overflow: visible; background: var(--nx-c3-panel); box-shadow: var(--nx-c3-panel-sh); }
.nx-root .nx-tb .nx-seg__b { gap: 7px; min-height: 38px; height: 38px; padding: 0 14px; border-radius: 11px; font: 700 14.5px var(--nx-font); color: var(--nx-c3-ink2); }
.nx-root .nx-tb .nx-seg__b[aria-pressed="true"], .nx-root .nx-tb__vb[aria-pressed="true"] { background: var(--nx-c3-chip); color: var(--nx-c3-ink); box-shadow: var(--nx-c3-chip-sh); }
.nx-root .nx-tb .nx-seg__n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin: 0; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: var(--nx-blue); color: var(--nx-on-blue); font-size: 12px; font-weight: 800; }
.nx-root .nx-tb__alert { --c3-bg: var(--nx-c3-bad-bg); --c3-fg: var(--nx-c3-bad); display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 8px; border: 0; border-radius: 999px; background: var(--c3-bg); color: var(--c3-fg); font: 800 13px var(--nx-font); cursor: pointer;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c3-fg) var(--nx-c3-pill-ring), transparent), var(--nx-c3-pill-glow) color-mix(in srgb, var(--c3-fg) 45%, transparent); }
.nx-root .nx-tb__alert--warn { --c3-bg: var(--nx-c3-warn-bg); --c3-fg: var(--nx-c3-warn); }
.nx-root .nx-tb__alert .nx-tb__i { width: 15px; height: 15px; stroke-width: 2.4; }
.nx-root .nx-tb__alert[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--c3-fg); }
.nx-root .nx-tb__fw { position: relative; display: inline-flex; }
.nx-root .nx-tb__ib { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 14px; background: var(--nx-c3-ghost); color: var(--nx-c3-ghost-text); box-shadow: var(--nx-c3-ghost-sh); cursor: pointer; }
.nx-root .nx-tb__ib .nx-tb__i { width: 20px; height: 20px; stroke-width: 2.2; }
.nx-root .nx-tb__ib.is-on { background: var(--nx-c3-btn); color: var(--nx-on-blue); box-shadow: var(--nx-c3-btn-sh); }
.nx-root .nx-tb__n { position: absolute; top: -6px; right: -6px; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: var(--nx-c3-hot); color: var(--nx-c3-on-hot); font-size: 12px; font-weight: 800; box-shadow: 0 0 0 2px var(--nx-surface); }
.nx-root .nx-tb__pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; display: flex; flex-direction: column; gap: 16px; width: min(440px, calc(calc(100 * var(--ao-vw)) - 32px)); max-height: min(calc(72 * var(--ao-vh)), 640px); overflow: auto; box-sizing: border-box; padding: 18px; border-radius: 22px; background: var(--nx-surface); color: var(--nx-c3-ink); box-shadow: var(--nx-c3-pop-sh); }
.nx-root .nx-tb__ph { display: flex; align-items: center; justify-content: space-between; }
.nx-root .nx-tb__ph b { font-size: 17px; font-weight: 800; }
.nx-root .nx-tb__x { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 11px; background: transparent; color: var(--nx-c3-muted); cursor: pointer; }
.nx-root .nx-tb__sec { display: flex; flex-direction: column; gap: 10px; }
.nx-root .nx-tb__sec h3 { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--nx-c3-muted); }
.nx-root .nx-tb__pop .nx-ag-sc, .nx-root .nx-tb__pop .nx-tb__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; overflow: visible; }
.nx-root .nx-tb__pop .nx-tb__chips { max-height: 176px; overflow: auto; padding: 2px; }
.nx-root .nx-tb__pop .nx-ag-sc__b, .nx-root .nx-tb__pop .nx-dv-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--nx-c3-chip); color: var(--nx-c3-chip-text); box-shadow: var(--nx-c3-chip-sh); font: 600 13.5px var(--nx-font); }
.nx-root .nx-tb__pop .nx-ag-sc__b b, .nx-root .nx-tb__pop .nx-dv-chip__n, .nx-root .nx-tb__pop .nx-dv-chip.is-on .nx-dv-chip__n { min-width: 0; padding: 0; background: none; font-weight: 800; color: var(--nx-c3-muted); }
.nx-root .nx-tb__pop .nx-ag-sc__b[aria-pressed="true"], .nx-root .nx-tb__pop .nx-dv-chip.is-on { background: var(--nx-c3-ok-bg); color: var(--nx-c3-ok); box-shadow: 0 0 0 2px var(--nx-blue); }
.nx-root .nx-tb__pf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--nx-c3-rule); }
.nx-root .nx-tb__vb { display: inline-grid; place-items: center; width: 40px; height: 38px; padding: 0; border: 0; border-radius: 11px; background: transparent; color: var(--nx-c3-muted); cursor: pointer; }
.nx-root .nx-tb__sep { width: 1px; height: 22px; margin: 0 4px; background: var(--nx-c3-rule); }
.nx-root .nx-tb__ib:focus-visible, .nx-root .nx-tb__vb:focus-visible, .nx-root .nx-tb__alert:focus-visible, .nx-root .nx-tb .nx-seg__b:focus-visible, .nx-root .nx-tb__more .nx-iconb:focus-visible { outline: var(--nx-focus-ring); outline-offset: 2px; }
@media (max-width: 700px) {
  .nx-root .nx-tb__search { flex: 1 1 100%; max-width: none; }
  .nx-root .nx-pp-agents .nx-w0__bar.nx-tb .nx-seg { order: 0; }
  .nx-root .nx-tb .nx-grow { display: none; }
  .nx-root .nx-tb__pop { position: fixed; top: auto; left: 16px; right: 16px; bottom: 16px; width: auto; max-height: calc(78 * var(--ao-vh)); }
}

/* ---------------------------------------------------------------- motion: the mock's hover lift and tilt, the turning arrow of Working; nothing moves for a person who asked for less motion */
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-ac.nx-ag.nx-c3 { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
  .nx-root .nx-ac.nx-ag.nx-c3:hover { transform: translateY(-8px) rotateX(5deg) rotateY(-4deg); }
  .nx-root .nx-c3 .nx-ag-pill[data-pill="working"] svg { animation: nx-ag-spin 1.6s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-root .nx-ac.nx-ag.nx-c3, .nx-root .nx-ac.nx-ag.nx-c3:hover { transition: none; transform: none; }
  .nx-root .nx-ac.nx-c3 .nx-ag-tile { transform: none; }
}

/* ---------------------------------------------------------------- NO DEAD SPACE (5 Nov 2026, Sheraz: "properly fill up the empty spaces, make it more beautiful and attractive").
   The cards of a row are as tall as the tallest, so a short card had a hole under its buttons. Now the buttons are pinned to the bottom of the card (margin-top: auto), the activity panel takes the spare height
   (its bars grow, up to a limit), and a card with no runs shows a quiet empty 14 day track with a button that asks its first question. The card wears one accent, the colour of its tile (the department), from the
   same tokens. The Compact density keeps its own height. Colours are theme tokens only. */
.nx-root .nx-acgrid, .nx-root .nx-pp-agents .nx-acgrid { align-items: stretch; }
.nx-root .nx-acgrid--compact, .nx-root .nx-pp-agents .nx-acgrid--compact { align-items: start; }
.nx-root .nx-ac.nx-ag.nx-c3 { position: relative; background: radial-gradient(90% 46% at 0% 0%, color-mix(in srgb, var(--nx-dv-a) 10%, transparent), transparent 72%), var(--nx-c3-card); }
.nx-root .nx-ac.nx-ag.nx-c3::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; border-radius: 26px 26px 0 0; background: linear-gradient(90deg, var(--nx-dv-a), var(--nx-dv-b)); opacity: .9; pointer-events: none; }
.nx-root .nx-ac.nx-ag.nx-c3.nx-ag--compact::before { border-radius: 20px 20px 0 0; }
.nx-root .nx-c3 .nx-ag__desc { flex: 1 1 auto; }
.nx-root .nx-c3 .nx-ag__desc.is-empty { color: var(--nx-c3-muted); }
.nx-root .nx-c3.nx-ag--compact .nx-ag__desc { -webkit-line-clamp: 1; }
.nx-root .nx-c3 .nx-who__own .nx-av, .nx-root .nx-c3 .nx-who__own > span:first-child { flex: none; }
.nx-root .nx-c3 .nx-c3-panel { flex: 0 0 auto; }
.nx-root .nx-c3 .nx-c3-panel .nx-c3-gauge { align-self: center; }
.nx-root .nx-c3 .nx-c3-panel--calm { flex-direction: column; align-items: stretch; gap: 14px; }
.nx-root .nx-c3 .nx-c3-panel .nx-c3-bars--quiet { flex: none; height: 12px; min-height: 0; max-height: none; align-items: center; }
.nx-root .nx-c3 .nx-c3-bars--quiet .nx-c3-bar { height: 6px; }
.nx-root .nx-c3 .nx-c3-panel--calm .nx-c3-chart { flex: none; }
.nx-root .nx-c3 .nx-c3-calm { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; min-height: 72px; }
.nx-root .nx-c3 .nx-c3-try { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; text-align: left; min-height: 40px; padding: 0 14px; border-radius: 12px; text-decoration: none; font: 700 14px var(--nx-font); color: var(--nx-c3-ink); cursor: pointer;
  background: color-mix(in srgb, var(--nx-dv-a) 16%, var(--nx-c3-chip)); box-shadow: var(--nx-c3-chip-sh); }
.nx-root .nx-c3 .nx-c3-try:focus-visible { outline: var(--nx-focus-ring); outline-offset: 2px; }
.nx-root .nx-c3 .nx-c3-try .nx-c3-i { width: 16px; height: 16px; color: var(--nx-c3-acc); }
.nx-root .nx-c3 .nx-c3-stat b { white-space: nowrap; }
.nx-root .nx-c3 .nx-ag__foot { margin-top: auto; flex-wrap: nowrap; }
.nx-root .nx-ac.nx-c3 .nx-ag__foot .nx-c3-btn { flex: 1 1 0; justify-content: center; min-width: 0; padding: 0 14px; white-space: nowrap; }
.nx-root .nx-ac.nx-c3 .nx-ag__foot .nx-c3-more { flex: none; }
.nx-root .nx-ac.nx-c3 .nx-ag__foot .nx-grow { display: none; }
@media (max-width: 520px) {
  .nx-root .nx-ac.nx-ag.nx-c3 { gap: 14px; padding: 22px 18px 18px; }
  .nx-root .nx-ac.nx-c3 .nx-ag-tile { width: 56px; height: 56px; border-radius: 16px; }
  .nx-root .nx-c3 .nx-ag__name { font-size: 20px; }
  .nx-root .nx-c3 .nx-c3-panel { padding: 12px; gap: 12px; }
  .nx-root .nx-c3 .nx-c3-gauge { width: 72px; height: 72px; }
  .nx-root .nx-c3 .nx-c3-gauge__in { width: 54px; height: 54px; }
  .nx-root .nx-c3 .nx-c3-gauge__in b { font-size: 17px; }
  .nx-root .nx-ac.nx-c3 .nx-ag__foot .nx-c3-btn { gap: 6px; padding: 0 8px; }
  .nx-root .nx-c3 .nx-c3-stats { gap: 8px; }
  .nx-root .nx-c3 .nx-c3-stat { gap: 8px; }
  .nx-root .nx-c3 .nx-c3-stat__ic { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-c3 .nx-c3-bar:not(.is-zero) { transform-origin: bottom; animation: nx-c3-grow .6s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 22ms); }
  .nx-root .nx-ac.nx-c3 .nx-ag-tile { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
  .nx-root .nx-ac.nx-c3:hover .nx-ag-tile { transform: translateZ(30px) translateY(-3px) scale(1.05); }
  .nx-root .nx-c3 .nx-ag-sys, .nx-root .nx-c3 .nx-c3-try { transition: transform .2s ease-out, box-shadow .2s; }
  .nx-root .nx-c3 .nx-ag-sys:hover, .nx-root .nx-c3 .nx-c3-try:hover { transform: translateY(-2px); }
  .nx-root .nx-c3 .nx-c3-try:active { transform: translateY(0) scale(.98); }
  @keyframes nx-c3-grow { from { transform: scaleY(.1); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .nx-root .nx-c3 .nx-c3-bar, .nx-root .nx-c3 .nx-ag-sys, .nx-root .nx-c3 .nx-c3-try { animation: none; transition: none; transform: none; }
  .nx-root .nx-ac.nx-c3:hover .nx-ag-tile { transform: none; }
}

/* ---------------------------------------------------------------- THE GROUPS AND THE STATUS LINE (5 Nov 2026, Sheraz: "fix these issue in the picture").
   1. A group header is never cut to three letters: the name wraps (two lines at most, the full name on hover) and the "needs attention" line drops under it. The groups of a row share its width by their number of
      cards and are as tall as each other, so the cards fill the width and no blank region is left. 2. The Chat buttons line up (the row is pinned to the bottom, above). 3. ONE status chip with the plain reason
      and, when this person can fix it there, one small button. 4. A fixed two line title area, so the lines under it start at the same height on every card. Theme tokens only. */
.nx-root .nx-fd .nx-fd-panels { align-items: stretch; }
.nx-root .nx-fd .nx-fd-panel.is-closed { align-self: flex-start; }
@media (min-width: 761px) {
  .nx-root .nx-fd .nx-fd-panel { flex: var(--pc) 1 calc(var(--pc) * 300px + 32px); max-width: calc(var(--pc) * 720px + 32px); }
  .nx-root .nx-fd .nx-fd-panel[style*="--pc: 4"] { max-width: 100%; }
  .nx-root .nx-fd .nx-fd-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
}
.nx-root .nx-fd .nx-fd-panel { display: flex; flex-direction: column; }
.nx-root .nx-fd .nx-fd-panel__body:not([hidden]) { flex: 1 1 auto; display: flex; flex-direction: column; }
.nx-root .nx-fd .nx-fd-panel__body .nx-fd-grid { flex: 1 1 auto; }
.nx-root .nx-fd .nx-fd-panel__btn { flex-wrap: wrap; row-gap: 4px; }
.nx-root .nx-fd .nx-fd-panel__n { flex: 1 1 8ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; text-overflow: clip; overflow-wrap: anywhere; font-size: 16.5px; line-height: 1.25; }
.nx-root .nx-fd .nx-fd-panel__chev { order: 2; }
.nx-root .nx-fd .nx-fd-panel__a { order: 3; flex: 1 0 100%; padding-left: 42px; }
.nx-root .nx-c3 .nx-ag__name { display: flex; align-items: flex-end; gap: 6px; min-height: 2.3em; }
.nx-root .nx-c3 .nx-ag__nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; min-width: 0; }
.nx-root .nx-c3 .nx-ag__name .nx-ac__fav { flex: none; }
.nx-root .nx-c3.nx-ag--compact .nx-ag__name { min-height: 0; }
.nx-root .nx-c3 .nx-ag-pill { max-width: 100%; align-items: flex-start; text-align: left; }
.nx-root .nx-c3 .nx-ag-pill > span { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.nx-root .nx-c3 .nx-ag-pill > svg { margin-top: 1px; }
.nx-root .nx-ac.nx-c3 .nx-c3-fix { display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border: 0; border-radius: 10px; text-decoration: none; font: 700 13.5px var(--nx-font); white-space: nowrap;
  color: var(--nx-on-blue); background: var(--nx-c3-btn); box-shadow: var(--nx-c3-btn-sh); cursor: pointer; }
.nx-root .nx-ac.nx-c3 .nx-c3-fix:active { translate: 0 1px; }
.nx-root .nx-ac.nx-c3 .nx-c3-fix:focus-visible { outline: var(--nx-focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-c3 .nx-c3-fix { transition: transform .2s ease-out; }
  .nx-root .nx-c3 .nx-c3-fix:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) { .nx-root .nx-c3 .nx-c3-fix { transition: none; transform: none; } }

/* the details list of a card (who can use it, version, last changed): small, calm, the same on every card */
.nx-root .nx-c3 .nx-ag__meta { display: grid; gap: 6px; margin: 0; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--nx-dv-a) 7%, transparent); font-size: 13.5px; }
.nx-root .nx-c3 .nx-ag__meta > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 0; }
.nx-root .nx-c3 .nx-ag__meta dt { flex: none; margin: 0; font-weight: 600; color: var(--nx-c3-muted); }
.nx-root .nx-c3 .nx-ag__meta dd { margin: 0; min-width: 0; text-align: right; font-weight: 700; color: var(--nx-c3-ink2); overflow-wrap: anywhere; }
/* spare height goes to ONE place: above the buttons (live check 5 Nov 2026: gaps in several places looked stretched). Nothing else stretches. */
.nx-root .nx-c3 .nx-ag__desc { flex: 0 0 auto; }
.nx-root .nx-c3 .nx-ag__meta > div { flex-wrap: wrap; }
.nx-root .nx-c3 .nx-ag__meta { grid-template-columns: max-content minmax(0, 1fr); column-gap: 14px; }
.nx-root .nx-c3 .nx-ag__meta > div { display: contents; }

/* TICKETS of the New look (ticketing 1h, 5 Nov 2026). Every rule starts with .nx-root (web/test/nx-css-scoped.test.js); colours are --nx-* tokens only, so all eight themes work with no rule of their own.
   Desktop: views | list | ticket side by side. Under 900 px: one column; a ticket opens on its own with the action bar at the bottom. Touch targets are 44 px, motion only when the person has not asked for less. */
.nx-root .nx-tix { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nx-s3); min-width: 0; align-content: start; }
.nx-root .nx-tix > * { min-width: 0; }
.nx-root .nx-tix-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s3); }
.nx-root .nx-tix-head .nx-h1 { margin: 0; }
.nx-root .nx-tix-head__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--nx-s2); flex: 1 1 320px; min-width: 0; }
.nx-root .nx-tix-search { position: relative; display: block; flex: 1 1 240px; max-width: 420px; min-width: 0; }
.nx-root .nx-tix-search .nx-gl { --gls: 18; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--nx-muted); pointer-events: none; }
.nx-root .nx-tix-search .nx-input { width: 100%; min-width: 0; min-height: 44px; padding-left: 38px; }
.nx-root .nx-tix .nx-btn { min-height: 44px; }
.nx-root .nx-tix .nx-btn .nx-gl, .nx-root .nx-tix-chip .nx-gl, .nx-root .nx-tix-mode .nx-gl { --gls: 18; }
.nx-root .nx-tix .nx-pill .nx-gl { --gls: 14; }

/* the three panes. They end 60 px above the bottom of the window so the shell's two round buttons (Show me how, Chat) float below them and never over a control */
.nx-root .nx-tix-grid { display: grid; grid-template-columns: 216px minmax(320px, 400px) minmax(0, 1fr); min-height: 560px; height: clamp(540px, calc(calc(100 * var(--ao-dvh)) - 250px), 1000px); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); box-shadow: var(--nx-shadow); overflow: hidden; }
.nx-root .nx-tix-grid > * { min-width: 0; }
.nx-root .nx-tix-rail { border-right: 1px solid var(--nx-line); padding: var(--nx-s3) var(--nx-s2); overflow-y: auto; display: flex; flex-direction: column; gap: var(--nx-s2); }
.nx-root .nx-tix-rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nx-root .nx-tix-view { display: flex; align-items: center; gap: var(--nx-s2); width: 100%; min-height: 44px; padding: 0 var(--nx-s3); border: 0; border-radius: 10px; background: transparent; color: var(--nx-text); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; text-align: left; }
.nx-root .nx-tix-view .nx-gl { --gls: 18; color: var(--nx-muted); }
.nx-root .nx-tix-view:hover { background: var(--nx-hover); }
.nx-root .nx-tix-view[aria-current="page"] { background: var(--nx-blue-soft); color: var(--nx-blue-text); box-shadow: inset 3px 0 0 var(--nx-blue); }
.nx-root .nx-tix-view[aria-current="page"] .nx-gl { color: var(--nx-blue-text); }
.nx-root .nx-tix-view__l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-tix-view--set { margin-top: auto; font-weight: 500; color: var(--nx-muted); border-top: 1px solid var(--nx-line); border-radius: 0 0 10px 10px; }
.nx-root .nx-tix-count { min-width: 24px; padding: 1px 8px; border-radius: var(--nx-rfull); background: var(--nx-bg); border: 1px solid var(--nx-line); color: var(--nx-text); font-size: var(--nx-fs-small); font-weight: 700; text-align: center; }
.nx-root .nx-tix-view[aria-current="page"] .nx-tix-count { background: var(--nx-surface); }
.nx-root .nx-tix-listpane { border-right: 1px solid var(--nx-line); overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
.nx-root .nx-tix-pane { overflow: hidden; min-height: 0; padding: 0; display: flex; flex-direction: column; }
.nx-root .nx-tix-pane > .nx-tix-next { margin: var(--nx-s3) var(--nx-s4) 0; flex: none; }
.nx-root .nx-tix-detail { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0; }
.nx-root .nx-tix-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--nx-s4); }
.nx-root .nx-tix-foot:empty { display: none; }
.nx-root .nx-tix-foot { flex: none; max-height: 45%; overflow-y: auto; padding: var(--nx-s3) var(--nx-s4); background: var(--nx-surface); border-top: 1px solid var(--nx-line); }
.nx-root .nx-tix-idle { padding: var(--nx-s4); }
.nx-root .nx-tix-idle { margin: auto 0; }

/* the four status chips */
.nx-root .nx-tix-chips { display: flex; flex-wrap: wrap; gap: var(--nx-s2); padding: var(--nx-s3); border-bottom: 1px solid var(--nx-line); position: sticky; top: 0; background: var(--nx-surface); z-index: 1; }
.nx-root .nx-tix-gchip { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; gap: 6px; min-height: 44px; padding: 0 10px; border: 2px solid transparent; border-radius: var(--nx-rfull); font: inherit; font-weight: 700; font-size: var(--nx-fs-small); cursor: pointer; background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-tix-gchip .nx-gl { --gls: 16; }
.nx-root .nx-tix-gchip--warn { background: var(--nx-amber-soft); color: var(--nx-amber-text); }
.nx-root .nx-tix-gchip--ok { background: var(--nx-ok-soft); color: var(--nx-ok-text); }
.nx-root .nx-tix-gchip--gray { background: var(--nx-bg); color: var(--nx-muted); border-color: var(--nx-line); }
.nx-root .nx-tix-gchip { text-decoration: none; }
.nx-root .nx-tix-gchip[aria-current="true"] { border-color: currentColor; box-shadow: 0 0 0 1px currentColor inset; }
.nx-root .nx-tix-gchip[aria-current="true"]::after { content: "\2713"; font-weight: 800; }

/* a row of the list */
.nx-root .nx-tix-rows { list-style: none; margin: 0; padding: 0; }
.nx-root .nx-tix-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--nx-s2) var(--nx-s3); align-items: center; padding: var(--nx-s3) var(--nx-s4); min-height: 68px; color: var(--nx-text); text-decoration: none; border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-tix-row:hover { background: var(--nx-hover); }
.nx-root .nx-tix-row[aria-current="true"] { background: var(--nx-blue-soft); box-shadow: inset 3px 0 0 var(--nx-blue); }
.nx-root .nx-tix-row__main { display: grid; gap: 2px; min-width: 0; }
.nx-root .nx-tix-row__l1 { display: flex; gap: var(--nx-s2); align-items: baseline; min-width: 0; }
.nx-root .nx-tix-row__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nx-root .nx-tix-row__l2 { color: var(--nx-muted); font-size: var(--nx-fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-tix-row__side { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2) var(--nx-s3); }
.nx-root .nx-tix-row > .nx-tix-urg { grid-row: 1; }
.nx-root .nx-tix-num { font-variant-numeric: tabular-nums; color: var(--nx-muted); font-weight: 700; white-space: nowrap; }

/* the urgency mark: a different shape for each, plus its word for a screen reader and on hover */
.nx-root .nx-tix-urg { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none; font-size: 11px; font-weight: 800; line-height: 1; color: var(--nx-bg); }
.nx-root .nx-tix-urg--diamond { background: var(--nx-danger); transform: rotate(45deg) scale(.82); border-radius: 3px; }
.nx-root .nx-tix-urg--diamond > span { transform: rotate(-45deg); }
.nx-root .nx-tix-urg--circle { background: var(--nx-amber); border-radius: 50%; }
.nx-root .nx-tix-urg--square { border: 2px solid var(--nx-muted); border-radius: 4px; background: transparent; }
/* a custom urgency (7 Nov 2026): its own shape (a star), the words beside the urgency on the row and on the ticket */
.nx-root .nx-tix-urg--star { background: var(--nx-blue); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); width: 18px; height: 18px; }
.nx-root .nx-tix-custom { display: grid; gap: var(--nx-s3); margin-top: var(--nx-s2); }
.nx-root .nx-tix-ulabel { color: var(--nx-blue-text); font-weight: 700; }

/* the SLA ring */
.nx-root .nx-tix-sla { display: inline-flex; align-items: center; gap: 6px; font-size: var(--nx-fs-small); font-weight: 700; white-space: nowrap; --tk-c: var(--nx-muted); color: var(--nx-muted); }
.nx-root .nx-tix-sla--ok { --tk-c: var(--nx-success); color: var(--nx-ok-text); }
.nx-root .nx-tix-sla--warn { --tk-c: var(--nx-amber); color: var(--nx-amber-text); }
.nx-root .nx-tix-sla--bad { --tk-c: var(--nx-danger); color: var(--nx-bad-text); }
.nx-root .nx-tix-ring { width: 26px; height: 26px; flex: none; }
.nx-root .nx-tix-ring__bg { fill: none; stroke: var(--nx-line); stroke-width: 3; }
.nx-root .nx-tix-ring__fg { fill: none; stroke: var(--tk-c); stroke-width: 3; stroke-linecap: round; }
.nx-root .nx-tix-ring__mark path { fill: none; stroke: var(--tk-c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-tix-ring__fg { transition: stroke-dashoffset .9s var(--nx-curve), stroke var(--nx-d2); }
  .nx-root .nx-tix-sla--bad .nx-tix-ring { animation: nx-tix-pulse 2.4s ease-in-out 3; }
  .nx-root .nx-tix-next { animation: nx-tix-rise var(--nx-d3) var(--nx-curve) both; }
}
@keyframes nx-tix-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes nx-tix-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* what happens next */
.nx-root .nx-tix-next { display: flex; align-items: center; gap: var(--nx-s3); padding: var(--nx-s3) var(--nx-s4); border-radius: var(--nx-r1); background: var(--nx-ok-soft); color: var(--nx-ok-text); border: 1px solid var(--nx-ok-text); }
.nx-root .nx-tix-next__ico { display: inline-flex; gap: 2px; flex: none; }
.nx-root .nx-tix-next__ico .nx-gl { --gls: 16; }
.nx-root .nx-tix-next__t { flex: 1; min-width: 0; }
.nx-root .nx-tix-x { min-width: 44px; min-height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: inherit; border-radius: 10px; cursor: pointer; flex: none; }
.nx-root .nx-tix-x .nx-gl { --gls: 16; }

/* one ticket */
.nx-root .nx-tix-dh { display: grid; gap: var(--nx-s2); }
.nx-root .nx-tix-dh__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-tix-dh__title { margin: 0; font-size: var(--nx-fs-h3); line-height: 1.3; overflow-wrap: anywhere; }
.nx-root .nx-tix-back { display: none; align-items: center; gap: 4px; min-height: 44px; padding: 0 var(--nx-s2) 0 0; border: 0; background: transparent; color: var(--nx-link); font: inherit; font-weight: 600; cursor: pointer; }
.nx-root .nx-tix-back .nx-gl { --gls: 18; }
.nx-root .nx-tix-prio { display: inline-flex; align-items: center; gap: 4px; font-size: var(--nx-fs-small); font-weight: 700; color: var(--nx-text); }
.nx-root .nx-tix-prio .nx-gl { --gls: 16; }
.nx-root .nx-tix-prio[data-prio="1"], .nx-root .nx-tix-prio[data-prio="2"] { color: var(--nx-bad-text); }
.nx-root .nx-tix-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--nx-s2) var(--nx-s4); margin: 0; padding: var(--nx-s3); border-radius: var(--nx-r1); background: var(--nx-bg); border: 1px solid var(--nx-line); }
.nx-root .nx-tix-facts > div { min-width: 0; }
.nx-root .nx-tix-facts dt { font-size: var(--nx-fs-small); color: var(--nx-muted); }
.nx-root .nx-tix-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.nx-root .nx-tix-facts__sla dd { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.nx-root .nx-tix-due { font-weight: 400; color: var(--nx-muted); }
.nx-root .nx-tix-facts--more { margin-top: var(--nx-s2); }
.nx-root .nx-tix-why, .nx-root .nx-tix-summary, .nx-root .nx-tix-final { display: flex; align-items: flex-start; gap: var(--nx-s2); margin: 0; }
.nx-root .nx-tix-why { padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r1); background: var(--nx-amber-soft); color: var(--nx-amber-text); font-weight: 600; }
.nx-root .nx-tix-why .nx-gl, .nx-root .nx-tix-summary .nx-gl, .nx-root .nx-tix-final .nx-gl, .nx-root .nx-tix-src .nx-gl, .nx-root .nx-tix-note .nx-gl { --gls: 16; margin-top: 3px; }
.nx-root .nx-tix-summary { padding: var(--nx-s3); border-radius: var(--nx-r1); background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-tix-src { display: grid; gap: var(--nx-s2); padding: var(--nx-s3); border-radius: var(--nx-r1); border: 1px dashed var(--nx-control-line); }
.nx-root .nx-tix-src p { margin: 0; display: flex; gap: var(--nx-s2); align-items: flex-start; }
.nx-root .nx-tix-refs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-tix-refs li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--nx-rfull); border: 1px solid var(--nx-line); background: var(--nx-bg); max-width: 100%; overflow-wrap: anywhere; }
.nx-root .nx-tix-refs .nx-gl { --gls: 14; }
.nx-root .nx-tix-refs__n { color: var(--nx-muted); }
.nx-root .nx-tix-h { margin: 0 0 var(--nx-s2); font-size: var(--nx-fs-small); text-transform: uppercase; letter-spacing: .04em; color: var(--nx-muted); }
.nx-root .nx-tix-req__b { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }

/* the timeline: replies, internal notes (a lock and their own tint) and what happened, in time order */
.nx-root .nx-tix-log { list-style: none; margin: 0; padding: 0 0 0 var(--nx-s3); border-left: 2px solid var(--nx-line); display: grid; gap: var(--nx-s3); }
.nx-root .nx-tix-ev { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-tix-ev .nx-gl { --gls: 16; }
.nx-root .nx-tix-ev--warn { color: var(--nx-amber-text); font-weight: 600; }
.nx-root .nx-tix-ev--breach { color: var(--nx-bad-text); font-weight: 700; }
.nx-root .nx-tix-ev time { margin-left: auto; }
.nx-root .nx-tix-msg { padding: var(--nx-s3); border-radius: var(--nx-r1); background: var(--nx-bg); border: 1px solid var(--nx-line); border-left: 4px solid var(--nx-blue); min-width: 0; }
.nx-root .nx-tix-msg.is-internal { background: var(--nx-amber-soft); border: 1px dashed var(--nx-amber); border-left: 4px solid var(--nx-amber); }
.nx-root .nx-tix-msg__h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); margin-bottom: 4px; }
.nx-root .nx-tix-msg__h .nx-gl { --gls: 16; color: var(--nx-amber-text); }
.nx-root .nx-tix-msg__h time { margin-left: auto; color: var(--nx-muted); }
.nx-root .nx-tix-msg__k { font-size: var(--nx-fs-small); font-weight: 700; color: var(--nx-blue-text); }
.nx-root .nx-tix-msg.is-internal .nx-tix-msg__k, .nx-root .nx-tix-msg__lock { color: var(--nx-amber-text); font-size: var(--nx-fs-small); font-weight: 700; }
.nx-root .nx-tix-msg__b { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }

/* the composer: two modes, the internal one tinted and locked */
.nx-root .nx-tix-comp { display: grid; gap: var(--nx-s2); padding: var(--nx-s3); border-radius: var(--nx-r1); border: 1px solid var(--nx-line); background: var(--nx-bg); }
.nx-root .nx-tix-comp.is-internal { background: var(--nx-amber-soft); border: 1px dashed var(--nx-amber); }
.nx-root .nx-tix-modes { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-tix-mode { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--nx-s3); border: 1px solid var(--nx-control-line); border-radius: var(--nx-rfull); background: var(--nx-surface); color: var(--nx-text); font: inherit; font-weight: 600; cursor: pointer; }
.nx-root .nx-tix-mode[aria-pressed="true"] { background: var(--nx-blue-soft); color: var(--nx-blue-text); border-color: var(--nx-blue); box-shadow: 0 0 0 1px var(--nx-blue) inset; }
.nx-root .nx-tix-mode--int[aria-pressed="true"] { background: var(--nx-amber-soft); color: var(--nx-amber-text); border-color: var(--nx-amber); box-shadow: 0 0 0 1px var(--nx-amber) inset; }
.nx-root .nx-tix-comp__hint { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--nx-amber-text); font-weight: 600; }
.nx-root .nx-tix-comp__hint .nx-gl { --gls: 16; }
.nx-root .nx-tix-comp__row { display: flex; justify-content: flex-end; }
.nx-root .nx-tix-ta { width: 100%; min-width: 0; padding: var(--nx-s2) var(--nx-s3); resize: vertical; font: inherit; line-height: 1.5; min-height: 88px; flex: none; }
.nx-root .nx-tix-ta--big { min-height: 130px; font-size: 17px; }

/* the buttons the server offered */
.nx-root .nx-tix-bar { display: grid; gap: var(--nx-s2); }
.nx-root .nx-tix-scroll { display: flex; flex-direction: column; gap: var(--nx-s4); min-width: 0; }
.nx-root .nx-tix-foot { display: grid; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-tix-modes .nx-tix-send { margin-left: auto; }
.nx-root .nx-tix-ta--comp { min-height: 64px; }
.nx-root .nx-tix-facts .nx-tix-ring { width: 30px; height: 30px; }
.nx-root .nx-tix-bar__row { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-tix-more { display: grid; gap: var(--nx-s2); padding: var(--nx-s3); border-radius: var(--nx-r1); border: 1px solid var(--nx-line); background: var(--nx-bg); }
.nx-root .nx-tix-final { color: var(--nx-muted); }
.nx-root .nx-tix-loading { padding: var(--nx-s6); text-align: center; color: var(--nx-muted); margin: 0; }

/* inside the drawers and the small dialogs */
.nx-root .nx-tix-new, .nx-root .nx-tix-ask, .nx-root .nx-tix-prefs, .nx-root .nx-tixm { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-tix-new > *, .nx-root .nx-tix-ask > *, .nx-root .nx-tix-prefs > *, .nx-root .nx-tixm > * { min-width: 0; }
.nx-root .nx-tix-field { display: grid; gap: 4px; min-width: 0; }
.nx-root .nx-tix-field__l { font-weight: 700; }
.nx-root .nx-tix-field .nx-select, .nx-root .nx-tix-field .nx-input { width: 100%; min-width: 0; min-height: 44px; flex: none; }
.nx-root .nx-tix-field__h { color: var(--nx-muted); }
.nx-root .nx-tix-sug { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-tix-chip { display: inline-grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; text-align: left; min-height: 44px; padding: 6px 12px; border: 1px dashed var(--nx-blue); border-radius: var(--nx-r1); background: var(--nx-blue-soft); color: var(--nx-blue-text); font: inherit; cursor: pointer; max-width: 100%; }
.nx-root .nx-tix-chip > span { grid-column: 2; font-size: var(--nx-fs-small); color: var(--nx-muted); }
.nx-root .nx-tix-chip:hover { border-style: solid; }
.nx-root .nx-tix-urgs { border: 0; margin: 0; padding: 0; min-width: 0; }
.nx-root .nx-tix-urgs__row { display: flex; flex-wrap: wrap; gap: var(--nx-s2); margin-top: 4px; }
.nx-root .nx-tix-urgbtn { display: inline-flex; align-items: center; gap: var(--nx-s2); min-height: 44px; padding: 0 var(--nx-s3); border: 1px solid var(--nx-control-line); border-radius: var(--nx-rfull); background: var(--nx-surface); color: var(--nx-text); font: inherit; font-weight: 600; cursor: pointer; }
.nx-root .nx-tix-urgbtn[aria-pressed="true"] { border-color: var(--nx-blue); background: var(--nx-blue-soft); color: var(--nx-blue-text); box-shadow: 0 0 0 1px var(--nx-blue) inset; }
.nx-root .nx-tix-urgbtn[aria-pressed="true"]::after { content: "\2713"; font-weight: 800; }
.nx-root .nx-tix-dupe { display: grid; gap: var(--nx-s2); padding: var(--nx-s3); border-radius: var(--nx-r1); border: 1px dashed var(--nx-amber); background: var(--nx-amber-soft); }
.nx-root .nx-tix-dupe > b { display: flex; align-items: center; gap: 6px; color: var(--nx-amber-text); }
.nx-root .nx-tix-dupe .nx-gl { --gls: 16; }
.nx-root .nx-tix-dupe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-tix-dupe li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); justify-content: space-between; }
.nx-root .nx-tix-dupe p { margin: 0; }
.nx-root .nx-tix-dupe__t { min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-tix-dupe__a { display: inline-flex; gap: var(--nx-s2); flex-wrap: wrap; }
.nx-root .nx-tix-moretog { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--nx-s2); border: 0; background: transparent; color: var(--nx-link); font: inherit; font-weight: 600; cursor: pointer; justify-self: start; }
.nx-root .nx-tix-moretog .nx-gl, .nx-root .nx-tix-morebtn .nx-gl { --gls: 16; }
.nx-root .nx-tix-moretog[aria-expanded="true"] .nx-gl, .nx-root .nx-tix-morebtn[aria-expanded="true"] .nx-gl { transform: rotate(180deg); }
.nx-root .nx-tix-newmore { display: grid; gap: var(--nx-s3); padding: var(--nx-s3); border-radius: var(--nx-r1); border: 1px solid var(--nx-line); background: var(--nx-bg); }
.nx-root .nx-tix-quiet { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nx-s3); }
.nx-root .nx-tix-check { display: flex; align-items: center; gap: var(--nx-s2); min-height: 44px; font-weight: 600; cursor: pointer; }
.nx-root .nx-tix-check input { width: 22px; height: 22px; flex: none; accent-color: var(--nx-blue); }
.nx-root .nx-tix-note { display: flex; gap: var(--nx-s2); align-items: flex-start; margin: 0; padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r1); background: var(--nx-blue-soft); color: var(--nx-blue-text); }
/* the mail drawer (nx-mail-ticket.jsx) */
.nx-root .nx-tixm__ai { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--nx-blue-text); font-weight: 600; }
.nx-root .nx-tixm__ai .nx-gl { --gls: 16; }
.nx-root .nx-tixm__thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border: 1px solid var(--nx-line); border-radius: var(--nx-r1); background: var(--nx-bg); }
.nx-root .nx-tixm__thread li { display: flex; align-items: center; gap: var(--nx-s2); min-height: 44px; padding: 4px var(--nx-s3); border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-tixm__thread li:last-child { border-bottom: 0; }
.nx-root .nx-tixm__thread label { display: flex; align-items: center; gap: var(--nx-s2); flex: 1; min-width: 0; cursor: pointer; }
.nx-root .nx-tixm__thread input { width: 20px; height: 20px; flex: none; accent-color: var(--nx-blue); }
.nx-root .nx-tixm__thread span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nx-root .nx-tixm__done { display: grid; gap: var(--nx-s3); justify-items: start; }
.nx-root .nx-tixm__existing { display: grid; gap: var(--nx-s3); padding: var(--nx-s4); border-radius: var(--nx-r1); background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-tixm__existing b { font-size: var(--nx-fs-h3); }
.nx-root .nx-tixm__refuse { padding: var(--nx-s4); border-radius: var(--nx-r1); background: var(--nx-amber-soft); color: var(--nx-amber-text); font-weight: 600; margin: 0; }

/* focus is always visible */
.nx-root .nx-tix-row:focus-visible, .nx-root .nx-tix-view:focus-visible, .nx-root .nx-tix-gchip:focus-visible, .nx-root .nx-tix-mode:focus-visible, .nx-root .nx-tix-chip:focus-visible, .nx-root .nx-tix-urgbtn:focus-visible,
.nx-root .nx-tix-moretog:focus-visible, .nx-root .nx-tix-back:focus-visible, .nx-root .nx-tix-x:focus-visible, .nx-root .nx-tix-ta:focus-visible { outline: var(--nx-focus-ring); outline-offset: 2px; }
.nx-root .nx-tix-row:focus-visible, .nx-root .nx-tix-view:focus-visible { outline-offset: -3px; }

/* tablet: the views become a strip over the list and the ticket */
@media (max-width: 1199px) {
  .nx-root .nx-tix-grid { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .nx-root .nx-tix-rail { grid-column: 1 / -1; flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--nx-line); overflow-x: auto; overflow-y: hidden; padding: var(--nx-s2); }
  .nx-root .nx-tix-rail__list { flex-direction: row; gap: var(--nx-s2); }
  .nx-root .nx-tix-view { width: auto; border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); white-space: nowrap; flex: none; }
  .nx-root .nx-tix-view[aria-current="page"] { box-shadow: none; border-color: var(--nx-blue); }
  .nx-root .nx-tix-view--set { margin-top: 0; border-top: 1px solid var(--nx-line); border-radius: var(--nx-rfull); flex: none; }
}
/* phone and small tablet: one column. The list, or one ticket full screen with the action bar at the bottom. */
@media (max-width: 899px) {
  .nx-root .nx-tix-grid { display: block; height: auto; min-height: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; }
  .nx-root .nx-tix-rail { border: 0; padding: 0 0 var(--nx-s2); margin: 0 calc(var(--nx-s2) * -1); padding-left: var(--nx-s2); padding-right: var(--nx-s2); }
  .nx-root .nx-tix-listpane { border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); overflow: hidden; }
  .nx-root .nx-tix-chips { position: static; }
  .nx-root .nx-tix-pane { padding: 0; overflow: visible; display: block; }
  .nx-root .nx-tix-pane > .nx-tix-next { margin: 0 0 var(--nx-s3); }
  .nx-root .nx-tix-detail { display: block; }
  .nx-root .nx-tix-scroll { overflow: visible; padding: 0; }
  .nx-root .nx-tix-foot { display: contents; }
  .nx-root .nx-tix-detail > .nx-tix-scroll, .nx-root .nx-tix-foot > * { margin-bottom: var(--nx-s4); }
  .nx-root .nx-tix-idle { display: none; }
  .nx-root .nx-tix:not(.has-ticket) .nx-tix-pane { display: none; }
  .nx-root .nx-tix.has-ticket .nx-tix-rail, .nx-root .nx-tix.has-ticket .nx-tix-listpane, .nx-root .nx-tix.has-ticket .nx-tix-head__tools { display: none; }
  .nx-root .nx-tix.has-ticket .nx-tix-head { display: none; }
  .nx-root .nx-tix.has-ticket .nx-tix-first { display: none; }
  .nx-root .nx-tix-back { display: inline-flex; }
  .nx-root .nx-tix-detail { padding-bottom: var(--nx-s3); }
  /* the two round buttons of the shell (Aria, Chat) float over the corners of this bar, so the buttons keep to the middle */
  /* the bar sits on the bottom menu. Its lowest 64 px are left empty for the shell's round buttons (Aria's microphone and Chat), which float over that strip; Show me how steps above the bar (nx-guide.jsx KEEP_CLEAR) */
  .nx-root .nx-tix-bar { position: sticky; bottom: calc(var(--nx-bar-h) + env(safe-area-inset-bottom, 0px)); z-index: 3; padding: var(--nx-s2) var(--nx-s3) 64px; margin: 64px -14px 0;   /* the 64 px above are the room Show me how needs, so it never covers the last control at the end of the page */ background: var(--nx-surface); border-top: 1px solid var(--nx-line); box-shadow: var(--nx-panel-shadow); }
  .nx-root .nx-tix { padding-bottom: 150px; }
  .nx-root .nx-tix.has-ticket { padding-bottom: 0; }
  .nx-root .nx-tix-new, .nx-root .nx-tixm, .nx-root .nx-tix-prefs, .nx-root .nx-tix-how { padding-bottom: 72px; }
  .nx-root .nx-tix-bar__row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .nx-root .nx-tix-bar__row .nx-btn { flex: none; }
  .nx-root .nx-tix-more { max-height: calc(40 * var(--ao-vh)); overflow-y: auto; }
  .nx-root .nx-tix-head__tools { flex-basis: 100%; justify-content: stretch; }
  .nx-root .nx-tix-search { max-width: none; }
}
@media (max-width: 520px) {
  .nx-root .nx-tix-chips { display: grid; grid-template-columns: 1fr 1fr; }
  .nx-root .nx-tix-quiet { grid-template-columns: 1fr; }
  .nx-root .nx-tix-facts { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------- ticketing 1i: the first visual guides (nx-tickets-explain.jsx). Still frames by default; the stage plays only when motion is allowed. */
.nx-root .nx-ex__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-ex { margin: 0; display: grid; gap: var(--nx-s2); align-content: start; padding: var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); min-width: 0; text-align: left; }
.nx-root .nx-ex__title { font-weight: 800; }
.nx-root .nx-ex__strip { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-ex__strip li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--nx-s2); align-items: center; }
.nx-root .nx-ex__svg { display: block; width: 100%; height: auto; border-radius: var(--nx-r1); background: var(--nx-bg); }
.nx-root .nx-ex__cap { display: flex; gap: 6px; align-items: baseline; font-size: var(--nx-fs-small); line-height: 1.35; color: var(--nx-muted); }
.nx-root .nx-ex__cap b { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--nx-rfull); background: var(--nx-blue-soft); color: var(--nx-blue-text); font-size: 12px; }
.nx-root .nx-ex__live, .nx-root .nx-ex__replay { display: none; }
.nx-root .nx-ex__card { fill: var(--nx-surface); stroke: var(--nx-control-line); stroke-width: 1.5; }
.nx-root .nx-ex__card--top { fill: var(--nx-blue-soft); stroke: var(--nx-blue); }
.nx-root .nx-ex__ink { stroke: var(--nx-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-ex__bar { fill: var(--nx-blue-soft); }
.nx-root .nx-ex__pill { fill: var(--nx-bg); stroke: var(--nx-control-line); stroke-width: 1; }
.nx-root .nx-ex__pill--hot { fill: var(--nx-blue); stroke: none; }
.nx-root .nx-ex__txt { font: 600 8px/1 var(--nx-font); fill: var(--nx-text); }
.nx-root .nx-ex__txt--on { fill: var(--nx-on-blue); }
.nx-root .nx-ex__txt--big { font-size: 13px; font-weight: 800; }
.nx-root .nx-ex__big { font: 800 16px/1 var(--nx-font); fill: var(--nx-text); }
.nx-root .nx-ex__fill-blue { fill: var(--nx-blue); }
.nx-root .nx-ex__fill-green { fill: var(--nx-success); }
.nx-root .nx-ex__fill-amber { fill: var(--nx-amber); stroke: none; }
.nx-root .nx-ex__tick { stroke: var(--nx-bg); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-ex__ring-bg { fill: none; stroke: var(--nx-line); stroke-width: 7; }
.nx-root .nx-ex__ring { fill: none; stroke-width: 7; stroke-linecap: round; }
.nx-root .nx-ex__ring--ok { stroke: var(--nx-success); }
.nx-root .nx-ex__ring--warn { stroke: var(--nx-amber); }
.nx-root .nx-ex__ring--bad { stroke: var(--nx-danger); }
.nx-root .nx-ex__bang { stroke: var(--nx-danger); stroke-width: 4; stroke-linecap: round; }
.nx-root .nx-ex__wave { fill: none; stroke: var(--nx-amber); stroke-width: 1.5; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-ex__strip { display: none; }
  .nx-root .nx-ex__live { display: grid; gap: var(--nx-s2); }
  .nx-root .nx-ex__replay { display: inline-flex; justify-self: start; }
  .nx-root .nx-ex__stack { position: relative; aspect-ratio: 160 / 100; }
  .nx-root .nx-ex__svg--live { position: absolute; inset: 0; height: 100%; opacity: 0; animation-duration: 5.4s; animation-fill-mode: both; animation-iteration-count: 1; animation-timing-function: linear; }
  .nx-root .nx-ex__f1 { animation-name: nx-ex-f1; }
  .nx-root .nx-ex__f2 { animation-name: nx-ex-f2; }
  .nx-root .nx-ex__f3 { animation-name: nx-ex-f3; }
  .nx-root .nx-ex__caps { position: relative; min-height: 2.8em; }
  .nx-root .nx-ex__caps .nx-ex__cap { position: absolute; inset: 0 0 auto 0; opacity: 0; animation-duration: 5.4s; animation-fill-mode: both; animation-iteration-count: 1; animation-timing-function: linear; }
  .nx-root .nx-ex__cap--1 { animation-name: nx-ex-f1; }
  .nx-root .nx-ex__cap--2 { animation-name: nx-ex-f2; }
  .nx-root .nx-ex__cap--3 { animation-name: nx-ex-f3; }
  .nx-root .nx-ex__f2 .nx-ex__bar, .nx-root .nx-ex__f3 .nx-ex__pop { transform-box: fill-box; transform-origin: left center; }
  .nx-root .nx-ex__f2 .nx-ex__bar--1 { animation: nx-ex-grow .5s 2.0s both; }
  .nx-root .nx-ex__f2 .nx-ex__bar--2 { animation: nx-ex-grow .5s 2.5s both; }
  .nx-root .nx-ex__f2 .nx-ex__bar--3 { animation: nx-ex-grow .5s 3.0s both; }
  .nx-root .nx-ex__f3 .nx-ex__pop { transform-origin: center; animation: nx-ex-pop .5s 3.8s both; }
  .nx-root .nx-ex__f2 .nx-ex__slide { animation: nx-ex-slide 1.1s 2.2s both; }
  .nx-root .nx-ex__f3 .nx-ex__bell--ring { transform-box: fill-box; transform-origin: 50% 10%; animation: nx-ex-ring .5s 3.9s 3; }
  .nx-root .nx-ex__f1 .nx-ex__ring { animation: nx-ex-fill 1.4s .2s both; }
  .nx-root .nx-ex__f2 .nx-ex__ring { animation: nx-ex-fill 1.4s 2.0s both; }
  .nx-root .nx-ex__f3 .nx-ex__ring { animation: nx-ex-fill 1.4s 3.8s both; }
}
@keyframes nx-ex-f1 { 0%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes nx-ex-f2 { 0%, 31% { opacity: 0; } 34%, 63% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes nx-ex-f3 { 0%, 64% { opacity: 0; } 67%, 100% { opacity: 1; } }
@keyframes nx-ex-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes nx-ex-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes nx-ex-slide { from { transform: translateX(0); } to { transform: translateX(20px); } }
@keyframes nx-ex-ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(12deg); } 75% { transform: rotate(-12deg); } }
@keyframes nx-ex-fill { from { stroke-dashoffset: var(--ex-c); } to { stroke-dashoffset: var(--ex-o); } }

/* the "?" help, the first visit card, the How it works drawer */
.nx-root .nx-tix-help { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--nx-link); cursor: pointer; border-radius: var(--nx-rfull); font: inherit; }
.nx-root .nx-tix-help > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--nx-rfull); border: 2px solid currentColor; font-weight: 800; font-size: 14px; line-height: 1; }
.nx-root .nx-tix-help[aria-expanded="true"] > span { background: var(--nx-blue-soft); }
.nx-root .nx-tix-help:focus-visible { outline: var(--nx-focus-ring); outline-offset: 0; }
.nx-root .nx-tix-helpbox { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2) var(--nx-s3); margin: 0; padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r1); background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-tix-helpbox > span { flex: 1 1 200px; min-width: 0; }
.nx-root .nx-tix-first { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2) var(--nx-s3); padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r2); border: 1px solid var(--nx-blue); background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-tix-first__ico .nx-gl { --gls: 22; }
.nx-root .nx-tix-first__t { flex: 1 1 200px; min-width: 0; }
.nx-root .nx-tix-how { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nx-s4); min-width: 0; }
.nx-root .nx-tix-howlist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-tix-howlist .nx-btn .nx-gl, .nx-root .nx-ex__replay .nx-gl { --gls: 16; }
.nx-root .nx-tix-idle { margin: 0; overflow-y: auto; }
.nx-root .nx-tix-idle__h { margin: 0 0 var(--nx-s3); font-size: var(--nx-fs-h3); }
.nx-root .nx-tix-onlist { display: none; padding: var(--nx-s3); }
.nx-root .nx-tix-onlist .nx-ex__grid { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 899px) { .nx-root .nx-tix-onlist { display: block; } }
.nx-root .nx-tix-idle .nx-ex__grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* ---------------------------------------------------------------- ticketing 1j screen: Admin > Tickets (nx-tickets-admin.jsx) */
.nx-root .nx-tixa { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nx-s4); min-width: 0; }
.nx-root .nx-tixa > * { min-width: 0; }
.nx-root .nx-tixa-lead, .nx-root .nx-tixa-scope { display: flex; align-items: flex-start; gap: var(--nx-s2); margin: 0; padding: var(--nx-s3); border-radius: var(--nx-r1); background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-tixa-lead .nx-gl, .nx-root .nx-tixa-scope .nx-gl, .nx-root .nx-tixa-fixed .nx-gl, .nx-root .nx-tixa-note .nx-gl, .nx-root .nx-tixa-problem .nx-gl { --gls: 16; margin-top: 3px; flex: none; }
.nx-root .nx-tixa-card { display: grid; gap: var(--nx-s3); padding: var(--nx-s4); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); box-shadow: var(--nx-shadow); }
.nx-root .nx-tixa-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s2); }
.nx-root .nx-tixa-head .nx-btn .nx-gl { --gls: 18; }
.nx-root .nx-tixa-h { margin: 0; font-size: var(--nx-fs-h3); }
.nx-root .nx-tixa-sub { margin: 0; color: var(--nx-muted); }
.nx-root .nx-tixa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.nx-root .nx-tixa-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s2) var(--nx-s4); padding: var(--nx-s3) 0; border-top: 1px solid var(--nx-line); min-width: 0; }
.nx-root .nx-tixa-list > .nx-tixa-row:first-child { border-top: 0; }
.nx-root .nx-tixa-row--plain { border-top: 0; padding: 0; }
.nx-root .nx-tixa-row.is-off .nx-tixa-row__main { opacity: .65; }
.nx-root .nx-tixa-row__main { display: grid; gap: 4px; flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-tixa-row__main > .nx-small { color: var(--nx-muted); }
.nx-root .nx-tixa-acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s3); }
.nx-root .nx-tixa-fixed { display: inline-flex; align-items: center; gap: 6px; color: var(--nx-muted); }
.nx-root .nx-tixa-pair { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--nx-s2); align-items: baseline; }
.nx-root .nx-tixa-min { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--nx-s2); }
.nx-root .nx-tixa-min .nx-small { color: var(--nx-muted); }
.nx-root .nx-tixa-days { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-tixa-days .nx-input { width: 88px; min-width: 0; min-height: 44px; flex: none; }
.nx-root .nx-tixa-unit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--nx-s2); }
.nx-root .nx-tixa-unit .nx-input, .nx-root .nx-tixa-unit .nx-select { width: 100%; min-width: 0; min-height: 44px; }
.nx-root .nx-tixa-note, .nx-root .nx-tixa-problem { display: flex; gap: var(--nx-s2); align-items: flex-start; margin: 0; padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r1); background: var(--nx-bg); border: 1px solid var(--nx-line); }
.nx-root .nx-tixa-problem { background: var(--nx-amber-soft); color: var(--nx-amber-text); border-color: transparent; font-weight: 600; }
.nx-root .nx-tixa-fixedline { margin: 0; font-size: var(--nx-fs-h3); }
.nx-root .nx-tixa-days7 { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-tixa-days7 legend { width: 100%; }
.nx-root .nx-tixa-day { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--nx-s3); border: 1px solid var(--nx-control-line); border-radius: var(--nx-rfull); cursor: pointer; background: var(--nx-surface); }
.nx-root .nx-tixa-day input { width: 20px; height: 20px; accent-color: var(--nx-blue); }
/* a switch: a track, a thumb and a word (On or Off), 44 px high */
.nx-root .nx-tixa-sw { display: inline-flex; align-items: center; gap: var(--nx-s2); min-height: 44px; min-width: 44px; padding: 0 var(--nx-s2); border: 0; background: transparent; color: var(--nx-text); font: inherit; font-weight: 700; cursor: pointer; border-radius: var(--nx-rfull); }
.nx-root .nx-tixa-sw__track { position: relative; width: 44px; height: 26px; border-radius: var(--nx-rfull); background: var(--nx-line); border: 2px solid var(--nx-control-line); flex: none; box-sizing: border-box; }
.nx-root .nx-tixa-sw__track i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--nx-surface); border: 2px solid var(--nx-muted); box-sizing: border-box; }
.nx-root .nx-tixa-sw.is-on .nx-tixa-sw__track { background: var(--nx-blue); border-color: var(--nx-blue); }
.nx-root .nx-tixa-sw.is-on .nx-tixa-sw__track i { left: 20px; border-color: var(--nx-blue); }
.nx-root .nx-tixa-sw__w { min-width: 2.2em; }
.nx-root .nx-tixa-sw[disabled] { opacity: .5; cursor: not-allowed; }
.nx-root .nx-tixa-sw:focus-visible { outline: var(--nx-focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-tixa-sw__track, .nx-root .nx-tixa-sw__track i { transition: left var(--nx-d1) var(--nx-curve), background var(--nx-d1); }
}
@media (max-width: 520px) {
  .nx-root .nx-tixa-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .nx-root .nx-tixa-card { padding: var(--nx-s3); }
}

/* ---------------------------------------------------------------- ticketing 2i: the Phase 2 screens (nx-tickets2.jsx, nx-tickets-inbox2.jsx, nx-tickets-admin2.jsx). Same rules as above: tokens only, 44 px targets, status never by colour alone. */
/* 7 Nov 2026: find a person for the New ticket form; the steps while the AI drafts a ticket from an email; the tick after Send. Every animation sits in the no-preference block: with reduced motion only the words and colours show. */
.nx-root .nx-hq__btn--new { border-color: var(--nx-blue); color: var(--nx-blue); }
.nx-root .nx-tix-lead { margin: 0; color: var(--nx-muted); }
.nx-root .nx-tix-pfind { display: grid; gap: var(--nx-s2); }
.nx-root .nx-tix-pres { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--nx-line); border-radius: var(--nx-r1); overflow: hidden; background: var(--nx-surface); }
.nx-root .nx-tix-pres li + li { border-top: 1px solid var(--nx-line); }
.nx-root .nx-tix-pres button { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s3); width: 100%; min-height: 44px; padding: 6px 12px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.nx-root .nx-tix-pres button:hover, .nx-root .nx-tix-pres button:focus-visible { background: var(--nx-hover); }
.nx-root .nx-tix-pres span { color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-tix-picked { display: flex; align-items: center; gap: var(--nx-s2); min-height: 44px; padding: 6px 12px; border: 1px solid var(--nx-blue); border-radius: var(--nx-r1); background: var(--nx-surface); }
.nx-root .nx-tix-picked > span { color: var(--nx-muted); font-size: var(--nx-fs-small); }
.nx-root .nx-tix-picked > button { margin-left: auto; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.nx-root .nx-tix-steps { list-style: none; margin: 0; padding: var(--nx-s4) 0; display: grid; gap: var(--nx-s3); }
.nx-root .nx-tix-step { display: flex; align-items: center; gap: var(--nx-s3); color: var(--nx-muted); }
.nx-root .nx-tix-step__dot { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--nx-line); }
.nx-root .nx-tix-step__dot svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-tix-step--now { color: inherit; font-weight: 700; }
.nx-root .nx-tix-step--now .nx-tix-step__dot { border-color: var(--nx-blue); color: var(--nx-blue); }
.nx-root .nx-tix-step--done { color: var(--nx-ok-text); }
.nx-root .nx-tix-step--done .nx-tix-step__dot { border-color: var(--nx-success); color: var(--nx-ok-text); background: var(--nx-ok-soft); }
.nx-root .nx-tix-tick { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--nx-ok-soft); color: var(--nx-ok-text); }
.nx-root .nx-tix-tick svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-tixm__made { display: grid; gap: var(--nx-s3); justify-items: center; text-align: center; padding: var(--nx-s5) 0; }
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-tix-step--now .nx-tix-step__dot { animation: nx-tix-pulse 1.4s ease-in-out infinite; }
  .nx-root .nx-tix-step--done .nx-tix-step__dot { animation: nx-tix-pop var(--nx-d3) var(--nx-curve) both; }
  .nx-root .nx-tix-tick svg path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: nx-tix-draw .5s ease-out .1s forwards; }
  .nx-root .nx-tix-tick { animation: nx-tix-pop var(--nx-d3) var(--nx-curve) both; }
}
@keyframes nx-tix-pop { from { transform: scale(.8); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes nx-tix-draw { to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------------- 8 Nov 2026: tags, a start date, a checklist, watchers, attachments, the activity tabs and Group by (nx-tickets3.jsx). Tokens only; nothing moves. */
.nx-root .nx-tix-chiplist, .nx-root .nx-tix-sect .nx-tix-chiplist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-tix-tagchip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 32px; padding: 2px 10px; border: 1px solid var(--nx-line); border-radius: var(--nx-rfull); background: var(--nx-blue-soft); color: var(--nx-blue-text); font-size: var(--nx-fs-small); font-weight: 600; overflow-wrap: anywhere; }
.nx-root .nx-tix-tagchip .nx-gl { --gls: 14; flex: none; }
.nx-root .nx-tix-tagchip button { display: grid; place-items: center; min-width: 44px; min-height: 44px; margin: -8px -10px -8px -2px; border: 0; border-radius: var(--nx-rfull); background: transparent; color: inherit; cursor: pointer; }
.nx-root .nx-tix-tagchip--sm { min-height: 0; padding: 0 8px; font-size: 12px; }
.nx-root .nx-tix-mchip { display: inline-flex; align-items: center; gap: 3px; color: var(--nx-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.nx-root .nx-tix-mchip .nx-gl { --gls: 13; }
.nx-root .nx-tix-row__l3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--nx-s2); min-width: 0; }
.nx-root .nx-tix-attach { display: grid; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-tix-drop { display: grid; gap: var(--nx-s2); padding: var(--nx-s3); border: 1px dashed var(--nx-control-line); border-radius: var(--nx-r1); background: var(--nx-bg); min-width: 0; }
.nx-root .nx-tix-drop.is-over { border-style: solid; border-color: var(--nx-blue); background: var(--nx-blue-soft); }
.nx-root .nx-tix-drop__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2) var(--nx-s3); }
.nx-root .nx-tix-drop__n { color: var(--nx-muted); font-weight: 600; }
.nx-root .nx-tix-drop__n:empty { display: none; }
.nx-root .nx-tix-flist, .nx-root .nx-tix-sect .nx-tix-flist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--nx-line); border-radius: var(--nx-r1); background: var(--nx-surface); min-width: 0; }
.nx-root .nx-tix-flist > li { display: flex; align-items: center; gap: var(--nx-s2); min-height: 44px; min-width: 0; padding: 2px var(--nx-s2) 2px var(--nx-s3); border-top: 1px solid var(--nx-line); }
.nx-root .nx-tix-flist > li:first-child { border-top: 0; }
.nx-root .nx-tix-flist > li > .nx-gl { --gls: 16; flex: none; color: var(--nx-muted); }
.nx-root .nx-tix-flist__n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-tix-flist--page > li { flex-wrap: wrap; padding: var(--nx-s2) var(--nx-s3); }
.nx-root .nx-tix-flist__main { flex: 1 1 200px; min-width: 0; display: grid; }
.nx-root .nx-tix-flist__main b { overflow-wrap: anywhere; }
.nx-root .nx-tix-flist__main .nx-small { color: var(--nx-muted); }
.nx-root .nx-tix-flist__acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-tix-drop .nx-btn, .nx-root .nx-tix-addrow .nx-btn, .nx-root .nx-tix-secthead .nx-btn, .nx-root .nx-tix-flist .nx-btn { min-height: 44px; }
.nx-root .nx-tix-drop .nx-btn .nx-gl, .nx-root .nx-tix-addrow .nx-btn .nx-gl, .nx-root .nx-tix-secthead .nx-btn .nx-gl, .nx-root .nx-tix-flist .nx-btn .nx-gl { --gls: 16; }
.nx-root .nx-tix-steplist, .nx-root .nx-tix-sect .nx-tix-steplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.nx-root .nx-tix-steplist > li { display: flex; align-items: center; gap: var(--nx-s2); min-height: 44px; padding: 2px var(--nx-s2) 2px var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-r1); background: var(--nx-surface); }
.nx-root .nx-tix-steplist > li > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-tix-addrow { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--nx-s2); }
.nx-root .nx-tix-addrow .nx-input { flex: 1 1 200px; min-width: 0; min-height: 44px; }
.nx-root .nx-tix-checklist > li { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s2); min-width: 0; border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-tix-check--step { flex: 1; min-width: 0; font-weight: 500; }
.nx-root .nx-tix-check__t { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-tix-checklist .is-done .nx-tix-check__s { text-decoration: line-through; color: var(--nx-muted); }
.nx-root .nx-tix-check__by { color: var(--nx-muted); }
.nx-root .nx-tix-n { color: var(--nx-muted); font-weight: 700; }
.nx-root .nx-tix-dh > .nx-btn { justify-self: start; }
.nx-root .nx-tix-tabs { display: flex; flex-wrap: wrap; gap: var(--nx-s2); margin: 0 0 var(--nx-s3); }
.nx-root .nx-tix-tab { min-height: 44px; padding: 0 var(--nx-s3); border: 1px solid var(--nx-control-line); border-radius: var(--nx-rfull); background: var(--nx-surface); color: var(--nx-text); font: inherit; font-weight: 600; cursor: pointer; }
.nx-root .nx-tix-tab[aria-pressed="true"] { border-color: var(--nx-blue); background: var(--nx-blue-soft); color: var(--nx-blue-text); box-shadow: 0 0 0 1px var(--nx-blue) inset; }
.nx-root .nx-tix-tab[aria-pressed="true"]::after { content: "\2713"; margin-left: 6px; font-weight: 800; }
.nx-root .nx-tix-groupby { display: inline-flex; align-items: center; gap: var(--nx-s2); margin-left: auto; }
.nx-root .nx-tix-groupby__l { color: var(--nx-muted); font-size: var(--nx-fs-small); font-weight: 600; white-space: nowrap; }
.nx-root .nx-tix-groupby .nx-select { min-height: 44px; min-width: 0; }
.nx-root .nx-tix-grp__h { display: flex; align-items: center; gap: var(--nx-s2); margin: 0; padding: var(--nx-s2) var(--nx-s4); border-bottom: 1px solid var(--nx-line); background: var(--nx-bg); color: var(--nx-muted); font-size: var(--nx-fs-small); letter-spacing: .02em; overflow-wrap: anywhere; }
.nx-root .nx-tix-tab:focus-visible, .nx-root .nx-tix-tagchip button:focus-visible { outline: var(--nx-focus-ring); outline-offset: 2px; }
@media (max-width: 520px) {
  .nx-root .nx-tix-groupby { margin-left: 0; width: 100%; }
  .nx-root .nx-tix-groupby .nx-select { flex: 1; }
  .nx-root .nx-tix-flist__acts { width: 100%; }
}

/* the Board (8 Nov 2026, nx-tickets-board.jsx): the loaded tickets as columns by status; with the Board on and no ticket open the list pane takes the room of the ticket pane. No motion. */
.nx-root .nx-tix-grid--board { grid-template-columns: 216px minmax(0, 1fr); }
.nx-root .nx-tix-grid--board > .nx-tix-pane { display: none; }
.nx-root .nx-tix-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: var(--nx-s3); align-items: start; padding: var(--nx-s3); overflow: auto; min-height: 0; }
.nx-root .nx-tix-bcol { background: var(--nx-bg); border: 1px solid var(--nx-line); border-radius: var(--nx-r1); min-height: 120px; display: grid; align-content: start; }
.nx-root .nx-tix-bcol.is-over { border-color: var(--nx-blue); box-shadow: 0 0 0 1px var(--nx-blue) inset; }
.nx-root .nx-tix-bcol__h { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s2); margin: 0; padding: var(--nx-s2) var(--nx-s3); font-size: var(--nx-fs-small); font-weight: 700; border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-tix-bcol__n { color: var(--nx-muted); font-weight: 600; }
.nx-root .nx-tix-bcol__list { list-style: none; margin: 0; padding: var(--nx-s2); display: grid; gap: var(--nx-s2); }
.nx-root .nx-tix-bcard { display: grid; gap: 4px; padding: var(--nx-s2) var(--nx-s3); background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r1); cursor: grab; }
.nx-root .nx-tix-bcard[draggable="false"] { cursor: default; }
.nx-root .nx-tix-bcard__l { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.nx-root .nx-tix-bcard__m { color: var(--nx-muted); }
.nx-root .nx-tix-bcard__mv { display: grid; gap: 2px; }
.nx-root .nx-tix-bcard__mv .nx-select { min-height: 36px; }
@media (max-width: 860px) { .nx-root .nx-tix-grid--board { display: block; } }
.nx-root .nx-tix-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2) var(--nx-s3); margin: 0; padding: var(--nx-s3); border-radius: var(--nx-r1); border: 1px solid var(--nx-line); }
.nx-root .nx-tix-banner .nx-gl { --gls: 18; flex: none; }
.nx-root .nx-tix-banner__t { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-tix-banner--merged { background: var(--nx-blue-soft); color: var(--nx-blue-text); border-color: var(--nx-blue); }
.nx-root .nx-tix-banner--blocked { background: var(--nx-amber-soft); color: var(--nx-amber-text); border: 1px dashed var(--nx-amber); }
.nx-root .nx-tix-banner a { color: inherit; font-weight: 700; }
.nx-root .nx-tix-away { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--nx-s2); padding: 1px 8px; border-radius: var(--nx-rfull); background: var(--nx-amber-soft); color: var(--nx-amber-text); font-size: var(--nx-fs-small); font-weight: 600; }
.nx-root .nx-tix-away .nx-gl { --gls: 14; }
.nx-root .nx-tix-sect { display: grid; gap: var(--nx-s2); min-width: 0; }
.nx-root .nx-tix-secthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s2); }
.nx-root .nx-tix-secthead .nx-tix-h { margin: 0; }
.nx-root .nx-tix-sect ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-tix-linkrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2) var(--nx-s3); padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r1); border: 1px solid var(--nx-line); background: var(--nx-bg); min-height: 52px; }
.nx-root .nx-tix-relw { font-size: var(--nx-fs-small); font-weight: 700; color: var(--nx-blue-text); background: var(--nx-blue-soft); border-radius: var(--nx-rfull); padding: 2px 10px; white-space: nowrap; }
.nx-root .nx-tix-linkt { flex: 1 1 180px; min-width: 0; color: var(--nx-text); text-decoration: none; overflow-wrap: anywhere; }
.nx-root .nx-tix-linkt:hover { text-decoration: underline; }
.nx-root .nx-tix-linkt:focus-visible, .nx-root .nx-tix-pick input:focus-visible, .nx-root .nx-tix-savedrow:focus-visible, .nx-root .nx-tix-know a:focus-visible, .nx-root .nx-tix-ment button:focus-visible { outline: var(--nx-focus-ring); outline-offset: 2px; }
.nx-root .nx-tix-linkrow .nx-pill { flex: none; }
.nx-root .nx-tix-sugrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2) var(--nx-s3); }
.nx-root .nx-tix-pickable { display: grid; gap: var(--nx-s2); margin: 0; padding: 0; list-style: none; max-height: 240px; overflow-y: auto; }
.nx-root .nx-tix-pickable button { display: flex; align-items: center; gap: var(--nx-s2); width: 100%; min-height: 44px; padding: var(--nx-s2) var(--nx-s3); border: 1px solid var(--nx-control-line); border-radius: var(--nx-r1); background: var(--nx-surface); color: var(--nx-text); font: inherit; text-align: left; cursor: pointer; }
.nx-root .nx-tix-pickable button[aria-pressed="true"] { border-color: var(--nx-blue); background: var(--nx-blue-soft); color: var(--nx-blue-text); box-shadow: 0 0 0 1px var(--nx-blue) inset; }
.nx-root .nx-tix-pickable button[aria-pressed="true"]::after { content: "\2713"; font-weight: 800; margin-left: auto; }
.nx-root .nx-tix-merge2 { display: grid; gap: var(--nx-s2); border: 0; margin: 0; padding: 0; min-width: 0; }
.nx-root .nx-tix-merge2 label { display: flex; align-items: center; gap: var(--nx-s2); min-height: 44px; font-weight: 600; cursor: pointer; }
.nx-root .nx-tix-merge2 input { width: 22px; height: 22px; accent-color: var(--nx-blue); flex: none; }
.nx-root .nx-tix-warnline { display: flex; gap: var(--nx-s2); align-items: flex-start; margin: 0; padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r1); background: var(--nx-amber-soft); color: var(--nx-amber-text); font-weight: 600; }
.nx-root .nx-tix-warnline .nx-gl { --gls: 16; margin-top: 3px; flex: none; }

/* approvals */
.nx-root .nx-tix-aprow { display: grid; gap: var(--nx-s2); padding: var(--nx-s3); border-radius: var(--nx-r1); border: 1px solid var(--nx-line); background: var(--nx-bg); }
.nx-root .nx-tix-aprow__h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2) var(--nx-s3); }
.nx-root .nx-tix-aprow p { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-tix-aprow--mine { border: 1px solid var(--nx-amber); background: var(--nx-amber-soft); }
.nx-root .nx-tix-only { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--nx-amber-text); }
.nx-root .nx-tix-only .nx-gl { --gls: 16; }
.nx-root .nx-tix-aprow__acts { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }

/* knowledge cards in the New ticket drawer */
.nx-root .nx-tix-know { display: grid; gap: var(--nx-s2); padding: var(--nx-s3); border-radius: var(--nx-r1); border: 1px solid var(--nx-ok-text); background: var(--nx-ok-soft); color: var(--nx-ok-text); }
.nx-root .nx-tix-know__h { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--nx-fs-body); }
.nx-root .nx-tix-know__h .nx-gl { --gls: 18; }
.nx-root .nx-tix-know ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-tix-know li { display: grid; gap: 4px; padding: var(--nx-s3); border-radius: var(--nx-r1); background: var(--nx-surface); color: var(--nx-text); border: 1px solid var(--nx-line); }
.nx-root .nx-tix-know li p { margin: 0; overflow-wrap: anywhere; }
.nx-root .nx-tix-know__k { font-size: var(--nx-fs-small); font-weight: 700; color: var(--nx-ok-text); }
.nx-root .nx-tix-know__q { color: var(--nx-muted); }
.nx-root .nx-tix-know__a { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2) var(--nx-s3); }
.nx-root .nx-tix-know__a > b { font-weight: 700; }
.nx-root .nx-tix-know a { color: var(--nx-link); font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.nx-root .nx-tix-reqmark { margin-left: 6px; padding: 0 8px; border-radius: var(--nx-rfull); border: 1px solid var(--nx-control-line); font-size: var(--nx-fs-small); font-weight: 700; color: var(--nx-bad-text); }
.nx-root .nx-tix-formgrid { display: grid; gap: var(--nx-s3); padding: var(--nx-s3); border-radius: var(--nx-r1); border: 1px solid var(--nx-line); background: var(--nx-bg); }
.nx-root .nx-tix-formgrid > legend { font-weight: 700; padding: 0 var(--nx-s2); }
.nx-root .nx-tix-fieldbad { color: var(--nx-bad-text); font-weight: 600; }

/* the inbox: saved views, the tools row, the filters, select mode, the bulk bar */
.nx-root .nx-tix-rail__h { margin: var(--nx-s3) var(--nx-s3) 0; font-size: var(--nx-fs-small); text-transform: uppercase; letter-spacing: .04em; color: var(--nx-muted); }
.nx-root .nx-tix-saved { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; }
.nx-root .nx-tix-saved .nx-tix-rail__list > li { min-width: 0; }
.nx-root .nx-tix-savedrow { display: flex; align-items: center; gap: 2px; border-radius: 10px; min-width: 0; }
.nx-root .nx-tix-savedrow .nx-tix-view { flex: 1; min-width: 0; }
.nx-root .nx-tix-savedrow .nx-tix-x { min-width: 44px; color: var(--nx-muted); }
.nx-root .nx-tix-team { color: var(--nx-muted); flex: none; display: inline-flex; }
.nx-root .nx-tix-team .nx-gl { --gls: 16; }
.nx-root .nx-tix-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: var(--nx-s2); border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-tix-tools .nx-btn { padding: 0 10px; gap: 6px; }
.nx-root .nx-tix-tools .nx-btn .nx-gl { --gls: 16; }
.nx-root .nx-tix-tools .nx-btn[aria-pressed="true"], .nx-root .nx-tix-tools .nx-btn[aria-expanded="true"] { background: var(--nx-blue-soft); color: var(--nx-blue-text); border-color: var(--nx-blue); }
.nx-root .nx-tix-nfilter { min-width: 22px; padding: 0 7px; border-radius: var(--nx-rfull); background: var(--nx-blue); color: var(--nx-on-blue); font-size: var(--nx-fs-small); font-weight: 700; text-align: center; }
.nx-root .nx-tix-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--nx-s3); padding: var(--nx-s3); border-bottom: 1px solid var(--nx-line); background: var(--nx-bg); }
.nx-root .nx-tix-filters__flags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--nx-s2) var(--nx-s4); }
.nx-root .nx-tix-filters__flags .nx-tix-check { min-height: 44px; }
.nx-root .nx-tix-filters__bad { grid-column: 1 / -1; margin: 0; }
.nx-root .nx-tix-li.is-pick { display: flex; align-items: stretch; }
.nx-root .nx-tix-li.is-pick .nx-tix-row { flex: 1; min-width: 0; }
.nx-root .nx-tix-pick { display: grid; place-items: center; min-width: 44px; flex: none; cursor: pointer; border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-tix-pick input { width: 22px; height: 22px; accent-color: var(--nx-blue); }
.nx-root .nx-tix-selall { display: flex; align-items: center; gap: var(--nx-s2); min-height: 44px; padding: 0 var(--nx-s3); border-bottom: 1px solid var(--nx-line); background: var(--nx-bg); font-weight: 600; }
.nx-root .nx-tix-selall input { width: 22px; height: 22px; accent-color: var(--nx-blue); }
.nx-root .nx-tix-selall .nx-small { color: var(--nx-muted); margin-left: auto; }
.nx-root .nx-tix-bulk { position: sticky; bottom: 0; z-index: 2; display: grid; gap: var(--nx-s2); padding: var(--nx-s3); background: var(--nx-surface); border-top: 2px solid var(--nx-blue); box-shadow: var(--nx-panel-shadow); margin-top: auto; }
.nx-root .nx-tix-bulk__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-tix-bulk__row .nx-btn .nx-gl { --gls: 16; }
.nx-root .nx-tix-bulk__row .nx-btn { padding: 0 10px; gap: 6px; }
.nx-root .nx-tix-bulk__head { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s2); }
.nx-root .nx-tix-bulk__row .nx-btn[aria-pressed="true"] { background: var(--nx-blue-soft); color: var(--nx-blue-text); border-color: var(--nx-blue); box-shadow: 0 0 0 1px var(--nx-blue) inset; }
.nx-root .nx-tix-bulk__row .nx-select, .nx-root .nx-tix-bulk__row .nx-input { min-height: 44px; flex: 1 1 160px; min-width: 0; }
.nx-root .nx-tix-bulk__n { font-weight: 700; }
.nx-root .nx-tix-bulk__res { display: grid; gap: var(--nx-s2); }
.nx-root .nx-tix-bulk__res summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--nx-link); }
.nx-root .nx-tix-bulk__res ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); max-height: 160px; overflow-y: auto; }
.nx-root .nx-tix-bulk__res li { padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r1); background: var(--nx-bad-soft); color: var(--nx-bad-text); overflow-wrap: anywhere; }
.nx-root .nx-tix-bulk__ok { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; }
.nx-root .nx-tix-bulk__ok .nx-gl { --gls: 18; }
.nx-root .nx-tix-loadmore { display: flex; justify-content: center; padding: var(--nx-s3); }
.nx-root .nx-tix-hintline { margin: 0; padding: var(--nx-s2) var(--nx-s3); color: var(--nx-muted); border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-tix-ment { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-tix-ment .nx-small { display: inline-flex; align-items: center; gap: 4px; color: var(--nx-muted); margin: 0; }
.nx-root .nx-tix-ment .nx-small .nx-gl { --gls: 14; }
.nx-root .nx-tix-ment button { min-height: 44px; padding: 0 var(--nx-s3); border: 1px solid var(--nx-control-line); border-radius: var(--nx-rfull); background: var(--nx-surface); color: var(--nx-text); font: inherit; font-weight: 600; cursor: pointer; }
.nx-root .nx-tix-awaybox { display: grid; gap: var(--nx-s3); padding: var(--nx-s3); border-radius: var(--nx-r1); border: 1px solid var(--nx-line); background: var(--nx-bg); }
.nx-root .nx-tix-awaybox h3 { margin: 0; font-size: var(--nx-fs-body); }
.nx-root .nx-tix-awaybox p { margin: 0; }
.nx-root .nx-tix-replyq { padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r1); background: var(--nx-bg); border: 1px solid var(--nx-line); color: var(--nx-muted); overflow-wrap: anywhere; }

/* admin sections */
.nx-root .nx-tixa-fed { display: grid; gap: var(--nx-s3); }
.nx-root .nx-tixa-q { display: grid; gap: var(--nx-s2); padding: var(--nx-s3); border-radius: var(--nx-r1); border: 1px solid var(--nx-line); background: var(--nx-bg); }
.nx-root .nx-tixa-q__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s2); }
.nx-root .nx-tixa-q__two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nx-s3); }
.nx-root .nx-tixa-q__ch { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--nx-s2); align-items: center; }
.nx-root .nx-tixa-q .nx-input, .nx-root .nx-tixa-q .nx-select { width: 100%; min-width: 0; min-height: 44px; }
.nx-root .nx-tixa-esc { display: grid; gap: var(--nx-s3); padding: var(--nx-s3); border-radius: var(--nx-r1); border: 1px solid var(--nx-line); background: var(--nx-bg); }
.nx-root .nx-tixa-esc__people { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-tixa-esc__people li { display: inline-flex; align-items: center; gap: 2px; padding: 0 0 0 var(--nx-s3); border-radius: var(--nx-rfull); border: 1px solid var(--nx-line); background: var(--nx-surface); }
.nx-root .nx-tixa-wd { display: grid; gap: var(--nx-s3); padding: var(--nx-s3) 0; border-top: 1px solid var(--nx-line); }
.nx-root .nx-tixa-wd:first-of-type { border-top: 0; }
.nx-root .nx-tixa-wd__two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nx-s3); }
.nx-root .nx-tixa-wd .nx-tix-ta { min-height: 64px; }
.nx-root .nx-tixa-prev { margin: 0; padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r1); background: var(--nx-bg); border: 1px dashed var(--nx-control-line); overflow-wrap: anywhere; }
.nx-root .nx-tixa-prev b { color: var(--nx-muted); font-size: var(--nx-fs-small); margin-right: 6px; }
.nx-root .nx-tixa-code { font-family: ui-monospace, Consolas, monospace; background: var(--nx-bg); border: 1px solid var(--nx-line); border-radius: 6px; padding: 0 6px; }
.nx-root .nx-tixa-warn { display: flex; gap: var(--nx-s2); align-items: flex-start; margin: 0; color: var(--nx-bad-text); font-weight: 600; }
.nx-root .nx-tixa-warn .nx-gl { --gls: 16; margin-top: 3px; flex: none; }
@media (max-width: 899px) {
  .nx-root .nx-tix-bulk { position: sticky; bottom: calc(var(--nx-bar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: 64px; }
  .nx-root .nx-tix-filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .nx-root .nx-tixa-q__two, .nx-root .nx-tixa-wd__two { grid-template-columns: 1fr; }
  .nx-root .nx-tixa-q__ch { grid-template-columns: 1fr auto; }
  .nx-root .nx-tixa-q__ch .nx-input:nth-child(2) { grid-column: 1; }
  .nx-root .nx-tix-filters { grid-template-columns: 1fr; }
}
@media (max-width: 1199px) {
  .nx-root .nx-tix-saved { display: flex; align-items: center; gap: var(--nx-s2); }
  .nx-root .nx-tix-saved .nx-tix-rail__h { display: none; }
  .nx-root .nx-tix-savedrow { flex: none; }
}
.nx-root .nx-tixa-esc > .nx-btn { justify-self: start; }

/* SKILLS (5 Nov 2026): the Skill card on Settings, Instructions, the picker (Use another skill, Start from a skill) and its 3D-style tiles. skill-ui.jsx draws it.
   Every rule is scoped to .nx-root and uses the theme tokens only (no raw colour in a rule; the tile gradients are in the picture itself). Motion only inside prefers-reduced-motion: no-preference. */
.nx-root .nx-sk__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--nx-s3); }
.nx-root .nx-sk__opt { display: grid; grid-template-columns: 40px 1fr; grid-template-areas: "i b" "i t"; gap: 2px var(--nx-s3); align-items: center; padding: var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); min-width: 0; }
.nx-root .nx-sk__opt > .nx-sk-ico { grid-area: i; }
.nx-root .nx-sk__opt > .nx-btn { grid-area: b; justify-self: start; }
.nx-root .nx-sk__opt > .nx-small { grid-area: t; color: var(--nx-muted); }
.nx-root .nx-sk-ico { width: 36px; height: 36px; flex: none; filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--nx-text) 22%, transparent)); }
.nx-root .nx-sk-file { display: grid; grid-template-columns: 36px 1fr; gap: var(--nx-s3); align-items: center; padding: var(--nx-s3); border: 1px dashed var(--nx-control-line); border-radius: var(--nx-r2); cursor: pointer; min-height: max(56px, var(--nx-tap)); }
.nx-root .nx-sk-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.nx-root .nx-sk-file:focus-within { outline: 2px solid var(--nx-blue); outline-offset: 2px; }
.nx-root .nx-sk-pick, .nx-root .nx-sk-prev { display: grid; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-sk-list, .nx-root .nx-sk-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-sk-row { display: grid; gap: 2px; width: 100%; min-height: max(48px, var(--nx-tap)); padding: var(--nx-s2) var(--nx-s3); text-align: left; border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); color: var(--nx-text); font: 600 15px var(--nx-font); cursor: pointer; }
.nx-root .nx-sk-row:hover { background: var(--nx-hover); }
.nx-root .nx-sk-row:focus-visible, .nx-root .nx-sk-modes label:focus-within { outline: 2px solid var(--nx-blue); outline-offset: 2px; }
.nx-root .nx-sk-row__job { overflow-wrap: anywhere; color: var(--nx-muted); }
.nx-root .nx-sk-src { margin: 0; font-size: 16px; }
.nx-root .nx-sk-part { display: grid; gap: var(--nx-s2); padding: var(--nx-s3); border: 1px solid var(--nx-line); border-left-width: 4px; border-radius: var(--nx-r2); background: var(--nx-surface); min-width: 0; }
.nx-root .nx-sk-part.is-held { border-left-color: var(--nx-amber); }
.nx-root .nx-sk-part__head { display: flex; flex-wrap: wrap; gap: var(--nx-s2); align-items: baseline; justify-content: space-between; }
.nx-root .nx-sk-held, .nx-root .nx-sk-warn { margin: 0; color: var(--nx-amber-text); overflow-wrap: anywhere; }
.nx-root .nx-sk-modes { display: inline-grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--nx-r2); background: var(--nx-hover); justify-self: start; max-width: 100%; }
.nx-root .nx-sk-modes label { display: grid; place-items: center; min-height: max(40px, var(--nx-tap)); padding: 0 var(--nx-s3); border-radius: 10px; cursor: pointer; font: 700 14px var(--nx-font); }
.nx-root .nx-sk-modes label.is-on { background: var(--nx-surface); box-shadow: 0 0 0 2px var(--nx-blue) inset; color: var(--nx-blue-text); }
.nx-root .nx-sk-modes input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.nx-root .nx-sk-modes input:disabled + span { color: var(--nx-muted); text-decoration: line-through; }
.nx-root .nx-sk-docs { display: grid; gap: var(--nx-s2); }
.nx-root .nx-sk-doc { display: flex; gap: var(--nx-s2); align-items: flex-start; min-height: var(--nx-tap); }
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-sk__opt .nx-sk-ico { transition: transform .18s ease; }
  .nx-root .nx-sk__opt:hover .nx-sk-ico { transform: translateY(-2px) rotate(-3deg); }
}

/* h352: the QwenWork card as meters (web/src/nx-qwenmeters.jsx). Every rule is scoped to .nx-root and uses the nx tokens only; no colour stands alone (a word or a number is always beside it). */
.nx-root .nx-qm { display: grid; gap: var(--nx-s4); min-width: 0; }
.nx-root .nx-qm-head { display: flex; flex-wrap: wrap; gap: var(--nx-s3); justify-content: space-between; align-items: flex-start; }
.nx-root .nx-qm-head > div:first-child { min-width: 0; }
.nx-root .nx-qm-head h3 { overflow-wrap: anywhere; margin: 0; }
.nx-root .nx-qm-head__acts { display: flex; flex-wrap: wrap; gap: var(--nx-s2); align-items: center; }
.nx-root .nx-qm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--nx-s3); }
.nx-root .nx-qm-card { display: grid; gap: var(--nx-s3); align-content: start; min-width: 0; padding: var(--nx-s4); background: var(--nx-surface); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); box-shadow: var(--nx-shadow); text-align: left; font: inherit; color: inherit; }
.nx-root .nx-qm-card--wide { grid-column: 1 / -1; }
.nx-root .nx-qm-card__h { display: flex; align-items: center; gap: var(--nx-s2); margin: 0; font-size: var(--nx-fs-body); font-weight: 700; color: var(--nx-text); }
.nx-root .nx-qm-card__h .nx-gl { width: 18px; height: 18px; color: var(--nx-blue-text); flex: none; }
.nx-root .nx-qm-card p { margin: 0; }
.nx-root .nx-qm-num { font-size: var(--nx-fs-body); color: var(--nx-muted); }
.nx-root .nx-qm-num b { font-size: var(--nx-fs-h2); line-height: 1.1; color: var(--nx-text); font-variant-numeric: tabular-nums; }
/* rings */
.nx-root .nx-qm-credits, .nx-root .nx-qm-today { display: flex; flex-wrap: wrap; gap: var(--nx-s4); align-items: center; }
.nx-root .nx-qm-credits__text, .nx-root .nx-qm-today__text { display: grid; gap: var(--nx-s2); min-width: 0; flex: 1 1 140px; justify-items: start; }
.nx-root .nx-qm-today__text { justify-items: stretch; }
.nx-root .nx-qm-ring { position: relative; width: 112px; height: 112px; flex: none; }
.nx-root .nx-qm-ring svg { width: 100%; height: 100%; display: block; }
.nx-root .nx-qm-ring__track { fill: none; stroke: var(--nx-hover); stroke-width: 10; }
.nx-root .nx-qm-ring__bar { fill: none; stroke: var(--nx-blue); stroke-width: 10; stroke-linecap: round; }
.nx-root .nx-qm-ring.is-ok .nx-qm-ring__bar { stroke: var(--nx-success); }
.nx-root .nx-qm-ring.is-warn .nx-qm-ring__bar { stroke: var(--nx-amber); }
.nx-root .nx-qm-ring.is-bad .nx-qm-ring__bar { stroke: var(--nx-danger); }
.nx-root .nx-qm-ring__floor { stroke: var(--nx-text); stroke-width: 2.5; stroke-linecap: round; }
.nx-root .nx-qm-ring__mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 0; }
.nx-root .nx-qm-ring__mid b { font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--nx-text); }
.nx-root .nx-qm-ring__mid span { font-size: var(--nx-fs-small); color: var(--nx-muted); }
/* today: one stacked bar */
.nx-root .nx-qm-stack { display: flex; width: 100%; height: 14px; border-radius: var(--nx-rfull); background: var(--nx-hover); border: 1px solid var(--nx-line); overflow: hidden; }
.nx-root .nx-qm-stack i, .nx-root .nx-qm-key i { display: block; height: 100%; }
.nx-root .nx-qm-stack .is-ok, .nx-root .nx-qm-key .is-ok, .nx-root .nx-qm-week__bar .is-ok { background: var(--nx-success); }
.nx-root .nx-qm-stack .is-bad, .nx-root .nx-qm-key .is-bad, .nx-root .nx-qm-week__bar .is-bad { background: var(--nx-danger); }
.nx-root .nx-qm-stack .is-run, .nx-root .nx-qm-key .is-run { background: var(--nx-blue); }
.nx-root .nx-qm-stack .is-gray, .nx-root .nx-qm-week__bar .is-gray { background: var(--nx-muted); }
.nx-root .nx-qm-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--nx-s2) var(--nx-s4); font-size: var(--nx-fs-small); color: var(--nx-muted); align-items: center; }
.nx-root .nx-qm-key li { display: inline-flex; gap: 6px; align-items: center; }
.nx-root .nx-qm-key li i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.nx-root .nx-qm-key b { color: var(--nx-text); font-variant-numeric: tabular-nums; }
/* speed */
.nx-root .nx-qm-speed { display: grid; gap: var(--nx-s2); }
.nx-root .nx-qm-speed__row { display: grid; grid-template-columns: minmax(84px, 112px) 1fr auto; gap: var(--nx-s2); align-items: center; font-size: var(--nx-fs-small); }
.nx-root .nx-qm-speed__row b { font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
.nx-root .nx-qm-speed__track { height: 12px; border-radius: var(--nx-rfull); background: var(--nx-hover); border: 1px solid var(--nx-line); overflow: hidden; }
.nx-root .nx-qm-speed__track i { display: block; height: 100%; border-radius: var(--nx-rfull); }
.nx-root .nx-qm-speed__track .is-ok { background: var(--nx-success); }
.nx-root .nx-qm-speed__track .is-blue { background: var(--nx-blue); }
.nx-root .nx-qm-speed__track .is-warn { background: var(--nx-amber); }
.nx-root .nx-qm-speed__scale { display: flex; justify-content: space-between; margin-left: calc(min(112px, 30%) + var(--nx-s2)); font-size: 11px; color: var(--nx-muted); padding-right: 5ch; }
/* seven days */
.nx-root .nx-qm-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--nx-s2); align-items: end; height: 130px; }
.nx-root .nx-qm-week__col { display: grid; grid-template-rows: 16px 1fr 16px; gap: 2px; height: 100%; text-align: center; font-size: 11px; color: var(--nx-muted); min-width: 0; }
.nx-root .nx-qm-week__col b { color: var(--nx-text); font-variant-numeric: tabular-nums; align-self: end; }
.nx-root .nx-qm-week__bar { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; max-width: 28px; margin: 0 auto; border-radius: 6px 6px 3px 3px; background: var(--nx-hover); overflow: hidden; min-height: 3px; }
.nx-root .nx-qm-week__bar i { display: block; width: 100%; }
/* chips */
.nx-root .nx-qm-chips { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .nx-qm-chip { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: var(--nx-rfull); background: var(--nx-hover); border: 1px solid var(--nx-line); font-size: var(--nx-fs-small); color: var(--nx-text); overflow-wrap: anywhere; }
.nx-root .nx-qm-chip b { font-variant-numeric: tabular-nums; }
.nx-root .nx-qm-chip.is-bad { background: var(--nx-amber-soft); border-color: var(--nx-amber); }
/* the agents tile */
.nx-root .nx-qm-tile { cursor: pointer; justify-items: start; align-content: center; gap: 2px; min-height: 148px; transition: border-color var(--nx-d1), box-shadow var(--nx-d1); }
.nx-root .nx-qm-tile:hover:not(:disabled) { border-color: var(--nx-blue); box-shadow: var(--nx-lift); }
.nx-root .nx-qm-tile:disabled { cursor: default; opacity: .7; }
.nx-root .nx-qm-tile .nx-gl { width: 26px; height: 26px; color: var(--nx-blue-text); margin-bottom: var(--nx-s2); }
.nx-root .nx-qm-tile > b { font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--nx-text); }
.nx-root .nx-qm-tile > span:not(.nx-small) { font-weight: 700; }
/* technical details */
.nx-root .nx-qm-tech { border: 1px solid var(--nx-line); border-radius: var(--nx-r2); padding: var(--nx-s3) var(--nx-s4); background: var(--nx-surface); }
.nx-root .nx-qm-tech > summary { cursor: pointer; font-weight: 700; min-height: var(--nx-tap); display: flex; align-items: center; }
.nx-root .nx-qm-tech[open] > summary { margin-bottom: var(--nx-s3); }
.nx-root .nx-qm-cd { margin: var(--nx-s3) 0; }
/* the agents list in the sheet */
.nx-root .nx-qm-agents { display: grid; gap: var(--nx-s3); }
.nx-root .nx-qm-agents__bar { display: flex; flex-wrap: wrap; gap: var(--nx-s3); align-items: center; }
.nx-root .nx-qm-agents__bar .nx-input { flex: 1 1 220px; min-width: 0; }
.nx-root .nx-qm-agents__list { list-style: none; margin: 0; padding: 0; display: grid; }
.nx-root .nx-qm-agents__head, .nx-root .nx-qm-agents__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(70px, .7fr) minmax(90px, .9fr) minmax(0, 1.6fr); gap: var(--nx-s3); align-items: center; padding: var(--nx-s3) var(--nx-s2); border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-qm-agents__head { font-size: var(--nx-fs-small); font-weight: 700; color: var(--nx-muted); }
.nx-root .nx-qm-agents__who { display: grid; min-width: 0; }
.nx-root .nx-qm-agents__who b { overflow-wrap: anywhere; }
.nx-root .nx-qm-agents__n b { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .nx-root .nx-qm-agents__bar .nx-input { flex-basis: 100%; }
  .nx-root .nx-qm-agents__head { display: none; }
  .nx-root .nx-qm-agents__row { grid-template-columns: 1fr auto; }
  .nx-root .nx-qm-agents__row > :nth-child(3), .nx-root .nx-qm-agents__row > :nth-child(4) { grid-column: 1 / -1; }
}
/* the search and the chips of "See everything it could use" stay in view under the top bar while the long list scrolls (builder.jsx use-find; the base rule is in styles.css) */
.nx-root .use-find { top: 76px; background: var(--nx-surface); }
@media (max-width: 860px) { .nx-root .use-find { top: 64px; } }
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-qm-ring__bar { transition: stroke-dashoffset .5s ease; }
}
.nx-root .nx-qm-acc { grid-column: 1 / -1; }
/* WHAT CAN IT USE (5 Nov 2026, Sheraz: "far too complicated, even I find it hard"; decision: backbone-review/can-it-use-2026-11-05/07-decision.md). Step 3 of the agent editor, the New look only:
   tiles from the job with ONE control each, the three second picture, two folds, and the preview as a sentence and a small picture. use-tiles.jsx draws it; builder.jsx UsePicker decides what is in it.
   Every rule is scoped to .nx-root and uses the theme tokens only (no raw colour); motion only inside prefers-reduced-motion: no-preference, transform and opacity only. */

.nx-root .use-simple { display: grid; gap: var(--nx-s3); }
.nx-root .use-simple__help { margin: 0; color: var(--nx-muted); font-size: 15.5px; }
.nx-root .ut-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 4px; border: 0; background: none; color: var(--nx-blue-text); font: 700 14px var(--nx-font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nx-root .ut-link:focus-visible, .nx-root .ut-btn:focus-visible, .nx-root .uf-head:focus-visible, .nx-root .ut-more:focus-visible, .nx-root .use-zone__btn:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; }

/* ---- the job in the person's own words */
.nx-root .uj { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--nx-s2) var(--nx-s3); padding: var(--nx-s3) var(--nx-s4); border-radius: var(--nx-r2); background: var(--nx-hover); }
.nx-root .uj-label { flex: none; font: 700 12px var(--nx-font); letter-spacing: .05em; text-transform: uppercase; color: var(--nx-muted); }
.nx-root .uj-text { flex: 1 1 220px; min-width: 0; font-weight: 600; color: var(--nx-text); quotes: none; overflow-wrap: anywhere; }
.nx-root .uj-btns { display: inline-flex; flex-wrap: wrap; gap: var(--nx-s3); }

/* ---- the three second picture: agent, shared folder, what it can then read (still and complete when motion is not allowed) */
.nx-root .uflow { display: grid; gap: var(--nx-s2); padding: var(--nx-s3) var(--nx-s4); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); }
.nx-root .uflow-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nx-s2); }
.nx-root .uflow-btns { display: inline-flex; gap: var(--nx-s3); }
.nx-root .uflow-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--nx-s3) var(--nx-s5); align-items: center; }
.nx-root .uflow-art { width: 100%; max-width: 400px; height: auto; justify-self: center; }
.nx-root .uflow-art .uf-agent circle:first-child, .nx-root .up-agent circle:first-child { fill: var(--nx-blue-soft); stroke: var(--nx-blue); stroke-width: 2.4; }
.nx-root .uf-dot { fill: var(--nx-blue-text); }
.nx-root .uf-smile { fill: none; stroke: var(--nx-blue-text); stroke-width: 2.4; stroke-linecap: round; }
.nx-root .uf-line, .nx-root .uf-head1, .nx-root .uf-head2 { fill: none; stroke: var(--nx-blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .uf-folder path { fill: var(--nx-amber-soft); stroke: var(--nx-amber-text); stroke-width: 2.4; stroke-linejoin: round; }
.nx-root .uf-eye path { fill: var(--nx-ok-soft); stroke: var(--nx-ok-text); stroke-width: 2.4; stroke-linejoin: round; }
.nx-root .uf-eye circle { fill: var(--nx-ok-text); }
.nx-root .uflow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s3); font-size: 14.5px; color: var(--nx-text); }
.nx-root .uflow-steps li { display: grid; grid-template-columns: 24px 1fr; align-items: start; gap: var(--nx-s2); }
.nx-root .uflow-steps span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--nx-blue); color: var(--nx-on-blue); font: 800 13px var(--nx-font); }

/* ---- the tiles */
.nx-root .use-tiles { display: grid; gap: var(--nx-s3); }
.nx-root .use-tiles__h { margin: 0; font: 800 17px var(--nx-font); color: var(--nx-text); display: flex; align-items: center; gap: var(--nx-s2); }
.nx-root .ut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--nx-s3); align-items: stretch; }
.nx-root .ut { display: flex; flex-direction: column; gap: var(--nx-s2); min-width: 0; padding: var(--nx-s3) var(--nx-s4); border: 1px solid var(--nx-line); border-left-width: 4px; border-radius: var(--nx-r2); background: var(--nx-surface); }
.nx-root .ut--ready { border-left-color: var(--nx-ok-text); }
.nx-root .ut--ask, .nx-root .ut--waiting { border-left-color: var(--nx-amber-text); }
.nx-root .ut--off { border-left-color: var(--nx-control-line); border-style: dashed; border-left-style: solid; }
.nx-root .ut--clash { border-left-color: var(--nx-bad-text); }
.nx-root .ut--included { border-left-color: var(--nx-blue); }
.nx-root .ut.is-on { background: var(--nx-ok-soft); }
.nx-root .ut-top { display: flex; align-items: flex-start; gap: var(--nx-s3); min-width: 0; }
.nx-root .ut-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.nx-root .ut-name { font: 750 16px/1.3 var(--nx-font); color: var(--nx-text); overflow-wrap: anywhere; }
.nx-root .ut-what { color: var(--nx-muted); font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.nx-root .ut-st { flex: none; font-size: 18px; color: var(--nx-muted); }
.nx-root .ut-st--ready { color: var(--nx-ok-text); } .nx-root .ut-st--ask, .nx-root .ut-st--waiting { color: var(--nx-amber-text); } .nx-root .ut-st--clash { color: var(--nx-bad-text); }
.nx-root .ut-tags { display: flex; flex-wrap: wrap; gap: var(--nx-s1) var(--nx-s2); }
.nx-root .ut-verb, .nx-root .ut-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 10px; border-radius: var(--nx-rfull); font: 700 13px var(--nx-font); white-space: nowrap; }
.nx-root .ut-verb--look { background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .ut-verb--change, .nx-root .ut-verb--send { background: var(--nx-ok-soft); color: var(--nx-ok-text); }
.nx-root .ut-chip--person { background: var(--nx-amber-soft); color: var(--nx-amber-text); }
.nx-root .ut-chip--conf { background: var(--nx-bad-soft); color: var(--nx-bad-text); }
.nx-root .ut-chip--pick { background: var(--nx-hover); color: var(--nx-muted); }
.nx-root .ut-why { color: var(--nx-muted); font-size: 13.5px; line-height: 1.4; }
.nx-root .ut-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2) var(--nx-s3); margin-top: auto; padding-top: var(--nx-s1); }
.nx-root .ut-line { color: var(--nx-muted); font-size: 13.5px; line-height: 1.4; flex: 1 1 180px; }
.nx-root .ut-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: max(44px, var(--nx-tap)); padding: 0 var(--nx-s4); border: 1px solid var(--nx-control-line); border-radius: 10px; background: var(--nx-surface); color: var(--nx-text); font: 700 14.5px var(--nx-font); text-decoration: none; cursor: pointer; }
.nx-root .ut-btn--go { background: var(--nx-blue); border-color: var(--nx-blue); color: var(--nx-on-blue); }
.nx-root .ut-btn.is-on { background: var(--nx-ok-soft); border-color: var(--nx-ok-text); color: var(--nx-ok-text); }
.nx-root .ut-btn--still { cursor: default; border-style: dashed; background: none; color: var(--nx-muted); }
.nx-root .ut-btn:disabled { opacity: .65; cursor: not-allowed; }
.nx-root .ut-wait { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); }
.nx-root .ut-empty { display: grid; gap: var(--nx-s1); padding: var(--nx-s3) var(--nx-s4); border: 1px dashed var(--nx-control-line); border-radius: var(--nx-r2); color: var(--nx-muted); }
.nx-root .ut-empty b { color: var(--nx-text); }
.nx-root .ut-more { justify-self: start; min-height: 40px; padding: 0 var(--nx-s3); border: 1px dashed var(--nx-control-line); border-radius: 10px; background: none; color: var(--nx-blue-text); font: 700 14px var(--nx-font); cursor: pointer; }
.nx-root .ut-notlisted { margin: 0; color: var(--nx-muted); font-size: 14px; }
.nx-root .ut-notlisted a { color: var(--nx-blue-text); font-weight: 700; }
.nx-root .use-onemore { display: grid; gap: var(--nx-s2); padding: var(--nx-s3) var(--nx-s4); border: 1px solid var(--nx-amber-text); border-radius: var(--nx-r2); background: var(--nx-amber-soft); }
.nx-root .use-onemore .send-rule { margin: 0; }

/* ---- the folds: closed until opened */
.nx-root .uf-fold { border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); }
.nx-root .uf-head { display: flex; align-items: center; gap: var(--nx-s2); width: 100%; min-height: 52px; padding: 0 var(--nx-s4); border: 0; background: none; color: var(--nx-text); font: 700 15.5px var(--nx-font); text-align: left; cursor: pointer; }
.nx-root .uf-n { display: inline-grid; place-items: center; min-height: 22px; padding: 0 9px; border-radius: var(--nx-rfull); background: var(--nx-blue-soft); color: var(--nx-blue-text); font: 700 12.5px var(--nx-font); }
.nx-root .uf-hint { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nx-muted); font: 500 13.5px var(--nx-font); }
.nx-root .uf-body { display: grid; gap: var(--nx-s3); padding: var(--nx-s3) var(--nx-s4) var(--nx-s4); border-top: 1px solid var(--nx-line); }
@media (max-width: 560px) { .nx-root .uf-hint { display: none; } }
.nx-root .uf-body .ut { padding: var(--nx-s2) var(--nx-s3); }
.nx-root .uf-body .ut-what { -webkit-line-clamp: 1; line-clamp: 1; }
.nx-root .use-zone { display: grid; gap: var(--nx-s2); }
.nx-root .use-zone__h { display: flex; align-items: center; gap: var(--nx-s2); margin: 0; font: 750 15px var(--nx-font); color: var(--nx-text); }
.nx-root .use-zone__btn { min-height: 44px; padding: 0 var(--nx-s2); border: 0; background: none; text-align: left; cursor: pointer; }
.nx-root .use-simple .use-grp__body { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--nx-s2); }
.nx-root .ut-grid--list { gap: var(--nx-s2); }

/* ---- the preview: a sentence, a small picture, then the permission card */
.nx-root .upv { display: grid; gap: var(--nx-s3); padding: var(--nx-s4); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); }
.nx-root .upv-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--nx-s2); }
.nx-root .upv-top span { color: var(--nx-muted); font-size: 13px; }
.nx-root .upv-say { margin: 0; color: var(--nx-text); font-size: 15.5px; line-height: 1.5; }
.nx-root .up { display: flex; align-items: center; gap: var(--nx-s4); padding: var(--nx-s3); border-radius: var(--nx-r2); background: var(--nx-hover); }
.nx-root .up-agent { flex: none; width: 64px; height: 64px; }
.nx-root .up-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s2); flex: 1; min-width: 0; }
.nx-root .up-row { display: flex; align-items: center; gap: var(--nx-s2); min-width: 0; color: var(--nx-muted); opacity: .6; font-size: 14px; }
.nx-root .up-row.is-on { opacity: 1; color: var(--nx-text); }
.nx-root .up-arrow { position: relative; flex: none; width: 30px; height: 0; border-top: 2px dashed var(--nx-control-line); transform-origin: left center; }
.nx-root .up-row.is-on .up-arrow { border-top: 2px solid var(--nx-blue); }
.nx-root .up-row.is-on .up-arrow::after { content: ''; position: absolute; right: -1px; top: -6px; width: 8px; height: 8px; border-top: 2px solid var(--nx-blue); border-right: 2px solid var(--nx-blue); transform: rotate(45deg); }
.nx-root .up-ic { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--nx-surface); font-size: 15px; }
.nx-root .up-row--look.is-on .up-ic { color: var(--nx-blue-text); background: var(--nx-blue-soft); }
.nx-root .up-row--change.is-on .up-ic { color: var(--nx-ok-text); background: var(--nx-ok-soft); }
.nx-root .up-row--wait.is-on .up-ic { color: var(--nx-amber-text); background: var(--nx-amber-soft); }
.nx-root .up-t b { font-weight: 750; }
.nx-root .upv-wait { display: flex; gap: var(--nx-s2); padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r1); background: var(--nx-amber-soft); color: var(--nx-amber-text); font-size: 14px; }
.nx-root .upv-never { display: flex; gap: var(--nx-s2); align-items: center; color: var(--nx-muted); font-size: 13.5px; }

/* ---- a phone (where the shell shows its bottom bar): the counts stay in sight above it, one press goes to the preview */
.nx-root .ubar { display: none; }
@media (max-width: 860px) {
  .nx-root .ubar { position: fixed; left: 0; right: 0; bottom: calc(var(--nx-bar-h) + env(safe-area-inset-bottom, 0px)); z-index: 850; display: flex; align-items: center; gap: var(--nx-s2); padding: var(--nx-s2) 80px var(--nx-s2) 72px; border-top: 1px solid var(--nx-line); background: var(--nx-surface); box-shadow: 0 -8px 20px -14px color-mix(in srgb, var(--nx-text) 55%, transparent); }
  .nx-root .ubar-n { display: inline-flex; align-items: center; gap: 4px; font: 750 14px var(--nx-font); color: var(--nx-text); }
  .nx-root .ubar-n--wait { color: var(--nx-amber-text); }
  .nx-root .ubar .ut-btn { margin-left: auto; min-height: 40px; padding: 0 var(--nx-s3); }
  .nx-root .upv { margin-bottom: 64px; }
  .nx-root .up { gap: var(--nx-s3); }
}

@media (prefers-reduced-motion: no-preference) {
  .nx-root .uflow-art .uf-agent { transform-box: fill-box; transform-origin: center; animation: nx-uf-pop .5s var(--nx-curve) both; }
  .nx-root .uflow-art .uf-line--1 { stroke-dasharray: 66; animation: nx-uf-draw .6s .6s ease-out both; }
  .nx-root .uflow-art .uf-head1 { animation: nx-uf-fade .2s 1.15s both; }
  .nx-root .uflow-art .uf-folder { transform-box: fill-box; transform-origin: center; animation: nx-uf-pop .45s 1.3s var(--nx-curve) both; }
  .nx-root .uflow-art .uf-line--2 { stroke-dasharray: 58; animation: nx-uf-draw .6s 1.8s ease-out both; }
  .nx-root .uflow-art .uf-head2 { animation: nx-uf-fade .2s 2.35s both; }
  .nx-root .uflow-art .uf-eye { transform-box: fill-box; transform-origin: center; animation: nx-uf-pop .5s 2.45s var(--nx-curve) both; }
  .nx-root .up-row.is-on .up-arrow { animation: nx-up-arrow var(--nx-d2) var(--nx-curve); }
}
@keyframes nx-uf-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes nx-uf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nx-uf-draw { from { stroke-dashoffset: 66; opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes nx-up-arrow { from { transform: scaleX(0); } to { transform: none; } }

/* WHEN THIS AGENT FINISHES (5 Nov 2026, Sheraz: "no one can understand what is going on here"; decision: backbone-review/agent-reports-2026-11-05/07-decision.md). The New look's card of how an agent tells its person:
   what the usual way IS, three lanes with the example of the real message, the content choice under each lane, the file question, the rare extras folded. report-card.jsx draws it.
   Every rule is scoped to .nx-root and uses the theme tokens only (no raw colour); motion only inside prefers-reduced-motion: no-preference, opacity and transform only. */

.nx-root .rc { display: grid; gap: var(--nx-s3); padding: var(--nx-s4); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); min-width: 0; }
.nx-root .rc-head { display: grid; gap: 2px; }
.nx-root .rc-kicker { font: 700 12.5px var(--nx-font); letter-spacing: .04em; color: var(--nx-muted); }
.nx-root .rc-q { margin: 0; font: 800 18px/1.3 var(--nx-font); color: var(--nx-text); }
.nx-root .rc-for { margin: 0; color: var(--nx-muted); font-size: 14px; }
.nx-root .rc-seg { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--nx-r2); background: var(--nx-hover); justify-self: start; max-width: 100%; }
.nx-root .rc-seg button { min-height: max(44px, var(--nx-tap)); padding: 0 var(--nx-s4); border: 0; border-radius: 10px; background: transparent; color: var(--nx-text); font: 700 14.5px var(--nx-font); cursor: pointer; }
.nx-root .rc-seg button.is-on { background: var(--nx-surface); box-shadow: 0 0 0 2px var(--nx-blue) inset; color: var(--nx-blue-text); }
.nx-root .rc-note { margin: 0; color: var(--nx-text); font-size: 15px; line-height: 1.5; }
.nx-root .rc-note--soft { color: var(--nx-muted); font-size: 14px; }
.nx-root .rc-link { display: inline; min-height: 0; padding: 0; border: 0; background: none; color: var(--nx-blue-text); font: 700 14.5px var(--nx-font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nx-root .rc-seg button:focus-visible, .nx-root .rc-link:focus-visible, .nx-root .rc-switch:focus-visible, .nx-root .rc-opt:focus-visible, .nx-root .rc-ft:focus-visible, .nx-root .rc-morebtn:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; }

/* ---- the lanes */
.nx-root .rc-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: var(--nx-s3); align-items: start; }
.nx-root .rc-lane { display: grid; gap: var(--nx-s2); min-width: 0; padding: var(--nx-s3); border: 1px solid var(--nx-line); border-left-width: 4px; border-radius: var(--nx-r2); background: var(--nx-surface); }
.nx-root .rc-lane.is-on { border-left-color: var(--nx-ok-text); }
.nx-root .rc-lane.is-off { border-left-color: var(--nx-control-line); }
.nx-root .rc-lane.is-na { border-style: dashed; border-left-style: solid; }
.nx-root .rc-lane__head { display: flex; align-items: center; gap: var(--nx-s3); min-width: 0; }
.nx-root .rc-ic { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--nx-hover); color: var(--nx-muted); font-size: 18px; }
.nx-root .rc-lane.is-on .rc-ic { background: var(--nx-ok-soft); color: var(--nx-ok-text); }
.nx-root .rc-lane__name { display: grid; gap: 1px; flex: 1; min-width: 0; }
.nx-root .rc-lane__name b { font: 750 15.5px var(--nx-font); color: var(--nx-text); overflow-wrap: anywhere; }
.nx-root .rc-lane__state { font: 700 13px var(--nx-font); color: var(--nx-muted); }
.nx-root .rc-lane.is-on .rc-lane__state { color: var(--nx-ok-text); }
.nx-root .rc-lane__why { margin: 0; color: var(--nx-muted); font-size: 13.5px; line-height: 1.4; }
.nx-root .rc-switch { flex: none; position: relative; width: 52px; height: 32px; padding: 0; border: 1px solid var(--nx-control-line); border-radius: var(--nx-rfull); background: var(--nx-hover); cursor: pointer; }
.nx-root .rc-switch span { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--nx-surface); box-shadow: 0 1px 3px color-mix(in srgb, var(--nx-text) 40%, transparent); transition: transform var(--nx-d1); }
.nx-root .rc-switch.is-on { background: var(--nx-ok-text); border-color: var(--nx-ok-text); }
.nx-root .rc-switch.is-on span { transform: translateX(20px); }

/* ---- what should it send? (per lane) */
.nx-root .rc-content { display: grid; gap: var(--nx-s2); }
.nx-root .rc-opt { display: grid; grid-template-columns: 48px 1fr; grid-template-areas: "p t" "p s"; gap: 0 var(--nx-s3); align-items: center; min-height: max(56px, var(--nx-tap)); padding: var(--nx-s2) var(--nx-s3); border: 1px solid var(--nx-control-line); border-radius: 10px; background: var(--nx-surface); color: var(--nx-text); text-align: left; cursor: pointer; }
.nx-root .rc-opt span { grid-area: t; font: 700 14.5px var(--nx-font); }
.nx-root .rc-opt small { grid-area: s; color: var(--nx-muted); font: 500 13px/1.35 var(--nx-font); }
.nx-root .rc-opt .rc-picto { grid-area: p; }
.nx-root .rc-opt.is-on { border-color: var(--nx-blue); background: var(--nx-blue-soft); box-shadow: 0 0 0 1px var(--nx-blue) inset; }
.nx-root .rc-picto { width: 48px; height: 32px; }
.nx-root .rc-picto__box { fill: var(--nx-surface); stroke: var(--nx-control-line); stroke-width: 1.5; }
.nx-root .rc-picto__line { fill: var(--nx-muted); opacity: .55; }
.nx-root .rc-picto__link { fill: var(--nx-blue); }
.nx-root .rc-picto__clip { fill: none; stroke: var(--nx-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the example of the real message */
.nx-root .rc-mini { display: grid; gap: 6px; padding: var(--nx-s3); border: 1px solid var(--nx-line); border-radius: 12px; background: var(--nx-bg); font-size: 14px; color: var(--nx-text); min-width: 0; }
.nx-root .rc-mini__bar { display: flex; align-items: center; gap: 6px; color: var(--nx-muted); font: 700 12.5px var(--nx-font); }
.nx-root .rc-mini b { font: 750 14.5px/1.35 var(--nx-font); overflow-wrap: anywhere; }
.nx-root .rc-mini__line { color: var(--nx-muted); font-size: 13.5px; line-height: 1.4; }
.nx-root .rc-mini__btn { justify-self: start; padding: 4px 12px; border-radius: var(--nx-rfull); background: var(--nx-blue); color: var(--nx-on-blue); font: 700 13px var(--nx-font); }
.nx-root .rc-mini__meta { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--nx-s2); margin: 0; font-size: 13px; }
.nx-root .rc-mini__meta dt { color: var(--nx-muted); }
.nx-root .rc-mini__meta dd { margin: 0; overflow-wrap: anywhere; }
.nx-root .rc-mini__file { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 3px 10px; border-radius: var(--nx-rfull); background: var(--nx-blue-soft); color: var(--nx-blue-text); font: 700 13px var(--nx-font); }
.nx-root .rc-mini--bell { border-left: 4px solid var(--nx-blue); }
.nx-root .rc-eg { margin: 0; color: var(--nx-muted); font-size: 13.5px; }

/* ---- the file question */
.nx-root .rc-files { display: grid; gap: var(--nx-s2); padding-top: var(--nx-s3); border-top: 1px solid var(--nx-line); }
.nx-root .rc-files h5 { margin: 0; font: 800 15.5px var(--nx-font); color: var(--nx-text); }
.nx-root .rc-files p { margin: 0; color: var(--nx-text); font-size: 14.5px; }
.nx-root .rc-ftypes { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: var(--nx-s2); }
.nx-root .rc-ft { display: grid; justify-items: center; gap: 4px; min-height: max(64px, var(--nx-tap)); padding: var(--nx-s2); border: 1px solid var(--nx-control-line); border-radius: 12px; background: var(--nx-surface); color: var(--nx-text); font: 700 13.5px var(--nx-font); cursor: pointer; }
.nx-root .rc-ft .anticon { font-size: 22px; color: var(--nx-muted); }
.nx-root .rc-ft--pdf .anticon { color: var(--nx-bad-text); } .nx-root .rc-ft--xlsx .anticon { color: var(--nx-ok-text); } .nx-root .rc-ft--docx .anticon { color: var(--nx-blue-text); } .nx-root .rc-ft--pptx .anticon { color: var(--nx-amber-text); }
.nx-root .rc-ft.is-on { border-color: var(--nx-blue); background: var(--nx-blue-soft); box-shadow: 0 0 0 1px var(--nx-blue) inset; }
.nx-root .rc-fnote { color: var(--nx-muted); font-size: 13.5px; }

/* ---- more places, saved */
.nx-root .rc-more { display: grid; gap: var(--nx-s2); }
.nx-root .rc-morebtn { display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 44px; padding: 0 var(--nx-s2); border: 0; background: none; color: var(--nx-blue-text); font: 700 14.5px var(--nx-font); cursor: pointer; }
.nx-root .rc-morebody { display: grid; gap: var(--nx-s3); padding: var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); }
.nx-root .rc-morebody label { display: grid; gap: 6px; font: 650 14px var(--nx-font); }
.nx-root .rc-saved { margin: 0; min-height: 20px; color: var(--nx-ok-text); font: 700 13.5px var(--nx-font); }

/* ---- at a glance, and all the details */
.nx-root .rc-glance { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .rc-glance li { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--nx-rfull); background: var(--nx-hover); color: var(--nx-muted); font-size: 13.5px; }
.nx-root .rc-glance li.is-on { background: var(--nx-ok-soft); color: var(--nx-ok-text); }
.nx-root .rc-glance b { font-weight: 750; }
.nx-root .rc-all { display: grid; gap: var(--nx-s2); padding-top: var(--nx-s2); border-top: 1px solid var(--nx-line); }
.nx-root .rc-allbody { display: grid; gap: var(--nx-s3); padding: var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-bg); min-width: 0; }
.nx-root .rc-events { display: grid; gap: 2px; min-width: 0; }
.nx-root .rc-ev { display: grid; grid-template-columns: minmax(0, 1fr) 64px 76px 76px; gap: var(--nx-s2); align-items: center; padding: var(--nx-s2) var(--nx-s2); border-radius: var(--nx-r1); background: var(--nx-surface); }
.nx-root .rc-ev--head { background: none; color: var(--nx-muted); font: 700 12.5px var(--nx-font); }
.nx-root .rc-ev > span:first-child { display: grid; gap: 2px; min-width: 0; }
.nx-root .rc-ev b { font: 700 14.5px var(--nx-font); color: var(--nx-text); }
.nx-root .rc-ev small { color: var(--nx-muted); font: 500 12.5px/1.35 var(--nx-font); }
.nx-root .rc-src { font: 700 12px var(--nx-font); font-style: normal; color: var(--nx-blue-text); }
.nx-root .rc-cell { display: grid; justify-items: center; gap: 2px; color: var(--nx-muted); }
.nx-root .rc-cell.is-on { color: var(--nx-ok-text); }
.nx-root .rc-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--nx-control-line); }
.nx-root .rc-dot.is-on { background: var(--nx-ok-text); border-color: var(--nx-ok-text); }
.nx-root .rc-tick { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--nx-control-line); border-radius: 10px; background: var(--nx-surface); color: var(--nx-on-blue); cursor: pointer; font-size: 20px; }
.nx-root .rc-tick.is-on { background: var(--nx-ok-text); border-color: var(--nx-ok-text); }
.nx-root .rc-tick:disabled { opacity: .45; cursor: not-allowed; }
.nx-root .rc-tick:focus-visible, .nx-root .rc-btn:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; }
.nx-root .rc-change { display: grid; gap: var(--nx-s2); padding: var(--nx-s3); border: 1px solid var(--nx-amber-text); border-radius: var(--nx-r2); background: var(--nx-amber-soft); color: var(--nx-text); }
.nx-root .rc-change ul { margin: 0; padding-left: 20px; display: grid; gap: 2px; }
.nx-root .rc-change p { margin: 0; font-size: 14px; }
.nx-root .rc-change__btns { display: flex; flex-wrap: wrap; gap: var(--nx-s2); }
.nx-root .rc-btn { min-height: max(44px, var(--nx-tap)); padding: 0 var(--nx-s4); border: 1px solid var(--nx-control-line); border-radius: 10px; background: var(--nx-surface); color: var(--nx-text); font: 700 14.5px var(--nx-font); cursor: pointer; }
.nx-root .rc-btn--go { background: var(--nx-blue); border-color: var(--nx-blue); color: var(--nx-on-blue); }
.nx-root .rc-btn:disabled { opacity: .55; cursor: not-allowed; }
.nx-root .rc-facts { display: grid; gap: var(--nx-s2); }
.nx-root .rc-fact { display: grid; gap: 4px; padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r1); background: var(--nx-surface); font-size: 14px; }
.nx-root .rc-fact b { font: 700 14px var(--nx-font); }
.nx-root .rc-fact span { color: var(--nx-muted); }
.nx-root .rc-fact .rc-switch { vertical-align: middle; margin-right: var(--nx-s2); }
.nx-root .rc-seg--scope { justify-self: start; }
@media (max-width: 560px) {
  .nx-root .rc-ev { grid-template-columns: 1fr 1fr 1fr; }
  .nx-root .rc-ev > span:first-child { grid-column: 1 / -1; }
  .nx-root .rc-ev--head > span:first-child { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .nx-root .rc-mini { animation: nx-rc-in var(--nx-d2) var(--nx-curve); }
}
@keyframes nx-rc-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* COMPANY, A PICTURE STRIP ON EVERY TAB (5 Nov 2026, nx-steps.jsx; Monthly reports in opmodel.jsx and nx-companypage.jsx): numbered cards with a 3D tile, who does it and one line, and the
   Monthly reports panels (who writes, what you can do, the department picker). Every rule is scoped to .nx-root and uses the theme tokens only (no raw colour); the one-line blocks come first, the
   motion last and only inside prefers-reduced-motion: no-preference, transform and opacity only. */
.nx-root .nx-st { display: grid; gap: var(--nx-s2); margin-bottom: var(--nx-s4); }
.nx-root .nx-st__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-s3); }
.nx-root .nx-st__title { font-size: var(--nx-fs-small); font-weight: 700; color: var(--nx-muted); text-transform: none; }
.nx-root .nx-st__fold { min-height: var(--nx-tap); padding: 0 var(--nx-s3); border: 0; border-radius: var(--nx-rfull); background: transparent; color: var(--nx-blue); font: inherit; font-size: var(--nx-fs-small); font-weight: 700; cursor: pointer; }
.nx-root .nx-st__fold:hover { background: var(--nx-hover); }
.nx-root .nx-st__fold:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; }
.nx-root .nx-st.is-folded { gap: 0; }
.nx-root .nx-st.is-folded .nx-st__bar { padding: 0 var(--nx-s3); border: 1px solid var(--nx-line); border-radius: var(--nx-r2); background: var(--nx-surface); }
.nx-root .nx-st__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--nx-s4); }
.nx-root .nx-st__card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--nx-s3); min-width: 0; padding: var(--nx-s3) var(--nx-s3); border-radius: var(--nx-r2); background: var(--nx-surface); border: 1px solid var(--nx-line); box-shadow: 0 4px 0 -2px color-mix(in srgb, var(--c) 40%, transparent); }
.nx-root .nx-st__card + .nx-st__card::before { content: ''; position: absolute; left: calc(var(--nx-s4) / -2 - 4px); top: 50%; width: 8px; height: 8px; margin-top: -4px; border-top: 2px solid var(--nx-muted); border-right: 2px solid var(--nx-muted); transform: rotate(45deg); }
.nx-root .nx-st__ic { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: var(--nx-on-blue); background: linear-gradient(150deg, color-mix(in srgb, var(--c) 72%, var(--nx-surface)), var(--c));
  box-shadow: 0 5px 0 -1px color-mix(in srgb, var(--c) 62%, var(--nx-text)), inset 0 1px 0 color-mix(in srgb, var(--nx-surface) 45%, transparent); }
.nx-root .nx-st__n { position: absolute; top: -7px; left: -7px; width: 20px; height: 20px; border-radius: var(--nx-rfull); display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; background: var(--nx-surface); color: var(--nx-text); border: 2px solid var(--c); }
.nx-root .nx-st__txt { display: grid; gap: 2px; min-width: 0; }
.nx-root .nx-st__who { font-size: 12px; font-weight: 800; letter-spacing: .02em; color: color-mix(in srgb, var(--c) 62%, var(--nx-text)); overflow-wrap: anywhere; }
.nx-root .nx-st__line { font-size: var(--nx-fs-small); color: var(--nx-text); overflow-wrap: anywhere; line-height: 1.35; }
@media (max-width: 700px) {
  .nx-root .nx-st__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nx-s3); }
  .nx-root .nx-st__card { grid-template-columns: minmax(0, 1fr); justify-items: start; align-items: start; gap: var(--nx-s2); padding: var(--nx-s3); }
  .nx-root .nx-st__card + .nx-st__card::before { display: none; }
  .nx-root .nx-st__list > .nx-st__card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Monthly reports: who writes, what the reader can do, who the heads are */
.nx-root .nx-mo { display: grid; gap: var(--nx-s4); }
.nx-root .nx-mo__panel { display: grid; gap: var(--nx-s3); padding: var(--nx-s4); border-radius: var(--nx-r2); background: var(--nx-surface); border: 1px solid var(--nx-line); }
.nx-root .nx-mo__panel h3 { margin: 0; font-size: var(--nx-fs-h3); }
.nx-root .nx-mo__panel p { margin: 0; }
.nx-root .nx-mo__heads { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: var(--nx-s2); }
.nx-root .nx-mo__heads li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--nx-s2); padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r2); background: var(--nx-hover); min-width: 0; }
.nx-root .nx-mo__heads li > span:first-child { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--nx-rfull); color: var(--nx-blue); }
.nx-root .nx-mo__heads b, .nx-root .nx-mo__heads small { overflow-wrap: anywhere; }
.nx-root .nx-mo__heads small { display: block; color: var(--nx-muted); }
.nx-root .nx-mo__acts { display: flex; flex-wrap: wrap; gap: var(--nx-s3); }
.nx-root .nx-mo__pick { display: grid; gap: var(--nx-s2); }
.nx-root .nx-mo__pick .ant-select { width: min(100%, 420px); }
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-st__card { animation: nx-st-rise .4s var(--nx-curve) both; animation-delay: calc(var(--i, 0) * 70ms); }
  .nx-root .nx-st__card + .nx-st__card::before { animation: nx-st-nudge .7s ease-in-out 1 both; animation-delay: calc(var(--i, 0) * 70ms + 600ms); }
  @keyframes nx-st-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes nx-st-nudge { 0%, 100% { transform: translateX(0) rotate(45deg); } 50% { transform: translateX(3px) rotate(45deg); } }
}

/* THE WELCOME DESIGNER IN THE AGENT'S CHAT TAB (5 Nov 2026, nx-welcome-sheet.jsx, the button in nx-chat.jsx): the header button with a small 3D tile and the wide side sheet. Every rule is scoped to
   .nx-root and uses the theme tokens only (no raw colour); motion only inside prefers-reduced-motion: no-preference. */
.nx-root .nx-chat__welcomebtn { display: inline-flex; align-items: center; gap: var(--nx-s2); text-decoration: none; }
.nx-root .nx-wsb__ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--nx-on-blue); background: linear-gradient(150deg, color-mix(in srgb, var(--nx-blue) 70%, var(--nx-surface)), var(--nx-blue));
  box-shadow: 0 3px 0 -1px color-mix(in srgb, var(--nx-blue) 60%, var(--nx-text)), inset 0 1px 0 color-mix(in srgb, var(--nx-surface) 45%, transparent); }
.nx-root .nx-sheet--wide { width: min(1040px, calc(100 * var(--ao-vw))); }
.nx-root .nx-sheet--wide .ant-card { box-shadow: none; }
@media (max-width: 860px) { .nx-root .nx-chat__welcomebtn span:not(.nx-wsb__ic) { display: none; } .nx-root .nx-chat__welcomebtn { min-width: var(--nx-tap); justify-content: center; } }
@media (max-width: 560px) { .nx-root .nx-chat__welcomebtn { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-sheet--wide { animation: nx-wsb-in .22s var(--nx-curve) both; }
  @keyframes nx-wsb-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
}
/* WHO CHECKS (5 Nov 2026, Sheraz, Rinesa's Daily Task Tracker: "why is it not sending email and not saving into file"): the tile and the preview name the person who presses Approve and say that nothing is sent or saved before it (use-tiles.jsx) */
.nx-root .ut-never { display: flex; align-items: center; gap: var(--nx-s2); font-size: var(--nx-fs-small); color: var(--nx-ok-text); }
.nx-root .upv-person { display: flex; align-items: flex-start; gap: var(--nx-s2); padding: var(--nx-s2) var(--nx-s3); border-radius: var(--nx-r2); background: var(--nx-ok-soft); color: var(--nx-text); font-size: 13.5px; }
.nx-root .upv-person > span:first-child, .nx-root .upv-person > .anticon { margin-top: 3px; color: var(--nx-ok-text); }

/* FINDING AGENTS (4 Nov 2026, Sheraz: "very hard to find the agents ... each panel got how many agents ... search should show only those panel and agent ... filter should be perfect").
   The sticky bar, the chips with counts, the pickers, the jump strip, the panels as containers, the empty result. Every rule is scoped to .nx-root and uses the theme tokens only. */

/* ---- the sticky bar */
.nx-root .nx-fd .nx-fd-bar { position: sticky; top: calc(var(--nx-header-h, 56px) + 8px); z-index: 20; display: grid; gap: 10px; padding: 12px; border-radius: 18px; border: 1px solid var(--nx-line); background: var(--nx-surface);
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--nx-text) 45%, transparent); }
.nx-root .nx-fd-bar__r1 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.nx-root .nx-fd-search { flex: 1 1 320px; display: flex; align-items: center; gap: 8px; min-width: 0; height: 46px; padding: 0 12px; border-radius: 14px; border: 2px solid color-mix(in srgb, var(--nx-blue) 55%, var(--nx-line)); background: var(--nx-bg); color: var(--nx-text); }
.nx-root .nx-fd-search:focus-within { border-color: var(--nx-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-blue) 22%, transparent); }
.nx-root .nx-fd-search input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: inherit; font: 500 15.5px var(--nx-font); }
.nx-root .nx-fd-search input::-webkit-search-cancel-button { display: none; }
.nx-root .nx-fd-search kbd { flex: none; padding: 0 7px; border: 1px solid var(--nx-line); border-radius: 6px; font: 600 12px var(--nx-font); color: var(--nx-muted); }
.nx-root .nx-fd-search__x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--nx-muted); cursor: pointer; }
.nx-root .nx-fd-search__x:hover { background: var(--nx-hover); color: var(--nx-text); }
.nx-root .nx-fd__i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-fd-sort { display: inline-flex; align-items: center; gap: 8px; color: var(--nx-muted); font-size: 13px; font-weight: 600; }
.nx-root .nx-fd-sort .nx-select { width: auto; min-width: 0; max-width: 190px; }
.nx-root .nx-fd-bar__r2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.nx-root .nx-fd-bar__r3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; color: var(--nx-muted); font-size: 13.5px; }
.nx-root .nx-fd-line { color: var(--nx-text); font-weight: 700; }
.nx-root .nx-fd-sep { width: 1px; height: 26px; margin: 0 4px; background: var(--nx-line); }

/* ---- a chip: its count is on it before it is pressed */
.nx-root .nx-fd-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--nx-line); background: var(--nx-surface); color: var(--nx-text); font: 650 14px var(--nx-font); cursor: pointer; }
.nx-root .nx-fd-chip:hover { border-color: color-mix(in srgb, var(--nx-blue) 55%, var(--nx-line)); }
.nx-root .nx-fd-chip i { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 999px; background: var(--nx-hover); font: 700 12.5px var(--nx-font); font-style: normal; }
.nx-root .nx-fd-chip.is-on { border-color: var(--nx-blue); background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-fd-chip.is-on i { background: var(--nx-blue); color: var(--nx-on-blue); }
.nx-root .nx-fd-chip--bad i { background: color-mix(in srgb, var(--nx-danger) 16%, var(--nx-surface)); color: var(--nx-danger); }
.nx-root .nx-fd-chip--warn i { background: var(--nx-amber-soft); color: var(--nx-amber-text); }
.nx-root .nx-fd-chip--bad.is-on, .nx-root .nx-fd-chip--warn.is-on { border-color: currentColor; }
.nx-root .nx-fd-chip--bad.is-on i { background: var(--nx-danger); color: var(--nx-on-blue); } .nx-root .nx-fd-chip--warn.is-on i { background: var(--nx-amber); color: var(--nx-on-blue); }
.nx-root .nx-fd-chip.is-zero { opacity: .5; }
.nx-root .nx-fd-chip--pick .nx-fd__i { width: 14px; height: 14px; }
.nx-root .nx-fd-clear { margin-left: auto; padding: 6px 4px; border: 0; background: none; color: var(--nx-blue-text); font: 700 14px var(--nx-font); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.nx-root .nx-fd-chip:focus-visible, .nx-root .nx-fd-clear:focus-visible, .nx-root .nx-fd-jchip:focus-visible, .nx-root .nx-fd-panel__btn:focus-visible, .nx-root .nx-fd-opt:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; }

/* ---- a picker */
.nx-root .nx-fd-pick { position: relative; display: inline-flex; }
.nx-root .nx-fd-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(340px, calc(calc(100 * var(--ao-vw)) - 32px)); display: grid; gap: 8px; padding: 10px; border-radius: 16px; border: 1px solid var(--nx-line); background: var(--nx-surface); box-shadow: 0 24px 48px -18px color-mix(in srgb, var(--nx-text) 55%, transparent); }
.nx-root .nx-fd-pop__find { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: 1px solid var(--nx-line); border-radius: 10px; background: var(--nx-bg); color: var(--nx-muted); }
.nx-root .nx-fd-pop__find input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--nx-text); font: 500 14.5px var(--nx-font); }
.nx-root .nx-fd-pop__list { display: grid; gap: 8px; max-height: min(calc(52 * var(--ao-vh)), 380px); overflow: auto; overscroll-behavior: contain; }
.nx-root .nx-fd-pop__sec { display: grid; gap: 2px; }
.nx-root .nx-fd-pop__sec h4 { margin: 4px 6px 2px; font: 700 12px var(--nx-font); letter-spacing: .04em; text-transform: uppercase; color: var(--nx-muted); }
.nx-root .nx-fd-pop__none { margin: 6px; }
.nx-root .nx-fd-pop__foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid var(--nx-line); }
.nx-root .nx-fd-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--nx-text); font: 550 14.5px var(--nx-font); text-align: left; cursor: pointer; }
.nx-root .nx-fd-opt:hover { background: var(--nx-hover); }
.nx-root .nx-fd-opt.is-on { background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-fd-opt.is-zero { opacity: .55; }
.nx-root .nx-fd-opt__box { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--nx-line); border-radius: 6px; background: var(--nx-surface); color: var(--nx-on-blue); }
.nx-root .nx-fd-opt.is-on .nx-fd-opt__box { border-color: var(--nx-blue); background: var(--nx-blue); }
.nx-root .nx-fd-opt__box .nx-fd__i { width: 14px; height: 14px; stroke-width: 3; }
.nx-root .nx-fd-opt__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-root .nx-fd-opt b { flex: none; min-width: 24px; text-align: right; color: var(--nx-muted); font-weight: 700; font-size: 13px; }
.nx-root .nx-fd-opt--link { justify-content: space-between; color: var(--nx-blue-text); font-weight: 650; }

/* ---- the "jump to" strip */
.nx-root .nx-fd-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 4px; }
.nx-root .nx-fd-jump__l { margin-right: 4px; color: var(--nx-muted); font: 700 13px var(--nx-font); }
.nx-root .nx-fd-jchip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--nx-line); background: var(--nx-surface); color: var(--nx-text); font: 600 13.5px var(--nx-font); cursor: pointer; }
.nx-root .nx-fd-jchip i { font-style: normal; color: var(--nx-muted); font-weight: 700; }
.nx-root .nx-fd-jchip:hover { border-color: color-mix(in srgb, var(--nx-blue) 55%, var(--nx-line)); }
.nx-root .nx-fd-jchip.is-on { border-color: var(--nx-blue); background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-fd-jchip__x .nx-fd__i { width: 12px; height: 12px; }
.nx-root .nx-fd-jchip--more { color: var(--nx-blue-text); border-style: dashed; }

/* ---- the panels: containers that sit side by side when they are small and take the whole row when they are big */
.nx-root .nx-fd-panels { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin-top: 12px; min-width: 0; }
.nx-root .nx-fd-panel { --pc: 4; flex: 1 1 calc(var(--pc) * 300px + 32px); min-width: min(100%, 332px); max-width: 100%; border: 1px solid var(--nx-line); border-radius: 18px; background: var(--nx-surface); overflow: clip;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--nx-text) 8%, transparent), 0 14px 26px -20px color-mix(in srgb, var(--nx-text) 45%, transparent); }
.nx-root .nx-fd-panel { max-width: calc(var(--pc) * 460px + 32px); }
.nx-root .nx-fd-panel[style*="--pc: 4"] { max-width: 100%; }
.nx-root .nx-fd-panel--list { min-width: min(100%, 380px); }
.nx-root .nx-fd-panel__h { margin: 0; font: inherit; }
.nx-root .nx-fd-panel__btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 10px 16px; border: 0; background: color-mix(in srgb, var(--nx-hover) 70%, var(--nx-surface)); color: var(--nx-text); font: inherit; text-align: left; cursor: pointer; }
.nx-root .nx-fd-panel:not(.is-closed) .nx-fd-panel__btn { border-bottom: 1px solid var(--nx-line); }
.nx-root .nx-fd-panel__btn:hover { background: var(--nx-hover); }
.nx-root .nx-fd-panel__t { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; }
.nx-root .nx-fd-panel__n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 750 17px var(--nx-font); }
.nx-root .nx-fd-panel__c { flex: none; padding: 1px 11px; border-radius: 999px; background: var(--nx-blue-soft); color: var(--nx-blue-text); font: 800 14px var(--nx-font); }
.nx-root .nx-fd-panel__a { flex: none; display: inline-flex; align-items: center; gap: 5px; color: var(--nx-danger); font: 700 13px var(--nx-font); }
.nx-root .nx-fd-panel__a svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-fd-panel__chev { flex: none; width: 9px; height: 9px; margin: 0 4px 3px auto; border: solid var(--nx-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.nx-root .nx-fd-panel__btn[aria-expanded="false"] .nx-fd-panel__chev { transform: rotate(-45deg); margin-bottom: 0; }
.nx-root .nx-fd-panel__body { padding: 16px; }
.nx-root .nx-fd-panel__body[hidden] { display: none; }
.nx-root .nx-fd-panel__more { display: flex; justify-content: center; padding-top: 14px; }
/* the cards: few cards fill their panel, many cards make a grid; a card never gets wider than 460px */
.nx-root .nx-fd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; align-items: stretch; min-width: 0; }
.nx-root .nx-fd-grid--compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.nx-root .nx-fd-panel .nx-ar-list { padding: 0; }
.nx-root .nx-fd__mark { padding: 0 2px; border-radius: 4px; background: color-mix(in srgb, var(--nx-amber) 38%, var(--nx-surface)); color: inherit; }
.nx-root .nx-fd-note { color: var(--nx-muted); }

/* ---- an empty result */
.nx-root .nx-fd-empty { display: grid; gap: 14px; justify-items: start; margin-top: 16px; padding: 22px; border: 1px dashed var(--nx-line); border-radius: 18px; background: var(--nx-surface); }
.nx-root .nx-fd-empty h3 { margin: 0; font: 750 19px var(--nx-font); }
.nx-root .nx-fd-empty__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--nx-muted); }
.nx-root .nx-fd-empty__row .nx-fd-chip .nx-fd__i { width: 13px; height: 13px; }

/* ---- the phone: the bar shows search first, the chips in one row you swipe, the panels one under the other */
@media (max-width: 760px) {
  .nx-root .nx-fd .nx-fd-bar { top: calc(var(--nx-header-h, 56px) + 4px); padding: 10px; gap: 8px; border-radius: 16px; }
  .nx-root .nx-fd-search { flex-basis: 100%; height: 44px; }
  .nx-root .nx-fd-sort > span { display: none; }
  .nx-root .nx-fd-bar__r2 { flex-wrap: nowrap; overflow-x: auto; margin: 0 -10px; padding: 2px 10px 6px; scrollbar-width: none; }
  .nx-root .nx-fd-bar__r2::-webkit-scrollbar { display: none; }
  .nx-root .nx-fd-bar__r2 > * { flex: none; }
  .nx-root .nx-fd-pick { position: static; }
  .nx-root .nx-fd-pop { position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); width: auto; max-height: calc(calc(100 * var(--ao-vh)) - 230px); z-index: 60; }
  .nx-root .nx-fd-pop__list { max-height: calc(calc(100 * var(--ao-vh)) - 400px); }
  .nx-root .nx-fd-sort { flex: 1 1 0; min-width: 0; }
  .nx-root .nx-fd-sort .nx-select { width: 100%; max-width: none; }
  .nx-root .nx-fd .nx-tb__views { flex: none; }
  .nx-root .nx-fd .nx-tb__views .nx-tb__vb:nth-child(-n+3) { display: none; }
  .nx-root .nx-fd .nx-tb__views .nx-tb__sep { display: none; }
  .nx-root .nx-fd-jump { flex-wrap: nowrap; overflow-x: auto; margin-inline: -2px; padding-bottom: 6px; scrollbar-width: none; }
  .nx-root .nx-fd-jump > * { flex: none; }
  .nx-root .nx-fd-panel, .nx-root .nx-fd-panel--list { flex-basis: 100%; max-width: 100%; }
  .nx-root .nx-fd-panel__body { padding: 12px; }
  .nx-root .nx-fd-grid, .nx-root .nx-fd-grid--compact { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .nx-root .nx-fd-chip, .nx-root .nx-fd-jchip, .nx-root .nx-fd-panel__chev { transition: none; } }

/* a compact card in a search shows its job line on one line, the match marked */
.nx-root .nx-ag--compact .nx-ag__desc { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: 13.5px; }

/* a person with one to three agents: the empty side of the page says where to find more */
.nx-root .nx-fd-hint { flex: 1 1 280px; max-width: 420px; display: grid; gap: 10px; align-content: start; padding: 18px; border: 1px dashed var(--nx-line); border-radius: 18px; background: var(--nx-surface); }
.nx-root .nx-fd-hint h3 { margin: 0; font: 750 17px var(--nx-font); }
.nx-root .nx-fd-hint p { margin: 0; color: var(--nx-muted); }
.nx-root .nx-fd-hint__a { display: flex; flex-wrap: wrap; gap: 8px; }

/* ISSUES AND REPORTS (5 Nov 2026): one issue in the New look sheet. Every rule is scoped to .nx-root. */
.nx-root .nx-iss { display: grid; gap: var(--nx-s4); min-width: 0; }
.nx-root .nx-iss-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-iss-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.nx-root .nx-iss-acts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--nx-s3); }
.nx-root .nx-iss-more > summary, .nx-root .nx-iss-ev > summary { cursor: pointer; font-weight: 600; }
.nx-root .nx-iss-more__list { display: flex; flex-wrap: wrap; gap: var(--nx-s2); margin-top: var(--nx-s2); }
.nx-root .nx-iss-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: var(--nx-s2); }
.nx-root .nx-iss-steps > li { display: grid; gap: 2px; padding: var(--nx-s2) var(--nx-s3); border: 1px solid var(--nx-line); border-radius: 10px; min-width: 0; overflow-wrap: anywhere; }
.nx-root .nx-iss-steps__dot { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; border: 1.5px solid var(--nx-line); color: var(--nx-muted); }
.nx-root .nx-iss-steps > li[data-state="done"] { border-color: var(--nx-success); }
.nx-root .nx-iss-steps > li[data-state="done"] .nx-iss-steps__dot { background: var(--nx-success); border-color: var(--nx-success); color: var(--nx-surface); }
.nx-root .nx-iss-steps > li[data-state="now"] { border-color: var(--nx-blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--nx-blue) 25%, transparent); }
.nx-root .nx-iss-steps > li[data-state="now"] .nx-iss-steps__dot { border-color: var(--nx-blue); color: var(--nx-blue); }
.nx-root .nx-iss-steps > li[data-state="bad"] { border-color: var(--nx-danger); }
.nx-root .nx-iss-steps > li[data-state="bad"] .nx-iss-steps__dot { background: var(--nx-danger); border-color: var(--nx-danger); color: var(--nx-surface); }
.nx-root .nx-iss-steps > li[data-state="skip"], .nx-root .nx-iss-steps > li[data-state="todo"] { opacity: .65; }
.nx-root .nx-iss-steps > li[data-state="skip"] b { text-decoration: line-through; }
@media (max-width: 640px) { .nx-root .nx-iss-steps { grid-template-columns: 1fr; } .nx-root .nx-iss-steps > li { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--nx-s2); } .nx-root .nx-iss-steps > li .nx-small { grid-column: 2; } }
.nx-root .nx-iss-thread { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nx-s3); }
.nx-root .nx-iss-thread > li { display: grid; gap: 2px; padding: var(--nx-s3); border: 1px solid var(--nx-line); border-radius: 12px; min-width: 0; }
.nx-root .nx-iss-thread > li[data-k="auto"] { opacity: .8; border-style: dashed; }
.nx-root .nx-iss-thread > li[data-k="reply"] { border-color: var(--nx-blue); }
.nx-root .nx-iss-composer { display: grid; gap: var(--nx-s2); }
.nx-root .nx-iss-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: var(--nx-s3); overflow-x: auto; padding-bottom: var(--nx-s2); }
.nx-root .nx-iss-col { display: grid; gap: var(--nx-s2); align-content: start; min-width: 0; padding: var(--nx-s3); border: 1px solid var(--nx-line); border-radius: 12px; }
.nx-root .nx-iss-col .nx-h3 { display: flex; justify-content: space-between; gap: var(--nx-s2); margin: 0; }
.nx-root .nx-iss-card { display: grid; gap: 4px; text-align: left; width: 100%; padding: var(--nx-s3); border: 1px solid var(--nx-line); border-left-width: 4px; border-radius: 10px; background: var(--nx-surface, transparent); color: inherit; font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.nx-root .nx-iss-card[data-sev="critical"] { border-left-color: var(--nx-danger); }
.nx-root .nx-iss-card[data-sev="high"] { border-left-color: var(--nx-amber); }
.nx-root .nx-iss-card:focus-visible { outline: 2px solid var(--nx-blue); outline-offset: 2px; }
.nx-root .nx-iss-card__title { font-weight: 600; }
@media (max-width: 760px) { .nx-root .nx-iss-board { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; } }

/* ---------------------------------------------------------------- THE ISSUES INBOX (5 Nov 2026, Sheraz: "i need to have proper view. new, fixed close etc etc."): one bar of four steps with counts, Needs me beside it,
   a source switch, ONE dot for new or changed, one status chip per row. Theme tokens only. */
.nx-root .nx-iss-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s3); margin-bottom: var(--nx-s3); padding: 10px 14px; border-radius: 14px; background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-iss-strip b { flex: 1 1 200px; min-width: 0; }
.nx-root .nx-iss-bar, .nx-root .nx-iss-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s3); margin-bottom: var(--nx-s3); }
.nx-root .nx-iss-seg { display: inline-flex; gap: 2px; max-width: 100%; padding: 4px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--nx-line); border-radius: 14px; background: var(--nx-surface); }
.nx-root .nx-iss-seg::-webkit-scrollbar { display: none; }
.nx-root .nx-iss-bar .nx-iss-seg { flex: 1 1 420px; }
.nx-root .nx-iss-seg__b { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--nx-muted); font: 700 14.5px var(--nx-font); white-space: nowrap; cursor: pointer; }
.nx-root .nx-iss-seg__b:hover { background: var(--nx-hover); color: var(--nx-text); }
.nx-root .nx-iss-seg__b:focus-visible, .nx-root .nx-iss-me:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; }
.nx-root .nx-iss-seg__b b, .nx-root .nx-iss-me b { min-width: 24px; padding: 1px 8px; box-sizing: border-box; border-radius: 999px; background: var(--nx-hover); color: var(--nx-text); font: 800 12.5px var(--nx-font); text-align: center; }
.nx-root .nx-iss-seg__b[aria-selected="true"], .nx-root .nx-iss-seg__b[aria-pressed="true"] { background: var(--nx-blue-soft); color: var(--nx-blue-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nx-blue) 40%, transparent); }
.nx-root .nx-iss-seg__b[aria-selected="true"] b, .nx-root .nx-iss-seg__b[aria-pressed="true"] b { background: var(--nx-blue); color: var(--nx-on-blue); }
.nx-root .nx-iss-seg__b[data-lane="fixed"][aria-selected="true"] b { background: var(--nx-amber); }
.nx-root .nx-iss-seg__b[data-lane="closed"][aria-selected="true"] b { background: var(--nx-muted); }
.nx-root .nx-iss-seg--sm .nx-iss-seg__b { min-height: 34px; padding: 0 12px; font-size: 13.5px; }
.nx-root .nx-iss-me { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 16px; border: 1px solid var(--nx-line); border-radius: 14px; background: var(--nx-surface); color: var(--nx-text); font: 700 14.5px var(--nx-font); cursor: pointer; }
.nx-root .nx-iss-me[aria-pressed="true"] { border-color: var(--nx-amber); background: var(--nx-amber-soft); color: var(--nx-amber-text); }
.nx-root .nx-iss-me b { background: var(--nx-amber); color: var(--nx-on-blue); }
.nx-root .nx-iss-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--nx-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-blue) 22%, transparent); }
.nx-root .nx-iss-t[data-kind="changed"] .nx-iss-dot { background: var(--nx-amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-amber) 24%, transparent); }
.nx-root .nx-iss-t[data-kind="new"] .nx-w20-linkbtn { font-weight: 800; }
.nx-root .nx-iss-t__l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nx-root .nx-iss-sev { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--nx-muted); }
.nx-root .nx-iss-sev[data-sev="critical"] { background: var(--nx-danger); }
.nx-root .nx-iss-sev[data-sev="high"] { background: var(--nx-amber); }
.nx-root .nx-iss-sev[data-sev="medium"] { background: var(--nx-blue); }
.nx-root .nx-iss-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nx-root .nx-iss-who__n { display: grid; min-width: 0; }
.nx-root .nx-iss-who__bot { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--nx-hover); color: var(--nx-muted); }
.nx-root .nx-iss-bot { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-small[data-warn="bad"] { color: var(--nx-danger); font-weight: 700; }
@media (max-width: 640px) { .nx-root .nx-iss-bar .nx-iss-seg { flex-basis: 100%; } .nx-root .nx-iss-me { min-height: 42px; } }
@media (prefers-reduced-motion: no-preference) {
  .nx-root .nx-iss-t[data-kind] .nx-iss-dot, .nx-root .nx-iss-strip .nx-iss-dot { animation: nx-iss-pulse 2.4s ease-out infinite; }
  @keyframes nx-iss-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nx-blue) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
}
.nx-root .nx-iss-list { min-width: 0; max-width: 100%; }
.nx-root .nx-iss-list > * { min-width: 0; max-width: 100%; }
.nx-root .nx-iss-cards { display: grid; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-iss-cards .nx-input { width: 100%; min-width: 0; min-height: 44px; }
.nx-root .nx-iss-mlist { display: grid; gap: var(--nx-s2); margin: 0; padding: 0; list-style: none; }
.nx-root .nx-iss-mcard { display: grid; gap: 8px; width: 100%; padding: 14px; text-align: left; border: 1px solid var(--nx-line); border-radius: 14px; background: var(--nx-surface); color: inherit; font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.nx-root .nx-iss-mcard[data-kind="new"] { border-color: color-mix(in srgb, var(--nx-blue) 45%, var(--nx-line)); }
.nx-root .nx-iss-mcard:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; }
.nx-root .nx-iss-mcard__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nx-root .nx-iss-mcard__top b { font-weight: 700; }
.nx-root .nx-iss-mcard[data-kind="new"] .nx-iss-mcard__top b { font-weight: 800; }
.nx-root .nx-iss-mcard__mid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.nx-root .nx-iss-mcard__low b[data-warn="bad"] { color: var(--nx-danger); }
.nx-root .nx-iss-mcard[data-sev="critical"] { border-left: 4px solid var(--nx-danger); }
.nx-root .nx-iss-seg--note { align-items: center; padding: 0 14px; min-height: 50px; color: var(--nx-muted); }
/* AGENT KNOWLEDGE & GUIDES (5 Nov 2026): the agent page's fourth tab (nx-agent-guides.jsx) and the Guides link in a chat's header. */
.nx-root .nx-gk__intro { margin: 0 0 var(--nx-s3); opacity: .9; }
.nx-root .nx-gk__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nx-s3); align-items: start; }
.nx-root .nx-gk__title { display: inline-flex; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-gk__ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px; background: var(--nx-blue-soft); color: var(--nx-blue-text); flex: none; }
.nx-root .nx-gk__ico .nx-gl { --gls: 18; }
.nx-root .nx-gk__job { margin: 0 0 var(--nx-s2); font-weight: 600; }
.nx-root .nx-gk__text { margin: 0 0 var(--nx-s2); white-space: pre-wrap; overflow-wrap: anywhere; }
.nx-root .nx-gk__list { list-style: none; margin: 0 0 var(--nx-s2); padding: 0; display: grid; gap: var(--nx-s2); }
.nx-root .nx-gk__list li { display: flex; flex-direction: column; gap: 2px; }
.nx-root .nx-gk__note { opacity: .85; }
.nx-root .nx-gk__empty { margin: 0 0 var(--nx-s2); padding: var(--nx-s2) var(--nx-s3); border: 1px dashed var(--nx-line, currentColor); border-radius: 10px; }
.nx-root .nx-gk__links { display: flex; flex-wrap: wrap; gap: var(--nx-s3); margin: var(--nx-s2) 0 0; }
.nx-root .nx-chat__guidesbtn .nx-gl { --gls: 18; }
.nx-root .nx-chat__guidesbtn { display: inline-flex; align-items: center; gap: var(--nx-s1); text-decoration: none; }
@media (max-width: 860px) { .nx-root .nx-gk__grid { grid-template-columns: minmax(0, 1fr); } .nx-root .nx-chat__guidesbtn span { display: none; } }

/* small raised icons and the one chip of a row (5 Nov 2026): the same extruded look as the agent card's tiles, colours from theme tokens only */
.nx-root .nx-iss-ic { --ic: var(--nx-blue); flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--nx-on-blue); box-shadow: var(--nx-c3-tile-sh);
  background: linear-gradient(160deg, color-mix(in srgb, var(--ic) 78%, var(--nx-surface)), var(--ic)); }
.nx-root .nx-iss-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nx-root .nx-iss-ic[data-ic="new"], .nx-root .nx-iss-ic[data-ic="people"], .nx-root .nx-iss-ic[data-ic="info"] { --ic: var(--nx-blue); }
.nx-root .nx-iss-ic[data-ic="progress"], .nx-root .nx-iss-ic[data-ic="audits"] { --ic: var(--nx-cyan); }
.nx-root .nx-iss-ic[data-ic="fixed"], .nx-root .nx-iss-ic[data-ic="me"], .nx-root .nx-iss-ic[data-ic="warn"] { --ic: var(--nx-amber); }
.nx-root .nx-iss-ic[data-ic="closed"], .nx-root .nx-iss-ic[data-ic="dup"], .nx-root .nx-iss-ic[data-ic="all"], .nx-root .nx-iss-ic[data-ic="gray"] { --ic: var(--nx-muted); }
.nx-root .nx-iss-ic[data-ic="confirmed"], .nx-root .nx-iss-ic[data-ic="ok"] { --ic: var(--nx-success); }
.nx-root .nx-iss-seg__b .nx-iss-ic, .nx-root .nx-iss-me .nx-iss-ic { width: 24px; height: 24px; }
.nx-root .nx-iss-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 3px 12px 3px 4px; border-radius: 999px; font: 700 13px var(--nx-font); white-space: nowrap; color: var(--nx-text); background: var(--nx-hover); }
.nx-root .nx-iss-chip[data-tone="info"] { background: var(--nx-blue-soft); color: var(--nx-blue-text); }
.nx-root .nx-iss-chip[data-tone="warn"] { background: var(--nx-amber-soft); color: var(--nx-amber-text); }
.nx-root .nx-iss-chip[data-tone="ok"] { background: var(--nx-ok-soft); color: var(--nx-ok-text); }
.nx-root .nx-iss-t .nx-small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.nx-root .nx-iss-ic { box-shadow: 0 2px 0 color-mix(in srgb, var(--ic) 62%, var(--nx-text)), 0 5px 7px -3px color-mix(in srgb, var(--ic) 55%, transparent); }
@media (max-width: 640px) { .nx-root .nx-iss-seg__b { gap: 6px; padding: 0 10px; } .nx-root .nx-iss-bar .nx-iss-seg { gap: 0; } }

/* ---------------------------------------------------------------- ISSUES OF EVERYONE (6 Nov 2026, nx-myissues.jsx): a person's own reports as cards and one report as a conversation. Theme tokens only.
   Wide: the list and the report side by side. Under 900 px: one column, an open report replaces the list (a Back link), so there is no sideways scroll at 390 px. */
.nx-root .nx-myi { display: grid; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-myi__sub { margin: 0; }
.nx-root .nx-myi__grid { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: var(--nx-s4); align-items: start; min-width: 0; }
.nx-root .nx-myi__list, .nx-root .nx-myi__detail { display: grid; gap: var(--nx-s3); min-width: 0; align-content: start; }
.nx-root .nx-myi__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s3); }
.nx-root .nx-myi__top .nx-btn { min-height: 52px; padding: 0 24px; font-size: 16px; }
.nx-root .nx-myi__rows { display: grid; gap: var(--nx-s2); margin: 0; padding: 0; list-style: none; }
.nx-root .nx-myi__row { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--nx-line); border-radius: 14px; background: var(--nx-surface); color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.nx-root .nx-myi__row:hover { border-color: color-mix(in srgb, var(--nx-blue) 45%, var(--nx-line)); }
.nx-root .nx-myi__row.is-open { border-color: var(--nx-blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--nx-blue) 20%, transparent); }
.nx-root .nx-myi__row:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; }
.nx-root .nx-myi__title { display: flex; align-items: center; font-weight: 650; }
.nx-root .nx-myi__row.is-new .nx-myi__title { font-weight: 800; }
.nx-root .nx-myi__line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.nx-root .nx-myi__dot { display: inline-block; flex: none; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--nx-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-blue) 22%, transparent); }
.nx-root .nx-myi__back { justify-self: start; }
.nx-root .nx-myi__h { margin: 0; font: 750 20px var(--nx-font); overflow-wrap: anywhere; }
.nx-root .nx-myi__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.nx-root .nx-myi__steps { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--nx-muted); }
.nx-root .nx-myi__steps li { display: inline-flex; align-items: center; gap: 6px; }
.nx-root .nx-myi__steps li > span, .nx-root .nx-myi__stepline > span { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--nx-line); }
.nx-root .nx-myi__steps li[data-on="done"] { color: var(--nx-text); }
.nx-root .nx-myi__steps li[data-on="done"] > span { background: var(--nx-success); }
.nx-root .nx-myi__steps li[data-on="now"] { color: var(--nx-blue-text); font-weight: 800; }
.nx-root .nx-myi__steps li[data-on="now"] > span { background: var(--nx-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-blue) 22%, transparent); }
.nx-root .nx-myi__card, .nx-root .nx-myi__confirm { padding: 14px; border: 1px solid var(--nx-line); border-radius: 14px; background: var(--nx-surface); }
.nx-root .nx-myi__card--note { background: var(--nx-blue-soft); border-color: transparent; }
.nx-root .nx-myi__text { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.nx-root .nx-myi__thread { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.nx-root .nx-myi__stepline { display: flex; align-items: center; gap: 8px; color: var(--nx-muted); }
.nx-root .nx-myi__msg { display: grid; gap: 2px; max-width: 92%; padding: 10px 14px; border-radius: 14px; background: var(--nx-hover); }
.nx-root .nx-myi__msg.is-mine { justify-self: end; background: var(--nx-blue-soft); }
.nx-root .nx-myi__acts { display: flex; flex-wrap: wrap; gap: var(--nx-s2); margin-top: 8px; }
.nx-root .nx-myi__still, .nx-root .nx-myi__reply { display: grid; gap: var(--nx-s2); margin-top: var(--nx-s2); }
.nx-root .nx-myi__reply { margin-top: 0; }
.nx-root .nx-myi .nx-input { width: 100%; min-width: 0; box-sizing: border-box; }
.nx-root .nx-myi__still .nx-btn, .nx-root .nx-myi__reply .nx-btn { justify-self: start; }
@media (max-width: 899px) {
  .nx-root .nx-myi__grid { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-myi.has-open .nx-myi__list { display: none; }
  .nx-root .nx-myi:not(.has-open) .nx-myi__hint { display: none; }
}

/* ---------------------------------------------------------------- FEATURE REQUESTS (6 Nov 2026): the small Feature chip, the status buttons of an administrator and the short form. Theme tokens only. */
.nx-root .nx-iss-feat, .nx-root .nx-myi__kind { display: inline-flex; align-items: center; flex: none; margin-right: 8px; padding: 1px 9px; border-radius: 999px; background: var(--nx-blue-soft); color: var(--nx-blue-text); font: 800 11.5px var(--nx-font); letter-spacing: .02em; }
.nx-root .nx-iss-fstatus { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-iss-fs { min-height: 38px; padding: 0 14px; border: 1px solid var(--nx-line); border-radius: 999px; background: var(--nx-surface); color: var(--nx-text); font: 700 13.5px var(--nx-font); cursor: pointer; }
.nx-root .nx-iss-fs:hover:not(:disabled) { border-color: var(--nx-blue); }
.nx-root .nx-iss-fs[aria-pressed="true"] { border-color: var(--nx-blue); background: var(--nx-blue-soft); color: var(--nx-blue-text); cursor: default; }
.nx-root .nx-iss-fs:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: 2px; }
.nx-root .nx-fr { display: grid; gap: var(--nx-s3); min-width: 0; }
.nx-root .nx-fr__f { display: grid; gap: 6px; min-width: 0; }
.nx-root .nx-fr__l { font-weight: 700; }
.nx-root .nx-fr .nx-input { width: 100%; min-width: 0; box-sizing: border-box; }
.nx-root .nx-fr__shot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nx-s2); }
.nx-root .nx-fr__shot img { max-width: 100%; max-height: 160px; border-radius: 10px; border: 1px solid var(--nx-line); }
.nx-root .nx-fr__thanks { margin: 0; }

/* RESP (W11, 21 Oct 2026): the redesigned look on any screen. Sheraz's rule: "make sure this UI is supportive by any screen size, mobile friendly, responsive to any size."
   The gate that finds what breaks is tools/nx-resp-gate.mjs (every route, 320 to 2560 px and the landscape phone, English and Chinese); this file is what it asked for. It is appended LAST
   in web/build.mjs, so a rule here wins over the same selector earlier. Every rule starts with .nx-root and uses only --nx-* tokens (qa-2026-10-21-nx-resp.test.js).
   Breakpoints (the prototype's): >= 1900 big screens, <= 1100 tablet, <= 860 phone (the menu is a drawer), <= 560 small phone, <= 380 tiny.
   A selector written .nx-root.nx-root (or three times) out-ranks a page rule that sets a fixed size on a field; it is on purpose.
   Motion only inside prefers-reduced-motion: no-preference. */

/* ---------------------------------------------------------------- 1. big screens: base text 17 px from 1900 px; the page stops growing at 1680 px on a very wide screen and sits in the middle
   (the cap starts at 2200 px: at 1920 px the content area with the rail menu is 1796 px and stays full width, header-shot --width) */
/* 23 Oct 2026 (Sheraz: the lab looks right and smaller, production is too big and needs a lot of scrolling): the text no longer grows from 1900 px. It stays at the lab's size (15 px base) on every screen. */
@media (min-width: 1900px) {
  .nx-root { --nx-fs-h1: 26px; --nx-fs-h2: 22px; --nx-fs-h3: 17px; --nx-fs-body: 15px; --nx-fs-small: 13px; }
}
@media (min-width: 2200px) {
  .nx-root .nx-content .content-inner { max-width: 1680px; margin-left: auto; margin-right: auto; }
}

/* ---------------------------------------------------------------- 2. up to 860 px: the left menu is a drawer. The menu button is first in the header (nx-shell.jsx); the bottom bar stays for the places a thumb reaches.
   The drawer is 300 px or 86% of the screen, with a dim scrim; it closes on choosing a page, on Esc and on the scrim (nx-shell.jsx). */
@media (max-width: 860px) {
  .nx-root.nx-shell .nx-side { display: flex; width: min(300px, calc(86 * var(--ao-vw))); max-width: calc(100 * var(--ao-vw)); z-index: 1100; transform: translateX(-104%); visibility: hidden; box-shadow: none; overflow-y: auto; }
  .nx-root.nx-shell.is-drawer .nx-side { transform: none; visibility: visible; box-shadow: var(--nx-panel-shadow); }
  .nx-root .nx-scrim { position: fixed; inset: 0; z-index: 1090; background: var(--nx-scrim); }
  .nx-root .nx-side .nx-pin { display: none; }
  .nx-root .nx-side .nx-brand { padding-top: 6px; }
  .nx-root .nx-header .nx-hbg { flex: none; }
  .nx-root .nx-header__mark { display: none; }
  /* the search takes the room the mark left: icon and words (no Ctrl K hint) */
  .nx-root .nx-header .nx-search { flex: 1 1 auto; width: auto; min-width: 0; justify-content: flex-start; }
  .nx-root .nx-header .nx-search__text { display: block; }
  .nx-root .nx-header .nx-header__right { gap: 4px; }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .nx-root.nx-shell .nx-side { transition: transform var(--nx-d3) var(--nx-curve), visibility 0s linear var(--nx-d3); }
  .nx-root.nx-shell.is-drawer .nx-side { transition: transform var(--nx-d3) var(--nx-curve), visibility 0s; }
  .nx-root .nx-scrim { animation: nx-fade var(--nx-d2) ease-out; }
}
/* a small phone: the search shows its icon only, so the header never wraps (English or Chinese) */
@media (max-width: 420px) {
  .nx-root .nx-header .nx-search { flex: none; width: var(--nx-tap); justify-content: center; padding: 0; }
  .nx-root .nx-header .nx-search__text { display: none; }
}

/* ---------------------------------------------------------------- 3. up to 860 px: the header's menus open under the whole bar, never off the left edge */
@media (max-width: 860px) {
  .nx-root .nx-header .nx-menuwrap { position: static; }
  .nx-root .nx-header .nx-menu--right { left: 0; right: 0; top: calc(100% + 6px); width: auto; min-width: 0; max-width: none; max-height: calc(calc(100 * var(--ao-vh)) - var(--nx-header-h) - var(--nx-bar-h) - 40px); }
  .nx-root .nx-header .nx-pop, .nx-root .nx-header .nx-pop--sm { width: auto; }
}

/* ---------------------------------------------------------------- 4. up to 860 px: every tap target is 40 px high, every text field is 16 px (a smaller one makes a phone zoom the page) */
@media (max-width: 860px) {
  /* the shared kit */
  .nx-root .nx-btn--sm, .nx-root .nx-select, .nx-root .nx-input, .nx-root .nx-link, .nx-root .nx-part, .nx-root .nx-pal__mode { min-height: var(--nx-tap); }
  .nx-root .nx-link { display: inline-flex; align-items: center; }
  .nx-root .nx-stat__label { min-height: var(--nx-tap); display: inline-flex; align-items: center; }
  .nx-root .nx-toast__x { min-width: var(--nx-tap); min-height: var(--nx-tap); }
  .nx-root .nx-header .ant-segmented .ant-segmented-item-label { min-height: var(--nx-tap); line-height: var(--nx-tap); }
  /* Ant Design parts that the old pages mounted in the frame use */
  .nx-root .ant-btn { min-height: var(--nx-tap); }
  .nx-root .ant-btn-link, .nx-root .ant-btn-text { padding-top: 0; padding-bottom: 0; }
  .nx-root.nx-root .ant-btn.ant-btn-circle, .nx-root.nx-root .ant-btn.ant-btn-icon-only { width: var(--nx-tap); height: var(--nx-tap); padding: 0; }
  .nx-root .ant-select .ant-select-selector { min-height: var(--nx-tap); align-items: center; }
  .nx-root .ant-input, .nx-root .ant-input-affix-wrapper, .nx-root .ant-input-number { min-height: var(--nx-tap); }
  .nx-root .ant-input-number .ant-input-number-input { min-height: calc(var(--nx-tap) - 2px); }
  .nx-root .ant-input-affix-wrapper { max-width: 100%; min-width: 0; }
  .nx-root .ant-segmented .ant-segmented-item-label { min-height: var(--nx-tap); line-height: var(--nx-tap); display: flex; align-items: center; justify-content: center; }
  .nx-root .ant-segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .nx-root .ant-tabs .ant-tabs-tab-btn { display: inline-flex; align-items: center; min-height: var(--nx-tap); }
  .nx-root .ant-tabs .ant-tabs-nav-more { min-width: var(--nx-tap); }
  .nx-root .ant-checkbox-wrapper, .nx-root .ant-radio-wrapper { min-height: var(--nx-tap); align-items: center; }
  .nx-root .ant-collapse > .ant-collapse-item > .ant-collapse-header { min-height: var(--nx-tap); align-items: center; }
  .nx-root .ant-pagination .ant-pagination-item, .nx-root .ant-pagination .ant-pagination-prev, .nx-root .ant-pagination .ant-pagination-next { min-width: var(--nx-tap); height: var(--nx-tap); line-height: calc(var(--nx-tap) - 2px); }
  .nx-root .ant-pagination .ant-pagination-item-link { min-width: var(--nx-tap); height: var(--nx-tap); }
  .nx-root .ant-list-item > a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--nx-tap); min-height: var(--nx-tap); }
  /* a switch keeps its look; the box around it grows to 40 px (clear borders, the colour stays inside the padding box) */
  .nx-root .ant-switch { height: var(--nx-tap); line-height: 22px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; background-clip: padding-box; }
  .nx-root .ant-switch.ant-switch-small { line-height: 16px; border-top-width: 12px; border-bottom-width: 12px; }
  /* old pages in the frame: chips, tab links, the guide, the assistant panel, the time field */
  .nx-root .sd-chip, .nx-root .tab-link { min-height: var(--nx-tap); display: inline-flex; align-items: center; }
  .nx-root .gd-more { display: inline-flex; align-items: center; min-height: var(--nx-tap); }
  .nx-root .gd-toc button { min-height: var(--nx-tap); }
  .nx-root .cmp-sug, .nx-root input.time-in { min-height: var(--nx-tap); }
  .nx-root .as-tab { min-height: var(--nx-tap); min-width: var(--nx-tap); }
  /* fields */
  .nx-root input.nx-input, .nx-root select.nx-select, .nx-root textarea, .nx-root select, .nx-root input[type="text"], .nx-root input[type="search"], .nx-root input[type="email"],
  .nx-root input[type="number"], .nx-root input[type="password"], .nx-root input[type="tel"], .nx-root input[type="url"], .nx-root input[type="date"], .nx-root input[type="time"],
  .nx-root input:not([type]), .nx-root .ant-input, .nx-root .ant-input-number-input, .nx-root .ant-select-selection-search-input, .nx-root .nx-pal__input { font-size: 16px; }
  /* a rule of a page that sets 14 px on a field (the Ant select, the assistant composer) is out-ranked here, so a phone never zooms */
  .nx-root.nx-root select.nx-select, .nx-root.nx-root .ant-select, .nx-root.nx-root.nx-root .ant-select-single .ant-select-selector .ant-select-selection-search-input, .nx-root.nx-root input.time-in { font-size: 16px; }
  .nx-root.nx-root.nx-root textarea.ant-input, .nx-root.nx-root.nx-root .cmp.compact .cmp-input.ant-input { font-size: 16px; }
  .nx-root.nx-root.nx-root textarea.ant-input { min-height: calc(var(--nx-tap) + 4px) !important; }   /* an auto sizing box writes its own height first */
  .nx-root textarea { min-height: calc(var(--nx-tap) + 4px); }
}

/* ---------------------------------------------------------------- 5. nothing is wider than the screen */
@media (max-width: 860px) {
  .nx-root .nx-content, .nx-root .content-inner, .nx-root .nx-page, .nx-root .nx-card, .nx-root .nx-stack { min-width: 0; max-width: 100%; }
  .nx-root .nx-content img, .nx-root .nx-content svg, .nx-root .nx-content canvas, .nx-root .nx-content video { max-width: 100%; }
  .nx-root .nx-h1, .nx-root .nx-h2, .nx-root .nx-h3, .nx-root .nx-card, .nx-root .nx-item__title { overflow-wrap: anywhere; }
  .nx-root .nx-filter__pick { flex-wrap: wrap; max-width: 100%; min-width: 0; }
  .nx-root .nx-select { max-width: 100%; min-width: 0; }
  .nx-root .gd-sections { grid-template-columns: minmax(0, 1fr); }
  .nx-root .gd-toc ol, .nx-root .gd-toc button { overflow-wrap: anywhere; white-space: normal; }
  .nx-root .gd-show { white-space: normal; text-align: left; }
}
/* the printed guide (Library, This page's guide): one column, its table scrolls inside its own card, also on a tablet or a small laptop */
@media (max-width: 1100px) {
  .nx-root .gd-layout { grid-template-columns: minmax(0, 1fr); }
  .nx-root .gd-layout > * { min-width: 0; }
  .nx-root .gd-toc { position: static; }
  .nx-root .gd-actions { display: block; max-width: 100%; overflow-x: auto; }
}
/* grids that were fixed at a width the screen does not have, and long words that do not break */
.nx-root .howto-grid { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }
.nx-root .howto-job, .nx-root .howto-job .hj-ask, .nx-root .gd-facts, .nx-root .gd-section { min-width: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- 6. small phone (560 px) and tiny phone (380 px): tighter gutters, chips that wrap */
@media (max-width: 560px) {
  .nx-root .nx-content { padding-left: 12px; padding-right: 12px; }
  .nx-root .nx-h1 { font-size: 22px; }
  .nx-root .nx-chip { white-space: normal; }
}
@media (max-width: 380px) {
  .nx-root .nx-content { padding-left: 8px; padding-right: 8px; }
  .nx-root .nx-header { margin-left: 6px; margin-right: 6px; padding-left: 6px; padding-right: 6px; }
}

/* ---------------------------------------------------------------- 7. PARTS DRAWN BY FILES THAT OTHER BUILDERS ARE EDITING NOW (nx-agentcard.jsx, nx-folders.jsx, nx-agents.jsx, nx-composer.jsx, the Recent work part of nx-home.jsx).
   Nothing in those files was touched. The gate found these small things on the screens they draw and every one is fixed here by CSS on the class names they have today; if a builder renames
   a class, the gate (tools/nx-resp-gate.mjs) names the selector again and the rule moves with it. Agent cards: the Chat and Run links, the small icon buttons and the star are 40 px
   targets; the Agents bar select is 16 px. Home composer: the four mode tabs share the row evenly and wrap their words. */
@media (max-width: 860px) {
  .nx-root .nx-ql { display: inline-flex; align-items: center; justify-content: center; min-height: var(--nx-tap); min-width: var(--nx-tap); }
  .nx-root .nx-iconb, .nx-root .nx-star { width: var(--nx-tap); height: var(--nx-tap); }
  .nx-root .nx-w0__bar .nx-select, .nx-root .nx-pal__row .nx-btn--sm { min-height: var(--nx-tap); }
  .nx-root.nx-root .nx-w0__bar .nx-select { font-size: 16px; }
}
@media (max-width: 560px) {
  .nx-root .nx-composer > .nx-chips { flex-wrap: nowrap; }
  .nx-root .nx-composer > .nx-chips > .nx-chip { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; padding-left: 6px; padding-right: 6px; }
}

/* ---------------------------------------------------------------- 8. RESP2 (22 Oct 2026): what the gate found on pages built after release H (the agent page Details tab, Make this agent better, People).
   A grid stack has one automatic column, which grows to the widest unbreakable child (a button that does not wrap, a stat) and pushes the page sideways: on a phone the column is the screen. */
@media (max-width: 860px) {
  .nx-root .nx-stack, .nx-root .nx-ag-sec { grid-template-columns: minmax(0, 1fr); }
  .nx-root .nx-ag-sec .nx-btn, .nx-root .nx-ag-actions .nx-btn { white-space: normal; max-width: 100%; min-width: 0; text-align: center; padding-top: var(--nx-s1); padding-bottom: var(--nx-s1); }
  .nx-root .nx-ag-sec__sub, .nx-root .nx-ag-steps li, .nx-root .nx-sub { overflow-wrap: anywhere; min-width: 0; }
  /* Details tab: the segmented choices (Radio buttons of Ant Design) and the colour swatches are 40 px targets */
  .nx-root .ant-radio-button-wrapper { height: var(--nx-tap); line-height: calc(var(--nx-tap) - 2px); }
  .nx-root .look-color { width: var(--nx-tap); height: var(--nx-tap); }
  .nx-root .look-icon { width: var(--nx-tap); height: var(--nx-tap); }
}
/* Performance mode (web/src/perf-css.mjs): the reduced-motion rules above under html.ao-perf, then perf-mode.css */
html.ao-perf .val-dot {
  animation: none;
}
html.ao-perf .look-pointer-ring {
  display: none;
}
html.ao-perf .look-pointer-arrow {
  animation: none;
}
html.ao-perf .side-menu .nav-attention,
html.ao-perf .blink-badge .ant-badge-count {
  animation: none;
}
html.ao-perf .xchg,
html.ao-perf .glow-orb,
html.ao-perf .dots i,
html.ao-perf .live-dot {
  animation: none !important;
}
html.ao-perf .chat-scroll {
  scroll-behavior: auto;
}
html.ao-perf .dash-card {
  transition: none;
}
html.ao-perf .dash-card:hover {
  transform: none;
}
html.ao-perf .ao-hl {
  animation: none;
}
html.ao-perf .as-fab.calling,
html.ao-perf .as-nudge,
html.ao-perf .as-panel,
html.ao-perf .as-dots i,
html.ao-perf .as-nudge-msg,
html.ao-perf .as-nudge-starts,
html.ao-perf .as-caret {
  animation: none;
}
html.ao-perf .av-bob,
html.ao-perf .av-shadow,
html.ao-perf .av-thrust,
html.ao-perf .av-lids,
html.ao-perf .av-ant,
html.ao-perf .as-chat circle {
  animation: none !important;
}
html.ao-perf .as-bot,
html.ao-perf .av-pupils {
  transition: none;
}
html.ao-perf .agw-topic,
html.ao-perf .agw-qs {
  animation: none;
  transition: none;
}
html.ao-perf .agw-topic:hover {
  transform: none;
}
html.ao-perf .as-tab,
html.ao-perf .as-pick,
html.ao-perf .as-ag-av.lg {
  animation: none;
  transition: none;
}
html.ao-perf .as-tab:hover,
html.ao-perf .as-tab.on {
  transform: none;
}
html.ao-perf .thr-me,
html.ao-perf .thr-ai,
html.ao-perf .pstep.st-ok .pstep-ic,
html.ao-perf .plan-bar i {
  animation: none;
  transition: none;
}
html.ao-perf .building-pill {
  animation: none;
}
html.ao-perf .mon-state .live-dot {
  animation: none;
}
html.ao-perf .studio-glow {
  animation: none;
}
html.ao-perf .bk-kpi,
html.ao-perf .bk-card,
html.ao-perf .bk-kpi-ic,
html.ao-perf .bk-spark,
html.ao-perf .bk-rank-track span {
  animation: none !important;
}
html.ao-perf .bk-kpi:hover,
html.ao-perf .bk-card:hover,
html.ao-perf .bk-kpi:hover .bk-kpi-ic,
html.ao-perf .bk-rank li:hover {
  transform: none;
}
html.ao-perf .gt-dot {
  animation: none;
}
html.ao-perf .use-group,
html.ao-perf .use-item,
html.ao-perf .use-thinking,
html.ao-perf .guide-item,
html.ao-perf .use-item .sys-card.sys-pick {
  animation: none !important;
  transition: none !important;
}
html.ao-perf .use-item .sys-card.sys-pick:not(.locked):hover,
html.ao-perf .guide-item:hover {
  transform: none;
}
html.ao-perf .sd-item,
html.ao-perf .sd-chip,
html.ao-perf .sd-ic,
html.ao-perf .sd-chev {
  animation: none !important;
  transition: none !important;
}
html.ao-perf .sd-item:hover,
html.ao-perf .sd-item:focus-visible,
html.ao-perf .sd-chip:hover,
html.ao-perf .sd-item:hover .sd-ic {
  transform: none;
}
html.ao-perf .af-card,
html.ao-perf .af-av {
  animation: none !important;
  transition: none !important;
}
html.ao-perf .af-card:hover,
html.ao-perf .af-card:focus-visible,
html.ao-perf .af-card:hover .af-av {
  transform: none;
}
html.ao-perf .arch-orb span,
html.ao-perf .arch-sug-chips .ant-tag,
html.ao-perf .arch-dots i,
html.ao-perf .arch-orb {
  transition: none !important;
  animation: none !important;
}
html.ao-perf .arch-use-chip,
html.ao-perf .sp-row {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}
html.ao-perf .teach-sec,
html.ao-perf .teach-chips .ant-tag,
html.ao-perf .teach-ok,
html.ao-perf .teach-ex {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}
html.ao-perf .ability.on {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}
html.ao-perf .am-stack span,
html.ao-perf .am-step,
html.ao-perf .am-journey-step,
html.ao-perf .am-way,
html.ao-perf .am-rec,
html.ao-perf .am-rec-ic,
html.ao-perf .am-chip,
html.ao-perf .am-attn {
  animation: none !important;
  transition: none !important;
}
html.ao-perf .am-chip:hover,
html.ao-perf .am-way:hover,
html.ao-perf .am-rec.ready {
  transform: none !important;
}
html.ao-perf .thr-doc {
  transition: none;
}
html.ao-perf .thr-doc:hover {
  transform: none;
}
html.ao-perf .vx-panel,
html.ao-perf .vx-panel::after,
html.ao-perf .vx-ring,
html.ao-perf .vx-core,
html.ao-perf .vx-rec,
html.ao-perf .composer-box .vx-mic.on {
  animation: none !important;
}
html.ao-perf .aria *,
html.ao-perf .aria-bubble {
  animation: none !important;
}
html.ao-perf .cu-chip {
  transition: none;
}
html.ao-perf .cu *,
html.ao-perf .cu-acc {
  animation: none !important;
  transition: none !important;
}
html.ao-perf .cu-acc:hover {
  transform: none;
}
html.ao-perf .tp-item {
  transition: none;
}
html.ao-perf .tp-item:hover {
  transform: none;
}
html.ao-perf .cut-acc,
html.ao-perf .cut-col-bar,
html.ao-perf .cut-bar i,
html.ao-perf .cut-ins-row {
  animation: none !important;
  transition: none !important;
}
html.ao-perf .cut-acc:hover {
  transform: none;
}
html.ao-perf .aria-art,
html.ao-perf .side-aria-mic,
html.ao-perf .side-aria-bubble {
  animation: none !important;
}
html.ao-perf .content-inner .ant-card,
html.ao-perf .side-menu .ant-menu-item,
html.ao-perf .ant-btn-primary {
  transition: none !important;
}
html.ao-perf .content-inner .ant-card-hoverable:hover,
html.ao-perf .side-menu .ant-menu-item:hover,
html.ao-perf .ant-btn-primary:hover {
  transform: none !important;
}
html.ao-perf .af-card,
html.ao-perf .h2-agent,
html.ao-perf .h2-idea,
html.ao-perf .h2-path,
html.ao-perf .gal-card,
html.ao-perf .gal-mini,
html.ao-perf .sd-item,
html.ao-perf .training-tile,
html.ao-perf .stat,
html.ao-perf .load-num {
  transition: none;
}
html.ao-perf .af-card:hover,
html.ao-perf .h2-agent:hover,
html.ao-perf .h2-idea:hover,
html.ao-perf .h2-path:hover,
html.ao-perf .gal-card:hover,
html.ao-perf .gal-mini:hover,
html.ao-perf .sd-item:hover,
html.ao-perf .training-tile:hover {
  transform: none;
}
html.ao-perf .mw-state.live,
html.ao-perf .mw-timeline li.now,
html.ao-perf .mw-panel-line.live .anticon {
  animation: none !important;
}
html.ao-perf .perm-new {
  animation: none;
}
html.ao-perf .send-opt,
html.ao-perf .send-opt.on {
  transition: none;
  transform: none;
}
html.ao-perf .learn-card,
html.ao-perf .learn-card:hover {
  transition: none;
  transform: none;
}
html.ao-perf .diff-add {
  animation: none;
}
html.ao-perf .agent-path li.now .dot {
  animation: none;
}
html.ao-perf .asx-ctx-more {
  animation: none;
}
html.ao-perf .as-live__cue i {
  animation: none;
  opacity: .6;
}
html.ao-perf .af-cardwrap,
html.ao-perf .fo-rail,
html.ao-perf .fo-ic i,
html.ao-perf .af-cardwrap > .agent-card,
html.ao-perf .fo-row {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}
html.ao-perf .cx-invite {
  animation: none;
}
html.ao-perf .cx-jarvis *,
html.ao-perf .cx-jarvis *::before {
  animation: none !important;
  transition: none !important;
}
html.ao-perf .cx-gold *,
html.ao-perf .cx-gold *::before,
html.ao-perf .cx-gold *::after {
  animation: none !important;
  transition: none !important;
}
html.ao-perf .as-panel .as-panel-body {
  scroll-behavior: auto;
}
html.ao-perf .stl-step {
  animation: none;
}
html.ao-perf .stl .anticon-loading,
html.ao-perf .stl .anticon-loading svg {
  animation: none !important;
}
html.ao-perf .tr-focus {
  animation: none;
}
html.ao-perf .conn-focus {
  animation: none;
}
html.ao-perf .ss-sum__c,
html.ao-perf .ss-sum__bg,
html.ao-perf .ss-tile {
  transform: none !important;
}
html.ao-perf .ss-tile:hover,
html.ao-perf .ss-tile:focus-within {
  border-color: var(--brand);
}
html.ao-perf .h3-card,
html.ao-perf .h3-btn {
  transition: none !important;
}
html.ao-perf .h3-card:hover,
html.ao-perf .h3-card:focus-within,
html.ao-perf .h3-btn:hover,
html.ao-perf .h3-btn:active {
  transform: none !important;
}
html.ao-perf .hc *,
html.ao-perf .hc *::before {
  animation: none !important;
  transition: none !important;
}
html.ao-perf .hc-stage {
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 4px;
}
html.ao-perf .hc-frame {
  position: static;
  opacity: 1;
  aspect-ratio: 16 / 10;
}
html.ao-perf .hc-cap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  min-height: 0;
}
html.ao-perf .hc-cap li {
  position: static;
  opacity: 1;
  font-size: 11px;
  font-weight: 400;
}
html.ao-perf .hc-dots,
html.ao-perf .hc-cur,
html.ao-perf .hc-tap {
  display: none;
}
html.ao-perf .cp *,
html.ao-perf .cp *::after {
  transition: none !important;
}
html.ao-perf .rvl-track i {
  transition: none;
}
html.ao-perf .nx-root *,
html.ao-perf .nx-root *::before,
html.ao-perf .nx-root *::after {
  animation: none !important;
  transition: none !important;
}
html.ao-perf .nx-root .nx-depth-card,
html.ao-perf .nx-root .nx-nav:hover,
html.ao-perf .nx-root .nx-nav:active,
html.ao-perf .nx-root .nx-bar .nx-nav:active,
html.ao-perf .nx-root.is-calm .nx-depth-card,
html.ao-perf .nx-root.is-calm .nx-nav:hover,
html.ao-perf .nx-root.is-calm .nx-nav:active {
  transform: none !important;
}
html.ao-perf .nx-root .nx-fx {
  display: none !important;
}
html.ao-perf .nx-root .nx-btn--primary:hover,
html.ao-perf .nx-root .nx-btn:active,
html.ao-perf .nx-root .nx-short:hover,
html.ao-perf .nx-root .nx-cz__theme:hover {
  transform: none !important;
}
html.ao-perf .nx-root .nx-skel {
  background: var(--color-skeleton);
}
html.ao-perf .nx-root .nx-draw {
  stroke-dashoffset: 0;
}
html.ao-perf .nx-root .nx-iconbtn:hover,
html.ao-perf .nx-root .nx-lang:hover,
html.ao-perf .nx-root .nx-chip:hover {
  transform: none !important;
}
html.ao-perf .nx-root .nx-dlg__ring,
html.ao-perf .nx-root .nx-dlg__mark {
  stroke-dashoffset: 0;
}
html.ao-perf .nx-root .nx-dlg__dot {
  opacity: 1;
}
html.ao-perf .nx-root .nx-dlg__timer {
  display: none;
}
html.ao-perf .nx-root .nx-dlg__spin {
  border-top-color: var(--nx-blue);
  border-right-color: var(--nx-blue);
}
html.ao-perf .nx-root .nx-ac:hover,
html.ao-perf .nx-root .nx-ac:focus-within {
  transform: none;
}
html.ao-perf .nx-root .nx-rail__f.is-over {
  transform: none;
}
html.ao-perf .nx-root .nx-bcard:hover,
html.ao-perf .nx-root .nx-bcard:focus-within,
html.ao-perf .nx-root .nx-arow:hover {
  translate: none;
}
html.ao-perf .nx-root .nx-strip .anticon-spin,
html.ao-perf .nx-root .nx-cmp__send .anticon-spin {
  animation-name: none;
}
html.ao-perf .ec-area *,
html.ao-perf .ec-area *::before,
html.ao-perf .ec-area *::after {
  animation: none !important;
  transition: none !important;
}
html.ao-perf .ec-pre .ec-body,
html.ao-perf .ec-pre .ec-val,
html.ao-perf .ec-pre .ec-hexshape,
html.ao-perf .ec-pre .ec-vertex {
  opacity: 1;
}
html.ao-perf .ec-hit:hover,
html.ao-perf .ec-hit:focus-visible,
html.ao-perf .ec-hit.ec-act {
  transform: none !important;
}
html.ao-perf .ec-hit:hover .ec-val,
html.ao-perf .ec-hit:focus-visible .ec-val,
html.ao-perf .ec-hit.ec-act .ec-val {
  font-weight: 900;
  text-decoration: underline;
}
html.ao-perf .ec-hit:hover .ec-body,
html.ao-perf .ec-hit:focus-visible .ec-body,
html.ao-perf .ec-hit.ec-act .ec-body {
  outline: 3px solid currentColor;
}
html.ao-perf .bd-area * {
  transition: none !important;
  animation: none !important;
}
html.ao-perf .st-area * {
  transition: none !important;
  animation: none !important;
}
html.ao-perf .hg-card {
  transition: none;
}
html.ao-perf .hg-card:hover,
html.ao-perf .hg-card:focus-within {
  transform: none;
}
html.ao-perf .pg-stage {
  transform: none !important;
  transition: none;
}
html.ao-perf .pg-bar s {
  transition: none;
}
html.ao-perf .nx-root .hg-card,
html.ao-perf .nx-root .pf-press,
html.ao-perf .nx-root .pf-press:hover {
  transition: none;
  transform: none;
}
html.ao-perf .nx-root .pf-layer {
  transition: none;
  transform: none;
}
html.ao-perf .nx-root .pf-shape {
  animation: none !important;
}
html.ao-perf .nx-root .hg-card,
html.ao-perf .nx-root .hg-card:hover,
html.ao-perf .nx-root .hg-card:focus-within {
  transform: none;
}
html.ao-perf .nx-root.nx-shell:not(.is-fx-off):not(.is-calm) .nx-fx {
  display: block !important;
}
html.ao-perf .nx-root .nx-fx > i {
  animation: none;
}
html.ao-perf .nx-root .nx-bgbtn.is-busy svg,
html.ao-perf .nx-root .nx-bg__dot {
  animation: none;
}
html.ao-perf .nx-root .nx-dv-skel,
html.ao-perf .nx-root .nx-dv-card,
html.ao-perf .nx-root .nx-dv-chip {
  animation: none;
  transition: none;
}
html.ao-perf .nx-root .nx-dv-art rect {
  animation: none;
}
html.ao-perf .nx-root .nx-ac.nx-ag,
html.ao-perf .nx-root .nx-ag-pill--info svg {
  animation: none;
  transition: none;
}
html.ao-perf .nx-root .nx-shelf__plate,
html.ao-perf .nx-root .nx-shelf__plate:hover {
  transform: none;
}
html.ao-perf .nx-root .nx-bt-step,
html.ao-perf .nx-root .nx-bt-tool,
html.ao-perf .nx-root .nx-bt-chip,
html.ao-perf .nx-root .nx-bt-go.nx-btn {
  transition: none;
}
html.ao-perf .nx-root .nx-bt-spin,
html.ao-perf .nx-root .nx-bt-dot {
  animation: none;
}
html.ao-perf .nx-root .nx-bt-chip:hover,
html.ao-perf .nx-root .nx-bt-tool:hover,
html.ao-perf .nx-root .nx-bt-go.nx-btn:hover:not(:disabled) {
  transform: none;
}
html.ao-perf .nx-root .nx-mt-card,
html.ao-perf .nx-root .nx-mt-card:hover,
html.ao-perf .nx-root .nx-mt-card--next,
html.ao-perf .nx-root .nx-mt-card--next:hover {
  transform: none;
  transition: none;
}
html.ao-perf .nx-root .nx-mt-view {
  animation: nx-mt-fade var(--nx-d2) linear both;
}
html.ao-perf .nx-root .nx-mt-drawer {
  animation: nx-mt-fade var(--nx-d2) linear both;
}
html.ao-perf .nx-root .nx-mt-fold.is-open > .nx-mt-prep {
  animation: nx-mt-fade var(--nx-d2) linear both;
}
html.ao-perf .nx-root .nx-mt-skel::after,
html.ao-perf .nx-root .nx-mt-spin {
  animation: none;
}
html.ao-perf .nx-root .nx-mt-now,
html.ao-perf .nx-root .nx-mt-chev {
  transition: none;
}
html.ao-perf .nx-root .nx-mt-block,
html.ao-perf .nx-root .nx-mt-join,
html.ao-perf .nx-root .nx-mt-iconbtn {
  transition: none;
  transform: none;
}
html.ao-perf .nx-root .nx-mt-empty__art {
  transform: none;
}
html.ao-perf .nx-root .nx-mtr__card {
  animation: nx-mtr-fade var(--nx-d2) linear both;
  transform: none;
}
html.ao-perf .nx-root .nx-ach__badge,
html.ao-perf .nx-root .nx-sheet {
  animation: none;
  transform: none;
}
html.ao-perf .nx-root .nx-mk__ico {
  transform: none;
}
html.ao-perf .opm-orb,
html.ao-perf .opm-chip,
html.ao-perf .opm-tile,
html.ao-perf .opm-lock {
  animation: none;
}
html.ao-perf .opm-ring,
html.ao-perf .opm-tile {
  transition: none;
}
html.ao-perf .opm-tile:hover,
html.ao-perf .opm-hero {
  transform: none;
}
html.ao-perf .opm-chip {
  transform: rotate(var(--a, 0deg)) translateX(88px) rotate(calc(-1 * var(--a, 0deg)));
}
html.ao-perf .t3d-float,
html.ao-perf .t3d-shape,
html.ao-perf .t3d-glow,
html.ao-perf .t3d-tile,
html.ao-perf .t3d-bar {
  animation: none;
}
html.ao-perf .nx-root .nx-ac.nx-ag.nx-c3,
html.ao-perf .nx-root .nx-ac.nx-ag.nx-c3:hover {
  transition: none;
  transform: none;
}
html.ao-perf .nx-root .nx-ac.nx-c3 .nx-ag-tile {
  transform: none;
}
html.ao-perf .nx-root .nx-c3 .nx-c3-bar,
html.ao-perf .nx-root .nx-c3 .nx-ag-sys,
html.ao-perf .nx-root .nx-c3 .nx-c3-try {
  animation: none;
  transition: none;
  transform: none;
}
html.ao-perf .nx-root .nx-ac.nx-c3:hover .nx-ag-tile {
  transform: none;
}
html.ao-perf .nx-root .nx-c3 .nx-c3-fix {
  transition: none;
  transform: none;
}
html.ao-perf .nx-root .nx-fd-chip,
html.ao-perf .nx-root .nx-fd-jchip,
html.ao-perf .nx-root .nx-fd-panel__chev {
  transition: none;
}

/* PERFORMANCE MODE (6 Nov 2026, Jonathan Leung: the NOC team in China finds Agents Office laggy). html.ao-perf is set by theme-boot.js before the first paint (the person's choice, or the browser says it is slow)
   and by the Customizer. Nothing here changes what a page says or does, only how much the computer has to draw: no blur, no drifting colour discs, no animation, no transition.
   The reduced-motion rules of the other files are copied under html.ao-perf by web/perf-css.mjs, so a page that stands still is drawn the way it is for a person who asked for less motion. */
html.ao-perf *, html.ao-perf *::before, html.ao-perf *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-shadow: none !important; scroll-behavior: auto !important; }
/* the turning ring of the loading spinners stays: a spinner that stands still looks like a hung page, on a slow link most of all */
html.ao-perf :not(.ant-spin-dot-spin):not(.ant-spin-dot-spin *), html.ao-perf :not(.ant-spin-dot-spin)::before, html.ao-perf :not(.ant-spin-dot-spin)::after { animation: none !important; transition: none !important; }
html.ao-perf .nx-root.nx-shell::before, html.ao-perf .nx-root.nx-shell::after, html.ao-perf .nx-root .nx-fx { display: none !important; }